@opensaas/stack-ui 0.1.0

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@opensaas/stack-ui",
+  "version": "0.1.0",
+  "description": "Composable React UI components for OpenSaas Stack",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "default": "./dist/primitives/index.js"
+    },
+    "./fields": {
+      "types": "./dist/components/fields/index.d.ts",
+      "default": "./dist/components/fields/index.js"
+    },
+    "./standalone": {
+      "types": "./dist/components/standalone/index.d.ts",
+      "default": "./dist/components/standalone/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    },
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "default": "./dist/lib/utils.js"
+    },
+    "./styles": "./dist/styles/globals.css"
+  },
+  "keywords": [
+    "opensaas",
+    "admin",
+    "ui",
+    "nextjs",
+    "react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "next": "^15.0.0 || ^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@opensaas/stack-core": "0.1.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "react-hook-form": "^7.54.2",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^24.7.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.0.0",
+    "happy-dom": "^20.0.0",
+    "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.0",
+    "@opensaas/stack-core": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsc && npm run build:css",
+    "build:css": "mkdir -p dist/styles && postcss ./src/styles/globals.css -o ./dist/styles/globals.css",
+    "dev": "tsc --watch",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "clean": "rm -rf .turbo dist tsconfig.tsbuildinfo"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/src/components/AdminUI.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react'
+import { Navigation } from './Navigation.js'
+import { Dashboard } from './Dashboard.js'
+import { ListView } from './ListView.js'
+import { ItemForm } from './ItemForm.js'
+import type { ServerActionInput } from '../server/types.js'
+import { AccessContext, getListKeyFromUrl, OpenSaasConfig } from '@opensaas/stack-core'
+import { generateThemeCSS } from '../lib/theme.js'
+
+export interface AdminUIProps<TPrisma> {
+  context: AccessContext<TPrisma>
+  config: OpenSaasConfig
+  params?: string[]
+  searchParams?: { [key: string]: string | string[] | undefined }
+  basePath?: string
+  // Server action can return any shape depending on the list item type
+  serverAction: (input: ServerActionInput) => Promise<unknown>
+}
+
+/**
+ * Main AdminUI component - complete admin interface with routing
+ * Server Component
+ *
+ * Handles routing based on params array:
+ * - [] → Dashboard
+ * - [list] → ListView
+ * - [list, 'create'] → ItemForm (create)
+ * - [list, id] → ItemForm (edit)
+ */
+export function AdminUI<TPrisma>({
+  context,
+  config,
+  params = [],
+  searchParams = {},
+  basePath = '/admin',
+  serverAction,
+}: AdminUIProps<TPrisma>) {
+  // Parse route from params
+  const [urlSegment, action] = params
+
+  // Convert URL segment (kebab-case) to PascalCase listKey
+  const listKey = urlSegment ? getListKeyFromUrl(urlSegment) : undefined
+
+  // Determine current path for navigation highlighting
+  const currentPath = params.length > 0 ? `/${params.join('/')}` : ''
+
+  // Route to appropriate component
+  let content: React.ReactNode
+
+  if (!listKey) {
+    // Dashboard
+    content = <Dashboard context={context} config={config} basePath={basePath} />
+  } else if (action === 'create') {
+    // Create form
+    content = (
+      <ItemForm
+        context={context}
+        config={config}
+        listKey={listKey}
+        mode="create"
+        basePath={basePath}
+        serverAction={serverAction}
+      />
+    )
+  } else if (action && action !== 'create') {
+    // Edit form (action is the item ID)
+    content = (
+      <ItemForm
+        context={context}
+        config={config}
+        listKey={listKey}
+        mode="edit"
+        itemId={action}
+        basePath={basePath}
+        serverAction={serverAction}
+      />
+    )
+  } else {
+    // List view
+    const search = typeof searchParams.search === 'string' ? searchParams.search : undefined
+    const page = typeof searchParams.page === 'string' ? parseInt(searchParams.page, 10) : 1
+
+    content = (
+      <ListView
+        context={context}
+        config={config}
+        listKey={listKey}
+        basePath={basePath}
+        search={search}
+        page={page}
+      />
+    )
+  }
+
+  // Generate theme styles if custom theme is configured
+  const themeStyles = config.ui?.theme ? generateThemeCSS(config.ui.theme) : null
+
+  return (
+    <>
+      {themeStyles && <style dangerouslySetInnerHTML={{ __html: themeStyles }} />}
+      <div className="flex min-h-screen bg-background">
+        <Navigation
+          context={context}
+          config={config}
+          basePath={basePath}
+          currentPath={currentPath}
+        />
+        <main className="flex-1 overflow-y-auto">{content}</main>
+      </div>
+    </>
+  )
+}

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../primitives/dialog.js'
+import { Button } from '../primitives/button.js'
+
+export interface ConfirmDialogProps {
+  isOpen: boolean
+  title: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm: () => void
+  onCancel: () => void
+  variant?: 'danger' | 'warning'
+}
+
+/**
+ * Reusable confirmation dialog component
+ * Used for destructive actions like delete
+ */
+export function ConfirmDialog({
+  isOpen,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel,
+  variant = 'danger',
+}: ConfirmDialogProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{message}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            {cancelLabel}
+          </Button>
+          <Button variant={variant === 'danger' ? 'destructive' : 'default'} onClick={onConfirm}>
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/Dashboard.tsx

@@ -0,0 +1,134 @@
+import Link from 'next/link'
+import { formatListName } from '../lib/utils.js'
+import { AccessContext, getDbKey, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
+import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card.js'
+
+export interface DashboardProps<TPrisma> {
+  context: AccessContext<TPrisma>
+  config: OpenSaasConfig
+  basePath?: string
+}
+
+/**
+ * Dashboard landing page showing all available lists
+ * Server Component
+ */
+export async function Dashboard<TPrisma>({
+  context,
+  config,
+  basePath = '/admin',
+}: DashboardProps<TPrisma>) {
+  const lists = Object.keys(config.lists || {})
+
+  // Get counts for each list
+  const listCounts = await Promise.all(
+    lists.map(async (listKey) => {
+      try {
+        const count = await context.db[getDbKey(listKey)]?.count()
+        return { listKey, count: count || 0 }
+      } catch (error) {
+        console.error(`Failed to get count for ${listKey}:`, error)
+        return { listKey, count: 0 }
+      }
+    }),
+  )
+
+  return (
+    <div className="p-8">
+      {/* Header with gradient */}
+      <div className="mb-8 relative">
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/5 to-accent/5 opacity-100 rounded-2xl" />
+        <div className="relative p-6">
+          <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            Dashboard
+          </h1>
+          <p className="text-muted-foreground">Manage your application data</p>
+        </div>
+      </div>
+
+      {lists.length === 0 ? (
+        <Card className="p-12 text-center border-2 border-dashed">
+          <div className="mb-4 text-4xl">📦</div>
+          <p className="text-muted-foreground mb-2 font-medium">No lists configured</p>
+          <p className="text-sm text-muted-foreground">
+            Add lists to your opensaas.config.ts to get started.
+          </p>
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {listCounts.map(({ listKey, count }) => {
+            const urlKey = getUrlKey(listKey)
+            return (
+              <Link key={listKey} href={`${basePath}/${urlKey}`}>
+                <Card className="group hover:border-primary hover:shadow-lg hover:shadow-primary/20 transition-all duration-200 cursor-pointer h-full relative overflow-hidden">
+                  <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+                  <CardHeader className="relative">
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <CardTitle className="text-xl group-hover:text-primary transition-colors">
+                          {formatListName(listKey)}
+                        </CardTitle>
+                        <p className="text-sm text-muted-foreground mt-1 font-medium">
+                          {count} {count === 1 ? 'item' : 'items'}
+                        </p>
+                      </div>
+                      <div className="text-3xl opacity-60 group-hover:opacity-100 transition-opacity">
+                        📋
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="relative">
+                    <div className="flex items-center text-sm font-medium text-primary">
+                      <span>View all</span>
+                      <svg
+                        className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 5l7 7-7 7"
+                        />
+                      </svg>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            )
+          })}
+        </div>
+      )}
+
+      {lists.length > 0 && (
+        <Card className="mt-12 bg-gradient-to-br from-accent/10 to-primary/10 border-accent/20">
+          <CardHeader>
+            <CardTitle className="text-lg flex items-center gap-2">
+              <span className="text-xl">⚡</span>
+              Quick Actions
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-3">
+              {lists.map((listKey) => {
+                const urlKey = getUrlKey(listKey)
+                return (
+                  <Link
+                    key={listKey}
+                    href={`${basePath}/${urlKey}/create`}
+                    className="inline-flex items-center gap-1 px-4 py-2 rounded-lg bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground font-medium text-sm transition-colors border border-primary/20"
+                  >
+                    <span className="text-lg">+</span>
+                    Create {formatListName(listKey)}
+                  </Link>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}

package/src/components/ItemForm.tsx

@@ -0,0 +1,195 @@
+import * as React from 'react'
+import Link from 'next/link'
+import { ItemFormClient } from './ItemFormClient.js'
+import { formatListName } from '../lib/utils.js'
+import type { ServerActionInput } from '../server/types.js'
+import { AccessContext, getDbKey, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
+import { serializeFieldConfigs } from '../lib/serializeFieldConfig.js'
+
+export interface ItemFormProps<TPrisma> {
+  context: AccessContext<TPrisma>
+  config: OpenSaasConfig
+  listKey: string
+  mode: 'create' | 'edit'
+  itemId?: string
+  basePath?: string
+  // Server action can return any shape depending on the list item type
+  serverAction: (input: ServerActionInput) => Promise<unknown>
+}
+
+/**
+ * Item form component - create or edit an item
+ * Server Component that fetches data and sets up actions
+ */
+export async function ItemForm<TPrisma>({
+  context,
+  config,
+  listKey,
+  mode,
+  itemId,
+  basePath = '/admin',
+  serverAction,
+}: ItemFormProps<TPrisma>) {
+  const listConfig = config.lists[listKey]
+  const urlKey = getUrlKey(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 item data if in edit mode
+  let itemData: Record<string, unknown> = {}
+  if (mode === 'edit' && itemId) {
+    try {
+      // Build include object for relationships
+      const includeRelationships: Record<string, boolean> = {}
+      for (const [fieldName, fieldConfig] of Object.entries(listConfig.fields)) {
+        const fieldConfigAny = fieldConfig as { type: string }
+        if (fieldConfigAny.type === 'relationship') {
+          includeRelationships[fieldName] = true
+        }
+      }
+
+      // Fetch item with relationships included
+      itemData = await context.db[getDbKey(listKey)].findUnique({
+        where: { id: itemId },
+        ...(Object.keys(includeRelationships).length > 0 && { include: includeRelationships }),
+      })
+    } catch (error) {
+      console.error(`Failed to fetch item ${itemId}:`, error)
+    }
+
+    if (!itemData) {
+      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">Item not found</h2>
+            <p>
+              The item you&apos;re trying to edit doesn&apos;t exist or you don&apos;t have access
+              to it.
+            </p>
+            <Link
+              href={`${basePath}/${urlKey}`}
+              className="inline-block mt-4 text-primary hover:underline"
+            >
+              ← Back to {formatListName(listKey)}
+            </Link>
+          </div>
+        </div>
+      )
+    }
+  }
+
+  // Fetch relationship options for all relationship fields
+  const relationshipData: Record<string, Array<{ id: string; label: string }>> = {}
+  for (const [fieldName, fieldConfig] of Object.entries(listConfig.fields)) {
+    // Check if field is a relationship type by checking the discriminated union
+    const fieldConfigAny = fieldConfig as { type: string; ref?: string }
+    if (fieldConfigAny.type === 'relationship') {
+      const ref = fieldConfigAny.ref
+      if (ref) {
+        // Parse ref format: "ListName.fieldName"
+        const relatedListName = ref.split('.')[0]
+        const relatedListConfig = config.lists[relatedListName]
+
+        if (relatedListConfig) {
+          try {
+            const dbContext = context.db
+            const relatedItems = await dbContext[getDbKey(relatedListName)].findMany({})
+
+            // Use 'name' field as label if it exists, otherwise use 'id'
+            relationshipData[fieldName] = relatedItems.map((item: Record<string, unknown>) => ({
+              id: item.id as string,
+              label: ((item.name || item.title || item.id) as string) || '',
+            }))
+          } catch (error) {
+            console.error(`Failed to fetch relationship items for ${fieldName}:`, error)
+            relationshipData[fieldName] = []
+          }
+        }
+      }
+    }
+  }
+
+  // Serialize field configs to remove non-serializable properties
+  const serializableFields = serializeFieldConfigs(listConfig.fields)
+
+  // Transform relationship data in itemData from objects to IDs for form
+  // Also apply valueForClientSerialization transformation
+  const formData = { ...itemData }
+  for (const [fieldName, fieldConfig] of Object.entries(listConfig.fields)) {
+    const fieldConfigAny = fieldConfig as {
+      type: string
+      many?: boolean
+      ui?: Record<string, unknown>
+    }
+    if (fieldConfigAny.type === 'relationship' && formData[fieldName]) {
+      const value = formData[fieldName]
+      if (fieldConfigAny.many && Array.isArray(value)) {
+        // Many relationship: extract IDs from array of objects
+        formData[fieldName] = value.map((item: Record<string, unknown>) => item.id as string)
+      } else if (value && typeof value === 'object' && 'id' in value) {
+        // Single relationship: extract ID from object
+        formData[fieldName] = (value as Record<string, unknown>).id as string
+      }
+    }
+
+    // Apply valueForClientSerialization if defined
+    if (
+      fieldConfigAny.ui?.valueForClientSerialization &&
+      typeof fieldConfigAny.ui.valueForClientSerialization === 'function'
+    ) {
+      const transformer = fieldConfigAny.ui.valueForClientSerialization as (args: {
+        value: unknown
+      }) => unknown
+      formData[fieldName] = transformer({ value: formData[fieldName] })
+    }
+  }
+
+  return (
+    <div className="p-8 max-w-4xl">
+      {/* Header */}
+      <div className="mb-8">
+        <Link
+          href={`${basePath}/${urlKey}`}
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
+        >
+          <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+          Back to {formatListName(listKey)}
+        </Link>
+        <h1 className="text-3xl font-bold">
+          {mode === 'create' ? 'Create' : 'Edit'} {formatListName(listKey)}
+        </h1>
+      </div>
+
+      {/* Form */}
+      <div className="bg-card border border-border rounded-lg p-6">
+        <ItemFormClient
+          listKey={listKey}
+          urlKey={urlKey}
+          mode={mode}
+          fields={serializableFields}
+          initialData={JSON.parse(JSON.stringify(formData))}
+          itemId={itemId}
+          basePath={basePath}
+          serverAction={serverAction}
+          relationshipData={relationshipData}
+        />
+      </div>
+    </div>
+  )
+}