create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/blank/src/app/(base)/test-runs/test-run-form-helpers.ts

@@ -1,15 +1,5 @@
-import { BrowserEngine, type Environment, type Tag } from '@prisma/client'
-
 import { testRunSchema, type TestRun } from '@/constants/form-opts/test-run-form-opts'
-import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
-import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
-
-export const testSelectionTypes = {
-  TAGS: 'tags',
-  TEST_SUITES: 'testSuites',
-} as const
-
-export type TestSelectionType = (typeof testSelectionTypes)[keyof typeof testSelectionTypes]
+import type { ActionResponse } from '@/types/form/actionHandler'
 
 export type TestRunFormSubmitAction = (_prev: unknown, value: TestRun, id?: string) => Promise<ActionResponse>
 
@@ -20,149 +10,19 @@ export const testRunFieldValidators = {
   browserEngine: testRunSchema.shape.browserEngine,
 }
 
-export const testRunQuickTips = [
-  {
-    title: 'Choose a descriptive name',
-    description: 'Use clear, specific names that indicate the purpose for your test run',
-  },
-  {
-    title: 'Select the environment for your test run',
-    description: 'Choose the environment that best suits your selected tests',
-  },
-  {
-    title: 'Select the browser engine for your test run',
-    description: 'Select the browser engine that is compatible with your selected test cases',
-  },
-  {
-    title: 'Select the test suites or tags for your test run',
-    description: 'You can filter by tags or browse suites and choose full suites or child subsets',
-  },
-  {
-    title: 'Select the test workers count for your test run',
-    description: 'Parallel workers can be used to run your test cases in parallel to speed up the test execution',
-  },
-] as const
-
-export function getFieldErrorMessage(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)
-}
-
-export function getActionErrorMessage(response: ActionResponse) {
-  return response.error || response.message || 'Unable to save test run.'
-}
-
-export function buildTestRunSubmitValue(value: TestRun, selectionType: TestSelectionType): TestRun {
-  return {
-    ...value,
-    tags: selectionType === testSelectionTypes.TAGS ? value.tags : [],
-    testSuites: selectionType === testSelectionTypes.TEST_SUITES ? value.testSuites : [],
-  }
-}
-
-export function validateTagSelections(value: string[], selectionType: TestSelectionType) {
-  if (selectionType === testSelectionTypes.TAGS && (!Array.isArray(value) || value.length === 0)) {
-    return 'Tags are required'
-  }
-
-  return undefined
-}
-
-export function validateTestSuiteSelections(value: TestSuiteSelection[], selectionType: TestSelectionType) {
-  if (selectionType !== testSelectionTypes.TEST_SUITES) {
-    return undefined
-  }
-
-  if (!Array.isArray(value) || value.length === 0) {
-    return 'At least one test suite is required'
-  }
-
-  const invalidSuite = value.find(suiteSelection => !suiteSelection.runAll && suiteSelection.testCaseIds.length === 0)
-  if (invalidSuite) {
-    return 'Partial suite selections must include at least one test case'
-  }
-
-  return undefined
-}
-
-export function getTestRunSuccessPath(data: ActionResponseData | undefined) {
-  if (typeof data === 'object' && data !== null && 'id' in data && typeof data.id === 'string') {
-    return `/test-runs/${data.id}`
-  }
-
-  return '/test-runs'
-}
-
-function isEnvironmentRow(value: unknown): value is Environment {
-  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
-}
-
-function isTagRow(value: unknown): value is Tag {
-  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
-}
-
-function isModuleRow(value: unknown) {
-  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
-}
-
-function isTestCaseRow(value: unknown) {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    'title' in value &&
-    'steps' in value &&
-    Array.isArray(value.steps) &&
-    'tags' in value &&
-    Array.isArray(value.tags) &&
-    value.tags.every(isTagRow)
-  )
-}
-
-function isTestSuitePickerRow(value: unknown): value is TestSuitePickerRow {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    'name' in value &&
-    'module' in value &&
-    isModuleRow(value.module) &&
-    'tags' in value &&
-    Array.isArray(value.tags) &&
-    value.tags.every(isTagRow) &&
-    'testCases' in value &&
-    Array.isArray(value.testCases) &&
-    value.testCases.every(isTestCaseRow)
-  )
-}
-
-export function getEnvironmentRows(data: ActionResponseData | undefined): Environment[] {
-  return Array.isArray(data) ? data.filter(isEnvironmentRow) : []
-}
-
-export function getTagRows(data: ActionResponseData | undefined): Tag[] {
-  return Array.isArray(data) ? data.filter(isTagRow) : []
-}
-
-export function getTestSuitePickerRows(data: ActionResponseData | undefined): TestSuitePickerRow[] {
-  return Array.isArray(data) ? data.filter(isTestSuitePickerRow) : []
-}
-
-export function getInitialTestSelectionType(defaultValues?: TestRun): TestSelectionType {
-  return defaultValues?.testSuites?.length ? testSelectionTypes.TEST_SUITES : testSelectionTypes.TAGS
-}
-
-export function getBrowserEngineOptions() {
-  return [
-    { label: 'Chromium', value: BrowserEngine.CHROMIUM },
-    { label: 'Firefox', value: BrowserEngine.FIREFOX },
-    { label: 'WebKit', value: BrowserEngine.WEBKIT },
-  ] as const
-}
+export {
+  getActionErrorMessage,
+  getEnvironmentRows,
+  getTagRows,
+  getTestRunSuccessPath,
+  getTestSuitePickerRows,
+} from './test-run-form-data-helpers'
+export { getBrowserEngineOptions, getFieldErrorMessage, testRunQuickTips } from './test-run-form-display-helpers'
+export {
+  buildTestRunSubmitValue,
+  getInitialTestSelectionType,
+  testSelectionTypes,
+  validateTagSelections,
+  validateTestSuiteSelections,
+  type TestSelectionType,
+} from './test-run-form-selection-helpers'

package/templates/blank/src/app/(base)/test-runs/test-run-form-selection-helpers.ts

@@ -0,0 +1,46 @@
+import type { TestRun } from '@/constants/form-opts/test-run-form-opts'
+import type { TestSuiteSelection } from '@/types/test-suite-picker'
+
+export const testSelectionTypes = {
+  TAGS: 'tags',
+  TEST_SUITES: 'testSuites',
+} as const
+
+export type TestSelectionType = (typeof testSelectionTypes)[keyof typeof testSelectionTypes]
+
+export function buildTestRunSubmitValue(value: TestRun, selectionType: TestSelectionType): TestRun {
+  return {
+    ...value,
+    tags: selectionType === testSelectionTypes.TAGS ? value.tags : [],
+    testSuites: selectionType === testSelectionTypes.TEST_SUITES ? value.testSuites : [],
+  }
+}
+
+export function validateTagSelections(value: string[], selectionType: TestSelectionType) {
+  if (selectionType === testSelectionTypes.TAGS && (!Array.isArray(value) || value.length === 0)) {
+    return 'Tags are required'
+  }
+
+  return undefined
+}
+
+export function validateTestSuiteSelections(value: TestSuiteSelection[], selectionType: TestSelectionType) {
+  if (selectionType !== testSelectionTypes.TEST_SUITES) {
+    return undefined
+  }
+
+  if (!Array.isArray(value) || value.length === 0) {
+    return 'At least one test suite is required'
+  }
+
+  const invalidSuite = value.find(suiteSelection => !suiteSelection.runAll && suiteSelection.testCaseIds.length === 0)
+  if (invalidSuite) {
+    return 'Partial suite selections must include at least one test case'
+  }
+
+  return undefined
+}
+
+export function getInitialTestSelectionType(defaultValues?: TestRun): TestSelectionType {
+  return defaultValues?.testSuites?.length ? testSelectionTypes.TEST_SUITES : testSelectionTypes.TAGS
+}

package/templates/blank/src/app/(base)/test-runs/test-run-form.tsx

@@ -7,10 +7,11 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { MultiSelect } from '@/components/ui/multi-select'
-import { formOpts, type TestRun } from '@/constants/form-opts/test-run-form-opts'
+import { testRunFormOpts, type TestRun } from '@/constants/form-opts/test-run-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { BrowserEngine, Environment, Tag } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 import { useRouter } from 'next/navigation'
 import { useRef, useState } from 'react'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
@@ -57,8 +58,8 @@ function TestRunFieldErrors({ errors, isTouched }: TestRunFieldErrorsProps) {
 
   return (
     <div className="flex flex-col gap-1" aria-live="polite">
-      {errors.map((error, index) => (
-        <ErrorMessage key={`${String(error)}-${index}`} message={getFieldErrorMessage(error)} visible={true} />
+      {errors.map(error => (
+        <ErrorMessage key={getFieldErrorMessage(error)} message={getFieldErrorMessage(error)} visible={true} />
       ))}
     </div>
   )
@@ -74,7 +75,7 @@ const TestRunForm = ({
   id,
   onSubmitAction,
 }: TestRunFormProps) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const { debouncedNameValidation } = useTestRunNameValidation(id)
   const [testSelectionType, setTestSelectionType] = useState<TestSelectionType>(() =>
     getInitialTestSelectionType(defaultValues),
@@ -82,8 +83,8 @@ const TestRunForm = ({
   const testSelectionTypeRef = useRef<TestSelectionType>(testSelectionType)
 
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts.defaultValues,
-    validators: formOpts.validators,
+    defaultValues: defaultValues ?? testRunFormOpts.defaultValues,
+    validators: testRunFormOpts.validators,
     onSubmit: async ({ value }) => {
       const submitValue = buildTestRunSubmitValue(value, testSelectionType)
       const res = await onSubmitAction(undefined, submitValue, id)
@@ -92,7 +93,7 @@ const TestRunForm = ({
           title: successTitle,
           description: successMessage,
         })
-        router.push(getTestRunSuccessPath(res.data))
+        push(getTestRunSuccessPath(res.data))
       }
       if (res.status === 400) {
         toast({
@@ -126,13 +127,7 @@ const TestRunForm = ({
   }
 
   return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
+    <TanStackForm onSubmit={() => form.handleSubmit()}>
       <div className="flex justify-between gap-5 overflow-x-hidden">
         <div className="lg:w-1/2">
           <Card className="mb-4 h-fit">
@@ -272,10 +267,7 @@ const TestRunForm = ({
                 }}
               </form.Field>
 
-              <form.Field
-                name="testWorkersCount"
-                validators={{ onChange: testRunFieldValidators.testWorkersCount }}
-              >
+              <form.Field name="testWorkersCount" validators={{ onChange: testRunFieldValidators.testWorkersCount }}>
                 {field => {
                   return (
                     <div className="mb-4 flex flex-col gap-2">
@@ -295,7 +287,10 @@ const TestRunForm = ({
                   return (
                     <div className="mb-4 flex flex-col gap-2">
                       <Label htmlFor={field.name}>Browser Engine</Label>
-                      <Select value={field.state.value} onValueChange={value => field.handleChange(value as BrowserEngine)}>
+                      <Select
+                        value={field.state.value}
+                        onValueChange={value => field.handleChange(value as BrowserEngine)}
+                      >
                         <SelectTrigger id={field.name}>
                           <SelectValue placeholder="Select a browser engine" />
                         </SelectTrigger>
@@ -316,17 +311,17 @@ const TestRunForm = ({
           </Card>
         </div>
         <div className="lg:w-3/7">
-          <Card className="border-gray-700 bg-gray-500/10">
+          <Card className="border-zinc-700 bg-zinc-500/10">
             <CardHeader className="mb-2">
               <CardTitle className="flex items-center gap-2 text-xl text-primary">
-                <Info className="h-5 w-5" />
+                <Info className="size-5" />
                 <span className="font-bold">Quick Tips</span>
               </CardTitle>
             </CardHeader>
             <CardContent className="flex flex-col gap-6">
               {testRunQuickTips.map((tip, index) => (
                 <div key={tip.title} className="flex items-start gap-4">
-                  <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+                  <span className="flex size-6 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
                     {index + 1}
                   </span>
                   <div className="flex flex-col gap-1">
@@ -343,13 +338,13 @@ const TestRunForm = ({
         {([canSubmit, isSubmitting]) => (
           <>
             <Button type="submit" disabled={!canSubmit} className="hover:bg-emerald-500">
-              <Play className="h-4 w-4" />
+              <Play className="size-4" />
               <span className="font-bold">{isSubmitting ? '...' : 'Start'}</span>
             </Button>
           </>
         )}
       </form.Subscribe>
-    </form>
+    </TanStackForm>
   )
 }
 

package/templates/blank/src/app/(base)/test-runs/test-run-table-columns.tsx

@@ -31,7 +31,7 @@ const BrowserEngineIcon = {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="h-4 w-4"
+      className="size-4"
     >
       <path d="M10.88 21.94 15.46 14" />
       <path d="M21.17 8H12" />
@@ -40,8 +40,8 @@ const BrowserEngineIcon = {
       <circle cx="12" cy="12" r="4" />
     </svg>
   ),
-  [BrowserEngine.FIREFOX]: <Flame className="h-4 w-4" />,
-  [BrowserEngine.WEBKIT]: <Compass className="h-4 w-4" />,
+  [BrowserEngine.FIREFOX]: <Flame className="size-4" />,
+  [BrowserEngine.WEBKIT]: <Compass className="size-4" />,
 }
 
 export const testRunTableCols: ColumnDef<
@@ -82,18 +82,18 @@ export const testRunTableCols: ColumnDef<
     cell: ({ row }) => {
       const status = row.original.status
       const statusColorMap = {
-        [TestRunStatus.QUEUED]: 'bg-gray-500 text-white',
+        [TestRunStatus.QUEUED]: 'bg-zinc-500 text-white',
         [TestRunStatus.RUNNING]: 'bg-blue-500 text-white',
         [TestRunStatus.CANCELLING]: 'bg-orange-500 text-white',
         [TestRunStatus.COMPLETED]: 'bg-primary',
         [TestRunStatus.CANCELLED]: 'bg-pink-500 text-white',
       }
       const statusIconMap = {
-        [TestRunStatus.QUEUED]: <ListEnd className="h-4 w-4" />,
-        [TestRunStatus.RUNNING]: <LoaderCircle className="h-4 w-4 animate-spin" />,
-        [TestRunStatus.CANCELLING]: <LoaderCircle className="h-4 w-4 animate-spin" />,
-        [TestRunStatus.COMPLETED]: <CheckCircle className="h-4 w-4" />,
-        [TestRunStatus.CANCELLED]: <XCircle className="h-4 w-4" />,
+        [TestRunStatus.QUEUED]: <ListEnd className="size-4" />,
+        [TestRunStatus.RUNNING]: <LoaderCircle className="size-4 animate-spin" />,
+        [TestRunStatus.CANCELLING]: <LoaderCircle className="size-4 animate-spin" />,
+        [TestRunStatus.COMPLETED]: <CheckCircle className="size-4" />,
+        [TestRunStatus.CANCELLED]: <XCircle className="size-4" />,
       }
       const statusTextMap = {
         [TestRunStatus.QUEUED]: 'Queued',
@@ -118,14 +118,14 @@ export const testRunTableCols: ColumnDef<
       const resultColorMap = {
         [TestRunResult.PASSED]: 'bg-primary',
         [TestRunResult.FAILED]: 'bg-pink-500 text-white',
-        [TestRunResult.CANCELLED]: 'bg-gray-500 text-white',
+        [TestRunResult.CANCELLED]: 'bg-zinc-500 text-white',
         [TestRunResult.PENDING]: 'bg-yellow-500 text-white',
       }
       const resultIconMap = {
-        [TestRunResult.PASSED]: <CheckCircle className="h-4 w-4" />,
-        [TestRunResult.FAILED]: <XCircle className="h-4 w-4" />,
-        [TestRunResult.CANCELLED]: <XCircle className="h-4 w-4" />,
-        [TestRunResult.PENDING]: <LoaderCircle className="h-4 w-4 animate-spin" />,
+        [TestRunResult.PASSED]: <CheckCircle className="size-4" />,
+        [TestRunResult.FAILED]: <XCircle className="size-4" />,
+        [TestRunResult.CANCELLED]: <XCircle className="size-4" />,
+        [TestRunResult.PENDING]: <LoaderCircle className="size-4 animate-spin" />,
       }
       const resultTextMap = {
         [TestRunResult.PASSED]: 'Passed',

package/templates/blank/src/app/(base)/test-runs/test-run-table.tsx

@@ -20,14 +20,17 @@ const TestRunTable = ({ initialData, filter = 'all' }: TestRunTableProps) => {
   // Memoize running test run IDs to avoid unnecessary effect re-runs
   // Include RUNNING, QUEUED, and CANCELLING statuses for polling
   const runningTestRunIds = useMemo(() => {
-    return testRuns
-      .filter(
-        tr =>
-          tr.status === TestRunStatus.RUNNING ||
-          tr.status === TestRunStatus.QUEUED ||
-          tr.status === TestRunStatus.CANCELLING,
-      )
-      .map(tr => tr.id)
+    return testRuns.reduce<string[]>((ids, tr) => {
+      if (
+        tr.status === TestRunStatus.RUNNING ||
+        tr.status === TestRunStatus.QUEUED ||
+        tr.status === TestRunStatus.CANCELLING
+      ) {
+        ids.push(tr.id)
+      }
+
+      return ids
+    }, [])
   }, [testRuns])
 
   // Create a stable dependency string for useEffect
@@ -46,60 +49,58 @@ const TestRunTable = ({ initialData, filter = 'all' }: TestRunTableProps) => {
       return
     }
 
-    pollingRef.current = setInterval(async () => {
-      try {
-        // Poll only running test runs in parallel
-        const updatePromises = runningTestRunIds.map(async id => {
-          const { data, error } = await getTestRunByIdAction(id)
-          if (error || !data) {
-            return null
+    pollingRef.current = setInterval(() => {
+      void (async () => {
+        try {
+          const responses = await Promise.all(runningTestRunIds.map(id => getTestRunByIdAction(id)))
+
+          const updates = responses.flatMap(({ data, error }) => {
+            if (error || !data) {
+              return []
+            }
+
+            const testRun = data as TestRun & {
+              testCases: (TestRunTestCase & { testCase: { title: string } })[]
+              tags: Tag[]
+              environment: Environment
+            }
+
+            return [
+              {
+                ...testRun,
+                testCases: testRun.testCases.map(tc => ({
+                  id: tc.id,
+                  testRunId: tc.testRunId,
+                  testCaseId: tc.testCaseId,
+                  status: tc.status,
+                  result: tc.result,
+                })) as TestRunTestCase[],
+              } as TestRunData,
+            ]
+          })
+
+          setTestRuns(prev =>
+            prev.map(tr => {
+              const update = updates.find(u => u.id === tr.id)
+              return update || tr
+            }),
+          )
+
+          const stillRunning = updates.filter(
+            u =>
+              u.status === TestRunStatus.RUNNING ||
+              u.status === TestRunStatus.QUEUED ||
+              u.status === TestRunStatus.CANCELLING,
+          )
+
+          if (stillRunning.length === 0 && pollingRef.current) {
+            clearInterval(pollingRef.current)
+            pollingRef.current = null
           }
-          // getTestRunByIdAction returns testCases with nested testCase, but we need to flatten it
-          const testRun = data as TestRun & {
-            testCases: (TestRunTestCase & { testCase: { title: string } })[]
-            tags: Tag[]
-            environment: Environment
-          }
-          // Convert to the format expected by the table (flatten testCases)
-          return {
-            ...testRun,
-            testCases: testRun.testCases.map(tc => ({
-              id: tc.id,
-              testRunId: tc.testRunId,
-              testCaseId: tc.testCaseId,
-              status: tc.status,
-              result: tc.result,
-            })) as TestRunTestCase[],
-          } as TestRunData
-        })
-
-        const updates = await Promise.all(updatePromises)
-        const validUpdates = updates.filter((u): u is TestRunData => u !== null)
-
-        // Update only the changed test runs
-        setTestRuns(prev =>
-          prev.map(tr => {
-            const update = validUpdates.find(u => u.id === tr.id)
-            return update || tr
-          }),
-        )
-
-        // Check if any are still running (including CANCELLING)
-        const stillRunning = validUpdates.filter(
-          u =>
-            u.status === TestRunStatus.RUNNING ||
-            u.status === TestRunStatus.QUEUED ||
-            u.status === TestRunStatus.CANCELLING,
-        )
-
-        // If no test runs are running anymore, stop polling
-        if (stillRunning.length === 0 && pollingRef.current) {
-          clearInterval(pollingRef.current)
-          pollingRef.current = null
+        } catch (error) {
+          console.error('Error polling test runs status:', error)
         }
-      } catch (error) {
-        console.error('Error polling test runs status:', error)
-      }
+      })()
     }, 2000) // Poll every 2 seconds
 
     return () => {

package/templates/blank/src/app/(base)/test-suites/editable-test-suite-helpers.ts

@@ -0,0 +1,17 @@
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import { isTagRow, isTestSuiteTableRow } from './test-suite-row-guards'
+import type { EditableTestSuite } from './test-suite-types'
+
+function isEditableTestSuite(value: unknown): value is EditableTestSuite {
+  return (
+    isTestSuiteTableRow(value) &&
+    'tags' in value &&
+    Array.isArray(value.tags) &&
+    value.tags.every(isTagRow)
+  )
+}
+
+export function getEditableTestSuite(data: ActionResponseData | undefined) {
+  return isEditableTestSuite(data) ? data : null
+}

package/templates/blank/src/app/(base)/test-suites/page.tsx

@@ -31,11 +31,11 @@ const TestSuites = async () => {
     ...card,
     icon:
       card.legend === 'Empty test suite(s)' ? (
-        <EmptyTube className="h-12 w-12 rounded-sm bg-muted p-2" />
+        <EmptyTube className="size-12 rounded-sm bg-muted p-2" />
       ) : card.legend === 'Latest test suite' ? (
-        <TubePlus className="h-12 w-12 rounded-sm bg-muted p-2" />
+        <TubePlus className="size-12 rounded-sm bg-muted p-2" />
       ) : (
-        <TagIcon className="h-12 w-12 rounded-sm bg-muted p-2" />
+        <TagIcon className="size-12 rounded-sm bg-muted p-2" />
       ),
   }))
 
@@ -43,7 +43,7 @@ const TestSuites = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<TestTubes className="h-8 w-8" />}
+          icon={<TestTubes className="size-8" />}
           title="No test suites found"
           description="Get started by creating a test suite and grouping tests together"
           createRoute="/test-suites/create"
@@ -57,7 +57,7 @@ const TestSuites = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <TestTubes className="mr-2 h-8 w-8" />
+            <TestTubes className="mr-2 size-8" />
             Test Suites
           </span>
         </PageHeader>

package/templates/blank/src/app/(base)/test-suites/test-suite-form-display-helpers.ts

@@ -0,0 +1,54 @@
+import type { Module, Tag } from '@prisma/client'
+
+import { testSuiteSchema } from '@/constants/form-opts/test-suite-form-opts'
+import type { ActionResponse } from '@/types/form/actionHandler'
+
+export const testSuiteFieldValidators = {
+  name: testSuiteSchema.shape.name,
+  moduleId: testSuiteSchema.shape.moduleId,
+}
+
+export const testSuiteQuickTips = [
+  {
+    title: 'Choose a descriptive name',
+    description: 'Use clear, specific names that indicate the purpose',
+  },
+  {
+    title: 'Group related tests',
+    description: 'Organize tests that validate the same feature together',
+  },
+  {
+    title: 'Use meaningful tags',
+    description: 'Tags help filter and categorize effectively',
+  },
+] as const
+
+export function getFieldErrorMessage(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)
+}
+
+export function getActionErrorMessage(response: ActionResponse) {
+  return response.error || 'An error occurred'
+}
+
+export function getModuleOptions(modules: Module[]) {
+  return modules.map(module => ({
+    label: module.name,
+    value: module.id,
+  }))
+}
+
+export function getTagOptions(tags: Tag[]) {
+  return tags.map(tag => ({
+    label: tag.name,
+    value: tag.id,
+  }))
+}