Support .storybook configuration directory

seek-oss · Aug 28, 2023 · f4c265f · f4c265f
1 parent 77fbb6a
commit f4c265f
Show file tree

Hide file tree

Showing 68 changed files with 178 additions and 129 deletions.
diff --git a/.changeset/pink-feet-trade.md 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
@@ -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
@@ -21,6 +21,35 @@ export const Secondary = () => <Button variant="secondary">Secondary</Button>;
 
 _**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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/