@object-ui/components 0.5.0 → 3.0.0

package/src/custom/view-skeleton.tsx

@@ -0,0 +1,243 @@
+/**
+ * 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 * as React from "react"
+import { cn } from "../lib/utils"
+import { Skeleton } from "../ui/skeleton"
+
+// ---------------------------------------------------------------------------
+// Shared types
+// ---------------------------------------------------------------------------
+
+export interface ViewSkeletonProps extends React.ComponentProps<"div"> {
+  /** Number of rows/items to render */
+  rows?: number
+}
+
+// ---------------------------------------------------------------------------
+// GridSkeleton – table rows with header and column cells
+// ---------------------------------------------------------------------------
+
+export interface GridSkeletonProps extends ViewSkeletonProps {
+  /** Number of columns to render */
+  columns?: number
+}
+
+function GridSkeleton({
+  rows = 5,
+  columns = 4,
+  className,
+  ...props
+}: GridSkeletonProps) {
+  return (
+    <div
+      data-slot="grid-skeleton"
+      className={cn("w-full space-y-2", className)}
+      {...props}
+    >
+      {/* Header row */}
+      <div className="flex gap-4 px-4 py-2">
+        {Array.from({ length: columns }).map((_, col) => (
+          <Skeleton key={col} className="h-4 flex-1 rounded" />
+        ))}
+      </div>
+
+      {/* Data rows */}
+      {Array.from({ length: rows }).map((_, row) => (
+        <div key={row} className="flex gap-4 rounded-md border px-4 py-3">
+          {Array.from({ length: columns }).map((_, col) => (
+            <Skeleton
+              key={col}
+              className={cn("h-4 flex-1 rounded", col === 0 && "max-w-[40%]")}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// KanbanSkeleton – columns with placeholder cards
+// ---------------------------------------------------------------------------
+
+export interface KanbanSkeletonProps extends ViewSkeletonProps {
+  /** Number of kanban columns to render */
+  columns?: number
+  /** Number of cards per column */
+  cardsPerColumn?: number
+}
+
+function KanbanSkeleton({
+  columns = 3,
+  cardsPerColumn = 3,
+  className,
+  ...props
+}: KanbanSkeletonProps) {
+  return (
+    <div
+      data-slot="kanban-skeleton"
+      className={cn("flex gap-4 overflow-x-auto", className)}
+      {...props}
+    >
+      {Array.from({ length: columns }).map((_, col) => (
+        <div
+          key={col}
+          className="flex w-72 shrink-0 flex-col gap-3 rounded-lg border bg-muted/30 p-3"
+        >
+          {/* Column header */}
+          <Skeleton className="h-5 w-24 rounded" />
+
+          {/* Cards */}
+          {Array.from({ length: cardsPerColumn }).map((_, card) => (
+            <div key={card} className="space-y-2 rounded-md border bg-background p-3">
+              <Skeleton className="h-4 w-3/4 rounded" />
+              <Skeleton className="h-3 w-1/2 rounded" />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// FormSkeleton – labeled form fields
+// ---------------------------------------------------------------------------
+
+function FormSkeleton({
+  rows = 4,
+  className,
+  ...props
+}: ViewSkeletonProps) {
+  return (
+    <div
+      data-slot="form-skeleton"
+      className={cn("w-full max-w-lg space-y-6", className)}
+      {...props}
+    >
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="space-y-2">
+          {/* Label */}
+          <Skeleton className="h-4 w-28 rounded" />
+          {/* Input */}
+          <Skeleton className="h-9 w-full rounded-md" />
+        </div>
+      ))}
+
+      {/* Submit button */}
+      <Skeleton className="h-9 w-24 rounded-md" />
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ListSkeleton – stacked list items
+// ---------------------------------------------------------------------------
+
+function ListSkeleton({
+  rows = 5,
+  className,
+  ...props
+}: ViewSkeletonProps) {
+  return (
+    <div
+      data-slot="list-skeleton"
+      className={cn("w-full space-y-3", className)}
+      {...props}
+    >
+      {Array.from({ length: rows }).map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-3 rounded-md border px-4 py-3"
+        >
+          <Skeleton className="size-8 shrink-0 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <Skeleton className="h-4 w-3/5 rounded" />
+            <Skeleton className="h-3 w-2/5 rounded" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ChartSkeleton – chart area placeholder
+// ---------------------------------------------------------------------------
+
+function ChartSkeleton({
+  className,
+  ...props
+}: Omit<ViewSkeletonProps, "rows">) {
+  return (
+    <div
+      data-slot="chart-skeleton"
+      className={cn("w-full space-y-4", className)}
+      {...props}
+    >
+      {/* Chart title */}
+      <Skeleton className="h-5 w-40 rounded" />
+
+      {/* Chart area with bar placeholders */}
+      <div className="flex h-48 items-end gap-2 rounded-md border p-4">
+        {(["h-2/5", "h-3/5", "h-1/3", "h-4/5", "h-1/2", "h-3/4", "h-2/5"] as const).map((heightClass, i) => (
+          <Skeleton
+            key={i}
+            className={cn("flex-1 rounded-t", heightClass)}
+          />
+        ))}
+      </div>
+
+      {/* Legend */}
+      <div className="flex gap-4">
+        <Skeleton className="h-3 w-16 rounded" />
+        <Skeleton className="h-3 w-16 rounded" />
+        <Skeleton className="h-3 w-16 rounded" />
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ViewSkeleton – convenience wrapper that dispatches by variant
+// ---------------------------------------------------------------------------
+
+export type ViewSkeletonVariant = "grid" | "kanban" | "form" | "list" | "chart"
+
+export interface ViewSkeletonDispatchProps extends ViewSkeletonProps {
+  variant: ViewSkeletonVariant
+  /** Number of columns (grid / kanban) */
+  columns?: number
+  /** Cards per column (kanban only) */
+  cardsPerColumn?: number
+}
+
+function ViewSkeleton({ variant, ...props }: ViewSkeletonDispatchProps) {
+  switch (variant) {
+    case "grid":
+      return <GridSkeleton {...props} />
+    case "kanban":
+      return <KanbanSkeleton {...props} />
+    case "form":
+      return <FormSkeleton {...props} />
+    case "list":
+      return <ListSkeleton {...props} />
+    case "chart":
+      return <ChartSkeleton {...props} />
+  }
+}
+
+export {
+  ViewSkeleton,
+  GridSkeleton,
+  KanbanSkeleton,
+  FormSkeleton,
+  ListSkeleton,
+  ChartSkeleton,
+}

package/src/custom/view-states.tsx

@@ -0,0 +1,153 @@
+/**
+ * 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 * as React from "react"
+import { Loader2, InboxIcon, AlertCircle } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "../ui/button"
+
+// ---------------------------------------------------------------------------
+// DataLoadingState
+// ---------------------------------------------------------------------------
+
+interface DataLoadingStateProps extends React.ComponentProps<"div"> {
+  /** Message displayed below the spinner */
+  message?: string
+}
+
+function DataLoadingState({
+  className,
+  message = "Loading…",
+  ...props
+}: DataLoadingStateProps) {
+  return (
+    <div
+      role="status"
+      aria-label={message}
+      data-slot="data-loading-state"
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 p-6 text-center",
+        className
+      )}
+      {...props}
+    >
+      <Loader2 className="size-6 animate-spin text-muted-foreground" />
+      {message && (
+        <p className="text-sm text-muted-foreground">{message}</p>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// DataEmptyState
+// ---------------------------------------------------------------------------
+
+interface DataEmptyStateProps extends React.ComponentProps<"div"> {
+  /** Icon rendered above the title */
+  icon?: React.ReactNode
+  title?: string
+  description?: string
+  /** Optional action rendered below the description */
+  action?: React.ReactNode
+}
+
+function DataEmptyState({
+  className,
+  icon,
+  title = "No data",
+  description,
+  action,
+  children,
+  ...props
+}: DataEmptyStateProps) {
+  return (
+    <div
+      data-slot="data-empty-state"
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 p-6 text-center",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-10 items-center justify-center rounded-lg bg-muted">
+        {icon ?? <InboxIcon className="size-5 text-muted-foreground" />}
+      </div>
+      {title && (
+        <h3 className="text-sm font-medium">{title}</h3>
+      )}
+      {description && (
+        <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
+      )}
+      {action}
+      {children}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// DataErrorState
+// ---------------------------------------------------------------------------
+
+interface DataErrorStateProps extends React.ComponentProps<"div"> {
+  title?: string
+  /** Error message or description */
+  message?: string
+  /** Callback invoked when the retry button is clicked */
+  onRetry?: () => void
+  /** Label for the retry button */
+  retryLabel?: string
+}
+
+function DataErrorState({
+  className,
+  title = "Something went wrong",
+  message,
+  onRetry,
+  retryLabel = "Retry",
+  children,
+  ...props
+}: DataErrorStateProps) {
+  return (
+    <div
+      role="alert"
+      data-slot="data-error-state"
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 p-6 text-center",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-10 items-center justify-center rounded-lg bg-destructive/10">
+        <AlertCircle className="size-5 text-destructive" />
+      </div>
+      {title && (
+        <h3 className="text-sm font-medium">{title}</h3>
+      )}
+      {message && (
+        <p className="max-w-sm text-sm text-muted-foreground">{message}</p>
+      )}
+      {onRetry && (
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          {retryLabel}
+        </Button>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export {
+  DataLoadingState,
+  DataEmptyState,
+  DataErrorState,
+  type DataLoadingStateProps,
+  type DataEmptyStateProps,
+  type DataErrorStateProps,
+}

package/src/index.ts

@@ -14,6 +14,7 @@ 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';

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

@@ -0,0 +1,147 @@
+/**
+ * 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:button — Smart action button driven by ActionSchema.
+ *
+ * Renders a Shadcn Button wired to the ActionRunner. Supports:
+ * - All 5 spec action types (script, url, modal, flow, api)
+ * - Conditional visibility & enabled state
+ * - Loading indicator during async execution
+ * - Icon rendering via Lucide
+ * - Variant / size / className overrides from schema
+ */
+
+import React, { forwardRef, useCallback, useState } from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import type { ActionSchema } from '@object-ui/types';
+import { useAction } from '@object-ui/react';
+import { useCondition } from '@object-ui/react';
+import { Button } from '../../ui';
+import { cn } from '../../lib/utils';
+import { Loader2 } from 'lucide-react';
+import { resolveIcon } from './resolve-icon';
+
+export interface ActionButtonProps {
+  schema: ActionSchema & { type: string; className?: string };
+  className?: string;
+  /** Override context for this specific action */
+  context?: Record<string, any>;
+  [key: string]: any;
+}
+
+const ActionButtonRenderer = forwardRef<HTMLButtonElement, ActionButtonProps>(
+  ({ schema, className, context: localContext, ...props }, ref) => {
+    const {
+      'data-obj-id': dataObjId,
+      'data-obj-type': dataObjType,
+      style,
+      ...rest
+    } = props;
+
+    const { execute } = useAction();
+    const [loading, setLoading] = useState(false);
+
+    // Evaluate visibility and enabled conditions
+    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
+    const isEnabled = useCondition(schema.enabled ? `\${${schema.enabled}}` : undefined);
+
+    // Resolve icon
+    const Icon = resolveIcon(schema.icon);
+
+    // Map schema variant to Shadcn button variant
+    const variant = schema.variant === 'primary' ? 'default' : (schema.variant || 'default');
+    const size = schema.size === 'md' ? 'default' : (schema.size || 'default');
+
+    const handleClick = useCallback(async () => {
+      if (loading) return;
+      setLoading(true);
+
+      try {
+        await execute({
+          type: schema.type,
+          name: schema.name,
+          target: schema.target,
+          execute: schema.execute,
+          endpoint: schema.endpoint,
+          method: schema.method,
+          params: schema.params as Record<string, any> | undefined,
+          confirmText: schema.confirmText,
+          successMessage: schema.successMessage,
+          errorMessage: schema.errorMessage,
+          refreshAfter: schema.refreshAfter,
+          toast: schema.toast,
+          ...localContext,
+        });
+      } finally {
+        setLoading(false);
+      }
+    }, [schema, execute, loading, localContext]);
+
+    if (schema.visible && !isVisible) return null;
+
+    return (
+      <Button
+        ref={ref}
+        type="button"
+        variant={variant as any}
+        size={size as any}
+        className={cn(schema.className, className)}
+        disabled={(schema.enabled ? !isEnabled : false) || loading}
+        onClick={handleClick}
+        {...rest}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        {!loading && Icon && <Icon className={cn('h-4 w-4', schema.label && 'mr-2')} />}
+        {schema.label}
+      </Button>
+    );
+  },
+);
+
+ActionButtonRenderer.displayName = 'ActionButtonRenderer';
+
+ComponentRegistry.register('action:button', ActionButtonRenderer, {
+  namespace: 'action',
+  label: 'Action Button',
+  inputs: [
+    { name: 'name', type: 'string', label: 'Action Name' },
+    { name: 'label', type: 'string', label: 'Label', defaultValue: 'Action' },
+    { name: 'icon', type: 'string', label: 'Icon' },
+    {
+      name: 'type',
+      type: 'enum',
+      label: 'Action Type',
+      enum: ['script', 'url', 'modal', 'flow', 'api'],
+      defaultValue: 'script',
+    },
+    { name: 'target', type: 'string', label: 'Target' },
+    {
+      name: 'variant',
+      type: 'enum',
+      label: 'Variant',
+      enum: ['default', 'primary', 'secondary', 'destructive', 'outline', 'ghost'],
+      defaultValue: 'default',
+    },
+    {
+      name: 'size',
+      type: 'enum',
+      label: 'Size',
+      enum: ['sm', 'md', 'lg'],
+      defaultValue: 'md',
+    },
+    { name: 'className', type: 'string', label: 'CSS Class', advanced: true },
+  ],
+  defaultProps: {
+    label: 'Action',
+    type: 'script',
+    variant: 'default',
+    size: 'md',
+  },
+});