@object-ui/components 3.3.0 → 3.3.1

package/src/renderers/data-display/statistic.tsx

@@ -1,95 +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.
- */
-
-import { ComponentRegistry } from '@object-ui/core';
-import type { StatisticSchema } from '@object-ui/types';
-import { cn } from '../../lib/utils';
-import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
-import * as LucideIcons from 'lucide-react';
-
-// Helper to resolve icon
-const getIcon = (name: string) => {
-    if (!name) return null;
-    const pascalName = name.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join('');
-    // Dynamic icon lookup from Lucide
-    const Icon = LucideIcons[pascalName] || LucideIcons[name];
-    return Icon;
-};
-
-const StatisticRenderer = ({ schema }: { schema: StatisticSchema }) => {
-  const Icon = schema.icon ? getIcon(schema.icon) : null;
-  
-  return (
-    <div className={cn(
-        "group relative flex flex-col p-4 sm:p-5 md:p-6 rounded-xl border bg-card text-card-foreground shadow-sm",
-        schema.className
-    )}>
-      {/* Label & Header Icon */}
-      <div className="flex items-center justify-between mb-2">
-          {schema.label && (
-            <p className="text-sm font-medium text-muted-foreground">
-            {schema.label}
-            </p>
-          )}
-          {/* Dynamic icon resolution from Lucide, not component creation during render */}
-          {/* eslint-disable-next-line */}
-          {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
-      </div>
-
-      {/* Value Area */}
-      <div className="flex items-baseline gap-2">
-        <h3 className="text-2xl font-bold tracking-tight">
-          {schema.value}
-        </h3>
-      </div>
-        
-      {/* Footer / Trend */}
-      {(schema.trend || schema.description) && (
-            <div className="mt-1 flex items-center text-xs text-muted-foreground">
-                 {schema.trend === 'up' && <TrendingUp className="mr-1 h-3 w-3 text-emerald-500" />}
-                 {schema.trend === 'down' && <TrendingDown className="mr-1 h-3 w-3 text-rose-500" />}
-                 {schema.trend === 'neutral' && <Minus className="mr-1 h-3 w-3" />}
-                 <span className={cn(
-                     schema.trend === 'up' && "text-emerald-500 font-medium",
-                     schema.trend === 'down' && "text-rose-500 font-medium",
-                 )}>
-                    {schema.description}
-                 </span>
-            </div>
-      )}
-    </div>
-  );
-};
-
-ComponentRegistry.register('statistic', StatisticRenderer, {
-  namespace: 'ui',
-  label: 'Statistic',
-  category: 'data-display',
-  icon: 'Activity',
-  inputs: [
-    { name: 'label', type: 'string', label: 'Label' },
-    { name: 'value', type: 'string', label: 'Value' },
-    { name: 'description', type: 'string', label: 'Description' },
-    { 
-      name: 'trend', 
-      type: 'enum', 
-      enum: [
-        { label: 'Up', value: 'up' },
-        { label: 'Down', value: 'down' },
-        { label: 'Neutral', value: 'neutral' }
-      ], 
-      label: 'Trend' 
-    }
-  ],
-  defaultProps: {
-    label: 'Total Revenue',
-    value: '$45,231.89',
-    trend: 'up',
-    description: '+20.1% from last month'
-  }
-});

package/src/renderers/data-display/table.tsx

@@ -1,78 +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.
- */
-
-import React from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import { useDataScope } from '@object-ui/react';
-import { 
-  Table, 
-  TableBody, 
-  TableCell, 
-  TableHead, 
-  TableHeader, 
-  TableRow 
-} from '../../ui/table';
-import { cn } from '../../lib/utils';
-
-export const SimpleTableRenderer = ({ schema, className }: any) => {
-  // Try to get data from binding first, then fall back to inline data
-  const boundData = useDataScope(schema.bind);
-  const data = boundData || schema.data || schema.props?.data || [];
-  const columns = Array.isArray(schema.columns) ? schema.columns : Array.isArray(schema.props?.columns) ? schema.props.columns : [];
-
-  // If we have data but it's not an array, show error. 
-  // If data is undefined, we might just be loading or empty.
-  if (data && !Array.isArray(data)) {
-    return <div className="text-red-500 p-2 border border-red-200 bg-red-50 rounded text-sm">Table data must be an array</div>;
-  }
-  
-  const displayData = Array.isArray(data) ? data : [];
-
-  return (
-    <div className={cn("rounded-md border", className)}>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            {columns.map((col: any, index: number) => (
-              <TableHead key={col.key || col.accessorKey || index}>
-                {col.label || col.header}
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {displayData.length === 0 ? (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          ) : (
-            displayData.map((row: any, i: number) => (
-              <TableRow key={row.id || i}>
-                {columns.map((col: any, index: number) => {
-                  const accessor = col.key || col.accessorKey || '';
-                  const value = accessor ? row[accessor] : '';
-                  return (
-                    <TableCell key={col.key || col.accessorKey || index}>
-                      {value != null && typeof value === 'object' ? String(value) : value}
-                    </TableCell>
-                  );
-                })}
-              </TableRow>
-            ))
-          )}
-        </TableBody>
-      </Table>
-    </div>
-  );
-};
-
-ComponentRegistry.register('table', SimpleTableRenderer, {
-  namespace: 'ui'
-});

package/src/renderers/data-display/tree-view.tsx

@@ -1,176 +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.
- */
-
-import { ComponentRegistry } from '@object-ui/core';
-import type { TreeViewSchema, TreeNode } from '@object-ui/types';
-import { ChevronRight, ChevronDown, Folder, File, FolderOpen, CircuitBoard } from 'lucide-react';
-import { useState } from 'react';
-import { cn } from '../../lib/utils';
-import { useDataScope } from '@object-ui/react';
-
-const TreeNodeComponent = ({ 
-  node, 
-  onNodeClick
-}: { 
-  node: TreeNode; 
-  onNodeClick?: (node: TreeNode) => void;
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const hasChildren = node.children && node.children.length > 0;
-
-  const handleToggle = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsOpen(!isOpen);
-  };
-
-  const handleClick = () => {
-    if (onNodeClick) {
-      onNodeClick(node);
-    }
-  };
-
-  return (
-    <div className="relative">
-      <div
-        className={cn(
-          'group flex items-center py-1.5 px-2 rounded-sm cursor-pointer transition-colors',
-          'hover:bg-accent hover:text-accent-foreground',
-          isOpen && hasChildren && 'bg-accent/50' 
-        )}
-        onClick={handleClick}
-      >
-        {hasChildren ? (
-          <button
-            onClick={handleToggle}
-            className="mr-2 p-0.5 h-5 w-5 flex items-center justify-center rounded-sm hover:bg-muted text-muted-foreground transition-colors"
-          >
-            {isOpen ? (
-              <ChevronDown className="h-4 w-4" />
-            ) : (
-              <ChevronRight className="h-4 w-4" />
-            )}
-          </button>
-        ) : (
-          <span className="mr-2 w-5 flex justify-center">
-             <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
-          </span>
-        )}
-        
-        {node.icon === 'folder' || hasChildren ? (
-          isOpen ? 
-            <FolderOpen className="h-4 w-4 mr-2 text-primary" /> : 
-            <Folder className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-primary transition-colors" />
-        ) : (
-          <File className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-primary transition-colors" />
-        )}
-        
-        <span className={cn(
-            "text-sm transition-colors",
-            isOpen ? "font-medium text-foreground" : "text-muted-foreground group-hover:text-foreground"
-        )}>
-            {node.label}
-        </span>
-      </div>
-
-      {hasChildren && isOpen && (
-        <div className="relative ml-[11px] pl-3 border-l border-border animate-in slide-in-from-left-2 fade-in duration-200">
-          {node.children!.map((child) => (
-            <TreeNodeComponent
-              key={child.id}
-              node={child}
-              onNodeClick={onNodeClick}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-ComponentRegistry.register('tree-view', 
-  ({ schema, className, ...props }) => {
-    const handleNodeClick = (node: TreeNode) => {
-      if (schema.onNodeClick) {
-        schema.onNodeClick(node);
-      }
-    };
-
-    // Support data binding
-    const boundData = useDataScope(schema.bind);
-    const rawNodes = boundData || schema.nodes || schema.data || [];
-    const nodes = Array.isArray(rawNodes) ? rawNodes : [];
-
-    return (
-      <div className={cn(
-          'relative border rounded-lg p-3 bg-card text-card-foreground',
-          className
-        )} 
-        {...props}
-      >
-        {schema.title && (
-          <div className="flex items-center gap-2 mb-3 pb-2 border-b">
-            <h3 className="text-sm font-semibold">{schema.title}</h3>
-          </div>
-        )}
-        <div className="space-y-1">
-          {nodes.map((node: TreeNode) => (
-            <TreeNodeComponent
-              key={node.id}
-              node={node}
-              onNodeClick={handleNodeClick}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Tree View',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title' },
-      { 
-        name: 'nodes', 
-        type: 'array', 
-        label: 'Tree Nodes',
-        description: 'Array of { id, label, icon, children, data }'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      title: 'File Explorer',
-      nodes: [
-        {
-          id: '1',
-          label: 'Documents',
-          icon: 'folder',
-          children: [
-            { id: '1-1', label: 'Resume.pdf', icon: 'file' },
-            { id: '1-2', label: 'Cover Letter.docx', icon: 'file' }
-          ]
-        },
-        {
-          id: '2',
-          label: 'Photos',
-          icon: 'folder',
-          children: [
-            { id: '2-1', label: 'Vacation', icon: 'folder', children: [
-              { id: '2-1-1', label: 'Beach.jpg', icon: 'file' }
-            ]},
-            { id: '2-2', label: 'Family.jpg', icon: 'file' }
-          ]
-        },
-        {
-          id: '3',
-          label: 'README.md',
-          icon: 'file'
-        }
-      ]
-    }
-  }
-);

package/src/renderers/disclosure/accordion.tsx

@@ -1,69 +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.
- */
-
-import { ComponentRegistry } from '@object-ui/core';
-import type { AccordionSchema } from '@object-ui/types';
-import { 
-  Accordion, 
-  AccordionItem, 
-  AccordionTrigger, 
-  AccordionContent 
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('accordion', 
-  ({ schema, className, ...props }: { schema: AccordionSchema; className?: string; [key: string]: any }) => (
-    <Accordion type={schema.accordionType || 'single'} collapsible={schema.collapsible} className={className} {...props}>
-      {schema.items?.map((item, index: number) => (
-        <AccordionItem key={item.value || index} value={item.value || `item-${index}`}>
-          <AccordionTrigger>{item.title}</AccordionTrigger>
-          <AccordionContent>
-            {renderChildren(item.content)}
-          </AccordionContent>
-        </AccordionItem>
-      ))}
-    </Accordion>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Accordion',
-    inputs: [
-      { name: 'accordionType', type: 'enum', enum: ['single', 'multiple'], defaultValue: 'single', label: 'Type' },
-      { name: 'collapsible', type: 'boolean', label: 'Collapsible (for single type)' },
-       { 
-        name: 'items', 
-        type: 'array', 
-        label: 'Items',
-        description: 'Array of { trigger, content, value }'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      accordionType: 'single',
-      collapsible: true,
-      items: [
-        { 
-          label: 'Item 1', 
-          value: 'item-1', 
-          content: [{ type: 'text', content: 'Content for item 1' }] 
-        },
-        { 
-          label: 'Item 2', 
-          value: 'item-2', 
-          content: [{ type: 'text', content: 'Content for item 2' }] 
-        },
-        { 
-          label: 'Item 3', 
-          value: 'item-3', 
-          content: [{ type: 'text', content: 'Content for item 3' }] 
-        }
-      ],
-      className: 'w-full'
-    }
-  }
-);

package/src/renderers/disclosure/collapsible.tsx

@@ -1,53 +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.
- */
-
-import { ComponentRegistry } from '@object-ui/core';
-import type { CollapsibleSchema } from '@object-ui/types';
-import { 
-  Collapsible, 
-  CollapsibleTrigger, 
-  CollapsibleContent 
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('collapsible', 
-  ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
-    <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
-       <CollapsibleTrigger asChild>
-         {renderChildren(schema.trigger)}
-       </CollapsibleTrigger>
-       <CollapsibleContent>
-         {renderChildren(schema.content)}
-       </CollapsibleContent>
-    </Collapsible>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Collapsible',
-    inputs: [
-      { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
-      { name: 'disabled', type: 'boolean', label: 'Disabled' },
-       { 
-        name: 'trigger', 
-        type: 'slot', 
-        label: 'Trigger' 
-      },
-      { 
-        name: 'content', 
-        type: 'slot', 
-        label: 'Content' 
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      trigger: [{ type: 'button', label: 'Toggle', variant: 'outline' }],
-      content: [{ type: 'text', content: 'Collapsible content goes here' }],
-      className: 'w-full'
-    }
-  }
-);

package/src/renderers/disclosure/index.ts

@@ -1,11 +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.
- */
-
-import './accordion';
-import './collapsible';
-import './toggle-group';

package/src/renderers/disclosure/toggle-group.tsx

@@ -1,79 +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.
- */
-
-import { ComponentRegistry } from '@object-ui/core';
-import type { ToggleGroupSchema } from '@object-ui/types';
-import { ToggleGroup, ToggleGroupItem } from '../../ui/toggle-group';
-
-ComponentRegistry.register('toggle-group', 
-  ({ schema, ...props }: { schema: ToggleGroupSchema; [key: string]: any }) => {
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        type, // Extract type to prevent overriding the one we set below
-        ...toggleGroupProps
-    } = props;
-    
-    return (
-      <ToggleGroup 
-        type={(schema.selectionType || 'single') as any}
-        variant={schema.variant}
-        size={schema.size}
-        value={schema.value as any}
-        className={schema.className} 
-        {...toggleGroupProps}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {schema.items?.map((item, idx) => (
-          <ToggleGroupItem key={idx} value={item.value} aria-label={item.label}>
-            {item.label}
-          </ToggleGroupItem>
-        ))}
-      </ToggleGroup>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Toggle Group',
-    inputs: [
-      { 
-        name: 'selectionType', 
-        type: 'enum', 
-        enum: ['single', 'multiple'], 
-        defaultValue: 'single',
-        label: 'Selection Type'
-      },
-      { 
-        name: 'variant', 
-        type: 'enum', 
-        enum: ['default', 'outline'], 
-        defaultValue: 'default',
-        label: 'Variant'
-      },
-      { 
-        name: 'size', 
-        type: 'enum', 
-        enum: ['default', 'sm', 'lg'], 
-        defaultValue: 'default',
-        label: 'Size'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      selectionType: 'single',
-      variant: 'default',
-      size: 'default',
-      items: [
-        { value: 'bold', label: 'Bold' },
-        { value: 'italic', label: 'Italic' },
-        { value: 'underline', label: 'Underline' }
-      ]
-    }
-  }
-);

package/src/renderers/feedback/empty.tsx

@@ -1,49 +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.
- */
-
-import { ComponentRegistry } from '@object-ui/core';
-import type { EmptySchema } from '@object-ui/types';
-import { InboxIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
-
-ComponentRegistry.register('empty', 
-  ({ schema, ...props }: { schema: EmptySchema; [key: string]: any }) => {
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        ...emptyProps
-    } = props;
-    
-    return (
-      <div 
-        className={cn('flex flex-col items-center justify-center p-8 text-center', schema.className)} 
-        {...emptyProps}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        <InboxIcon className="h-12 w-12 text-muted-foreground mb-4" />
-        <h3 className="text-lg font-semibold">{schema.title || 'No data'}</h3>
-        {schema.description && (
-          <p className="text-sm text-muted-foreground mt-2">{schema.description}</p>
-        )}
-      </div>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Empty',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title', defaultValue: 'No data' },
-      { name: 'description', type: 'string', label: 'Description' },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      title: 'No data'
-    }
-  }
-);

package/src/renderers/feedback/index.ts

@@ -1,16 +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.
- */
-
-import './progress';
-import './skeleton';
-import './toaster';
-import './loading';
-import './toast';
-import './spinner';
-import './empty';
-import './sonner';