ci: deploy Storybook to GitHub Pages (#1928)

Co-authored-by: Noah Waldner <[email protected]>
Frontify · Jun 25, 2024 · 5ed3444 · 5ed3444
1 parent 25cad76
commit 5ed3444
Show file tree

Hide file tree

Showing 11 changed files with 192 additions and 58 deletions.
diff --git a/.github/workflows/preview-storybook-pr.yaml b/.github/workflows/preview-storybook-pr.yaml
@@ -0,0 +1,57 @@
+name: Deploy Storybook PR Preview
+
+concurrency: storybook-pr-preview-${{ github.ref }}
+
+on:
+    pull_request:
+        types:
+            - opened
+            - reopened
+            - synchronize
+            - closed
+
+jobs:
+    deploy-pr-preview:
+        name: Deploy Storybook PR Preview
+        runs-on: ubuntu-latest
+        timeout-minutes: 10
+
+        steps:
+            - name: Checkout default branch
+              uses: actions/checkout@v4
+
+            - name: Use pnpm
+              if: github.event.action != 'closed'
+              uses: pnpm/action-setup@v3
+              with:
+                  run_install: false
+
+            - name: Use Node.js
+              if: github.event.action != 'closed'
+              uses: actions/setup-node@v4
+              with:
+                  node-version-file: ".nvmrc"
+                  cache: "pnpm"
+
+            - name: Install npm dependencies
+              if: github.event.action != 'closed'
+              run: pnpm i --frozen-lockfile
+
+            - name: Build Fondue Icons
+              if: github.event.action != 'closed'
+              run: pnpm build:icons
+
+            - name: Build Fondue Tokens
+              if: github.event.action != 'closed'
+              run: pnpm build:tokens
+
+            - name: Build Storybook docs
+              if: github.event.action != 'closed'
+              run: pnpm build:storybook:packages && pnpm build:storybook:main
+              env:
+                  STORYBOOK_PATH_PREFIX: "/pr-preview/pr-${{ github.event.number }}/"
+
+            - name: Deploy Storybook to GitHub Pages
+              uses: rossjrw/[email protected]
+              with:
+                  source-dir: ./storybook-docs/storybook-static
diff --git a/.github/workflows/docs-pull-requests.yaml → .github/workflows/preview-storybook.yaml b/.github/workflows/docs-pull-requests.yaml → .github/workflows/preview-storybook.yaml
@@ -1,16 +1,14 @@
-name: Fondue Documentation CI
+name: Deploy Storybook
 
 on:
-    pull_request:
-
-# Ensures that only one workflow per branch will run at a time.
-concurrency:
-    group: ${{ github.workflow }}-${{ github.ref }}
-    cancel-in-progress: true
+    push:
+        branches:
+            - main
+    workflow_dispatch:
 
 jobs:
-    storybook:
-        name: Storybook
+    deploy-preview:
+        name: Deploy Storybook
         runs-on: ubuntu-latest
         timeout-minutes: 10
 
@@ -39,4 +37,10 @@ jobs:
               run: pnpm build:tokens
 
             - name: Build Storybook docs
-              run: pnpm build:storybook
+              run: pnpm build:storybook:packages && pnpm build:storybook:main
+
+            - name: Deploy Storybook to GitHub Pages
+              uses: JamesIves/github-pages-deploy-action@v4
+              with:
+                  folder: ./storybook-docs/storybook-static
+                  clean-exclude: pr-preview
diff --git a/packages/charts/.storybook/main.ts b/packages/charts/.storybook/main.ts
@@ -2,6 +2,8 @@
 
 import { StorybookConfig } from '@storybook/react-vite';
 
+const productionPathPrefix = process.env.STORYBOOK_PATH_PREFIX ? `${process.env.STORYBOOK_PATH_PREFIX}charts/` : '/';
+
 export default {
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
     staticDirs: ['assets'],
@@ -20,7 +22,22 @@ export default {
         autodocs: 'tag',
         defaultName: 'Documentation',
     },
-    viteFinal(config) {
+    managerHead: (head, { configType }) => {
+        if (configType === 'PRODUCTION') {
+            const injections = [
+                `<link rel="shortcut icon" type="image/x-icon" href="${productionPathPrefix}favicon.ico">`,
+                `<script>window.PREVIEW_URL = '${productionPathPrefix}iframe.html'</script>`,
+            ];
+            return `${head}${injections.join('')}`;
+        }
+
+        return head;
+    },
+    viteFinal(config, { configType }) {
+        if (configType === 'PRODUCTION') {
+            config.base = productionPathPrefix;
+        }
+
         // @ts-expect-error untyped name property
         config.plugins = (config.plugins ?? []).filter((plugin) => plugin?.name !== 'vite:dts');
 

diff --git a/packages/charts/.storybook/preview-head.html b/packages/charts/.storybook/preview-head.html
@@ -5,8 +5,8 @@
         font-style: normal;
         font-weight: 300;
         src:
-            url('/fonts/SpaceGroteskFrontify-Light.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Light.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Light.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Light.woff') format('woff');
     }
 
     @font-face {
@@ -15,8 +15,8 @@
         font-style: normal;
         font-weight: 400;
         src:
-            url('/fonts/SpaceGroteskFrontify-Regular.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Regular.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Regular.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Regular.woff') format('woff');
     }
 
     @font-face {
@@ -25,8 +25,8 @@
         font-style: normal;
         font-weight: 500;
         src:
-            url('/fonts/SpaceGroteskFrontify-Medium.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Medium.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Medium.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Medium.woff') format('woff');
     }
 
     @font-face {
@@ -35,8 +35,8 @@
         font-style: normal;
         font-weight: 600;
         src:
-            url('/fonts/SpaceGroteskFrontify-SemiBold.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-SemiBold.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-SemiBold.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-SemiBold.woff') format('woff');
     }
 
     @font-face {
@@ -45,8 +45,8 @@
         font-style: normal;
         font-weight: 700;
         src:
-            url('/fonts/SpaceGroteskFrontify-Bold.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Bold.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Bold.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Bold.woff') format('woff');
     }
 
     .side-by-side {

diff --git a/packages/components/.storybook/main.ts b/packages/components/.storybook/main.ts
@@ -2,6 +2,8 @@
 
 import type { StorybookConfig } from '@storybook/react-vite';
 
+const productionPathPrefix = process.env.STORYBOOK_PATH_PREFIX ? `${process.env.STORYBOOK_PATH_PREFIX}new/` : '/';
+
 const config: StorybookConfig = {
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
     staticDirs: ['assets'],
@@ -21,7 +23,22 @@ const config: StorybookConfig = {
         autodocs: 'tag',
         defaultName: 'Documentation',
     },
-    viteFinal(config) {
+    managerHead: (head, { configType }) => {
+        if (configType === 'PRODUCTION') {
+            const injections = [
+                `<link rel="shortcut icon" type="image/x-icon" href="${productionPathPrefix}favicon.ico">`,
+                `<script>window.PREVIEW_URL = '${productionPathPrefix}iframe.html'</script>`,
+            ];
+            return `${head}${injections.join('')}`;
+        }
+
+        return head;
+    },
+    viteFinal(config, { configType }) {
+        if (configType === 'PRODUCTION') {
+            config.base = productionPathPrefix;
+        }
+
         // @ts-expect-error untyped name property
         config.plugins = (config.plugins ?? []).filter((plugin) => plugin?.name !== 'vite:dts');
 

diff --git a/packages/components/.storybook/preview-head.html b/packages/components/.storybook/preview-head.html
@@ -5,8 +5,8 @@
         font-style: normal;
         font-weight: 300;
         src:
-            url('/fonts/SpaceGroteskFrontify-Light.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Light.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Light.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Light.woff') format('woff');
     }
 
     @font-face {
@@ -15,8 +15,8 @@
         font-style: normal;
         font-weight: 400;
         src:
-            url('/fonts/SpaceGroteskFrontify-Regular.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Regular.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Regular.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Regular.woff') format('woff');
     }
 
     @font-face {
@@ -25,8 +25,8 @@
         font-style: normal;
         font-weight: 500;
         src:
-            url('/fonts/SpaceGroteskFrontify-Medium.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Medium.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Medium.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Medium.woff') format('woff');
     }
 
     @font-face {
@@ -35,8 +35,8 @@
         font-style: normal;
         font-weight: 600;
         src:
-            url('/fonts/SpaceGroteskFrontify-SemiBold.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-SemiBold.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-SemiBold.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-SemiBold.woff') format('woff');
     }
 
     @font-face {
@@ -45,8 +45,8 @@
         font-style: normal;
         font-weight: 700;
         src:
-            url('/fonts/SpaceGroteskFrontify-Bold.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Bold.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Bold.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Bold.woff') format('woff');
     }
 
     .side-by-side {

diff --git a/packages/fondue/.storybook/main.ts b/packages/fondue/.storybook/main.ts
@@ -3,6 +3,8 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import ts from 'typescript';
 
+const productionPathPrefix = process.env.STORYBOOK_PATH_PREFIX ? `${process.env.STORYBOOK_PATH_PREFIX}legacy/` : '/';
+
 export default <StorybookConfig>{
     framework: '@storybook/react-vite',
     stories: ['../src/**/*.stories.tsx'],
@@ -22,7 +24,22 @@ export default <StorybookConfig>{
             componentNameResolver: (expression: ts.Symbol) => expression.getName(),
         },
     },
-    viteFinal(config) {
+    managerHead: (head, { configType }) => {
+        if (configType === 'PRODUCTION') {
+            const injections = [
+                `<link rel="shortcut icon" type="image/x-icon" href="${productionPathPrefix}favicon.ico">`,
+                `<script>window.PREVIEW_URL = '${productionPathPrefix}iframe.html'</script>`,
+            ];
+            return `${head}${injections.join('')}`;
+        }
+
+        return head;
+    },
+    viteFinal(config, { configType }) {
+        if (configType === 'PRODUCTION') {
+            config.base = productionPathPrefix;
+        }
+
         // @ts-expect-error untyped name property
         config.plugins = (config.plugins ?? []).filter((plugin) => plugin?.name !== 'vite:dts');
 

diff --git a/packages/fondue/.storybook/preview-head.html b/packages/fondue/.storybook/preview-head.html
@@ -5,8 +5,8 @@
         font-style: normal;
         font-weight: 300;
         src:
-            url('/fonts/SpaceGroteskFrontify-Light.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Light.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Light.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Light.woff') format('woff');
     }
 
     @font-face {
@@ -15,8 +15,8 @@
         font-style: normal;
         font-weight: 400;
         src:
-            url('/fonts/SpaceGroteskFrontify-Regular.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Regular.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Regular.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Regular.woff') format('woff');
     }
 
     @font-face {
@@ -25,8 +25,8 @@
         font-style: normal;
         font-weight: 500;
         src:
-            url('/fonts/SpaceGroteskFrontify-Medium.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Medium.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Medium.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Medium.woff') format('woff');
     }
 
     @font-face {
@@ -35,8 +35,8 @@
         font-style: normal;
         font-weight: 600;
         src:
-            url('/fonts/SpaceGroteskFrontify-SemiBold.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-SemiBold.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-SemiBold.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-SemiBold.woff') format('woff');
     }
 
     @font-face {
@@ -45,8 +45,8 @@
         font-style: normal;
         font-weight: 700;
         src:
-            url('/fonts/SpaceGroteskFrontify-Bold.woff2') format('woff2'),
-            url('/fonts/SpaceGroteskFrontify-Bold.woff') format('woff');
+            url('fonts/SpaceGroteskFrontify-Bold.woff2') format('woff2'),
+            url('fonts/SpaceGroteskFrontify-Bold.woff') format('woff');
     }
 
     .side-by-side {

diff --git a/packages/icons/.storybook/main.ts b/packages/icons/.storybook/main.ts
@@ -2,6 +2,8 @@
 
 import type { StorybookConfig } from '@storybook/react-vite';
 
+const productionPathPrefix = process.env.STORYBOOK_PATH_PREFIX ? `${process.env.STORYBOOK_PATH_PREFIX}icons/` : '/';
+
 const config: StorybookConfig = {
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
     staticDirs: ['assets'],
@@ -21,7 +23,22 @@ const config: StorybookConfig = {
         autodocs: 'tag',
         defaultName: 'Documentation',
     },
-    viteFinal(config) {
+    managerHead: (head, { configType }) => {
+        if (configType === 'PRODUCTION') {
+            const injections = [
+                `<link rel="shortcut icon" type="image/x-icon" href="${productionPathPrefix}favicon.ico">`,
+                `<script>window.PREVIEW_URL = '${productionPathPrefix}iframe.html'</script>`,
+            ];
+            return `${head}${injections.join('')}`;
+        }
+
+        return head;
+    },
+    viteFinal(config, { configType }) {
+        if (configType === 'PRODUCTION') {
+            config.base = productionPathPrefix;
+        }
+
         // @ts-expect-error untyped name property
         config.plugins = (config.plugins ?? []).filter((plugin) => plugin?.name !== 'vite:dts');