spine-framework 0.2.1 → 1.0.0

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

@@ -1,308 +0,0 @@
-/**
- * @module src/components/ui/ItemListView
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Switchable item view widget and page shell.
- *
- * **`ItemListView`** — renders items in either a compact `ItemGrid` or a
- * full `DataTable` view, toggled by icon buttons. Derives unique type
- * filter options from the items array and builds a fixed table column
- * set. The primary display field is resolved from the first `text` or
- * `textarea` field in the item type's `design_schema`.
- *
- * **`ItemListPage`** — wraps `ItemListView` with a page-level title and
- * description header. Use as a standalone page component.
- *
- * @seeAlso src/components/ui/ItemCard.tsx
- * @seeAlso src/components/ui/DataTable.tsx
- * @seeAlso src/types/types.ts (Item, ItemType)
- */
-
-import React, { useState } from 'react'
-import { Item, ItemType } from '../../types/types'
-import { DataTable } from './DataTable'
-import { ItemCard, ItemGrid } from './ItemCard'
-import { Badge } from './badge'
-import { Button } from './button'
-import { Squares2X2Icon, List, Plus } from 'lucide-react';
-import { formatDateTime } from '../../lib/utils'
-
-/**
- * Props for `ItemListView`.
- *
- * @prop items - Typed item array with resolved `item_type`
- * @prop loading - Shows spinner while fetching
- * @prop onEdit / onDelete / onView - Row/card action callbacks
- * @prop onCreate - Create button callback
- * @prop searchable - Enables search in table view (default: `true`)
- * @prop filterable - Enables column filters in table view (default: `true`)
- * @prop emptyMessage - Empty-state label
- * @prop showCreateButton - Shows the create button (default: `true`)
- * @prop createButtonText - Create button label (default: `'Create Item'`)
- */
-interface ItemListViewProps {
-  items: (Item & { item_type: ItemType })[]
-  loading?: boolean
-  onEdit?: (item: Item) => void
-  onDelete?: (item: Item) => void
-  onView?: (item: Item) => void
-  onCreate?: () => void
-  searchable?: boolean
-  filterable?: boolean
-  emptyMessage?: string
-  showCreateButton?: boolean
-  createButtonText?: string
-}
-
-/**
- * Switchable grid/table item view.
- *
- * @param props - `ItemListViewProps`
- * @returns Header with view-mode toggle + `ItemGrid` or `DataTable`
- * @sideEffects none (delegates actions and creation to prop callbacks)
- */
-export function ItemListView({
-  items,
-  loading = false,
-  onEdit,
-  onDelete,
-  onView,
-  onCreate,
-  searchable = true,
-  filterable = true,
-  emptyMessage = 'No items found',
-  showCreateButton = true,
-  createButtonText = 'Create Item'
-}: ItemListViewProps) {
-  const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid')
-
-  // Get unique types for filtering
-  const typesMap = new Map<string, ItemType>()
-  items.forEach(item => {
-    typesMap.set(item.item_type.id, item.item_type)
-  })
-  const types = Array.from(typesMap.values()).map(type => ({
-    value: type.id,
-    label: type.name
-  }))
-
-  // Table columns
-  const tableColumns = [
-    {
-      key: 'data' as const,
-      title: 'Item',
-      sortable: true,
-      render: (value: Record<string, any>, item: Item & { item_type: ItemType }) => {
-        const primaryField = item.item_type.design_schema?.fields ? Object.entries(item.item_type.design_schema.fields).find(([_, f]: [string, any]) => 
-          f.data_type === 'text' || f.data_type === 'textarea'
-        ) : null
-        const fieldEntry = primaryField ? primaryField : null
-        const fieldName = fieldEntry ? fieldEntry[0] : 'name'
-        const displayValue = value[fieldName] || 'Untitled Item'
-        
-        return (
-          <div>
-            <div className="font-medium text-slate-900">{displayValue}</div>
-            <div className="text-sm text-slate-500">
-              <Badge variant={item.item_type.is_active ? 'success' : 'default'}>
-                {item.item_type.name}
-              </Badge>
-            </div>
-          </div>
-        )
-      }
-    },
-    {
-      key: 'item_type' as const,
-      title: 'Type',
-      filterable: true,
-      filterOptions: types,
-      render: (value: ItemType) => (
-        <Badge variant={value.is_active ? 'success' : 'default'}>
-          {value.name}
-        </Badge>
-      )
-    },
-    {
-      key: 'created_at' as const,
-      title: 'Created',
-      sortable: true,
-      render: (value: string) => formatDateTime(value)
-    },
-    {
-      key: 'updated_at' as const,
-      title: 'Updated',
-      sortable: true,
-      render: (value: string) => formatDateTime(value)
-    },
-    {
-      key: 'id' as const,
-      title: 'Actions',
-      render: (_: any, item: Item & { item_type: ItemType }) => (
-        <div className="flex items-center space-x-2">
-          {onView && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onView(item)}
-            >
-              View
-            </Button>
-          )}
-          {onEdit && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onEdit(item)}
-            >
-              Edit
-            </Button>
-          )}
-        </div>
-      )
-    }
-  ]
-
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-4">
-          <h2 className="text-lg font-medium text-slate-900">
-            Items ({items.length})
-          </h2>
-          
-          {/* View Mode Toggle */}
-          <div className="flex items-center bg-slate-100 rounded-lg p-1">
-            <button
-              onClick={() => setViewMode('grid')}
-              className={`
-                px-3 py-1.5 rounded-md text-sm font-medium transition-colors
-                ${viewMode === 'grid'
-                  ? 'bg-white text-slate-900 shadow-sm'
-                  : 'text-slate-600 hover:text-slate-900'
-                }
-              `}
-            >
-              <Squares2X2Icon className="h-4 w-4" />
-            </button>
-            <button
-              onClick={() => setViewMode('table')}
-              className={`
-                px-3 py-1.5 rounded-md text-sm font-medium transition-colors
-                ${viewMode === 'table'
-                  ? 'bg-white text-slate-900 shadow-sm'
-                  : 'text-slate-600 hover:text-slate-900'
-                }
-              `}
-            >
-              <List className="h-4 w-4" />
-            </button>
-          </div>
-        </div>
-        
-        {showCreateButton && onCreate && (
-          <Button onClick={onCreate}>
-            <Plus className="h-4 w-4 mr-2" />
-            {createButtonText}
-          </Button>
-        )}
-      </div>
-
-      {/* Content */}
-      {viewMode === 'grid' ? (
-        <ItemGrid
-          items={items}
-          loading={loading}
-          onEdit={onEdit}
-          onDelete={onDelete}
-          onView={onView}
-          compact={true}
-          emptyMessage={emptyMessage}
-        />
-      ) : (
-        <DataTable
-          data={items}
-          columns={tableColumns as any}
-          loading={loading}
-          searchable={searchable}
-          filterable={filterable}
-          emptyMessage={emptyMessage}
-        />
-      )}
-    </div>
-  )
-}
-
-/**
- * Props for `ItemListPage`.
- *
- * @prop title - Page heading (default: `'Items'`)
- * @prop description - Page subtitle (default: `'Manage and organize your items'`)
- * (other props same as `ItemListViewProps`)
- */
-interface ItemListPageProps {
-  items: (Item & { item_type: ItemType })[]
-  loading?: boolean
-  onEdit?: (item: Item) => void
-  onDelete?: (item: Item) => void
-  onView?: (item: Item) => void
-  onCreate?: () => void
-  searchable?: boolean
-  filterable?: boolean
-  emptyMessage?: string
-  showCreateButton?: boolean
-  createButtonText?: string
-  title?: string
-  description?: string
-}
-
-/**
- * Full item list page with title header and switchable view.
- *
- * @param props - `ItemListPageProps`
- * @returns Page header + `ItemListView`
- * @sideEffects none (pure rendering)
- */
-export function ItemListPage({
-  items,
-  loading = false,
-  onEdit,
-  onDelete,
-  onView,
-  onCreate,
-  searchable = true,
-  filterable = true,
-  emptyMessage = 'No items found',
-  showCreateButton = true,
-  createButtonText = 'Create Item',
-  title = 'Items',
-  description = 'Manage and organize your items'
-}: ItemListPageProps) {
-  return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <div>
-        <h1 className="text-2xl font-bold text-slate-900">{title}</h1>
-        <p className="mt-1 text-sm text-slate-600">{description}</p>
-      </div>
-
-      {/* Item List View */}
-      <ItemListView
-        items={items}
-        loading={loading}
-        onEdit={onEdit}
-        onDelete={onDelete}
-        onView={onView}
-        onCreate={onCreate}
-        searchable={searchable}
-        filterable={filterable}
-        emptyMessage={emptyMessage}
-        showCreateButton={showCreateButton}
-        createButtonText={createButtonText}
-      />
-    </div>
-  )
-}

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

@@ -1,52 +0,0 @@
-/**
- * @module src/components/ui/LoadingSpinner
- * @audience installer
- * @layer frontend-component
- * @stability stable
- *
- * Animated CSS spinner used to indicate loading state inline or as a
- * centred overlay. Uses `border-t-blue-600` as the active segment colour
- * and `border-slate-200` for the track.
- *
- * @seeAlso src/lib/utils.ts (cn)
- */
-
-import React from 'react'
-import { Loader2 } from 'lucide-react'
-import { cn } from '../../lib/utils'
-
-/**
- * Props for `LoadingSpinner`.
- *
- * @prop size - Diameter: `'sm'` (16px), `'md'` (24px), `'lg'` (32px)
- * @prop className - Additional Tailwind classes
- */
-interface LoadingSpinnerProps {
-  className?: string
-  size?: 'sm' | 'md' | 'lg'
-}
-
-/**
- * Inline animated spinner.
- *
- * @param props - `LoadingSpinnerProps`
- * @returns `<Loader2>` styled as a spinning ring
- * @sideEffects none (pure rendering)
- */
-export function LoadingSpinner({ className, size = 'md' }: LoadingSpinnerProps) {
-  const sizeClasses = {
-    sm: 'h-4 w-4',
-    md: 'h-6 w-6',
-    lg: 'h-8 w-8',
-  }
-
-  return (
-    <Loader2
-      className={cn(
-        'animate-spin',
-        sizeClasses[size],
-        className
-      )}
-    />
-  )
-}

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

@@ -1,61 +0,0 @@
-import React from 'react'
-import { cn } from '../../lib/utils'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from './dialog'
-
-interface ModalProps {
-  isOpen: boolean
-  onClose: () => void
-  title?: string
-  description?: string
-  children: React.ReactNode
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-}
-
-export function Modal({
-  isOpen,
-  onClose,
-  title,
-  description,
-  children,
-  size = 'md',
-}: ModalProps) {
-  const sizeClasses = {
-    sm: 'max-w-md',
-    md: 'max-w-lg',
-    lg: 'max-w-2xl',
-    xl: 'max-w-4xl'
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className={cn(sizeClasses[size])}>
-        {(title || description) && (
-          <DialogHeader>
-            {title && <DialogTitle>{title}</DialogTitle>}
-            {description && <DialogDescription>{description}</DialogDescription>}
-          </DialogHeader>
-        )}
-        {children}
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-interface ModalFooterProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function ModalFooter({ children, className }: ModalFooterProps) {
-  return (
-    <div className={cn('flex justify-end gap-3 border-t px-6 py-4 mt-6', className)}>
-      {children}
-    </div>
-  )
-}

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

@@ -1,210 +0,0 @@
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
-import Placeholder from '@tiptap/extension-placeholder'
-import { createLowlight } from 'lowlight'
-import typescript from 'highlight.js/lib/languages/typescript'
-import javascript from 'highlight.js/lib/languages/javascript'
-import json from 'highlight.js/lib/languages/json'
-import bash from 'highlight.js/lib/languages/bash'
-import sql from 'highlight.js/lib/languages/sql'
-import { useEffect } from 'react'
-import {
-  Bold,
-  Italic,
-  Heading2,
-  Heading3,
-  List,
-  ListOrdered,
-  Code,
-  Code2,
-  Minus,
-} from 'lucide-react'
-import { cn } from '@core/lib/utils'
-
-const lowlight = createLowlight()
-lowlight.register('typescript', typescript)
-lowlight.register('javascript', javascript)
-lowlight.register('json', json)
-lowlight.register('bash', bash)
-lowlight.register('sql', sql)
-
-interface RichTextEditorProps {
-  value: string
-  onChange?: (html: string) => void
-  placeholder?: string
-  readonly?: boolean
-  className?: string
-  minHeight?: string
-}
-
-function ToolbarButton({
-  onClick,
-  active,
-  title,
-  children,
-}: {
-  onClick: () => void
-  active?: boolean
-  title: string
-  children: React.ReactNode
-}) {
-  return (
-    <button
-      type="button"
-      onMouseDown={(e) => { e.preventDefault(); onClick() }}
-      title={title}
-      className={cn(
-        'p-1.5 rounded text-sm transition-colors',
-        active
-          ? 'bg-primary/15 text-primary'
-          : 'text-muted-foreground hover:bg-accent hover:text-foreground'
-      )}
-    >
-      {children}
-    </button>
-  )
-}
-
-export function RichTextEditor({
-  value,
-  onChange,
-  placeholder = 'Write something…',
-  readonly = false,
-  className,
-  minHeight = '300px',
-}: RichTextEditorProps) {
-  const editor = useEditor({
-    extensions: [
-      StarterKit.configure({
-        codeBlock: false,
-      }),
-      CodeBlockLowlight.configure({ lowlight }),
-      Placeholder.configure({ placeholder }),
-    ],
-    content: value,
-    editable: !readonly,
-    onUpdate: ({ editor }) => {
-      onChange?.(editor.getHTML())
-    },
-  })
-
-  useEffect(() => {
-    if (!editor) return
-    const current = editor.getHTML()
-    if (current !== value) {
-      editor.commands.setContent(value || '', false)
-    }
-  }, [value, editor])
-
-  useEffect(() => {
-    if (editor) editor.setEditable(!readonly)
-  }, [readonly, editor])
-
-  if (readonly) {
-    return (
-      <div
-        className={cn(
-          'prose prose-sm dark:prose-invert max-w-none text-sm leading-relaxed',
-          'prose-pre:bg-muted prose-pre:border prose-pre:border-border prose-pre:rounded prose-pre:text-xs',
-          'prose-code:bg-muted prose-code:px-1 prose-code:rounded prose-code:text-xs prose-code:font-mono',
-          className
-        )}
-        dangerouslySetInnerHTML={{ __html: value || '' }}
-      />
-    )
-  }
-
-  return (
-    <div className={cn('border border-border rounded-md overflow-hidden', className)}>
-      {editor && (
-        <div className="flex flex-wrap items-center gap-0.5 px-2 py-1.5 border-b border-border bg-muted/30">
-          <ToolbarButton
-            onClick={() => editor.chain().focus().toggleBold().run()}
-            active={editor.isActive('bold')}
-            title="Bold"
-          >
-            <Bold size={14} />
-          </ToolbarButton>
-          <ToolbarButton
-            onClick={() => editor.chain().focus().toggleItalic().run()}
-            active={editor.isActive('italic')}
-            title="Italic"
-          >
-            <Italic size={14} />
-          </ToolbarButton>
-          <div className="w-px h-4 bg-border mx-0.5" />
-          <ToolbarButton
-            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-            active={editor.isActive('heading', { level: 2 })}
-            title="Heading 2"
-          >
-            <Heading2 size={14} />
-          </ToolbarButton>
-          <ToolbarButton
-            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-            active={editor.isActive('heading', { level: 3 })}
-            title="Heading 3"
-          >
-            <Heading3 size={14} />
-          </ToolbarButton>
-          <div className="w-px h-4 bg-border mx-0.5" />
-          <ToolbarButton
-            onClick={() => editor.chain().focus().toggleBulletList().run()}
-            active={editor.isActive('bulletList')}
-            title="Bullet list"
-          >
-            <List size={14} />
-          </ToolbarButton>
-          <ToolbarButton
-            onClick={() => editor.chain().focus().toggleOrderedList().run()}
-            active={editor.isActive('orderedList')}
-            title="Ordered list"
-          >
-            <ListOrdered size={14} />
-          </ToolbarButton>
-          <div className="w-px h-4 bg-border mx-0.5" />
-          <ToolbarButton
-            onClick={() => editor.chain().focus().toggleCode().run()}
-            active={editor.isActive('code')}
-            title="Inline code"
-          >
-            <Code size={14} />
-          </ToolbarButton>
-          <ToolbarButton
-            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-            active={editor.isActive('codeBlock')}
-            title="Code block"
-          >
-            <Code2 size={14} />
-          </ToolbarButton>
-          <div className="w-px h-4 bg-border mx-0.5" />
-          <ToolbarButton
-            onClick={() => editor.chain().focus().setHorizontalRule().run()}
-            active={false}
-            title="Horizontal rule"
-          >
-            <Minus size={14} />
-          </ToolbarButton>
-        </div>
-      )}
-      <EditorContent
-        editor={editor}
-        className={cn(
-          'px-3 py-2 text-sm focus-within:outline-none',
-          '[&_.ProseMirror]:outline-none [&_.ProseMirror]:min-h-[var(--editor-min-height)]',
-          '[&_.ProseMirror_pre]:bg-muted [&_.ProseMirror_pre]:border [&_.ProseMirror_pre]:border-border [&_.ProseMirror_pre]:rounded [&_.ProseMirror_pre]:p-3 [&_.ProseMirror_pre]:text-xs [&_.ProseMirror_pre]:font-mono [&_.ProseMirror_pre]:overflow-x-auto',
-          '[&_.ProseMirror_code]:bg-muted [&_.ProseMirror_code]:px-1 [&_.ProseMirror_code]:rounded [&_.ProseMirror_code]:text-xs [&_.ProseMirror_code]:font-mono',
-          '[&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground [&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none [&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left [&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0',
-          '[&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-5',
-          '[&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-5',
-          '[&_.ProseMirror_h2]:text-lg [&_.ProseMirror_h2]:font-semibold [&_.ProseMirror_h2]:mt-4 [&_.ProseMirror_h2]:mb-2',
-          '[&_.ProseMirror_h3]:text-base [&_.ProseMirror_h3]:font-semibold [&_.ProseMirror_h3]:mt-3 [&_.ProseMirror_h3]:mb-1',
-          '[&_.ProseMirror_blockquote]:border-l-2 [&_.ProseMirror_blockquote]:border-border [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_blockquote]:text-muted-foreground',
-          '[&_.ProseMirror_hr]:border-border [&_.ProseMirror_hr]:my-4'
-        )}
-        style={{ '--editor-min-height': minHeight } as React.CSSProperties}
-      />
-    </div>
-  )
-}