@object-ui/components 3.3.0 → 3.3.1

package/src/custom/section-header.tsx

@@ -1,68 +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 { ChevronDown, ChevronRight } from "lucide-react"
-
-import { cn } from "../lib/utils"
-
-export interface SectionHeaderProps {
-  /** Section heading text */
-  title: string
-  /** Icon rendered before the title */
-  icon?: React.ReactNode
-  /** Enable collapse/expand toggle */
-  collapsible?: boolean
-  /** Current collapsed state */
-  collapsed?: boolean
-  /** Callback when toggling collapse/expand */
-  onToggle?: () => void
-  /** Data-testid attribute */
-  testId?: string
-  /** Additional CSS class name */
-  className?: string
-}
-
-/**
- * Section heading with optional collapse/expand support.
- *
- * Renders as a `<button>` when collapsible, with a chevron icon
- * indicating the expand/collapse state. Uses `aria-expanded` for accessibility.
- */
-function SectionHeader({ title, icon, collapsible, collapsed, onToggle, testId, className }: SectionHeaderProps) {
-  const titleContent = (
-    <h3 className="text-xs font-semibold text-foreground uppercase tracking-wider flex items-center gap-1.5">
-      {icon && <span className="text-muted-foreground shrink-0" aria-hidden="true">{icon}</span>}
-      {title}
-    </h3>
-  )
-  if (collapsible) {
-    return (
-      <button
-        data-testid={testId}
-        className={cn("flex items-center justify-between pt-4 pb-1.5 first:pt-0 w-full text-left", className)}
-        onClick={onToggle}
-        type="button"
-        aria-expanded={!collapsed}
-      >
-        {titleContent}
-        {collapsed ? (
-          <ChevronRight className="h-3 w-3 text-muted-foreground" />
-        ) : (
-          <ChevronDown className="h-3 w-3 text-muted-foreground" />
-        )}
-      </button>
-    )
-  }
-  return (
-    <div className={cn("pt-4 pb-1.5 first:pt-0", className)} data-testid={testId}>
-      {titleContent}
-    </div>
-  )
-}
-
-export { SectionHeader }

package/src/custom/sort-builder.tsx

@@ -1,129 +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 * as React from "react"
-import { X, Plus, Trash2 } from "lucide-react"
-
-import { cn } from "../lib/utils"
-import { Button } from "../ui/button"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
-
-export interface SortItem {
-  id: string;
-  field: string;
-  order: 'asc' | 'desc';
-}
-
-export interface SortBuilderProps {
-  fields?: Array<{ 
-    value: string
-    label: string
-  }>;
-  value?: SortItem[];
-  onChange?: (value: SortItem[]) => void;
-  className?: string;
-}
-
-export function SortBuilder({
-  fields = [],
-  value = [],
-  onChange,
-  className,
-}: SortBuilderProps) {
-  // Use internal state initialization prop changes
-  const [items, setItems] = React.useState<SortItem[]>(value || []);
-
-  React.useEffect(() => {
-    if (value && JSON.stringify(value) !== JSON.stringify(items)) {
-         setItems(value);
-    }
-  }, [value]);
-
-  const handleChange = (newItems: SortItem[]) => {
-    setItems(newItems);
-    onChange?.(newItems);
-  };
-
-  const addItem = () => {
-    const newItem: SortItem = {
-      id: crypto.randomUUID(),
-      field: fields[0]?.value || "",
-      order: 'asc',
-    };
-    handleChange([...items, newItem]);
-  };
-
-  const updateItem = (id: string, updates: Partial<SortItem>) => {
-    handleChange(items.map(item => item.id === id ? { ...item, ...updates } : item));
-  };
-
-  const removeItem = (id: string) => {
-    handleChange(items.filter(item => item.id !== id));
-  };
-
-  return (
-    <div className={cn("space-y-3", className)}>
-      <div className="space-y-2">
-        {items.map((item, index) => (
-          <div key={item.id} className="flex items-center gap-2">
-             <span className="text-sm font-medium w-16 text-muted-foreground">
-               {index === 0 ? "Sort by" : "Then by"}
-             </span>
-             <div className="flex-1">
-                <Select
-                  value={item.field}
-                  onValueChange={(val) => updateItem(item.id, { field: val })}
-                >
-                  <SelectTrigger className="h-9">
-                    <SelectValue placeholder="Select field" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {fields.map(f => (
-                      <SelectItem key={f.value} value={f.value}>{f.label}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-             </div>
-             <div className="w-28">
-                <Select
-                  value={item.order}
-                  onValueChange={(val) => updateItem(item.id, { order: val as 'asc' | 'desc' })}
-                >
-                  <SelectTrigger className="h-9">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="asc">A -&gt; Z</SelectItem>
-                    <SelectItem value="desc">Z -&gt; A</SelectItem>
-                  </SelectContent>
-                </Select>
-             </div>
-             <Button
-               variant="ghost"
-               size="icon"
-               className="h-9 w-9 shrink-0"
-               onClick={() => removeItem(item.id)}
-             >
-               <X className="h-4 w-4" />
-             </Button>
-          </div>
-        ))}
-      </div>
-       <Button
-        variant="outline"
-        size="sm"
-        onClick={addItem}
-        className="h-8"
-        disabled={fields.length === 0}
-      >
-        <Plus className="h-3 w-3 mr-2" />
-        Add sort
-      </Button>
-    </div>
-  );
-}

package/src/custom/spinner.tsx

@@ -1,26 +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 * as React from "react"
-import { cn } from "../lib/utils"
-import { Loader2 } from "lucide-react"
-
-function Spinner({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      role="status"
-      aria-label="Loading"
-      className={cn("flex items-center justify-center", className)}
-      {...props}
-    >
-      <Loader2 className="animate-spin text-muted-foreground w-full h-full min-w-4 min-h-4" />
-    </div>
-  )
-}
-
-export { Spinner }

package/src/custom/view-skeleton.tsx

@@ -1,243 +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 * 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

@@ -1,153 +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 * 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,
-}