@object-ui/components 0.3.0

package/src/renderers/layout/flex.tsx

@@ -0,0 +1,123 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { FlexSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('flex', 
+  ({ schema, className, ...props }: { schema: FlexSchema; className?: string; [key: string]: any }) => {
+    const direction = schema.direction || 'row';
+    const justify = schema.justify || 'start';
+    const align = schema.align || 'start';
+    const gap = schema.gap || 2;
+    const wrap = schema.wrap || false;
+    
+    const flexClass = cn(
+      'flex',
+      // Direction
+      direction === 'row' && 'flex-row',
+      direction === 'col' && 'flex-col',
+      direction === 'row-reverse' && 'flex-row-reverse',
+      direction === 'col-reverse' && 'flex-col-reverse',
+      // Justify content
+      justify === 'start' && 'justify-start',
+      justify === 'end' && 'justify-end',
+      justify === 'center' && 'justify-center',
+      justify === 'between' && 'justify-between',
+      justify === 'around' && 'justify-around',
+      justify === 'evenly' && 'justify-evenly',
+      // Align items
+      align === 'start' && 'items-start',
+      align === 'end' && 'items-end',
+      align === 'center' && 'items-center',
+      align === 'baseline' && 'items-baseline',
+      align === 'stretch' && 'items-stretch',
+      // Gap
+      gap === 0 && 'gap-0',
+      gap === 1 && 'gap-1',
+      gap === 2 && 'gap-2',
+      gap === 3 && 'gap-3',
+      gap === 4 && 'gap-4',
+      gap === 5 && 'gap-5',
+      gap === 6 && 'gap-6',
+      gap === 7 && 'gap-7',
+      gap === 8 && 'gap-8',
+      // Wrap
+      wrap && 'flex-wrap',
+      className
+    );
+
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...flexProps 
+    } = props;
+
+    return (
+      <div 
+        className={flexClass} 
+        {...flexProps}
+        // Apply designer props
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+        style={style}
+      >
+        {schema.children && renderChildren(schema.children)}
+      </div>
+    );
+  },
+  {
+    label: 'Flex Layout',
+    inputs: [
+      { 
+        name: 'direction', 
+        type: 'enum', 
+        enum: ['row', 'col', 'row-reverse', 'col-reverse'],
+        label: 'Direction',
+        defaultValue: 'row'
+      },
+      { 
+        name: 'justify', 
+        type: 'enum', 
+        enum: ['start', 'end', 'center', 'between', 'around', 'evenly'],
+        label: 'Justify Content',
+        defaultValue: 'start'
+      },
+      { 
+        name: 'align', 
+        type: 'enum', 
+        enum: ['start', 'end', 'center', 'baseline', 'stretch'],
+        label: 'Align Items',
+        defaultValue: 'start'
+      },
+      { 
+        name: 'gap', 
+        type: 'number', 
+        label: 'Gap', 
+        defaultValue: 2,
+        description: 'Gap between items (0-8)'
+      },
+      { 
+        name: 'wrap', 
+        type: 'boolean', 
+        label: 'Wrap', 
+        defaultValue: false,
+        description: 'Allow flex items to wrap'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      direction: 'row',
+      justify: 'start',
+      align: 'center',
+      gap: 2,
+      wrap: false,
+      children: [
+        { type: 'button', label: 'Button 1' },
+        { type: 'button', label: 'Button 2' },
+        { type: 'button', label: 'Button 3' }
+      ]
+    }
+  }
+);

package/src/renderers/layout/grid.tsx

@@ -0,0 +1,155 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { GridSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import { cn } from '../../lib/utils';
+
+// Helper maps to ensure Tailwind classes are scanned and included
+const GRID_COLS: Record<number, string> = {
+  1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4',
+  5: 'grid-cols-5', 6: 'grid-cols-6', 7: 'grid-cols-7', 8: 'grid-cols-8',
+  9: 'grid-cols-9', 10: 'grid-cols-10', 11: 'grid-cols-11', 12: 'grid-cols-12'
+};
+
+const GRID_COLS_SM: Record<number, string> = {
+  1: 'sm:grid-cols-1', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-4',
+  5: 'sm:grid-cols-5', 6: 'sm:grid-cols-6', 7: 'sm:grid-cols-7', 8: 'sm:grid-cols-8',
+  9: 'sm:grid-cols-9', 10: 'sm:grid-cols-10', 11: 'sm:grid-cols-11', 12: 'sm:grid-cols-12'
+};
+
+const GRID_COLS_MD: Record<number, string> = {
+  1: 'md:grid-cols-1', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5', 6: 'md:grid-cols-6', 7: 'md:grid-cols-7', 8: 'md:grid-cols-8',
+  9: 'md:grid-cols-9', 10: 'md:grid-cols-10', 11: 'md:grid-cols-11', 12: 'md:grid-cols-12'
+};
+
+const GRID_COLS_LG: Record<number, string> = {
+  1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5', 6: 'lg:grid-cols-6', 7: 'lg:grid-cols-7', 8: 'lg:grid-cols-8',
+  9: 'lg:grid-cols-9', 10: 'lg:grid-cols-10', 11: 'lg:grid-cols-11', 12: 'lg:grid-cols-12'
+};
+
+const GRID_COLS_XL: Record<number, string> = {
+  1: 'xl:grid-cols-1', 2: 'xl:grid-cols-2', 3: 'xl:grid-cols-3', 4: 'xl:grid-cols-4',
+  5: 'xl:grid-cols-5', 6: 'xl:grid-cols-6', 7: 'xl:grid-cols-7', 8: 'xl:grid-cols-8',
+  9: 'xl:grid-cols-9', 10: 'xl:grid-cols-10', 11: 'xl:grid-cols-11', 12: 'xl:grid-cols-12'
+};
+
+const GAPS: Record<number, string> = {
+  0: 'gap-0', 1: 'gap-1', 2: 'gap-2', 3: 'gap-3', 4: 'gap-4', 
+  5: 'gap-5', 6: 'gap-6', 8: 'gap-8', 10: 'gap-10', 12: 'gap-12'
+};
+
+ComponentRegistry.register('grid', 
+  ({ schema, className, ...props }: { schema: GridSchema & { smColumns?: number, mdColumns?: number, lgColumns?: number, xlColumns?: number }; className?: string; [key: string]: any }) => {
+    // Determine columns configuration
+    // Supports direct number or responsive object logic if schema allows, 
+    // but here we primarily handle the flat properties supported by the designer inputs
+    const baseCols = typeof schema.columns === 'number' ? schema.columns : 2;
+    const smCols = schema.smColumns;
+    const mdCols = schema.mdColumns;
+    const lgCols = schema.lgColumns;
+    const xlCols = schema.xlColumns;
+
+    const gap = schema.gap ?? 4;
+    
+    // Generate Tailwind grid classes
+    const gridClass = cn(
+      'grid',
+      // Base columns
+      GRID_COLS[baseCols] || 'grid-cols-2',
+      // Responsive columns
+      smCols && GRID_COLS_SM[smCols],
+      mdCols && GRID_COLS_MD[mdCols],
+      lgCols && GRID_COLS_LG[lgCols],
+      xlCols && GRID_COLS_XL[xlCols],
+      // Gap
+      GAPS[gap] || 'gap-4',
+      className
+    );
+
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...gridProps 
+    } = props;
+
+    return (
+      <div 
+        className={gridClass} 
+        {...gridProps}
+        // Apply designer props
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+        style={style}
+      >
+        {schema.children && renderChildren(schema.children)}
+      </div>
+    );
+  },
+  {
+    label: 'Grid Layout',
+    inputs: [
+      { 
+        name: 'columns', 
+        type: 'number', 
+        label: 'Base Columns (Mobile)', 
+        defaultValue: 2,
+        description: 'Number of columns on mobile devices'
+      },
+      { 
+        name: 'smColumns', 
+        type: 'number', 
+        label: 'SM Columns (Tablet)',
+        description: 'Columns at sm breakpoint (>640px)'
+      },
+      { 
+        name: 'mdColumns', 
+        type: 'number', 
+        label: 'MD Columns (Laptop)',
+        description: 'Columns at md breakpoint (>768px)'
+      },
+      { 
+        name: 'lgColumns', 
+        type: 'number', 
+        label: 'LG Columns (Desktop)',
+        description: 'Columns at lg breakpoint (>1024px)'
+      },
+      { 
+        name: 'xlColumns', 
+        type: 'number', 
+        label: 'XL Columns (Wide)',
+        description: 'Columns at xl breakpoint (>1280px)'
+      },
+      { 
+        name: 'gap', 
+        type: 'number', 
+        label: 'Gap', 
+        defaultValue: 4,
+        description: 'Gap between items (0-12)'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      columns: 1,
+      mdColumns: 2,
+      lgColumns: 4,
+      gap: 4,
+      children: [
+        { type: 'card', title: 'Card 1', description: 'First card' },
+        { type: 'card', title: 'Card 2', description: 'Second card' },
+        { type: 'card', title: 'Card 3', description: 'Third card' },
+        { type: 'card', title: 'Card 4', description: 'Fourth card' }
+      ]
+    },
+    isContainer: true,
+    resizable: true,
+    resizeConstraints: {
+      width: true,
+      height: true,
+      minWidth: 200,
+      minHeight: 100
+    }
+  }
+);

package/src/renderers/layout/index.ts

@@ -0,0 +1,10 @@
+import './card';
+import './tabs';
+import './grid';
+import './flex';
+import './stack';
+import './container';
+import './page';
+import './semantic';
+
+

package/src/renderers/layout/page.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { PageSchema } from '@object-ui/types';
+import { SchemaRenderer } from '@object-ui/react';
+import { ComponentRegistry } from '@object-ui/core';
+import { cn } from '../../lib/utils'; // Keep internal import for utils
+
+export const PageRenderer: React.FC<{ schema: PageSchema; className?: string; [key: string]: any }> = ({ 
+  schema, 
+  className,
+  ...props 
+}) => {
+  // Support both body (legacy/playground) and children
+  const content = schema.body || schema.children;
+  const nodes = Array.isArray(content) ? content : (content ? [content] : []);
+
+  // Extract designer-related props
+  const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style, 
+      ...pageProps 
+  } = props;
+
+  return (
+    <div 
+      className={cn("min-h-full w-full bg-background p-6 md:p-8", className)}
+      {...pageProps}
+      // Apply designer props
+      data-obj-id={dataObjId}
+      data-obj-type={dataObjType}
+      style={style}
+    >
+      <div className="mx-auto max-w-7xl space-y-8">
+        {(schema.title || schema.description) && (
+          <div className="space-y-2">
+            {schema.title && (
+              <h1 className="text-3xl font-bold tracking-tight text-foreground">
+                {schema.title}
+              </h1>
+            )}
+            {schema.description && (
+              <p className="text-muted-foreground">
+                {schema.description}
+              </p>
+            )}
+          </div>
+        )}
+        
+        <div className="space-y-6">
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          {nodes.map((node: any, index: number) => (
+            <SchemaRenderer 
+              key={node?.id || index} 
+              schema={node} 
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ComponentRegistry.register(
+  'page',
+  PageRenderer,
+  {
+    label: 'Page',
+    icon: 'Layout',
+    category: 'layout',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { 
+        name: 'body', 
+        type: 'array', 
+        label: 'Content',
+        // @ts-expect-error - itemType is experimental/extended metadata
+        itemType: 'component' 
+      }
+    ]
+  }
+);

package/src/renderers/layout/semantic.tsx

@@ -0,0 +1,39 @@
+import { ComponentRegistry } from '@object-ui/core';
+import { renderChildren } from '../../lib/utils';
+import { forwardRef } from 'react';
+
+const tags = ['aside', 'main', 'header', 'nav', 'footer', 'section', 'article'] as const;
+
+tags.forEach(tag => {
+  const Component = forwardRef<HTMLElement, any>(({ schema, className, ...props }, ref) => {
+      // Extract designer-related props
+      const { 
+          'data-obj-id': dataObjId, 
+          'data-obj-type': dataObjType,
+          style,
+          ...restProps
+      } = props;
+      
+      const Tag = tag;
+      
+      return (
+      <Tag 
+          ref={ref}
+          className={className} 
+          {...restProps}
+          {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {renderChildren(schema.children || schema.body)}
+      </Tag>
+    );
+  });
+  Component.displayName = `Semantic${tag.charAt(0).toUpperCase() + tag.slice(1)}`;
+
+  ComponentRegistry.register(tag, Component, {
+      label: tag.charAt(0).toUpperCase() + tag.slice(1),
+      category: 'layout',
+      inputs: [
+        { name: 'className', type: 'string', label: 'CSS Class' }
+      ]
+  });
+});

package/src/renderers/layout/stack.tsx

@@ -0,0 +1,123 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { StackSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import { cn } from '../../lib/utils';
+import { forwardRef } from 'react';
+
+// Stack is essentially a Flex container that defaults to column direction
+const StackRenderer = forwardRef<HTMLDivElement, { schema: StackSchema; className?: string; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    // Default to column for Stack
+    const direction = schema.direction || 'col';
+    const justify = schema.justify || 'start';
+    const align = schema.align || 'stretch'; // Stack items usually stretch
+    const gap = schema.gap || 2;
+    const wrap = schema.wrap || false;
+    
+    const stackClass = cn(
+      'flex',
+      // Direction
+      direction === 'row' && 'flex-row',
+      direction === 'col' && 'flex-col',
+      direction === 'row-reverse' && 'flex-row-reverse',
+      direction === 'col-reverse' && 'flex-col-reverse',
+      // Justify content
+      justify === 'start' && 'justify-start',
+      justify === 'end' && 'justify-end',
+      justify === 'center' && 'justify-center',
+      justify === 'between' && 'justify-between',
+      justify === 'around' && 'justify-around',
+      justify === 'evenly' && 'justify-evenly',
+      // Align items
+      align === 'start' && 'items-start',
+      align === 'end' && 'items-end',
+      align === 'center' && 'items-center',
+      align === 'baseline' && 'items-baseline',
+      align === 'stretch' && 'items-stretch',
+      // Gap
+      gap === 0 && 'gap-0',
+      gap === 1 && 'gap-1',
+      gap === 2 && 'gap-2',
+      gap === 3 && 'gap-3',
+      gap === 4 && 'gap-4',
+      gap === 5 && 'gap-5',
+      gap === 6 && 'gap-6',
+      gap === 8 && 'gap-8',
+      gap === 10 && 'gap-10',
+      // Wrap
+      wrap && 'flex-wrap',
+      className
+    );
+
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...stackProps 
+    } = props;
+
+    return (
+      <div 
+        ref={ref}
+        className={stackClass} 
+        {...stackProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {schema.children && renderChildren(schema.children)}
+      </div>
+    );
+  }
+);
+
+ComponentRegistry.register('stack', 
+  StackRenderer,
+  {
+    label: 'Stack',
+    inputs: [
+      { 
+        name: 'direction', 
+        type: 'enum', 
+        label: 'Direction', 
+        enum: ['col', 'row', 'col-reverse', 'row-reverse'], 
+        defaultValue: 'col' 
+      },
+      { 
+        name: 'gap', 
+        type: 'number', 
+        label: 'Gap', 
+        defaultValue: 2 
+      },
+      { 
+        name: 'align', 
+        type: 'enum', 
+        label: 'Align Items',
+        enum: ['start', 'end', 'center', 'stretch', 'baseline'],
+        defaultValue: 'stretch'
+      },
+      { 
+        name: 'justify', 
+        type: 'enum', 
+        label: 'Justify Content',
+        enum: ['start', 'end', 'center', 'between', 'around', 'evenly'],
+        defaultValue: 'start'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      direction: 'col',
+      gap: 2,
+      align: 'stretch',
+      children: []
+    },
+    isContainer: true,
+    resizable: true,
+    resizeConstraints: {
+        width: true,
+        height: true,
+        minWidth: 100,
+        minHeight: 50
+    }
+  }
+);

package/src/renderers/layout/tabs.tsx

@@ -0,0 +1,63 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { TabsSchema } from '@object-ui/types';
+import { renderChildren } from '../../lib/utils';
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent
+} from '../../ui';
+
+ComponentRegistry.register('tabs', 
+  ({ schema, className, ...props }: { schema: TabsSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...tabsProps 
+    } = props;
+
+    return (
+    <Tabs 
+        defaultValue={schema.defaultValue} 
+        className={className} 
+        {...tabsProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+    >
+      <TabsList>
+        {schema.items?.map((item) => (
+          <TabsTrigger key={item.value} value={item.value}>{item.label}</TabsTrigger>
+        ))}
+      </TabsList>
+      {schema.items?.map((item) => (
+        <TabsContent key={item.value} value={item.value}>
+          {renderChildren((item as any).body)}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+  },
+  {
+    label: 'Tabs',
+    inputs: [
+      { name: 'defaultValue', type: 'string', label: 'Default Value', required: true },
+      { name: 'className', type: 'string', label: 'CSS Class' },
+      { 
+        name: 'items', 
+        type: 'array', 
+        label: 'Items'
+      }
+    ],
+    defaultProps: {
+      defaultValue: 'tab1',
+      items: [
+        { label: 'Tab 1', value: 'tab1', body: [{ type: 'text', content: 'Content for Tab 1' }] },
+        { label: 'Tab 2', value: 'tab2', body: [{ type: 'text', content: 'Content for Tab 2' }] },
+        { label: 'Tab 3', value: 'tab3', body: [{ type: 'text', content: 'Content for Tab 3' }] }
+      ],
+      className: 'w-full'
+    }
+  }
+);

package/src/renderers/navigation/header-bar.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import type { HeaderBarSchema } from '@object-ui/types';
+import {
+  SidebarTrigger,
+  Separator,
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+  BreadcrumbPage
+} from '../../ui';
+
+ComponentRegistry.register('header-bar', 
+  ({ schema }: { schema: HeaderBarSchema }) => (
+    <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+      <SidebarTrigger />
+      <Separator orientation="vertical" className="mr-2 h-4" />
+      <Breadcrumb>
+        <BreadcrumbList>
+          {schema.crumbs?.map((crumb: any, idx: number) => (
+            <React.Fragment key={idx}>
+              <BreadcrumbItem>
+                {idx === schema.crumbs.length - 1 ? (
+                   <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                ) : (
+                   <BreadcrumbLink href={crumb.href || '#'}>{crumb.label}</BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              {idx < schema.crumbs.length - 1 && <BreadcrumbSeparator />}
+            </React.Fragment>
+          ))}
+        </BreadcrumbList>
+      </Breadcrumb>
+    </header>
+  ),
+  {
+    label: 'Header Bar',
+    inputs: [
+       { name: 'crumbs', type: 'array', label: 'Breadcrumbs' }
+    ],
+    defaultProps: {
+      crumbs: [
+        { label: 'Home', href: '#' },
+        { label: 'Current Page' }
+      ]
+    }
+  }
+);

package/src/renderers/navigation/index.ts

@@ -0,0 +1,2 @@
+import './sidebar';
+import './header-bar';