diff --git a/.changeset/pink-feet-trade.md b/.changeset/pink-feet-trade.md new file mode 100644 index 000000000..d63683ebd --- /dev/null +++ b/.changeset/pink-feet-trade.md @@ -0,0 +1,11 @@ +--- +'sku': minor +--- + +Adds support for Storybook configuration via the `.storybook` directory + +sku now supports the standard `.storybook` configuration directory, as documented in [Storybook's configuration documentation]. +Please read [sku's storybook documentation][sku storybook docs] for more info. + +[Storybook configuration documentation]: https://storybook.js.org/docs/react/configure/overview +[sku storybook docs]: https://seek-oss.github.io/sku/#/./docs/storybook diff --git a/.changeset/real-rabbits-yawn.md b/.changeset/real-rabbits-yawn.md new file mode 100644 index 000000000..1568990c4 --- /dev/null +++ b/.changeset/real-rabbits-yawn.md @@ -0,0 +1,11 @@ +--- +'sku': patch +--- + +Drop support for running `devServerMiddleware` alongside `sku storybook` + +Now that sku supports Storybook configuration via the `.storybook` directory, this feature is unnecessary. +Storybook middleware can be configured by creating a `middleware.js` file in the `.storybook` directory. +See [the sku docs][sku storybook middleware] for more info. + +[sku storybook middleware]: https://seek-oss.github.io/sku/#/./docs/storybook?id=devserver-middleware diff --git a/docs/docs/storybook.md b/docs/docs/storybook.md index 28d198cc6..353af6f59 100644 --- a/docs/docs/storybook.md +++ b/docs/docs/storybook.md @@ -21,6 +21,35 @@ export const Secondary = () => ; _**NOTE:** To access the Storybook API, you should import from `sku/@storybook/...`, since your project isn't depending on Storybook packages directly._ +## Configuration + +Storybook can be configured by creating specially-named files inside the `.storybook` folder of your app. +Take a look at the [Storybook configuration docs] for all the ways to customize your Storybook. + +_**NOTE:** sku maintains control of the `main.js` configuration file as it is critical to ensuring compatibility between Storybook and your app. +If you have a valid use case for customizing this file, please reach out in [`#sku-support`]._ + +[Storybook configuration docs]: https://storybook.js.org/docs/react/configure/overview +[`#sku-support`]: https://seekchat.slack.com/channels/sku-support + +### Addons + +There are no storybook addons configured by default in sku but they can be added through the `storybookAddons` option in `sku.config.ts`. + +For example, if you want to use `@storybook/addon-essentials`, first install the addon. + +```bash +yarn add --dev @storybook/addon-essentials +``` + +Then add it to your `sku.config.ts`. + +```ts +export default { + storybookAddons: ['@storybook/addon-essentials'], +} satisfies SkuConfig; +``` + ### Story Rendering Story rendering can be customized globally by creating a `.storybook/preview.js` (or `.ts`, or `.tsx`) file. @@ -53,7 +82,14 @@ See [the Storybook docs][storybook preview.js] for more info. ### DevServer Middleware -When running `sku storybook`, if you have configured [`devServerMiddleware`][devserver middleware] in your sku config, that middleware will be passed through to storybook and injected into its own middleware stack. +When running `sku storybook`, if you want to run your [`devServerMiddleware`][devserver middleware] at the same time, add a `middleware.js` file to the `.storybook` folder and export it: + +```js +// .storybook/middleware.js +import devServerMiddleware from '../devServerMiddleware.js'; + +export default devServerMiddleware; +``` [devserver middleware]: ./docs/extra-features.md#devserver-middleware @@ -68,24 +104,6 @@ export default { } satisfies SkuConfig; ``` -## Addons - -There are no storybook addons configured by default in sku but they can be added through the `storybookAddons` option in `sku.config.ts`. - -For example, if you want to use `@storybook/addon-essentials`, first install the addon. - -```bash -yarn add --dev @storybook/addon-essentials -``` - -Then add it to your `sku.config.ts`. - -```ts -export default { - storybookAddons: ['@storybook/addon-essentials'], -} satisfies SkuConfig; -``` - ## Build Storybook To build your Storybook, first add the following npm script: diff --git a/fixtures/assertion-removal/.eslintignore b/fixtures/assertion-removal/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/assertion-removal/.eslintignore +++ b/fixtures/assertion-removal/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/assertion-removal/.gitignore b/fixtures/assertion-removal/.gitignore index 9472e0ebe..d2e00244e 100644 --- a/fixtures/assertion-removal/.gitignore +++ b/fixtures/assertion-removal/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/assertion-removal/.prettierignore b/fixtures/assertion-removal/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/assertion-removal/.prettierignore +++ b/fixtures/assertion-removal/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/braid-design-system/.eslintignore b/fixtures/braid-design-system/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/braid-design-system/.eslintignore +++ b/fixtures/braid-design-system/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/braid-design-system/.gitignore b/fixtures/braid-design-system/.gitignore index 9472e0ebe..d2e00244e 100644 --- a/fixtures/braid-design-system/.gitignore +++ b/fixtures/braid-design-system/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/braid-design-system/.prettierignore b/fixtures/braid-design-system/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/braid-design-system/.prettierignore +++ b/fixtures/braid-design-system/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/custom-src-paths/.eslintignore b/fixtures/custom-src-paths/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/custom-src-paths/.eslintignore +++ b/fixtures/custom-src-paths/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/custom-src-paths/.gitignore b/fixtures/custom-src-paths/.gitignore index 9472e0ebe..d2e00244e 100644 --- a/fixtures/custom-src-paths/.gitignore +++ b/fixtures/custom-src-paths/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/custom-src-paths/.prettierignore b/fixtures/custom-src-paths/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/custom-src-paths/.prettierignore +++ b/fixtures/custom-src-paths/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/library-build/.eslintignore b/fixtures/library-build/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/library-build/.eslintignore +++ b/fixtures/library-build/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/library-build/.gitignore b/fixtures/library-build/.gitignore index 9472e0ebe..d2e00244e 100644 --- a/fixtures/library-build/.gitignore +++ b/fixtures/library-build/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/library-build/.prettierignore b/fixtures/library-build/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/library-build/.prettierignore +++ b/fixtures/library-build/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/library-file/.eslintignore b/fixtures/library-file/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/library-file/.eslintignore +++ b/fixtures/library-file/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/library-file/.gitignore b/fixtures/library-file/.gitignore index 9472e0ebe..d2e00244e 100644 --- a/fixtures/library-file/.gitignore +++ b/fixtures/library-file/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/library-file/.prettierignore b/fixtures/library-file/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/library-file/.prettierignore +++ b/fixtures/library-file/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/lint-format/.eslintignore b/fixtures/lint-format/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/lint-format/.eslintignore +++ b/fixtures/lint-format/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/lint-format/.gitignore b/fixtures/lint-format/.gitignore index e603e2924..4f42a791f 100644 --- a/fixtures/lint-format/.gitignore +++ b/fixtures/lint-format/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/lint-format/.prettierignore b/fixtures/lint-format/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/lint-format/.prettierignore +++ b/fixtures/lint-format/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/multiple-routes/.eslintignore b/fixtures/multiple-routes/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/multiple-routes/.eslintignore +++ b/fixtures/multiple-routes/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/multiple-routes/.gitignore b/fixtures/multiple-routes/.gitignore index 9472e0ebe..d2e00244e 100644 --- a/fixtures/multiple-routes/.gitignore +++ b/fixtures/multiple-routes/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/multiple-routes/.prettierignore b/fixtures/multiple-routes/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/multiple-routes/.prettierignore +++ b/fixtures/multiple-routes/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/public-path/.eslintignore b/fixtures/public-path/.eslintignore index 58df60132..1c8778aba 100644 --- a/fixtures/public-path/.eslintignore +++ b/fixtures/public-path/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/static/ diff --git a/fixtures/public-path/.gitignore b/fixtures/public-path/.gitignore index 987acfe8f..f10987025 100644 --- a/fixtures/public-path/.gitignore +++ b/fixtures/public-path/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/static/ diff --git a/fixtures/public-path/.prettierignore b/fixtures/public-path/.prettierignore index 58df60132..1c8778aba 100644 --- a/fixtures/public-path/.prettierignore +++ b/fixtures/public-path/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/static/ diff --git a/fixtures/react-css-modules/.eslintignore b/fixtures/react-css-modules/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/react-css-modules/.eslintignore +++ b/fixtures/react-css-modules/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/react-css-modules/.gitignore b/fixtures/react-css-modules/.gitignore index 9472e0ebe..d2e00244e 100644 --- a/fixtures/react-css-modules/.gitignore +++ b/fixtures/react-css-modules/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/react-css-modules/.prettierignore b/fixtures/react-css-modules/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/react-css-modules/.prettierignore +++ b/fixtures/react-css-modules/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/sku-test/.eslintignore b/fixtures/sku-test/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/sku-test/.eslintignore +++ b/fixtures/sku-test/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/sku-test/.gitignore b/fixtures/sku-test/.gitignore index 9472e0ebe..d2e00244e 100644 --- a/fixtures/sku-test/.gitignore +++ b/fixtures/sku-test/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/sku-test/.prettierignore b/fixtures/sku-test/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/sku-test/.prettierignore +++ b/fixtures/sku-test/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/sku-with-https/.eslintignore b/fixtures/sku-with-https/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/sku-with-https/.eslintignore +++ b/fixtures/sku-with-https/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/sku-with-https/.gitignore b/fixtures/sku-with-https/.gitignore index 7bfb4a45b..f6980b14d 100644 --- a/fixtures/sku-with-https/.gitignore +++ b/fixtures/sku-with-https/.gitignore @@ -2,6 +2,7 @@ .eslintrc .prettierrc .ssl +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/sku-with-https/.prettierignore b/fixtures/sku-with-https/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/sku-with-https/.prettierignore +++ b/fixtures/sku-with-https/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/source-maps/.eslintignore b/fixtures/source-maps/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/source-maps/.eslintignore +++ b/fixtures/source-maps/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/source-maps/.gitignore b/fixtures/source-maps/.gitignore index 9472e0ebe..d2e00244e 100644 --- a/fixtures/source-maps/.gitignore +++ b/fixtures/source-maps/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/source-maps/.prettierignore b/fixtures/source-maps/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/source-maps/.prettierignore +++ b/fixtures/source-maps/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/ssr-hello-world/.eslintignore b/fixtures/ssr-hello-world/.eslintignore index e9b94e25e..bca860144 100644 --- a/fixtures/ssr-hello-world/.eslintignore +++ b/fixtures/ssr-hello-world/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-build/ dist-storybook/ diff --git a/fixtures/ssr-hello-world/.gitignore b/fixtures/ssr-hello-world/.gitignore index 2395ad75e..e646cbdd9 100644 --- a/fixtures/ssr-hello-world/.gitignore +++ b/fixtures/ssr-hello-world/.gitignore @@ -1,6 +1,7 @@ # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-build/ dist-storybook/ diff --git a/fixtures/ssr-hello-world/.prettierignore b/fixtures/ssr-hello-world/.prettierignore index e9b94e25e..bca860144 100644 --- a/fixtures/ssr-hello-world/.prettierignore +++ b/fixtures/ssr-hello-world/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-build/ dist-storybook/ diff --git a/fixtures/storybook-config/.eslintignore b/fixtures/storybook-config/.eslintignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/storybook-config/.eslintignore +++ b/fixtures/storybook-config/.eslintignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/storybook-config/.gitignore b/fixtures/storybook-config/.gitignore index 6e1650ecc..5d73a2f5c 100644 --- a/fixtures/storybook-config/.gitignore +++ b/fixtures/storybook-config/.gitignore @@ -4,6 +4,7 @@ npm-debug.log # managed by sku .eslintrc .prettierrc +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/storybook-config/.prettierignore b/fixtures/storybook-config/.prettierignore index be5af46ed..a8fee4a3e 100644 --- a/fixtures/storybook-config/.prettierignore +++ b/fixtures/storybook-config/.prettierignore @@ -1,5 +1,6 @@ # managed by sku *.less.d.ts +.storybook/main.js coverage/ dist-storybook/ dist/ diff --git a/fixtures/storybook-config/.storybook/middleware.js b/fixtures/storybook-config/.storybook/middleware.js new file mode 100644 index 000000000..6d7fa83d6 --- /dev/null +++ b/fixtures/storybook-config/.storybook/middleware.js @@ -0,0 +1,3 @@ +import middleware from '../dev-middleware'; + +export default middleware; diff --git a/fixtures/storybook-config/.storybook/preview.tsx b/fixtures/storybook-config/.storybook/preview.tsx index f561527bb..57fe89090 100644 --- a/fixtures/storybook-config/.storybook/preview.tsx +++ b/fixtures/storybook-config/.storybook/preview.tsx @@ -5,7 +5,7 @@ import apac from 'braid-design-system/themes/apac'; import type { Preview } from 'sku/@storybook/react'; -const preview: Preview = { +export default { decorators: [ (Story) => (