docs: update to storybook v7 (#3298)

* docs: update to storybook v7

* ci: update storybook build command

* docs: fix typescript errors in stories

* chore: update build-storybook custom script

* test(e2e): update root selector for e2e tests

* chore: add storybook/csf dependency

* test: update lockfile test

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

.github/workflows/ci.yml

@@ -158,7 +158,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx build-storybook
+        run: npx storybook build
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook
@@ -204,7 +204,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx build-storybook
+        run: npx storybook build
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook

.storybook/main.js

@@ -4,7 +4,12 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    {name: '@storybook/addon-essentials', options: {backgrounds: false}},
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      },
+    },
     '@storybook/addon-storysource',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
@@ -16,26 +21,33 @@ module.exports = {
       },
     },
     {
-      name: 'storybook-css-modules', // TODO: replace with @storybook/addon-styling for storybook v7
-      options: {cssModulesLoaderOptions: {modules: {localIdentName: 'prc_[local]-[hash:base64:5]'}}},
-    },
-  ],
-  core: {
-    builder: {
-      name: 'webpack5',
+      name: 'storybook-css-modules',
+      // TODO: replace with @storybook/addon-styling for storybook v7
       options: {
-        fsCache: true,
+        cssModulesLoaderOptions: {
+          modules: {
+            localIdentName: 'prc_[local]-[hash:base64:5]',
+          },
+        },
       },
     },
-  },
+  ],
   features: {
     interactionsDebugger: true,
     storyStoreV7: true,
     buildStoriesJson: true,
   },
-  framework: '@storybook/react',
-  reactOptions: {
-    fastRefresh: true,
-    strictMode: true,
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      fastRefresh: true,
+      strictMode: true,
+      builder: {
+        fsCache: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: true,
   },
 }

.storybook/preview.js

@@ -23,12 +23,6 @@ Object.entries(PrimerBreakpoints).forEach(([viewport, value]) => {
   }
 })
 
-addons.setConfig({
-  // Some stories may set up keyboard event handlers, which can be interfered
-  // with by these keyboard shortcuts.
-  enableShortcuts: false,
-})
-
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
   html: {

e2e/test-helpers/storybook.ts

@@ -37,6 +37,6 @@ export async function visit(page: Page, options: Options) {
 
   await page.goto(url.toString())
   await page.waitForSelector('body.sb-show-main:not(.sb-show-preparing-story)')
-  await page.waitForSelector('#root > *')
+  await page.waitForSelector('#storybook-root > *')
   await waitForImages(page)
 }