create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/tags/tag-form.tsx

@@ -1,147 +1,143 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { formOpts, type Tag } from '@/constants/form-opts/tag-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 TagForm = ({
-  defaultValues,
-  successTitle,
-  successMessage,
-  id,
-  onSubmitAction,
-}: {
-  defaultValues?: Tag
-  successTitle: string
-  successMessage: string
-  id?: string
-  onSubmitAction: (_prev: unknown, value: Tag, id?: string) => Promise<ActionResponse>
-}) => {
-  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('/tags')
-      }
-      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="tagExpression"
-        validators={{
-          onChange: z
-            .string()
-            .min(1, { message: 'Tag expression is required' })
-            .refine(
-              value => {
-                // Check if the value follows Gherkin tag rules
-                // Only one tag allowed per entry - single word after @ symbol
-                const trimmedValue = value.trim()
-                if (!trimmedValue) return false
-
-                // Should not contain any spaces (only one tag allowed)
-                if (trimmedValue.includes(' ')) return false
-
-                // Tag should start with @
-                if (!trimmedValue.startsWith('@')) return false
-
-                // Tag should have at least one character after @
-                if (trimmedValue.length <= 1) return false
-
-                return true
-              },
-              {
-                message: 'Tag expression must be a single tag starting with @ and contain no spaces (e.g., "@smoke")',
-              },
-            ),
-        }}
-      >
-        {field => {
-          return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
-              <Label htmlFor={field.name}>Tag Expression</Label>
-              <Input
-                id={field.name}
-                value={field.state.value}
-                onChange={e => field.handleChange(e.target.value)}
-                placeholder="e.g. @smoke"
-              />
-              {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.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
-        {([canSubmit, isSubmitting]) => (
-          <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
-          </Button>
-        )}
-      </form.Subscribe>
-    </form>
-  )
-}
-
-export default TagForm
+'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 { formOpts, type Tag } from '@/constants/form-opts/tag-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { getActionErrorMessage, tagFieldValidators, type TagFormSubmitAction } from './tag-form-helpers'
+
+import { useForm } from '@tanstack/react-form'
+import { useRouter } from 'next/navigation'
+
+type TagFormProps = {
+  defaultValues?: Tag
+  successTitle: string
+  successMessage: string
+  id?: string
+  onSubmitAction: TagFormSubmitAction
+}
+
+type TagFieldErrorsProps = {
+  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 TagFieldErrors({ errors, isTouched }: TagFieldErrorsProps) {
+  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 TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitAction }: TagFormProps) => {
+  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('/tags')
+      }
+      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: tagFieldValidators.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)} />
+              <TagFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field
+        name="tagExpression"
+        validators={{
+          onChange: tagFieldValidators.tagExpression,
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Tag Expression</Label>
+              <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+                placeholder="e.g. @smoke"
+              />
+              <TagFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
+            </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 TagForm

package/templates/default/src/app/(base)/tags/tag-table-columns.tsx

@@ -1,63 +1,63 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { Tag } from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { deleteTagAction } from '@/actions/tags/tag-actions'
-import { formatDateTime } from '@/lib/utils'
-
-export const tagTableCols: ColumnDef<Tag>[] = [
-  {
-    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: 'tagExpression',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Tag Expression" />,
-  },
-  {
-    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 tag = row.original
-      return <TableActions modifyLink={`/tags/modify/${tag.id}`} deleteHandler={() => deleteTagAction([tag.id])} />
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { Tag } from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTagAction } from '@/actions/tags/tag-actions'
+import { formatDateTime } from '@/lib/utils'
+
+export const tagTableCols: ColumnDef<Tag>[] = [
+  {
+    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: 'tagExpression',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Tag Expression" />,
+  },
+  {
+    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 tag = row.original
+      return <TableActions modifyLink={`/tags/modify/${tag.id}`} deleteHandler={() => deleteTagAction([tag.id])} />
+    },
+  },
+]

package/templates/default/src/app/(base)/tags/tag-table.tsx

@@ -1,29 +1,29 @@
-import { DataTable } from '@/components/ui/data-table'
-import { deleteTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
-import { Tag } from '@prisma/client'
-import React from 'react'
-import { tagTableCols } from './tag-table-columns'
-
-const TagTable = async () => {
-  const { data: tags, error: tagsError } = await getAllTagsAction()
-
-  if (tagsError) {
-    return <div>Error: {tagsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={tagTableCols}
-        data={tags as Tag[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/tags/create"
-        modifyLink="/tags/modify"
-        deleteAction={deleteTagAction}
-      />
-    </>
-  )
-}
-
-export default TagTable
+import { DataTable } from '@/components/ui/data-table'
+import { deleteTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Tag } from '@prisma/client'
+import React from 'react'
+import { tagTableCols } from './tag-table-columns'
+
+const TagTable = async () => {
+  const { data: tags, error: tagsError } = await getAllTagsAction()
+
+  if (tagsError) {
+    return <div>Error: {tagsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={tagTableCols}
+        data={tags as Tag[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/tags/create"
+        modifyLink="/tags/modify"
+        deleteAction={deleteTagAction}
+      />
+    </>
+  )
+}
+
+export default TagTable

package/templates/default/src/app/(base)/template-step-groups/create/page.tsx

@@ -1,28 +1,28 @@
-import { createTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
-import { TemplateStepGroupForm } from '../template-step-group-form'
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Create Template Step Group',
-  description: 'Create a new template step group to organize related template steps',
-}
-
-const CreateTemplateStepGroup = async () => {
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Create Template Step Group</PageHeader>
-        <HeaderSubtitle>Create a new template step group to organize related template steps</HeaderSubtitle>
-      </div>
-      <TemplateStepGroupForm
-        successTitle="Group created"
-        successMessage="Template step group created successfully"
-        onSubmitAction={createTemplateStepGroupAction}
-      />
-    </>
-  )
-}
-
-export default CreateTemplateStepGroup
+import { createTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
+import { TemplateStepGroupForm } from '../template-step-group-form'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Template Step Group',
+  description: 'Create a new template step group to organize related template steps',
+}
+
+const CreateTemplateStepGroup = async () => {
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Template Step Group</PageHeader>
+        <HeaderSubtitle>Create a new template step group to organize related template steps</HeaderSubtitle>
+      </div>
+      <TemplateStepGroupForm
+        successTitle="Group created"
+        successMessage="Template step group created successfully"
+        onSubmitAction={createTemplateStepGroupAction}
+      />
+    </>
+  )
+}
+
+export default CreateTemplateStepGroup

package/templates/default/src/app/(base)/template-step-groups/modify/[id]/page.tsx

@@ -1,45 +1,43 @@
-import {
-  getTemplateStepGroupByIdAction,
-  updateTemplateStepGroupAction,
-} from '@/actions/template-step-group/template-step-group-actions'
-import { TemplateStepGroupForm } from '../../template-step-group-form'
-import React from 'react'
-import { TemplateStepGroup } from '@prisma/client'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Template Step Group',
-  description: 'Update template step group configuration',
-}
-
-const TemplateStepGroupType = {
-  ACTION: 'ACTION',
-  VALIDATION: 'VALIDATION',
-} as const
-
-const ModifyTemplateStepGroup = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data: templateStepGroup, error } = await getTemplateStepGroupByIdAction(id)
-
-  if (error) {
-    return <div>Error: {error}</div>
-  }
-
-  const templateStepGroupData = templateStepGroup as TemplateStepGroup
-
-  return (
-    <TemplateStepGroupForm
-      defaultValues={{
-        name: templateStepGroupData.name ?? '',
-        description: templateStepGroupData.description ?? '',
-        type: (templateStepGroupData as { type?: 'ACTION' | 'VALIDATION' }).type ?? TemplateStepGroupType.ACTION,
-      }}
-      successTitle="Group updated"
-      successMessage="Template step group updated successfully"
-      onSubmitAction={updateTemplateStepGroupAction}
-      id={id}
-    />
-  )
-}
-
-export default ModifyTemplateStepGroup
+import {
+  getTemplateStepGroupByIdAction,
+  updateTemplateStepGroupAction,
+} from '@/actions/template-step-group/template-step-group-actions'
+import { TemplateStepGroupForm } from '../../template-step-group-form'
+import React from 'react'
+import { Metadata } from 'next'
+import { getTemplateStepGroupRows } from '../../template-step-group-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Template Step Group',
+  description: 'Update template step group configuration',
+}
+
+const ModifyTemplateStepGroup = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data: templateStepGroup, error } = await getTemplateStepGroupByIdAction(id)
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+
+  const [templateStepGroupData] = getTemplateStepGroupRows([templateStepGroup])
+  if (!templateStepGroupData) {
+    return <div>Error: Template step group data is unavailable.</div>
+  }
+
+  return (
+    <TemplateStepGroupForm
+      defaultValues={{
+        name: templateStepGroupData.name ?? '',
+        description: templateStepGroupData.description ?? '',
+        type: templateStepGroupData.type,
+      }}
+      successTitle="Group updated"
+      successMessage="Template step group updated successfully"
+      onSubmitAction={updateTemplateStepGroupAction}
+      id={id}
+    />
+  )
+}
+
+export default ModifyTemplateStepGroup