-
Notifications
You must be signed in to change notification settings - Fork 0
Add Storybook stories for all 14 plugin packages #252
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
e78a064
215a097
62c31e5
8dda86b
98be70a
6339652
8fbf6ad
7a1b06d
ddec15f
0707e4f
7dc3a83
f23fdb2
95dcd10
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,7 @@ node_modules | |
| dist | ||
| build | ||
| out | ||
| storybook-static | ||
|
|
||
| # Misc | ||
| .DS_Store | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file was deleted.
This file was deleted.
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,7 +1,7 @@ | ||||||
| @import 'tailwindcss'; | ||||||
|
|
||||||
| /* Scan sources for Tailwind classes */ | ||||||
| @source './src/**/*.{ts,tsx}'; | ||||||
| @source '../src/**/*.{ts,tsx}'; | ||||||
|
||||||
| @source '../src/**/*.{ts,tsx}'; | |
| @source './**/*.{ts,tsx}'; |
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -8,7 +8,7 @@ | |||||||||
|
|
||||||||||
| import { ComponentRegistry } from '@object-ui/core'; | ||||||||||
| import type { ToggleSchema } from '@object-ui/types'; | ||||||||||
| import { Toggle, ToggleGroup, ToggleGroupItem } from '../../ui'; | ||||||||||
| import { Toggle } from '../../ui'; | ||||||||||
| import { renderChildren } from '../../lib/utils'; | ||||||||||
|
|
||||||||||
| ComponentRegistry.register('toggle', | ||||||||||
|
|
@@ -28,9 +28,9 @@ ComponentRegistry.register('toggle', | |||||||||
| inputs: [ | ||||||||||
| { name: 'label', type: 'string', label: 'Label' }, | ||||||||||
| { name: 'pressed', type: 'boolean', label: 'Pressed' }, | ||||||||||
| { name: 'variant', type: 'enum', enum: ['default', 'outline'], defaultValue: 'default', label: 'Variant' }, | ||||||||||
| { name: 'size', type: 'enum', enum: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' }, | ||||||||||
| { name: 'ariaLabel', type: 'string', label: 'Aria Label' } | ||||||||||
| { name: 'variant', type: 'enum', index: ['default', 'outline'], defaultValue: 'default', label: 'Variant' }, | ||||||||||
| { name: 'size', type: 'enum', index: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' }, | ||||||||||
|
Comment on lines
+31
to
+32
|
||||||||||
| { name: 'variant', type: 'enum', index: ['default', 'outline'], defaultValue: 'default', label: 'Variant' }, | |
| { name: 'size', type: 'enum', index: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' }, | |
| { name: 'variant', type: 'enum', enum: ['default', 'outline'], defaultValue: 'default', label: 'Variant' }, | |
| { name: 'size', type: 'enum', enum: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
According to Guideline #2 (Documentation Driven Development), any feature implemented or refactored must include corresponding documentation updates. This PR adds:
However, there are no documentation updates in content/docs/guide/ to explain:
Consider adding documentation in content/docs/guide/ or updating the relevant package README files to reflect the new Storybook setup and usage patterns.