@opensaas/stack-ui 0.1.0

package/src/components/fields/PasswordField.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import { Input } from '../../primitives/input.js'
+import { Label } from '../../primitives/label.js'
+import { Button } from '../../primitives/button.js'
+import { cn } from '../../lib/utils.js'
+import { useState } from 'react'
+
+export interface PasswordFieldProps {
+  name: string
+  value: string | { isSet: boolean }
+  onChange: (value: string | { isSet: boolean } | undefined) => void
+  label: string
+  placeholder?: string
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+  showConfirm?: boolean
+}
+
+export function PasswordField({
+  name,
+  value,
+  onChange,
+  label,
+  placeholder,
+  error,
+  disabled,
+  required,
+  mode = 'edit',
+  showConfirm = true,
+}: PasswordFieldProps) {
+  // Check if value is the isSet object
+  const isSetObject = typeof value === 'object' && value !== null && 'isSet' in value
+  const isPasswordSet = isSetObject ? value.isSet : false
+
+  const [isChangingPassword, setIsChangingPassword] = useState(false)
+  const [passwordValue, setPasswordValue] = useState('')
+  const [confirmValue, setConfirmValue] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+
+  if (mode === 'read') {
+    return (
+      <div className="space-y-1">
+        <Label className="text-muted-foreground">{label}</Label>
+        <p className="text-sm">{isPasswordSet ? '••••••••' : 'Not set'}</p>
+      </div>
+    )
+  }
+
+  // If not changing password and it's set, show the button
+  if (!isChangingPassword && isSetObject) {
+    return (
+      <div className="space-y-2">
+        <Label>{label}</Label>
+        <div>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setIsChangingPassword(true)}
+            disabled={disabled}
+          >
+            {isPasswordSet ? 'Change Password' : 'Set Password'}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  const confirmError =
+    showConfirm && passwordValue !== confirmValue && confirmValue !== ''
+      ? 'Passwords do not match'
+      : undefined
+
+  const handleCancel = () => {
+    setIsChangingPassword(false)
+    setPasswordValue('')
+    setConfirmValue('')
+    setShowPassword(false)
+    // Reset to the isSet object
+    if (isSetObject) {
+      onChange(value)
+    }
+  }
+
+  const handlePasswordChange = (newValue: string) => {
+    setPasswordValue(newValue)
+    // Update the parent with the actual password string
+    onChange(newValue || undefined)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor={name}>
+          {label}
+          {required && !isPasswordSet && <span className="text-destructive ml-1">*</span>}
+        </Label>
+        <div className="relative">
+          <Input
+            id={name}
+            name={name}
+            type={showPassword ? 'text' : 'password'}
+            value={passwordValue}
+            onChange={(e) => handlePasswordChange(e.target.value)}
+            placeholder={placeholder}
+            disabled={disabled}
+            required={required && !isPasswordSet}
+            className={cn('pr-10', error && 'border-destructive')}
+          />
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            {showPassword ? '👁️' : '👁️‍🗨️'}
+          </button>
+        </div>
+        {error && <p className="text-sm text-destructive">{error}</p>}
+      </div>
+
+      {showConfirm && (
+        <div className="space-y-2">
+          <Label htmlFor={`${name}-confirm`}>
+            Confirm {label}
+            {required && !isPasswordSet && <span className="text-destructive ml-1">*</span>}
+          </Label>
+          <Input
+            id={`${name}-confirm`}
+            name={`${name}-confirm`}
+            type={showPassword ? 'text' : 'password'}
+            value={confirmValue}
+            onChange={(e) => setConfirmValue(e.target.value)}
+            placeholder={`Confirm ${placeholder || label.toLowerCase()}`}
+            disabled={disabled}
+            required={required && !isPasswordSet}
+            className={cn(confirmError && 'border-destructive')}
+          />
+          {confirmError && <p className="text-sm text-destructive">{confirmError}</p>}
+        </div>
+      )}
+
+      {isSetObject && (
+        <div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={handleCancel}
+            disabled={disabled}
+          >
+            Cancel
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/fields/RelationshipField.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { ComboboxField } from './ComboboxField.js'
+import { RelationshipManager } from './RelationshipManager.js'
+
+export interface RelationshipFieldProps {
+  name: string
+  value: string | string[] | null
+  onChange: (value: string | string[] | null) => void
+  label: string
+  items: Array<{ id: string; label: string }>
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+  isLoading?: boolean
+  many?: boolean
+  relatedListKey?: string
+  basePath?: string
+}
+
+export function RelationshipField({
+  name,
+  value,
+  onChange,
+  label,
+  items,
+  error,
+  disabled,
+  required,
+  mode = 'edit',
+  isLoading = false,
+  many = false,
+  relatedListKey,
+  basePath,
+}: RelationshipFieldProps) {
+  // Delegate to specialized components based on cardinality
+  if (many) {
+    return (
+      <RelationshipManager
+        name={name}
+        value={Array.isArray(value) ? value : []}
+        onChange={onChange}
+        label={label}
+        items={items}
+        error={error}
+        disabled={disabled}
+        required={required}
+        mode={mode}
+        isLoading={isLoading}
+        relatedListKey={relatedListKey}
+        basePath={basePath}
+      />
+    )
+  }
+
+  return (
+    <ComboboxField
+      name={name}
+      value={typeof value === 'string' ? value : null}
+      onChange={onChange}
+      label={label}
+      items={items}
+      error={error}
+      disabled={disabled}
+      required={required}
+      mode={mode}
+      isLoading={isLoading}
+    />
+  )
+}

package/src/components/fields/RelationshipManager.tsx

@@ -0,0 +1,189 @@
+'use client'
+
+import * as React from 'react'
+import { useState } from 'react'
+import Link from 'next/link'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../primitives/table.js'
+import {
+  Combobox,
+  ComboboxTrigger,
+  ComboboxContent,
+  ComboboxSearch,
+  ComboboxList,
+  ComboboxEmpty,
+  ComboboxItem,
+} from '../../primitives/combobox.js'
+import { Button } from '../../primitives/button.js'
+
+export interface RelationshipManagerProps {
+  name: string
+  value: string[]
+  onChange: (value: string[]) => void
+  label: string
+  items: Array<{ id: string; label: string }>
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+  isLoading?: boolean
+  relatedListKey?: string
+  basePath?: string
+}
+
+export function RelationshipManager({
+  name: _name,
+  value,
+  onChange,
+  label,
+  items,
+  error,
+  disabled,
+  required,
+  mode = 'edit',
+  isLoading = false,
+  relatedListKey,
+  basePath = '/admin',
+}: RelationshipManagerProps) {
+  const [showConnectModal, setShowConnectModal] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const selectedIds = Array.isArray(value) ? value : []
+  const selectedItems = items.filter((item) => selectedIds.includes(item.id))
+  const availableItems = items.filter((item) => !selectedIds.includes(item.id))
+
+  // Read mode
+  if (mode === 'read') {
+    return (
+      <div className="space-y-1">
+        <label className="text-sm font-medium text-muted-foreground">{label}</label>
+        <p className="text-sm">
+          {selectedItems.length > 0 ? selectedItems.map((item) => item.label).join(', ') : '-'}
+        </p>
+      </div>
+    )
+  }
+
+  // Filter available items based on search
+  const filteredAvailableItems = searchQuery
+    ? availableItems.filter((item) => item.label.toLowerCase().includes(searchQuery.toLowerCase()))
+    : availableItems
+
+  const handleRemove = (itemId: string) => {
+    onChange(selectedIds.filter((id) => id !== itemId))
+  }
+
+  const handleConnect = (itemId: string) => {
+    onChange([...selectedIds, itemId])
+    setShowConnectModal(false)
+    setSearchQuery('')
+  }
+
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-medium">
+        {label}
+        {required && <span className="text-destructive ml-1">*</span>}
+      </label>
+
+      {/* Selected Items Table */}
+      {selectedItems.length > 0 ? (
+        <div className="rounded-md border border-input">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead className="w-[100px] text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {selectedItems.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell>
+                    {relatedListKey ? (
+                      <Link
+                        href={`${basePath}/${relatedListKey}/${item.id}`}
+                        className="text-primary hover:underline"
+                      >
+                        {item.label}
+                      </Link>
+                    ) : (
+                      item.label
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleRemove(item.id)}
+                      disabled={disabled}
+                    >
+                      Remove
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <div className="rounded-md border border-input border-dashed p-8 text-center">
+          <p className="text-sm text-muted-foreground">
+            No items connected. Click &quot;Connect Existing&quot; to add items.
+          </p>
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="flex gap-2">
+        <Combobox open={showConnectModal} onOpenChange={setShowConnectModal}>
+          <ComboboxTrigger
+            disabled={disabled || isLoading || availableItems.length === 0}
+            className="h-9 px-3"
+          >
+            <span>{isLoading ? 'Loading...' : 'Connect Existing'}</span>
+          </ComboboxTrigger>
+          <ComboboxContent>
+            <ComboboxSearch
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                }
+              }}
+            />
+            <ComboboxList>
+              {filteredAvailableItems.length === 0 ? (
+                <ComboboxEmpty>
+                  {availableItems.length === 0
+                    ? 'All items are already connected'
+                    : 'No results found'}
+                </ComboboxEmpty>
+              ) : (
+                filteredAvailableItems.map((item) => (
+                  <ComboboxItem key={item.id} onClick={() => handleConnect(item.id)}>
+                    {item.label}
+                  </ComboboxItem>
+                ))
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+
+        {/* Note: "Create New" functionality would require additional props for the related list's fields
+            and form rendering logic. For now, we'll leave it as a placeholder or implement in a future iteration */}
+      </div>
+
+      {error && <p className="text-sm text-destructive mt-2">{error}</p>}
+    </div>
+  )
+}

package/src/components/fields/SelectField.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select.js'
+import { Label } from '../../primitives/label.js'
+
+export interface SelectFieldProps {
+  name: string
+  value: string | null
+  onChange: (value: string | null) => void
+  label: string
+  options: Array<{ label: string; value: string }>
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+}
+
+export function SelectField({
+  name,
+  value,
+  onChange,
+  label,
+  options,
+  error,
+  disabled,
+  required,
+  mode = 'edit',
+}: SelectFieldProps) {
+  if (mode === 'read') {
+    const selectedOption = options.find((opt) => opt.value === value)
+    return (
+      <div className="space-y-1">
+        <Label className="text-muted-foreground">{label}</Label>
+        <p className="text-sm">{selectedOption?.label || '-'}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={name}>
+        {label}
+        {required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+      <Select
+        value={value || undefined}
+        onValueChange={(val) => onChange(val || null)}
+        disabled={disabled}
+        required={required}
+      >
+        <SelectTrigger id={name} className={error ? 'border-destructive' : ''}>
+          <SelectValue placeholder="Select an option..." />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

package/src/components/fields/TextField.tsx

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

package/src/components/fields/TimestampField.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { Label } from '../../primitives/label.js'
+import { DateTimePicker } from '../../primitives/datetime-picker.js'
+import { format } from 'date-fns'
+
+export interface TimestampFieldProps {
+  name: string
+  value: Date | string | null
+  onChange: (value: Date | null) => void
+  label: string
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+}
+
+export function TimestampField({
+  name,
+  value,
+  onChange,
+  label,
+  error,
+  disabled,
+  required,
+  mode = 'edit',
+}: TimestampFieldProps) {
+  const dateValue = value ? new Date(value) : null
+
+  if (mode === 'read') {
+    return (
+      <div className="space-y-1">
+        <Label className="text-muted-foreground">{label}</Label>
+        <p className="text-sm">{dateValue ? format(dateValue, 'PPpp') : '-'}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={name}>
+        {label}
+        {required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+      <DateTimePicker value={dateValue} onChange={onChange} disabled={disabled} />
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

package/src/components/fields/index.ts

@@ -0,0 +1,27 @@
+// Field components
+export { TextField } from './TextField.js'
+export { IntegerField } from './IntegerField.js'
+export { CheckboxField } from './CheckboxField.js'
+export { SelectField } from './SelectField.js'
+export { TimestampField } from './TimestampField.js'
+export { PasswordField } from './PasswordField.js'
+export { RelationshipField } from './RelationshipField.js'
+export { ComboboxField } from './ComboboxField.js'
+export { RelationshipManager } from './RelationshipManager.js'
+export { FieldRenderer } from './FieldRenderer.js'
+
+// Registry for custom field types
+export { fieldComponentRegistry, registerFieldComponent, getFieldComponent } from './registry.js'
+
+// Re-export types
+export type { TextFieldProps } from './TextField.js'
+export type { IntegerFieldProps } from './IntegerField.js'
+export type { CheckboxFieldProps } from './CheckboxField.js'
+export type { SelectFieldProps } from './SelectField.js'
+export type { TimestampFieldProps } from './TimestampField.js'
+export type { PasswordFieldProps } from './PasswordField.js'
+export type { RelationshipFieldProps } from './RelationshipField.js'
+export type { ComboboxFieldProps } from './ComboboxField.js'
+export type { RelationshipManagerProps } from './RelationshipManager.js'
+export type { FieldRendererProps } from './FieldRenderer.js'
+export type { FieldComponent, FieldComponentProps } from './registry.js'

package/src/components/fields/registry.ts

@@ -0,0 +1,72 @@
+import type { ComponentType } from 'react'
+import { TextField } from './TextField.js'
+import { IntegerField } from './IntegerField.js'
+import { CheckboxField } from './CheckboxField.js'
+import { SelectField } from './SelectField.js'
+import { TimestampField } from './TimestampField.js'
+import { PasswordField } from './PasswordField.js'
+import { RelationshipField } from './RelationshipField.js'
+
+/**
+ * Base props that all field components must accept
+ * Field components can extend this with additional field-specific props
+ */
+export type FieldComponentProps = {
+  name: string
+  value: unknown
+  onChange: (value: unknown) => void
+  label: string
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+}
+
+/**
+ * Type for field component
+ * Field components must accept props that extend FieldComponentProps.
+ * The registry uses ComponentType<any> because components have different
+ * specific prop types (e.g., value: string vs value: number), but all
+ * must include the base FieldComponentProps structure.
+ */
+export type FieldComponent = ComponentType<FieldComponentProps & Record<string, unknown>>
+
+/**
+ * Registry mapping field types to their default UI components
+ * This can be extended for custom field types
+ * Uses ComponentType<any> to allow components with more specific prop types
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const fieldComponentRegistry: Record<string, ComponentType<any>> = {
+  text: TextField,
+  integer: IntegerField,
+  checkbox: CheckboxField,
+  select: SelectField,
+  timestamp: TimestampField,
+  password: PasswordField,
+  relationship: RelationshipField,
+}
+
+/**
+ * Register a custom field component for a field type
+ * Useful for adding support for custom field types
+ *
+ * @param fieldType - The field type identifier
+ * @param component - A React component that accepts FieldComponentProps (and optionally additional props)
+ */
+export function registerFieldComponent(
+  fieldType: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: ComponentType<any>,
+): void {
+  fieldComponentRegistry[fieldType] = component
+}
+
+/**
+ * Get the component for a field type
+ * Returns undefined if no component is registered
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getFieldComponent(fieldType: string): ComponentType<any> | undefined {
+  return fieldComponentRegistry[fieldType]
+}