This PR stalled out and could use some community help. v7 contains a lot of breaking changes. The challenge is upgrading the Redwood internal config for handling integration, especially with Cells and mocking data.
Although it’s not critical for this PR, we are also looking to upgrade the Redwood Storybook generators to use the latest component story format.
Note: we are keeping Webpack as the Storybook bundler. In the future, we plan to move to Vite and could use community support for that as well.
redwoodjs:renovate/major-storybook-monorepo ← redwoodjs:SG-04-02-Upgrade_to_Storybook_V7
opened 03:53AM - 03 Apr 23 UTC
cc @dom
Work completed in this PR:
redwoodjs:main ← redwoodjs:ds-storybook/v7
opened 03:30AM - 17 May 23 UTC
I got Storybook v7 to start with these changes. To test:
- clone this PR; yar… n install, yarn build, etc
- in a Redwood app, add `storybook` to the web side (this won't be necessary when this PR is merged and `@redwoodjs/testing` is published with these changes):
```
cd web
yarn add -D storybook
```
- in the Redwood app, `yarn rwfw project:sync`, `yarn rw sb` (make sure you have stories)
<img width="960" alt="image" src="https://github.com/redwoodjs/redwood/assets/32992335/4491ab95-5f17-4577-828d-487b7b1d542a">
Working notes:
- migration guide https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700
- manager has been removed completely: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#no-more-configuration-for-manager
- [x] split up the CLI command
- [x] handle the new bins: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed
- `start-storybook` -> `storybook dev`; `build-storybook` -> `storybook build`
- [x] the framework field is now required in storybook/main.js: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory
- more docs on the new framework api: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api
- [x] ~it seems like `@storybook/addon-essentials` is included by default now~: https://github.com/storybookjs/storybook/blob/57b86e62c4c20edf68ec5e778d4775e9e07147f1/docs/configure/storybook-addons.md?plain=1#L23
- probably just need to set up a new project to know for sure (update: it's not included by default)
- [x] the [storybook](https://www.npmjs.com/package/storybook?activeTab=readme) package is just a wrapper around `@storybook/cli`. not sure if there's any reason to prefer one over the other. doesn't seem like there is
- [x] sync up with @virtuoushub
- [ ] sync up with @simoncrypta on https://github.com/redwoodjs/redwood/pull/8000
The following aren't necessary for this PR, but are just points to explore for the future:
- [ ] look into using ESM in storybook/main.js https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#esm-format-in-mainjs
- [ ] so far `yarn rw storybook` on v7 seems slower
- [ ] for some reason Storybook's main config file, main.js, is named differently in user projects (it's named `storybook.config.js`). we should consider renaming it
- [ ] testing provides `@storybook/addon-docs`, but we don't use it. maybe we just consider it important enough to include by default but I'd like to know for sure
- [ ] audit `webpackFinal`
- [ ] look into making a framework package
- [ ] swap playwright tests for storybook test runner?
1 Like