[DRAFT] Add Storybook (Vite) framework package #10064

arimendelow · 2024-02-25T20:45:23Z

Overview

This PR is the first step to migrating our Storybook integration from relying on Webpack to relying on Vite. Specifically, this PR:

Adds the Storybook framework package for RedwoodJS.
- This follows the modern Storybook pattern for providing required configuration for getting Storybook to work with a given framework/metaframework.
- For comparison, our current Webpack Storybook setup was written before framework packages were a thing, so it's architected very differently. See the [@redwoodjs/testing].(https://github.com/redwoodjs/redwood/tree/main/packages/testing) package for more information.
- The eventual goal is for this package to move into the Storybook codebase and be "officially" supported.
- This package was forked from the react-vite framework package.
Adds the storybook-vite CLI package, which is based on the existing storybook CLI package. The CLI package does two important things before running the Storybook command:
- Checks if the necessary project-side config files exist yet, and creates them if they don't.
- Creates the Mock Service Worker, which is necessary for Cell mocking.

Importantly, the architecture of this (including duplicating files, etc.) is based on the eventual goal of removing the older Storybook integration files.

Proof

This screen recording shows that the following works:

Router
Nested cells (waterfall)
Auth

Details

This framework package is based on the proof of concept of getting Storybook working on RedwoodJS with Vite, which is documented here.

Please see that and official Storybook framework package documentation to understand implementation details.

Outstanding

The console outputs are a bit noisy, and it seems like it's just noise. Do we want to address/silence this?
Testing?
Cleanup?
Finalize how we want to roll this out. For example:
- Do we want to add a console message to the current CLI that it'll be removed in a future/next major?
- How do we want to address the different CLI packages? Some options:
  - Temporarily keep the existing one as yarn redwood storybook, and make the new one yarn redwood storybook-vite.
  - Make the existing one yarn redwood storybook-webpack.
    - I'm concerned that folks will not be aware of this, causing friction.
Based on the above, write migration guide.
???

Trying it out

First step is, of course, pulling down this branch.

I've been testing this with the generated test project. If you want to do that, from the framework repo, first run:

yarn run build:test-project ../for-testing-storybook-vite

Then, over in your project, run yarn rwfw project:tarsync so that the module resolutions point to the ones in this branch.

Then, I think because it hasn't yet been published anywhere, you'll need to manually add the new CLI package (yarn complains about not being able to find the packument when I try to get the CLI package to autoinstall):

yarn add -D @redwoodjs/cli-storybook-vite@7

Then, run:

yarn rw sbv

Your browser should then open to Storybook!

…pkg as a tarball

…add-storybook-framework-package

…rposes — doesn't seem like previewAnnotations are working at all (global decorators + loaders)

…add-storybook-framework-package

Tobbe · 2024-05-23T07:32:00Z

packages/cli-packages/storybook-vite/src/commands/storybookHandler.ts

+import type { StorybookYargsOptions } from '../types'
+
+/*
+readFile and writeFile are somewhat duplicated from @redwoodjs/cli; I could not for the life of me get the package


@redwoodjs/cli is a bit strange. It's not ment to be imported from. Stuff that should be shared goes in cli-helpers. So maybe readFile and writeFile should live there. But since you modified writeFile anyways they might as well both live here, at least for now 🙂

Tobbe · 2024-05-23T07:39:56Z

packages/storybook/src/mocks/MockParamsProvider.tsx

+import { useLocation, ParamsContext, parseSearch } from '@redwoodjs/router'
+
+interface Props {
+ path?: string


Did you intend for this to be allParams to match ParamsProvider in @redwoodjs/router?
Or could we maybe just get rid of it since it's not used in the Mock version?

Tobbe · 2024-05-23T07:41:09Z

packages/storybook/src/mocks/MockProviders.tsx

+
+import { MockParamsProvider } from './MockParamsProvider'
+
+// Import the user's Router from `./web/src/Router.{tsx,jsx}`,


Suggested change

// Import the user's Router from `./web/src/Router.{tsx,jsx}`,

// Import the user's Routes from `./web/src/Routes.{tsx,jsx}`,

Tobbe · 2024-05-23T07:41:39Z

packages/storybook/src/mocks/MockProviders.tsx

+import { MockParamsProvider } from './MockParamsProvider'
+
+// Import the user's Router from `./web/src/Router.{tsx,jsx}`,
+// we pass the `children` from the user's Router to `./MockRouter.Router`


Suggested change

// we pass the `children` from the user's Router to `./MockRouter.Router`

// we pass the `children` from the user's Routes to `./MockRouter.Router`

Tobbe · 2024-05-23T07:46:00Z

packages/storybook/src/mocks/MockProviders.tsx

+// we pass the `children` from the user's Router to `./MockRouter.Router`
+// so that we can populate the `routes object` in Storybook and tests.
+// // @ts-expect-error - this comes from a Vite alias in main.ts
+let UserRouterWithRoutes: React.FC


Suggested change

let UserRouterWithRoutes: React.FC

let UserRoutes: React.FC

Tobbe · 2024-05-23T07:49:43Z

packages/storybook/src/mocks/MockRouter.tsx

+export const routes: { [routeName: string]: () => string } = {}
+
+/**
+ * We overwrite the default `Router` export (see jest-preset). So every import


is jest-preset still the thing to look at?

Tobbe · 2024-05-23T07:57:09Z

packages/storybook/src/preset.ts

+import { reactDocgen } from './plugins/react-docgen'
+import type { StorybookConfig } from './types'
+
+const getAbsolutePath = <I extends string>(input: I): I =>


Can you explain what's going on with the types here? I tried it without the narrowing to I and it seems to still work as expected. What am I missing?

Tobbe · 2024-05-23T08:02:46Z

packages/testing/src/web/MockProviders.tsx

-const {
- default: UserRouterWithRoutes,
-} = require('~__REDWOOD__USER_ROUTES_FOR_MOCK')
+let UserRouterWithRoutes: React.FC


Same naming questions here as above

arimendelow and others added 30 commits February 24, 2024 10:58

Start to add new storybook package

5d1699b

Update sb/package.json

d03c28a

Copy storybook cli package

5c45541

More legwork towards what it seems we need to do to set this up

252ac5c

Update storybook pkgjson to be more inline with react-vite pkg

af863e9

Copy in sb react-vite src

08d1dd3

Copy in more from sb vite, update versions, run yarn

90cb440

Add .storybook path

a947a2e

Update handler to point to .storybook

fed9077

Some more updations

fd44685

Fix code style, mostly

cf893bf

Some more work on code struct and such

f16009c

oops not sure how that got in there

505d189

Format code

4d4e469

Move @storybook/addon-essentials out of project and into fmwk pkg

76dd0b2

Copy in all mocks

03ade58

Add mocks and such to vite config

5f4cf30

Grinding away on making these things work

125510a

Move thing to peer dept

ddb5200

Update to build config used by other packages

ede3ce9

Switch __mocks__ to mocks

cb3625c

update some imports/exports

7bf8ae5

Update sbv cli pkg

44e83d8

Remove old depts

f83092d

Add TODO

1040362

Whoops I put the comments in the wrong package

607f255

Update versions etc

044dbbf

Merge branch 'main' into ari/add-storybook-framework-package

51e165c

update deps

066977f

Iteratively making this work woooo (also add command for building sb …

05d2d5d

…pkg as a tarball

arimendelow and others added 13 commits April 10, 2024 12:32

Merge branch 'main' of https://github.com/redwoodjs/redwood into ari/…

21fd530

…add-storybook-framework-package

Switch from building with babel to tsx as ESM

3b345de

Update gitignore to not have storybook tarball

951e642

Export mocked useAuth and also add some console logs for debugging pu…

c86a3bb

…rposes — doesn't seem like previewAnnotations are working at all (global decorators + loaders)

Add another console log higher up

67cf9d5

Whoops, fix typo

9f016cc

Cleanup, and fix storybook-vite cli package

b9a64a0

Comment out thing and autoformat

30cab3f

Add framework package as dept to cli package

299d21d

yarn check passing

2d0098f

Add root to config

b189f0f

Auto-import mocks

7e21eb3

Update command to be more idiomatic

c4ff67a

arimendelow changed the title ~~[DRAFT] Add storybook framework package~~ [DRAFT] Add Storybook (Vite) framework package Apr 14, 2024

arimendelow added 5 commits May 18, 2024 15:14

Merge branch 'main' of https://github.com/redwoodjs/redwood into ari/…

8f75df5

…add-storybook-framework-package

Update msw docs url to be v1

7747f1f

sbv now autocreates config files if necessary

731131c

Update mock router in vite package to align with recent changes

d162bef

Update readmes

abc027f

arimendelow marked this pull request as ready for review May 19, 2024 19:17

Tobbe reviewed May 23, 2024

View reviewed changes

Review fixes

dfa58f9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DRAFT] Add Storybook (Vite) framework package #10064

[DRAFT] Add Storybook (Vite) framework package #10064

arimendelow commented Feb 25, 2024 •

edited

Tobbe May 23, 2024

Tobbe May 23, 2024 •

edited

Tobbe May 23, 2024

Tobbe May 23, 2024

Tobbe May 23, 2024

Tobbe May 23, 2024

Tobbe May 23, 2024

Tobbe May 23, 2024


		import { MockParamsProvider } from './MockParamsProvider'

		// Import the user's Router from `./web/src/Router.{tsx,jsx}`,

	// Import the user's Router from `./web/src/Router.{tsx,jsx}`,
	// Import the user's Routes from `./web/src/Routes.{tsx,jsx}`,

	// we pass the `children` from the user's Router to `./MockRouter.Router`
	// we pass the `children` from the user's Routes to `./MockRouter.Router`

[DRAFT] Add Storybook (Vite) framework package #10064

Are you sure you want to change the base?

[DRAFT] Add Storybook (Vite) framework package #10064

Conversation

arimendelow commented Feb 25, 2024 • edited

Overview

Proof

Details

Outstanding

Trying it out

Tobbe May 23, 2024

Choose a reason for hiding this comment

Tobbe May 23, 2024 • edited

Choose a reason for hiding this comment

Tobbe May 23, 2024

Choose a reason for hiding this comment

Tobbe May 23, 2024

Choose a reason for hiding this comment

Tobbe May 23, 2024

Choose a reason for hiding this comment

Tobbe May 23, 2024

Choose a reason for hiding this comment

Tobbe May 23, 2024

Choose a reason for hiding this comment

Tobbe May 23, 2024

Choose a reason for hiding this comment

arimendelow commented Feb 25, 2024 •

edited

Tobbe May 23, 2024 •

edited