Styleguide - ral-facilities/scigateway GitHub Wiki

The styleguide for the DAaaS frontend is written using Storybook This is helpful to showcase components independently from the application itself and for testing. You generally want to add a story for each state that your component can be in, see src/stories/mainAppBar.stories.tsx which gives examples of the MainAppBar component when the user is logged in and also not logged in.

To run the storybook locally use:

yarn storybook

To build the artifacts that can be hosted statically use:

yarn build-storybook

The output goes into the storybook-static folder and the static contents of this can be served with any particular web server (e.g. the npm serve package with yarn global add serve then serve ./storybook-static from the root of the repo).

Stories can be added in the stories folder where you can find some examples. This page will be expanded as more instructions about writing story files for components are needed, but examples are the best way of understanding how to add content to storybook.

Dealing with Redux

There are two ways to "deal" with Redux connected components in Storybook. The first is to export a non-connected version of your component and use that instead of the regular Redux connected one and supply any Redux state and actions manually - see src/stories/navigationDrawer.stories.tsx for this approach. The other is to add the Redux decorator to the story which wraps the component in a Provider component - see src/stories/mainAppBar.stories.tsx for this approach.