react-cimpress-baywatch

This repository stores a react component that anyone can use to conveniently enable the user to watch and be informed of changes to the resources they might take interest in.

Usage

Install the npm package

npm install react-cimpress-baywatch --save

import the component

import { WatchButton } from 'react-cimpress-baywatch'

and then use wherever needed

render() {

    return (
      <div>
        <WatchButton
            accessToken={...}
            resourceUri={...} />
      </div>
    );
  }

There are additional components in this package as well, and their usage follows a similar pattern:

• WatchIcon,
• WatchCheckbox,
• WatchToggle,

Development

Make sure you have the up-to-date translation files by calling

CLIENT_ID="<here the client id>" CLIENT_SECRET="<here the client secret>" npm run translate

For developing you can use storybook

npm run start

This will run an instance of Storybook integrated with Auth0 and providing the components in this package in environment as close as possible to production. It is useful to manually play with the components and validate if the features you are working on are as you'd like them to be from UX point of view.

In some case, modelling a special condition is hard without mocking. The package also provides an alternative and isolated Storybook environment where all external dependencies are mocked. This is extremely useful to validate a certain behavior in particular situation.

npm run storybook

This command will run the Storybook in the background. You can later stop it by running npm run storybookstop.

During and after development it is good to check or update BackstopJS data. Running the UI tests is done by backstop test after executing npm run storybook.

Note: Make sure you have backstop installed npm install -g backstopjs or use the one in node_modules.