@object-ui/components 3.1.5 → 3.3.1

package/src/index.css

@@ -1,131 +0,0 @@
-@import 'tailwindcss';
-
-/* Scan sources for Tailwind classes */
-@source '../src/**/*.{ts,tsx}';
-
-/* Tailwind plugin for animations */
-@plugin 'tailwindcss-animate';
-
-/* Define theme colors for Tailwind 4 */
-@theme {
-  /* Border radius tokens */
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-
-  /* Color tokens mapped to CSS variables */
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-
-  /* Chart colors */
-  --color-chart-1: hsl(var(--chart-1));
-  --color-chart-2: hsl(var(--chart-2));
-  --color-chart-3: hsl(var(--chart-3));
-  --color-chart-4: hsl(var(--chart-4));
-  --color-chart-5: hsl(var(--chart-5));
-}
-
-/* CSS custom properties for theme */
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
-
-  --radius: 0.5rem;
-
-  --config-panel-width: 320px;
-
-  --chart-1: 12 76% 61%;
-  --chart-2: 173 58% 39%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
-
-  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-}
-
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
-
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
-}
-
-* {
-  border-color: hsl(var(--border));
-}
-
-body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-}

package/src/index.ts

@@ -1,47 +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 './index.css';
-
-// Register all ObjectUI renderers (side-effects)
-import './renderers'; 
-
-// Export utils
-export { cn } from './lib/utils';
-export { renderChildren } from './lib/utils';
-export { cva } from 'class-variance-authority';
-
-// Export placeholder registration
-export { registerPlaceholders } from './renderers/placeholders';
-
-// Export raw Shadcn UI components
-export * from './ui';
-export * from './custom';
-
-// Export hooks
-export { useConfigDraft } from './hooks/use-config-draft';
-export type { UseConfigDraftOptions, UseConfigDraftReturn } from './hooks/use-config-draft';
-
-// Export config panel types
-export type {
-  ControlType,
-  ConfigField,
-  ConfigSection,
-  ConfigPanelSchema,
-} from './types/config-panel';
-
-// Export an init function to ensure components are registered
-// This is a workaround for bundlers that might tree-shake side-effect imports
-export function initializeComponents() {
-  // This function exists to ensure the import side-effects above are executed
-  // Simply importing this module should register all components
-  return true;
-}
-
-// Debug panel (tree-shakeable — only included when imported)
-export * from './debug';

package/src/lib/use-sync-external-store-shim.ts

@@ -1,10 +0,0 @@
-/**
- * ESM re-export of useSyncExternalStore from React.
- *
- * React 18+ ships useSyncExternalStore natively. The CJS shim package
- * (`use-sync-external-store/shim`) uses `require("react")` which
- * produces a Rolldown `require` polyfill incompatible with Next.js
- * Turbopack SSR. This module provides the same API surface using a
- * static ESM import instead.
- */
-export { useSyncExternalStore } from 'react';

package/src/lib/use-sync-external-store-with-selector-shim.ts

@@ -1,90 +0,0 @@
-/**
- * ESM re-export of useSyncExternalStoreWithSelector.
- *
- * The CJS shim package uses `require("react")` which produces a
- * Rolldown `require` polyfill incompatible with Next.js Turbopack SSR.
- * This module provides a pure-ESM implementation using React 18+
- * native useSyncExternalStore.
- */
-import { useRef, useEffect, useMemo, useDebugValue, useSyncExternalStore } from 'react';
-
-function is(x: unknown, y: unknown): boolean {
-  return (x === y && (0 !== x || 1 / (x as number) === 1 / (y as number))) || (x !== x && y !== y);
-}
-
-const objectIs: (x: unknown, y: unknown) => boolean =
-  typeof Object.is === 'function' ? Object.is : is;
-
-export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
-  subscribe: (onStoreChange: () => void) => () => void,
-  getSnapshot: () => Snapshot,
-  getServerSnapshot: undefined | null | (() => Snapshot),
-  selector: (snapshot: Snapshot) => Selection,
-  isEqual?: (a: Selection, b: Selection) => boolean,
-): Selection {
-  const instRef = useRef<{
-    hasValue: boolean;
-    value: Selection;
-  } | null>(null);
-  let inst: { hasValue: boolean; value: Selection };
-  if (instRef.current === null) {
-    inst = { hasValue: false, value: null as Selection };
-    instRef.current = inst;
-  } else {
-    inst = instRef.current;
-  }
-
-  const [getSelection, getServerSelection] = useMemo(() => {
-    let hasMemo = false;
-    let memoizedSnapshot: Snapshot;
-    let memoizedSelection: Selection;
-    const memoizedSelector = (nextSnapshot: Snapshot): Selection => {
-      if (!hasMemo) {
-        hasMemo = true;
-        memoizedSnapshot = nextSnapshot;
-        const nextSelection = selector(nextSnapshot);
-        if (isEqual !== undefined) {
-          if (inst.hasValue) {
-            const currentSelection = inst.value;
-            if (isEqual(currentSelection, nextSelection)) {
-              memoizedSelection = currentSelection;
-              return currentSelection;
-            }
-          }
-        }
-        memoizedSelection = nextSelection;
-        return nextSelection;
-      }
-      const prevSnapshot = memoizedSnapshot;
-      const prevSelection = memoizedSelection;
-      if (objectIs(prevSnapshot, nextSnapshot)) {
-        return prevSelection;
-      }
-      const nextSelection = selector(nextSnapshot);
-      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
-        memoizedSnapshot = nextSnapshot;
-        return prevSelection;
-      }
-      memoizedSnapshot = nextSnapshot;
-      memoizedSelection = nextSelection;
-      return nextSelection;
-    };
-    const maybeGetServerSelection =
-      getServerSnapshot === undefined || getServerSnapshot === null
-        ? undefined
-        : () => memoizedSelector(getServerSnapshot());
-    return [() => memoizedSelector(getSnapshot()), maybeGetServerSelection];
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
-
-  const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
-
-  useEffect(() => {
-    inst.hasValue = true;
-    inst.value = value;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
-
-  useDebugValue(value);
-  return value;
-}

package/src/lib/utils.tsx

@@ -1,35 +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 { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-import { SchemaRenderer } from "@object-ui/react"
-import React from "react"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-export function renderChildren(children: any): React.ReactNode {
-  if (!children) return null;
-  if (typeof children === 'string' || typeof children === 'number') {
-    return children;
-  }
-  if (Array.isArray(children)) {
-    if (children.length === 0) return null;
-    // Unwrap single child to support Radix UI 'asChild' pattern which expects a single ReactElement, not an array
-    if (children.length === 1) {
-      return <SchemaRenderer schema={children[0]} />; 
-    }
-    return children.map((child, index) => (
-      <SchemaRenderer key={child.id || index} schema={child} />
-    ));
-  }
-  return <SchemaRenderer schema={children} />;
-}
-

package/src/new-components.test.ts

@@ -1,73 +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 { describe, it, expect, beforeAll } from 'vitest';
-import { ComponentRegistry } from '@object-ui/core';
-
-describe('New Components Registration', () => {
-  // Import all renderers to register them
-  beforeAll(async () => {
-    await import('./renderers');
-  });
-
-  describe('Form Components', () => {
-    it('should register date-picker component', () => {
-      const component = ComponentRegistry.getConfig('date-picker');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Date Picker');
-    });
-
-    it('should register file-upload component', () => {
-      const component = ComponentRegistry.getConfig('file-upload');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('File Upload');
-    });
-  });
-
-  describe('Data Display Components', () => {
-    it('should register list component', () => {
-      const component = ComponentRegistry.getConfig('list');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('List');
-    });
-
-    it('should register tree-view component', () => {
-      const component = ComponentRegistry.getConfig('tree-view');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Tree View');
-    });
-  });
-
-  describe('Layout Components', () => {
-    it('should register grid component', () => {
-      const component = ComponentRegistry.getConfig('grid');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Grid Layout');
-    });
-
-    it('should register flex component', () => {
-      const component = ComponentRegistry.getConfig('flex');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Flex Layout');
-    });
-
-    it('should register container component', () => {
-      const component = ComponentRegistry.getConfig('container');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Container');
-    });
-  });
-
-  describe('Feedback Components', () => {
-    it('should register loading component', () => {
-      const component = ComponentRegistry.getConfig('loading');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Loading');
-    });
-  });
-});

package/src/renderers/action/action-bar.tsx

@@ -1,221 +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.
- */
-
-/**
- * action:bar — Location-aware action toolbar.
- *
- * Renders a set of ActionSchema items filtered by a given location.
- * Each action is rendered using its `component` type (action:button, action:icon,
- * action:menu, action:group) via the ComponentRegistry. Actions beyond the
- * `maxVisible` threshold are grouped into an overflow "More" dropdown.
- *
- * This is the "bridge" component that connects ActionSchema metadata to the UI,
- * enabling server-driven action rendering at list_toolbar, record_header,
- * list_item, record_more, record_related, and global_nav locations.
- *
- * @example
- * ```tsx
- * <SchemaRenderer schema={{
- *   type: 'action:bar',
- *   location: 'record_header',
- *   actions: [
- *     { name: 'mark_complete', label: 'Mark Complete', type: 'script', icon: 'check', component: 'action:button' },
- *     { name: 'delete', label: 'Delete', type: 'api', icon: 'trash-2', variant: 'destructive', component: 'action:button' },
- *   ],
- * }} />
- * ```
- */
-
-import React, { forwardRef, useMemo } from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import type { ActionSchema, ActionLocation, ActionComponent } from '@object-ui/types';
-import { useCondition } from '@object-ui/react';
-import { cn } from '../../lib/utils';
-import { useIsMobile } from '../../hooks/use-mobile';
-
-export interface ActionBarSchema {
-  type: 'action:bar';
-  /** Actions to render */
-  actions?: ActionSchema[];
-  /** Filter actions by this location */
-  location?: ActionLocation;
-  /** Maximum visible inline actions before overflow into "More" menu (default: 3) */
-  maxVisible?: number;
-  /** Maximum visible inline actions on mobile devices (default: 1). Desktop uses maxVisible instead. */
-  mobileMaxVisible?: number;
-  /** Visibility condition expression */
-  visible?: string;
-  /** Layout direction */
-  direction?: 'horizontal' | 'vertical';
-  /** Gap between items (Tailwind gap class, default: 'gap-2') */
-  gap?: string;
-  /** Button variant for all actions (can be overridden per-action) */
-  variant?: string;
-  /** Button size for all actions (can be overridden per-action) */
-  size?: string;
-  /** Custom CSS class */
-  className?: string;
-  [key: string]: any;
-}
-
-const ActionBarRenderer = forwardRef<HTMLDivElement, { schema: ActionBarSchema; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
-    const {
-      'data-obj-id': dataObjId,
-      'data-obj-type': dataObjType,
-      style,
-      data,
-      ...rest
-    } = props;
-
-    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
-    const isMobile = useIsMobile();
-
-    // Filter actions by location and deduplicate by name
-    const filteredActions = useMemo(() => {
-      const actions = schema.actions || [];
-      const located = !schema.location
-        ? actions
-        : actions.filter(
-            a => !a.locations || a.locations.length === 0 || a.locations.includes(schema.location!),
-          );
-      // Deduplicate by action name — keep first occurrence
-      const seen = new Set<string>();
-      return located.filter(a => {
-        if (!a.name) return true;
-        if (seen.has(a.name)) return false;
-        seen.add(a.name);
-        return true;
-      });
-    }, [schema.actions, schema.location]);
-
-    // Split into visible inline actions and overflow
-    // On mobile, show fewer actions inline (default: 1)
-    const maxVisible = isMobile
-      ? (schema.mobileMaxVisible ?? 1)
-      : (schema.maxVisible ?? 3);
-    const { inlineActions, overflowActions } = useMemo(() => {
-      if (filteredActions.length <= maxVisible) {
-        return { inlineActions: filteredActions, overflowActions: [] as ActionSchema[] };
-      }
-      return {
-        inlineActions: filteredActions.slice(0, maxVisible),
-        overflowActions: filteredActions.slice(maxVisible),
-      };
-    }, [filteredActions, maxVisible]);
-
-    if (schema.visible && !isVisible) return null;
-    if (filteredActions.length === 0) return null;
-
-    const direction = schema.direction || 'horizontal';
-    const gap = schema.gap || 'gap-2';
-
-    // Render overflow menu for excess actions
-    const MenuRenderer = overflowActions.length > 0 ? ComponentRegistry.get('action:menu') : null;
-    const overflowMenu = MenuRenderer ? (
-      <MenuRenderer
-        schema={{
-          type: 'action:menu' as const,
-          actions: overflowActions,
-          variant: schema.variant || 'ghost',
-          size: schema.size || 'sm',
-        }}
-      />
-    ) : null;
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex items-center',
-          direction === 'vertical' ? 'flex-col items-stretch' : 'flex-row flex-wrap',
-          gap,
-          schema.className,
-          className,
-        )}
-        role="toolbar"
-        aria-label="Actions"
-        {...rest}
-        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
-      >
-        {inlineActions.map((action) => {
-          const componentType: ActionComponent = action.component || 'action:button';
-          const Renderer = ComponentRegistry.get(componentType);
-          if (!Renderer) return null;
-
-          return (
-            <Renderer
-              key={action.name}
-              schema={{
-                ...action,
-                type: componentType,
-                actionType: action.type,
-                variant: action.variant || schema.variant,
-                size: action.size || schema.size,
-              }}
-              data={data}
-            />
-          );
-        })}
-
-        {overflowActions.length > 0 && overflowMenu}
-      </div>
-    );
-  },
-);
-
-ActionBarRenderer.displayName = 'ActionBarRenderer';
-
-ComponentRegistry.register('action:bar', ActionBarRenderer, {
-  namespace: 'action',
-  label: 'Action Bar',
-  inputs: [
-    { name: 'actions', type: 'object', label: 'Actions' },
-    {
-      name: 'location',
-      type: 'enum',
-      label: 'Location',
-      enum: ['list_toolbar', 'list_item', 'record_header', 'record_more', 'record_related', 'global_nav'],
-    },
-    {
-      name: 'maxVisible',
-      type: 'number',
-      label: 'Max Visible Actions',
-      defaultValue: 3,
-    },
-    {
-      name: 'direction',
-      type: 'enum',
-      label: 'Direction',
-      enum: ['horizontal', 'vertical'],
-      defaultValue: 'horizontal',
-    },
-    {
-      name: 'variant',
-      type: 'enum',
-      label: 'Default Variant',
-      enum: ['default', 'secondary', 'outline', 'ghost'],
-      defaultValue: 'outline',
-    },
-    {
-      name: 'size',
-      type: 'enum',
-      label: 'Default Size',
-      enum: ['sm', 'md', 'lg'],
-      defaultValue: 'sm',
-    },
-    { name: 'className', type: 'string', label: 'CSS Class', advanced: true },
-  ],
-  defaultProps: {
-    maxVisible: 3,
-    direction: 'horizontal',
-    variant: 'outline',
-    size: 'sm',
-    actions: [],
-  },
-});