create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/modules/module-form.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import ModuleForm from './module-form'
+
+const { push, toast } = vi.hoisted(() => ({
+  push: vi.fn(),
+  toast: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+describe('ModuleForm', () => {
+  it('submits the selected parent module and navigates back to the modules list', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+    })
+
+    render(
+      <ModuleForm
+        successTitle="Module created"
+        successMessage="Module created successfully"
+        parentOptions={[{ id: 'parent-1', name: 'Shared UI' }]}
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Name'), 'Checkout')
+    await user.click(screen.getByRole('combobox', { name: 'Parent' }))
+    await user.click(screen.getByRole('option', { name: 'Shared UI' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith(
+        undefined,
+        {
+          name: 'Checkout',
+          parentId: 'parent-1',
+        },
+        undefined,
+      )
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Module created',
+      description: 'Module created successfully',
+    })
+    expect(push).toHaveBeenCalledWith('/modules')
+  })
+
+  it('shows validation feedback when the name is cleared and does not submit', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <ModuleForm
+        successTitle="Module created"
+        successMessage="Module created successfully"
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    const nameInput = screen.getByLabelText('Name')
+
+    await user.type(nameInput, 'Checkout')
+    await user.clear(nameInput)
+
+    expect(screen.getByText('Name is required')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+    expect(onSubmitAction).not.toHaveBeenCalled()
+  })
+})

package/templates/default/src/app/(base)/modules/module-form.tsx

@@ -1,126 +1,159 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { formOpts, type Module, ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
-import { toast } from '@/hooks/use-toast'
-import { ActionResponse } from '@/types/form/actionHandler'
-import { useForm } from '@tanstack/react-form'
-import { useRouter } from 'next/navigation'
-import React from 'react'
-import { z } from 'zod'
-
-const ModuleForm = ({
-  defaultValues,
-  successTitle,
-  successMessage,
-  parentOptions = [],
-  id,
-  onSubmitAction,
-}: {
-  defaultValues?: Module
-  successTitle: string
-  successMessage: string
-  parentOptions?: { id: string; name: string }[]
-  id?: string
-  onSubmitAction: (_prev: unknown, value: Module, id?: string) => Promise<ActionResponse>
-}) => {
-  const router = useRouter()
-  const options = Array.isArray(parentOptions) ? parentOptions : []
-  const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
-    validators: formOpts?.validators,
-    onSubmit: async ({ value }) => {
-      const res = await onSubmitAction(undefined, value, id)
-      if (res.status === 200) {
-        toast({
-          title: successTitle,
-          description: successMessage,
-        })
-        router.push('/modules')
-      }
-      if (res.status === 400) {
-        toast({
-          title: 'Error',
-          description: res.error,
-          variant: 'destructive',
-        })
-      }
-      if (res.status === 500) {
-        toast({
-          title: 'Error',
-          description: res.error,
-          variant: 'destructive',
-        })
-      }
-    },
-  })
-  return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
-      <form.Field
-        name="name"
-        validators={{
-          onChange: z.string().min(1, { message: 'Name is required' }),
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Name</Label>
-              <Input id={field.name} value={field.state.value} onChange={e => field.handleChange(e.target.value)} />
-              {field.state.meta.isTouched &&
-                field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
-                    {typeof error === 'string' ? error : error?.message || String(error)}
-                  </p>
-                ))}
-            </div>
-          )
-        }}
-      </form.Field>
-      <form.Field name="parentId">
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Parent</Label>
-              <Select value={field.state.value || ROOT_MODULE_UUID} onValueChange={value => field.handleChange(value)}>
-                <SelectTrigger>
-                  <SelectValue
-                    placeholder={options.length === 0 ? 'No parent modules available' : 'Select a parent or Root'}
-                  />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value={ROOT_MODULE_UUID}>Root (No Parent)</SelectItem>
-                  {options.length > 0
-                    ? options.map(option => (
-                        <SelectItem key={option.id} value={option.id}>
-                          {option.name}
-                        </SelectItem>
-                      ))
-                    : null}
-                </SelectContent>
-              </Select>
-            </div>
-          )
-        }}
-      </form.Field>
-      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
-        {([canSubmit, isSubmitting]) => (
-          <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
-          </Button>
-        )}
-      </form.Subscribe>
-    </form>
-  )
-}
-
-export default ModuleForm
+'use client'
+
+import { Button } from '@/components/ui/button'
+import ErrorMessage from '@/components/form/error-message'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { formOpts, type Module, ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { useForm } from '@tanstack/react-form'
+import { useRouter } from 'next/navigation'
+import {
+  getActionErrorMessage,
+  moduleFieldValidators,
+  type ModuleFormSubmitAction,
+  type ModuleParentOption,
+} from './module-helpers'
+
+type ModuleFormProps = {
+  defaultValues?: Module
+  successTitle: string
+  successMessage: string
+  parentOptions?: ModuleParentOption[]
+  id?: string
+  onSubmitAction: ModuleFormSubmitAction
+}
+
+type ModuleFieldErrorsProps = {
+  errors: unknown[]
+  isTouched: boolean
+}
+
+function getErrorMessage(error: unknown) {
+  if (typeof error === 'string') {
+    return error
+  }
+
+  if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
+    return error.message
+  }
+
+  return String(error)
+}
+
+function ModuleFieldErrors({ errors, isTouched }: ModuleFieldErrorsProps) {
+  if (!isTouched) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col gap-1" aria-live="polite">
+      {errors.map((error, index) => (
+        <ErrorMessage key={`${String(error)}-${index}`} message={getErrorMessage(error)} visible={true} />
+      ))}
+    </div>
+  )
+}
+
+const ModuleForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  parentOptions = [],
+  id,
+  onSubmitAction,
+}: ModuleFormProps) => {
+  const router = useRouter()
+  const form = useForm({
+    defaultValues: defaultValues ?? formOpts.defaultValues,
+    validators: formOpts.validators,
+    onSubmit: async ({ value }) => {
+      const res = await onSubmitAction(undefined, value, id)
+      if (res.status === 200) {
+        toast({
+          title: successTitle,
+          description: successMessage,
+        })
+        router.push('/modules')
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: getActionErrorMessage(res),
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: 'Error',
+          description: getActionErrorMessage(res),
+          variant: 'destructive',
+        })
+      }
+    },
+  })
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="name"
+        validators={{
+          onChange: moduleFieldValidators.name,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Name</Label>
+              <Input id={field.name} value={field.state.value} onChange={e => field.handleChange(e.target.value)} />
+              <ModuleFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field name="parentId">
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Parent</Label>
+              <Select value={field.state.value || ROOT_MODULE_UUID} onValueChange={value => field.handleChange(value)}>
+                <SelectTrigger id={field.name}>
+                  <SelectValue
+                    placeholder={
+                      parentOptions.length === 0 ? 'No parent modules available' : 'Select a parent or Root'
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ROOT_MODULE_UUID}>Root (No Parent)</SelectItem>
+                  {parentOptions.length > 0
+                    ? parentOptions.map(option => (
+                        <SelectItem key={option.id} value={option.id}>
+                          {option.name}
+                        </SelectItem>
+                      ))
+                    : null}
+                </SelectContent>
+              </Select>
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+        {([canSubmit, isSubmitting]) => (
+          <Button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Save'}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
+  )
+}
+
+export default ModuleForm

package/templates/default/src/app/(base)/modules/module-helpers.ts

@@ -0,0 +1,64 @@
+import { ROOT_MODULE_UUID, moduleSchema, type Module as ModuleFormValues } from '@/constants/form-opts/module-form-opts'
+import type { ModuleWithParent } from '@/services/module/module-service'
+import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
+
+export type ModuleTableRow = ModuleWithParent
+
+export type ModuleParentOption = {
+  id: string
+  name: string
+}
+
+export type ModuleFormSubmitAction = (
+  _prev: unknown,
+  value: ModuleFormValues,
+  id?: string,
+) => Promise<ActionResponse>
+
+export const moduleFieldValidators = {
+  name: moduleSchema.shape.name,
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || response.message || 'Unable to save module.'
+}
+
+export function getModuleParentOptions(modules: ModuleTableRow[], excludedId?: string): ModuleParentOption[] {
+  return modules
+    .filter(module => module.id !== excludedId)
+    .map(module => ({
+      id: module.id,
+      name: module.name,
+    }))
+}
+
+export function getModuleFormParentId(parentId: string | null | undefined) {
+  return parentId ?? ROOT_MODULE_UUID
+}
+
+function isModuleParent(value: unknown): value is ModuleTableRow['parent'] {
+  return value === null || (typeof value === 'object' && value !== null && 'name' in value && typeof value.name === 'string')
+}
+
+function isModuleTableRow(value: unknown): value is ModuleTableRow {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof value.id === 'string' &&
+    'name' in value &&
+    typeof value.name === 'string' &&
+    'parentId' in value &&
+    (typeof value.parentId === 'string' || value.parentId === null) &&
+    'createdAt' in value &&
+    value.createdAt instanceof Date &&
+    'updatedAt' in value &&
+    value.updatedAt instanceof Date &&
+    'parent' in value &&
+    isModuleParent(value.parent)
+  )
+}
+
+export function getModuleTableRows(data: ActionResponseData | undefined): ModuleTableRow[] {
+  return Array.isArray(data) ? data.filter(isModuleTableRow) : []
+}

package/templates/default/src/app/(base)/modules/module-table-columns.tsx

@@ -1,85 +1,81 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { Module } from '@prisma/client'
-import { deleteModuleAction } from '@/actions/modules/module-actions'
-import { buildModulePathFromParent } from '@/lib/path-helpers/module-path'
-import { formatDateTime } from '@/lib/utils'
-
-export const moduleTableCols: ColumnDef<Module & { parent: { name: string } }>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="mr-2"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label="Select row"
-        className="mr-2"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-  },
-  {
-    accessorKey: 'parent.name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Parent" />,
-    cell: ({ row }) => {
-      const parent = row.original.parent
-      return <div>{parent?.name ?? '< root >'}</div>
-    },
-  },
-  {
-    id: 'path',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Path" />,
-    cell: ({ row, table }) => {
-      const modules = table.options.data as (Module & {
-        parent: { name: string }
-      })[]
-      const currentModule = row.original
-      const path = buildModulePathFromParent(modules, currentModule)
-      return <div className="font-mono text-sm">{path}</div>
-    },
-  },
-  {
-    accessorKey: 'createdAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.createdAt)
-    },
-  },
-  {
-    accessorKey: 'updatedAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.updatedAt)
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const moduleData = row.original
-      return (
-        <TableActions
-          modifyLink={`/modules/modify/${moduleData.id}`}
-          deleteHandler={() => deleteModuleAction([moduleData.id])}
-        />
-      )
-    },
-  },
-]
+'use client'
+
+import TableActions from '@/components/table/table-actions'
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { Checkbox } from '@/components/ui/checkbox'
+import { deleteModuleAction } from '@/actions/modules/module-actions'
+import { buildModulePath } from '@/lib/path-helpers/module-path'
+import { formatDateTime } from '@/lib/utils'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { type ModuleTableRow } from './module-helpers'
+
+export const moduleTableCols: ColumnDef<ModuleTableRow>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'parent.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Parent" />,
+    cell: ({ row }) => {
+      const parent = row.original.parent
+      return <div>{parent?.name ?? '< root >'}</div>
+    },
+  },
+  {
+    id: 'path',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Path" />,
+    cell: ({ row, table }) => {
+      const path = buildModulePath(table.options.data, row.original)
+      return <div className="font-mono text-sm">{path}</div>
+    },
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.createdAt)
+    },
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.updatedAt)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const moduleData = row.original
+      return (
+        <TableActions
+          modifyLink={`/modules/modify/${moduleData.id}`}
+          deleteHandler={() => deleteModuleAction([moduleData.id])}
+        />
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/modules/module-table.tsx

@@ -1,24 +1,25 @@
-import { DataTable } from '@/components/ui/data-table'
-import { Module } from '@prisma/client'
-import { getAllModulesAction, deleteModuleAction } from '@/actions/modules/module-actions'
-import { moduleTableCols } from './module-table-columns'
-
-const ModuleTable = async () => {
-  const { data: modules } = await getAllModulesAction()
-
-  return (
-    <>
-      <DataTable
-        columns={moduleTableCols}
-        data={modules as (Module & { parent: { name: string } })[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/modules/create"
-        modifyLink="/modules/modify"
-        deleteAction={deleteModuleAction}
-      />
-    </>
-  )
-}
-
-export default ModuleTable
+import { DataTable } from '@/components/ui/data-table'
+import { getAllModulesAction, deleteModuleAction } from '@/actions/modules/module-actions'
+import { moduleTableCols } from './module-table-columns'
+import { getModuleTableRows } from './module-helpers'
+
+const ModuleTable = async () => {
+  const { data: modules } = await getAllModulesAction()
+  const moduleRows = getModuleTableRows(modules)
+
+  return (
+    <>
+      <DataTable
+        columns={moduleTableCols}
+        data={moduleRows}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/modules/create"
+        modifyLink="/modules/modify"
+        deleteAction={deleteModuleAction}
+      />
+    </>
+  )
+}
+
+export default ModuleTable