seek-oss · askoufis · Aug 31, 2023 · Aug 25, 2023 · Aug 28, 2023 · Aug 30, 2023
@@ -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
@@ -0,0 +1,13 @@
+---
+'sku': minor
+---
+
+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.
+
+**NOTE**: While this is technically a breaking change, it does not affect app builds, therefore it has been downgraded to a `minor` release.
+
+[sku storybook middleware]: https://seek-oss.github.io/sku/#/./docs/storybook?id=devserver-middleware
@@ -0,0 +1,5 @@
+---
+'sku': patch
+---
+
+Disable Storybook telemetry
@@ -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:

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/static/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/static/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/static/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -2,6 +2,7 @@
 .eslintrc
 .prettierrc
 .ssl
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-storybook/
 dist/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-build/
 dist-storybook/

@@ -1,6 +1,7 @@
 # managed by sku
 .eslintrc
 .prettierrc
+.storybook/main.js
 coverage/
 dist-build/
 dist-storybook/

@@ -1,5 +1,6 @@
 # managed by sku
 *.less.d.ts
+.storybook/main.js
 coverage/
 dist-build/
 dist-storybook/