Merge pull request #458 from objectstack-ai/copilot/fix-storybook-errors

Author: hotlong

.github/workflows/storybook-tests.yml

@@ -5,20 +5,76 @@ on:
   pull_request:
     branches: [main, develop]
 
+permissions:
+  contents: read
+
 jobs:
-  test-storybook:
-    timeout-minutes: 60
+  storybook-build:
+    name: Storybook Build
+    timeout-minutes: 30
     runs-on: ubuntu-latest
+
     steps:
       - uses: actions/checkout@v6
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
       - uses: actions/setup-node@v6
         with:
           node-version: '20'
+          cache: 'pnpm'
+
+      - name: Turbo Cache
+        uses: actions/cache@v5
+        with:
+          path: node_modules/.cache/turbo
+          key: turbo-${{ runner.os }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm build
+
+      - name: Build Storybook
+        run: pnpm storybook:build
+
+  storybook-test:
+    name: Storybook Test Runner
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    needs: storybook-build
+
+    steps:
+      - uses: actions/checkout@v6
+
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Turbo Cache
+        uses: actions/cache@v5
+        with:
+          path: node_modules/.cache/turbo
+          key: turbo-${{ runner.os }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ runner.os }}-
+
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm build
+
       - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+        run: pnpm exec playwright install --with-deps chromium
+
       - name: Run Storybook tests
         run: pnpm storybook:ci

.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from 'vite';
 import path from 'path';
+import { viteCryptoStub } from '../scripts/vite-crypto-stub';
 
 const config: StorybookConfig = {
   stories: ["../packages/**/src/**/*.mdx", "../packages/**/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -19,6 +20,14 @@ const config: StorybookConfig = {
   },
   async viteFinal(config) {
     return mergeConfig(config, {
+      define: {
+        'process.env': {},
+        'process.platform': '"browser"',
+        'process.version': '"0.0.0"',
+      },
+      plugins: [
+        viteCryptoStub(),
+      ],
       resolve: {
         alias: {
           // Alias for .storybook directory to allow imports from stories
@@ -52,6 +61,25 @@ const config: StorybookConfig = {
           '@object-ui/plugin-view': path.resolve(__dirname, '../packages/plugin-view/src/index.tsx'),
         },
       },
+      optimizeDeps: {
+        include: [
+          'msw',
+          'msw/browser',
+          '@objectstack/spec',
+          '@objectstack/spec/data',
+          '@objectstack/spec/system',
+          '@objectstack/spec/ui',
+          '@objectstack/runtime',
+          '@objectstack/objectql',
+          '@objectstack/driver-memory',
+          '@objectstack/plugin-msw',
+          '@mdx-js/react',
+          'react-router-dom',
+        ],
+      },
+      build: {
+        target: 'esnext',
+      },
     });
   },
 };