@object-ui/components 3.1.5 → 3.3.1

package/src/renderers/complex/filter-builder.tsx

@@ -1,77 +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 { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
-import { FilterBuilder } from '../../custom/filter-builder';
-
-ComponentRegistry.register('filter-builder', 
-  ({ schema, className, onChange, ...props }: { schema: FilterBuilderSchema; className?: string; onChange?: (event: any) => void; [key: string]: any }) => {
-    const handleChange = (value: any) => {
-      if (onChange) {
-        onChange({
-          target: {
-            name: schema.name,
-            value: value,
-          },
-        });
-      }
-    };
-
-    return (
-      <div className={schema.wrapperClass || ''}>
-        {schema.label && (
-          <label className="text-sm font-medium mb-2 block">{schema.label}</label>
-        )}
-        <FilterBuilder
-          fields={(schema.fields || []) as any}
-          value={schema.value || props.value}
-          onChange={handleChange}
-          className={className}
-          {...props}
-        />
-      </div>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Filter Builder',
-    inputs: [
-      { name: 'label', type: 'string', label: 'Label' },
-      { name: 'name', type: 'string', label: 'Name', required: true },
-      { 
-        name: 'fields', 
-        type: 'array', 
-        label: 'Fields',
-        description: 'Array of { value: string, label: string, type?: string } objects',
-        required: true
-      },
-      { 
-        name: 'value', 
-        type: 'object', 
-        label: 'Initial Value',
-        description: 'FilterGroup object with conditions'
-      }
-    ],
-    defaultProps: {
-      label: 'Filters',
-      name: '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: 'text' }
-      ],
-      value: {
-        id: 'root',
-        logic: 'and',
-        conditions: []
-      }
-    }
-  }
-);

package/src/renderers/complex/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 './carousel';
-import './filter-builder';
-import './scroll-area';
-import './resizable';
-import './table';
-import './data-table';
-
-

package/src/renderers/complex/resizable.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.
- */
-
-import React from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import type { ResizableSchema } from '@object-ui/types';
-import { 
-  ResizablePanelGroup, 
-  ResizablePanel, 
-  ResizableHandle 
-} from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('resizable', 
-  ({ schema, className, ...props }: { schema: ResizableSchema; className?: string; [key: string]: any }) => {
-    const panels = Array.isArray(schema.panels) ? schema.panels : [];
-    return (
-      <ResizablePanelGroup 
-          orientation={(schema.direction || 'horizontal') as "horizontal" | "vertical"}
-          className={className} 
-          {...props}
-          style={{ minHeight: schema.minHeight || '200px' }}
-      >
-        {panels.map((panel: any, index: number) => (
-          <React.Fragment key={index}>
-               <ResizablePanel defaultSize={panel.defaultSize} minSize={panel.minSize} maxSize={panel.maxSize}>
-                  {renderChildren(panel.content)}
-               </ResizablePanel>
-               {index < panels.length - 1 && <ResizableHandle withHandle={schema.withHandle} />}
-          </React.Fragment>
-        ))}
-      </ResizablePanelGroup>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Resizable Panel Group',
-    inputs: [
-      { name: 'direction', type: 'enum', enum: ['horizontal', 'vertical'], defaultValue: 'horizontal', label: 'Direction' },
-      { name: 'minHeight', type: 'string', label: 'Min Height' },
-      { name: 'withHandle', type: 'boolean', label: 'Show Handle Icon', defaultValue: true },
-      { 
-        name: 'panels', 
-        type: 'array', 
-        label: 'Panels',
-        description: 'Array of { defaultSize, minSize, maxSize, content }'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      direction: 'horizontal',
-      minHeight: '200px',
-      withHandle: true,
-      panels: [
-        { defaultSize: 50, content: [{ type: 'div', className: 'p-4', body: [{ type: 'text', content: 'Panel 1' }] }] },
-        { defaultSize: 50, content: [{ type: 'div', className: 'p-4', body: [{ type: 'text', content: 'Panel 2' }] }] }
-      ],
-      className: 'rounded-lg border'
-    }
-  }
-);

package/src/renderers/complex/scroll-area.tsx

@@ -1,58 +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 { ScrollAreaSchema } from '@object-ui/types';
-import { ScrollArea, ScrollBar } from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('scroll-area', 
-  ({ schema, className, ...props }: { schema: ScrollAreaSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...scrollAreaProps 
-    } = props;
-
-    const orientation = schema.orientation || 'vertical';
-
-    return (
-    <ScrollArea 
-        className={className} 
-        style={{ height: schema.height, width: schema.width, ...style }} 
-        {...scrollAreaProps}
-        data-obj-id={dataObjId}
-        data-obj-type={dataObjType}
-    >
-      {renderChildren(schema.children)}
-      {(orientation === 'horizontal' || orientation === 'both') && <ScrollBar orientation="horizontal" />}
-      {(orientation === 'vertical' || orientation === 'both') && <ScrollBar orientation="vertical" />}
-    </ScrollArea>
-  )},
-  {
-    namespace: 'ui',
-    label: 'Scroll Area',
-    inputs: [
-      { name: 'height', type: 'string', label: 'Height (e.g. 200px)' },
-      { name: 'width', type: 'string', label: 'Width' },
-      { name: 'orientation', type: 'enum', enum: ['vertical', 'horizontal', 'both'], defaultValue: 'vertical', label: 'Orientation' },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      height: '200px',
-      width: '100%',
-      orientation: 'vertical',
-      children: [
-        { type: 'div', className: 'p-4', body: [{ type: 'text', content: 'Scrollable content goes here. Add more content to see scrolling behavior.' }] }
-      ],
-      className: 'rounded-md border'
-    }
-  }
-);

package/src/renderers/complex/table.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.
- */
-
-// table.tsx implementation
-import { ComponentRegistry } from '@object-ui/core';
-import type { TableSchema } from '@object-ui/types';
-import { renderChildren } from '../../lib/utils';
-import { 
-  Table, 
-  TableHeader, 
-  TableBody, 
-  TableFooter, 
-  TableHead, 
-  TableRow, 
-  TableCell, 
-  TableCaption 
-} from '../../ui';
-
-// A simple data-driven table
-ComponentRegistry.register('table', 
-  ({ schema, className, ...props }: { schema: TableSchema; className?: string; [key: string]: any }) => (
-    <Table className={className} {...props}>
-      {schema.caption && <TableCaption>{schema.caption}</TableCaption>}
-      <TableHeader>
-        <TableRow>
-          {schema.columns?.map((col: any, index: number) => (
-            <TableHead key={index} className={col.className} style={{ width: col.width }}>
-                {col.header || col.label}
-            </TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {schema.data?.map((row: any, rowIndex: number) => (
-          <TableRow key={rowIndex}>
-            {schema.columns?.map((col: any, colIndex: number) => (
-                <TableCell key={colIndex} className={col.cellClassName}>
-                    {row[col.accessorKey || col.name]}
-                </TableCell>
-            ))}
-          </TableRow>
-        ))}
-      </TableBody>
-      {schema.footer && (
-          <TableFooter>
-              <TableRow>
-                   <TableCell colSpan={schema.columns?.length}>
-                     {/* Use renderChildren to handle SchemaNode potentially being an object */}
-                     {typeof schema.footer === 'string' ? schema.footer : renderChildren(schema.footer)}
-                   </TableCell>
-              </TableRow>
-          </TableFooter>
-      )}
-    </Table>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Table',
-    inputs: [
-      { name: 'caption', type: 'string', label: 'Caption' },
-      { name: 'footer', type: 'string', label: 'Footer Content' },
-      { 
-          name: 'columns', 
-          type: 'array', 
-          label: 'Columns',
-          description: 'Array of { header, accessorKey, className, width }'
-      },
-       { 
-          name: 'data', 
-          type: 'array', 
-          label: 'Data',
-          description: 'Array of objects'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      caption: 'Table Caption',
-      columns: [
-        { header: 'Column 1', accessorKey: 'col1' },
-        { header: 'Column 2', accessorKey: 'col2' },
-        { header: 'Column 3', accessorKey: 'col3' }
-      ],
-      data: [
-        { col1: 'Row 1, Col 1', col2: 'Row 1, Col 2', col3: 'Row 1, Col 3' },
-        { col1: 'Row 2, Col 1', col2: 'Row 2, Col 2', col3: 'Row 2, Col 3' },
-        { col1: 'Row 3, Col 1', col2: 'Row 3, Col 2', col3: 'Row 3, Col 3' }
-      ]
-    }
-  }
-);

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

@@ -1,46 +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 { AlertSchema } from '@object-ui/types';
-import { renderChildren } from '../../lib/utils';
-import {
-  Alert,
-  AlertTitle,
-  AlertDescription
-} from '../../ui';
-
-ComponentRegistry.register('alert', 
-  ({ schema, className, ...props }: { schema: AlertSchema; className?: string; [key: string]: any }) => (
-    <Alert variant={schema.variant} className={className} {...props}>
-      <AlertTitle>{schema.title}</AlertTitle>
-      <AlertDescription>{schema.description || renderChildren(schema.body)}</AlertDescription>
-    </Alert>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Alert',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title', required: true },
-      { name: 'description', type: 'string', label: 'Description' },
-      { 
-        name: 'variant', 
-        type: 'enum', 
-        enum: ['default', 'destructive'], 
-        defaultValue: 'default',
-        label: 'Variant'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      title: 'Alert Title',
-      description: 'This is an alert message.',
-      variant: 'default'
-    }
-  }
-);

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

@@ -1,38 +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 { AvatarSchema } from '@object-ui/types';
-import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback
-} from '../../ui';
-
-ComponentRegistry.register('avatar', 
-  ({ schema, className, ...props }: { schema: AvatarSchema; className?: string; [key: string]: any }) => (
-    <Avatar className={className} {...props}>
-      <AvatarImage src={schema.src} alt={schema.alt} />
-      <AvatarFallback>{schema.fallback}</AvatarFallback>
-    </Avatar>
-  ),
-  {
-    namespace: 'ui',
-    label: 'Avatar',
-    inputs: [
-      { name: 'src', type: 'string', label: 'Image URL' },
-      { name: 'alt', type: 'string', label: 'Alt Text' },
-      { name: 'fallback', type: 'string', label: 'Fallback Initials', defaultValue: 'CN' },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      fallback: 'CN',
-      alt: 'Avatar'
-    }
-  }
-);

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

@@ -1,55 +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 { BadgeSchema } from '@object-ui/types';
-import { Badge } from '../../ui';
-import { renderChildren } from '../../lib/utils';
-
-ComponentRegistry.register('badge', 
-  ({ schema, ...props }: { schema: BadgeSchema; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        ...badgeProps
-    } = props;
-    
-    return (
-    <Badge 
-        variant={schema.variant} 
-        className={schema.className} 
-        {...badgeProps}
-        // Apply designer props
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-    >
-      {schema.label || renderChildren(schema.body)}
-    </Badge>
-  );
-  },
-  {
-    namespace: 'ui',
-    label: 'Badge',
-    inputs: [
-      { name: 'label', type: 'string', label: 'Label' },
-      { 
-        name: 'variant', 
-        type: 'enum', 
-        enum: ['default', 'secondary', 'destructive', 'outline'], 
-        defaultValue: 'default',
-        label: 'Variant'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      label: 'Badge',
-      variant: 'default'
-    }
-  }
-);

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

@@ -1,61 +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 { BreadcrumbSchema } from '@object-ui/types';
-import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '../../ui/breadcrumb';
-import { renderChildren } from '../../lib/utils';
-import { resolveI18nLabel } from '@object-ui/react';
-
-ComponentRegistry.register('breadcrumb', 
-  ({ schema, ...props }: { schema: BreadcrumbSchema; [key: string]: any }) => {
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        ...breadcrumbProps
-    } = props;
-    
-    return (
-      <Breadcrumb 
-        className={schema.className} 
-        {...breadcrumbProps}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        <BreadcrumbList>
-          {schema.items?.map((item, idx) => (
-            <div key={idx} className="flex items-center">
-              <BreadcrumbItem>
-                {idx === (schema.items?.length || 0) - 1 ? (
-                  <BreadcrumbPage>{resolveI18nLabel(item.label) ?? ''}</BreadcrumbPage>
-                ) : (
-                  <BreadcrumbLink href={item.href}>{resolveI18nLabel(item.label) ?? ''}</BreadcrumbLink>
-                )}
-              </BreadcrumbItem>
-              {idx < (schema.items?.length || 0) - 1 && <BreadcrumbSeparator />}
-            </div>
-          ))}
-        </BreadcrumbList>
-      </Breadcrumb>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Breadcrumb',
-    inputs: [
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      items: [
-        { label: 'Home', href: '/' },
-        { label: 'Products', href: '/products' },
-        { label: 'Product' }
-      ]
-    }
-  }
-);

package/src/renderers/data-display/index.ts

@@ -1,18 +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 './badge';
-import './avatar';
-import './alert';
-import './list';
-import './tree-view';
-import './statistic';
-import './breadcrumb';
-import './kbd';
-import './table';
-

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

@@ -1,50 +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 { KbdSchema } from '@object-ui/types';
-import { cn } from '../../lib/utils';
-
-ComponentRegistry.register('kbd', 
-  ({ schema, ...props }: { schema: KbdSchema; [key: string]: any }) => {
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style,
-        ...kbdProps
-    } = props;
-    
-    const keys = Array.isArray(schema.keys) ? schema.keys : [schema.keys || schema.label || 'K'];
-    
-    return (
-      <div className={cn('inline-flex flex-wrap gap-1', schema.className)}>
-        {keys.map((key, idx) => (
-          <kbd
-            key={idx}
-            className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
-            {...kbdProps}
-            {...(idx === 0 ? { 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style } : {})}
-          >
-            {key}
-          </kbd>
-        ))}
-      </div>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'Keyboard Key',
-    inputs: [
-      { name: 'label', type: 'string', label: 'Label' },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      label: 'K'
-    }
-  }
-);

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

@@ -1,75 +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 { ListSchema } from '@object-ui/types';
-import { useDataScope } from '@object-ui/react';
-import { renderChildren, cn } from '../../lib/utils';
-
-ComponentRegistry.register('list', 
-  ({ schema, className, ...props }: { schema: ListSchema; className?: string; [key: string]: any }) => {
-    // Support data binding
-    const boundData = useDataScope(schema.bind);
-    const items = Array.isArray(boundData) ? boundData : Array.isArray(schema.items) ? schema.items : [];
-    
-    // We use 'ol' or 'ul' based on ordered prop
-    const ListTag = schema.ordered ? 'ol' : 'ul';
-    
-    // Default styles for ordered/unordered
-    const listStyle = schema.ordered ? "list-decimal" : "list-disc";
-
-    return (
-      <div className={cn("space-y-2", schema.wrapperClass)}>
-        {schema.title && (
-          <h3 className="text-lg font-semibold tracking-tight">
-             {schema.title}
-          </h3>
-        )}
-        
-        <ListTag 
-          className={cn(
-            "ml-6 [&>li]:mt-2",
-            listStyle,
-            className
-          )}
-          {...props}
-        >
-          {items.map((item: any, index: number) => (
-            <li key={index} className={cn(typeof item === 'object' && item.className)}>
-              {typeof item === 'string' ? item : item.content || renderChildren(item.body)}
-            </li>
-          ))}
-        </ListTag>
-      </div>
-    );
-  },
-  {
-    namespace: 'ui',
-    label: 'List',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title' },
-      { name: 'ordered', type: 'boolean', label: 'Ordered List (numbered)', defaultValue: false },
-      { 
-        name: 'items', 
-        type: 'array', 
-        label: 'List Items',
-        description: 'Array of strings or objects with content/body'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      ordered: false,
-      items: [
-        'First item',
-        'Second item',
-        'Third item'
-      ],
-      className: 'text-sm'
-    }
-  }
-);