@opensaas/stack-ui 0.1.0

package/src/components/standalone/DeleteButton.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '../../primitives/button.js'
+import { ConfirmDialog } from '../ConfirmDialog.js'
+import { LoadingSpinner } from '../LoadingSpinner.js'
+
+export interface DeleteButtonProps {
+  onDelete: () => Promise<{ success: boolean; error?: string }>
+  itemName?: string
+  confirmTitle?: string
+  confirmMessage?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  buttonLabel?: string
+  variant?: 'danger' | 'warning'
+  buttonVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+  className?: string
+  disabled?: boolean
+}
+
+/**
+ * Standalone delete button with confirmation dialog
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <DeleteButton
+ *   onDelete={async () => {
+ *     await deletePost(postId);
+ *     return { success: true };
+ *   }}
+ *   itemName="post"
+ *   confirmMessage="This will permanently delete the post and all its comments."
+ * />
+ * ```
+ */
+export function DeleteButton({
+  onDelete,
+  itemName = 'item',
+  confirmTitle,
+  confirmMessage,
+  confirmLabel = 'Delete',
+  cancelLabel = 'Cancel',
+  buttonLabel = 'Delete',
+  variant = 'danger',
+  buttonVariant = 'destructive',
+  size = 'default',
+  className,
+  disabled = false,
+}: DeleteButtonProps) {
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [isPending, setIsPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleDelete = async () => {
+    setShowConfirm(false)
+    setIsPending(true)
+    setError(null)
+
+    try {
+      const result = await onDelete()
+      if (!result.success) {
+        setError(result.error || `Failed to delete ${itemName}`)
+      }
+    } catch (err: unknown) {
+      setError((err as Error).message || `Failed to delete ${itemName}`)
+    } finally {
+      setIsPending(false)
+    }
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant={buttonVariant}
+        size={size}
+        onClick={() => setShowConfirm(true)}
+        disabled={disabled || isPending}
+        className={className}
+      >
+        {isPending && (
+          <LoadingSpinner
+            size="sm"
+            className="border-primary-foreground border-t-transparent mr-2"
+          />
+        )}
+        {buttonLabel}
+      </Button>
+
+      {error && (
+        <div className="mt-2 bg-destructive/10 border border-destructive text-destructive rounded-lg p-3">
+          <p className="text-sm font-medium">{error}</p>
+        </div>
+      )}
+
+      <ConfirmDialog
+        isOpen={showConfirm}
+        title={confirmTitle || `Delete ${itemName}`}
+        message={
+          confirmMessage ||
+          `Are you sure you want to delete this ${itemName}? This action cannot be undone.`
+        }
+        confirmLabel={confirmLabel}
+        cancelLabel={cancelLabel}
+        variant={variant}
+        onConfirm={handleDelete}
+        onCancel={() => setShowConfirm(false)}
+      />
+    </>
+  )
+}

package/src/components/standalone/ItemCreateForm.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+import * as React from 'react'
+import { useState, useMemo } from 'react'
+import { FieldRenderer } from '../fields/FieldRenderer.js'
+import { LoadingSpinner } from '../LoadingSpinner.js'
+import { Button } from '../../primitives/button.js'
+import type { FieldConfig } from '@opensaas/stack-core'
+import { serializeFieldConfigs } from '../../lib/serializeFieldConfig.js'
+
+export interface ItemCreateFormProps<TData = Record<string, unknown>> {
+  fields: Record<string, FieldConfig>
+  onSubmit: (data: TData) => Promise<{ success: boolean; error?: string }>
+  onCancel?: () => void
+  relationshipData?: Record<string, Array<{ id: string; label: string }>>
+  submitLabel?: string
+  cancelLabel?: string
+  className?: string
+}
+
+/**
+ * Standalone form component for creating items
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <ItemCreateForm
+ *   fields={config.lists.Post.fields}
+ *   onSubmit={async (data) => {
+ *     const result = await createPost(data);
+ *     return { success: !!result };
+ *   }}
+ *   onCancel={() => router.back()}
+ * />
+ * ```
+ */
+export function ItemCreateForm<TData = Record<string, unknown>>({
+  fields,
+  onSubmit,
+  onCancel,
+  relationshipData = {},
+  submitLabel = 'Create',
+  cancelLabel = 'Cancel',
+  className,
+}: ItemCreateFormProps<TData>) {
+  // Serialize field configs to remove non-serializable properties
+  const serializedFields = useMemo(() => serializeFieldConfigs(fields), [fields])
+
+  const [isPending, setIsPending] = useState(false)
+  const [formData, setFormData] = useState<Partial<TData>>({} as Partial<TData>)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [generalError, setGeneralError] = useState<string | null>(null)
+
+  const handleFieldChange = (fieldName: string, value: unknown) => {
+    setFormData((prev) => ({ ...prev, [fieldName]: value }) as Partial<TData>)
+    // Clear error for this field when user starts typing
+    if (errors[fieldName]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[fieldName]
+        return newErrors
+      })
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setErrors({})
+    setGeneralError(null)
+    setIsPending(true)
+
+    try {
+      // Transform relationship fields to Prisma format
+      const transformedData: Record<string, unknown> = {}
+      for (const [fieldName, value] of Object.entries(formData as Record<string, unknown>)) {
+        const fieldConfig = serializedFields[fieldName]
+
+        // Transform relationship fields
+        if (fieldConfig?.type === 'relationship') {
+          if (fieldConfig.many) {
+            // Many relationship: use connect format
+            if (Array.isArray(value) && value.length > 0) {
+              transformedData[fieldName] = {
+                connect: value.map((id: string) => ({ id })),
+              }
+            }
+          } else {
+            // Single relationship: use connect format
+            if (value) {
+              transformedData[fieldName] = {
+                connect: { id: value },
+              }
+            }
+          }
+        } else {
+          // Non-relationship field: pass through
+          transformedData[fieldName] = value
+        }
+      }
+
+      const result = await onSubmit(transformedData as TData)
+
+      if (!result.success) {
+        setGeneralError(result.error || 'Failed to create item')
+      }
+    } catch (error: unknown) {
+      setGeneralError((error as Error).message || 'Failed to create item')
+    } finally {
+      setIsPending(false)
+    }
+  }
+
+  // Filter out system fields
+  const editableFields = Object.entries(serializedFields).filter(
+    ([key]) => !['id', 'createdAt', 'updatedAt'].includes(key),
+  )
+
+  return (
+    <form onSubmit={handleSubmit} className={className}>
+      {/* General Error */}
+      {generalError && (
+        <div className="bg-destructive/10 border border-destructive text-destructive rounded-lg p-4 mb-6">
+          <p className="text-sm font-medium">{generalError}</p>
+        </div>
+      )}
+
+      {/* Form Fields */}
+      <div className="space-y-6">
+        {editableFields.map(([fieldName, fieldConfig]) => (
+          <FieldRenderer
+            key={fieldName}
+            fieldName={fieldName}
+            fieldConfig={fieldConfig}
+            value={(formData as Record<string, unknown>)[fieldName]}
+            onChange={(value) => handleFieldChange(fieldName, value)}
+            error={errors[fieldName]}
+            disabled={isPending}
+            mode="edit"
+            relationshipItems={relationshipData[fieldName] || []}
+            relationshipLoading={false}
+          />
+        ))}
+      </div>
+
+      {/* Form Actions */}
+      <div className="flex gap-3 pt-6 mt-6 border-t border-border">
+        <Button type="submit" disabled={isPending} className="gap-2">
+          {isPending && (
+            <LoadingSpinner size="sm" className="border-primary-foreground border-t-transparent" />
+          )}
+          {isPending ? 'Creating...' : submitLabel}
+        </Button>
+        {onCancel && (
+          <Button type="button" variant="secondary" onClick={onCancel} disabled={isPending}>
+            {cancelLabel}
+          </Button>
+        )}
+      </div>
+    </form>
+  )
+}

package/src/components/standalone/ItemEditForm.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import * as React from 'react'
+import { useState, useMemo } from 'react'
+import { FieldRenderer } from '../fields/FieldRenderer.js'
+import { LoadingSpinner } from '../LoadingSpinner.js'
+import { Button } from '../../primitives/button.js'
+import type { FieldConfig } from '@opensaas/stack-core'
+import { serializeFieldConfigs } from '../../lib/serializeFieldConfig.js'
+
+export interface ItemEditFormProps<TData = Record<string, unknown>> {
+  fields: Record<string, FieldConfig>
+  initialData: TData
+  onSubmit: (data: TData) => Promise<{ success: boolean; error?: string }>
+  onCancel?: () => void
+  relationshipData?: Record<string, Array<{ id: string; label: string }>>
+  submitLabel?: string
+  cancelLabel?: string
+  className?: string
+  basePath?: string
+}
+
+/**
+ * Standalone form component for editing items
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <ItemEditForm
+ *   fields={config.lists.Post.fields}
+ *   initialData={post}
+ *   onSubmit={async (data) => {
+ *     const result = await updatePost(postId, data);
+ *     return { success: !!result };
+ *   }}
+ *   onCancel={() => router.back()}
+ * />
+ * ```
+ */
+export function ItemEditForm<TData = Record<string, unknown>>({
+  fields,
+  initialData,
+  onSubmit,
+  onCancel,
+  relationshipData = {},
+  submitLabel = 'Save',
+  cancelLabel = 'Cancel',
+  className,
+  basePath = '/admin',
+}: ItemEditFormProps<TData>) {
+  // Serialize field configs to remove non-serializable properties
+  const serializedFields = useMemo(() => serializeFieldConfigs(fields), [fields])
+
+  // Apply valueForClientSerialization transformations to initial data
+  const transformedInitialData = useMemo(() => {
+    const transformed = { ...initialData }
+    for (const [fieldName, fieldConfig] of Object.entries(fields)) {
+      const fieldConfigAny = fieldConfig as { ui?: Record<string, unknown> }
+      if (
+        fieldConfigAny.ui?.valueForClientSerialization &&
+        typeof fieldConfigAny.ui.valueForClientSerialization === 'function'
+      ) {
+        const transformer = fieldConfigAny.ui.valueForClientSerialization as (args: {
+          value: unknown
+        }) => unknown
+        transformed[fieldName as keyof TData] = transformer({
+          value: transformed[fieldName as keyof TData],
+        }) as TData[keyof TData]
+      }
+    }
+    return transformed
+  }, [initialData, fields])
+
+  const [isPending, setIsPending] = useState(false)
+  const [formData, setFormData] = useState<TData>(transformedInitialData)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [generalError, setGeneralError] = useState<string | null>(null)
+
+  const handleFieldChange = (fieldName: string, value: unknown) => {
+    setFormData((prev) => ({ ...prev, [fieldName]: value }) as TData)
+    // Clear error for this field when user starts typing
+    if (errors[fieldName]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[fieldName]
+        return newErrors
+      })
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setErrors({})
+    setGeneralError(null)
+    setIsPending(true)
+
+    try {
+      // Transform relationship fields to Prisma format
+      // Filter out password fields with isSet objects (unchanged passwords)
+      const transformedData: Record<string, unknown> = {}
+      for (const [fieldName, value] of Object.entries(formData as Record<string, unknown>)) {
+        const fieldConfig = serializedFields[fieldName]
+
+        // Skip password fields that have { isSet: boolean } value (not being changed)
+        if (typeof value === 'object' && value !== null && 'isSet' in value) {
+          continue
+        }
+
+        // Transform relationship fields
+        if (fieldConfig?.type === 'relationship') {
+          if (fieldConfig.many) {
+            // Many relationship: use connect format
+            if (Array.isArray(value) && value.length > 0) {
+              transformedData[fieldName] = {
+                connect: value.map((id: string) => ({ id })),
+              }
+            }
+          } else {
+            // Single relationship: use connect format
+            if (value) {
+              transformedData[fieldName] = {
+                connect: { id: value },
+              }
+            }
+          }
+        } else {
+          // Non-relationship field: pass through
+          transformedData[fieldName] = value
+        }
+      }
+
+      const result = await onSubmit(transformedData as TData)
+
+      if (!result.success) {
+        setGeneralError(result.error || 'Failed to update item')
+      }
+    } catch (error: unknown) {
+      setGeneralError((error as Error).message || 'Failed to update item')
+    } finally {
+      setIsPending(false)
+    }
+  }
+
+  // Filter out system fields
+  const editableFields = Object.entries(serializedFields).filter(
+    ([key]) => !['id', 'createdAt', 'updatedAt'].includes(key),
+  )
+
+  return (
+    <form onSubmit={handleSubmit} className={className}>
+      {/* General Error */}
+      {generalError && (
+        <div className="bg-destructive/10 border border-destructive text-destructive rounded-lg p-4 mb-6">
+          <p className="text-sm font-medium">{generalError}</p>
+        </div>
+      )}
+
+      {/* Form Fields */}
+      <div className="space-y-6">
+        {editableFields.map(([fieldName, fieldConfig]) => (
+          <FieldRenderer
+            key={fieldName}
+            fieldName={fieldName}
+            fieldConfig={fieldConfig}
+            value={(formData as Record<string, unknown>)[fieldName]}
+            onChange={(value) => handleFieldChange(fieldName, value)}
+            error={errors[fieldName]}
+            disabled={isPending}
+            mode="edit"
+            relationshipItems={relationshipData[fieldName] || []}
+            relationshipLoading={false}
+            basePath={basePath}
+          />
+        ))}
+      </div>
+
+      {/* Form Actions */}
+      <div className="flex gap-3 pt-6 mt-6 border-t border-border">
+        <Button type="submit" disabled={isPending} className="gap-2">
+          {isPending && (
+            <LoadingSpinner size="sm" className="border-primary-foreground border-t-transparent" />
+          )}
+          {isPending ? 'Saving...' : submitLabel}
+        </Button>
+        {onCancel && (
+          <Button type="button" variant="secondary" onClick={onCancel} disabled={isPending}>
+            {cancelLabel}
+          </Button>
+        )}
+      </div>
+    </form>
+  )
+}

package/src/components/standalone/ListTable.tsx

@@ -0,0 +1,211 @@
+'use client'
+import * as React from 'react'
+import { useState } from 'react'
+import Link from 'next/link'
+import { formatFieldName, getFieldDisplayValue } from '../../lib/utils.js'
+import { getUrlKey } from '@opensaas/stack-core'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../primitives/table.js'
+
+export interface ListTableProps {
+  items: Array<Record<string, unknown>>
+  fieldTypes: Record<string, string>
+  relationshipRefs?: Record<string, string>
+  basePath?: string
+  columns?: string[]
+  onRowClick?: (item: Record<string, unknown>) => void
+  sortable?: boolean
+  emptyMessage?: string
+  className?: string
+  renderActions?: (item: Record<string, unknown>) => React.ReactNode
+}
+
+/**
+ * Standalone table component for displaying list data
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <ListTable
+ *   items={posts}
+ *   fieldTypes={{ title: 'text', status: 'select', publishedAt: 'timestamp', author: 'relationship' }}
+ *   relationshipRefs={{ author: 'User.posts' }}
+ *   columns={['title', 'status', 'publishedAt', 'author']}
+ *   onRowClick={(post) => router.push(`/posts/${post.id}`)}
+ *   renderActions={(post) => (
+ *     <Button onClick={() => deletePost(post.id)}>Delete</Button>
+ *   )}
+ * />
+ * ```
+ */
+export function ListTable({
+  items,
+  fieldTypes,
+  relationshipRefs,
+  basePath = '/admin',
+  columns,
+  onRowClick,
+  sortable = true,
+  emptyMessage = 'No items found',
+  className,
+  renderActions,
+}: ListTableProps) {
+  const [sortBy, setSortBy] = useState<string | null>(null)
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
+
+  /**
+   * Render a relationship field as a clickable link or links
+   */
+  const renderRelationshipCell = (value: unknown, fieldName: string) => {
+    if (!relationshipRefs) {
+      return getFieldDisplayValue(value, 'relationship')
+    }
+
+    const ref = relationshipRefs[fieldName]
+    if (!ref) {
+      return getFieldDisplayValue(value, 'relationship')
+    }
+
+    // Parse ref to get related list name
+    const [relatedListKey] = ref.split('.')
+    const relatedUrlKey = getUrlKey(relatedListKey)
+
+    if (!value || typeof value !== 'object') {
+      return <span className="text-muted-foreground">-</span>
+    }
+
+    // Handle array of relationships (many: true)
+    if (Array.isArray(value)) {
+      if (value.length === 0) return <span className="text-muted-foreground">-</span>
+      return (
+        <span className="flex flex-wrap gap-1">
+          {value.map((item, idx) => {
+            if (!item || typeof item !== 'object') return null
+            const displayValue = getFieldDisplayValue(item, 'relationship')
+            const itemId = 'id' in item ? item.id : null
+            const key = itemId || idx
+            return (
+              <React.Fragment key={key}>
+                {idx > 0 && <span className="text-muted-foreground">, </span>}
+                <Link
+                  href={`${basePath}/${relatedUrlKey}/${itemId}`}
+                  className="text-primary hover:underline"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {displayValue}
+                </Link>
+              </React.Fragment>
+            )
+          })}
+        </span>
+      )
+    }
+
+    // Handle single relationship
+    const itemId = 'id' in value ? value.id : null
+    const displayValue = getFieldDisplayValue(value, 'relationship')
+    return (
+      <Link
+        href={`${basePath}/${relatedUrlKey}/${itemId}`}
+        className="text-primary hover:underline"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {displayValue}
+      </Link>
+    )
+  }
+
+  // Determine which columns to show
+  const displayColumns =
+    columns ||
+    Object.keys(fieldTypes).filter((key) => !['password', 'createdAt', 'updatedAt'].includes(key))
+
+  // Sort items if needed
+  const sortedItems = [...items]
+  if (sortBy && sortable) {
+    sortedItems.sort((a, b) => {
+      const aVal = a[sortBy]
+      const bVal = b[sortBy]
+      if (aVal === bVal) return 0
+      const comparison = String(aVal) > String(bVal) ? 1 : -1
+      return sortOrder === 'asc' ? comparison : -comparison
+    })
+  }
+
+  const handleSort = (column: string) => {
+    if (!sortable) return
+    if (sortBy === column) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortBy(column)
+      setSortOrder('asc')
+    }
+  }
+
+  return (
+    <div className={className}>
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {displayColumns.map((column) => (
+                <TableHead
+                  key={column}
+                  className={sortable ? 'cursor-pointer hover:bg-muted/70 transition-colors' : ''}
+                  onClick={() => handleSort(column)}
+                >
+                  <div className="flex items-center space-x-1">
+                    <span>{formatFieldName(column)}</span>
+                    {sortable && sortBy === column && (
+                      <span className="text-primary">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </div>
+                </TableHead>
+              ))}
+              {renderActions && <TableHead className="text-right">Actions</TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedItems.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={displayColumns.length + (renderActions ? 1 : 0)}
+                  className="h-24 text-center"
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            ) : (
+              sortedItems.map((item) => (
+                <TableRow
+                  key={String(item.id)}
+                  className={onRowClick ? 'cursor-pointer' : ''}
+                  onClick={() => onRowClick?.(item)}
+                >
+                  {displayColumns.map((column) => (
+                    <TableCell key={column}>
+                      {fieldTypes[column] === 'relationship'
+                        ? renderRelationshipCell(item[column], column)
+                        : getFieldDisplayValue(item[column], fieldTypes[column])}
+                    </TableCell>
+                  ))}
+                  {renderActions && (
+                    <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+                      {renderActions(item)}
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}