@object-ui/components 3.3.0 → 3.3.1

package/src/renderers/layout/page.tsx

@@ -1,466 +0,0 @@
-/**
- * ObjectUI — Page Renderer
- * 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.
- *
- * The Page renderer interprets PageSchema into structured layouts.
- * It supports four page types (record, home, app, utility) and
- * renders named regions (header, sidebar, main, footer, aside) with
- * configurable widths. When no regions are defined, it falls back to
- * body/children for backward compatibility.
- */
-
-import React, { useMemo } from 'react';
-import type { PageSchema, PageRegion, SchemaNode } from '@object-ui/types';
-import { SchemaRenderer, PageVariablesProvider } from '@object-ui/react';
-import { ComponentRegistry } from '@object-ui/core';
-import { cn } from '../../lib/utils';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/** Map region width enum values to Tailwind width classes */
-function getRegionWidthClass(width?: string): string {
-  switch (width) {
-    case 'small':
-      return 'w-64';
-    case 'medium':
-      return 'w-80';
-    case 'large':
-      return 'w-96';
-    case 'full':
-      return 'w-full';
-    default:
-      return width ? width : 'w-full';
-  }
-}
-
-/** Max-width constraint by page type */
-function getPageMaxWidth(pageType?: string): string {
-  switch (pageType) {
-    case 'utility':
-      return 'max-w-4xl';
-    case 'home':
-      return 'max-w-screen-2xl';
-    case 'app':
-      return 'max-w-screen-xl';
-    case 'record':
-    default:
-      return 'max-w-7xl';
-  }
-}
-
-/** Find a named region (case-insensitive) */
-function findRegion(regions: PageRegion[] | undefined, name: string): PageRegion | undefined {
-  return regions?.find((r) => r.name?.toLowerCase() === name.toLowerCase());
-}
-
-/** Get all regions that are NOT in the named set */
-function getRemainingRegions(regions: PageRegion[] | undefined, exclude: string[]): PageRegion[] {
-  if (!regions) return [];
-  const lowerSet = new Set(exclude.map((n) => n.toLowerCase()));
-  return regions.filter((r) => !lowerSet.has(r.name?.toLowerCase() ?? ''));
-}
-
-// ---------------------------------------------------------------------------
-// RegionContent — renders all components inside a single region
-// ---------------------------------------------------------------------------
-
-const RegionContent: React.FC<{
-  region: PageRegion;
-  className?: string;
-}> = ({ region, className }) => {
-  const components = region.components || [];
-  if (components.length === 0) return null;
-
-  return (
-    <div
-      className={cn('space-y-4', region.className, className)}
-      data-region={region.name}
-    >
-      {components.map((node: SchemaNode, idx: number) => (
-        <SchemaRenderer key={(node as any)?.id || `${region.name}-${idx}`} schema={node} />
-      ))}
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// RegionLayout — structured layout with named slots
-// ---------------------------------------------------------------------------
-
-const RegionLayout: React.FC<{
-  regions: PageRegion[];
-  pageType?: string;
-  className?: string;
-}> = ({ regions, pageType, className }) => {
-  const header = findRegion(regions, 'header');
-  const sidebar = findRegion(regions, 'sidebar');
-  const main = findRegion(regions, 'main');
-  const aside = findRegion(regions, 'aside');
-  const footer = findRegion(regions, 'footer');
-
-  // Remaining regions that don't match named slots → append below main
-  const extras = getRemainingRegions(regions, ['header', 'sidebar', 'main', 'aside', 'footer']);
-
-  // If there's no named layout structure, just stack everything
-  const hasStructure = header || sidebar || main || aside || footer;
-  if (!hasStructure) {
-    return (
-      <div className={cn('space-y-6', className)} data-page-layout={pageType}>
-        {regions.map((region, idx) => (
-          <RegionContent key={region.name || idx} region={region} />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('flex flex-col gap-6', className)} data-page-layout={pageType}>
-      {/* Header region */}
-      {header && (
-        <RegionContent
-          region={header}
-          className={cn(getRegionWidthClass(header.width as string))}
-        />
-      )}
-
-      {/* Body: sidebar + main + aside */}
-      <div className="flex flex-1 gap-6">
-        {sidebar && (
-          <aside className={cn('shrink-0', getRegionWidthClass(sidebar.width as string || 'small'))}>
-            <RegionContent region={sidebar} />
-          </aside>
-        )}
-
-        <div className="flex-1 min-w-0 space-y-6">
-          {main && <RegionContent region={main} />}
-          {extras.map((region, idx) => (
-            <RegionContent key={region.name || `extra-${idx}`} region={region} />
-          ))}
-        </div>
-
-        {aside && (
-          <aside className={cn('shrink-0', getRegionWidthClass(aside.width as string || 'small'))}>
-            <RegionContent region={aside} />
-          </aside>
-        )}
-      </div>
-
-      {/* Footer region */}
-      {footer && (
-        <RegionContent
-          region={footer}
-          className={cn(getRegionWidthClass(footer.width as string))}
-        />
-      )}
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// FlatContent — legacy body/children fallback
-// ---------------------------------------------------------------------------
-
-const FlatContent: React.FC<{ schema: PageSchema }> = ({ schema }) => {
-  const content = schema.body || schema.children;
-  const nodes: SchemaNode[] = Array.isArray(content)
-    ? content
-    : content
-      ? [content as SchemaNode]
-      : [];
-
-  if (nodes.length === 0) return null;
-
-  return (
-    <div className="space-y-6">
-      {nodes.map((node: any, index: number) => (
-        <SchemaRenderer key={node?.id || index} schema={node} />
-      ))}
-    </div>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Template layouts — predefined layout templates
-// ---------------------------------------------------------------------------
-
-/** Template: full-width single column */
-const FullWidthTemplate: React.FC<{ schema: PageSchema }> = ({ schema }) => {
-  if (schema.regions && schema.regions.length > 0) {
-    return <RegionLayout regions={schema.regions} pageType={schema.pageType} />;
-  }
-  return <FlatContent schema={schema} />;
-};
-
-/** Template: header-sidebar-main — header spanning full width, sidebar + main below */
-const HeaderSidebarMainTemplate: React.FC<{ schema: PageSchema }> = ({ schema }) => {
-  const regions = schema.regions || [];
-  if (regions.length === 0) return <FlatContent schema={schema} />;
-
-  const header = findRegion(regions, 'header');
-  const sidebar = findRegion(regions, 'sidebar');
-  const main = findRegion(regions, 'main');
-  const extras = getRemainingRegions(regions, ['header', 'sidebar', 'main']);
-
-  return (
-    <div className="flex flex-col gap-6" data-template="header-sidebar-main">
-      {header && <RegionContent region={header} />}
-      <div className="flex flex-1 gap-6">
-        {sidebar && (
-          <aside className={cn('shrink-0', getRegionWidthClass(sidebar.width as string || 'medium'))}>
-            <RegionContent region={sidebar} />
-          </aside>
-        )}
-        <div className="flex-1 min-w-0 space-y-6">
-          {main && <RegionContent region={main} />}
-          {extras.map((region, idx) => (
-            <RegionContent key={region.name || `extra-${idx}`} region={region} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-/** Template: three-column — sidebar + main + aside */
-const ThreeColumnTemplate: React.FC<{ schema: PageSchema }> = ({ schema }) => {
-  const regions = schema.regions || [];
-  if (regions.length === 0) return <FlatContent schema={schema} />;
-
-  const header = findRegion(regions, 'header');
-  const sidebar = findRegion(regions, 'sidebar');
-  const main = findRegion(regions, 'main');
-  const aside = findRegion(regions, 'aside');
-  const footer = findRegion(regions, 'footer');
-  const extras = getRemainingRegions(regions, ['header', 'sidebar', 'main', 'aside', 'footer']);
-
-  return (
-    <div className="flex flex-col gap-6" data-template="three-column">
-      {header && <RegionContent region={header} />}
-      <div className="flex flex-1 gap-6">
-        {sidebar && (
-          <aside className={cn('shrink-0', getRegionWidthClass(sidebar.width as string || 'small'))}>
-            <RegionContent region={sidebar} />
-          </aside>
-        )}
-        <div className="flex-1 min-w-0 space-y-6">
-          {main && <RegionContent region={main} />}
-          {extras.map((region, idx) => (
-            <RegionContent key={region.name || `extra-${idx}`} region={region} />
-          ))}
-        </div>
-        {aside && (
-          <aside className={cn('shrink-0', getRegionWidthClass(aside.width as string || 'small'))}>
-            <RegionContent region={aside} />
-          </aside>
-        )}
-      </div>
-      {footer && <RegionContent region={footer} />}
-    </div>
-  );
-};
-
-/** Template: dashboard — 2x2 grid of regions */
-const DashboardTemplate: React.FC<{ schema: PageSchema }> = ({ schema }) => {
-  const regions = schema.regions || [];
-  if (regions.length === 0) return <FlatContent schema={schema} />;
-
-  const header = findRegion(regions, 'header');
-  const footer = findRegion(regions, 'footer');
-  const contentRegions = getRemainingRegions(regions, ['header', 'footer']);
-
-  return (
-    <div className="flex flex-col gap-6" data-template="dashboard">
-      {header && <RegionContent region={header} />}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {contentRegions.map((region, idx) => (
-          <RegionContent key={region.name || `region-${idx}`} region={region} />
-        ))}
-      </div>
-      {footer && <RegionContent region={footer} />}
-    </div>
-  );
-};
-
-/** Template registry — maps template names to layout components */
-const TEMPLATE_REGISTRY: Record<string, React.FC<{ schema: PageSchema }>> = {
-  'default': FullWidthTemplate,
-  'full-width': FullWidthTemplate,
-  'header-sidebar-main': HeaderSidebarMainTemplate,
-  'three-column': ThreeColumnTemplate,
-  'dashboard': DashboardTemplate,
-};
-
-/** Resolve template: if the schema specifies a template name, use the matching layout */
-function resolveTemplate(schema: PageSchema): React.FC<{ schema: PageSchema }> | null {
-  if (!schema.template) return null;
-  return TEMPLATE_REGISTRY[schema.template] || null;
-}
-
-// ---------------------------------------------------------------------------
-// Page type variant layouts
-// ---------------------------------------------------------------------------
-
-/** Record page — detail-oriented, narrower max-width */
-const RecordPageLayout: React.FC<{ schema: PageSchema }> = ({ schema }) => {
-  if (schema.regions && schema.regions.length > 0) {
-    return <RegionLayout regions={schema.regions} pageType="record" />;
-  }
-  return <FlatContent schema={schema} />;
-};
-
-/** Home page — dashboard-style, wider layout */
-const HomePageLayout: React.FC<{ schema: PageSchema }> = ({ schema }) => {
-  if (schema.regions && schema.regions.length > 0) {
-    return <RegionLayout regions={schema.regions} pageType="home" />;
-  }
-  return <FlatContent schema={schema} />;
-};
-
-/** App page — application shell, full-width capable */
-const AppPageLayout: React.FC<{ schema: PageSchema }> = ({ schema }) => {
-  if (schema.regions && schema.regions.length > 0) {
-    return <RegionLayout regions={schema.regions} pageType="app" />;
-  }
-  return <FlatContent schema={schema} />;
-};
-
-/** Utility page — compact, focused, narrower */
-const UtilityPageLayout: React.FC<{ schema: PageSchema }> = ({ schema }) => {
-  if (schema.regions && schema.regions.length > 0) {
-    return <RegionLayout regions={schema.regions} pageType="utility" />;
-  }
-  return <FlatContent schema={schema} />;
-};
-
-// ---------------------------------------------------------------------------
-// Main PageRenderer
-// ---------------------------------------------------------------------------
-
-export const PageRenderer: React.FC<{
-  schema: PageSchema;
-  className?: string;
-  [key: string]: any;
-}> = ({ schema, className, ...props }) => {
-  const pageType = schema.pageType || 'record';
-
-  // Extract designer-related props
-  const {
-    'data-obj-id': dataObjId,
-    'data-obj-type': dataObjType,
-    style,
-    ...pageProps
-  } = props;
-
-  // Select the layout variant based on template or page type
-  const layoutElement = useMemo(() => {
-    const TemplateLayout = resolveTemplate(schema);
-    if (TemplateLayout) {
-      // Template takes priority over page type
-      // eslint-disable-next-line react-hooks/static-components -- TemplateLayout is resolved from a stable template registry
-      return <TemplateLayout schema={schema} />;
-    }
-    switch (pageType) {
-      case 'home':
-        return <HomePageLayout schema={schema} />;
-      case 'app':
-        return <AppPageLayout schema={schema} />;
-      case 'utility':
-        return <UtilityPageLayout schema={schema} />;
-      case 'record':
-      default:
-        return <RecordPageLayout schema={schema} />;
-    }
-  }, [schema, pageType]);
-
-  const pageContent = (
-    <div
-      className={cn(
-        'min-h-full w-full bg-background p-4 md:p-6 lg:p-8',
-        className,
-      )}
-      data-page-type={pageType}
-      data-obj-id={dataObjId}
-      data-obj-type={dataObjType}
-      style={style}
-      {...pageProps}
-    >
-      <div className={cn('mx-auto space-y-8', getPageMaxWidth(pageType))}>
-        {/* Page header */}
-        {(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>
-        )}
-
-        {/* Page body — type-specific layout */}
-        {layoutElement}
-      </div>
-    </div>
-  );
-
-  // Wrap with PageVariablesProvider when variables are defined
-  if (schema.variables && schema.variables.length > 0) {
-    return (
-      <PageVariablesProvider definitions={schema.variables}>
-        {pageContent}
-      </PageVariablesProvider>
-    );
-  }
-
-  return pageContent;
-};
-
-// ---------------------------------------------------------------------------
-// ComponentRegistry registration
-// ---------------------------------------------------------------------------
-
-const pageMeta: any = {
-  namespace: 'ui',
-  label: 'Page',
-  icon: 'Layout',
-  category: 'layout',
-  inputs: [
-    { name: 'title', type: 'string', label: 'Title' },
-    { name: 'description', type: 'string', label: 'Description' },
-    { name: 'pageType', type: 'string', label: 'Page Type' },
-    { name: 'object', type: 'string', label: 'Object Name' },
-    { name: 'template', type: 'string', label: 'Template' },
-    {
-      name: 'regions',
-      type: 'array',
-      label: 'Regions',
-      itemType: 'object',
-    },
-    {
-      name: 'variables',
-      type: 'array',
-      label: 'Variables',
-      itemType: 'object',
-    },
-    {
-      name: 'body',
-      type: 'array',
-      label: 'Content (Legacy)',
-      itemType: 'component',
-    },
-  ],
-};
-
-ComponentRegistry.register('page', PageRenderer, pageMeta);
-ComponentRegistry.register('app', PageRenderer, { ...pageMeta, label: 'App Page' });
-ComponentRegistry.register('utility', PageRenderer, { ...pageMeta, label: 'Utility Page' });
-ComponentRegistry.register('home', PageRenderer, { ...pageMeta, label: 'Home Page' });
-ComponentRegistry.register('record', PageRenderer, { ...pageMeta, label: 'Record Page' });
-

package/src/renderers/layout/semantic.tsx

@@ -1,48 +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 { 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, {
-      namespace: 'ui',
-      label: tag.charAt(0).toUpperCase() + tag.slice(1),
-      category: 'layout',
-      inputs: [
-        { name: 'className', type: 'string', label: 'CSS Class' }
-      ]
-  });
-});

package/src/renderers/layout/stack.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 { 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 ?? (schema as any).spacing ?? 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 - 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 === 8 && 'gap-4 sm:gap-6 md:gap-8',
-      gap === 10 && 'gap-5 sm:gap-7 md: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,
-  {
-    namespace: 'ui',
-    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
-    }
-  }
-);