Add storybook stories for Feedback, Form, and Layout components

Author: hotlong

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Feedback/Extras',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Spinner: Story = {
+    args: {
+        type: 'spinner',
+        size: 'lg',
+        className: 'text-primary'
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Empty: Story = {
+    args: {
+        type: 'empty',
+        description: 'No Data Found',
+        children: [
+            { type: 'button', content: 'Create Item', variant: 'default', size: 'sm' }
+        ]
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Loading: Story = {
+    args: {
+        type: 'loading',
+        text: 'Loading your experience...',
+        className: 'h-[200px]'
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};

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

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta: Meta = {
+  title: 'Form/Inputs',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Slider: Story = {
+  args: {
+    type: 'slider',
+    defaultValue: [50],
+    max: 100,
+    min: 0,
+    step: 1,
+    className: 'w-[300px]'
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const InputOTP: Story = {
+    args: {
+        type: 'input-otp',
+        maxLength: 6,
+        className: 'gap-2'
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Command: Story = {
+    args: {
+        type: 'command',
+        placeholder: 'Search documentation...',
+        className: 'rounded-lg border shadow-md w-[450px]',
+        groups: [
+            {
+                heading: 'Suggestions',
+                items: [
+                   { value: 'cal', label: 'Calendar' },
+                   { value: 'em', label: 'Search Emoji' },
+                   { value: 'calc', label: 'Calculator' }
+                ]
+            },
+            {
+                heading: 'Settings',
+                items: [
+                    { value: 'prof', label: 'Profile' },
+                    { value: 'bill', label: 'Billing' },
+                    { value: 'set', label: 'Settings' }
+                ]
+            }
+        ]
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const FilterBuilder: Story = {
+    args: {
+      type: 'filter-builder',
+      name: 'user_filters',
+      label: 'User Filters',
+      fields: [
+        { value: 'name', label: 'Name', type: 'text' },
+        { value: 'email', label: 'Email', type: 'text' },
+        { value: 'age', label: 'Age', type: 'number' },
+        { value: 'status', label: 'Status', type: 'select', options: ['active', 'inactive'] }
+      ],
+      value: {
+        id: 'root',
+        logic: 'and',
+        conditions: [
+            { field: 'age', operator: 'gt', value: 18 }
+        ]
+      }
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Layout/Extended',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ScrollArea: Story = {
+    args: {
+        type: 'scroll-area',
+        height: '200px',
+        width: '350px',
+        className: 'rounded-md border p-4',
+        content: [
+            { type: 'div', className: 'mb-4 text-sm font-bold', children: [{ type: 'text', content: 'Tags' }] },
+            { 
+               type: 'div', 
+               children: Array.from({ length: 50 }).map((_, i) => ({
+                   type: 'div',
+                   className: 'text-sm border-b py-2',
+                   children: [{ type: 'text', content: `Tag ${i + 1}` }]
+               }))
+            }
+        ]
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const HeaderBar: Story = {
+    args: {
+        type: 'header-bar',
+        crumbs: [
+            { label: 'Application' },
+            { label: 'Dashboard', href: '/dashboard' },
+            { label: 'Analytics' }
+        ]
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Pagination: Story = {
+    args: {
+        type: 'pagination',
+        currentPage: 2,
+        totalPages: 10,
+        className: 'mt-4'
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};
+
+export const Image: Story = {
+    args: {
+        type: 'image',
+        src: 'https://images.unsplash.com/photo-1576075796615-2c1185331f36?w=800&dpr=2&q=80',
+        alt: 'Photo by Unsplash',
+        className: 'rounded-xl object-cover',
+        width: 300,
+        height: 200
+    } as any,
+    render: (args) => <SchemaRenderer schema={args} />
+};