fix: standardize story titles and improve organization across components

Author: hotlong

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: 'Schema/Layout/Aspect Ratio',
+  title: 'Schema/Layout',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
 
-export const Default: Story = {
+export const AspectRatio: Story = {
   render: renderStory,
   args: {
     type: 'div',

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: 'Schema/Data Display/Badge',
+  title: 'Schema/Data Display',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
 
-export const Default: Story = {
+export const Badge: Story = {
   render: renderStory,
   args: {
     type: 'badge',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Schema/Layout/Card',
+  title: 'Schema/Layout',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',
@@ -20,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 
 const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
 
-export const Default: Story = {
+export const Card: Story = {
   render: renderStory,
   args: {
     type: 'card',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Schema/Layout/Collapsible',
+  title: 'Schema/Layout',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
 
-export const Default: Story = {
+export const Collapsible: Story = {
   render: renderStory,
   args: {
     type: 'collapsible',

packages/components/src/stories-json/data-table.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SchemaRenderer } from '../SchemaRenderer';
 
 const meta: Meta = {
-  title: 'Schema/Data Display/Data Table',
+  title: 'Schema/Data Display',
   component: SchemaRenderer,
   tags: ['autodocs'],
   argTypes: {
@@ -13,7 +13,7 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const DataTable: Story = {
   args: {
     type: 'data-table',
     caption: 'Employees',

packages/components/src/stories-json/date-picker.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Schema/Inputs/Date Picker',
+  title: 'Schema/Inputs',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
 
-export const Default: Story = {
+export const DatePicker: Story = {
   render: renderStory,
   args: {
     type: 'date-picker',

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

@@ -66,3 +66,52 @@ export const Combobox: Story = {
     ]
   } as any,
 };
+
+export const Command: Story = {
+  render: renderStory,
+  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,
+};
+
+export const FilterBuilder: Story = {
+  render: renderStory,
+  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,
+};

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

@@ -13,17 +13,6 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Textarea: Story = {
-  args: {
-    type: 'textarea',
-    id: 'bio-field',
-    label: 'Biography',
-    placeholder: 'Tell us a little about yourself...',
-    className: 'min-h-[100px]',
-  },
-  render: (args) => <SchemaRenderer schema={args} />
-};
-
 export const Toggle: Story = {
   args: {
     type: 'toggle',

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

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Schema/Layout/Grid',
+  title: 'Schema/Layout',
   component: SchemaRenderer,
   parameters: { layout: 'padded' },
   tags: ['autodocs'],
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
 
-export const TwoColumns: Story = {
+export const Grid: Story = {
   render: renderStory,
   args: {
     type: 'grid',