@object-ui/components 0.5.0 → 2.0.0

package/src/stories-json/form-variants.stories.tsx

@@ -0,0 +1,210 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/Forms/Form Variants',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <div className="max-w-4xl mx-auto">
+      <SchemaRenderer schema={args as unknown as BaseSchema} />
+    </div>
+  </SchemaRendererProvider>
+);
+
+// ==========================================
+// Sectioned Form
+// ==========================================
+
+export const SectionedForm: Story = {
+  name: 'Sectioned Form',
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Employee',
+    formType: 'simple',
+    sections: [
+      {
+        name: 'personal',
+        label: 'Personal Information',
+        description: 'Basic employee details',
+        columns: 2,
+        collapsible: true,
+        fields: [
+          { name: 'firstName', label: 'First Name', type: 'text', required: true },
+          { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+          { name: 'email', label: 'Email', type: 'email', required: true },
+          { name: 'phone', label: 'Phone', type: 'tel' },
+        ]
+      },
+      {
+        name: 'employment',
+        label: 'Employment Details',
+        description: 'Job-related information',
+        columns: 2,
+        collapsible: true,
+        fields: [
+          { name: 'department', label: 'Department', type: 'select', options: ['Engineering', 'Sales', 'Marketing', 'HR'] },
+          { name: 'title', label: 'Job Title', type: 'text' },
+          { name: 'startDate', label: 'Start Date', type: 'date' },
+          { name: 'salary', label: 'Salary', type: 'number' },
+        ]
+      },
+      {
+        name: 'address',
+        label: 'Address',
+        columns: 1,
+        collapsible: true,
+        collapsed: true,
+        fields: [
+          { name: 'street', label: 'Street Address', type: 'text' },
+          { name: 'city', label: 'City', type: 'text' },
+          { name: 'state', label: 'State', type: 'text' },
+          { name: 'zip', label: 'ZIP Code', type: 'text' },
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+// ==========================================
+// Tabbed Form
+// ==========================================
+
+export const TabbedForm: Story = {
+  name: 'Tabbed Form',
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Contact',
+    formType: 'tabbed',
+    defaultTab: 'basic',
+    sections: [
+      {
+        name: 'basic',
+        label: 'Basic Info',
+        columns: 2,
+        fields: [
+          { name: 'name', label: 'Full Name', type: 'text', required: true },
+          { name: 'email', label: 'Email', type: 'email', required: true },
+          { name: 'phone', label: 'Phone', type: 'tel' },
+          { name: 'company', label: 'Company', type: 'text' },
+        ]
+      },
+      {
+        name: 'social',
+        label: 'Social Media',
+        columns: 2,
+        fields: [
+          { name: 'linkedin', label: 'LinkedIn', type: 'url' },
+          { name: 'twitter', label: 'Twitter', type: 'text' },
+          { name: 'github', label: 'GitHub', type: 'text' },
+          { name: 'website', label: 'Website', type: 'url' },
+        ]
+      },
+      {
+        name: 'notes',
+        label: 'Notes',
+        columns: 1,
+        fields: [
+          { name: 'notes', label: 'Additional Notes', type: 'textarea', rows: 6 },
+          { name: 'tags', label: 'Tags', type: 'text' },
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+// ==========================================
+// Wizard Form
+// ==========================================
+
+export const WizardForm: Story = {
+  name: 'Wizard Form',
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Account',
+    formType: 'wizard',
+    showStepIndicator: true,
+    nextText: 'Continue',
+    prevText: 'Go Back',
+    sections: [
+      {
+        name: 'step1',
+        label: 'Company Details',
+        description: 'Tell us about your company',
+        columns: 2,
+        fields: [
+          { name: 'companyName', label: 'Company Name', type: 'text', required: true },
+          { name: 'industry', label: 'Industry', type: 'select', options: ['Technology', 'Finance', 'Healthcare', 'Retail'] },
+          { name: 'website', label: 'Website', type: 'url' },
+          { name: 'employees', label: 'Employee Count', type: 'number' },
+        ]
+      },
+      {
+        name: 'step2',
+        label: 'Primary Contact',
+        description: 'Who should we contact?',
+        columns: 2,
+        fields: [
+          { name: 'contactName', label: 'Contact Name', type: 'text', required: true },
+          { name: 'contactEmail', label: 'Contact Email', type: 'email', required: true },
+          { name: 'contactPhone', label: 'Phone', type: 'tel' },
+          { name: 'contactRole', label: 'Role', type: 'text' },
+        ]
+      },
+      {
+        name: 'step3',
+        label: 'Preferences',
+        description: 'Configure your preferences',
+        columns: 1,
+        fields: [
+          { name: 'plan', label: 'Plan', type: 'select', options: ['Starter', 'Professional', 'Enterprise'] },
+          { name: 'newsletter', label: 'Subscribe to Newsletter', type: 'checkbox' },
+          { name: 'notes', label: 'Additional Notes', type: 'textarea', rows: 4 },
+        ]
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+// ==========================================
+// Simple Form (Default)
+// ==========================================
+
+export const SimpleForm: Story = {
+  name: 'Simple Form (Default)',
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Task',
+    customFields: [
+      { name: 'title', label: 'Task Title', type: 'text', required: true },
+      { name: 'description', label: 'Description', type: 'textarea', rows: 3 },
+      { name: 'priority', label: 'Priority', type: 'select', options: ['Low', 'Medium', 'High', 'Critical'] },
+      { name: 'dueDate', label: 'Due Date', type: 'date' },
+      { name: 'assignee', label: 'Assignee', type: 'text' },
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};

package/src/stories-json/form_advanced.stories.tsx

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

package/src/stories-json/form_extras.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SchemaRenderer } from '../SchemaRenderer';
 
 const meta: Meta = {
-  title: 'Components/Form Extras',
+  title: 'Primitives/Data Entry/Form Extras',
   component: SchemaRenderer,
   tags: ['autodocs'],
   argTypes: {

package/src/stories-json/grid.stories.tsx

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

package/src/stories-json/icon.stories.tsx

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

package/src/stories-json/input.stories.tsx

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

package/src/stories-json/kanban.stories.tsx

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

package/src/stories-json/layout_extended.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SchemaRenderer } from '../SchemaRenderer';
 
 const meta: Meta = {
-  title: 'Components/Extended',
+  title: 'Primitives/Layout/Container',
   component: SchemaRenderer,
   tags: ['autodocs'],
 };

package/src/stories-json/layout_flex.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SchemaRenderer } from '../SchemaRenderer';
 
 const meta: Meta = {
-  title: 'Components/Flex',
+  title: 'Primitives/Layout/Flex',
   component: SchemaRenderer,
   tags: ['autodocs'],
   argTypes: {

package/src/stories-json/list-view.stories.tsx

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

package/src/stories-json/markdown.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Views/Markdown',
+  title: 'Plugins/Rich Content/Markdown',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

package/src/stories-json/menus.stories.tsx

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

package/src/stories-json/metric-card.stories.tsx

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

package/src/stories-json/navigation-menu.stories.tsx

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