@opensaas/stack-ui 0.1.0

package/src/components/ItemFormClient.tsx

@@ -0,0 +1,237 @@
+'use client'
+
+import * as React from 'react'
+import { useState, useTransition } from 'react'
+import { useRouter } from 'next/navigation'
+import { FieldRenderer } from './fields/FieldRenderer.js'
+import { ConfirmDialog } from './ConfirmDialog.js'
+import { LoadingSpinner } from './LoadingSpinner.js'
+import { Button } from '../primitives/button.js'
+import type { ServerActionInput } from '../server/types.js'
+import type { SerializableFieldConfig } from '../lib/serializeFieldConfig.js'
+
+export interface ItemFormClientProps {
+  listKey: string
+  urlKey: string
+  mode: 'create' | 'edit'
+  fields: Record<string, SerializableFieldConfig>
+  initialData?: Record<string, unknown>
+  itemId?: string
+  basePath: string
+  serverAction: (input: ServerActionInput) => Promise<unknown>
+  relationshipData?: Record<string, Array<{ id: string; label: string }>>
+}
+
+/**
+ * Client component for interactive form
+ * Handles form state, validation, and submission
+ */
+export function ItemFormClient({
+  listKey,
+  urlKey,
+  mode,
+  fields,
+  initialData = {},
+  itemId,
+  basePath,
+  serverAction,
+  relationshipData = {},
+}: ItemFormClientProps) {
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+  const [formData, setFormData] = useState<Record<string, unknown>>(initialData)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [generalError, setGeneralError] = useState<string | null>(null)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  const handleFieldChange = (fieldName: string, value: unknown) => {
+    setFormData((prev) => ({ ...prev, [fieldName]: value }))
+    // 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)
+
+    startTransition(async () => {
+      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)) {
+          const fieldConfig = fields[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 - check discriminated union type
+          const fieldAny = fieldConfig as { type: string; many?: boolean }
+          if (fieldAny?.type === 'relationship') {
+            if (fieldAny.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 =
+          mode === 'create'
+            ? await serverAction({
+                listKey,
+                action: 'create',
+                data: transformedData,
+              })
+            : await serverAction({
+                listKey,
+                action: 'update',
+                id: itemId!,
+                data: transformedData,
+              })
+
+        if (result) {
+          // Navigate back to list view
+          router.push(`${basePath}/${urlKey}`)
+          router.refresh()
+        } else {
+          setGeneralError('Access denied or operation failed')
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to save item'
+        setGeneralError(errorMessage)
+      }
+    })
+  }
+
+  const handleDelete = async () => {
+    if (!itemId) return
+
+    setGeneralError(null)
+    setShowDeleteConfirm(false)
+
+    startTransition(async () => {
+      try {
+        const result = await serverAction({
+          listKey,
+          action: 'delete',
+          id: itemId,
+        })
+
+        if (result) {
+          router.push(`${basePath}/${urlKey}`)
+          router.refresh()
+        } else {
+          setGeneralError('Access denied or failed to delete item')
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to delete item'
+        setGeneralError(errorMessage)
+      }
+    })
+  }
+
+  // Filter out system fields
+  const editableFields = Object.entries(fields).filter(
+    ([key]) => !['id', 'createdAt', 'updatedAt'].includes(key),
+  )
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {/* General Error */}
+      {generalError && (
+        <div className="bg-destructive/10 border border-destructive text-destructive rounded-lg p-4">
+          <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[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 items-center justify-between pt-6 border-t border-border">
+        <div className="flex gap-3">
+          <Button type="submit" disabled={isPending} className="gap-2">
+            {isPending && (
+              <LoadingSpinner
+                size="sm"
+                className="border-primary-foreground border-t-transparent"
+              />
+            )}
+            {isPending ? 'Saving...' : mode === 'create' ? 'Create' : 'Save'}
+          </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => router.push(`${basePath}/${urlKey}`)}
+            disabled={isPending}
+          >
+            Cancel
+          </Button>
+        </div>
+
+        {/* Delete Button (Edit Mode Only) */}
+        {mode === 'edit' && itemId && (
+          <Button
+            type="button"
+            variant="destructive"
+            onClick={() => setShowDeleteConfirm(true)}
+            disabled={isPending}
+          >
+            Delete
+          </Button>
+        )}
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <ConfirmDialog
+        isOpen={showDeleteConfirm}
+        title="Delete Item"
+        message="Are you sure you want to delete this item? This action cannot be undone."
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        variant="danger"
+        onConfirm={handleDelete}
+        onCancel={() => setShowDeleteConfirm(false)}
+      />
+    </form>
+  )
+}

package/src/components/ListView.tsx

@@ -0,0 +1,153 @@
+import Link from 'next/link'
+import { ListViewClient } from './ListViewClient.js'
+import { formatListName } from '../lib/utils.js'
+import {
+  AccessContext,
+  getDbKey,
+  getUrlKey,
+  OpenSaasConfig,
+  type PrismaClientLike,
+} from '@opensaas/stack-core'
+
+export interface ListViewProps<TPrisma extends PrismaClientLike = PrismaClientLike> {
+  context: AccessContext<TPrisma>
+  config: OpenSaasConfig
+  listKey: string
+  basePath?: string
+  columns?: string[]
+  page?: number
+  pageSize?: number
+  search?: string
+}
+
+/**
+ * List view component - displays items in a table
+ * Server Component that fetches data and renders client table
+ */
+export async function ListView<TPrisma extends PrismaClientLike = PrismaClientLike>({
+  context,
+  config,
+  listKey,
+  basePath = '/admin',
+  columns,
+  page = 1,
+  pageSize = 50,
+  search,
+}: ListViewProps<TPrisma>) {
+  const key = getDbKey(listKey)
+  const urlKey = getUrlKey(listKey)
+  const listConfig = config.lists[listKey]
+
+  if (!listConfig) {
+    return (
+      <div className="p-8">
+        <div className="bg-destructive/10 border border-destructive text-destructive rounded-lg p-6">
+          <h2 className="text-lg font-semibold mb-2">List not found</h2>
+          <p>The list &quot;{listKey}&quot; does not exist in your configuration.</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Fetch items using access-controlled context
+  const skip = (page - 1) * pageSize
+  let items: Array<Record<string, unknown>> = []
+  let total = 0
+
+  try {
+    const dbContext = context.db
+    if (!dbContext || !dbContext[key]) {
+      throw new Error(`Context for ${listKey} not found`)
+    }
+
+    // Build search filter if search term provided
+    let where: Record<string, unknown> | undefined = undefined
+    if (search && search.trim()) {
+      // Find all text fields to search across
+      const searchableFields = Object.entries(listConfig.fields)
+        .filter(([_, field]) => (field as { type: string }).type === 'text')
+        .map(([fieldName]) => fieldName)
+
+      if (searchableFields.length > 0) {
+        where = {
+          OR: searchableFields.map((fieldName) => ({
+            [fieldName]: {
+              contains: search.trim(),
+            },
+          })),
+        }
+      }
+    }
+
+    // Build include object for relationship fields
+    const include: Record<string, boolean> = {}
+    Object.entries(listConfig.fields).forEach(([fieldName, field]) => {
+      if ((field as { type: string }).type === 'relationship') {
+        include[fieldName] = true
+      }
+    })
+    ;[items, total] = await Promise.all([
+      dbContext[key].findMany({
+        where,
+        skip,
+        take: pageSize,
+        ...(Object.keys(include).length > 0 ? { include } : {}),
+      }),
+      dbContext[key].count({ where }),
+    ])
+  } catch (error) {
+    console.error(`Failed to fetch ${listKey}:`, error)
+  }
+
+  // Serialize items for client component (convert Dates, etc to JSON-safe format)
+  const serializedItems = JSON.parse(JSON.stringify(items))
+
+  // Extract only the relationship refs needed by client (don't send entire config)
+  const relationshipRefs: Record<string, string> = {}
+  Object.entries(listConfig.fields).forEach(([fieldName, field]) => {
+    if ('type' in field && field.type === 'relationship' && 'ref' in field && field.ref) {
+      relationshipRefs[fieldName] = field.ref
+    }
+  })
+
+  return (
+    <div className="p-8">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold mb-2">{formatListName(listKey)}</h1>
+          <p className="text-muted-foreground">
+            {total} {total === 1 ? 'item' : 'items'}
+          </p>
+        </div>
+        <Link
+          href={`${basePath}/${urlKey}/create`}
+          className="inline-flex items-center px-4 py-2 bg-primary text-primary-foreground rounded-md font-medium hover:bg-primary/90 transition-colors"
+        >
+          <span className="mr-2">+</span>
+          Create {formatListName(listKey)}
+        </Link>
+      </div>
+
+      {/* Client Table */}
+      <ListViewClient
+        items={serializedItems || []}
+        fieldTypes={Object.fromEntries(
+          Object.entries(listConfig.fields).map(([key, field]) => [
+            key,
+            (field as { type: string }).type,
+          ]),
+        )}
+        relationshipRefs={relationshipRefs}
+        columns={columns}
+        listKey={listKey}
+        urlKey={urlKey}
+        basePath={basePath}
+        page={page}
+        pageSize={pageSize}
+        total={total || 0}
+        search={search}
+      />
+    </div>
+  )
+}

package/src/components/ListViewClient.tsx

@@ -0,0 +1,282 @@
+'use client'
+
+import * as React from 'react'
+import { useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { formatFieldName, getFieldDisplayValue } from '../lib/utils.js'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../primitives/table.js'
+import { Input } from '../primitives/input.js'
+import { Button } from '../primitives/button.js'
+import { Card } from '../primitives/card.js'
+import { getUrlKey } from '@opensaas/stack-core'
+
+export interface ListViewClientProps {
+  items: Array<Record<string, unknown>>
+  fieldTypes: Record<string, string>
+  relationshipRefs: Record<string, string>
+  columns?: string[]
+  listKey: string
+  urlKey: string
+  basePath: string
+  page: number
+  pageSize: number
+  total: number
+  search?: string
+}
+
+/**
+ * Client component for interactive list table
+ * Handles sorting, pagination, and row interactions
+ */
+export function ListViewClient({
+  items,
+  fieldTypes,
+  relationshipRefs,
+  columns,
+  urlKey,
+  basePath,
+  page,
+  pageSize,
+  total,
+  search: initialSearch,
+}: ListViewClientProps) {
+  const router = useRouter()
+  const [sortBy, setSortBy] = useState<string | null>(null)
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc')
+  const [searchInput, setSearchInput] = useState(initialSearch || '')
+
+  // 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) {
+    sortedItems.sort((a, b) => {
+      const aVal = a[sortBy]
+      const bVal = b[sortBy]
+      if (aVal === bVal) return 0
+      // Handle unknown types for comparison - convert to string for safety
+      const aStr = String(aVal ?? '')
+      const bStr = String(bVal ?? '')
+      const comparison = aStr > bStr ? 1 : -1
+      return sortOrder === 'asc' ? comparison : -comparison
+    })
+  }
+
+  const totalPages = Math.ceil(total / pageSize)
+  const hasNextPage = page < totalPages
+  const hasPrevPage = page > 1
+
+  const handleSort = (column: string) => {
+    if (sortBy === column) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortBy(column)
+      setSortOrder('asc')
+    }
+  }
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault()
+    const params = new URLSearchParams()
+    if (searchInput.trim()) {
+      params.set('search', searchInput.trim())
+    }
+    params.set('page', '1') // Reset to page 1 on new search
+    router.push(`${basePath}/${urlKey}?${params.toString()}`)
+  }
+
+  const handleClearSearch = () => {
+    setSearchInput('')
+    router.push(`${basePath}/${urlKey}`)
+  }
+
+  const buildPaginationUrl = (newPage: number) => {
+    const params = new URLSearchParams()
+    if (initialSearch) {
+      params.set('search', initialSearch)
+    }
+    params.set('page', newPage.toString())
+    return `${basePath}/${urlKey}?${params.toString()}`
+  }
+
+  /**
+   * Render a relationship field as a clickable link or links
+   */
+  const renderRelationshipCell = (value: unknown, fieldName: string) => {
+    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>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Search Bar */}
+      <Card className="p-4">
+        <form onSubmit={handleSearch} className="flex gap-2">
+          <div className="flex-1 relative">
+            <Input
+              type="text"
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              placeholder="Search..."
+              className="pr-10"
+            />
+            {searchInput && (
+              <button
+                type="button"
+                onClick={handleClearSearch}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              >
+                ✕
+              </button>
+            )}
+          </div>
+          <Button type="submit">Search</Button>
+        </form>
+      </Card>
+
+      {/* Table */}
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {displayColumns.map((column) => (
+                <TableHead
+                  key={column}
+                  className="cursor-pointer hover:bg-muted/70 transition-colors"
+                  onClick={() => handleSort(column)}
+                >
+                  <div className="flex items-center space-x-1">
+                    <span>{formatFieldName(column)}</span>
+                    {sortBy === column && (
+                      <span className="text-primary">{sortOrder === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </div>
+                </TableHead>
+              ))}
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedItems.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={displayColumns.length + 1} className="h-24 text-center">
+                  No items found
+                </TableCell>
+              </TableRow>
+            ) : (
+              sortedItems.map((item) => (
+                <TableRow key={String(item.id)}>
+                  {displayColumns.map((column) => (
+                    <TableCell key={column}>
+                      {fieldTypes[column] === 'relationship'
+                        ? renderRelationshipCell(item[column], column)
+                        : getFieldDisplayValue(item[column], fieldTypes[column])}
+                    </TableCell>
+                  ))}
+                  <TableCell className="text-right">
+                    <Link
+                      href={`${basePath}/${urlKey}/${item.id}`}
+                      className="text-primary hover:underline"
+                    >
+                      Edit
+                    </Link>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <p className="text-sm text-muted-foreground">
+            Showing {(page - 1) * pageSize + 1} to {Math.min(page * pageSize, total)} of {total}{' '}
+            results
+          </p>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              onClick={() => router.push(buildPaginationUrl(page - 1))}
+              disabled={!hasPrevPage}
+            >
+              Previous
+            </Button>
+            <span className="text-sm text-muted-foreground">
+              Page {page} of {totalPages}
+            </span>
+            <Button
+              variant="outline"
+              onClick={() => router.push(buildPaginationUrl(page + 1))}
+              disabled={!hasNextPage}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/LoadingSpinner.tsx

@@ -0,0 +1,32 @@
+import { cn } from '../lib/utils.js'
+
+export interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+/**
+ * Loading spinner component
+ * Used to indicate loading states
+ */
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  const sizeClasses = {
+    sm: 'h-4 w-4 border-2',
+    md: 'h-8 w-8 border-2',
+    lg: 'h-12 w-12 border-3',
+  }
+
+  return (
+    <div
+      className={cn(
+        'animate-spin rounded-full border-primary border-t-transparent',
+        sizeClasses[size],
+        className,
+      )}
+      role="status"
+      aria-label="Loading"
+    >
+      <span className="sr-only">Loading...</span>
+    </div>
+  )
+}