spine-framework 0.2.1 → 1.0.0

package/.framework/src/components/shared/SchemaFields.tsx

@@ -1,226 +0,0 @@
-/**
- * @module src/components/shared/SchemaFields
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Schema-driven field grid. Renders an ordered list of `FieldDefinition`
- * entries via `FieldRenderer`, managing the name→value mapping and
- * propagating `onChange` calls back to the parent.
- *
- * **Value source resolution** (per field):
- * - `system` flag set → `data[name]` (top-level column)
- * - `system` flag unset → `data.data?.[name] ?? data[name]` (JSONB field
- *   with column fallback)
- *
- * **Layout:** two-column responsive grid by default (`twoColumn=true`);
- * pass `twoColumn=false` for a single-column stacked layout.
- *
- * **Exports:**
- * - `SchemaFields` — full editable/read-only field grid
- * - `SchemaFieldDisplay` — read-only single-field key:value display row
- * - `SchemaField` (unexported) — internal wrapper binding name to value
- *
- * @seeAlso src/components/shared/FieldRenderer.tsx
- * @seeAlso src/types/types.ts (FieldDefinition)
- * @seeAlso src/components/runtime/SchemaDetailForm.tsx (primary consumer)
- */
-
-import React from 'react'
-import { FieldDefinition } from '../../types/types'
-import { FieldRenderer } from './FieldRenderer'
-
-/**
- * Props for `SchemaFields`.
- *
- * @prop fields - Ordered array of field definitions to render
- * @prop data - Record containing current field values; may be flat or
- *   nested under a `.data` key for JSONB fields
- * @prop onChange - `(name, value)` callback; omit for pure read-only display
- * @prop readonly - Passes read-only mode down to every `FieldRenderer`
- * @prop errors - Per-field validation error messages
- * @prop twoColumn - Two-column responsive grid (default: `true`)
- * @prop displayTypes - Widget override map keyed by field name (from view config)
- */
-interface SchemaFieldsProps {
-  fields: FieldDefinition[]
-  data: Record<string, any>
-  onChange?: (name: string, value: any) => void
-  readonly?: boolean
-  errors?: Record<string, string>
-  /** Render fields in a two-column grid (default: true) */
-  twoColumn?: boolean
-  /** display_type per field key, sourced from view config — never from field definitions */
-  displayTypes?: Record<string, string>
-}
-
-/**
- * Renders a full schema field grid.
- *
- * @param props - `SchemaFieldsProps`
- * @returns Two-column (or single-column) field grid, or an empty-state message
- * @sideEffects none (delegates changes to `onChange`)
- */
-export function SchemaFields({
-  fields,
-  data,
-  onChange,
-  readonly = false,
-  errors = {},
-  twoColumn = true,
-  displayTypes = {}
-}: SchemaFieldsProps) {
-  if (!fields || fields.length === 0) {
-    return (
-      <p className="text-sm text-slate-500 italic">No schema fields defined for this type.</p>
-    )
-  }
-
-  return (
-    <div className={twoColumn ? 'grid grid-cols-1 md:grid-cols-2 gap-4' : 'space-y-4'}>
-      {fields.filter(f => !!f.name).map((field) => {
-        const name = field.name!
-        return (
-          <SchemaField
-            key={name}
-            field={field}
-            value={field.system ? data[name] : (data.data?.[name] ?? data[name])}
-            onChange={onChange}
-            readonly={readonly || field.readonly}
-            error={errors[name]}
-            displayType={displayTypes[name]}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-/** Internal props for the `SchemaField` name-binding wrapper. */
-interface SchemaFieldProps {
-  field: FieldDefinition
-  value: any
-  onChange?: (name: string, value: any) => void
-  readonly?: boolean
-  error?: string
-  displayType?: string
-}
-
-function SchemaField({ field, value, onChange, readonly, error, displayType }: SchemaFieldProps) {
-  return (
-    <FieldRenderer
-      field={field}
-      value={value}
-      onChange={readonly ? undefined : (val) => field.name && onChange?.(field.name, val)}
-      readonly={readonly}
-      error={error}
-      displayType={displayType}
-    />
-  )
-}
-
-/**
- * Read-only display of a single schema field value as a label:value row.
- * Useful for compact detail views outside the full form layout.
- *
- * @param field - Field definition (used for label and data_type formatting)
- * @param value - Raw value to display
- * @returns A `<div>` with label on the left and formatted value on the right
- * @sideEffects none (pure rendering)
- */
-export function SchemaFieldDisplay({
-  field,
-  value
-}: {
-  field: FieldDefinition
-  value: any
-}) {
-  const displayValue = formatFieldValue(field, value)
-
-  return (
-    <div className="flex justify-between items-start py-2">
-      <dt className="text-xs text-slate-500 font-medium flex-shrink-0 mr-4">
-        {field.label || field.name}:
-      </dt>
-      <dd className="text-sm text-slate-900 text-right">
-        {displayValue}
-      </dd>
-    </div>
-  )
-}
-
-/**
- * Formats a raw field value for read-only display, applying type-specific
- * transformations:
- * - `boolean`/`checkbox` → `'Yes'` / `'No'`
- * - `date` / `datetime` → locale string
- * - `select` → resolves option label from `field.options`
- * - `multiselect` → comma-joined option labels
- * - `json` → `<pre>` code block
- * - `url` → `<a>` link
- * - Null/undefined/empty → em-dash placeholder
- *
- * @param field - Field definition
- * @param value - Raw value
- * @returns Formatted `ReactNode`
- */
-function formatFieldValue(field: FieldDefinition, value: any): React.ReactNode {
-  if (value === null || value === undefined || value === '') {
-    return <span className="text-slate-400 italic">—</span>
-  }
-
-  switch (field.data_type) {
-    case 'boolean':
-    case 'checkbox':
-      return value ? 'Yes' : 'No'
-
-    case 'date':
-      try {
-        return new Date(value).toLocaleDateString()
-      } catch {
-        return String(value)
-      }
-
-    case 'datetime':
-      try {
-        return new Date(value).toLocaleString()
-      } catch {
-        return String(value)
-      }
-
-    case 'select': {
-      const option = field.options?.find(o => typeof o === 'object' && o.value === value)
-      return option && typeof option === 'object' ? option.label : String(value)
-    }
-
-    case 'multiselect': {
-      if (!Array.isArray(value)) return String(value)
-      return value.map(v => {
-        const option = field.options?.find(o => typeof o === 'object' && o.value === v)
-        return option && typeof option === 'object' ? option.label : v
-      }).join(', ')
-    }
-
-    case 'json':
-      return (
-        <pre className="text-xs bg-slate-50 rounded p-2 max-w-xs overflow-x-auto">
-          {JSON.stringify(value, null, 2)}
-        </pre>
-      )
-
-    case 'url':
-      return (
-        <a
-          href={value}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-blue-600 hover:text-blue-800 underline"
-        >
-          {value}
-        </a>
-      )
-
-    default:
-      return String(value)
-  }
-}

package/.framework/src/components/ui/DataTable.tsx

@@ -1,343 +0,0 @@
-/**
- * @module src/components/ui/DataTable
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Higher-level table wrapper that adds search, column filters, active-filter
- * chips, and pagination using shadcn/ui table primitives.
- *
- * **Search:** when `searchable=true`, renders a text input that calls
- * `onSearch` on each keystroke and shows an active chip while a query
- * is present.
- *
- * **Column filters:** columns with `filterable=true` and `filterOptions`
- * appear in an expandable filter panel as `<select>` dropdowns. Active
- * filter chips are shown above the table; each chip has an inline
- * dismiss button.
- *
- * **Pagination:** built-in pagination controls using shadcn Button components.
- *
- * @seeAlso src/components/ui/table.tsx
- * @seeAlso src/lib/utils.ts (cn)
- */
-
-import React, { useState } from 'react'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from './table'
-import { Badge } from './badge'
-import { Button } from './button'
-import { Search, Filter } from 'lucide-react'
-import { cn } from '../../lib/utils'
-
-/**
- * Column definition for DataTable
- */
-interface TableColumn<T> {
-  key: keyof T | string
-  title: string
-  render?: (row: T) => React.ReactNode
-  sortable?: boolean
-}
-
-/**
- * Extends `TableColumn<T>` with column-level filter support.
- */
-interface DataTableColumn<T> extends TableColumn<T> {
-  filterable?: boolean
-  filterOptions?: Array<{ value: string; label: string }>
-}
-
-/**
- * Props for `DataTable<T>`.
- *
- * @prop data - Row data array
- * @prop columns - Column descriptors (may include filter config)
- * @prop loading - Shows spinner while true
- * @prop searchable - Shows search input (default: `true`)
- * @prop searchPlaceholder - Placeholder text for the search input
- * @prop filterable - Shows the filter toggle button (default: `true`)
- * @prop pagination - Pagination config; omit to hide pagination
- * @prop onSort / sortColumn / sortDirection - Sort state and callback
- * @prop onRowClick - Row click callback
- * @prop onSearch - Callback invoked with the current search query
- * @prop onFilter - Callback invoked with the active filter map
- * @prop emptyMessage - Empty-state text
- */
-interface DataTableProps<T> {
-  data: T[]
-  columns: DataTableColumn<T>[]
-  loading?: boolean
-  searchable?: boolean
-  searchPlaceholder?: string
-  filterable?: boolean
-  pagination?: {
-    currentPage: number
-    totalPages: number
-    totalItems: number
-    itemsPerPage: number
-    onPageChange: (page: number) => void
-    onItemsPerPageChange: (itemsPerPage: number) => void
-  }
-  onSort?: (column: keyof T, direction: 'asc' | 'desc') => void
-  sortColumn?: keyof T
-  sortDirection?: 'asc' | 'desc'
-  onRowClick?: (item: T) => void
-  onSearch?: (query: string) => void
-  onFilter?: (filters: Record<string, any>) => void
-  emptyMessage?: string
-  className?: string
-}
-
-/**
- * Full-featured data table with search, filters, sort, and pagination.
- *
- * @param props - `DataTableProps<T>`
- * @returns Search/filter bar + `Table` + optional `TablePagination`
- * @sideEffects none (all state changes delegated to callbacks)
- */
-export function DataTable<T extends Record<string, any>>({
-  data,
-  columns,
-  loading = false,
-  searchable = true,
-  searchPlaceholder = 'Search...',
-  filterable = true,
-  pagination,
-  onSort,
-  sortColumn,
-  sortDirection,
-  onRowClick,
-  onSearch,
-  onFilter,
-  emptyMessage = 'No data available',
-  className
-}: DataTableProps<T>) {
-  const [searchQuery, setSearchQuery] = useState('')
-  const [filters, setFilters] = useState<Record<string, any>>({})
-  const [showFilters, setShowFilters] = useState(false)
-
-  const handleSearch = (query: string) => {
-    setSearchQuery(query)
-    onSearch?.(query)
-  }
-
-  const handleFilter = (key: string, value: any) => {
-    const newFilters = { ...filters, [key]: value }
-    if (value === '' || value === null || value === undefined) {
-      delete newFilters[key]
-    }
-    setFilters(newFilters)
-    onFilter?.(newFilters)
-  }
-
-  const clearFilters = () => {
-    setFilters({})
-    onFilter?.({})
-  }
-
-  const hasActiveFilters = Object.keys(filters).length > 0
-  const hasActiveSearch = searchQuery.length > 0
-
-  return (
-    <div className={cn('space-y-4', className)}>
-      {/* Search and Filters */}
-      {(searchable || filterable) && (
-        <div className="bg-card shadow rounded-lg p-4">
-          <div className="flex flex-col sm:flex-row gap-4">
-            {/* Search */}
-            {searchable && (
-              <div className="flex-1">
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-                  <input
-                    type="text"
-                    placeholder={searchPlaceholder}
-                    value={searchQuery}
-                    onChange={(e) => handleSearch(e.target.value)}
-                    className="pl-10 pr-4 py-2 w-full border border-input rounded-md focus:ring-ring focus:border-ring"
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Filters */}
-            {filterable && (
-              <div className="flex items-center space-x-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setShowFilters(!showFilters)}
-                  className={cn(
-                    hasActiveFilters && 'bg-primary/10 border-primary text-primary'
-                  )}
-                >
-                  <Filter className="h-4 w-4 mr-2" />
-                  Filters
-                  {hasActiveFilters && (
-                    <Badge variant="info">
-                      {Object.keys(filters).length}
-                    </Badge>
-                  )}
-                </Button>
-
-                {hasActiveFilters && (
-                  <Button variant="ghost" size="sm" onClick={clearFilters}>
-                    Clear
-                  </Button>
-                )}
-              </div>
-            )}
-          </div>
-
-          {/* Advanced Filters */}
-          {showFilters && filterable && (
-            <div className="mt-4 pt-4 border-t border-border">
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                {columns
-                  .filter(column => column.filterable && column.filterOptions)
-                  .map((column) => (
-                    <div key={String(column.key)}>
-                      <label className="block text-sm font-medium text-foreground mb-1">
-                        {column.title}
-                      </label>
-                      <select
-                        value={filters[String(column.key)] || ''}
-                        onChange={(e) => handleFilter(String(column.key), e.target.value || null)}
-                        className="w-full px-3 py-2 border border-input rounded-md focus:ring-ring focus:border-ring"
-                      >
-                        <option value="">All</option>
-                        {column.filterOptions?.map((option) => (
-                          <option key={option.value} value={option.value}>
-                            {option.label}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  ))}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Active filters display */}
-      {(hasActiveFilters || hasActiveSearch) && (
-        <div className="flex flex-wrap gap-2">
-          {hasActiveSearch && (
-            <Badge variant="info" className="flex items-center">
-              Search: "{searchQuery}"
-              <button
-                onClick={() => handleSearch('')}
-                className="ml-1 text-primary hover:text-primary/80"
-              >
-                ×
-              </button>
-            </Badge>
-          )}
-          
-          {Object.entries(filters).map(([key, value]) => {
-            const column = columns.find(col => String(col.key) === key)
-            const option = column?.filterOptions?.find(opt => opt.value === value)
-            
-            return (
-              <Badge key={key} variant="info" className="flex items-center">
-                {column?.title}: {option?.label || value}
-                <button
-                  onClick={() => handleFilter(key, null)}
-                  className="ml-1 text-primary hover:text-primary/80"
-                >
-                  ×
-                </button>
-              </Badge>
-            )
-          })}
-        </div>
-      )}
-
-      {/* Table */}
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              {columns.map((column) => (
-                <TableHead key={String(column.key)} className={column.sortable ? 'cursor-pointer' : ''}>
-                  {column.title}
-                </TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {loading ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  Loading...
-                </TableCell>
-              </TableRow>
-            ) : data.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
-                  {emptyMessage}
-                </TableCell>
-              </TableRow>
-            ) : (
-              data.map((row, index) => (
-                <TableRow
-                  key={index}
-                  onClick={() => onRowClick?.(row)}
-                  className={onRowClick ? 'cursor-pointer' : ''}
-                >
-                  {columns.map((column) => (
-                    <TableCell key={String(column.key)}>
-                      {column.render
-                        ? column.render(row)
-                        : String(row[column.key as keyof T] ?? '')}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* Pagination */}
-      {pagination && (
-        <div className="flex items-center justify-between px-2">
-          <div className="text-sm text-muted-foreground">
-            Showing {(pagination.currentPage - 1) * pagination.itemsPerPage + 1} to{' '}
-            {Math.min(pagination.currentPage * pagination.itemsPerPage, pagination.totalItems)} of{' '}
-            {pagination.totalItems} entries
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => pagination.onPageChange(pagination.currentPage - 1)}
-              disabled={pagination.currentPage <= 1}
-            >
-              Previous
-            </Button>
-            <span className="text-sm">
-              Page {pagination.currentPage} of {pagination.totalPages}
-            </span>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => pagination.onPageChange(pagination.currentPage + 1)}
-              disabled={pagination.currentPage >= pagination.totalPages}
-            >
-              Next
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}