@object-ui/components 0.3.0

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

@@ -0,0 +1,68 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
+import { FilterBuilder } from '../../ui/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>
+    );
+  },
+  {
+    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

@@ -0,0 +1,10 @@
+import './calendar-view';
+import './carousel';
+import './filter-builder';
+import './scroll-area';
+import './resizable';
+import './table';
+import './chatbot';
+import './data-table';
+import './timeline';
+

package/src/renderers/complex/resizable.tsx

@@ -0,0 +1,54 @@
+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 }) => (
+    <ResizablePanelGroup 
+        direction={schema.direction || 'horizontal'} 
+        className={className} 
+        {...props}
+        style={{ minHeight: schema.minHeight || '200px' }}
+    >
+      {schema.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 < schema.panels.length - 1 && <ResizableHandle withHandle={schema.withHandle} />}
+        </React.Fragment>
+      ))}
+    </ResizablePanelGroup>
+  ),
+  {
+    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

@@ -0,0 +1,32 @@
+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 }) => (
+    <ScrollArea className={className} style={{ height: schema.height, width: schema.width }} {...props}>
+      {renderChildren(schema.content || schema.children)}
+      {schema.orientation === 'horizontal' && <ScrollBar orientation="horizontal" />}
+    </ScrollArea>
+  ),
+  {
+    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: 'content', type: 'slot', label: 'Content' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      height: '200px',
+      width: '100%',
+      orientation: 'vertical',
+      content: [
+        { 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

@@ -0,0 +1,86 @@
+// 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}
+            </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]}
+                </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>
+  ),
+  {
+    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' }
+      ]
+    }
+  }
+);