create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/blank/src/actions/settings/sync-actions.ts

@@ -5,7 +5,9 @@ import { runRequestedSync, type SyncExecutionResult } from '@/lib/sync/sync-exec
 import { getSyncPendingCounts, type SyncPendingCounts } from '@/lib/sync/sync-pending-counts'
 import { isSyncRequestId } from '@/lib/sync/sync-registry'
 
-export async function runSyncAction(requestedScriptId: string): Promise<SyncExecutionResult | InvalidSyncExecutionResult> {
+export async function runSyncAction(
+  requestedScriptId: string,
+): Promise<SyncExecutionResult | InvalidSyncExecutionResult> {
   if (!isSyncRequestId(requestedScriptId)) {
     return {
       requestedScriptId,

package/templates/blank/src/actions/tags/tag-actions.ts

@@ -1,13 +1,7 @@
 'use server'
 
 import { tagSchema } from '@/constants/form-opts/tag-form-opts'
-import {
-  createTag,
-  deleteTags,
-  getTagByIdOrThrow,
-  listFilterTags,
-  updateTag,
-} from '@/services/tag/tag-service'
+import { createTag, deleteTags, getTagByIdOrThrow, listFilterTags, updateTag } from '@/services/tag/tag-service'
 import { ServiceError, serviceErrorToActionResponse, unknownErrorToActionResponse } from '@/services/shared/errors'
 import { ActionResponse } from '@/types/form/actionHandler'
 import { revalidatePath } from 'next/cache'

package/templates/blank/src/actions/template-test-case/template-test-case-actions.ts

@@ -40,7 +40,9 @@ export async function deleteTemplateTestCaseAction(id: string[]): Promise<Action
   }
 }
 
-export async function createTemplateTestCaseAction(value: z.infer<typeof templateTestCaseSchema>): Promise<ActionResponse> {
+export async function createTemplateTestCaseAction(
+  value: z.infer<typeof templateTestCaseSchema>,
+): Promise<ActionResponse> {
   try {
     templateTestCaseSchema.parse(value)
     const newTemplateTestCase = await createTemplateTestCase(value)

package/templates/blank/src/actions/test-suite/test-suite-actions.ts

@@ -32,12 +32,13 @@ export async function createTestSuiteAction(
 ): Promise<ActionResponse> {
   try {
     testSuiteSchema.parse(value)
-    await createTestSuiteFromInput(value)
+    const createdTestSuite = await createTestSuiteFromInput(value)
 
     revalidatePath('/test-suites')
     return {
       status: 200,
       success: true,
+      data: createdTestSuite,
       message: 'Test suite created successfully',
     }
   } catch (error) {

package/templates/blank/src/app/(base)/environments/environment-form.tsx

@@ -4,12 +4,13 @@ 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 Environment } from '@/constants/form-opts/environment-form-opts'
+import { environmentFormOpts, type Environment } from '@/constants/form-opts/environment-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { useForm } from '@tanstack/react-form'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
-import { Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff, Save } from 'lucide-react'
 import {
   environmentFieldValidators,
   getActionErrorMessage,
@@ -48,25 +49,19 @@ function EnvironmentFieldErrors({ errors, isTouched }: EnvironmentFieldErrorsPro
 
   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} />
+      {errors.map(error => (
+        <ErrorMessage key={getErrorMessage(error)} message={getErrorMessage(error)} visible={true} />
       ))}
     </div>
   )
 }
 
-const EnvironmentForm = ({
-  defaultValues,
-  successTitle,
-  successMessage,
-  id,
-  onSubmitAction,
-}: EnvironmentFormProps) => {
-  const router = useRouter()
+const EnvironmentForm = ({ defaultValues, successTitle, successMessage, id, onSubmitAction }: EnvironmentFormProps) => {
+  const { push } = useRouter()
   const [showPassword, setShowPassword] = useState(false)
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts.defaultValues,
-    validators: formOpts.validators,
+    defaultValues: defaultValues ?? environmentFormOpts.defaultValues,
+    validators: environmentFormOpts.validators,
     onSubmit: async ({ value }) => {
       const res = await onSubmitAction(undefined, value, id)
       if (res.status === 200) {
@@ -74,7 +69,7 @@ const EnvironmentForm = ({
           title: successTitle,
           description: successMessage,
         })
-        router.push('/environments')
+        push('/environments')
       }
       if (res.status === 400) {
         toast({
@@ -93,13 +88,7 @@ const EnvironmentForm = ({
     },
   })
   return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
+    <TanStackForm onSubmit={() => form.handleSubmit()}>
       <form.Field
         name="name"
         validators={{
@@ -206,7 +195,11 @@ const EnvironmentForm = ({
                   className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                   onClick={() => setShowPassword(!showPassword)}
                 >
-                  {showPassword ? <EyeOff className="h-4 w-4" aria-hidden="true" /> : <Eye className="h-4 w-4" aria-hidden="true" />}
+                  {showPassword ? (
+                    <EyeOff className="size-4" aria-hidden="true" />
+                  ) : (
+                    <Eye className="size-4" aria-hidden="true" />
+                  )}
                 </Button>
               </div>
               <EnvironmentFieldErrors errors={field.state.meta.errors} isTouched={field.state.meta.isTouched} />
@@ -217,11 +210,12 @@ const EnvironmentForm = ({
       <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
         {([canSubmit, isSubmitting]) => (
           <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
+            <Save className="size-4" aria-hidden />
+            <span className="font-bold">{isSubmitting ? '...' : 'Save'}</span>
           </Button>
         )}
       </form.Subscribe>
-    </form>
+    </TanStackForm>
   )
 }
 

package/templates/blank/src/app/(base)/environments/environment-helpers.ts

@@ -1,4 +1,7 @@
-import { environmentSchema, type Environment as EnvironmentFormValues } from '@/constants/form-opts/environment-form-opts'
+import {
+  environmentSchema,
+  type Environment as EnvironmentFormValues,
+} from '@/constants/form-opts/environment-form-opts'
 import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
 
 export type EnvironmentTableRow = {

package/templates/blank/src/app/(base)/environments/page.tsx

@@ -28,7 +28,7 @@ const Environments = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<Server className="h-8 w-8" />}
+          icon={<Server className="size-8" />}
           title="No environments found"
           description="Get started by creating an environment to manage your test configurations"
           createRoute="/environments/create"
@@ -43,7 +43,7 @@ const Environments = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Server className="mr-2 h-8 w-8" />
+            <Server className="mr-2 size-8" />
             Environments
           </span>
         </PageHeader>

package/templates/blank/src/app/(base)/locator-groups/create/page.tsx

@@ -25,7 +25,7 @@ const CreateLocatorGroup = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Group className="mr-2 h-8 w-8" />
+            <Group className="mr-2 size-8" />
             Create Locator Group
           </span>
         </PageHeader>

package/templates/blank/src/app/(base)/locator-groups/locator-group-form.tsx

@@ -3,10 +3,12 @@
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { formOpts, LocatorGroup } from '@/constants/form-opts/locator-group-form-opts'
+import { locatorGroupFormOpts, locatorGroupSchema, LocatorGroup } from '@/constants/form-opts/locator-group-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { ActionResponse } from '@/types/form/actionHandler'
 import { useForm } from '@tanstack/react-form'
+import { Save } from 'lucide-react'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 import React, { useCallback, useRef } from 'react'
 import { z } from 'zod'
 import { useRouter } from 'next/navigation'
@@ -28,13 +30,9 @@ const LocatorGroupForm = ({
   successMessage: string
   moduleList: Module[]
   id?: string
-  onSubmitAction: (
-    _prev: unknown,
-    value: LocatorGroup,
-    id?: string,
-  ) => Promise<ActionResponse>
+  onSubmitAction: (_prev: unknown, value: LocatorGroup, id?: string) => Promise<ActionResponse>
 }) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
   // Debounced function to check name uniqueness
@@ -71,8 +69,8 @@ const LocatorGroupForm = ({
   )
 
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
-    validators: formOpts?.validators,
+    defaultValues: defaultValues ?? locatorGroupFormOpts.defaultValues,
+    validators: locatorGroupFormOpts.validators,
     onSubmit: async ({ value }) => {
       const res = await onSubmitAction(undefined, value, id)
       if (res.status === 200) {
@@ -80,7 +78,7 @@ const LocatorGroupForm = ({
           title: successTitle,
           description: successMessage,
         })
-        router.push('/locator-groups')
+        push('/locator-groups')
       }
       if (res.status === 400) {
         toast({
@@ -99,13 +97,7 @@ const LocatorGroupForm = ({
     },
   })
   return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
+    <TanStackForm onSubmit={() => form.handleSubmit()}>
       <form.Field
         name="name"
         validators={{
@@ -130,8 +122,11 @@ const LocatorGroupForm = ({
                 placeholder="Enter locator group name"
               />
               {field.state.meta.isTouched &&
-                field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
+                field.state.meta.errors.map(error => (
+                  <p
+                    key={typeof error === 'string' ? error : error?.message || String(error)}
+                    className="text-xs text-pink-500"
+                  >
                     {typeof error === 'string' ? error : error?.message || String(error)}
                   </p>
                 ))}
@@ -165,8 +160,11 @@ const LocatorGroupForm = ({
                 </SelectContent>
               </Select>
               {field.state.meta.isTouched &&
-                field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
+                field.state.meta.errors.map(error => (
+                  <p
+                    key={typeof error === 'string' ? error : error?.message || String(error)}
+                    className="text-xs text-pink-500"
+                  >
                     {typeof error === 'string' ? error : error?.message || String(error)}
                   </p>
                 ))}
@@ -177,7 +175,7 @@ const LocatorGroupForm = ({
       <form.Field
         name="route"
         validators={{
-          onChange: z.string().optional(),
+          onChange: locatorGroupSchema.shape.route,
         }}
       >
         {field => {
@@ -191,8 +189,11 @@ const LocatorGroupForm = ({
                 placeholder="Enter the route of page the locator group is for. Default is '/' (root)"
               />
               {field.state.meta.isTouched &&
-                field.state.meta.errors.map((error, index) => (
-                  <p key={index} className="text-xs text-pink-500">
+                field.state.meta.errors.map(error => (
+                  <p
+                    key={typeof error === 'string' ? error : error?.message || String(error)}
+                    className="text-xs text-pink-500"
+                  >
                     {typeof error === 'string' ? error : error?.message || String(error)}
                   </p>
                 ))}
@@ -204,11 +205,12 @@ const LocatorGroupForm = ({
       <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
         {([canSubmit, isSubmitting]) => (
           <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
+            <Save className="size-4" aria-hidden />
+            <span className="font-bold">{isSubmitting ? '...' : 'Save'}</span>
           </Button>
         )}
       </form.Subscribe>
-    </form>
+    </TanStackForm>
   )
 }
 

package/templates/blank/src/app/(base)/locator-groups/page.tsx

@@ -1,7 +1,7 @@
 import PageHeader from '@/components/typography/page-header'
 import HeaderSubtitle from '@/components/typography/page-header-subtitle'
 import React from 'react'
-import { Group, Plus } from 'lucide-react'
+import { Group } from 'lucide-react'
 import LocatorGroupTable from './locator-group-table'
 import { Suspense } from 'react'
 import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
@@ -9,8 +9,6 @@ import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-grou
 import EmptyState from '@/components/data-state/empty-state'
 import { LocatorGroup } from '@prisma/client'
 import { Metadata } from 'next'
-import { Button } from '@/components/ui/button'
-import Link from 'next/link'
 
 export const metadata: Metadata = {
   title: 'Appraise | Locator Groups',
@@ -30,7 +28,7 @@ const LocatorGroups = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<Group className="h-8 w-8" />}
+          icon={<Group className="size-8" />}
           title="No locator groups found"
           description="Get started by creating a locator group to organize your locators"
           createRoute="/locator-groups/create"
@@ -43,22 +41,14 @@ const LocatorGroups = async () => {
   return (
     <>
       <div className="mb-8">
-        <div className="flex items-center justify-between">
-          <div>
-            <PageHeader>
-              <span className="flex items-center">
-                <Group className="mr-2 h-8 w-8" />
-                Locator Groups
-              </span>
-            </PageHeader>
-            <HeaderSubtitle>Organize locators for better maintainability and reusability</HeaderSubtitle>
-          </div>
-          <Button variant="outline" asChild>
-            <Link href="/locators/create">
-              <Plus className="mr-2 h-4 w-4" />
-              Create Locator
-            </Link>
-          </Button>
+        <div>
+          <PageHeader>
+            <span className="flex items-center">
+              <Group className="mr-2 size-8" />
+              Locator Groups
+            </span>
+          </PageHeader>
+          <HeaderSubtitle>Organize locators for better maintainability and reusability</HeaderSubtitle>
         </div>
       </div>
       <Suspense fallback={<DataTableSkeleton />}>

package/templates/blank/src/app/(base)/locators/create/create-locator-workspace-helpers.test.ts

@@ -26,12 +26,9 @@ describe('create-locator-workspace helpers', () => {
 
   it('applies a picked locator suggestion to empty or auto-filled fields', () => {
     const nextState = applyPickedLocatorToWorkspaceState(
-      createInitialWorkspaceState(
-        [{ id: 'env-1' } as never],
-        {
-          route: '/',
-        },
-      ),
+      createInitialWorkspaceState([{ id: 'env-1' } as never], {
+        route: '/',
+      }),
       {
         sessionId: 'session-1',
         launchSource: { url: 'https://example.com' },