Skip to content

Commit

Permalink
fix(docs): remove the section on configuring Storybook's manager (#8801)
Browse files Browse the repository at this point in the history
  • Loading branch information
jtoar authored Jul 1, 2023
1 parent 9fb4c21 commit 482c572
Showing 1 changed file with 12 additions and 37 deletions.
49 changes: 12 additions & 37 deletions docs/docs/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`:

Expand All @@ -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:
Expand All @@ -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).

0 comments on commit 482c572

Please sign in to comment.