Upgrade to Storybook v7 (#810)

.changeset/great-parrots-guess.md

@@ -0,0 +1,7 @@
+---
+'sku': minor
+---
+
+Re-export all of `@storybook/react`
+
+Previously, only specific APIs were re-exported under `sku/@storybook/react`. All APIs are now re-exported.

.changeset/slow-numbers-collect.md

@@ -0,0 +1,43 @@
+---
+'sku': major
+---
+
+Support Storybook v7
+
+sku now supports Storybook v7. Please read [the Storybook migration guide] for a high-level overview of what has changed. For a more detailed list of changes, take a look at [the full migration notes].
+**NOTE**: Since sku installs and configures Storybook for you, a lot of the changes will not be relevant to users.
+
+**BREAKING CHANGE**
+
+As of Storybook v7, stories that use the `storiesOf` API will not work by default. The `storiesOf` API is deprecated and will be removed in Storybook v8, so it is highly encouraged to migrate your stories to the [Component Story Format (CSF)][csf].
+
+Migration can be done automatically via the migration tools provided by Storybook:
+
+```sh
+npx storybook@7 migrate storiesof-to-csf --glob="src/**/*.stories.tsx"
+```
+
+After doing this migration, your stories may need some manual cleanup to function correctly, such as adding [a default metadata export][meta].
+
+When your stories are working, you can also optionally migrate to the newer [CSF 3]:
+
+```sh
+npx storybook@7 migrate csf-2-to-3 --glob="src/**/*.stories.tsx"
+```
+
+If you cannot migrate your stories to CSF, or you need to dynamically generate stories with `storiesOf` (see [this issue][storiesof issue] for more info on the future of the `storiesOf` API), you can set the `storybookStoryStore` flag to `false` in your sku config:
+
+```ts
+import { type SkuConfig } from 'sku';
+
+export default {
+  storybookStoryStore: false,
+} satisfies SkuConfig;
+```
+
+[the storybook migration guide]: https://storybook.js.org/docs/react/migration-guide#page-top
+[the full migration notes]: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700
+[csf]: https://storybook.js.org/docs/react/api/csf
+[meta]: https://storybook.js.org/docs/react/api/csf#default-export
+[csf 3]: https://storybook.js.org/blog/storybook-csf3-is-here/
+[storiesof issue]: https://github.com/storybookjs/storybook/issues/9828#issuecomment-1370291568

docs/docs/configuration.md

@@ -423,6 +423,16 @@ 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`

docs/docs/storybook.md

@@ -4,13 +4,15 @@
 
 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:
 
-```js
+```tsx
 import Button from './Button';
 
+import type { Meta } from 'sku/@storybook/react';
+
 export default {
   title: 'Button',
   component: Button,
-};
+} satisfies Meta;
 
 export const Primary = () => <Button variant="primary">Primary</Button>;
 
@@ -31,16 +33,18 @@ import { BraidProvider } from 'braid-design-system';
 
 import React from 'react';
 
-import type { DecoratorFn } from 'sku/@storybook/react';
+import type { Preview } from 'sku/@storybook/react';
 
 // This will wrap every story in a BraidProvider
-export const decorators: DecoratorFn[] = [
-  (Story) => (
-    <BraidProvider theme={apac}>
-      <Story />
-    </BraidProvider>
-  ),
-];
+export default {
+  decorators: [
+    (Story) => (
+      <BraidProvider theme={apac}>
+        <Story />
+      </BraidProvider>
+    ),
+  ],
+} satisfies Preview;
 ```
 
 See [the Storybook docs][storybook preview.js] for more info.
@@ -56,31 +60,34 @@ When running `sku storybook`, if you have configured [`devServerMiddleware`][dev
 ### 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.js`:
+If you'd like to use a different port, you can provide it via the `storybookPort` option in `sku.config.ts`:
 
-```js
-module.exports = {
+```ts
+import type { SkuConfig } from 'sku';
+
+export default {
   storybookPort: 9000,
-};
+} 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.js`.
+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.js`.
+Then add it to your `sku.config.ts`.
 
-```js
-// sku.config.js
-module.exports = {
+```ts
+import type { SkuConfig } from 'sku';
+
+export default {
   storybookAddons: ['@storybook/addon-essentials'],
-};
+} satisfies SkuConfig;
 ```
 
 ## Build Storybook
@@ -98,10 +105,12 @@ To build your Storybook, first add the following npm script:
 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.js`:
+If you would like to specify a custom target directory, you can provide it via the `storybookTarget` option in `sku.config.ts`:
 
-```js
-module.exports = {
+```ts
+import type { SkuConfig } from 'sku';
+
+export default {
   storybookTarget: './dist/storybook',
-};
+} satisfies SkuConfig;
 ```

fixtures/import-order/.gitignore

@@ -7,3 +7,5 @@ dist/
 report/
 tsconfig.json
 # end managed by sku
+
+src/

fixtures/ssr-hello-world/.eslintignore

@@ -1,7 +1,7 @@
 # managed by sku
 *.less.d.ts
 coverage/
-dist-build/
+dist-start/
 dist-storybook/
 report/
 # end managed by sku

fixtures/ssr-hello-world/.gitignore

@@ -2,7 +2,7 @@
 .eslintrc
 .prettierrc
 coverage/
-dist-build/
+dist-start/
 dist-storybook/
 report/
 tsconfig.json

fixtures/ssr-hello-world/.prettierignore

@@ -1,7 +1,7 @@
 # managed by sku
 *.less.d.ts
 coverage/
-dist-build/
+dist-start/
 dist-storybook/
 report/
 # end managed by sku

fixtures/storybook-config/.storybook/preview.tsx

@@ -3,19 +3,26 @@ import 'braid-design-system/reset';
 import { BraidProvider, Text } from 'braid-design-system';
 import apac from 'braid-design-system/themes/apac';
 
+import type { Preview } from 'sku/@storybook/react';
+
 import React from 'react';
-import { DecoratorFn } from 'sku/@storybook/react';
 
-export const decorators: DecoratorFn[] = [
-  (Story) => (
-    <div>
-      <Text data={{ 'automation-decorator': true }}>Braid Text decorator</Text>
-      <Story />
-    </div>
-  ),
-  (Story) => (
-    <BraidProvider theme={apac}>
-      <Story />
-    </BraidProvider>
-  ),
-];
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <div>
+        <Text data={{ 'automation-decorator': true }}>
+          Braid Text decorator
+        </Text>
+        <Story />
+      </div>
+    ),
+    (Story) => (
+      <BraidProvider theme={apac}>
+        <Story />
+      </BraidProvider>
+    ),
+  ],
+};
+
+export default preview;

fixtures/storybook-config/package.json

@@ -7,7 +7,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-controls": "^6.5.12",
+    "@storybook/addon-controls": "^7.0.0",
     "@types/react": "^18.2.3",
     "@types/react-dom": "^18.2.3",
     "@vanilla-extract/css": "^1.0.0",

fixtures/storybook-config/src/TestComponent.stories.tsx

@@ -1,20 +1,15 @@
-import React from 'react';
 import type { Meta, StoryObj } from 'sku/@storybook/react';
 
 import { TestComponent } from './TestComponent';
 
-export default {
+const meta = {
   title: 'TestComponent',
   component: TestComponent,
-  argTypes: {
-    text: {
-      label: 'Text',
-      type: { name: 'string', required: true },
-    },
-  },
 } satisfies Meta;
 
-type Story = StoryObj<typeof TestComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
@@ -24,5 +19,8 @@ export const Default: Story = {
 };
 
 export const Positive: Story = {
-  render: () => <TestComponent tone="positive" text="Primary text" />,
+  args: {
+    tone: 'positive',
+    text: 'Positive text',
+  },
 };

packages/sku/@storybook/react/index.ts

@@ -1,15 +1,4 @@
 // This is provided so consumers can import `sku/@storybook/react`,
 // since they don't depend on `@storybook/react` directly.
 
-export {
-  addDecorator,
-  addParameters,
-  configure,
-  setAddon,
-  storiesOf,
-  forceReRender,
-  getStorybook,
-  type Meta,
-  type StoryObj,
-  type DecoratorFn,
-} from '@storybook/react';
+export * from '@storybook/react';

packages/sku/config/storybook/build/main.js

@@ -1 +1 @@
-module.exports = require('../config');
+export { default } from '../config';

packages/sku/config/storybook/config.js

@@ -1,13 +1,44 @@
-const fs = require('fs');
-const path = require('path');
-const { paths, storybookAddons } = require('../../context');
+import fs from 'fs';
+import path from 'path';
+import { createRequire } from 'module';
+import { paths, storybookAddons, storybookStoryStore } from '../../context';
 
-module.exports = {
+const require = createRequire(import.meta.url);
+
+/** @type {import("@storybook/react-webpack5").StorybookConfig} */
+export default {
   stories: paths.src
     .filter((srcPath) => fs.statSync(srcPath).isDirectory())
     .map((srcPath) => path.join(srcPath, '**/*.stories.@(js|ts|tsx)')),
   addons: storybookAddons,
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
   core: {
-    builder: 'webpack5',
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true,
+      },
+    },
+  },
+  features: {
+    storyStoreV7: storybookStoryStore,
   },
+  babel: (config) => ({
+    ...config,
+    presets: [
+      ...config.presets,
+      [
+        require.resolve('@babel/preset-env'),
+        {
+          targets: {
+            chrome: 100,
+          },
+        },
+      ],
+      require.resolve('@babel/preset-typescript'),
+    ],
+  }),
 };

packages/sku/config/storybook/start/main.js

@@ -1 +1 @@
-module.exports = require('../config');
+export { default } from '../config';

packages/sku/context/configSchema.js

@@ -201,4 +201,7 @@ module.exports = validator.compile({
   externalizeNodeModules: {
     type: 'boolean',
   },
+  storybookStoryStore: {
+    type: 'boolean',
+  },
 });

packages/sku/context/defaultSkuConfig.js

@@ -48,4 +48,5 @@ module.exports = {
   skipPackageCompatibilityCompilation: [],
   persistentCache: true,
   externalizeNodeModules: false,
+  storybookStoryStore: true,
 };

packages/sku/context/index.js

@@ -214,4 +214,5 @@ module.exports = {
     skuConfig.skipPackageCompatibilityCompilation,
   persistentCache: skuConfig.persistentCache,
   externalizeNodeModules: skuConfig.externalizeNodeModules,
+  storybookStoryStore: skuConfig.storybookStoryStore,
 };