@opensaas/stack-ui 0.1.0 → 0.1.2

package/.turbo/turbo-build.log

@@ -1,8 +1,10 @@
 
-> @opensaas/stack-ui@0.1.0 build /home/runner/work/stack/stack/packages/ui
+> @opensaas/stack-ui@0.1.2 build /home/runner/work/stack/stack/packages/ui
 > tsc && npm run build:css
 
+npm warn Unknown env config "verify-deps-before-run". This will stop working in the next major version of npm.
+npm warn Unknown env config "_jsr-registry". This will stop working in the next major version of npm.
 
-> @opensaas/stack-ui@0.1.0 build:css
+> @opensaas/stack-ui@0.1.2 build:css
 > mkdir -p dist/styles && postcss ./src/styles/globals.css -o ./dist/styles/globals.css
 

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @opensaas/stack-ui
+
+## 0.1.2
+
+### Patch Changes
+
+- @opensaas/stack-core@0.1.2
+
+## 0.1.1
+
+### Patch Changes
+
+- 9a3fda5: Add JSON field
+- 045c071: Add field and image upload
+- Updated dependencies [9a3fda5]
+- Updated dependencies [f8ebc0e]
+- Updated dependencies [045c071]
+  - @opensaas/stack-core@0.1.1

package/CLAUDE.md

@@ -0,0 +1,311 @@
+# @opensaas/stack-ui
+
+Composable React UI components for OpenSaas Stack admin interfaces, built on shadcn/ui primitives.
+
+## Purpose
+
+Provides multiple levels of UI abstraction:
+
+1. **Full AdminUI** - Complete admin interface with routing
+2. **Standalone Components** - Drop-in CRUD components (forms, tables)
+3. **Field Components** - Individual field inputs
+4. **Primitives** - Low-level shadcn/ui components for custom UIs
+
+## Key Exports
+
+### Main Export (`src/index.ts`)
+
+- `AdminUI` - Complete admin interface
+- `registerFieldComponent(type, Component)` - Register custom field components
+- Primitives re-exported
+
+### Primitives (`/primitives`)
+
+shadcn/ui components:
+
+- `Button`, `Input`, `Label`, `Checkbox`, `Select`
+- `Card`, `CardHeader`, `CardContent`, `CardFooter`
+- `Table`, `TableHeader`, `TableBody`, `TableRow`, `TableCell`
+- `Dialog`, `DialogContent`, `DialogHeader`, `DialogFooter`
+- `Popover`, `Calendar`, `DatetimePicker`, `TimePicker`
+- `Combobox` - Search and select component
+
+### Fields (`/fields`)
+
+Field components for forms:
+
+- `TextField`, `IntegerField`, `CheckboxField`, `TimestampField`
+- `PasswordField`, `SelectField`, `RelationshipField`
+- `FieldRenderer` - Renders field based on config (uses registry)
+
+### Standalone (`/standalone`)
+
+Composable CRUD components:
+
+- `ItemCreateForm` - Create new item
+- `ItemEditForm` - Edit existing item
+- `ListTable` - Display list of items
+- `SearchBar` - Search and filter
+- `DeleteButton` - Delete with confirmation
+
+### Server (`/server`)
+
+- `getAdminContext(headers)` - Get context with session from request headers
+
+## Architecture Patterns
+
+### Component Registry
+
+Field components are registered by type, avoiding switch statements:
+
+```typescript
+// Default registry
+registerFieldComponent('text', TextField)
+registerFieldComponent('integer', IntegerField)
+// etc.
+
+// Custom registration
+registerFieldComponent('color', ColorPickerField)
+```
+
+### Component Resolution Priority
+
+`FieldRenderer` resolves components in order:
+
+1. `field.ui.component` - Per-field override (highest priority)
+2. `field.ui.fieldType` - Custom type lookup in registry
+3. `field.type` - Default type lookup in registry
+
+### Composability Levels
+
+**Level 1: Full AdminUI**
+
+```typescript
+import { AdminUI } from '@opensaas/stack-ui'
+<AdminUI context={context} config={config} />
+```
+
+**Level 2: Standalone Components**
+
+```typescript
+import { ItemCreateForm, ListTable } from '@opensaas/stack-ui/standalone'
+
+<ItemCreateForm
+  listKey="Post"
+  context={context}
+  onSuccess={(item) => router.push(`/posts/${item.id}`)}
+/>
+
+<ListTable
+  listKey="Post"
+  context={context}
+  columns={['title', 'author', 'createdAt']}
+/>
+```
+
+**Level 3: Field Components**
+
+```typescript
+import { TextField, SelectField } from '@opensaas/stack-ui/fields'
+
+<form>
+  <TextField
+    name="title"
+    value={title}
+    onChange={setTitle}
+    label="Title"
+    required
+  />
+</form>
+```
+
+**Level 4: Primitives**
+
+```typescript
+import { Button, Card, Input } from '@opensaas/stack-ui/primitives'
+
+<Card>
+  <Input placeholder="Custom input" />
+  <Button onClick={handleClick}>Submit</Button>
+</Card>
+```
+
+### UI Options Pass-Through
+
+Field config `ui` options automatically pass to components:
+
+```typescript
+// Config
+content: richText({
+  ui: {
+    placeholder: 'Write content...',
+    minHeight: 300,
+    customOption: 'value',
+  },
+})
+
+// Component receives all ui options as props
+export function RichTextField({ placeholder, minHeight, customOption, ...baseProps }) {
+  // Use options
+}
+```
+
+`FieldRenderer` extracts `component` and `fieldType`, passes rest as props.
+
+### Server/Client Boundaries
+
+- `AdminUI` is server component (uses `getAdminContext`)
+- Forms and interactive components are client components
+- Data serialization via props (no functions, only JSON-serializable data)
+
+## Integration Points
+
+### With @opensaas/stack-core
+
+- Reads config to generate UI
+- Uses context for all data operations
+- Field components map to field types via registry
+
+### With @opensaas/stack-auth
+
+- `getAdminContext` uses Better-auth to get session
+- Session flows through context to access control
+- Auth UI components imported separately from `@opensaas/stack-auth/ui`
+
+### With Third-Party Field Packages
+
+Third-party fields register components on client side:
+
+```typescript
+// lib/register-fields.ts
+'use client'
+import { registerFieldComponent } from '@opensaas/stack-ui'
+import { RichTextField } from '@opensaas/stack-tiptap'
+registerFieldComponent('richText', RichTextField)
+
+// app/admin/[[...admin]]/page.tsx
+import '../../../lib/register-fields' // Side-effect import
+```
+
+## Common Patterns
+
+### Basic Admin Setup
+
+```typescript
+// app/admin/[[...admin]]/page.tsx
+import { AdminUI } from '@opensaas/stack-ui'
+import { getAdminContext } from '@opensaas/stack-ui/server'
+import config from '@/opensaas.config'
+
+export default async function AdminPage() {
+  const context = await getAdminContext()
+  return <AdminUI context={context} config={config} />
+}
+```
+
+### Custom Field Component (Global Registration)
+
+```typescript
+// lib/register-fields.ts
+'use client'
+import { registerFieldComponent } from '@opensaas/stack-ui'
+import { ColorPickerField } from './components/ColorPickerField'
+
+registerFieldComponent('color', ColorPickerField)
+
+// opensaas.config.ts
+fields: {
+  themeColor: text({ ui: { fieldType: 'color' } })
+}
+```
+
+### Custom Field Component (Per-Field Override)
+
+```typescript
+// opensaas.config.ts
+import { SlugField } from './components/SlugField'
+
+fields: {
+  slug: text({ ui: { component: SlugField } })
+}
+```
+
+### Composable Dashboard
+
+```typescript
+import { ItemCreateForm, ListTable } from '@opensaas/stack-ui/standalone'
+import { Card, Button } from '@opensaas/stack-ui/primitives'
+
+export default function CustomDashboard() {
+  return (
+    <div className="grid gap-4">
+      <Card>
+        <h2>Recent Posts</h2>
+        <ListTable
+          listKey="Post"
+          context={context}
+          columns={['title', 'status', 'createdAt']}
+        />
+      </Card>
+
+      <Card>
+        <h2>Create Post</h2>
+        <ItemCreateForm
+          listKey="Post"
+          context={context}
+          onSuccess={(item) => router.push(`/posts/${item.id}`)}
+        />
+      </Card>
+    </div>
+  )
+}
+```
+
+### Standalone Form with Custom Actions
+
+```typescript
+import { ItemEditForm } from '@opensaas/stack-ui/standalone'
+
+<ItemEditForm
+  listKey="Post"
+  itemId={postId}
+  context={context}
+  onSuccess={(item) => {
+    // Custom success handling
+    toast.success('Post updated!')
+    router.push('/posts')
+  }}
+  onError={(error) => {
+    // Custom error handling
+    toast.error(error.message)
+  }}
+/>
+```
+
+## Styling
+
+Package includes Tailwind v4 styles:
+
+```typescript
+// app/layout.tsx
+import '@opensaas/stack-ui/styles'
+```
+
+Custom theming via CSS variables (follows shadcn/ui conventions).
+
+## Type Safety
+
+All components are fully typed:
+
+- Context types inferred from Prisma client
+- Field props typed based on field config
+- Form data validated with react-hook-form + Zod
+
+Avoid `any` types - all props are strongly typed for type safety.
+
+## Performance
+
+- Server components by default (AdminUI, getAdminContext)
+- Client components marked with `'use client'`
+- Minimal client-side JS for interactive features only
+- Data fetching on server reduces client bundle size

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 OpenSaas Stack Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -1 +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"}
+{"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,2CAwMrB"}

package/dist/components/ItemFormClient.js

@@ -36,6 +36,7 @@ export function ItemFormClient({ listKey, urlKey, mode, fields, initialData = {}
             try {
                 // Transform relationship fields to Prisma format
                 // Filter out password fields with isSet objects (unchanged passwords)
+                // File/Image fields: pass File objects through (Next.js will serialize them)
                 const transformedData = {};
                 for (const [fieldName, value] of Object.entries(formData)) {
                     const fieldConfig = fields[fieldName];
@@ -64,7 +65,8 @@ export function ItemFormClient({ listKey, urlKey, mode, fields, initialData = {}
                         }
                     }
                     else {
-                        // Non-relationship field: pass through
+                        // Non-relationship field: pass through (including File objects for file/image fields)
+                        // File objects will be serialized by Next.js server action
                         transformedData[fieldName] = value;
                     }
                 }

package/dist/components/fields/FileField.d.ts

@@ -0,0 +1,21 @@
+import type { FileMetadata } from '@opensaas/stack-core';
+export interface FileFieldProps {
+    name: string;
+    value: File | FileMetadata | null;
+    onChange: (value: File | FileMetadata | null) => void;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    mode?: 'read' | 'edit';
+    helpText?: string;
+    placeholder?: string;
+}
+/**
+ * File upload field with drag-and-drop support
+ *
+ * Stores File objects in form state. The actual upload happens server-side
+ * during form submission via field hooks.
+ */
+export declare function FileField({ name, value, onChange, label, error, disabled, required, mode, helpText, placeholder, }: FileFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FileField.d.ts.map

package/dist/components/fields/FileField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/FileField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAMxD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,GAAG,YAAY,GAAG,IAAI,CAAA;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,YAAY,GAAG,IAAI,KAAK,IAAI,CAAA;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,QAAQ,EACR,WAA8C,GAC/C,EAAE,cAAc,2CA+KhB"}

package/dist/components/fields/FileField.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Button } from '../../primitives/button.js';
+import { Input } from '../../primitives/input.js';
+import { Label } from '../../primitives/label.js';
+import { Upload, X, File, Check } from 'lucide-react';
+/**
+ * File upload field with drag-and-drop support
+ *
+ * Stores File objects in form state. The actual upload happens server-side
+ * during form submission via field hooks.
+ */
+export function FileField({ name, value, onChange, label, error, disabled, required, mode = 'edit', helpText, placeholder = 'Choose a file or drag and drop', }) {
+    const [isDragOver, setIsDragOver] = useState(false);
+    const handleFileSelect = useCallback((file) => {
+        // Store File object in form state
+        // Upload will happen server-side during form submission
+        onChange(file);
+    }, [onChange]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+        if (disabled || mode === 'read')
+            return;
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0) {
+            handleFileSelect(files[0]);
+        }
+    }, [disabled, mode, handleFileSelect]);
+    const handleInputChange = useCallback((e) => {
+        const files = Array.from(e.target.files || []);
+        if (files.length > 0) {
+            handleFileSelect(files[0]);
+        }
+    }, [handleFileSelect]);
+    const handleRemove = useCallback(() => {
+        onChange(null);
+    }, [onChange]);
+    // Determine if value is File or FileMetadata
+    // Use duck typing instead of instanceof to support SSR
+    const isFile = value &&
+        typeof value === 'object' &&
+        'arrayBuffer' in value &&
+        typeof value.arrayBuffer === 'function';
+    const isFileMetadata = value && !isFile && typeof value === 'object' && 'url' in value;
+    // Read-only mode
+    if (mode === 'read') {
+        return (_jsxs("div", { className: "space-y-2", children: [label && (_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] })), isFileMetadata ? (_jsxs("div", { className: "flex items-center gap-2 p-3 border rounded-md bg-muted", children: [_jsx(File, { className: "h-4 w-4" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate", children: value.originalFilename }), _jsx("p", { className: "text-xs text-muted-foreground", children: formatFileSize(value.size) })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => window.open(value.url, '_blank'), children: "Download" })] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No file uploaded" }))] }));
+    }
+    // Edit mode
+    return (_jsxs("div", { className: "space-y-2", children: [label && (_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] })), isFile || isFileMetadata ? (
+            // File selected/uploaded - show file info
+            _jsxs("div", { className: "flex items-center gap-2 p-3 border rounded-md", children: [_jsx(Check, { className: "h-4 w-4 text-green-600" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate", children: isFile ? value.name : value.originalFilename }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [formatFileSize(isFile ? value.size : value.size), isFileMetadata && ` • ${value.mimeType}`, isFile && ' • Will upload on save'] })] }), isFileMetadata && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => window.open(value.url, '_blank'), children: "View" })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleRemove, disabled: disabled, children: _jsx(X, { className: "h-4 w-4" }) })] })) : (
+            // No file - show upload area
+            _jsx(_Fragment, { children: _jsxs("div", { className: `
+              relative border-2 border-dashed rounded-md p-6
+              transition-colors cursor-pointer
+              ${isDragOver ? 'border-primary bg-primary/5' : 'border-muted-foreground/25'}
+              ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-primary hover:bg-primary/5'}
+            `, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx(Input, { id: name, type: "file", onChange: handleInputChange, disabled: disabled, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer" }), _jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [_jsx(Upload, { className: "h-8 w-8 text-muted-foreground" }), _jsx("p", { className: "text-sm font-medium", children: placeholder }), helpText && _jsx("p", { className: "text-xs text-muted-foreground", children: helpText })] })] }) })), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+}
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Math.round((bytes / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;
+}

package/dist/components/fields/ImageField.d.ts

@@ -0,0 +1,23 @@
+import type { ImageMetadata } from '@opensaas/stack-core';
+export interface ImageFieldProps {
+    name: string;
+    value: File | ImageMetadata | null;
+    onChange: (value: File | ImageMetadata | null) => void;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    mode?: 'read' | 'edit';
+    helpText?: string;
+    placeholder?: string;
+    showPreview?: boolean;
+    previewSize?: number;
+}
+/**
+ * Image upload field with preview, drag-and-drop, and transformation support
+ *
+ * Stores File objects in form state with client-side preview. The actual upload
+ * happens server-side during form submission via field hooks.
+ */
+export declare function ImageField({ name, value, onChange, label, error, disabled, required, mode, helpText, placeholder, showPreview, previewSize, }: ImageFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageField.d.ts.map

package/dist/components/fields/ImageField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ImageField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAOzD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,IAAI,GAAG,aAAa,GAAG,IAAI,CAAA;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,aAAa,GAAG,IAAI,KAAK,IAAI,CAAA;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,QAAQ,EACR,WAAgD,EAChD,WAAkB,EAClB,WAAiB,GAClB,EAAE,eAAe,2CAmRjB"}

package/dist/components/fields/ImageField.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Button } from '../../primitives/button.js';
+import { Input } from '../../primitives/input.js';
+import { Label } from '../../primitives/label.js';
+import { Upload, X, Eye, ImageIcon } from 'lucide-react';
+import Image from 'next/image';
+/**
+ * Image upload field with preview, drag-and-drop, and transformation support
+ *
+ * Stores File objects in form state with client-side preview. The actual upload
+ * happens server-side during form submission via field hooks.
+ */
+export function ImageField({ name, value, onChange, label, error, disabled, required, mode = 'edit', helpText, placeholder = 'Choose an image or drag and drop', showPreview = true, previewSize = 200, }) {
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const handleFileSelect = useCallback((file) => {
+        // Validate file is an image
+        if (!file.type.startsWith('image/')) {
+            return;
+        }
+        // Generate client-side preview
+        if (showPreview) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                setPreviewUrl(e.target?.result);
+            };
+            reader.readAsDataURL(file);
+        }
+        // Store File object in form state
+        // Upload will happen server-side during form submission
+        onChange(file);
+    }, [onChange, showPreview]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+        if (disabled || mode === 'read')
+            return;
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0) {
+            handleFileSelect(files[0]);
+        }
+    }, [disabled, mode, handleFileSelect]);
+    const handleInputChange = useCallback((e) => {
+        const files = Array.from(e.target.files || []);
+        if (files.length > 0) {
+            handleFileSelect(files[0]);
+        }
+    }, [handleFileSelect]);
+    const handleRemove = useCallback(() => {
+        onChange(null);
+        setPreviewUrl(null);
+    }, [onChange]);
+    // Determine if value is File or ImageMetadata
+    // Use duck typing instead of instanceof to support SSR
+    const isFile = value &&
+        typeof value === 'object' &&
+        'arrayBuffer' in value &&
+        typeof value.arrayBuffer === 'function';
+    const isImageMetadata = value && !isFile && typeof value === 'object' && 'url' in value;
+    // Read-only mode
+    if (mode === 'read') {
+        return (_jsxs("div", { className: "space-y-2", children: [label && (_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] })), isImageMetadata ? (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "relative inline-block", children: _jsx(Image, { src: value.url, alt: value.originalFilename, width: previewSize, height: previewSize, className: "rounded-md object-cover border", style: {
+                                    maxWidth: `${previewSize}px`,
+                                    maxHeight: `${previewSize}px`,
+                                } }) }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [value.width, " \u00D7 ", value.height, "px \u2022", ' ', formatFileSize(value.size)] }), value.transformations &&
+                            Object.keys(value.transformations).length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium", children: "Transformations:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Object.entries(value.transformations).map(([name, transform]) => {
+                                        const t = transform;
+                                        return (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => window.open(t.url, '_blank'), children: [name, " (", t.width, "\u00D7", t.height, ")"] }, name));
+                                    }) })] }))] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No image uploaded" }))] }));
+    }
+    // Edit mode
+    return (_jsxs("div", { className: "space-y-2", children: [label && (_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] })), previewUrl || isImageMetadata ? (
+            // Image selected/uploaded or preview available - show preview
+            _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "relative inline-block group", children: [_jsx(Image, { src: previewUrl || value.url, alt: isImageMetadata ? value.originalFilename : 'Preview', width: previewSize, height: previewSize, className: "rounded-md object-cover border", style: {
+                                    maxWidth: `${previewSize}px`,
+                                    maxHeight: `${previewSize}px`,
+                                } }), _jsxs("div", { className: "absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [isImageMetadata && (_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => window.open(value.url, '_blank'), children: _jsx(Eye, { className: "h-3 w-3" }) })), _jsx(Button, { type: "button", variant: "destructive", size: "sm", onClick: handleRemove, disabled: disabled, children: _jsx(X, { className: "h-3 w-3" }) })] })] }), isFile && (_jsxs("div", { className: "text-xs text-muted-foreground", children: [value.name, " \u2022 ", formatFileSize(value.size), " \u2022 Will upload on save"] })), isImageMetadata && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-xs text-muted-foreground", children: [value.originalFilename, " \u2022 ", value.width, " \u00D7", ' ', value.height, "px \u2022", ' ', formatFileSize(value.size)] }), value.transformations &&
+                                Object.keys(value.transformations).length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium", children: "Transformations:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Object.entries(value.transformations).map(([name, transform]) => {
+                                            const t = transform;
+                                            return (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => window.open(t.url, '_blank'), children: [name, " (", t.width, "\u00D7", t.height, ")"] }, name));
+                                        }) })] }))] }))] })) : (
+            // No image - show upload area
+            _jsx(_Fragment, { children: _jsxs("div", { className: `
+              relative border-2 border-dashed rounded-md p-6
+              transition-colors cursor-pointer
+              ${isDragOver ? 'border-primary bg-primary/5' : 'border-muted-foreground/25'}
+              ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-primary hover:bg-primary/5'}
+            `, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx(Input, { id: name, type: "file", accept: "image/*", onChange: handleInputChange, disabled: disabled, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer" }), _jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [showPreview ? (_jsx(ImageIcon, { className: "h-8 w-8 text-muted-foreground" })) : (_jsx(Upload, { className: "h-8 w-8 text-muted-foreground" })), _jsx("p", { className: "text-sm font-medium", children: placeholder }), helpText && _jsx("p", { className: "text-xs text-muted-foreground", children: helpText })] })] }) })), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+}
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Math.round((bytes / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;
+}

package/dist/components/fields/JsonField.d.ts

@@ -0,0 +1,15 @@
+export interface JsonFieldProps {
+    name: string;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    label: string;
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    mode?: 'read' | 'edit';
+    rows?: number;
+    formatted?: boolean;
+}
+export declare function JsonField({ name, value, onChange, label, placeholder, error, disabled, required, mode, rows, formatted, }: JsonFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JsonField.d.ts.map

package/dist/components/fields/JsonField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/JsonField.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAkC,EAClC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,IAAQ,EACR,SAAgB,GACjB,EAAE,cAAc,2CAgFhB"}