@opensaas/stack-ui 0.1.6 → 0.3.0

package/src/components/ItemFormClient.tsx

@@ -62,68 +62,81 @@ export function ItemFormClient({
     setGeneralError(null)
 
     startTransition(async () => {
-      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: Record<string, unknown> = {}
-        for (const [fieldName, value] of Object.entries(formData)) {
-          const fieldConfig = fields[fieldName]
-
-          // Skip password fields that have { isSet: boolean } value (not being changed)
-          if (typeof value === 'object' && value !== null && 'isSet' in value) {
-            continue
-          }
+      // Transform relationship fields 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: Record<string, unknown> = {}
+      for (const [fieldName, value] of Object.entries(formData)) {
+        const fieldConfig = fields[fieldName]
 
-          // Transform relationship fields - check discriminated union type
-          const fieldAny = fieldConfig as { type: string; many?: boolean }
-          if (fieldAny?.type === 'relationship') {
-            if (fieldAny.many) {
-              // Many relationship: use connect format
-              if (Array.isArray(value) && value.length > 0) {
-                transformedData[fieldName] = {
-                  connect: value.map((id: string) => ({ id })),
-                }
-              }
-            } else {
-              // Single relationship: use connect format
-              if (value) {
-                transformedData[fieldName] = {
-                  connect: { id: value },
-                }
+        // Skip password fields that have { isSet: boolean } value (not being changed)
+        if (typeof value === 'object' && value !== null && 'isSet' in value) {
+          continue
+        }
+
+        // Transform relationship fields - check discriminated union type
+        const fieldAny = fieldConfig as { type: string; many?: boolean }
+        if (fieldAny?.type === 'relationship') {
+          if (fieldAny.many) {
+            // Many relationship: use connect format
+            if (Array.isArray(value) && value.length > 0) {
+              transformedData[fieldName] = {
+                connect: value.map((id: string) => ({ id })),
               }
             }
           } else {
-            // 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
+            // Single relationship: use connect format
+            if (value) {
+              transformedData[fieldName] = {
+                connect: { id: value },
+              }
+            }
           }
+        } else {
+          // 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
         }
+      }
+
+      const result =
+        mode === 'create'
+          ? await serverAction({
+              listKey,
+              action: 'create',
+              data: transformedData,
+            })
+          : await serverAction({
+              listKey,
+              action: 'update',
+              id: itemId!,
+              data: transformedData,
+            })
 
-        const result =
-          mode === 'create'
-            ? await serverAction({
-                listKey,
-                action: 'create',
-                data: transformedData,
-              })
-            : await serverAction({
-                listKey,
-                action: 'update',
-                id: itemId!,
-                data: transformedData,
-              })
-
-        if (result) {
+      // Check if result has the new format with success/error fields
+      if (result && typeof result === 'object' && 'success' in result) {
+        const actionResult = result as
+          | { success: true; data: unknown }
+          | { success: false; error: string; fieldErrors?: Record<string, string> }
+
+        if (actionResult.success) {
           // Navigate back to list view
           router.push(`${basePath}/${urlKey}`)
           router.refresh()
         } else {
-          setGeneralError('Access denied or operation failed')
+          // Handle error response
+          if (actionResult.fieldErrors) {
+            setErrors(actionResult.fieldErrors)
+          }
+          setGeneralError(actionResult.error)
         }
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : 'Failed to save item'
-        setGeneralError(errorMessage)
+      } else if (result) {
+        // Legacy format: result is the data itself
+        router.push(`${basePath}/${urlKey}`)
+        router.refresh()
+      } else {
+        // null result means access denied
+        setGeneralError('Access denied or operation failed')
       }
     })
   }
@@ -135,22 +148,31 @@ export function ItemFormClient({
     setShowDeleteConfirm(false)
 
     startTransition(async () => {
-      try {
-        const result = await serverAction({
-          listKey,
-          action: 'delete',
-          id: itemId,
-        })
-
-        if (result) {
+      const result = await serverAction({
+        listKey,
+        action: 'delete',
+        id: itemId,
+      })
+
+      // Check if result has the new format with success/error fields
+      if (result && typeof result === 'object' && 'success' in result) {
+        const actionResult = result as
+          | { success: true; data: unknown }
+          | { success: false; error: string; fieldErrors?: Record<string, string> }
+
+        if (actionResult.success) {
           router.push(`${basePath}/${urlKey}`)
           router.refresh()
         } else {
-          setGeneralError('Access denied or failed to delete item')
+          setGeneralError(actionResult.error)
         }
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : 'Failed to delete item'
-        setGeneralError(errorMessage)
+      } else if (result) {
+        // Legacy format: result is the data itself
+        router.push(`${basePath}/${urlKey}`)
+        router.refresh()
+      } else {
+        // null result means access denied
+        setGeneralError('Access denied or failed to delete item')
       }
     })
   }

package/src/components/Navigation.tsx

@@ -1,12 +1,14 @@
 import Link from 'next/link.js'
 import { formatListName } from '../lib/utils.js'
 import { AccessContext, getUrlKey, OpenSaasConfig } from '@opensaas/stack-core'
+import { UserMenu } from './UserMenu.js'
 
 export interface NavigationProps<TPrisma> {
   context: AccessContext<TPrisma>
   config: OpenSaasConfig
   basePath?: string
   currentPath?: string
+  onSignOut?: () => Promise<void>
 }
 
 /**
@@ -18,6 +20,7 @@ export function Navigation<TPrisma>({
   config,
   basePath = '/admin',
   currentPath = '',
+  onSignOut,
 }: NavigationProps<TPrisma>) {
   const lists = Object.keys(config.lists || {})
 
@@ -90,27 +93,13 @@ export function Navigation<TPrisma>({
         </div>
       </div>
 
-      {/* Footer */}
+      {/* Footer - User Menu */}
       {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>
+        <UserMenu
+          userName={String((context.session.data as Record<string, unknown>)?.name) || 'User'}
+          userEmail={String((context.session.data as Record<string, unknown>)?.email) || ''}
+          onSignOut={onSignOut}
+        />
       )}
     </nav>
   )

package/src/components/UserMenu.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { useRouter } from 'next/navigation.js'
+import { Button } from '../primitives/button.js'
+
+export interface UserMenuProps {
+  userName?: string
+  userEmail?: string
+  onSignOut?: () => Promise<void>
+}
+
+/**
+ * User menu component with sign-out button
+ * Client Component
+ */
+export function UserMenu({ userName, userEmail, onSignOut }: UserMenuProps) {
+  const router = useRouter()
+
+  const handleSignOut = async () => {
+    if (onSignOut) {
+      await onSignOut()
+    }
+    router.push('/sign-in')
+  }
+
+  return (
+    <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 mb-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">
+            {userName?.[0]?.toUpperCase() || '?'}
+          </span>
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium truncate">{userName || 'User'}</p>
+          <p className="text-xs text-muted-foreground truncate">{userEmail || ''}</p>
+        </div>
+      </div>
+      <Button onClick={handleSignOut} variant="outline" size="sm" className="w-full text-sm">
+        Sign Out
+      </Button>
+    </div>
+  )
+}

package/src/components/fields/TextField.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Input } from '../../primitives/input.js'
+import { Textarea } from '../../primitives/textarea.js'
 import { Label } from '../../primitives/label.js'
 import { cn } from '../../lib/utils.js'
 
@@ -14,6 +15,7 @@ export interface TextFieldProps {
   disabled?: boolean
   required?: boolean
   mode?: 'read' | 'edit'
+  displayMode?: 'input' | 'textarea'
 }
 
 export function TextField({
@@ -26,6 +28,7 @@ export function TextField({
   disabled,
   required,
   mode = 'edit',
+  displayMode = 'input',
 }: TextFieldProps) {
   if (mode === 'read') {
     return (
@@ -36,16 +39,18 @@ export function TextField({
     )
   }
 
+  const InputComponent = displayMode === 'textarea' ? Textarea : Input
+
   return (
     <div className="space-y-2">
       <Label htmlFor={name}>
         {label}
         {required && <span className="text-destructive ml-1">*</span>}
       </Label>
-      <Input
+      <InputComponent
         id={name}
         name={name}
-        type="text"
+        type={displayMode === 'input' ? 'text' : undefined}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}

package/src/index.ts

@@ -2,6 +2,7 @@
 export { AdminUI } from './components/AdminUI.js'
 export { Dashboard } from './components/Dashboard.js'
 export { Navigation } from './components/Navigation.js'
+export { UserMenu } from './components/UserMenu.js'
 export { ListView } from './components/ListView.js'
 export { ListViewClient } from './components/ListViewClient.js'
 export { ItemForm } from './components/ItemForm.js'
@@ -29,6 +30,7 @@ export {
 export type { AdminUIProps } from './components/AdminUI.js'
 export type { DashboardProps } from './components/Dashboard.js'
 export type { NavigationProps } from './components/Navigation.js'
+export type { UserMenuProps } from './components/UserMenu.js'
 export type { ListViewProps } from './components/ListView.js'
 export type { ListViewClientProps } from './components/ListViewClient.js'
 export type { ItemFormProps } from './components/ItemForm.js'

package/tests/browser/README.md

@@ -0,0 +1,154 @@
+# Browser Tests
+
+This directory contains UI tests that run in a real browser environment using Vitest Browser Mode with Playwright.
+
+## Overview
+
+Browser tests provide more realistic testing by running tests in actual browser environments (Chromium, Firefox, or WebKit). These tests can verify:
+
+- Real browser interactions (clicks, keyboard input, focus management)
+- Visual rendering and CSS behavior
+- Accessibility features
+- Browser-specific bugs
+
+## Running Browser Tests
+
+### Prerequisites
+
+1. Install Playwright browsers:
+
+   ```bash
+   npx playwright install chromium
+   ```
+
+2. Ensure you have a display server available (for headless: false mode)
+
+### Commands
+
+```bash
+# Run browser tests in headless mode
+pnpm test:browser
+
+# Run browser tests with UI
+pnpm test:browser:ui
+```
+
+### Configuration
+
+Browser tests are configured in `vitest.config.ts`:
+
+- **Enabled**: Only when `BROWSER_TEST=true` environment variable is set
+- **Browser**: Chromium (via Playwright)
+- **Headless**: true (can be set to false for debugging)
+- **Screenshot on failure**: Enabled
+
+## Test Structure
+
+Browser tests follow this structure:
+
+```typescript
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from 'vitest/browser'
+import { MyComponent } from '../../../src/components/MyComponent.js'
+
+describe('MyComponent (Browser)', () => {
+  it('should handle real browser interactions', async () => {
+    render(<MyComponent />)
+
+    const button = screen.getByRole('button')
+    await userEvent.click(button)
+
+    expect(button).toHaveAttribute('aria-pressed', 'true')
+  })
+})
+```
+
+## Test Categories
+
+### Primitives
+
+- **Button.browser.test.tsx**: Tests button variants, keyboard navigation, focus states
+- **Dialog.browser.test.tsx**: Tests modal dialogs, focus trapping, keyboard shortcuts (Escape)
+
+### Fields
+
+- **TextField.browser.test.tsx**: Tests text input, paste, special characters, focus/blur
+- **CheckboxField.browser.test.tsx**: Tests checkbox toggling, keyboard (Space), label clicks
+- **SelectField.browser.test.tsx**: Tests dropdown behavior, keyboard navigation (arrows)
+
+## Browser vs Regular Tests
+
+| Aspect                | Regular Tests (Happy DOM) | Browser Tests  |
+| --------------------- | ------------------------- | -------------- |
+| **Speed**             | Fast (~500ms)             | Slower (~5s)   |
+| **Environment**       | Simulated DOM             | Real browser   |
+| **User Interactions** | Simulated                 | Real events    |
+| **Visual Testing**    | No                        | Yes            |
+| **CI/CD**             | Easy                      | Requires setup |
+
+## When to Use Browser Tests
+
+Use browser tests for:
+
+- Complex user interactions (drag-drop, keyboard navigation)
+- Focus management and accessibility
+- Browser-specific features
+- Visual regression testing
+- Issues that only reproduce in real browsers
+
+Use regular tests (Happy DOM) for:
+
+- Unit testing components
+- Testing props and state
+- Fast feedback during development
+- Most UI logic
+
+## CI/CD Setup
+
+For CI/CD environments, ensure:
+
+1. **Display Server**: Use `xvfb` or run in headless mode
+2. **Playwright Installation**: Include `npx playwright install --with-deps` in CI setup
+3. **Browser Binaries**: Ensure chromium/firefox/webkit are available
+
+Example GitHub Actions:
+
+```yaml
+- name: Install Playwright
+  run: npx playwright install --with-deps chromium
+
+- name: Run browser tests
+  run: pnpm test:browser
+```
+
+## Troubleshooting
+
+### "Browser connection was closed"
+
+- **Cause**: No display server available
+- **Solution**: Run in headless mode or use xvfb
+
+### "vitest/browser can be imported only inside Browser Mode"
+
+- **Cause**: Browser tests running in regular test mode
+- **Solution**: Ensure tests are in `tests/browser/` directory and use `pnpm test:browser`
+
+### Playwright installation errors
+
+- **Cause**: Missing system dependencies
+- **Solution**: Run `npx playwright install --with-deps chromium`
+
+## Development Tips
+
+1. **Debugging**: Set `headless: false` in vitest.config.ts to see the browser
+2. **Screenshots**: Failed tests automatically capture screenshots
+3. **Slow Tests**: Use `{ timeout: 10000 }` for tests that need more time
+4. **Browser DevTools**: Set `slowMo: 100` to slow down interactions for debugging
+
+## Future Enhancements
+
+- [ ] Add visual regression testing with screenshots
+- [ ] Test in multiple browsers (Firefox, WebKit)
+- [ ] Add E2E tests for complete user flows
+- [ ] Integrate with Percy or similar visual testing service