spine-framework 0.2.1 → 1.0.0

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

@@ -1,213 +0,0 @@
-/**
- * @component AgentView
- * @audience installer
- * @layer component
- * @stability stable
- *
- * Agent View toggle component for exposing raw API data and code examples.
- * Provides agents (and developers) with:
- * - Raw JSON of current record/page data
- * - Copy-pasteable API calls (curl/fetch)
- * - Equivalent CLI commands
- *
- * **Usage:**
- * ```tsx
- * <AgentView
- *   data={recordData}
- *   endpoint="/.netlify/functions/items"
- *   method="GET"
- *   query={{ id: recordId }}
- * />
- * ```
- *
- * **Features:**
- * - Collapsible panel (closed by default)
- * - Copy to clipboard buttons
- * - Syntax highlighting for JSON
- * - Responsive layout
- *
- * @seeAlso hooks/useApi.ts (API call logging)
- * @seeAlso pages/admin/* (admin pages using this component)
- */
-
-import React, { useState, useEffect } from 'react'
-import { Code, Terminal, Copy, Check, ChevronDown, ChevronUp } from 'lucide-react'
-
-interface AgentViewProps {
-  /** The raw data object to display */
-  data: any
-  /** API endpoint path */
-  endpoint: string
-  /** HTTP method */
-  method?: 'GET' | 'POST' | 'PATCH' | 'DELETE'
-  /** Query parameters used */
-  query?: Record<string, any>
-  /** Request body (for POST/PATCH) */
-  body?: any
-  /** Optional title override */
-  title?: string
-}
-
-export function AgentView({
-  data,
-  endpoint,
-  method = 'GET',
-  query,
-  body,
-  title = 'Agent View'
-}: AgentViewProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [copied, setCopied] = useState<string | null>(null)
-
-  // Build API URL
-  const baseUrl = window.location.origin
-  const fullUrl = `${baseUrl}${endpoint}${query ? '?' + new URLSearchParams(query).toString() : ''}`
-
-  // Generate curl command
-  const curlCmd = `curl -X ${method} \\
-  ${method !== 'GET' ? `-H "Content-Type: application/json" \\
-  ` : ''}${baseUrl}${endpoint}${query ? '?' + new URLSearchParams(query).toString() : ''}${method !== 'GET' && body ? ` \\
-  -d '${JSON.stringify(body, null, 2)}'` : ''}`
-
-  // Generate fetch code
-  const fetchCode = `fetch('${baseUrl}${endpoint}${query ? '?' + new URLSearchParams(query).toString() : ''}', {
-  method: '${method}',${method !== 'GET' ? `
-  headers: { 'Content-Type': 'application/json' },` : ''}${method !== 'GET' && body ? `
-  body: JSON.stringify(${JSON.stringify(body, null, 2).replace(/\n/g, '\n  ')})` : ''}
-})
-  .then(r => r.json())
-  .then(data => console.log(data))`
-
-  // Generate CLI command
-  const cliCmd = `spine ${endpoint.replace('/.netlify/functions/', '').replace(/\//g, ' ')} ${query?.id || query?.slug || ''}${method === 'POST' && body ? ` --data '${JSON.stringify(body)}'` : ''}${method === 'PATCH' && body ? ` --update '${JSON.stringify(body)}'` : ''}${method === 'DELETE' ? ' --delete' : ''}`
-
-  const handleCopy = (text: string, key: string) => {
-    navigator.clipboard.writeText(text)
-    setCopied(key)
-    setTimeout(() => setCopied(null), 2000)
-  }
-
-  return (
-    <div className="mt-6 border border-gray-200 rounded-lg bg-gray-50">
-      {/* Header */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-gray-100 transition-colors"
-      >
-        <div className="flex items-center gap-2">
-          <Terminal className="w-4 h-4 text-gray-600" />
-          <span className="font-medium text-gray-700">{title}</span>
-          <span className="text-xs text-gray-500">(for agents & developers)</span>
-        </div>
-        {isOpen ? (
-          <ChevronUp className="w-4 h-4 text-gray-500" />
-        ) : (
-          <ChevronDown className="w-4 h-4 text-gray-500" />
-        )}
-      </button>
-
-      {/* Content */}
-      {isOpen && (
-        <div className="border-t border-gray-200">
-          {/* API Info */}
-          <div className="px-4 py-3 bg-blue-50 border-b border-blue-100">
-            <div className="flex items-center gap-2 text-sm text-blue-800">
-              <span className="font-mono font-bold">{method}</span>
-              <span className="font-mono">{endpoint}</span>
-              {query && (
-                <span className="text-blue-600">
-                  with query: {JSON.stringify(query)}
-                </span>
-              )}
-            </div>
-          </div>
-
-          <div className="p-4 space-y-4">
-            {/* Raw JSON */}
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-2 text-sm font-medium text-gray-700">
-                  <Code className="w-4 h-4" />
-                  Response JSON
-                </div>
-                <button
-                  onClick={() => handleCopy(JSON.stringify(data, null, 2), 'json')}
-                  className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
-                >
-                  {copied === 'json' ? (
-                    <Check className="w-3 h-3" />
-                  ) : (
-                    <Copy className="w-3 h-3" />
-                  )}
-                  {copied === 'json' ? 'Copied!' : 'Copy'}
-                </button>
-              </div>
-              <pre className="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-auto max-h-64 font-mono">
-                {JSON.stringify(data, null, 2)}
-              </pre>
-            </div>
-
-            {/* Code Examples */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-              {/* cURL */}
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <div className="text-sm font-medium text-gray-700">cURL</div>
-                  <button
-                    onClick={() => handleCopy(curlCmd, 'curl')}
-                    className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
-                  >
-                    {copied === 'curl' ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
-                    {copied === 'curl' ? 'Copied!' : 'Copy'}
-                  </button>
-                </div>
-                <pre className="bg-gray-800 text-gray-100 p-3 rounded text-xs overflow-auto max-h-32 font-mono">
-                  {curlCmd}
-                </pre>
-              </div>
-
-              {/* Fetch */}
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <div className="text-sm font-medium text-gray-700">JavaScript Fetch</div>
-                  <button
-                    onClick={() => handleCopy(fetchCode, 'fetch')}
-                    className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
-                  >
-                    {copied === 'fetch' ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
-                    {copied === 'fetch' ? 'Copied!' : 'Copy'}
-                  </button>
-                </div>
-                <pre className="bg-gray-800 text-gray-100 p-3 rounded text-xs overflow-auto max-h-32 font-mono">
-                  {fetchCode}
-                </pre>
-              </div>
-            </div>
-
-            {/* CLI Command */}
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-2 text-sm font-medium text-gray-700">
-                  <Terminal className="w-4 h-4" />
-                  Spine CLI
-                </div>
-                <button
-                  onClick={() => handleCopy(cliCmd, 'cli')}
-                  className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
-                >
-                  {copied === 'cli' ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
-                  {copied === 'cli' ? 'Copied!' : 'Copy'}
-                </button>
-              </div>
-              <pre className="bg-green-900 text-green-100 p-3 rounded text-xs overflow-auto font-mono">
-                {cliCmd}
-              </pre>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default AgentView

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

@@ -1,478 +0,0 @@
-/**
- * @module src/components/shared/FieldRenderer
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Low-level field rendering primitive. Given a `FieldDefinition` and a
- * current value, renders the appropriate input widget (edit mode) or
- * display element (read-only mode).
- *
- * **Render type resolution** (`resolveRenderType`):
- * 1. If `displayType` is set (from the view config), it maps to a canonical
- *    render type first — this lets a view override how a field looks without
- *    changing the underlying `FieldDefinition`.
- * 2. Falls back to `field.data_type`.
- *
- * **Supported render types:**
- * `text`, `textarea`, `email`, `phone`, `url`, `number`, `date`,
- * `datetime`, `select`, `multiselect`, `radio`, `checkbox`, `json`,
- * `file`, `color`, `range`
- *
- * **Error display:** when `error` is set, a red helper text is shown below
- * the field and `border-red-500` is applied where applicable.
- *
- * **Label + description:** rendered above / below the input respectively,
- * with a red `*` suffix when `field.required` is true.
- *
- * @seeAlso src/components/shared/SchemaFields.tsx (mounts this component)
- * @seeAlso src/types/types.ts (FieldDefinition)
- */
-
-import React from 'react'
-import { FieldDefinition } from '../../types/types'
-
-/**
- * Props for `FieldRenderer`.
- *
- * @prop field - Full field definition including data_type, options, validation
- * @prop value - Current controlled value
- * @prop onChange - Value change callback (omit or pass `undefined` for read-only)
- * @prop onBlur - Optional blur callback for validation triggers
- * @prop readonly - If true, renders a display element instead of an input
- * @prop error - Validation error message to display below the field
- * @prop displayType - View-config widget override (e.g. `'textarea'`, `'select'`)
- */
-interface FieldRendererProps {
-  field: FieldDefinition
-  value: any
-  onChange?: (value: any) => void
-  onBlur?: () => void
-  readonly?: boolean
-  error?: string
-  displayType?: string // From view config — controls rendering without polluting field data contract
-}
-
-/**
- * Resolves the canonical render type for a field.
- *
- * `displayType` (from view config) takes precedence over `field.data_type`
- * so view authors can choose a different widget without changing the
- * underlying schema.
- *
- * @param field - Field definition
- * @param displayType - Optional view-config widget override
- * @returns Canonical render type string (e.g. `'text'`, `'select'`, `'checkbox'`)
- */
-function resolveRenderType(field: FieldDefinition, displayType?: string): string {
-  // displayType from view config overrides data_type for rendering decisions
-  if (displayType) {
-    switch (displayType) {
-      case 'textarea':
-      case 'rich_text':
-        return 'textarea'
-      case 'select':
-        return 'select'
-      case 'multiselect':
-        return 'multiselect'
-      case 'radio':
-        return 'radio'
-      case 'checkbox':
-      case 'switch':
-        return 'checkbox'
-      case 'date_picker':
-        return 'date'
-      case 'datetime_picker':
-        return 'datetime'
-      case 'color_picker':
-        return 'color'
-      case 'range_slider':
-        return 'range'
-      case 'file_upload':
-      case 'image_upload':
-        return 'file'
-    }
-  }
-  // Fall back to data_type
-  switch (field.data_type) {
-    case 'textarea':
-    case 'rich_text':
-      return 'textarea'
-    case 'email':
-      return 'email'
-    case 'phone':
-      return 'phone'
-    case 'url':
-      return 'url'
-    case 'number':
-    case 'currency':
-    case 'range':
-      return 'number'
-    case 'date':
-      return 'date'
-    case 'datetime':
-      return 'datetime'
-    case 'boolean':
-    case 'checkbox':
-      return 'checkbox'
-    case 'select':
-      return 'select'
-    case 'multiselect':
-      return 'multiselect'
-    case 'radio':
-      return 'radio'
-    case 'color':
-      return 'color'
-    case 'file':
-    case 'image':
-      return 'file'
-    case 'json':
-      return 'json'
-    default:
-      return 'text'
-  }
-}
-
-/**
- * Renders a single schema field as an input widget or read-only display.
- *
- * @param props - `FieldRendererProps`
- * @returns Label + field widget + description + error message
- * @sideEffects none (delegates changes to `onChange`)
- */
-export function FieldRenderer({ field, value, onChange, readonly = false, error, displayType }: FieldRendererProps) {
-  const renderType = resolveRenderType(field, displayType)
-
-  const renderField = () => {
-    switch (renderType) {
-      case 'text':
-        return readonly ? (
-          <div className={`text-slate-900 ${error ? 'border-red-500' : ''}`}>
-            {value || <span className="text-slate-400 italic">—</span>}
-          </div>
-        ) : (
-          <input
-            type="text"
-            value={value || ''}
-            onChange={(e) => onChange?.(e.target.value)}
-            className={`input ${error ? 'border-red-500' : ''}`}
-            placeholder={field.placeholder}
-          />
-        )
-
-      case 'textarea':
-        return readonly ? (
-          <div className={`text-slate-900 whitespace-pre-wrap ${error ? 'border-red-500' : ''}`}>
-            {value || <span className="text-slate-400 italic">—</span>}
-          </div>
-        ) : (
-          <textarea
-            value={value || ''}
-            onChange={(e) => onChange?.(e.target.value)}
-            className={`textarea ${error ? 'border-red-500' : ''}`}
-            placeholder={field.placeholder}
-            rows={field.rows || 3}
-          />
-        )
-
-      case 'email':
-        return readonly ? (
-          <div className={`text-slate-900 ${error ? 'border-red-500' : ''}`}>
-            {value ? <a href={`mailto:${value}`} className="text-blue-600 hover:text-blue-800">{value}</a> : <span className="text-slate-400 italic">—</span>}
-          </div>
-        ) : (
-          <input
-            type="email"
-            value={value || ''}
-            onChange={(e) => onChange?.(e.target.value)}
-            className={`input ${error ? 'border-red-500' : ''}`}
-            placeholder={field.placeholder}
-          />
-        )
-
-      case 'phone':
-        return readonly ? (
-          <div className={`text-slate-900 ${error ? 'border-red-500' : ''}`}>
-            {value || <span className="text-slate-400 italic">—</span>}
-          </div>
-        ) : (
-          <input
-            type="tel"
-            value={value || ''}
-            onChange={(e) => onChange?.(e.target.value)}
-            className={`input ${error ? 'border-red-500' : ''}`}
-            placeholder={field.placeholder}
-          />
-        )
-
-      case 'number':
-        return (
-          <input
-            type="number"
-            value={value ?? ''}
-            onChange={(e) => onChange?.(e.target.value ? Number(e.target.value) : null)}
-            readOnly={readonly}
-            className={`input ${error ? 'border-red-500' : ''}`}
-            placeholder={field.placeholder}
-            min={field.min ?? field.validation?.min}
-            max={field.max ?? field.validation?.max}
-            step={field.step ?? field.validation?.step}
-          />
-        )
-
-      case 'date':
-        return (
-          <input
-            type="date"
-            value={value ? new Date(value).toISOString().split('T')[0] : ''}
-            onChange={(e) => onChange?.(e.target.value || null)}
-            readOnly={readonly}
-            className={`input ${error ? 'border-red-500' : ''}`}
-          />
-        )
-
-      case 'datetime':
-        return (
-          <input
-            type="datetime-local"
-            value={value ? new Date(value).toISOString().slice(0, 16) : ''}
-            onChange={(e) => onChange?.(e.target.value || null)}
-            readOnly={readonly}
-            className={`input ${error ? 'border-red-500' : ''}`}
-          />
-        )
-
-      case 'select':
-        return readonly ? (
-          <div className={`text-slate-900 ${error ? 'border-red-500' : ''}`}>
-            {(() => {
-              if (!value) return <span className="text-slate-400 italic">—</span>
-              const option = field.options?.find((opt) => {
-                const optVal = typeof opt === 'string' ? opt : opt.value
-                return optVal === value
-              })
-              return typeof option === 'string' ? option : option?.label || value
-            })()}
-          </div>
-        ) : (
-          <select
-            value={value || ''}
-            onChange={(e) => onChange?.(e.target.value)}
-            className={`select ${error ? 'border-red-500' : ''}`}
-          >
-            <option value="">Select...</option>
-            {field.options?.map((option) => {
-              const optVal = typeof option === 'string' ? option : option.value
-              const optLabel = typeof option === 'string' ? option : option.label
-              return (
-                <option key={optVal} value={optVal}>
-                  {optLabel}
-                </option>
-              )
-            })}
-          </select>
-        )
-
-      case 'multiselect':
-        return (
-          <div className="space-y-2">
-            {field.options?.map((option) => {
-              const optionValue = typeof option === 'string' ? option : option.value
-              const optionLabel = typeof option === 'string' ? option : option.label
-              return (
-                <label key={optionValue} className="flex items-center">
-                  <input
-                    type="checkbox"
-                    checked={Array.isArray(value) && value.includes(optionValue)}
-                    onChange={(e) => {
-                      const currentValue = Array.isArray(value) ? value : []
-                      if (e.target.checked) {
-                        onChange?.([...currentValue, optionValue])
-                      } else {
-                        onChange?.(currentValue.filter((v: string) => v !== optionValue))
-                      }
-                    }}
-                    disabled={readonly}
-                    className="mr-2"
-                  />
-                  <span>{optionLabel}</span>
-                </label>
-              )
-            })}
-          </div>
-        )
-
-      case 'radio':
-        return (
-          <div className="space-y-2">
-            {field.options?.map((option) => {
-              const optionValue = typeof option === 'string' ? option : option.value
-              const optionLabel = typeof option === 'string' ? option : option.label
-              return (
-                <label key={optionValue} className="flex items-center">
-                  <input
-                    type="radio"
-                    name={field.name}
-                    value={optionValue}
-                    checked={value === optionValue}
-                    onChange={(e) => onChange?.(e.target.value)}
-                    disabled={readonly}
-                    className="mr-2"
-                  />
-                  <span>{optionLabel}</span>
-                </label>
-              )
-            })}
-          </div>
-        )
-
-      case 'checkbox':
-        return readonly ? (
-          <div className={`text-slate-900 ${error ? 'border-red-500' : ''}`}>
-            {Boolean(value) ? 'Yes' : 'No'}
-          </div>
-        ) : (
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={Boolean(value)}
-              onChange={(e) => onChange?.(e.target.checked)}
-              className="mr-2"
-            />
-            <span>{field.label}</span>
-          </label>
-        )
-
-      case 'json':
-        return readonly ? (
-          <pre className="bg-slate-100 p-3 rounded-md text-sm overflow-x-auto">
-            {JSON.stringify(value, null, 2)}
-          </pre>
-        ) : (
-          <textarea
-            value={typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
-            onChange={(e) => {
-              try {
-                onChange?.(JSON.parse(e.target.value))
-              } catch {
-                // Invalid JSON, don't update
-              }
-            }}
-            className={`textarea font-mono text-sm ${error ? 'border-red-500' : ''}`}
-            rows={field.rows || 6}
-            placeholder="Enter valid JSON"
-          />
-        )
-
-      case 'url':
-        return readonly ? (
-          <div className={`text-slate-900 ${error ? 'border-red-500' : ''}`}>
-            {value ? <a href={value} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800">{value}</a> : <span className="text-slate-400 italic">—</span>}
-          </div>
-        ) : (
-          <input
-            type="url"
-            value={value || ''}
-            onChange={(e) => onChange?.(e.target.value)}
-            className={`input ${error ? 'border-red-500' : ''}`}
-            placeholder={field.placeholder || 'https://example.com'}
-          />
-        )
-
-      case 'file':
-        return readonly ? (
-          value ? (
-            <div className="text-sm">
-              <a href={value} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800">
-                View File
-              </a>
-            </div>
-          ) : (
-            <span className="text-slate-500">No file</span>
-          )
-        ) : (
-          <input
-            type="file"
-            onChange={(e) => {
-              const file = e.target.files?.[0]
-              if (file) onChange?.(file.name)
-            }}
-            className={`input ${error ? 'border-red-500' : ''}`}
-          />
-        )
-
-      case 'color':
-        return (
-          <div className="flex items-center space-x-2">
-            <input
-              type="color"
-              value={value || '#000000'}
-              onChange={(e) => onChange?.(e.target.value)}
-              disabled={readonly}
-              className="h-10 w-20"
-            />
-            <input
-              type="text"
-              value={value || ''}
-              onChange={(e) => onChange?.(e.target.value)}
-              readOnly={readonly}
-              className={`input flex-1 ${error ? 'border-red-500' : ''}`}
-              placeholder="#000000"
-            />
-          </div>
-        )
-
-      case 'range':
-        return (
-          <div className="space-y-2">
-            <input
-              type="range"
-              value={value ?? field.min ?? field.validation?.min ?? 0}
-              onChange={(e) => onChange?.(Number(e.target.value))}
-              disabled={readonly}
-              className="w-full"
-              min={field.min ?? field.validation?.min}
-              max={field.max ?? field.validation?.max}
-              step={field.step ?? field.validation?.step}
-            />
-            <div className="text-sm text-slate-600">
-              Value: {value ?? field.min ?? 0}
-            </div>
-          </div>
-        )
-
-      default:
-        return (
-          <input
-            type="text"
-            value={value || ''}
-            onChange={(e) => onChange?.(e.target.value)}
-            readOnly={readonly}
-            className={`input ${error ? 'border-red-500' : ''}`}
-            placeholder={field.placeholder}
-          />
-        )
-    }
-  }
-
-  return (
-    <div className="space-y-1">
-      {field.label && (
-        <label className="label">
-          {field.label}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
-        </label>
-      )}
-      
-      {renderField()}
-      
-      {field.description && (
-        <p className="text-xs text-slate-500">{field.description}</p>
-      )}
-      
-      {error && (
-        <p className="text-xs text-red-600">{error}</p>
-      )}
-    </div>
-  )
-}