Remove storybook CLI commands and dependencies, provide minimal confi…

…g for storybook

.changeset/chilled-tips-clean.md

@@ -0,0 +1,29 @@
+---
+'sku': major
+---
+
+Remove `storybook` CLI commands
+
+**BREAKING CHANGE**
+
+`sku` no longer provides the `sku storybook` and `sku build-storybook` CLI commands. Please migrate to [the official Storybook CLI][storybook cli]:
+
+**MIGRATION GUIDE**:
+
+```sh
+pnpm install -D storybook
+```
+
+```diff
+// package.json
+{
+  "scripts": {
+-    "storybook": "sku storybook",
++    "storybook": "storybook dev",
+-    "build:storybook": "sku build-storybook"
++    "storybook-build": "storybook build"
+  }
+}
+```
+
+[storybook cli]: https://storybook.js.org/docs/cli/

.changeset/curly-crews-wait.md

@@ -0,0 +1,36 @@
+---
+'sku': major
+---
+
+Remove automatic configuration of Storybook
+
+**BREAKING CHANGE**
+
+Sku no longer configures your `.storybook/main.ts` file for you. If you are using Storybook, you will need to configure it yourself. See the [Storybook docs] for more information.
+
+**MIGRATION GUIDE**:
+
+Minimal Storybook configuration:
+
+```ts
+// .storybook/main.ts
+import { babel, webpackFinal } from 'sku/config/storybook';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+export default {
+  stories: ['../src/**/*.stories.tsx'],
+  framework: '@storybook/react-webpack5',
+  core: {
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true, // For faster startup times after the first `storybook dev`
+      },
+    },
+  },
+  babel,
+  webpackFinal,
+} satisfies StorybookConfig;
+```
+
+[storybook docs]: https://seek-oss.github.io/sku/#/./docs/storybook

.changeset/dull-colts-fetch.md

@@ -0,0 +1,24 @@
+---
+'sku': major
+---
+
+Remove Storybook dependencies and `@storybook/react` entrypoint
+
+**BREAKING CHANGE**
+
+Sku no longer installs Storybook dependencies. Additionally, it no longer provides the `sku/@storybook/react` entrypoint. If you are using Storybook, you will need to install the dependencies yourself. See the [Storybook docs] for more information.
+
+**MIGRATION GUIDE**:
+
+```sh
+pnpm install -D storybook @storybook/react @storybook/react-webpack5
+```
+
+```diff
+// MyComponent.stories.tsx
+
+-import type { Meta } from 'sku/@storybook/react';
++import type { Meta } from '@storybook/react';
+```
+
+[storybook docs]: https://seek-oss.github.io/sku/#/./docs/storybook

.eslintignore

@@ -3,9 +3,8 @@ node_modules
 coverage/
 dist/
 dist-build/
-dist-playroom/
 dist-start/
-dist-storybook/
+storybook-static/
 report/
 template/
 test/test-cases/*/*

.gitignore

@@ -6,4 +6,5 @@ dist/
 dist-build/
 dist-ssr/
 dist-start/
+storybook-static/
 yarn.lock

.prettierignore

@@ -4,10 +4,9 @@ coverage/
 dist/
 dist-ssr/
 dist-build/
-dist-playroom/
 dist-start/
-dist-storybook/
+storybook-static/
 report/
 template/
 .changeset/*.md
-CHANGELOG.md
+CHANGELOG.md

docs/docs/api.md

@@ -22,16 +22,6 @@ Example:
 import { loadableReady } from 'sku/@loadable/component';
 ```
 
-## `sku/@storybook/react`
-
-A re-export of the `@storybook/react` package, which `sku` provides as a dependency.
-
-Example:
-
-```ts
-import type { StoryObj } from 'sku/@storybook/react';
-```
-
 ## `sku/config/jest`
 
 A jest preset for consuming `sku`'s Jest configuration.

docs/docs/configuration.md

@@ -423,40 +423,6 @@ Default: `['./src']`
 
 An array of directories holding your app's source code. By default, sku expects your source code to be in a directory named `src` in the root of your project. Use this option if your source code needs to be arranged differently.
 
-## storybookAddons
-
-type `Array<string>`
-
-Default: `[]`
-
-An array of storybook addons to use.
-
-## storybookPort
-
-type `number`
-
-Default: `8081`
-
-The port to host storybook on when running `sku storybook`.
-
-## storybookStoryStore
-
-type `boolean`
-
-Default: `true`
-
-Allows disabling Storybook's `storyStoreV7` feature flag.
-This will result in all stories being loaded upfront instead of on demand.
-Disabling this feature will allow stories that use the deprecated `storiesOf` API to work, however it's highly recommended to migrate off `storiesOf` to the Component Story Format (CSF) instead.
-
-## storybookTarget
-
-type `string`
-
-Default: `dist-storybook`
-
-The directory `sku build-storybook` will output files to.
-
 ## supportedBrowsers
 
 type `browserslist-query`

docs/docs/faq.md

@@ -2,12 +2,12 @@
 
 ## Why isn't X working?
 
-If you're having issues with sku please contact the _#sku-support_ channel for help. However, you can try the following to resolve common issues.
+If you're having issues with sku please contact the _#sku-support_ channel for help.
+You can also try the following to resolve common issues:
 
 - Remove any direct dependencies that may clash with sku. If you're unsure you can ask in _#sku-support_. The usual suspects are:
   - `jest` and `jest-cli`
   - Any thing `babel` related
   - `webpack` or any `webpack` loaders/plugins that sku already provides
-  - `storybook`
   - `typescript`
   - `prettier` and `eslint`

docs/docs/storybook.md

@@ -1,88 +1,75 @@
 # [Storybook](https://storybook.js.org/)
 
-## Start Storybook
+This page will guide you through the process of setting up Storybook in your project.
+The configuration outlined on this page should work for most projects, but you may customize it further to suit your needs.
 
-Running `sku storybook` will open up a local component explorer, displaying all component instances declared in files named `*.stories.js` (or `.ts`, or `.tsx`), for example:
+## Installing Storybook Dependencies
 
-```tsx
-import Button from './Button';
+To set up Storybook, you will need to install the following dev dependencies:
 
-import type { Meta } from 'sku/@storybook/react';
-
-export default {
-  title: 'Button',
-  component: Button,
-} satisfies Meta;
-
-export const Primary = () => <Button variant="primary">Primary</Button>;
-
-export const Secondary = () => <Button variant="secondary">Secondary</Button>;
+```sh
+pnpm install -D storybook @storybook/react @storybook/react-webpack5
 ```
 
-_**NOTE:** To access the Storybook API, you should import from `sku/@storybook/...`, since your project isn't depending on Storybook packages directly._
-
-## Configuration
+## Configuring Storybook
 
 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`.
+Take a look at the [Storybook configuration docs] for all the ways to customize Storybook.
 
-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`.
+Here's an example of a minimal, sku-compatible Storybook configuration:
 
 ```ts
+// .storybook/main.ts
+import { babel, webpackFinal } from 'sku/config/storybook';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
 export default {
-  storybookAddons: ['@storybook/addon-essentials'],
-} satisfies SkuConfig;
+  stories: ['../src/**/*.stories.tsx'],
+  framework: '@storybook/react-webpack5',
+  core: {
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true, // For faster startup times after the first `storybook dev`
+      },
+    },
+  },
+  babel,
+  webpackFinal,
+} satisfies StorybookConfig;
 ```
 
-### Story Rendering
+> We strongly recommend using the `babel` and `webpackFinal` configurations provided by `sku`.
+> These configurations are designed to work well with `sku` and are tested as part of `sku`'s integration tests.
+> While you are free use alternative configurations, we cannot provide any guarantees that Storybook will work correctly in all cases.
 
-Story rendering can be customized globally by creating a `.storybook/preview.js` (or `.ts`, or `.tsx`) file.
+If you want to typecheck the files within the `.storybook` directory, you will need to add them to your [`tsconfig.json`'s `include`][tsconfig include] field.
+This is necessary because the implicit default value of `include` is `['**/*']`, which does not include any directories prefixed with `.`, such as `.storybook`.
 
-```tsx
-import 'braid-design-system/reset';
+This can be done via [`sku`'s `dangerouslySetTSConfig` configuration option][dangerouslySetTSConfig]:
 
-import apac from 'braid-design-system/themes/apac';
-import { BraidProvider } from 'braid-design-system';
-
-import React from 'react';
-
-import type { Preview } from 'sku/@storybook/react';
+```ts
+// sku.config.ts
+import type { SkuConfig } from 'sku';
 
-// This will wrap every story in a BraidProvider
 export default {
-  decorators: [
-    (Story) => (
-      <BraidProvider theme={apac}>
-        <Story />
-      </BraidProvider>
-    ),
-  ],
-} satisfies Preview;
+  dangerouslySetTSConfig: (config) => ({
+    ...config,
+    include: [
+      '**/*', // Implicit default value if `include` is not set and `files` is not set
+      '.storybook/*', // 👈 Add this line
+    ],
+  }),
+} satisfies SkuConfig;
 ```
 
-See [the Storybook docs][storybook preview.js] for more info.
-
-[storybook preview.js]: https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
+[Storybook configuration docs]: https://storybook.js.org/docs/react/configure/overview
+[tsconfig include]: https://www.typescriptlang.org/tsconfig/#include
+[dangerouslySetTSConfig]: ./docs/configuration.md#dangerouslysettsconfig
 
-### DevServer Middleware
+## DevServer Middleware
 
-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:
+When running `storybook dev`, if you want to run your [`devServerMiddleware`][devserver middleware] at the same time, add a `middleware.js` file to the `.storybook` folder and re-export your middleware inside it:
 
 ```js
 // .storybook/middleware.js
@@ -92,37 +79,3 @@ export default devServerMiddleware;
 ```
 
 [devserver middleware]: ./docs/extra-features.md#devserver-middleware
-
-### Storybook Port
-
-By default, Storybook runs on port `8081`.
-If you'd like to use a different port, you can provide it via the `storybookPort` option in `sku.config.ts`:
-
-```ts
-export default {
-  storybookPort: 9000,
-} satisfies SkuConfig;
-```
-
-## Build Storybook
-
-To build your Storybook, first add the following npm script:
-
-```json
-{
-  "scripts": {
-    "build-storybook": "sku build-storybook"
-  }
-}
-```
-
-Then run `npm run build-storybook`.
-
-By default, Storybook assets are generated in the `dist-storybook` directory in your project root folder.
-If you would like to specify a custom target directory, you can provide it via the `storybookTarget` option in `sku.config.ts`:
-
-```ts
-export default {
-  storybookTarget: './dist/storybook',
-} satisfies SkuConfig;
-```

fixtures/assertion-removal/.eslintignore

@@ -3,9 +3,7 @@
 .eslintcache
 .eslintrc
 .prettierrc
-.storybook/main.js
 coverage/
-dist-storybook/
 dist/
 report/
 # end managed by sku

fixtures/assertion-removal/.gitignore

@@ -2,9 +2,7 @@
 .eslintcache
 .eslintrc
 .prettierrc
-.storybook/main.js
 coverage/
-dist-storybook/
 dist/
 report/
 tsconfig.json