diff --git a/docs/docs/storybook.md b/docs/docs/storybook.md index 5cff14cd758f..0bfc41bfd573 100644 --- a/docs/docs/storybook.md +++ b/docs/docs/storybook.md @@ -21,30 +21,35 @@ You can start Storybook with `yarn rw storybook`: yarn rw storybook ``` -This spins up Storybook on port `7910`. +If this is your first time running Storybook, the Redwood CLI will install it. +From then on, you can run it straightaway. +Once Storybook is installed, it'll spin up on port `7910`. ## Configuring Storybook You only have to configure Storybook if you want to extend Redwood's default configuration, which handles things like how to find stories, configuring Webpack, starting Mock Service Worker, etc. -There are three files you can add to your project's `web/config` directory to configure Storybook: `storybook.config.js`, `storybook.manager.js`, and `storybook.preview.js`. Note that you may have to create the `web/config` directory: +There are two files you can add to your project's `web/config` directory to configure Storybook: `storybook.config.js` and `storybook.preview.js`. Note that you may have to create the `web/config` directory: ``` cd redwood-project/web mkdir config -touch config/storybook.config.js config/storybook.manager.js config/storybook.preview.js +touch config/storybook.config.js config/storybook.preview.js ``` -`storybook.config.js` configures Storybook's server, `storybook.manager.js` configures Storybook's UI, and `storybook.preview.js` configures the way stories render. +`storybook.config.js` configures Storybook's server and `storybook.preview.js` configures the way stories render. All of these files get merged with Redwood's default configurations, which you can find in the `@redwoodjs/testing` package: - [main.js](https://github.com/redwoodjs/redwood/blob/main/packages/testing/config/storybook/main.js)—gets merged with your project's `storybook.config.js` -- [manager.js](https://github.com/redwoodjs/redwood/blob/main/packages/testing/config/storybook/manager.js)—gets merged with your project's `storybook.manager.js` - [preview.js](https://github.com/redwoodjs/redwood/blob/main/packages/testing/config/storybook/preview.js)—gets merged with your project's `storybook.preview.js` ### Configuring the Server with `storybook.config.js` -> Since `storybook.config.js` configures Storybook's server, note that any changes you make require restarting Storybook. +:::tip You may have to restart Storybook + +Since `storybook.config.js` configures Storybook's server, changes you make may require restarting Storybook. + +::: While you can configure [any of Storybook server's available options](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project) in `storybook.config.js`, you'll probably only want to configure `addons`: @@ -62,7 +67,7 @@ module.exports = { ### Configuring Rendering with `storybook.preview.js` Sometimes you want to change the way all your stories render. -It'd be mixing concerns to add that logic to your actual components, and it'd get old fast to add it to every single `.stories.js` file. +It'd be mixing concerns to add that logic to your actual components, and it'd get old fast to add it to every single `.stories.{jsx,tsx}` file. Instead decorate all your stories with any custom rendering logic you want in `storybook.preview.js`. For example, something you may want to do is add some margin to all your stories so that they're not glued to the top left corner: @@ -78,33 +83,3 @@ export const decorators = [ ``` For more, see the Storybook docs on [configuring how stories render](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering). - -### Configuring the UI with `storybook.manager.js` - -> Note that some of the changes you make to Storybook's UI require refreshing its cache. -> The easiest way to do so is when starting Storybook: -> -> ``` -> yarn rw storybook --no-manager-cache -> ``` - -You can [theme Storybook's UI](https://storybook.js.org/docs/react/configure/theming) by installing two packages and making a few changes to Redwood's initial configuration. - -From the root of your RedwoodJS project: - -``` -yarn workspace web add -D @storybook/addons @storybook/theming -``` - -Then, we'll configure our theme by creating a `storybook.manager.js` file. Below we're enabling Storybook's dark theme. - -```javascript title="web/config/storybook.manager.js" -import { addons } from '@storybook/addons' -import { themes } from '@storybook/theming' - -addons.setConfig({ - theme: themes.dark, -}) -``` - -Check out [Storybook's theming quickstart](https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart) for a guide on creating your own theme. You may also want to export your theme to [re-use it with Storybook Docs](https://storybook.js.org/docs/react/configure/theming#theming-docs).