Upgrade storybook to v7.6

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: '18'
 
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/deploy_docs_preview_forks.yml

@@ -0,0 +1,58 @@
+name: Deploy
+
+on:
+  pull_request_target:
+
+permissions:
+  checks: write
+  contents: read
+  deployments: write
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    if: ${{ github.repository != github.event.pull_request.head.repo.full_name }}
+    name: Preview
+    # SHA for security hardening. Points at last verified HEAD of main branch.
+    uses: primer/.github/.github/workflows/deploy_preview.yml@cd223835608ca5e9401e0ffe6081f6d2fcc912f3
+    with:
+      node_version: 16
+      install: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps && cd ..
+      build: npm run build && npm run build:docs:preview && npm run build:storybook:preview
+      output_dir: apps/docs/public/
+
+  deploy-storybook:
+    if: ${{ github.repository != github.event.pull_request.head.repo.full_name }}
+    name: Preview Storybook
+    runs-on:
+      labels: ubuntu-latest-16-cores
+    needs: deploy
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: chrnorm/deployment-action@v1.2.0
+        name: Create GitHub deployment for storybook
+        id: storybook
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment: Preview Storybook
+          target_url: '${{ needs.deploy.outputs.deployment_url }}storybook'
+
+      - name: Update storybook deployment status (success)
+        if: success()
+        uses: chrnorm/deployment-status@v1.0.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment_url: '${{ needs.deploy.outputs.deployment_url }}storybook'
+          target_url: '${{ needs.deploy.outputs.deployment_url }}storybook'
+          state: 'success'
+          deployment_id: ${{ steps.storybook.outputs.deployment_id }}
+
+      - name: Update storybook deployment status (failure)
+        if: failure()
+        uses: chrnorm/deployment-status@v1.0.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          state: 'failure'
+          deployment_id: ${{ steps.storybook.outputs.deployment_id }}

.github/workflows/ui_test_accessibility.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: '18'
 
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/ui_test_primitives_diff.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: 18
 
       - name: Cache dependencies
         uses: actions/cache@v2

apps/storybook/.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

apps/storybook/.storybook/main.js

@@ -1,20 +1,30 @@
+import {dirname, join} from 'path'
 module.exports = {
   stories: [
     '../../../packages/react/src/**/*.stories.mdx',
     '../../../packages/react/src/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    'storybook-css-modules-preset',
-    '@storybook/addon-storysource',
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('storybook-css-modules-preset'),
+    getAbsolutePath('@storybook/addon-storysource'),
   ],
   framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {builder: {useSWC: true}},
   },
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
   features: {
     buildStoriesJson: true,
     disableTelemetry: true,
@@ -23,3 +33,7 @@ module.exports = {
     autodocs: false,
   },
 }
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}

apps/storybook/package.json

@@ -28,21 +28,22 @@
     "start:axe": "storybook dev -p 6006 --no-version-updates"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.22.0",
-    "@babel/preset-react": "^7.22.0",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@github/axe-github": "^0.5.0",
-    "@storybook/addon-a11y": "^7.0.18",
-    "@storybook/addon-actions": "^7.0.18",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/addon-storysource": "^7.0.18",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-storysource": "^7.6.10",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.18",
-    "@storybook/react-webpack5": "^7.0.18",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.10",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.6.10",
     "axe-core": "^4.7.2",
     "axe-playwright": "^1.2.3",
     "css-loader": "^6.7.4",
@@ -52,7 +53,7 @@
     "postcss-preset-env": "^7.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "storybook": "^7.0.18",
+    "storybook": "^7.6.10",
     "storybook-css-modules-preset": "^1.1.1",
     "typed-css-modules": "^0.7.2",
     "typescript": "^4.9.5"