Add Storybook configuration and stories for all components and plugins

Author: hotlong

.gitignore

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

packages/components/.storybook/main.ts .storybook/main.tspackages/components/.storybook/main.ts renamed to .storybook/main.ts

@@ -3,7 +3,7 @@ import { mergeConfig } from 'vite';
 import path from 'path';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../packages/**/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -21,23 +21,23 @@ const config: StorybookConfig = {
       resolve: {
         alias: {
           // Alias components package to source to avoid circular dependency during build
-          '@object-ui/components': path.resolve(__dirname, '../src/index.ts'),
-          '@object-ui/fields': path.resolve(__dirname, '../../fields/src/index.tsx'),
+          '@object-ui/components': path.resolve(__dirname, '../packages/components/src/index.ts'),
+          '@object-ui/fields': path.resolve(__dirname, '../packages/fields/src/index.tsx'),
           // Alias plugin packages for Storybook to resolve them from workspace
-          '@object-ui/plugin-aggrid': path.resolve(__dirname, '../../plugin-aggrid/src/index.tsx'),
-          '@object-ui/plugin-calendar': path.resolve(__dirname, '../../plugin-calendar/src/index.tsx'),
-          '@object-ui/plugin-charts': path.resolve(__dirname, '../../plugin-charts/src/index.tsx'),
-          '@object-ui/plugin-chatbot': path.resolve(__dirname, '../../plugin-chatbot/src/index.tsx'),
-          '@object-ui/plugin-dashboard': path.resolve(__dirname, '../../plugin-dashboard/src/index.tsx'),
-          '@object-ui/plugin-editor': path.resolve(__dirname, '../../plugin-editor/src/index.tsx'),
-          '@object-ui/plugin-form': path.resolve(__dirname, '../../plugin-form/src/index.tsx'),
-          '@object-ui/plugin-gantt': path.resolve(__dirname, '../../plugin-gantt/src/index.tsx'),
-          '@object-ui/plugin-grid': path.resolve(__dirname, '../../plugin-grid/src/index.tsx'),
-          '@object-ui/plugin-kanban': path.resolve(__dirname, '../../plugin-kanban/src/index.tsx'),
-          '@object-ui/plugin-map': path.resolve(__dirname, '../../plugin-map/src/index.tsx'),
-          '@object-ui/plugin-markdown': path.resolve(__dirname, '../../plugin-markdown/src/index.tsx'),
-          '@object-ui/plugin-timeline': path.resolve(__dirname, '../../plugin-timeline/src/index.tsx'),
-          '@object-ui/plugin-view': path.resolve(__dirname, '../../plugin-view/src/index.tsx'),
+          '@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'),
         },
       },
     });

packages/components/.storybook/preview.ts .storybook/preview.tspackages/components/.storybook/preview.ts renamed to .storybook/preview.ts

@@ -1,7 +1,7 @@
 import type { Preview } from '@storybook/react-vite'
-import '../src/index.css';
+import '../packages/components/src/index.css';
 import { ComponentRegistry } from '@object-ui/core';
-import * as components from '../src/index';
+import * as components from '../packages/components/src/index';
 
 // Register all base components for Storybook
 Object.values(components);

package.json

@@ -28,7 +28,8 @@
     "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",
     "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 +48,12 @@
   "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",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -67,6 +74,7 @@
     "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",

packages/components/package.json

@@ -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:*",