@object-ui/components 3.3.0 → 3.3.1

package/src/renderers/layout/card.tsx

@@ -1,85 +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 { CardSchema } from '@object-ui/types';
-import { renderChildren, cn } from '../../lib/utils';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter
-} from '../../ui';
-import { forwardRef } from 'react';
-
-const CardRenderer = forwardRef<HTMLDivElement, { schema: CardSchema; className?: string; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...cardProps 
-    } = props;
-    
-    const isClickable = schema.clickable || !!props.onClick;
-    const isHoverable = schema.hoverable || isClickable;
-
-    return (
-    <Card 
-        ref={ref}
-        className={cn(
-          className, 
-          isHoverable && "transition-colors hover:bg-muted/50",
-          isClickable && "cursor-pointer active:bg-muted"
-        )} 
-        {...cardProps}
-        // Apply designer props
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-    >
-      {(schema.title || schema.description || schema.header) && (
-        <CardHeader>
-          {schema.title && <CardTitle>{schema.title}</CardTitle>}
-          {schema.description && <CardDescription>{schema.description}</CardDescription>}
-          {schema.header && renderChildren(schema.header)}
-        </CardHeader>
-      )}
-      {(schema.children || schema.body) && <CardContent>{renderChildren(schema.children || schema.body)}</CardContent>}
-      {schema.footer && <CardFooter className="flex justify-between">{renderChildren(schema.footer)}</CardFooter>}
-    </Card>
-    );
-  }
-);
-
-ComponentRegistry.register('card', 
-  CardRenderer,
-  {
-    namespace: 'ui',
-    label: 'Card',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title' },
-      { name: 'description', type: 'string', label: 'Description' },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      title: 'Card Title',
-      description: 'Card description goes here',
-      className: 'w-full'
-    },
-    isContainer: true,
-    resizable: true,
-    resizeConstraints: {
-      width: true,
-      height: true,
-      minWidth: 200,
-      minHeight: 100
-    }
-  }
-);

package/src/renderers/layout/container.tsx

@@ -1,122 +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 { ContainerSchema } from '@object-ui/types';
-import { renderChildren } from '../../lib/utils';
-import { cn } from '../../lib/utils';
-import { forwardRef } from 'react';
-
-const ContainerRenderer = forwardRef<HTMLDivElement, { schema: ContainerSchema; className?: string; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
-    const maxWidth = (schema.maxWidth || 'xl') as any;
-    const padding = schema.padding || 4;
-    const centered = schema.centered !== false; // Default to true
-    
-    const containerClass = cn(
-      // Base container
-      'w-full',
-      // Max width
-      maxWidth === 'sm' && 'max-w-sm',
-      maxWidth === 'md' && 'max-w-md',
-      maxWidth === 'lg' && 'max-w-lg',
-      maxWidth === 'xl' && 'max-w-xl',
-      maxWidth === '2xl' && 'max-w-2xl',
-      maxWidth === '3xl' && 'max-w-3xl',
-      maxWidth === '4xl' && 'max-w-4xl',
-      maxWidth === '5xl' && 'max-w-5xl',
-      maxWidth === '6xl' && 'max-w-6xl',
-      maxWidth === '7xl' && 'max-w-7xl',
-      maxWidth === 'full' && 'max-w-full',
-      maxWidth === 'screen' && 'max-w-screen-2xl',
-      // Centering
-      centered && 'mx-auto',
-      // Padding - Mobile-first responsive
-      padding === 0 && 'p-0',
-      padding === 1 && 'p-0.5 sm:p-1',
-      padding === 2 && 'p-1 sm:p-2',
-      padding === 3 && 'p-2 sm:p-3',
-      padding === 4 && 'p-2 sm:p-3 md:p-4',
-      padding === 5 && 'p-3 sm:p-4 md:p-5',
-      padding === 6 && 'p-3 sm:p-4 md:p-6',
-      padding === 7 && 'p-4 sm:p-5 md:p-7',
-      padding === 8 && 'p-4 sm:p-6 md:p-8',
-      padding === 10 && 'p-5 sm:p-7 md:p-10',
-      padding === 12 && 'p-6 sm:p-8 md:p-12',
-      padding === 16 && 'p-8 sm:p-10 md:p-16',
-      className
-    );
-
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...containerProps 
-    } = props;
-
-    return (
-      <div 
-        ref={ref}
-        className={containerClass} 
-        {...containerProps}
-        // Apply designer props
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {schema.children && renderChildren(schema.children)}
-      </div>
-    );
-  }
-);
-
-ComponentRegistry.register('container', 
-  ContainerRenderer,
-  {
-    namespace: 'ui',
-    label: 'Container',
-    inputs: [
-      { 
-        name: 'maxWidth', 
-        type: 'enum', 
-        enum: ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'full', 'screen'],
-        label: 'Max Width',
-        defaultValue: 'xl'
-      },
-      { 
-        name: 'padding', 
-        type: 'number', 
-        label: 'Padding', 
-        defaultValue: 4,
-        description: 'Padding value (0, 1-8, 10, 12, 16)'
-      },
-      { 
-        name: 'centered', 
-        type: 'boolean', 
-        label: 'Center Horizontally', 
-        defaultValue: true
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      maxWidth: 'xl',
-      padding: 4,
-      centered: true,
-      children: [
-        { type: 'text', content: 'Container content goes here' }
-      ]
-    },
-    isContainer: true,
-    resizable: true,
-    resizeConstraints: {
-      width: true,
-      height: true,
-      minWidth: 200,
-      minHeight: 100
-    }
-  }
-);

package/src/renderers/layout/flex.tsx

@@ -1,132 +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 { 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 - Mobile-first responsive
-      gap === 0 && 'gap-0',
-      gap === 1 && 'gap-1',
-      gap === 2 && 'gap-1.5 sm:gap-2',
-      gap === 3 && 'gap-2 sm:gap-3',
-      gap === 4 && 'gap-2 sm:gap-3 md:gap-4',
-      gap === 5 && 'gap-3 sm:gap-4 md:gap-5',
-      gap === 6 && 'gap-3 sm:gap-4 md:gap-6',
-      gap === 7 && 'gap-4 sm:gap-5 md:gap-7',
-      gap === 8 && 'gap-4 sm:gap-6 md: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>
-    );
-  },
-  {
-    namespace: 'ui',
-    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

@@ -1,178 +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 { 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 detailed object configuration from schema
-    let baseCols = 2;
-    let smCols, mdCols, lgCols, xlCols;
-
-    if (typeof schema.columns === 'number') {
-      baseCols = schema.columns;
-    } else if (typeof schema.columns === 'object' && schema.columns !== null) {
-      // Handle responsive object: { xs: 1, sm: 2, md: 3, lg: 4 }
-      // Note: 'xs' corresponds to base (mobile-first)
-      baseCols = schema.columns.xs ?? 1;
-      smCols = schema.columns.sm;
-      mdCols = schema.columns.md;
-      lgCols = schema.columns.lg;
-      xlCols = schema.columns.xl;
-    }
-
-    // Fallback to legacy flat props if provided (from designer)
-    if (schema.smColumns) smCols = schema.smColumns;
-    if (schema.mdColumns) mdCols = schema.mdColumns;
-    if (schema.lgColumns) lgCols = schema.lgColumns;
-    if (schema.xlColumns) 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-[${gap * 0.25}rem]`, // Fallback for arbitrary values if not in map
-      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>
-    );
-  },
-  {
-    namespace: 'ui',
-    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

@@ -1,19 +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 './card';
-import './tabs';
-import './grid';
-import './flex';
-import './stack';
-import './container';
-import './page';
-import './semantic';
-import './aspect-ratio';
-
-