Make storybook configurable in a redwood app #1828

jtoar · 2021-02-21T20:45:15Z

This PR makes storybook's main.js file configurable from a Redwood App by copying the strategy we currently use with webpack. The webpack-merge docs say that the merge function works with more than just webpack configs, so I reused it here. Here's the quote from the docs:

This behavior is particularly useful in configuring webpack although it has uses beyond it. Whenever you need to merge configuration objects, webpack-merge can come in handy.

This PR doesn't do anything for storybook/preview.js yet—I know that's what #989 was mainly about. So a question while we're on that topic:

should we just have one storybook.config.js file in a redwood app, with a bunch of exports (one for main, one for preview, etc) or a storybook config dir, like we have in core?&
- answer: two files, one suffixed with .config.js, the other with .preview.js

Finally, here's an unimpressive screenshot just to show that things are working:

The file in the redwood app looks like:

// web/config/storybook.config.js

module.exports = {
  addons: ['@storybook/addon-a11y'],
}

github-actions · 2021-02-21T20:49:56Z

📦 PR Packages

Click to Show Package Download Links

Install this PR by running yarn rw upgrade --pr 1828:0.26.2-54406e6

peterp · 2021-02-22T07:34:37Z

@jtoar I think it makes sense to have two separate configuration files, since the one has a Node.js context and the other has a browser context. I don't think they have to be in a directory, so maybe just config/storybook.preview.js and config/storybook.config.js

peterp

Here's my comment from a few days ago, I wasn't sure if you saw it.

I do not think that we need to do storybook.preview.js right now. If you agree then we can merge this and add storybook.preview.js seperately.

@jtoar I think it makes sense to have two separate configuration files, since the one has a Node.js context and the other has a browser context. I don't think they have to be in a directory, so maybe just config/storybook.preview.js and config/storybook.config.js

packages/core/config/storybook/main.js

packages/internal/src/paths.ts

jtoar · 2021-03-03T06:41:26Z

Dang, screwed up the rebasing again; hold!

Co-authored-by: Peter Pistorius <peter.pistorius@gmail.com>

jtoar · 2021-03-03T07:00:50Z

I do not think that we need to do storybook.preview.js right now. If you agree then we can merge this and add storybook.preview.js seperately.

@peterp totally agree, let's get this one in for the next release if you think it's looking good!

cypress · 2021-03-04T20:32:31Z

Test summary

8 • 0 • 0 • 0 • 1

Run details


Project	RedwoodJS Framework
Status	Passed
Commit	`3d2bcb1` ℹ️
Started	Mar 5, 2021 11:34 AM
Ended	Mar 5, 2021 11:36 AM
Duration	01:38 💡
OS	Linux Ubuntu - 16.04
Browser	Chrome 88

View run in Cypress Dashboard ➡️

Flakiness

	cypress/integration/tutorial/tutorial.js		1
1	The Redwood Tutorial - Golden path edition > 6. Routing Params

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

peterp · 2021-03-05T08:11:00Z

Ship it!

thedavidprice · 2021-03-05T16:56:38Z

@jtoar thoughts about where/how to document this?

jtoar · 2021-03-05T20:22:57Z

@thedavidprice time for a Storybook doc I think; I'lll add it as a section there, then link to some of the other docs we have like Mocking GraphQL Requests.

…-e2e-tests * 'main' of github.com:redwoodjs/redwood: Bump @apollo/client from 3.3.7 to 3.3.11 (redwoodjs#1923) Switch create-redwood-app template to TypeScript (redwoodjs#1810) Bump @graphql-tools/merge from 6.2.7 to 6.2.10 (redwoodjs#1910) Adds resolution to template, to prevent module duplication in web/node_modules (redwoodjs#1933) Update service generator to use Prisma namespace (redwoodjs#1853) Make storybook configurable in a redwood app (redwoodjs#1828)

jangxyz · 2021-03-15T11:19:52Z

@peterp 's change of storybook to storybookConfig breaks loading user storybook config in the current release (0.27.1). Currently it's still reading from redwoodPaths.web.storybook. (core/config/storybook/main.js#L64)

Maybe you should apply the change to main.js as well?

jtoar · 2021-03-15T15:04:13Z

That was my bad, and the fix is here: #2002. Looks ok to you @jangxyz?

jangxyz · 2021-03-16T00:56:43Z

Looks great! 😎

jtoar added kind/improvement topic/config Babel, Webpack, ESLint, Prettier, etc. topic/storybook labels Feb 21, 2021

jtoar requested a review from peterp February 21, 2021 20:45

jtoar added this to In progress in Storybook via automation Feb 21, 2021

jtoar added this to In progress in Accessibility via automation Feb 21, 2021

jtoar self-assigned this Feb 21, 2021

peterp requested changes Feb 27, 2021

View reviewed changes

peterp reviewed Feb 27, 2021

View reviewed changes

packages/core/config/storybook/main.js Outdated Show resolved Hide resolved

peterp reviewed Feb 27, 2021

View reviewed changes

packages/internal/src/paths.ts Outdated Show resolved Hide resolved

feat: grab user's storybook config

282a347

redwoodjsbot and others added 3 commits March 2, 2021 22:43

style: revert prettier formatting

5220677

Update packages/internal/src/paths.ts

4a75f58

Co-authored-by: Peter Pistorius <peter.pistorius@gmail.com>

fix: propagate the rename

8e2f7ef

jtoar force-pushed the ds-make-sb-configurable branch from 4f213e0 to 8e2f7ef Compare March 3, 2021 06:44

jtoar requested a review from peterp March 3, 2021 07:00

Merge branch 'main' into ds-make-sb-configurable

aba3f8c

dac09 added this to the next release milestone Mar 4, 2021

peterp approved these changes Mar 5, 2021

View reviewed changes

Merge branch 'main' into ds-make-sb-configurable

54406e6

peterp merged commit 751d342 into main Mar 5, 2021

Accessibility automation moved this from In progress to Done Mar 5, 2021

Storybook automation moved this from In progress to Done Mar 5, 2021

thedavidprice deleted the ds-make-sb-configurable branch March 5, 2021 16:53

jtoar mentioned this pull request Mar 5, 2021

Add storybook doc redwoodjs/redwoodjs-com-archive#611

Merged

thedavidprice mentioned this pull request Mar 22, 2021

Allow users to set a custom config for Storybook #989

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make storybook configurable in a redwood app #1828

Make storybook configurable in a redwood app #1828

jtoar commented Feb 21, 2021 •

edited

Loading

github-actions bot commented Feb 21, 2021 •

edited

Loading

peterp commented Feb 22, 2021

peterp left a comment •

edited

Loading

jtoar commented Mar 3, 2021

jtoar commented Mar 3, 2021

cypress bot commented Mar 4, 2021 •

edited

Loading

peterp commented Mar 5, 2021

thedavidprice commented Mar 5, 2021

jtoar commented Mar 5, 2021

jangxyz commented Mar 15, 2021 •

edited

Loading

jtoar commented Mar 15, 2021

jangxyz commented Mar 16, 2021

Make storybook configurable in a redwood app #1828

Make storybook configurable in a redwood app #1828

Conversation

jtoar commented Feb 21, 2021 • edited Loading

github-actions bot commented Feb 21, 2021 • edited Loading

📦 PR Packages

peterp commented Feb 22, 2021

peterp left a comment • edited Loading

Choose a reason for hiding this comment

jtoar commented Mar 3, 2021

jtoar commented Mar 3, 2021

cypress bot commented Mar 4, 2021 • edited Loading

Test summary

Run details

Flakiness

peterp commented Mar 5, 2021

thedavidprice commented Mar 5, 2021

jtoar commented Mar 5, 2021

jangxyz commented Mar 15, 2021 • edited Loading

jtoar commented Mar 15, 2021

jangxyz commented Mar 16, 2021

jtoar commented Feb 21, 2021 •

edited

Loading

github-actions bot commented Feb 21, 2021 •

edited

Loading

peterp left a comment •

edited

Loading

cypress bot commented Mar 4, 2021 •

edited

Loading

jangxyz commented Mar 15, 2021 •

edited

Loading