@snowpak/search-widget

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

Dependencies

All exported comoonents require two external dependencies to be provided:

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.

RoomSelect

Room select UI

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

const Component = () => {
  return (
    <ThemeProvider>
      <ApolloProvider client={client}>
        <RoomSelect />
      </ApolloProvider>
    </ThemeProvider>
  );
};

SearchWidget

Standalone Search Widget UI.

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

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

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

Development

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

$ 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:

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:

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