SnowPak Search Widget 

React Search Widget UI and logic to be used across SnowPak's NextJS applications. To install, run the following command:

``
npm install --save @snowpak/search-widget
`

Usage

$3

1. must be rendered within an ApolloProvider from apollo-client, with SnowPak's GraphQL API setup.
2. must be rendered within a styled-component ThemeProvider. This widget re-exports a ThemeProvider with updated theme variables.

There are two ways to use this package, either as standalone RoomSelect or an entire search widget SearchWidget - see storybook for details.

$3

`tsx
import { ThemeProvider, RoomSelect } from '@snowpak/search-widget';

const Component = () => {
return (





);
};

`

$3

props:
- submitHandler - Required. Called when the form is submitted.
- initialContext - Widget behaviour configuration - see storybook examples
- initialFormValues - used to pre-populate the form with data

`tsx
import { SearchWidget } from '@snowpak/search-widget';

const Component = () => {
return (
initialContext={initialContext}
initialFormValues={initialFormValues}
submitHandler={searchWidgetSubmitHandler}
/>
)
}

`

Development

Storybook has been setup to inspect the components locally. To start storybook, run the following command:

`zsh
$ npm run storybook
`

Build

This project is built via typescript's tsc and ttypescript's ttsc for both ESM and CJS formats. To build locally for testing purposes, run the following command:

`zsh
npm run build
`

Publish

This package is instended to be deployed to npm under the package name @snowpak/search-widget.

The np library is used to perform the deployment, including:
1. SemVer version bumping
2. Building with pristine dependencies
3. Running tests/linters
4. Releasing to npm
5. Creating a new GitHub release

To deploy, run the following command:

`zsh
npm run release
`

Review

Chromatic has been configured to run on Pull Requests and any new commits on the master` branch. To view these changes, visit https://www.chromatic.com/builds?appId=5fc72fd4d1a158002151a1ae