Merge pull request #252 from objectstack-ai/copilot/add-stories-for-missing-components

Author: hotlong

.github/workflows/storybook-tests.yml

@@ -0,0 +1,26 @@
+name: Storybook Tests
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  test-storybook:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Storybook tests
+        run: pnpm test:storybook:ci

.gitignore

@@ -6,6 +6,7 @@ node_modules
 dist
 build
 out
+storybook-static
 
 # Misc
 .DS_Store

.storybook/main.ts

@@ -0,0 +1,49 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from 'vite';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ["../packages/**/src/**/*.mdx", "../packages/**/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          // Alias components package to source to avoid circular dependency during build
+          '@object-ui/core': path.resolve(__dirname, '../packages/core/src/index.ts'),
+          '@object-ui/react': path.resolve(__dirname, '../packages/react/src/index.ts'),
+          '@object-ui/components': path.resolve(__dirname, '../packages/components/src/index.ts'),
+          '@object-ui/fields': path.resolve(__dirname, '../packages/fields/src/index.tsx'),
+          '@object-ui/layout': path.resolve(__dirname, '../packages/layout/src/index.ts'),
+          // Alias plugin packages for Storybook to resolve them from workspace
+          '@object-ui/plugin-aggrid': path.resolve(__dirname, '../packages/plugin-aggrid/src/index.tsx'),
+          '@object-ui/plugin-calendar': path.resolve(__dirname, '../packages/plugin-calendar/src/index.tsx'),
+          '@object-ui/plugin-charts': path.resolve(__dirname, '../packages/plugin-charts/src/index.tsx'),
+          '@object-ui/plugin-chatbot': path.resolve(__dirname, '../packages/plugin-chatbot/src/index.tsx'),
+          '@object-ui/plugin-dashboard': path.resolve(__dirname, '../packages/plugin-dashboard/src/index.tsx'),
+          '@object-ui/plugin-editor': path.resolve(__dirname, '../packages/plugin-editor/src/index.tsx'),
+          '@object-ui/plugin-form': path.resolve(__dirname, '../packages/plugin-form/src/index.tsx'),
+          '@object-ui/plugin-gantt': path.resolve(__dirname, '../packages/plugin-gantt/src/index.tsx'),
+          '@object-ui/plugin-grid': path.resolve(__dirname, '../packages/plugin-grid/src/index.tsx'),
+          '@object-ui/plugin-kanban': path.resolve(__dirname, '../packages/plugin-kanban/src/index.tsx'),
+          '@object-ui/plugin-map': path.resolve(__dirname, '../packages/plugin-map/src/index.tsx'),
+          '@object-ui/plugin-markdown': path.resolve(__dirname, '../packages/plugin-markdown/src/index.tsx'),
+          '@object-ui/plugin-timeline': path.resolve(__dirname, '../packages/plugin-timeline/src/index.tsx'),
+          '@object-ui/plugin-view': path.resolve(__dirname, '../packages/plugin-view/src/index.tsx'),
+        },
+      },
+    });
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,49 @@
+import type { Preview } from '@storybook/react-vite'
+import '../packages/components/src/index.css';
+import { ComponentRegistry } from '@object-ui/core';
+import * as components from '../packages/components/src/index';
+
+// Register all base components for Storybook
+Object.values(components);
+
+// Import and register all plugin components for Storybook
+// This ensures plugin components are available for the plugin stories
+import '@object-ui/plugin-aggrid';
+import '@object-ui/plugin-calendar';
+import '@object-ui/plugin-charts';
+import '@object-ui/plugin-chatbot';
+import '@object-ui/plugin-dashboard';
+import '@object-ui/plugin-editor';
+import '@object-ui/plugin-form';
+import '@object-ui/plugin-gantt';
+import '@object-ui/plugin-grid';
+import '@object-ui/plugin-kanban';
+import '@object-ui/plugin-map';
+import '@object-ui/plugin-markdown';
+import '@object-ui/plugin-timeline';
+import '@object-ui/plugin-view';
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          'Introduction', 
+          'Guide', 
+          'Primitives', 
+          'Schema', 
+          ['Actions', 'Inputs', 'Layout', 'Data Display', 'Navigation', 'Feedback', 'Plugins']
+        ],
+      },
+    },
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -28,7 +28,10 @@
     "lint": "pnpm -r lint",
     "cli": "node packages/cli/dist/cli.js",
     "objectui": "node packages/cli/dist/cli.js",
-    "build:storybook": "pnpm --filter @object-ui/components build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
+    "test:storybook": "test-storybook --testTimeout=90000",
+    "test:storybook:ci": "concurrently -k -s first \"pnpm storybook --no-open\" \"wait-on tcp:6006 && pnpm test:storybook\"",
     "doctor": "node packages/cli/dist/cli.js doctor",
     "studio": "node packages/cli/dist/cli.js studio",
     "check": "node packages/cli/dist/cli.js check",
@@ -47,6 +50,13 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@eslint/js": "^9.39.1",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.15",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.15",
+    "@storybook/react-vite": "^8.6.15",
+    "@storybook/test-runner": "^0.24.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -57,22 +67,26 @@
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
     "autoprefixer": "^10.4.23",
+    "concurrently": "^9.2.1",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^17.1.0",
     "happy-dom": "^20.3.9",
     "jsdom": "^27.4.0",
+    "playwright": "^1.58.0",
     "prettier": "^3.8.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-router-dom": "^7.13.0",
+    "storybook": "^8.6.15",
     "tailwindcss": "^4.1.18",
     "tslib": "^2.6.0",
     "turbo": "^2.7.6",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.1",
-    "vitest": "^4.0.18"
+    "vitest": "^4.0.18",
+    "wait-on": "^9.0.3"
   },
   "pnpm": {
     "overrides": {

packages/components/.storybook/main.ts

@@ -31,10 +31,7 @@
     "pretest": "pnpm run prebuild",
     "test": "vitest run",
     "type-check": "tsc --noEmit",
-    "lint": "eslint .",
-    "storybook": "storybook dev -p 6006",
-    "prebuild-storybook": "pnpm run prebuild",
-    "build-storybook": "storybook build"
+    "lint": "eslint ."
   },
   "dependencies": {
     "@object-ui/core": "workspace:*",

packages/components/.storybook/preview.ts

@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 
 /* Scan sources for Tailwind classes */
-@source './src/**/*.{ts,tsx}';
+@source '../src/**/*.{ts,tsx}';
 
 /* Tailwind plugin for animations */
 @plugin 'tailwindcss-animate';

packages/components/package.json

@@ -16,6 +16,7 @@ ComponentRegistry.register('toggle-group',
         'data-obj-id': dataObjId, 
         'data-obj-type': dataObjType,
         style,
+        type, // Extract type to prevent overriding the one we set below
         ...toggleGroupProps
     } = props;