@opensaas/stack-ui 0.1.0

package/src/components/Navigation.tsx

@@ -0,0 +1,117 @@
+import Link from 'next/link'
+import { formatListName } from '../lib/utils.js'
+import { AccessContext, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
+
+export interface NavigationProps<TPrisma> {
+  context: AccessContext<TPrisma>
+  config: OpenSaasConfig
+  basePath?: string
+  currentPath?: string
+}
+
+/**
+ * Navigation sidebar showing all lists
+ * Server Component
+ */
+export function Navigation<TPrisma>({
+  context,
+  config,
+  basePath = '/admin',
+  currentPath = '',
+}: NavigationProps<TPrisma>) {
+  const lists = Object.keys(config.lists || {})
+
+  return (
+    <nav className="w-64 border-r border-border bg-card h-screen sticky top-0 flex flex-col">
+      {/* Header with gradient */}
+      <div className="p-6 border-b border-border relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-accent/10 opacity-50" />
+        <Link href={basePath} className="block relative">
+          <h1 className="text-xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            OpenSaas Admin
+          </h1>
+        </Link>
+      </div>
+
+      {/* Navigation Links */}
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="space-y-1">
+          <Link
+            href={basePath}
+            className={`block px-3 py-2.5 rounded-lg text-sm font-medium transition-all relative overflow-hidden group ${
+              currentPath === ''
+                ? 'bg-gradient-to-r from-primary to-accent text-primary-foreground shadow-lg shadow-primary/25'
+                : 'text-foreground hover:bg-accent/50 hover:text-accent-foreground'
+            }`}
+          >
+            {currentPath === '' && (
+              <div className="absolute inset-0 bg-gradient-to-r from-primary/20 to-accent/20 animate-pulse" />
+            )}
+            <span className="relative flex items-center gap-2">
+              <span className={currentPath === '' ? 'text-lg' : 'text-base'}>📊</span>
+              Dashboard
+            </span>
+          </Link>
+
+          {lists.length > 0 && (
+            <>
+              <div className="pt-4 pb-2 px-3">
+                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                  Lists
+                </p>
+              </div>
+              {lists.map((listKey) => {
+                const urlKey = getUrlKey(listKey)
+                const isActive = currentPath.startsWith(`/${urlKey}`)
+                return (
+                  <Link
+                    key={listKey}
+                    href={`${basePath}/${urlKey}`}
+                    className={`block px-3 py-2.5 rounded-lg text-sm font-medium transition-all relative overflow-hidden group ${
+                      isActive
+                        ? 'bg-gradient-to-r from-primary to-accent text-primary-foreground shadow-lg shadow-primary/25'
+                        : 'text-foreground hover:bg-accent/50 hover:text-accent-foreground'
+                    }`}
+                  >
+                    {isActive && (
+                      <div className="absolute inset-0 bg-gradient-to-r from-primary/20 to-accent/20 animate-pulse" />
+                    )}
+                    <span className="relative flex items-center gap-2">
+                      <span className="opacity-60 group-hover:opacity-100 transition-opacity">
+                        📁
+                      </span>
+                      {formatListName(listKey)}
+                    </span>
+                  </Link>
+                )
+              })}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      {context.session && (
+        <div className="p-4 border-t border-border bg-gradient-to-br from-primary/5 to-accent/5">
+          <div className="flex items-center space-x-3">
+            <div className="h-9 w-9 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg shadow-primary/25">
+              <span className="text-sm font-bold text-primary-foreground">
+                {String(
+                  (context.session.data as Record<string, unknown>)?.name,
+                )?.[0]?.toUpperCase() || '?'}
+              </span>
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">
+                {String((context.session.data as Record<string, unknown>)?.name) || 'User'}
+              </p>
+              <p className="text-xs text-muted-foreground truncate">
+                {String((context.session.data as Record<string, unknown>)?.email) || ''}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  )
+}

package/src/components/SkeletonLoader.tsx

@@ -0,0 +1,82 @@
+import { cn } from '../lib/utils.js'
+
+export interface SkeletonLoaderProps {
+  className?: string
+  variant?: 'text' | 'circular' | 'rectangular'
+}
+
+/**
+ * Skeleton loader component for content placeholders
+ */
+export function SkeletonLoader({ className, variant = 'rectangular' }: SkeletonLoaderProps) {
+  const variantClasses = {
+    text: 'h-4 rounded',
+    circular: 'rounded-full',
+    rectangular: 'rounded-md',
+  }
+
+  return (
+    <div
+      className={cn('animate-pulse bg-muted', variantClasses[variant], className)}
+      aria-hidden="true"
+    />
+  )
+}
+
+/**
+ * Table skeleton loader
+ */
+export function TableSkeleton({ rows = 5, columns = 4 }: { rows?: number; columns?: number }) {
+  return (
+    <div className="bg-card border border-border rounded-lg overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead className="bg-muted/50 border-b border-border">
+            <tr>
+              {Array.from({ length: columns }).map((_, i) => (
+                <th key={i} className="px-6 py-3">
+                  <SkeletonLoader variant="text" className="h-4 w-24" />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {Array.from({ length: rows }).map((_, rowIndex) => (
+              <tr key={rowIndex}>
+                {Array.from({ length: columns }).map((_, colIndex) => (
+                  <td key={colIndex} className="px-6 py-4">
+                    <SkeletonLoader variant="text" className="h-4 w-32" />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Form skeleton loader
+ */
+export function FormSkeleton({ fields = 4 }: { fields?: number }) {
+  return (
+    <div className="bg-card border border-border rounded-lg p-6">
+      <div className="space-y-6">
+        {Array.from({ length: fields }).map((_, i) => (
+          <div key={i} className="space-y-2">
+            <SkeletonLoader variant="text" className="h-4 w-24" />
+            <SkeletonLoader variant="rectangular" className="h-10 w-full" />
+          </div>
+        ))}
+        <div className="flex items-center justify-between pt-6 border-t border-border">
+          <div className="flex gap-3">
+            <SkeletonLoader variant="rectangular" className="h-10 w-20" />
+            <SkeletonLoader variant="rectangular" className="h-10 w-20" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/fields/CheckboxField.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { Checkbox } from '../../primitives/checkbox.js'
+import { Label } from '../../primitives/label.js'
+
+export interface CheckboxFieldProps {
+  name: string
+  value: boolean
+  onChange: (value: boolean) => void
+  label: string
+  error?: string
+  disabled?: boolean
+  mode?: 'read' | 'edit'
+}
+
+export function CheckboxField({
+  name,
+  value,
+  onChange,
+  label,
+  error,
+  disabled,
+  mode = 'edit',
+}: CheckboxFieldProps) {
+  if (mode === 'read') {
+    return (
+      <div className="space-y-1">
+        <Label className="text-muted-foreground">{label}</Label>
+        <p className="text-sm">{value ? 'Yes' : 'No'}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id={name}
+          name={name}
+          checked={value || false}
+          onCheckedChange={(checked) => onChange(checked === true)}
+          disabled={disabled}
+        />
+        <Label
+          htmlFor={name}
+          className="leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          {label}
+        </Label>
+      </div>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

package/src/components/fields/ComboboxField.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import * as React from 'react'
+import { useState } from 'react'
+import {
+  Combobox,
+  ComboboxTrigger,
+  ComboboxContent,
+  ComboboxSearch,
+  ComboboxList,
+  ComboboxEmpty,
+  ComboboxItem,
+} from '../../primitives/combobox.js'
+
+export interface ComboboxFieldProps {
+  name: string
+  value: string | null
+  onChange: (value: string | null) => void
+  label: string
+  items: Array<{ id: string; label: string }>
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+  isLoading?: boolean
+  placeholder?: string
+}
+
+export function ComboboxField({
+  name,
+  value,
+  onChange,
+  label,
+  items,
+  error,
+  disabled,
+  required,
+  mode = 'edit',
+  isLoading = false,
+  placeholder = 'Select...',
+}: ComboboxFieldProps) {
+  const [open, setOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  // Read mode
+  if (mode === 'read') {
+    const selectedItem = items.find((item) => item.id === value)
+    return (
+      <div className="space-y-1">
+        <label className="text-sm font-medium text-muted-foreground">{label}</label>
+        <p className="text-sm">{selectedItem?.label || '-'}</p>
+      </div>
+    )
+  }
+
+  // Filter items based on search query
+  const filteredItems = searchQuery
+    ? items.filter((item) => item.label.toLowerCase().includes(searchQuery.toLowerCase()))
+    : items
+
+  const selectedItem = items.find((item) => item.id === value)
+
+  return (
+    <div className="space-y-2">
+      <label htmlFor={name} className="text-sm font-medium">
+        {label}
+        {required && <span className="text-destructive ml-1">*</span>}
+      </label>
+      <Combobox open={open} onOpenChange={setOpen}>
+        <ComboboxTrigger disabled={disabled || isLoading}>
+          <span className={!selectedItem ? 'text-muted-foreground' : ''}>
+            {isLoading ? 'Loading...' : selectedItem ? selectedItem.label : placeholder}
+          </span>
+        </ComboboxTrigger>
+        <ComboboxContent>
+          <ComboboxSearch
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={(e) => {
+              // Prevent form submission on Enter
+              if (e.key === 'Enter') {
+                e.preventDefault()
+              }
+            }}
+          />
+          <ComboboxList>
+            {filteredItems.length === 0 ? (
+              <ComboboxEmpty />
+            ) : (
+              <>
+                {!required && value && (
+                  <>
+                    <ComboboxItem
+                      onClick={() => {
+                        onChange(null)
+                        setOpen(false)
+                        setSearchQuery('')
+                      }}
+                    >
+                      <span className="text-muted-foreground italic">Clear selection</span>
+                    </ComboboxItem>
+                    <div className="-mx-1 my-1 h-px bg-border" />
+                  </>
+                )}
+                {filteredItems.map((item) => (
+                  <ComboboxItem
+                    key={item.id}
+                    selected={item.id === value}
+                    onClick={() => {
+                      onChange(item.id)
+                      setOpen(false)
+                      setSearchQuery('')
+                    }}
+                  >
+                    {item.label}
+                  </ComboboxItem>
+                ))}
+              </>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

package/src/components/fields/FieldRenderer.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import * as React from 'react'
+import { getFieldComponent } from './registry.js'
+import { formatFieldName } from '../../lib/utils.js'
+import { getUrlKey } from '@opensaas/stack-core'
+import type { SerializableFieldConfig } from '../../lib/serializeFieldConfig.js'
+
+export interface FieldRendererProps {
+  fieldName: string
+  fieldConfig: SerializableFieldConfig
+  value: unknown
+  onChange: (value: unknown) => void
+  error?: string
+  disabled?: boolean
+  mode?: 'read' | 'edit'
+  relationshipItems?: Array<{ id: string; label: string }>
+  relationshipLoading?: boolean
+  basePath?: string
+}
+
+/**
+ * Internal component that receives the resolved Component
+ */
+function FieldRendererInner({
+  Component,
+  fieldName,
+  fieldConfig,
+  value,
+  onChange,
+  error,
+  disabled,
+  mode,
+  relationshipItems,
+  relationshipLoading,
+  basePath,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}: FieldRendererProps & { Component: React.ComponentType<any> }) {
+  const label = (fieldConfig as Record<string, unknown>).label || formatFieldName(fieldName)
+  const isRequired =
+    (fieldConfig as Record<string, unknown>).validation &&
+    typeof (fieldConfig as Record<string, unknown>).validation === 'object' &&
+    (fieldConfig as Record<string, unknown>).validation !== null &&
+    'isRequired' in ((fieldConfig as Record<string, unknown>).validation as Record<string, unknown>)
+      ? ((fieldConfig as Record<string, unknown>).validation as Record<string, unknown>).isRequired
+      : false
+
+  // Build props based on field type
+  const baseProps = {
+    name: fieldName,
+    value,
+    onChange,
+    label,
+    error,
+    disabled,
+    required: isRequired,
+    mode,
+  }
+
+  // Add field-type-specific props
+  const specificProps: Record<string, unknown> = {}
+
+  if (fieldConfig.type === 'select' && 'options' in fieldConfig && fieldConfig.options) {
+    specificProps.options = fieldConfig.options.map(
+      (opt: string | { label: string; value: string }) =>
+        typeof opt === 'string' ? { label: opt, value: opt } : opt,
+    )
+  }
+
+  if (fieldConfig.type === 'password') {
+    specificProps.showConfirm = mode === 'edit'
+  }
+
+  if (fieldConfig.type === 'relationship') {
+    specificProps.items = relationshipItems
+    specificProps.isLoading = relationshipLoading
+    specificProps.many = fieldConfig.many || false
+
+    // Extract related list key from ref (format: 'ListName.fieldName')
+    if (fieldConfig.ref) {
+      const [relatedListName] = fieldConfig.ref.split('.')
+      specificProps.relatedListKey = getUrlKey(relatedListName)
+      specificProps.basePath = basePath
+    }
+  }
+
+  // Pass through any UI options from fieldConfig.ui (excluding component and fieldType)
+  if (fieldConfig.ui) {
+    const { _component, _fieldType, ...uiOptions } = fieldConfig.ui
+    Object.assign(specificProps, uiOptions)
+  }
+
+  const allProps = { ...baseProps, ...specificProps }
+  return <Component {...allProps} />
+}
+
+/**
+ * Factory component that renders the appropriate field type
+ * based on the field configuration and component registry
+ */
+export function FieldRenderer(props: FieldRendererProps) {
+  const { fieldName, fieldConfig, mode = 'edit' } = props
+
+  const label = (fieldConfig as Record<string, unknown>).label || formatFieldName(fieldName)
+
+  // Skip rendering ID and timestamp fields in forms
+  if (mode === 'edit' && ['id', 'createdAt', 'updatedAt'].includes(fieldName)) {
+    return null
+  }
+
+  // Get component from:
+  // 1. Per-field component override (ui.component)
+  // 2. Custom field type override (ui.fieldType) - uses global registry
+  // 3. Default field type (fieldConfig.type) - uses global registry
+  const Component =
+    fieldConfig.ui?.component ||
+    (fieldConfig.ui?.fieldType
+      ? getFieldComponent(fieldConfig.ui.fieldType)
+      : getFieldComponent(fieldConfig.type))
+
+  if (!Component) {
+    console.warn(`No component registered for field type: ${fieldConfig.type}`)
+    return (
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-muted-foreground">{String(label)}</label>
+        <p className="text-sm text-muted-foreground">Unsupported field type: {fieldConfig.type}</p>
+      </div>
+    )
+  }
+
+  return <FieldRendererInner {...props} Component={Component} />
+}

package/src/components/fields/IntegerField.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { Input } from '../../primitives/input.js'
+import { Label } from '../../primitives/label.js'
+import { cn } from '../../lib/utils.js'
+
+export interface IntegerFieldProps {
+  name: string
+  value: number | null
+  onChange: (value: number | null) => void
+  label: string
+  placeholder?: string
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+  min?: number
+  max?: number
+}
+
+export function IntegerField({
+  name,
+  value,
+  onChange,
+  label,
+  placeholder,
+  error,
+  disabled,
+  required,
+  mode = 'edit',
+  min,
+  max,
+}: IntegerFieldProps) {
+  if (mode === 'read') {
+    return (
+      <div className="space-y-1">
+        <Label className="text-muted-foreground">{label}</Label>
+        <p className="text-sm">{value !== null ? value : '-'}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={name}>
+        {label}
+        {required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+      <Input
+        id={name}
+        name={name}
+        type="number"
+        value={value ?? ''}
+        onChange={(e) => {
+          const val = e.target.value
+          onChange(val === '' ? null : parseInt(val, 10))
+        }}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        min={min}
+        max={max}
+        className={cn(error && 'border-destructive')}
+      />
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}