Refactor Storybook structure and update titles for consistency

- Changed titles in various story files to follow a new naming convention under 'Primitives' and 'Plugins'.
- Updated the Introduction.md file to enhance clarity and organization.
- Added new stories for live data fetching from MSW for CRM-related entities.
- Introduced new form variants including Sectioned, Tabbed, Wizard, and Simple forms.
- Created a custom Storybook theme for better visual consistency.

Author: hotlong

.storybook/main.ts

@@ -38,13 +38,16 @@ const config: StorybookConfig = {
           '@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-detail': path.resolve(__dirname, '../packages/plugin-detail/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-list': path.resolve(__dirname, '../packages/plugin-list/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-report': path.resolve(__dirname, '../packages/plugin-report/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'),
         },

.storybook/manager.ts

@@ -0,0 +1,56 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming/create';
+
+const objectUITheme = create({
+  base: 'light',
+
+  // Brand
+  brandTitle: 'ObjectUI — Server-Driven UI Engine',
+  brandUrl: 'https://github.com/objectstack-ai/objectui',
+  brandTarget: '_self',
+
+  // Colors
+  colorPrimary: '#6366f1',
+  colorSecondary: '#6366f1',
+
+  // UI
+  appBg: '#fafafa',
+  appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
+  appBorderColor: '#e5e7eb',
+  appBorderRadius: 8,
+
+  // Text
+  textColor: '#1f2937',
+  textInverseColor: '#ffffff',
+  textMutedColor: '#6b7280',
+
+  // Toolbar
+  barTextColor: '#6b7280',
+  barSelectedColor: '#6366f1',
+  barHoverColor: '#4f46e5',
+  barBg: '#ffffff',
+
+  // Form
+  inputBg: '#ffffff',
+  inputBorder: '#d1d5db',
+  inputTextColor: '#1f2937',
+  inputBorderRadius: 6,
+
+  // Font
+  fontBase: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
+  fontCode: '"JetBrains Mono", "Fira Code", monospace',
+});
+
+addons.setConfig({
+  theme: objectUITheme,
+  sidebar: {
+    showRoots: true,
+    collapsedRoots: ['apps'],
+  },
+  toolbar: {
+    zoom: { hidden: false },
+    eject: { hidden: false },
+    copy: { hidden: false },
+  },
+});

.storybook/preview.ts

@@ -59,13 +59,16 @@ import '@object-ui/plugin-calendar';
 import '@object-ui/plugin-charts';
 import '@object-ui/plugin-chatbot';
 import '@object-ui/plugin-dashboard';
+import '@object-ui/plugin-detail';
 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-list';
 import '@object-ui/plugin-map';
 import '@object-ui/plugin-markdown';
+import '@object-ui/plugin-report';
 import '@object-ui/plugin-timeline';
 import '@object-ui/plugin-view';
 import '@object-ui/layout';
@@ -81,11 +84,18 @@ const preview: Preview = {
       storySort: {
         method: 'alphabetical',
         order: [
-          'Introduction', 
-          'Guide', 
-          'Primitives', 
-          'Schema', 
-          ['Actions', 'Inputs', 'Layout', 'Data Display', 'Navigation', 'Feedback', 'Plugins']
+          'Getting Started',
+            ['Introduction', 'Data Binding'],
+          'Primitives',
+            ['General', 'Data Display', 'Data Entry', 'Navigation', 'Feedback', 'Overlay', 'Layout'],
+          'Fields',
+            ['Gallery'],
+          'Plugins',
+            ['Data Views', 'Forms', 'Scheduling', 'Rich Content'],
+          'Templates',
+            ['Dashboard', 'Page', 'Reports', 'Sidebar'],
+          'Apps',
+            ['CRM'],
         ],
       },
     },

packages/components/src/stories-json/accordion.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Accordion',
+  title: 'Primitives/Data Display/Accordion',
   component: SchemaRenderer,
   parameters: { layout: 'padded' },
   tags: ['autodocs'],

packages/components/src/stories-json/aggrid.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Views/Data Grid (AgGrid)',
+  title: 'Plugins/Data Views/AgGrid',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

packages/components/src/stories-json/alert.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Alert',
+  title: 'Primitives/Feedback/Alert',
   component: SchemaRenderer,
   parameters: { layout: 'padded' },
   tags: ['autodocs'],

packages/components/src/stories-json/aspect-ratio.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Aspect Ratio',
+  title: 'Primitives/Data Display/Aspect Ratio',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

packages/components/src/stories-json/avatar.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Avatar',
+  title: 'Primitives/Data Display/Avatar',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

packages/components/src/stories-json/badge.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Badge',
+  title: 'Primitives/Data Display/Badge',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

packages/components/src/stories-json/breadcrumb.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Breadcrumb',
+  title: 'Primitives/Navigation/Breadcrumb',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],