Allows users to create a custom storybook preview config

[corbt]

This allows a user to create a custom Storybook preview file in web/config/storybook.preview.js and have it imported into the framework's version.

I haven't added any documentation yet for two reasons. First, I want some confirmation that this approach is reasonable. But also, this actually took me a lot longer than it should have because I didn't realize that we're still on Storybook 5.3 and had to use the old addDecorator syntax. I suspect this will trip up other users as well, so perhaps it would be worthwhile to update to the latest Storybook before publicizing this feature? Anyone who tries to reference the Storybook docs for the syntax of this file will likely also be confused.

Sample web/config/storybook.preview.js:

import React from 'react'
import { addDecorator } from '@storybook/react'

addDecorator((Story) => {
  return (
    <div style={{ backgroundColor: 'red' }}>
      <Story />
    </div>
  )
})

And displayed component:

cc @peterp who opened #1595 and @Tobbe who pointed me to it from the Discord!

[corbt]

since getPaths() needs to run in a node context, we can't run it from preview.js directly. Instead, I elected to run it on this side and expose the path to the user's preview file as a Webpack alias.

[peterp]

That's 100% the way. I meant to document that in the comments, I hope it wasn't too painful to figure out.

[corbt]

Not sure if there's a more idiomatic way to implement "require this path if it exists".

[github-actions]

📦 PR Packages

Click to Show Package Download Links

https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/create-redwood-app-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-api-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-api-server-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-auth-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-cli-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-core-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-dev-server-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-eslint-config-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-eslint-plugin-redwood-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-forms-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-internal-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-prerender-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-router-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-structure-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-testing-0.27.1-c1d41e7.tgz
https://rw-pr-redwoodjs-com.s3.amazonaws.com/2048/redwoodjs-web-0.27.1-c1d41e7.tgz

Install this PR by running yarn rw upgrade --pr 2048:0.27.1-c1d41e7

[thedavidprice]

Thanks for getting this rolling @corbt!

I suspect this will trip up other users as well, so perhaps it would be worthwhile to update to the latest Storybook before publicizing this feature?

^^ Yes, we have this on our radar but have yet to start implementation. Might you be available/interested in helping to upgrade?

Looping in @peterp who has lead all the Storybook work.

[corbt]

Might you be available/interested in helping to upgrade?

I can probably spend a few hours looking into it next week, yes!

[corbt]

Closing in favor of #2054, which includes this commit and updates it to work with Storybook 6.1.