Skip to content

Commit

Permalink
Link to storybook 7 docs from redwood 7 and going forward
Browse files Browse the repository at this point in the history
  • Loading branch information
Philzen committed Jan 15, 2025
1 parent e26f1e8 commit 71b62c9
Show file tree
Hide file tree
Showing 23 changed files with 40 additions and 40 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// }
// ```
//
// See https://storybook.js.org/docs/react/writing-stories/args.
// See https://storybook.js.org/docs/7/writing-stories/args

import type { Meta, StoryObj } from '@storybook/react'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// }
// ```
//
// See https://storybook.js.org/docs/react/writing-stories/args.
// See https://storybook.js.org/docs/7/writing-stories/args

import type { Meta, StoryObj } from '@storybook/react'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// }
// ```
//
// See https://storybook.js.org/docs/react/writing-stories/args.
// See https://storybook.js.org/docs/7/writing-stories/args

import type { Meta, StoryObj } from '@storybook/react'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// }
// ```
//
// See https://storybook.js.org/docs/react/writing-stories/args.
// See https://storybook.js.org/docs/7/writing-stories/args

import type { Meta, StoryObj } from '@storybook/react'

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/cli-commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -2126,7 +2126,7 @@ Starts Storybook locally
yarn redwood storybook
```
[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
[Storybook](https://storybook.js.org/docs/6/get-started/install) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
> "Props in, views out! Make it simple to reason about."
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,4 @@ If you've been using Storybook for a while, you might need to take some manual s

If you don't have any custom [Storybook configuration](https://redwoodjs.com/docs/7.x/storybook/#configuring-storybook), you should be good to go - no changes needed. The Out of Box experience should be the same, and please [let us know](https://github.com/redwoodjs/redwood/issues/new?assignees=&labels=bug%2Fneeds-info&projects=&template=bug-report.yml&title=%5BBug%5D%3A+) if you run into any issues.

If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/writing-stories/decorators#global-decorators
If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/7/writing-stories/decorators#global-decorators
2 changes: 1 addition & 1 deletion docs/versioned_docs/version-7.x/cli-commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -2105,7 +2105,7 @@ Starts Storybook locally
yarn redwood storybook
```
[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
[Storybook](https://storybook.js.org/docs/7/get-started/install) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
> "Props in, views out! Make it simple to reason about."
Expand Down
4 changes: 2 additions & 2 deletions docs/versioned_docs/version-7.x/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Since `storybook.config.js` configures Storybook's server, changes you make may

:::

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`:
While you can configure [any of Storybook server's available options](https://storybook.js.org/docs/7/configure) in `storybook.config.js`, you'll probably only want to configure `addons`:

```javascript title="web/config/storybook.config.js"
module.exports = {
Expand Down Expand Up @@ -82,4 +82,4 @@ 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).
For more, see the Storybook docs on [configuring how stories render](https://storybook.js.org/docs/7/configure#configure-story-rendering).
2 changes: 1 addition & 1 deletion docs/versioned_docs/version-8.0/cli-commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -2126,7 +2126,7 @@ Starts Storybook locally
yarn redwood storybook
```
[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
[Storybook](https://storybook.js.org/docs/7/get-started/install) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
> "Props in, views out! Make it simple to reason about."
Expand Down
8 changes: 4 additions & 4 deletions docs/versioned_docs/version-8.0/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ You don't have to start the dev server, login as a user, tab through dropdowns,
And say goodbye to rendering a whole page and make six GraphQL calls just to change the color of a modal!
You can set up every component as a story and tweak it within Storybook. And for any [cells](./cells.md), [mocking GraphQL could not be easier!](./how-to/mocking-graphql-in-storybook.md)

RedwoodJS offers a Storybook integration leveraging Storybook's [Framework Packages](https://storybook.js.org/docs/configure/integration/frameworks),
RedwoodJS offers a Storybook integration leveraging Storybook's [Framework Packages](https://storybook.js.org/docs/7/configure/integration/frameworks),
using Vite as its bundler to align with your production project.

An older version of our Storybook integration used Webpack as its bundler — For more information on the differences, see [this forum post](https://community.redwoodjs.com/t/storybook-in-redwood-is-moving-to-vite/7212).
Expand All @@ -32,15 +32,15 @@ If this is your first time running Storybook:
- The Redwood CLI will install Storybook, the framework package, and all related dependencies.
- The Redwood CLI will create the following config files for you:
- `web/.storybook/main.ts`
- This is the primary [Storybook configuration file](https://storybook.js.org/docs/configure). Note that it references our framework package, [`storybook-framework-redwoodjs-vite`](https://www.npmjs.com/package/storybook-framework-redwoodjs-vite).
- This is the primary [Storybook configuration file](https://storybook.js.org/docs/7/configure). Note that it references our framework package, [`storybook-framework-redwoodjs-vite`](https://www.npmjs.com/package/storybook-framework-redwoodjs-vite).
- `web/.storybook/preview-body.html`
- This is required to change the `id` of the root div to `redwood-app`, which is what the entry file used by Vite requires.

Once Storybook is all set up, it'll spin up on localhost port `7910` and open your browser.

## Configuring Storybook

To configure Storybook, please follow [the official Storybook docs](https://storybook.js.org/docs/configure).
To configure Storybook, please follow [the official Storybook docs](https://storybook.js.org/docs/7/configure).

## Migrating from Storybook Webpack to Storybook Vite

Expand All @@ -50,4 +50,4 @@ If you've been using Storybook for a while, you might need to take some manual s

If you don't have any custom [Storybook configuration](https://redwoodjs.com/docs/storybook#configuring-storybook), you should be good to go - no changes needed. The Out of Box experience should be the same, and please [let us know](https://github.com/redwoodjs/redwood/issues/new?assignees=&labels=bug%2Fneeds-info&projects=&template=bug-report.yml&title=%5BBug%5D%3A+) if you run into any issues.

If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/writing-stories/decorators#global-decorators
If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/7/writing-stories/decorators#global-decorators
2 changes: 1 addition & 1 deletion docs/versioned_docs/version-8.1/cli-commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -2126,7 +2126,7 @@ Starts Storybook locally
yarn redwood storybook
```
[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
[Storybook](https://storybook.js.org/docs/7/get-started/install) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
> "Props in, views out! Make it simple to reason about."
Expand Down
8 changes: 4 additions & 4 deletions docs/versioned_docs/version-8.1/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ You don't have to start the dev server, login as a user, tab through dropdowns,
And say goodbye to rendering a whole page and make six GraphQL calls just to change the color of a modal!
You can set up every component as a story and tweak it within Storybook. And for any [cells](./cells.md), [mocking GraphQL could not be easier!](./how-to/mocking-graphql-in-storybook.md)

RedwoodJS offers a Storybook integration leveraging Storybook's [Framework Packages](https://storybook.js.org/docs/configure/integration/frameworks),
RedwoodJS offers a Storybook integration leveraging Storybook's [Framework Packages](https://storybook.js.org/docs/7/configure/integration/frameworks),
using Vite as its bundler to align with your production project.

An older version of our Storybook integration used Webpack as its bundler — For more information on the differences, see [this forum post](https://community.redwoodjs.com/t/storybook-in-redwood-is-moving-to-vite/7212).
Expand All @@ -32,15 +32,15 @@ If this is your first time running Storybook:
- The Redwood CLI will install Storybook, the framework package, and all related dependencies.
- The Redwood CLI will create the following config files for you:
- `web/.storybook/main.ts`
- This is the primary [Storybook configuration file](https://storybook.js.org/docs/configure). Note that it references our framework package, [`storybook-framework-redwoodjs-vite`](https://www.npmjs.com/package/storybook-framework-redwoodjs-vite).
- This is the primary [Storybook configuration file](https://storybook.js.org/docs/7/configure). Note that it references our framework package, [`storybook-framework-redwoodjs-vite`](https://www.npmjs.com/package/storybook-framework-redwoodjs-vite).
- `web/.storybook/preview-body.html`
- This is required to change the `id` of the root div to `redwood-app`, which is what the entry file used by Vite requires.

Once Storybook is all set up, it'll spin up on localhost port `7910` and open your browser.

## Configuring Storybook

To configure Storybook, please follow [the official Storybook docs](https://storybook.js.org/docs/configure).
To configure Storybook, please follow [the official Storybook docs](https://storybook.js.org/docs/7/configure).

## Migrating from Storybook Webpack to Storybook Vite

Expand All @@ -50,4 +50,4 @@ If you've been using Storybook for a while, you might need to take some manual s

If you don't have any custom [Storybook configuration](https://redwoodjs.com/docs/storybook#configuring-storybook), you should be good to go - no changes needed. The Out of Box experience should be the same, and please [let us know](https://github.com/redwoodjs/redwood/issues/new?assignees=&labels=bug%2Fneeds-info&projects=&template=bug-report.yml&title=%5BBug%5D%3A+) if you run into any issues.

If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/writing-stories/decorators#global-decorators
If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/7/writing-stories/decorators#global-decorators
2 changes: 1 addition & 1 deletion docs/versioned_docs/version-8.2/cli-commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -2126,7 +2126,7 @@ Starts Storybook locally
yarn redwood storybook
```
[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
[Storybook](https://storybook.js.org/docs/7/get-started/install) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
> "Props in, views out! Make it simple to reason about."
Expand Down
8 changes: 4 additions & 4 deletions docs/versioned_docs/version-8.2/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ You don't have to start the dev server, login as a user, tab through dropdowns,
And say goodbye to rendering a whole page and make six GraphQL calls just to change the color of a modal!
You can set up every component as a story and tweak it within Storybook. And for any [cells](./cells.md), [mocking GraphQL could not be easier!](./how-to/mocking-graphql-in-storybook.md)

RedwoodJS offers a Storybook integration leveraging Storybook's [Framework Packages](https://storybook.js.org/docs/configure/integration/frameworks),
RedwoodJS offers a Storybook integration leveraging Storybook's [Framework Packages](https://storybook.js.org/docs/7/configure/integration/frameworks),
using Vite as its bundler to align with your production project.

An older version of our Storybook integration used Webpack as its bundler — For more information on the differences, see [this forum post](https://community.redwoodjs.com/t/storybook-in-redwood-is-moving-to-vite/7212).
Expand All @@ -32,15 +32,15 @@ If this is your first time running Storybook:
- The Redwood CLI will install Storybook, the framework package, and all related dependencies.
- The Redwood CLI will create the following config files for you:
- `web/.storybook/main.ts`
- This is the primary [Storybook configuration file](https://storybook.js.org/docs/configure). Note that it references our framework package, [`storybook-framework-redwoodjs-vite`](https://www.npmjs.com/package/storybook-framework-redwoodjs-vite).
- This is the primary [Storybook configuration file](https://storybook.js.org/docs/7/configure). Note that it references our framework package, [`storybook-framework-redwoodjs-vite`](https://www.npmjs.com/package/storybook-framework-redwoodjs-vite).
- `web/.storybook/preview-body.html`
- This is required to change the `id` of the root div to `redwood-app`, which is what the entry file used by Vite requires.

Once Storybook is all set up, it'll spin up on localhost port `7910` and open your browser.

## Configuring Storybook

To configure Storybook, please follow [the official Storybook docs](https://storybook.js.org/docs/configure).
To configure Storybook, please follow [the official Storybook docs](https://storybook.js.org/docs/7/configure).

## Migrating from Storybook Webpack to Storybook Vite

Expand All @@ -50,4 +50,4 @@ If you've been using Storybook for a while, you might need to take some manual s

If you don't have any custom [Storybook configuration](https://redwoodjs.com/docs/storybook#configuring-storybook), you should be good to go - no changes needed. The Out of Box experience should be the same, and please [let us know](https://github.com/redwoodjs/redwood/issues/new?assignees=&labels=bug%2Fneeds-info&projects=&template=bug-report.yml&title=%5BBug%5D%3A+) if you run into any issues.

If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/writing-stories/decorators#global-decorators
If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/7/writing-stories/decorators#global-decorators
2 changes: 1 addition & 1 deletion docs/versioned_docs/version-8.3/cli-commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -2126,7 +2126,7 @@ Starts Storybook locally
yarn redwood storybook
```
[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
[Storybook](https://storybook.js.org/docs/7/get-started/install) is a tool for UI development that allows you to develop your components in isolation, away from all the conflated cruft of your real app.
> "Props in, views out! Make it simple to reason about."
Expand Down
8 changes: 4 additions & 4 deletions docs/versioned_docs/version-8.3/storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ You don't have to start the dev server, login as a user, tab through dropdowns,
And say goodbye to rendering a whole page and make six GraphQL calls just to change the color of a modal!
You can set up every component as a story and tweak it within Storybook. And for any [cells](./cells.md), [mocking GraphQL could not be easier!](./how-to/mocking-graphql-in-storybook.md)

RedwoodJS offers a Storybook integration leveraging Storybook's [Framework Packages](https://storybook.js.org/docs/configure/integration/frameworks),
RedwoodJS offers a Storybook integration leveraging Storybook's [Framework Packages](https://storybook.js.org/docs/7/configure/integration/frameworks),
using Vite as its bundler to align with your production project.

An older version of our Storybook integration used Webpack as its bundler — For more information on the differences, see [this forum post](https://community.redwoodjs.com/t/storybook-in-redwood-is-moving-to-vite/7212).
Expand All @@ -32,15 +32,15 @@ If this is your first time running Storybook:
- The Redwood CLI will install Storybook, the framework package, and all related dependencies.
- The Redwood CLI will create the following config files for you:
- `web/.storybook/main.ts`
- This is the primary [Storybook configuration file](https://storybook.js.org/docs/configure). Note that it references our framework package, [`storybook-framework-redwoodjs-vite`](https://www.npmjs.com/package/storybook-framework-redwoodjs-vite).
- This is the primary [Storybook configuration file](https://storybook.js.org/docs/7/configure). Note that it references our framework package, [`storybook-framework-redwoodjs-vite`](https://www.npmjs.com/package/storybook-framework-redwoodjs-vite).
- `web/.storybook/preview-body.html`
- This is required to change the `id` of the root div to `redwood-app`, which is what the entry file used by Vite requires.

Once Storybook is all set up, it'll spin up on localhost port `7910` and open your browser.

## Configuring Storybook

To configure Storybook, please follow [the official Storybook docs](https://storybook.js.org/docs/configure).
To configure Storybook, please follow [the official Storybook docs](https://storybook.js.org/docs/7/configure).

## Migrating from Storybook Webpack to Storybook Vite

Expand All @@ -50,4 +50,4 @@ If you've been using Storybook for a while, you might need to take some manual s

If you don't have any custom [Storybook configuration](https://redwoodjs.com/docs/storybook#configuring-storybook), you should be good to go - no changes needed. The Out of Box experience should be the same, and please [let us know](https://github.com/redwoodjs/redwood/issues/new?assignees=&labels=bug%2Fneeds-info&projects=&template=bug-report.yml&title=%5BBug%5D%3A+) if you run into any issues.

If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/writing-stories/decorators#global-decorators
If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/7/writing-stories/decorators#global-decorators
Loading

0 comments on commit 71b62c9

Please sign in to comment.