spine-framework 0.2.1 → 1.0.0

package/.framework/src/components/runtime/DataHeader.tsx

@@ -1,68 +0,0 @@
-/**
- * @module src/components/runtime/DataHeader
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Title bar for entity list pages. Renders an entity icon, title,
- * description, and a "New" button that navigates to the create route.
- * The icon name is resolved dynamically from `@heroicons/react`; falls
- * back to `CubeIcon` if the name is unrecognised.
- *
- * @seeAlso src/components/runtime/DataListPage.tsx (mounts this component)
- */
-
-import React from 'react'
-import { Button } from '../ui/button'
-import * as Icons from 'lucide-react'
-
-/**
- * Props for `DataHeader`.
- *
- * @prop title - Entity name (displayed capitalised)
- * @prop icon - Heroicon name string (e.g. `'UserIcon'`)
- * @prop description - Short subtitle text
- * @prop newButtonHref - URL to navigate to when "New" is clicked
- */
-interface DataHeaderProps {
-  title: string
-  icon: string
-  description: string
-  newButtonHref: string
-}
-
-/**
- * Entity list page header with title, description, and new-record button.
- *
- * @param props - `DataHeaderProps`
- * @returns Header bar JSX
- * @sideEffects Navigates via `window.location.href` on button click
- */
-export function DataHeader({ title, icon, description, newButtonHref }: DataHeaderProps) {
-  // Dynamically get the icon component
-  const IconComponent = (Icons as Record<string, React.ComponentType<{ className?: string }>>)[icon] || Icons.Box
-  
-  return (
-    <div className="flex justify-between items-center">
-      <div className="flex items-center gap-3">
-        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
-          <IconComponent className="h-6 w-6 text-primary" />
-        </div>
-        <div>
-          <h1 className="text-xl font-semibold text-foreground capitalize">
-            {title}
-          </h1>
-          <p className="mt-0.5 text-sm text-muted-foreground">{description}</p>
-        </div>
-      </div>
-      
-      <Button 
-        onClick={() => window.location.href = newButtonHref}
-        className="flex items-center gap-2"
-      >
-        <Icons.Plus className="h-4 w-4" />
-        New {title.slice(0, -1)}
-      </Button>
-    </div>
-  )
-}

package/.framework/src/components/runtime/DataListPage.tsx

@@ -1,124 +0,0 @@
-import { useParams } from 'react-router-dom'
-import { useListSchema } from '../../hooks/useListSchema'
-import { useEntityList } from '../../hooks/useEntityList'
-import { DataHeader } from './DataHeader'
-import { DataStats } from './DataStats'
-import { DataFilters } from './DataFilters'
-import { DataTable } from './DataTable'
-import { Card, CardContent } from '../ui/card'
-import { Skeleton } from '../ui/skeleton'
-
-export function DataListPage() {
-  const { entity, typeSlug } = useParams<{ entity: string; typeSlug?: string }>()
-  
-  const { schema, view, loading: schemaLoading, error: schemaError } = useListSchema({
-    entity: entity || '',
-    viewSlug: 'default_list'
-  })
-  
-  const config = view && schema ? {
-    entity: entity || '',
-    typeSlug: typeSlug || undefined,
-    icon: 'database',
-    api: {
-      endpoint: 'admin-data',
-      listAction: 'list'
-    },
-    list: {
-      defaultSort: (view as any).default_sort || { field: 'created_at', direction: 'desc' },
-      stats: (view as any).stats || [],
-      filters: (view as any).filters || [],
-      columns: Object.entries((view as any).fields || {}).map(([key, fieldConfig]: [string, any]) => ({
-        key,
-        label: schema.fields[key]?.label || key,
-        sortable: fieldConfig.sortable !== false,
-        display_type: fieldConfig.display_type
-      }))
-    }
-  } : null
-  
-  const { 
-    data, 
-    loading, 
-    error, 
-    refetch,
-    filters, 
-    setFilters, 
-    sort, 
-    setSort
-  } = useEntityList(entity!, config)
-  
-  if (schemaLoading) {
-    return (
-      <div className="space-y-6">
-        <Card>
-          <CardContent className="p-6">
-            <Skeleton className="h-8 w-48" />
-            <Skeleton className="h-4 w-96 mt-2" />
-          </CardContent>
-        </Card>
-        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-          <Skeleton className="h-24" />
-          <Skeleton className="h-24" />
-          <Skeleton className="h-24" />
-          <Skeleton className="h-24" />
-        </div>
-        <Card>
-          <CardContent className="p-8 space-y-4">
-            <Skeleton className="h-8 w-full" />
-            <Skeleton className="h-8 w-full" />
-            <Skeleton className="h-8 w-3/4" />
-          </CardContent>
-        </Card>
-      </div>
-    )
-  }
-  
-  if (schemaError || !config) {
-    return (
-      <Card>
-        <CardContent className="p-8 text-center">
-          <p className="text-lg font-medium text-destructive">Error</p>
-          <p className="mt-2 text-sm text-muted-foreground">{schemaError || 'Failed to load entity configuration'}</p>
-        </CardContent>
-      </Card>
-    )
-  }
-  
-  return (
-    <div className="space-y-6">
-      <DataHeader 
-        title={config.entity.charAt(0).toUpperCase() + config.entity.slice(1)}
-        icon={config.icon}
-        description={`Manage ${config.entity}`}
-        newButtonHref={`/spine-framework/admin/runtime/${entity}/new`}
-      />
-      
-      <DataStats 
-        stats={config.list.stats} 
-        data={data}
-        loading={loading}
-      />
-      
-      <DataFilters 
-        filters={config.list.filters}
-        values={filters}
-        onChange={setFilters}
-        onClear={() => setFilters({})}
-      />
-      
-      <DataTable 
-        columns={config.list.columns}
-        data={data}
-        loading={loading}
-        error={error}
-        onRetry={refetch}
-        sort={sort}
-        onSort={setSort}
-        entity={entity!}
-        emptyMessage={`No ${config.entity} found`}
-        emptyIcon={config.icon}
-      />
-    </div>
-  )
-}

package/.framework/src/components/runtime/DataStats.tsx

@@ -1,70 +0,0 @@
-import { EntityStat } from '../../types/types'
-import { Card, CardContent } from '../ui/card'
-import * as Icons from 'lucide-react'
-
-interface DataStatsProps {
-  stats: EntityStat[]
-  data: any[]
-  loading?: boolean
-}
-
-const colorMap: Record<string, string> = {
-  blue: 'bg-blue-500/10 text-blue-500',
-  green: 'bg-green-500/10 text-green-500',
-  red: 'bg-red-500/10 text-red-500',
-  orange: 'bg-orange-500/10 text-orange-500',
-  purple: 'bg-purple-500/10 text-purple-500',
-  gray: 'bg-muted text-muted-foreground'
-}
-
-export function DataStats({ stats, data, loading }: DataStatsProps) {
-  const calculateStat = (stat: EntityStat): number => {
-    if (!data) return 0
-    
-    switch (stat.type) {
-      case 'count':
-        return data.length
-      case 'filter_count':
-        return data.filter(item => {
-          if (!stat.filter) return true
-          return Object.entries(stat.filter).every(([key, value]) => {
-            const itemValue = key.includes('.') 
-              ? key.split('.').reduce((obj, k) => obj?.[k], item)
-              : item[key]
-            return itemValue === value
-          })
-        }).length
-      default:
-        return 0
-    }
-  }
-  
-  return (
-    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-      {stats.map((stat, index) => {
-        const IconComponent = (Icons as Record<string, React.ComponentType<{ className?: string }>>)[stat.icon] || Icons.Box
-        const value = loading ? '-' : calculateStat(stat)
-        
-        return (
-          <Card key={index}>
-            <CardContent className="p-5">
-              <div className="flex items-center">
-                <div className={`flex-shrink-0 rounded-md p-3 ${colorMap[stat.color] || colorMap.gray}`}>
-                  <IconComponent className="h-6 w-6" />
-                </div>
-                <div className="ml-5 w-0 flex-1">
-                  <p className="text-sm font-medium text-muted-foreground truncate">
-                    {stat.title}
-                  </p>
-                  <p className="text-2xl font-semibold text-foreground">
-                    {typeof value === 'number' ? value.toLocaleString() : value}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )
-      })}
-    </div>
-  )
-}

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

@@ -1,174 +0,0 @@
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import { EntityColumn } from '../../types/types'
-import { formatDateTime } from '../../lib/utils'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '../ui/table'
-import { Card, CardContent } from '../ui/card'
-import { Button } from '../ui/button'
-import { Skeleton } from '../ui/skeleton'
-import { Badge } from '../ui/badge'
-import * as Icons from 'lucide-react'
-
-interface DataTableProps {
-  columns: EntityColumn[]
-  data: any[]
-  loading?: boolean
-  error?: string | null
-  onRetry?: () => void
-  sort: { field: string; direction: 'asc' | 'desc' }
-  onSort: (sort: { field: string; direction: 'asc' | 'desc' }) => void
-  entity: string
-  emptyMessage: string
-  emptyIcon: string
-}
-
-export function DataTable({ 
-  columns, 
-  data, 
-  loading, 
-  error, 
-  onRetry,
-  sort,
-  onSort,
-  entity,
-  emptyMessage,
-  emptyIcon 
-}: DataTableProps) {
-  const navigate = useNavigate()
-  const EmptyIconComponent = (Icons as Record<string, React.ComponentType<{ className?: string }>>)[emptyIcon] || Icons.Box
-  
-  const handleSort = (key: string) => {
-    if (sort.field === key) {
-      onSort({ 
-        field: key, 
-        direction: sort.direction === 'asc' ? 'desc' : 'asc' 
-      })
-    } else {
-      onSort({ field: key, direction: 'asc' })
-    }
-  }
-  
-  const getSortIcon = (key: string) => {
-    if (sort.field !== key) {
-      return <Icons.ArrowUpDown className="h-4 w-4 text-muted-foreground" />
-    }
-    return sort.direction === 'asc' 
-      ? <Icons.ArrowUp className="h-4 w-4 text-primary" />
-      : <Icons.ArrowDown className="h-4 w-4 text-primary" />
-  }
-  
-  const renderCell = (column: EntityColumn, row: any) => {
-    const value = column.key.includes('.')
-      ? column.key.split('.').reduce((obj, k) => obj?.[k], row)
-      : row[column.key]
-    
-    if (column.type === 'timestamp' && value) {
-      return formatDateTime(value)
-    }
-    
-    if (column.type === 'badge' && column.badgeColors) {
-      const colorClass = column.badgeColors[value?.toString()] || 'bg-muted text-muted-foreground'
-      return (
-        <Badge variant="secondary" className={colorClass}>
-          {value?.toString() || 'Unknown'}
-        </Badge>
-      )
-    }
-    
-    if (column.maxLength && typeof value === 'string' && value.length > column.maxLength) {
-      return value.substring(0, column.maxLength) + '...'
-    }
-    
-    return value?.toString() || '-'
-  }
-  
-  const handleRowClick = (row: any) => {
-    navigate(`/spine-framework/admin/runtime/${entity}/${row.id}`)
-  }
-  
-  if (loading) {
-    return (
-      <Card>
-        <CardContent className="p-8 space-y-4">
-          <Skeleton className="h-8 w-full" />
-          <Skeleton className="h-8 w-full" />
-          <Skeleton className="h-8 w-3/4" />
-        </CardContent>
-      </Card>
-    )
-  }
-  
-  if (error) {
-    return (
-      <Card>
-        <CardContent className="p-8 text-center">
-          <p className="text-destructive">Error: {error}</p>
-          {onRetry && (
-            <Button onClick={onRetry} variant="outline" className="mt-4">
-              Retry
-            </Button>
-          )}
-        </CardContent>
-      </Card>
-    )
-  }
-  
-  if (!data || data.length === 0) {
-    return (
-      <Card>
-        <CardContent className="p-8 text-center">
-          <EmptyIconComponent className="mx-auto h-12 w-12 text-muted-foreground" />
-          <h3 className="mt-2 text-sm font-medium text-foreground">{emptyMessage}</h3>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Try adjusting your filters or create a new record
-          </p>
-        </CardContent>
-      </Card>
-    )
-  }
-  
-  return (
-    <Card>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            {columns.map((column) => (
-              <TableHead 
-                key={column.key}
-                className={column.sortable ? 'cursor-pointer' : ''}
-                onClick={() => column.sortable && handleSort(column.key)}
-              >
-                <div className="flex items-center gap-1">
-                  {column.label}
-                  {column.sortable && getSortIcon(column.key)}
-                </div>
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {data.map((row) => (
-            <TableRow
-              key={row.id}
-              className="cursor-pointer"
-              onClick={() => handleRowClick(row)}
-            >
-              {columns.map((column) => (
-                <TableCell key={column.key}>
-                  {renderCell(column, row)}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </Card>
-  )
-}

package/.framework/src/components/runtime/SchemaDetailForm.tsx

@@ -1,134 +0,0 @@
-/**
- * @module src/components/runtime/SchemaDetailForm
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Renders a `DetailView`'s sections as a schema-driven form. Each
- * `DetailViewSection` becomes a white card containing a `SchemaFields`
- * grid. Field definitions come from `DesignSchema.fields`; display widget
- * overrides come from the view's per-field `ViewFieldConfig.display_type`.
- *
- * **Field source resolution:**
- * - Field schema (`data_type`, `required`, `validation`, etc.) →
- *   `schema.fields[fieldName]`
- * - Display widget override → `view.sections[n].fields[fieldName].display_type`
- * - `system` fields read from `record[fieldName]`; custom fields read
- *   from `record.data[fieldName]` (split handled upstream by `DataDetailPage`)
- *
- * **Read vs edit rendering:** passes `readonly={!isEditing}` to `SchemaFields`
- * so all field components switch between display and input mode.
- *
- * @seeAlso src/components/shared/SchemaFields.tsx
- * @seeAlso src/types/types.ts (DesignSchema, DetailView)
- * @seeAlso src/components/runtime/DataDetailPage.tsx (parent, owns form state)
- */
-
-import { DesignSchema, DetailView, DetailViewSection, FieldDefinition } from '../../types/types'
-import { SchemaFields } from '../shared/SchemaFields'
-
-/**
- * Props for `SchemaDetailForm`.
- *
- * @prop schema - Full `DesignSchema` for field definitions and permissions
- * @prop view - The `default_detail` `DetailView` from the schema
- * @prop record - Raw fetched record (used in read-only mode)
- * @prop isEditing - If true, renders input fields; false = read-only display
- * @prop isCreating - If true, skips reading from `record` (no record yet)
- * @prop permissions - Per-field `{ read, write }` map from `useEntityRecord`
- * @prop formData - Controlled values for all fields (owned by `DataDetailPage`)
- * @prop onFieldChange - Callback to update a single field value
- */
-interface SchemaDetailFormProps {
-  schema: DesignSchema
-  view: DetailView
-  record: any
-  isEditing: boolean
-  isCreating: boolean
-  permissions: Record<string, { read: boolean; write: boolean }>
-  formData: Record<string, any>
-  onFieldChange: (key: string, value: any) => void
-}
-
-/**
- * Renders a schema-defined `DetailView` as a sectioned form.
- *
- * @param props - `SchemaDetailFormProps`
- * @returns One card per `DetailViewSection`, or an empty-state message
- * @sideEffects none (pure rendering)
- */
-export function SchemaDetailForm({
-  schema,
-  view,
-  record,
-  isEditing,
-  isCreating,
-  permissions,
-  formData,
-  onFieldChange
-}: SchemaDetailFormProps) {
-  
-  const renderSection = (section: DetailViewSection, sectionIndex: number) => {
-    const fieldNames = Array.isArray(section.fields) ? section.fields : Object.keys(section.fields || {})
-    const sectionFields = fieldNames.map((fieldName: string) => {
-      const fieldDef = schema.fields[fieldName]
-      if (!fieldDef) return null
-
-      return {
-        name: fieldName,
-        label: fieldDef.label,
-        data_type: fieldDef.data_type,
-        required: fieldDef.required,
-        validation: fieldDef.validation,
-        options: fieldDef.options,
-        permissions: fieldDef.permissions,
-        system: fieldDef.system
-      } as FieldDefinition
-    }).filter((field): field is NonNullable<typeof field> => field !== null)
-
-    // Build display_type map from view config — keeps field definitions clean
-    const displayTypes: Record<string, string> = {}
-    if (!Array.isArray(section.fields)) {
-      Object.entries(section.fields || {}).forEach(([fieldName, viewConfig]: [string, any]) => {
-        if (viewConfig.display_type) {
-          displayTypes[fieldName] = viewConfig.display_type
-        }
-      })
-    }
-
-    if (sectionFields.length === 0) return null
-
-    return (
-      <div key={sectionIndex} className="bg-white shadow rounded-lg p-6">
-        <h3 className="text-lg font-medium text-slate-900 mb-4">
-          {section.title}
-        </h3>
-        
-        <SchemaFields
-          fields={sectionFields}
-          data={isCreating || isEditing ? formData : (record || {})}
-          readonly={!isEditing}
-          twoColumn={false}
-          onChange={onFieldChange}
-          displayTypes={displayTypes}
-        />
-      </div>
-    )
-  }
-
-  if (!view.sections || view.sections.length === 0) {
-    return (
-      <div className="bg-white shadow rounded-lg p-6">
-        <div className="text-center py-8">
-          <p className="text-slate-500">No fields configured for this view</p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      {view.sections.map((section, index) => renderSection(section, index))}
-    </div>
-  )
-}

package/.framework/src/components/runtime/index.ts

@@ -1,18 +0,0 @@
-/**
- * @module src/components/runtime
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Barrel export for all schema-driven runtime page components.
- * Import from this module to get type-safe access to all runtime UI primitives.
- */
-
-export { DataListPage } from './DataListPage'
-export { DataDetailPage } from './DataDetailPage'
-export { DataHeader } from './DataHeader'
-export { DataStats } from './DataStats'
-export { DataFilters } from './DataFilters'
-export { DataTable } from './DataTable'
-export { DataDetailHeader } from './DataDetailHeader'
-export { SchemaDetailForm } from './SchemaDetailForm'

package/.framework/src/components/search-form.tsx

@@ -1,29 +0,0 @@
-"use client"
-
-import { Label } from "./ui/label"
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarInput,
-} from "./ui/sidebar"
-import { SearchIcon } from "lucide-react"
-
-export function SearchForm({ ...props }: React.ComponentProps<"form">) {
-  return (
-    <form {...props}>
-      <SidebarGroup className="py-0">
-        <SidebarGroupContent className="relative">
-          <Label htmlFor="search" className="sr-only">
-            Search
-          </Label>
-          <SidebarInput
-            id="search"
-            placeholder="Search the docs..."
-            className="pl-8"
-          />
-          <SearchIcon className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
-        </SidebarGroupContent>
-      </SidebarGroup>
-    </form>
-  )
-}