storybook.md

Storybook

Storybook is a great tool for working on UI in isolation. Generally all UI should have a storybook file so it can easily be updated and it's a great way to break up a feature into smaller PRs.

Getting Started with Storybook

Storybook uses the same entry point as our main app (index.js), so you'll need to temporarily modify the entry point to run Storybook.

Steps to Run Storybook:

1. Modify the entry point - Open index.js in the project root

2. Enable Storybook imports - Uncomment the following lines:

   import Storybook from './.storybook';
   AppRegistry.registerComponent(name, () => Storybook);

3. Disable the regular app registration - Comment out the following lines:

   // AppRegistry.registerComponent(name, () =>
   //   // Disable Sentry for E2E tests
   //   isE2E ? Root : Sentry.wrap(Root),
   // );

4. Run the app - Start the app as you normally would

5. View Storybook - The app will now launch with the Storybook UI instead of the regular app

Updating Storybook requires

Whenever you add, remove, or move *.stories.* files, regenerate Storybook's requires list:

yarn storybook-generate

This ensures Storybook picks up all stories correctly in the app.

Reverting Back to Normal App

When you're done with Storybook:

1. Re-comment the Storybook imports:

   // import Storybook from './.storybook';
   // AppRegistry.registerComponent(name, () => Storybook);

2. Uncomment the regular app registration:

   AppRegistry.registerComponent(name, () =>
     // Disable Sentry for E2E tests
     isE2E ? Root : Sentry.wrap(Root),
   );

Note: Make sure not to commit these changes to index.js as they are only for local development with Storybook.