@object-ui/components 3.3.0 → 3.3.1

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

@@ -1,147 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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/types/config-panel.ts

@@ -1,101 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Schema-driven config panel type definitions.
- *
- * Each concrete panel (View, Dashboard, Page…) provides a ConfigPanelSchema,
- * and ConfigPanelRenderer auto-generates the UI.
- */
-
-/** Supported control types for config fields */
-export type ControlType =
-  | 'input'
-  | 'switch'
-  | 'select'
-  | 'checkbox'
-  | 'slider'
-  | 'color'
-  | 'field-picker'
-  | 'filter'
-  | 'sort'
-  | 'icon-group'
-  | 'summary'
-  | 'custom';
-
-/** A single field within a config section */
-export interface ConfigField {
-  /** Field key in the draft object */
-  key: string;
-  /** Display label (may be an i18n key) */
-  label: string;
-  /** Control type determining which widget to render */
-  type: ControlType;
-  /** Default value for the field */
-  defaultValue?: any;
-  /** Select/icon-group options */
-  options?: Array<{ value: string; label: string; icon?: React.ReactNode }>;
-  /** Visibility predicate evaluated against the current draft */
-  visibleWhen?: (draft: Record<string, any>) => boolean;
-  /** Disabled predicate evaluated against the current draft */
-  disabledWhen?: (draft: Record<string, any>) => boolean;
-  /** Custom render function for type='custom' */
-  render?: (
-    value: any,
-    onChange: (v: any) => void,
-    draft: Record<string, any>,
-  ) => React.ReactNode;
-  /** Placeholder text for input/select controls */
-  placeholder?: string;
-  /** Help text displayed below the control */
-  helpText?: string;
-  /** Minimum value for slider */
-  min?: number;
-  /** Maximum value for slider */
-  max?: number;
-  /** Step value for slider */
-  step?: number;
-  /** Whether the field is disabled */
-  disabled?: boolean;
-  /** Field definitions for filter/sort sub-editors */
-  fields?: Array<{ value: string; label: string; type?: string; options?: Array<{ value: string; label: string }> }>;
-  /** Summary display text for type='summary' */
-  summaryText?: string;
-  /** Click handler for the summary gear/action button (type='summary') */
-  onSummaryClick?: () => void;
-}
-
-/** A group of related config fields */
-export interface ConfigSection {
-  /** Unique section key (used for collapse state tracking) */
-  key: string;
-  /** Section title (may be an i18n key) */
-  title: string;
-  /** Hint text displayed below the title */
-  hint?: string;
-  /** Icon displayed before the section title (e.g. a Lucide icon element) */
-  icon?: React.ReactNode;
-  /** Whether this section supports collapse/expand */
-  collapsible?: boolean;
-  /** Default collapsed state */
-  defaultCollapsed?: boolean;
-  /** Fields belonging to this section */
-  fields: ConfigField[];
-  /** Nested sub-sections for complex grouping */
-  subsections?: ConfigSection[];
-  /** Visibility predicate evaluated against the current draft */
-  visibleWhen?: (draft: Record<string, any>) => boolean;
-}
-
-/** Top-level schema describing an entire config panel */
-export interface ConfigPanelSchema {
-  /** Breadcrumb segments displayed in the panel header */
-  breadcrumb: string[];
-  /** Ordered list of sections */
-  sections: ConfigSection[];
-}

package/src/ui/accordion.tsx

@@ -1,66 +0,0 @@
-/**
- * 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 { ChevronDown } from "lucide-react"
-
-import { cn } from "../lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-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"
-
-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}
-    >
-      {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 }