Update Storybook to 8.2.6 (latest), and move preview deploys to /brand (

#671) * update asset paths * update dependencies * fix types * update asset paths * update build * debug ci * debug ci * test * test * tidying * debug ci * fix typescript issue * remove unused build-docs script * fix playwright.generate-tests.ts * github-actions[bot] Regenerated snapshots * remove docs static dir from storybook * add test redirect * debug ci * remove debugging * create redirect in ci * add comment explaining redirect * fix interaction test * reset viewport between stories * remove unnecessary jest dependency from packages/react * remove relative links for assets * update package-lock.json * update snapshot * remove jest dependencies from e2e --------- Co-authored-by: joshfarrant <[email protected]>
primer · Aug 6, 2024 · 8019e3d · 8019e3d
1 parent c76c8c8
commit 8019e3d
Show file tree

Hide file tree

Showing 20 changed files with 20,370 additions and 27,572 deletions.
diff --git a/.github/workflows/deploy_docs_preview.yml b/.github/workflows/deploy_docs_preview.yml
@@ -19,8 +19,16 @@ jobs:
     with:
       node_version: 18
       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/
+      build: |
+        npm run build && \
+        npm run build:docs && \
+        npm run build:storybook && \
+        mkdir brand-temp && \
+        mv apps/docs/public/* brand-temp && \
+        mv brand-temp apps/docs/public/brand && \
+        # This is a client-side redirect that only applies to preview deployments. Workaround for lack of path prefixing.
+        echo '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Redirecting...</title><script>window.location.href = "/brand";</script></head><body><p>If you are not redirected automatically, follow this <a href="/brand">link to /brand</a>.</p></body></html>' > apps/docs/public/index.html
+      output_dir: apps/docs/public
 
   deploy-storybook:
     if: ${{ github.repository == 'primer/brand' }}

diff --git a/.github/workflows/deploy_docs_preview_forks.yml b/.github/workflows/deploy_docs_preview_forks.yml
@@ -19,5 +19,5 @@ jobs:
     with:
       node_version: 18
       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
+      build: npm run build && npm run build:docs && npm run build:storybook
       output_dir: apps/docs/public/
diff --git a/apps/docs/package-lock.json b/apps/docs/package-lock.json
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -5,7 +5,6 @@
   "repository": "primer/brand",
   "scripts": {
     "build": "npm run clean && cross-env NODE_ENV=production gatsby build --prefix-paths",
-    "build:preview": "npm run clean && cross-env NODE_ENV=production gatsby build",
     "clean": "rm -rf public && rm -rf .cache",
     "start": "rm -rf .cache && npm run build:animation && gatsby develop --open",
     "build:animation": "node scripts/animation-support.js"
@@ -27,7 +26,7 @@
   "devDependencies": {
     "css-to-string-loader": "^0.1.3",
     "path-browserify": "^1.0.1",
-    "typescript": "^4.6.3"
+    "typescript": "^5.5.4"
   },
   "engines": {
     "node": ">=16",

diff --git a/apps/docs/scripts/build-docs b/apps/docs/scripts/build-docs
diff --git a/apps/storybook/.storybook/main.js b/apps/storybook/.storybook/main.js
@@ -2,6 +2,7 @@ import {dirname, join} from 'path'
 
 module.exports = {
   stories: ['../../../packages/react/src/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../static'],
   addons: [
     {
       name: getAbsolutePath('@storybook/addon-essentials'),
@@ -33,8 +34,9 @@ module.exports = {
     buildStoriesJson: true,
     disableTelemetry: true,
   },
-  docs: {
-    autodocs: false,
+  docs: {},
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
 }
 

diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
@@ -79,6 +79,9 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  viewport: {
+    defaultViewport: 'reset',
+  },
   options: {
     storySort: (a, b) => {
       const titleCompare = a.title.localeCompare(b.title)

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -21,29 +21,29 @@
   "license": "MIT",
   "author": "GitHub, Inc.",
   "scripts": {
-    "build:preview": "npm run clean && scripts/build-storybook preview",
-    "build:prod": "npm run clean && scripts/build-storybook",
+    "build": "npm run clean && scripts/build-storybook",
     "clean": "rm -rf out",
-    "start": "storybook dev -p 6006  -s ../static",
+    "start": "storybook dev -p 6006",
     "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",
     "@github/axe-github": "^0.5.0",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-storysource": "^7.6.17",
+    "@storybook/addon-a11y": "^8.2.6",
+    "@storybook/addon-actions": "^8.2.6",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-interactions": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-storysource": "^8.2.6",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
-    "@storybook/test": "^7.6.17",
+    "@storybook/manager-api": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@storybook/react-webpack5": "^8.2.6",
+    "@storybook/test": "^8.2.6",
     "@storybook/test-runner": "^0.10.0",
-    "@storybook/theming": "^7.6.17",
+    "@storybook/theming": "^8.2.6",
     "axe-core": "^4.7.2",
     "axe-playwright": "^1.2.3",
     "css-loader": "^6.7.4",
@@ -54,10 +54,10 @@
     "postcss-preset-env": "^7.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "storybook": "^7.6.17",
+    "storybook": "^8.2.6",
     "storybook-css-modules-preset": "^1.1.1",
     "typed-css-modules": "^0.7.2",
-    "typescript": "^4.9.5"
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "react": ">=17 <= 18",

diff --git a/apps/storybook/scripts/build-storybook b/apps/storybook/scripts/build-storybook
@@ -2,17 +2,11 @@
 set -e
 
 # Add base url to be able to serve static files
-if [ -n "$1" ]; then
-  echo "Building storybook for preview"
-  echo '<base href="/storybook/" />' >> .storybook/manager-head.html
-else
-  echo "Building storybook for production"
-  echo '<base href="/brand/storybook/" />' >> .storybook/manager-head.html
-fi
+echo '<base href="/brand/storybook/" />' >> .storybook/manager-head.html
 
 mkdir -p ../../apps/docs/public/storybook
 # Build storybook inside docs
-npx storybook build -o ../../apps/docs/public/storybook -s ../../apps/docs/public/static
+npx storybook build -o ../../apps/docs/public/storybook
 
 # Remove manager-head after build to not interfere with dev builds
 rm .storybook/manager-head.html