@opensaas/stack-ui 0.1.0

package/src/components/standalone/SearchBar.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import * as React from 'react'
+import { useState } from 'react'
+import { Input } from '../../primitives/input.js'
+import { Button } from '../../primitives/button.js'
+import { Card } from '../../primitives/card.js'
+import { usePathname, useRouter } from 'next/navigation'
+
+export interface SearchBarProps {
+  onSearch?: (query: string) => void
+  onClear?: () => void
+  placeholder?: string
+  defaultValue?: string
+  searchLabel?: string
+  className?: string
+}
+
+/**
+ * Standalone search bar component
+ * Can be embedded in any custom page
+ *
+ * @example
+ * ```tsx
+ * <SearchBar
+ *   onSearch={(query) => {
+ *     setSearchQuery(query);
+ *     fetchPosts({ search: query });
+ *   }}
+ *   onClear={() => {
+ *     setSearchQuery('');
+ *     fetchPosts({});
+ *   }}
+ *   placeholder="Search posts..."
+ * />
+ * ```
+ */
+export function SearchBar({
+  onSearch,
+  onClear,
+  placeholder = 'Search...',
+  defaultValue = '',
+  searchLabel = 'Search',
+  className,
+}: SearchBarProps) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const [searchInput, setSearchInput] = useState(defaultValue)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (onSearch) onSearch(searchInput.trim())
+    else router.push(`${pathname}?search=${searchInput.trim()}`)
+  }
+
+  const handleClear = () => {
+    setSearchInput('')
+    onClear?.()
+  }
+
+  return (
+    <Card className={`p-4 ${className || ''}`}>
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <div className="flex-1 relative">
+          <Input
+            type="text"
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder={placeholder}
+            className="pr-10"
+          />
+          {searchInput && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              ✕
+            </button>
+          )}
+        </div>
+        <Button type="submit">{searchLabel}</Button>
+      </form>
+    </Card>
+  )
+}

package/src/components/standalone/index.ts

@@ -0,0 +1,13 @@
+// Standalone composable components
+export { ItemCreateForm } from './ItemCreateForm.js'
+export { ItemEditForm } from './ItemEditForm.js'
+export { ListTable } from './ListTable.js'
+export { SearchBar } from './SearchBar.js'
+export { DeleteButton } from './DeleteButton.js'
+
+// Types
+export type { ItemCreateFormProps } from './ItemCreateForm.js'
+export type { ItemEditFormProps } from './ItemEditForm.js'
+export type { ListTableProps } from './ListTable.js'
+export type { SearchBarProps } from './SearchBar.js'
+export type { DeleteButtonProps } from './DeleteButton.js'

package/src/index.ts

@@ -0,0 +1,74 @@
+// Main components
+export { AdminUI } from './components/AdminUI.js'
+export { Dashboard } from './components/Dashboard.js'
+export { Navigation } from './components/Navigation.js'
+export { ListView } from './components/ListView.js'
+export { ListViewClient } from './components/ListViewClient.js'
+export { ItemForm } from './components/ItemForm.js'
+export { ItemFormClient } from './components/ItemFormClient.js'
+export { ConfirmDialog } from './components/ConfirmDialog.js'
+export { LoadingSpinner } from './components/LoadingSpinner.js'
+export { SkeletonLoader, TableSkeleton, FormSkeleton } from './components/SkeletonLoader.js'
+
+// Field components
+export {
+  TextField,
+  IntegerField,
+  CheckboxField,
+  SelectField,
+  TimestampField,
+  PasswordField,
+  RelationshipField,
+  FieldRenderer,
+  fieldComponentRegistry,
+  registerFieldComponent,
+  getFieldComponent,
+} from './components/fields/index.js'
+
+// Types
+export type { AdminUIProps } from './components/AdminUI.js'
+export type { DashboardProps } from './components/Dashboard.js'
+export type { NavigationProps } from './components/Navigation.js'
+export type { ListViewProps } from './components/ListView.js'
+export type { ListViewClientProps } from './components/ListViewClient.js'
+export type { ItemFormProps } from './components/ItemForm.js'
+export type { ItemFormClientProps } from './components/ItemFormClient.js'
+export type { ConfirmDialogProps } from './components/ConfirmDialog.js'
+export type { LoadingSpinnerProps } from './components/LoadingSpinner.js'
+export type { SkeletonLoaderProps } from './components/SkeletonLoader.js'
+
+export type {
+  TextFieldProps,
+  IntegerFieldProps,
+  CheckboxFieldProps,
+  SelectFieldProps,
+  TimestampFieldProps,
+  PasswordFieldProps,
+  RelationshipFieldProps,
+  FieldRendererProps,
+  FieldComponent,
+  FieldComponentProps,
+} from './components/fields/index.js'
+
+// Standalone composable components
+export {
+  ItemCreateForm,
+  ItemEditForm,
+  ListTable,
+  SearchBar,
+  DeleteButton,
+} from './components/standalone/index.js'
+
+export type {
+  ItemCreateFormProps,
+  ItemEditFormProps,
+  ListTableProps,
+  SearchBarProps,
+  DeleteButtonProps,
+} from './components/standalone/index.js'
+
+// Utility functions
+export { cn, formatListName, formatFieldName, getFieldDisplayValue } from './lib/utils.js'
+
+// Theme utilities
+export { generateThemeCSS, getThemeStyleTag, presetThemes } from './lib/theme.js'

package/src/lib/serializeFieldConfig.ts

@@ -0,0 +1,88 @@
+import type { FieldConfig } from '@opensaas/stack-core'
+import type { ComponentType } from 'react'
+
+/**
+ * Serializable field config for client components
+ * Strips out functions and non-serializable properties
+ */
+export type SerializableFieldConfig = {
+  type: string
+  label?: string
+  validation?: {
+    isRequired?: boolean
+    length?: { min?: number; max?: number }
+    min?: number
+    max?: number
+  }
+  options?: Array<{ label: string; value: string }>
+  many?: boolean
+  ref?: string
+  ui?: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    component?: ComponentType<any>
+    fieldType?: string
+    [key: string]: unknown
+  }
+}
+
+/**
+ * Extract only serializable properties from a single field config
+ * Removes functions (getZodSchema, getPrismaType, getTypeScriptType)
+ * and non-serializable properties (access, hooks, typePatch, valueForClientSerialization)
+ */
+export function serializeFieldConfig(fieldConfig: FieldConfig): SerializableFieldConfig {
+  const config: SerializableFieldConfig = {
+    type: fieldConfig.type,
+  }
+
+  // Process ui options, excluding the valueForClientSerialization function
+  if (fieldConfig.ui) {
+    const { valueForClientSerialization: _valueForClientSerialization, ...serializableUi } =
+      fieldConfig.ui
+    config.ui = serializableUi
+  }
+
+  // Extract label if present
+  if ('label' in fieldConfig && fieldConfig.label !== undefined) {
+    config.label = fieldConfig.label as string
+  }
+
+  // Extract validation if present
+  if ('validation' in fieldConfig && fieldConfig.validation !== undefined) {
+    config.validation = fieldConfig.validation as SerializableFieldConfig['validation']
+  }
+
+  // Extract options for select fields
+  if ('options' in fieldConfig && fieldConfig.options !== undefined) {
+    config.options = fieldConfig.options as Array<{ label: string; value: string }>
+  }
+
+  // Extract many for relationship fields
+  if ('many' in fieldConfig && fieldConfig.many !== undefined) {
+    config.many = fieldConfig.many as boolean
+  }
+
+  // Extract ref for relationship fields
+  if ('ref' in fieldConfig && fieldConfig.ref !== undefined) {
+    config.ref = fieldConfig.ref as string
+  }
+
+  return config
+}
+
+/**
+ * Extract only serializable properties from field configs
+ * Removes functions (getZodSchema, getPrismaType, getTypeScriptType)
+ * and non-serializable properties (access, hooks, typePatch)
+ */
+export function serializeFieldConfigs(
+  fields: Record<string, FieldConfig>,
+): Record<string, SerializableFieldConfig> {
+  const serialized: Record<string, SerializableFieldConfig> = {}
+
+  for (const [fieldName, fieldConfig] of Object.entries(fields)) {
+    serialized[fieldName] = serializeFieldConfig(fieldConfig)
+  }
+
+  return serialized
+}

package/src/lib/theme.ts

@@ -0,0 +1,202 @@
+import type { ThemeColors, ThemeConfig, ThemePreset } from '@opensaas/stack-core'
+
+/**
+ * Preset theme definitions
+ */
+export const presetThemes: Record<ThemePreset, { light: ThemeColors; dark: ThemeColors }> = {
+  modern: {
+    light: {
+      background: '220 20% 97%',
+      foreground: '220 30% 10%',
+      card: '0 0% 100%',
+      cardForeground: '220 30% 10%',
+      popover: '0 0% 100%',
+      popoverForeground: '220 30% 10%',
+      primary: '190 95% 55%',
+      primaryForeground: '220 30% 10%',
+      secondary: '220 15% 94%',
+      secondaryForeground: '220 30% 10%',
+      muted: '220 15% 94%',
+      mutedForeground: '220 15% 45%',
+      accent: '280 85% 65%',
+      accentForeground: '0 0% 100%',
+      destructive: '0 84% 60%',
+      destructiveForeground: '0 0% 100%',
+      border: '220 15% 88%',
+      input: '220 15% 88%',
+      ring: '190 95% 55%',
+      gradientFrom: '190 95% 55%',
+      gradientTo: '280 85% 65%',
+    },
+    dark: {
+      background: '220 25% 8%',
+      foreground: '220 15% 95%',
+      card: '220 20% 12%',
+      cardForeground: '220 15% 95%',
+      popover: '220 20% 12%',
+      popoverForeground: '220 15% 95%',
+      primary: '190 100% 60%',
+      primaryForeground: '220 30% 10%',
+      secondary: '220 20% 18%',
+      secondaryForeground: '220 15% 95%',
+      muted: '220 20% 18%',
+      mutedForeground: '220 10% 55%',
+      accent: '280 90% 70%',
+      accentForeground: '220 30% 10%',
+      destructive: '0 84% 65%',
+      destructiveForeground: '0 0% 100%',
+      border: '220 20% 22%',
+      input: '220 20% 22%',
+      ring: '190 100% 60%',
+      gradientFrom: '190 100% 60%',
+      gradientTo: '280 90% 70%',
+    },
+  },
+  classic: {
+    light: {
+      background: '0 0% 100%',
+      foreground: '222.2 84% 4.9%',
+      card: '0 0% 100%',
+      cardForeground: '222.2 84% 4.9%',
+      popover: '0 0% 100%',
+      popoverForeground: '222.2 84% 4.9%',
+      primary: '221.2 83.2% 53.3%',
+      primaryForeground: '210 40% 98%',
+      secondary: '210 40% 96.1%',
+      secondaryForeground: '222.2 47.4% 11.2%',
+      muted: '210 40% 96.1%',
+      mutedForeground: '215.4 16.3% 46.9%',
+      accent: '210 40% 96.1%',
+      accentForeground: '222.2 47.4% 11.2%',
+      destructive: '0 84.2% 60.2%',
+      destructiveForeground: '210 40% 98%',
+      border: '214.3 31.8% 91.4%',
+      input: '214.3 31.8% 91.4%',
+      ring: '221.2 83.2% 53.3%',
+      gradientFrom: '221.2 83.2% 53.3%',
+      gradientTo: '221.2 83.2% 53.3%',
+    },
+    dark: {
+      background: '222.2 84% 4.9%',
+      foreground: '210 40% 98%',
+      card: '222.2 84% 8%',
+      cardForeground: '210 40% 98%',
+      popover: '222.2 84% 8%',
+      popoverForeground: '210 40% 98%',
+      primary: '221.2 83.2% 53.3%',
+      primaryForeground: '210 40% 98%',
+      secondary: '217.2 32.6% 17.5%',
+      secondaryForeground: '210 40% 98%',
+      muted: '217.2 32.6% 17.5%',
+      mutedForeground: '215 20.2% 65.1%',
+      accent: '217.2 32.6% 17.5%',
+      accentForeground: '210 40% 98%',
+      destructive: '0 84.2% 60.2%',
+      destructiveForeground: '210 40% 98%',
+      border: '217.2 32.6% 17.5%',
+      input: '217.2 32.6% 17.5%',
+      ring: '221.2 83.2% 53.3%',
+      gradientFrom: '221.2 83.2% 53.3%',
+      gradientTo: '221.2 83.2% 53.3%',
+    },
+  },
+  neon: {
+    light: {
+      background: '0 0% 100%',
+      foreground: '240 10% 5%',
+      card: '0 0% 100%',
+      cardForeground: '240 10% 5%',
+      popover: '0 0% 100%',
+      popoverForeground: '240 10% 5%',
+      primary: '330 100% 50%',
+      primaryForeground: '0 0% 100%',
+      secondary: '240 5% 96%',
+      secondaryForeground: '240 10% 5%',
+      muted: '240 5% 96%',
+      mutedForeground: '240 5% 45%',
+      accent: '155 100% 50%',
+      accentForeground: '240 10% 5%',
+      destructive: '0 100% 50%',
+      destructiveForeground: '0 0% 100%',
+      border: '240 5.9% 90%',
+      input: '240 5.9% 90%',
+      ring: '330 100% 50%',
+      gradientFrom: '330 100% 50%',
+      gradientTo: '155 100% 50%',
+    },
+    dark: {
+      background: '240 10% 5%',
+      foreground: '0 0% 98%',
+      card: '240 10% 8%',
+      cardForeground: '0 0% 98%',
+      popover: '240 10% 8%',
+      popoverForeground: '0 0% 98%',
+      primary: '330 100% 60%',
+      primaryForeground: '240 10% 5%',
+      secondary: '240 5% 15%',
+      secondaryForeground: '0 0% 98%',
+      muted: '240 5% 15%',
+      mutedForeground: '240 5% 60%',
+      accent: '155 100% 60%',
+      accentForeground: '240 10% 5%',
+      destructive: '0 100% 60%',
+      destructiveForeground: '0 0% 100%',
+      border: '240 5% 20%',
+      input: '240 5% 20%',
+      ring: '330 100% 60%',
+      gradientFrom: '330 100% 60%',
+      gradientTo: '155 100% 60%',
+    },
+  },
+}
+
+/**
+ * Generate CSS variables from theme configuration
+ */
+export function generateThemeCSS(config?: ThemeConfig): string {
+  const preset = config?.preset || 'modern'
+  const radius = config?.radius ?? 0.75
+
+  // Get base colors from preset
+  const baseLight = presetThemes[preset].light
+  const baseDark = presetThemes[preset].dark
+
+  // Merge with custom overrides
+  const lightColors = { ...baseLight, ...config?.colors }
+  const darkColors = { ...baseDark, ...config?.darkColors }
+
+  // Convert colors to CSS variables
+  const colorToCSSVar = (key: string, value: string) => {
+    // Convert camelCase to kebab-case with --color- prefix
+    const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+    return `  --color-${cssKey}: ${value};`
+  }
+
+  const lightVars = Object.entries(lightColors)
+    .map(([key, value]) => colorToCSSVar(key, value as string))
+    .join('\n')
+
+  const darkVars = Object.entries(darkColors)
+    .map(([key, value]) => colorToCSSVar(key, value as string))
+    .join('\n')
+
+  return `
+:root {
+${lightVars}
+  --radius: ${radius}rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+${darkVars}
+  }
+}
+`.trim()
+}
+
+/**
+ * Get theme CSS as a style tag content
+ */
+export function getThemeStyleTag(config?: ThemeConfig): string {
+  return `<style id="opensaas-theme">${generateThemeCSS(config)}</style>`
+}

package/src/lib/utils.ts

@@ -0,0 +1,81 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Merge Tailwind CSS classes with clsx
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+/**
+ * Format a list name for display (PascalCase → Title Case)
+ */
+export function formatListName(name: string): string {
+  return name
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .replace(/^./, (str) => str.toUpperCase())
+}
+
+/**
+ * Format a field name for display (camelCase → Title Case)
+ */
+export function formatFieldName(name: string): string {
+  return name
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, (str) => str.toUpperCase())
+    .trim()
+}
+
+/**
+ * Get the display value for a field
+ */
+export function getFieldDisplayValue(value: unknown, fieldType: string): string {
+  if (value === null || value === undefined) {
+    return '-'
+  }
+
+  switch (fieldType) {
+    case 'checkbox':
+      return value ? 'Yes' : 'No'
+    case 'timestamp':
+      return new Date(value as string | number | Date).toLocaleString()
+    case 'password':
+      return '••••••••'
+    case 'relationship':
+      return getRelationshipDisplayValue(value)
+    default:
+      return String(value)
+  }
+}
+
+/**
+ * Get display value for a relationship field
+ * Tries to display: name → title → label → id
+ */
+function getRelationshipDisplayValue(value: unknown): string {
+  if (!value || typeof value !== 'object') {
+    return '-'
+  }
+
+  // Handle array of relationships (many: true)
+  if (Array.isArray(value)) {
+    if (value.length === 0) return '-'
+    return value.map((item) => getRelationshipDisplayValue(item)).join(', ')
+  }
+
+  // Handle single relationship object
+  let displayValue: unknown
+  if ('name' in value) {
+    displayValue = value.name
+  } else if ('title' in value) {
+    displayValue = value.title
+  } else if ('label' in value) {
+    displayValue = value.label
+  } else if ('id' in value) {
+    displayValue = value.id
+  }
+
+  return displayValue ? String(displayValue) : '-'
+}

package/src/primitives/button.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../lib/utils.js'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }