spine-framework 0.1.61 → 1.0.0

package/.framework/src/components/app-shell/GenericAppShell.tsx

@@ -1,181 +0,0 @@
-import { useState } from 'react'
-import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom'
-import { AppRecord } from '../../hooks/useApps'
-import { GenericListPage } from './GenericListPage'
-import { GenericDetailPage } from './GenericDetailPage'
-
-interface NavItem {
-  id: string
-  label: string
-  icon?: string
-  path: string
-  type_slug?: string
-  view?: string
-  min_role?: string
-}
-
-interface GenericAppShellProps {
-  app: AppRecord
-}
-
-/**
- * Data-driven app shell. Reads nav_items from the app record to build
- * a sidebar and child routes. Each nav entry with a type_slug renders
- * a GenericListPage (at path) and GenericDetailPage (at path/:id).
- */
-export function GenericAppShell({ app }: GenericAppShellProps) {
-  const navigate = useNavigate()
-  const location = useLocation()
-  const [sidebarOpen, setSidebarOpen] = useState(false)
-
-  const navItems: NavItem[] = (app.nav_items || []) as NavItem[]
-
-  // Derive relative paths from app's route_prefix
-  const prefix = app.route_prefix || `/${app.slug}`
-
-  // Check if a nav item is active
-  const isActive = (item: NavItem) => {
-    const fullPath = item.path.startsWith('/') ? item.path : `${prefix}/${item.path}`
-    return location.pathname.startsWith(fullPath)
-  }
-
-  return (
-    <div className="min-h-screen bg-slate-50 flex">
-      {/* Sidebar */}
-      <aside className={`
-        fixed inset-y-0 left-0 z-40 w-64 bg-white border-r border-slate-200
-        transform transition-transform duration-200 ease-in-out
-        lg:translate-x-0 lg:static lg:inset-auto
-        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
-      `}>
-        <div className="flex items-center gap-3 h-16 px-6 border-b border-slate-200">
-          {app.icon && (
-            <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-bold`}
-              style={{ backgroundColor: app.color || '#475569' }}>
-              {app.name.charAt(0).toUpperCase()}
-            </div>
-          )}
-          <div>
-            <h2 className="font-semibold text-slate-900 text-sm">{app.name}</h2>
-            {app.description && (
-              <p className="text-xs text-slate-500 truncate max-w-[160px]">{app.description}</p>
-            )}
-          </div>
-        </div>
-
-        <nav className="px-3 py-4 space-y-1">
-          {navItems.map(item => (
-            <button
-              key={item.id || item.path}
-              onClick={() => {
-                const target = item.path.startsWith('/') ? item.path : `${prefix}/${item.path}`
-                navigate(target)
-                setSidebarOpen(false)
-              }}
-              className={`
-                w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors
-                ${isActive(item)
-                  ? 'bg-slate-100 text-slate-900 font-medium'
-                  : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
-                }
-              `}
-            >
-              <span>{item.label}</span>
-            </button>
-          ))}
-        </nav>
-      </aside>
-
-      {/* Overlay for mobile sidebar */}
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 z-30 bg-black/20 lg:hidden"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
-
-      {/* Main content */}
-      <div className="flex-1 min-w-0">
-        {/* Mobile header */}
-        <div className="lg:hidden flex items-center h-16 px-4 border-b border-slate-200 bg-white">
-          <button
-            onClick={() => setSidebarOpen(true)}
-            className="p-2 -ml-2 text-slate-600 hover:text-slate-900"
-          >
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
-          </button>
-          <span className="ml-3 font-semibold text-slate-900">{app.name}</span>
-        </div>
-
-        <main className="p-6">
-          <Routes>
-            {/* Default: redirect to first nav item */}
-            {navItems.length > 0 && (
-              <Route index element={
-                <Navigate to={navItems[0].path.startsWith('/') ? navItems[0].path : navItems[0].path} replace />
-              } />
-            )}
-
-            {/* Generate list + detail routes for each nav item with type_slug */}
-            {navItems.filter(item => item.type_slug).map(item => {
-              // Strip leading prefix to get relative route path
-              const relativePath = item.path.startsWith(prefix)
-                ? item.path.slice(prefix.length).replace(/^\//, '')
-                : item.path.replace(/^\//, '')
-
-              return [
-                <Route
-                  key={`${item.id}-list`}
-                  path={relativePath}
-                  element={
-                    <GenericListPage
-                      typeSlug={item.type_slug!}
-                      viewSlug={item.view}
-                      appPrefix={prefix}
-                      detailPath={`${relativePath}`}
-                    />
-                  }
-                />,
-                <Route
-                  key={`${item.id}-new`}
-                  path={`${relativePath}/new`}
-                  element={
-                    <GenericDetailPage
-                      typeSlug={item.type_slug!}
-                      viewSlug={item.view}
-                      isCreating={true}
-                    />
-                  }
-                />,
-                <Route
-                  key={`${item.id}-detail`}
-                  path={`${relativePath}/:id`}
-                  element={
-                    <GenericDetailPage
-                      typeSlug={item.type_slug!}
-                      viewSlug={item.view}
-                    />
-                  }
-                />
-              ]
-            })}
-
-            {/* Empty state */}
-            {navItems.length === 0 && (
-              <Route path="*" element={
-                <div className="text-center py-16">
-                  <h2 className="text-lg font-medium text-slate-900">No pages configured</h2>
-                  <p className="mt-2 text-sm text-slate-500">
-                    Add nav_items to this app's record to create pages.
-                  </p>
-                </div>
-              } />
-            )}
-          </Routes>
-        </main>
-      </div>
-    </div>
-  )
-}

package/.framework/src/components/app-shell/GenericDetailPage.tsx

@@ -1,200 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useParams, useSearchParams, useNavigate } from 'react-router-dom'
-import { useEntityRecord } from '../../hooks/useEntityRecord'
-import { DataDetailHeader } from '../runtime/DataDetailHeader'
-import { SchemaDetailForm } from '../runtime/SchemaDetailForm'
-
-interface GenericDetailPageProps {
-  typeSlug: string
-  viewSlug?: string
-  isCreating?: boolean
-}
-
-/**
- * Schema-driven detail page for the Generic App Shell.
- * Reuses the same runtime components as admin (DataDetailHeader, SchemaDetailForm)
- * but scoped to a specific type from the app's nav_items.
- */
-export function GenericDetailPage({ typeSlug, viewSlug, isCreating: forceCreate }: GenericDetailPageProps) {
-  const { id } = useParams<{ id: string }>()
-  const navigate = useNavigate()
-  const [searchParams, setSearchParams] = useSearchParams()
-
-  const isCreating = forceCreate || !id
-  const isEditing = searchParams.get('edit') === 'true' || isCreating
-
-  const config = {
-    entity: 'items',
-    typeSlug,
-    icon: 'database',
-    displayField: 'title',
-    api: {
-      endpoint: 'admin-data',
-      getAction: 'get',
-      createAction: 'create',
-      updateAction: 'update'
-    }
-  }
-
-  const {
-    record,
-    fieldPermissions,
-    loading,
-    error,
-    refetch,
-    save,
-    delete: deleteRecord,
-    saving,
-    deleting
-  } = useEntityRecord('items', id, config)
-
-  // Extract schema and view from the record itself
-  const schema = record?.design_schema || null
-  const resolvedDetailView = viewSlug
-    ? schema?.views?.[viewSlug] || schema?.views?.default_detail
-    : schema?.views?.default_detail
-  const view = resolvedDetailView || null
-
-  // Derive display title
-  const displayField = schema?.display_field || config.displayField
-  const FALLBACK_FIELDS = ['full_name', 'display_name', 'name', 'title', 'slug', 'email']
-  const recordTitle = record?.[displayField]
-    ?? FALLBACK_FIELDS.map(f => record?.[f]).find(v => v != null)
-    ?? 'Untitled'
-
-  // Lifted form state
-  const [formData, setFormData] = useState<Record<string, any>>({})
-
-  useEffect(() => {
-    if (record && view) {
-      const initialData: Record<string, any> = {}
-      view.sections?.forEach((section: any) => {
-        const fieldNames = Array.isArray(section.fields) ? section.fields : Object.keys(section.fields || {})
-        fieldNames.forEach((fieldName: string) => {
-          const fieldDef = schema?.fields?.[fieldName]
-          if (fieldDef?.system) {
-            initialData[fieldName] = record[fieldName]
-          } else {
-            initialData[fieldName] = record.data?.[fieldName]
-          }
-        })
-      })
-      setFormData(initialData)
-    } else if (isCreating) {
-      setFormData({})
-    }
-  }, [record, isCreating, view, schema])
-
-  const handleFieldChange = (key: string, value: any) => {
-    setFormData((prev) => ({ ...prev, [key]: value }))
-  }
-
-  const handleEdit = () => {
-    setSearchParams({ edit: 'true' })
-  }
-
-  const handleCancel = () => {
-    if (isCreating) {
-      navigate(-1)
-    } else {
-      setSearchParams({})
-      if (record && view) {
-        const initialData: Record<string, any> = {}
-        view.sections?.forEach((section: any) => {
-          const fieldNames = Array.isArray(section.fields) ? section.fields : Object.keys(section.fields || {})
-          fieldNames.forEach((fieldName: string) => {
-            const fieldDef = schema?.fields?.[fieldName]
-            if (fieldDef?.system) {
-              initialData[fieldName] = record[fieldName]
-            } else {
-              initialData[fieldName] = record.data?.[fieldName]
-            }
-          })
-        })
-        setFormData(initialData)
-      }
-    }
-  }
-
-  const handleSave = async () => {
-    try {
-      await save(formData)
-      if (isCreating) {
-        navigate(-1)
-      } else {
-        setSearchParams({})
-      }
-    } catch (err) {
-      console.error('Save failed:', err)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (window.confirm('Are you sure you want to delete this record?')) {
-      try {
-        await deleteRecord()
-        navigate(-1)
-      } catch (err) {
-        console.error('Delete failed:', err)
-      }
-    }
-  }
-
-  if (loading) {
-    return (
-      <div className="p-8 text-center">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
-        <p className="mt-2 text-sm text-slate-500">Loading record...</p>
-      </div>
-    )
-  }
-
-  if (error && !isCreating) {
-    return (
-      <div className="p-8 text-center">
-        <h2 className="text-lg font-medium text-red-600">Error</h2>
-        <p className="mt-2 text-sm text-slate-500">{error}</p>
-      </div>
-    )
-  }
-
-  if (!schema && !isCreating) {
-    return (
-      <div className="p-8 text-center">
-        <h2 className="text-lg font-medium text-slate-900">No schema available</h2>
-        <p className="mt-2 text-sm text-slate-500">This record does not have a design_schema.</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      <DataDetailHeader
-        entity="items"
-        title={isCreating ? `New ${typeSlug}` : recordTitle}
-        icon="database"
-        isEditing={isEditing}
-        isCreating={isCreating}
-        saving={saving}
-        deleting={deleting}
-        onEdit={handleEdit}
-        onCancel={handleCancel}
-        onSave={handleSave}
-        onDelete={!isCreating ? handleDelete : undefined}
-      />
-
-      {schema && view && (
-        <SchemaDetailForm
-          schema={schema}
-          view={view}
-          record={record}
-          isEditing={isEditing}
-          isCreating={isCreating}
-          permissions={fieldPermissions}
-          formData={formData}
-          onFieldChange={handleFieldChange}
-        />
-      )}
-    </div>
-  )
-}

package/.framework/src/components/app-shell/GenericListPage.tsx

@@ -1,116 +0,0 @@
-import { useListSchema } from '../../hooks/useListSchema'
-import { useEntityList } from '../../hooks/useEntityList'
-import { DataHeader } from '../runtime/DataHeader'
-import { DataStats } from '../runtime/DataStats'
-import { DataFilters } from '../runtime/DataFilters'
-import { DataTable } from '../runtime/DataTable'
-
-interface GenericListPageProps {
-  typeSlug: string
-  viewSlug?: string
-  appPrefix: string
-  detailPath: string
-}
-
-/**
- * Schema-driven list page for the Generic App Shell.
- * Resolves the type's design_schema and renders using the specified view
- * (or default_list if not specified).
- */
-export function GenericListPage({ typeSlug, viewSlug, appPrefix, detailPath }: GenericListPageProps) {
-  const resolvedViewSlug = viewSlug || 'default_list'
-
-  // Resolve schema and view — uses the same hook as admin runtime
-  const { schema, view, loading: schemaLoading, error: schemaError } = useListSchema({
-    entity: 'items',
-    viewSlug: resolvedViewSlug
-  })
-
-  // Build config from resolved schema + view
-  const config = view && schema ? {
-    entity: 'items',
-    typeSlug,
-    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('items', config)
-
-  if (schemaLoading) {
-    return (
-      <div className="p-8 text-center">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
-        <p className="mt-2 text-sm text-slate-500">Loading schema...</p>
-      </div>
-    )
-  }
-
-  if (schemaError || !config) {
-    return (
-      <div className="p-8 text-center">
-        <h2 className="text-lg font-medium text-red-600">Error</h2>
-        <p className="mt-2 text-sm text-slate-500">{schemaError || 'Failed to load entity configuration'}</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-6">
-      <DataHeader
-        title={schema?.fields ? Object.keys(schema.fields).length > 0 ? (view as any)?.label || typeSlug : typeSlug : typeSlug}
-        icon={config.icon}
-        description={`Manage ${typeSlug}`}
-        newButtonHref={`${appPrefix}/${detailPath}/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="items"
-        emptyMessage={`No ${typeSlug} found`}
-        emptyIcon={config.icon}
-      />
-    </div>
-  )
-}