@opensaas/stack-ui 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,8 @@
+
+> @opensaas/stack-ui@0.1.0 build /home/runner/work/stack/stack/packages/ui
+> tsc && npm run build:css
+
+
+> @opensaas/stack-ui@0.1.0 build:css
+> mkdir -p dist/styles && postcss ./src/styles/globals.css -o ./dist/styles/globals.css
+

package/README.md

@@ -0,0 +1,286 @@
+# @opensaas/stack-ui
+
+Composable React UI components for OpenSaas Stack, built with Radix UI and shadcn/ui.
+
+## Installation
+
+```bash
+pnpm add @opensaas/stack-ui
+```
+
+## Features
+
+- 🎨 **Four Levels of Abstraction** - Primitives, Fields, Standalone Components, Full Admin UI
+- ♿ **Accessible** - Built with Radix UI primitives
+- 🎯 **Type-Safe** - Full TypeScript support
+- 🎨 **Customizable** - Tailwind CSS v4 with CSS variables
+- 📦 **Tree-Shakeable** - Import only what you need
+- 🧩 **Composable** - Mix and match components
+
+## Package Exports
+
+```typescript
+// Primitives (shadcn/ui components)
+import { Button, Input, Card, Table, Dialog } from '@opensaas/stack-ui/primitives'
+
+// Field components (OpenSaas-aware)
+import { TextField, SelectField, RelationshipField } from '@opensaas/stack-ui/fields'
+
+// Standalone components (complete features)
+import { ItemCreateForm, ListTable, SearchBar } from '@opensaas/stack-ui/standalone'
+
+// Full components (page-level)
+import { Dashboard, ListView, ItemForm, AdminUI } from '@opensaas/stack-ui'
+
+// Server utilities
+import { getAdminContext } from '@opensaas/stack-ui/server'
+
+// Utility functions
+import { cn, formatListName, formatFieldName } from '@opensaas/stack-ui/lib/utils'
+
+// Styles
+import '@opensaas/stack-ui/styles'
+```
+
+## Architecture
+
+### Level 1: Primitives (`@opensaas/stack-ui/primitives`)
+
+Low-level UI components based on Radix UI and shadcn/ui.
+
+**Available Components:**
+
+- Button - Buttons with variants
+- Input - Text inputs
+- Label - Form labels
+- Card - Content containers
+- Table - Data tables
+- Dialog - Modal dialogs
+- Select - Dropdown selects
+- Checkbox - Checkboxes
+
+**Example:**
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent } from '@opensaas/stack-ui/primitives'
+;<Card>
+  <CardHeader>
+    <CardTitle>Welcome</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <Button>Get Started</Button>
+  </CardContent>
+</Card>
+```
+
+### Level 2: Fields (`@opensaas/stack-ui/fields`)
+
+OpenSaas-aware form fields with validation and access control.
+
+**Available Fields:**
+
+- TextField
+- IntegerField
+- CheckboxField
+- SelectField
+- PasswordField
+- TimestampField
+- RelationshipField
+
+**Example:**
+
+```tsx
+import { TextField, SelectField } from '@opensaas/stack-ui/fields'
+;<form>
+  <TextField name="email" label="Email" value={email} onChange={setEmail} required />
+  <SelectField
+    name="role"
+    label="Role"
+    value={role}
+    onChange={setRole}
+    options={[
+      { label: 'Admin', value: 'admin' },
+      { label: 'User', value: 'user' },
+    ]}
+  />
+</form>
+```
+
+### Level 3: Standalone Components (`@opensaas/stack-ui/standalone`)
+
+Complete, reusable components for common admin tasks.
+
+**Available Components:**
+
+#### ItemCreateForm
+
+```tsx
+import { ItemCreateForm } from '@opensaas/stack-ui/standalone'
+;<ItemCreateForm
+  fields={config.lists.Post.fields}
+  onSubmit={async (data) => {
+    const post = await createPost(data)
+    return { success: !!post }
+  }}
+  onCancel={() => router.back()}
+/>
+```
+
+#### ItemEditForm
+
+```tsx
+import { ItemEditForm } from '@opensaas/stack-ui/standalone'
+;<ItemEditForm
+  fields={config.lists.Post.fields}
+  initialData={post}
+  onSubmit={async (data) => {
+    const updated = await updatePost(post.id, data)
+    return { success: !!updated }
+  }}
+/>
+```
+
+#### ListTable
+
+```tsx
+import { ListTable } from '@opensaas/stack-ui/standalone'
+;<ListTable
+  items={posts}
+  fieldTypes={{ title: 'text', status: 'select' }}
+  columns={['title', 'status']}
+  onRowClick={(post) => router.push(`/posts/${post.id}`)}
+  sortable
+/>
+```
+
+#### SearchBar
+
+```tsx
+import { SearchBar } from '@opensaas/stack-ui/standalone'
+;<SearchBar onSearch={(query) => fetchPosts({ search: query })} placeholder="Search posts..." />
+```
+
+#### DeleteButton
+
+```tsx
+import { DeleteButton } from '@opensaas/stack-ui/standalone'
+;<DeleteButton
+  onDelete={async () => {
+    await deletePost(postId)
+    return { success: true }
+  }}
+  itemName="post"
+/>
+```
+
+### Level 4: Full Admin UI (`@opensaas/stack-ui`)
+
+Complete admin interface with routing and navigation.
+
+```tsx
+import { AdminUI } from '@opensaas/stack-ui'
+;<AdminUI
+  context={context}
+  params={params?.admin}
+  searchParams={searchParams}
+  basePath="/admin"
+  serverAction={handleServerAction}
+/>
+```
+
+## Component Registry
+
+Extend or override field components:
+
+```tsx
+import { registerFieldComponent } from '@opensaas/stack-ui'
+import { ColorPickerField } from './components/ColorPickerField'
+
+// Register globally
+registerFieldComponent('color', ColorPickerField)
+
+// Use in config
+fields: {
+  themeColor: text({
+    ui: { fieldType: 'color' },
+  })
+}
+
+// Or override per-field
+fields: {
+  slug: text({
+    ui: { component: SlugField },
+  })
+}
+```
+
+## Theming
+
+All components use Tailwind CSS v4 with CSS variables:
+
+```css
+/* app/globals.css */
+@import '@opensaas/stack-ui/styles';
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+}
+
+.dark {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+  /* ... */
+}
+```
+
+## Accessibility
+
+All components follow WAI-ARIA guidelines:
+
+- Proper semantic HTML
+- ARIA attributes
+- Keyboard navigation
+- Focus management
+- Screen reader support
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import type {
+  FieldComponent,
+  FieldComponentProps,
+  ItemCreateFormProps,
+  ListTableProps,
+  AdminUIProps,
+} from '@opensaas/stack-ui'
+```
+
+## Examples
+
+- [Blog Example](../../examples/blog) - Basic usage with full AdminUI
+- [Custom Field Example](../../examples/custom-field) - Custom field components
+- [Composable Dashboard](../../examples/composable-dashboard) - Using standalone components
+
+## Learn More
+
+- [Composability Guide](../../docs/COMPOSABILITY.md) - Complete guide to all four levels
+- [API Reference](../../docs/API.md) - Full API documentation
+- [OpenSaas Stack](../../README.md) - Stack overview
+
+## License
+
+MIT

package/dist/components/AdminUI.d.ts

@@ -0,0 +1,24 @@
+import type { ServerActionInput } from '../server/types.js';
+import { AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
+export interface AdminUIProps<TPrisma> {
+    context: AccessContext<TPrisma>;
+    config: OpenSaasConfig;
+    params?: string[];
+    searchParams?: {
+        [key: string]: string | string[] | undefined;
+    };
+    basePath?: string;
+    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 declare function AdminUI<TPrisma>({ context, config, params, searchParams, basePath, serverAction, }: AdminUIProps<TPrisma>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AdminUI.d.ts.map

package/dist/components/AdminUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminUI.d.ts","sourceRoot":"","sources":["../../src/components/AdminUI.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAqB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGvF,MAAM,WAAW,YAAY,CAAC,OAAO;IACnC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;KAAE,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;CAC7D;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,EAC/B,OAAO,EACP,MAAM,EACN,MAAW,EACX,YAAiB,EACjB,QAAmB,EACnB,YAAY,GACb,EAAE,YAAY,CAAC,OAAO,CAAC,2CA2EvB"}

package/dist/components/AdminUI.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Navigation } from './Navigation.js';
+import { Dashboard } from './Dashboard.js';
+import { ListView } from './ListView.js';
+import { ItemForm } from './ItemForm.js';
+import { getListKeyFromUrl } from '@opensaas/stack-core';
+import { generateThemeCSS } from '../lib/theme.js';
+/**
+ * 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({ context, config, params = [], searchParams = {}, basePath = '/admin', serverAction, }) {
+    // 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;
+    if (!listKey) {
+        // Dashboard
+        content = _jsx(Dashboard, { context: context, config: config, basePath: basePath });
+    }
+    else if (action === 'create') {
+        // Create form
+        content = (_jsx(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 = (_jsx(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 = (_jsx(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 (_jsxs(_Fragment, { children: [themeStyles && _jsx("style", { dangerouslySetInnerHTML: { __html: themeStyles } }), _jsxs("div", { className: "flex min-h-screen bg-background", children: [_jsx(Navigation, { context: context, config: config, basePath: basePath, currentPath: currentPath }), _jsx("main", { className: "flex-1 overflow-y-auto", children: content })] })] }));
+}

package/dist/components/ConfirmDialog.d.ts

@@ -0,0 +1,16 @@
+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 declare function ConfirmDialog({ isOpen, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, variant, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/dist/components/ConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAC/B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,OAAO,EACP,YAAwB,EACxB,WAAsB,EACtB,SAAS,EACT,QAAQ,EACR,OAAkB,GACnB,EAAE,kBAAkB,2CAmBpB"}

package/dist/components/ConfirmDialog.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../primitives/dialog.js';
+import { Button } from '../primitives/button.js';
+/**
+ * Reusable confirmation dialog component
+ * Used for destructive actions like delete
+ */
+export function ConfirmDialog({ isOpen, title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', onConfirm, onCancel, variant = 'danger', }) {
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onCancel(), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: message })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onCancel, children: cancelLabel }), _jsx(Button, { variant: variant === 'danger' ? 'destructive' : 'default', onClick: onConfirm, children: confirmLabel })] })] }) }));
+}

package/dist/components/Dashboard.d.ts

@@ -0,0 +1,12 @@
+import { AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
+export interface DashboardProps<TPrisma> {
+    context: AccessContext<TPrisma>;
+    config: OpenSaasConfig;
+    basePath?: string;
+}
+/**
+ * Dashboard landing page showing all available lists
+ * Server Component
+ */
+export declare function Dashboard<TPrisma>({ context, config, basePath, }: DashboardProps<TPrisma>): Promise<import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=Dashboard.d.ts.map

package/dist/components/Dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGzF,MAAM,WAAW,cAAc,CAAC,OAAO;IACrC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;;GAGG;AACH,wBAAsB,SAAS,CAAC,OAAO,EAAE,EACvC,OAAO,EACP,MAAM,EACN,QAAmB,GACpB,EAAE,cAAc,CAAC,OAAO,CAAC,oDAkHzB"}

package/dist/components/Dashboard.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import { formatListName } from '../lib/utils.js';
+import { getDbKey, getUrlKey } from '@opensaas/stack-core';
+import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card.js';
+/**
+ * Dashboard landing page showing all available lists
+ * Server Component
+ */
+export async function Dashboard({ context, config, basePath = '/admin', }) {
+    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 (_jsxs("div", { className: "p-8", children: [_jsxs("div", { className: "mb-8 relative", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-primary/5 to-accent/5 opacity-100 rounded-2xl" }), _jsxs("div", { className: "relative p-6", children: [_jsx("h1", { className: "text-4xl font-bold mb-2 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent", children: "Dashboard" }), _jsx("p", { className: "text-muted-foreground", children: "Manage your application data" })] })] }), lists.length === 0 ? (_jsxs(Card, { className: "p-12 text-center border-2 border-dashed", children: [_jsx("div", { className: "mb-4 text-4xl", children: "\uD83D\uDCE6" }), _jsx("p", { className: "text-muted-foreground mb-2 font-medium", children: "No lists configured" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Add lists to your opensaas.config.ts to get started." })] })) : (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: listCounts.map(({ listKey, count }) => {
+                    const urlKey = getUrlKey(listKey);
+                    return (_jsx(Link, { href: `${basePath}/${urlKey}`, children: _jsxs(Card, { className: "group hover:border-primary hover:shadow-lg hover:shadow-primary/20 transition-all duration-200 cursor-pointer h-full relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/5 to-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" }), _jsx(CardHeader, { className: "relative", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl group-hover:text-primary transition-colors", children: formatListName(listKey) }), _jsxs("p", { className: "text-sm text-muted-foreground mt-1 font-medium", children: [count, " ", count === 1 ? 'item' : 'items'] })] }), _jsx("div", { className: "text-3xl opacity-60 group-hover:opacity-100 transition-opacity", children: "\uD83D\uDCCB" })] }) }), _jsx(CardContent, { className: "relative", children: _jsxs("div", { className: "flex items-center text-sm font-medium text-primary", children: [_jsx("span", { children: "View all" }), _jsx("svg", { className: "ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }) })] }) }, listKey));
+                }) })), lists.length > 0 && (_jsxs(Card, { className: "mt-12 bg-gradient-to-br from-accent/10 to-primary/10 border-accent/20", children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: [_jsx("span", { className: "text-xl", children: "\u26A1" }), "Quick Actions"] }) }), _jsx(CardContent, { children: _jsx("div", { className: "flex flex-wrap gap-3", children: lists.map((listKey) => {
+                                const urlKey = getUrlKey(listKey);
+                                return (_jsxs(Link, { 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", children: [_jsx("span", { className: "text-lg", children: "+" }), "Create ", formatListName(listKey)] }, listKey));
+                            }) }) })] }))] }));
+}

package/dist/components/ItemForm.d.ts

@@ -0,0 +1,17 @@
+import type { ServerActionInput } from '../server/types.js';
+import { AccessContext, OpenSaasConfig } from '@opensaas/stack-core';
+export interface ItemFormProps<TPrisma> {
+    context: AccessContext<TPrisma>;
+    config: OpenSaasConfig;
+    listKey: string;
+    mode: 'create' | 'edit';
+    itemId?: string;
+    basePath?: string;
+    serverAction: (input: ServerActionInput) => Promise<unknown>;
+}
+/**
+ * Item form component - create or edit an item
+ * Server Component that fetches data and sets up actions
+ */
+export declare function ItemForm<TPrisma>({ context, config, listKey, mode, itemId, basePath, serverAction, }: ItemFormProps<TPrisma>): Promise<import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=ItemForm.d.ts.map

package/dist/components/ItemForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemForm.d.ts","sourceRoot":"","sources":["../../src/components/ItemForm.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGzF,MAAM,WAAW,aAAa,CAAC,OAAO;IACpC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;CAC7D;AAED;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,OAAO,EAAE,EACtC,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,MAAM,EACN,QAAmB,EACnB,YAAY,GACb,EAAE,aAAa,CAAC,OAAO,CAAC,oDAmKxB"}

package/dist/components/ItemForm.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import { ItemFormClient } from './ItemFormClient.js';
+import { formatListName } from '../lib/utils.js';
+import { getDbKey, getUrlKey } from '@opensaas/stack-core';
+import { serializeFieldConfigs } from '../lib/serializeFieldConfig.js';
+/**
+ * Item form component - create or edit an item
+ * Server Component that fetches data and sets up actions
+ */
+export async function ItemForm({ context, config, listKey, mode, itemId, basePath = '/admin', serverAction, }) {
+    const listConfig = config.lists[listKey];
+    const urlKey = getUrlKey(listKey);
+    if (!listConfig) {
+        return (_jsx("div", { className: "p-8", children: _jsxs("div", { className: "bg-destructive/10 border border-destructive text-destructive rounded-lg p-6", children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "List not found" }), _jsxs("p", { children: ["The list \"", listKey, "\" does not exist in your configuration."] })] }) }));
+    }
+    // Fetch item data if in edit mode
+    let itemData = {};
+    if (mode === 'edit' && itemId) {
+        try {
+            // Build include object for relationships
+            const includeRelationships = {};
+            for (const [fieldName, fieldConfig] of Object.entries(listConfig.fields)) {
+                const fieldConfigAny = fieldConfig;
+                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 (_jsx("div", { className: "p-8", children: _jsxs("div", { className: "bg-destructive/10 border border-destructive text-destructive rounded-lg p-6", children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "Item not found" }), _jsx("p", { children: "The item you're trying to edit doesn't exist or you don't have access to it." }), _jsxs(Link, { href: `${basePath}/${urlKey}`, className: "inline-block mt-4 text-primary hover:underline", children: ["\u2190 Back to ", formatListName(listKey)] })] }) }));
+        }
+    }
+    // Fetch relationship options for all relationship fields
+    const relationshipData = {};
+    for (const [fieldName, fieldConfig] of Object.entries(listConfig.fields)) {
+        // Check if field is a relationship type by checking the discriminated union
+        const fieldConfigAny = fieldConfig;
+        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) => ({
+                            id: item.id,
+                            label: (item.name || item.title || item.id) || '',
+                        }));
+                    }
+                    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;
+        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) => item.id);
+            }
+            else if (value && typeof value === 'object' && 'id' in value) {
+                // Single relationship: extract ID from object
+                formData[fieldName] = value.id;
+            }
+        }
+        // Apply valueForClientSerialization if defined
+        if (fieldConfigAny.ui?.valueForClientSerialization &&
+            typeof fieldConfigAny.ui.valueForClientSerialization === 'function') {
+            const transformer = fieldConfigAny.ui.valueForClientSerialization;
+            formData[fieldName] = transformer({ value: formData[fieldName] });
+        }
+    }
+    return (_jsxs("div", { className: "p-8 max-w-4xl", children: [_jsxs("div", { className: "mb-8", children: [_jsxs(Link, { href: `${basePath}/${urlKey}`, className: "inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4", children: [_jsx("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), "Back to ", formatListName(listKey)] }), _jsxs("h1", { className: "text-3xl font-bold", children: [mode === 'create' ? 'Create' : 'Edit', " ", formatListName(listKey)] })] }), _jsx("div", { className: "bg-card border border-border rounded-lg p-6", children: _jsx(ItemFormClient, { listKey: listKey, urlKey: urlKey, mode: mode, fields: serializableFields, initialData: JSON.parse(JSON.stringify(formData)), itemId: itemId, basePath: basePath, serverAction: serverAction, relationshipData: relationshipData }) })] }));
+}

package/dist/components/ItemFormClient.d.ts

@@ -0,0 +1,22 @@
+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 declare function ItemFormClient({ listKey, urlKey, mode, fields, initialData, itemId, basePath, serverAction, relationshipData, }: ItemFormClientProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ItemFormClient.d.ts.map

package/dist/components/ItemFormClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemFormClient.d.ts","sourceRoot":"","sources":["../../src/components/ItemFormClient.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAA;AAE7E,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAA;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACrC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAA;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAA;CACxE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,MAAM,EACN,IAAI,EACJ,MAAM,EACN,WAAgB,EAChB,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,gBAAqB,GACtB,EAAE,mBAAmB,2CAsMrB"}