@object-ui/components 0.3.1 → 2.0.0

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

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+const meta: Meta = {
+  title: 'Templates/Sidebar',
+  component: SchemaRenderer,
+  tags: ['autodocs'],
+  argTypes: {
+    // Schema properties
+  },
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Helper to minimize nesting
+const sidebarMenu = (items: { label: string, icon?: string, active?: boolean }[]) => ({
+  type: 'sidebar-menu',
+  body: items.map(item => ({
+    type: 'sidebar-menu-item',
+    body: [
+      {
+        type: 'sidebar-menu-button',
+        active: item.active,
+        tooltip: item.label,
+        body: [
+          item.icon ? { type: 'icon', name: item.icon } : null,
+          { type: 'text', content: item.label }
+        ]
+      }
+    ]
+  }))
+});
+
+export const DefaultSidebar: Story = {
+  args: {
+    type: 'sidebar-provider',
+    defaultOpen: true,
+    style: { height: '600px', border: '1px solid #e2e8f0' }, // Constrain height for storybook
+    body: [
+      {
+        type: 'sidebar',
+        collapsible: 'icon',
+        body: [
+          {
+            type: 'sidebar-header',
+            body: [
+               { 
+                 type: 'sidebar-menu',
+                 body: [{
+                   type: 'sidebar-menu-item',
+                   body: [{
+                     type: 'sidebar-menu-button',
+                     size: 'lg',
+                     body: [
+                       { 
+                         type: 'div', 
+                         className: 'flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground',
+                         children: [{ type: 'icon', name: 'flower-2', className: 'size-4' }] 
+                       },
+                       {
+                         type: 'div',
+                         className: 'grid flex-1 text-left text-sm leading-tight',
+                         children: [
+                            { type: 'span', className: 'truncate font-semibold', children: [{ type: 'text', content: 'Acme Inc' }] },
+                            { type: 'span', className: 'truncate text-xs', children: [{ type: 'text', content: 'Enterprise' }] }
+                         ]
+                       }
+                     ]
+                   }]
+                 }]
+               }
+            ]
+          },
+          {
+            type: 'sidebar-content',
+            body: [
+              {
+                type: 'sidebar-group',
+                label: 'Platform',
+                body: [
+                    sidebarMenu([
+                        { label: 'Playground', icon: 'terminal', active: true },
+                        { label: 'Models', icon: 'bot' },
+                        { label: 'Documentation', icon: 'book-open' },
+                        { label: 'Settings', icon: 'settings-2' }
+                    ])
+                ]
+              },
+              {
+                type: 'sidebar-group',
+                label: 'Projects',
+                body: [
+                    sidebarMenu([
+                        { label: 'Design Engineering', icon: 'frame' },
+                        { label: 'Sales & Marketing', icon: 'pie-chart' },
+                        { label: 'Travel', icon: 'map' }
+                    ])
+                ]
+              }
+            ]
+          },
+          {
+            type: 'sidebar-footer',
+            body: [
+               sidebarMenu([
+                   { label: 'User Account', icon: 'user' }
+               ])
+            ]
+          }
+        ]
+      },
+      {
+        type: 'sidebar-inset',
+        body: [
+          {
+            type: 'header-bar',
+            crumbs: [
+                { label: 'Building Your Application', href: '#' },
+                { label: 'Data Fetching' }
+            ]
+          },
+          {
+            type: 'div',
+            className: 'flex flex-1 flex-col gap-4 p-4 pt-0',
+            children: [
+                {
+                    type: 'div',
+                    className: 'grid auto-rows-min gap-4 md:grid-cols-3',
+                    children: [
+                        { type: 'div', className: 'aspect-video rounded-xl bg-muted/50' },
+                        { type: 'div', className: 'aspect-video rounded-xl bg-muted/50' },
+                        { type: 'div', className: 'aspect-video rounded-xl bg-muted/50' }
+                    ]
+                },
+                { type: 'div', className: 'min-h-[100vh] flex-1 rounded-xl bg-muted/50' }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  render: (args) => <SchemaRenderer schema={args} />
+};

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Primitives/Data Display/Statistic',
+  component: SchemaRenderer,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } }
+  }
+} satisfies Meta<typeof SchemaRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'statistic',
+    label: 'Total Revenue',
+    value: '$45,231.89',
+    icon: 'dollar-sign',
+    trend: 'up',
+    description: '+20.1% from last month',
+    className: 'w-[300px]'
+  } as any,
+};
+
+export const DownTrend: Story = {
+  render: renderStory,
+  args: {
+    type: 'statistic',
+    label: 'Bounce Rate',
+    value: '42.3%',
+    icon: 'activity',
+    trend: 'down',
+    description: '-5% better than average',
+    className: 'w-[300px]'
+  } as any,
+};

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Primitives/Navigation/Tabs',
+  component: SchemaRenderer,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } }
+  }
+} satisfies Meta<typeof SchemaRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'tabs',
+    defaultValue: 'account',
+    className: 'w-[400px]',
+    items: [
+        { 
+            label: 'Account', 
+            value: 'account', 
+            body: [
+                { type: 'card', title: 'Schema/Navigation/Account', description: "Make changes to your account here.", children: [
+                    { type: 'input', label: 'Name', defaultValue: 'Pedro Duarte', wrapperClass: 'mb-4' },
+                    { type: 'input', label: 'Username', defaultValue: '@peduarte' },
+                    { type: 'button', children: [{type:'text', content: 'Save changes'}], className: 'mt-4' }
+                ]}
+            ] 
+        },
+        { 
+            label: 'Password', 
+            value: 'password', 
+            body: [
+                { type: 'card', title: 'Schema/Navigation/Password', description: "Change your password here.", children: [
+                    { type: 'input', label: 'Current Password', inputType: 'password', wrapperClass: 'mb-4' },
+                    { type: 'input', label: 'New Password', inputType: 'password' },
+                    { type: 'button', children: [{type:'text', content: 'Save password'}], className: 'mt-4' }
+                ]}
+            ] 
+        }
+    ]
+  } as any,
+};

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

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Primitives/Data Display/Timeline',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Vertical: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'vertical',
+    dateFormat: 'short',
+    items: [
+      {
+        time: '2024-01-15',
+        title: 'Schema/Data Display/Project Started',
+        description: 'Kickoff meeting and initial planning',
+        variant: 'success',
+        icon: '🚀',
+      },
+      {
+        time: '2024-02-01',
+        title: 'Schema/Data Display/First Milestone',
+        description: 'Completed initial design phase',
+        variant: 'info',
+        icon: '🎨',
+      },
+      {
+        time: '2024-03-15',
+        title: 'Schema/Data Display/Beta Release',
+        description: 'Released beta version to testers',
+        variant: 'warning',
+        icon: '⚡',
+      },
+      {
+        time: '2024-04-01',
+        title: 'Schema/Data Display/Launch',
+        description: 'Official product launch',
+        variant: 'success',
+        icon: '🎉',
+      },
+    ]
+  } as any,
+};
+
+export const Horizontal: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'horizontal',
+    dateFormat: 'short',
+    items: [
+      {
+        time: '2024-01-01',
+        title: 'Schema/Data Display/Q1',
+        description: 'First quarter goals',
+        variant: 'default',
+      },
+      {
+        time: '2024-04-01',
+        title: 'Schema/Data Display/Q2',
+        description: 'Second quarter goals',
+        variant: 'info',
+      },
+      {
+        time: '2024-07-01',
+        title: 'Schema/Data Display/Q3',
+        description: 'Third quarter goals',
+        variant: 'warning',
+      },
+      {
+        time: '2024-10-01',
+        title: 'Schema/Data Display/Q4',
+        description: 'Fourth quarter goals',
+        variant: 'success',
+      },
+    ]
+  } as any,
+};
+
+export const Gantt: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'gantt',
+    dateFormat: 'short',
+    timeScale: 'month',
+    rowLabel: 'Projects',
+    items: [
+      {
+        label: 'Backend Development',
+        items: [
+          {
+            title: 'Schema/Data Display/API Design',
+            startDate: '2024-01-01',
+            endDate: '2024-01-31',
+            variant: 'success',
+          },
+          {
+            title: 'Schema/Data Display/Implementation',
+            startDate: '2024-02-01',
+            endDate: '2024-03-31',
+            variant: 'info',
+          },
+        ],
+      },
+      {
+        label: 'Frontend Development',
+        items: [
+          {
+            title: 'Schema/Data Display/UI Design',
+            startDate: '2024-01-15',
+            endDate: '2024-02-15',
+            variant: 'warning',
+          },
+          {
+            title: 'Schema/Data Display/Component Dev',
+            startDate: '2024-02-15',
+            endDate: '2024-04-15',
+            variant: 'default',
+          },
+        ],
+      },
+      {
+        label: 'Testing',
+        items: [
+          {
+            title: 'Schema/Data Display/QA Phase',
+            startDate: '2024-03-01',
+            endDate: '2024-04-30',
+            variant: 'danger',
+          },
+        ],
+      },
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+export const ProductRoadmap: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'vertical',
+    dateFormat: 'long',
+    items: [
+      {
+        time: '2024-01-01',
+        title: 'Schema/Data Display/Phase 1: Foundation',
+        description: 'Core infrastructure and basic features',
+        variant: 'success',
+      },
+      {
+        time: '2024-03-01',
+        title: 'Schema/Data Display/Phase 2: Enhancement',
+        description: 'Advanced features and integrations',
+        variant: 'info',
+      },
+      {
+        time: '2024-06-01',
+        title: 'Schema/Data Display/Phase 3: Optimization',
+        description: 'Performance improvements and scaling',
+        variant: 'warning',
+      },
+      {
+        time: '2024-09-01',
+        title: 'Schema/Data Display/Phase 4: Enterprise',
+        description: 'Enterprise features and support',
+        variant: 'default',
+      },
+    ]
+  } as any,
+};

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Primitives/General/Typography',
+  component: SchemaRenderer,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } }
+  }
+} satisfies Meta<typeof SchemaRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Headings: Story = {
+  render: renderStory,
+  args: {
+    type: 'div',
+    className: 'space-y-4',
+    children: [
+        { type: 'html', html: '<h1>Taxing Laughter: The Joke Tax Chronicles</h1>', className: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl' },
+        { type: 'html', html: '<h2>The People of the Kingdom</h2>', className: 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0' },
+        { type: 'html', html: '<h3>The Joke Tax</h3>', className: 'scroll-m-20 text-2xl font-semibold tracking-tight' },
+        { type: 'html', html: '<h4>People stopped telling jokes</h4>', className: 'scroll-m-20 text-xl font-semibold tracking-tight' },
+    ]
+  } as any,
+};
+
+export const Paragraphs: Story = {
+  render: renderStory,
+  args: {
+    type: 'div',
+    className: 'space-y-4 max-w-lg',
+    children: [
+        { type: 'html', html: '<p>The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.</p>', className: 'leading-7 [&:not(:first-child)]:mt-6' },
+        { type: 'html', html: '<blockquote>"After all," he said, "everyone enjoys a good joke, so it\'s only fair that they should pay for the privilege."</blockquote>', className: 'mt-6 border-l-2 pl-6 italic' },
+        { type: 'text', content: 'Just a plain text node without wrapper.' }
+    ]
+  } as any,
+};

package/src/ui/accordion.tsx

@@ -6,67 +6,61 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+"use client"
+
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "../lib/utils"
 
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
+const Accordion = AccordionPrimitive.Root
 
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
 
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
       {...props}
     >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }