@object-ui/components 0.3.0 → 0.5.0

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: 'Components/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: 'Components/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: 'Components/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: 'Components/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

@@ -1,64 +1,66 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * 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 }