create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/blank/src/app/(base)/tags/tag-form-helpers.ts

@@ -1,5 +1,6 @@
 import { tagSchema, type Tag } from '@/constants/form-opts/tag-form-opts'
 import { type ActionResponse } from '@/types/form/actionHandler'
+import type { Tag as PrismaTag } from '@prisma/client'
 
 export type TagFormSubmitAction = (_prev: unknown, value: Tag, id?: string) => Promise<ActionResponse>
 
@@ -11,3 +12,11 @@ export const tagFieldValidators = {
 export function getActionErrorMessage(response: ActionResponse) {
   return response.error || response.message || 'Unable to save tag.'
 }
+
+export function getCreatedTag(data: ActionResponse['data']) {
+  if (typeof data === 'object' && data !== null && 'id' in data && 'name' in data && 'tagExpression' in data) {
+    return data as PrismaTag
+  }
+
+  return null
+}

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

@@ -2,7 +2,7 @@
 
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import TagForm from './tag-form'
 
@@ -22,6 +22,11 @@ vi.mock('@/hooks/use-toast', () => ({
 }))
 
 describe('TagForm', () => {
+  beforeEach(() => {
+    push.mockReset()
+    toast.mockReset()
+  })
+
   it('submits valid values, shows a toast, and navigates back to the tags list', async () => {
     const user = userEvent.setup()
     const onSubmitAction = vi.fn().mockResolvedValue({
@@ -29,11 +34,7 @@ describe('TagForm', () => {
     })
 
     render(
-      <TagForm
-        successTitle="Tag created"
-        successMessage="Tag created successfully"
-        onSubmitAction={onSubmitAction}
-      />,
+      <TagForm successTitle="Tag created" successMessage="Tag created successfully" onSubmitAction={onSubmitAction} />,
     )
 
     await user.type(screen.getByLabelText('Name'), 'Smoke')
@@ -58,18 +59,51 @@ describe('TagForm', () => {
     expect(push).toHaveBeenCalledWith('/tags')
   })
 
-  it('shows validation feedback for an invalid tag expression and does not submit', async () => {
+  it('does not redirect and calls onSuccess with created tag data in dialog mode', async () => {
     const user = userEvent.setup()
-    const onSubmitAction = vi.fn()
+    const onSuccess = vi.fn()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+      data: {
+        id: 'tag-2',
+        name: 'Inline Tag',
+        tagExpression: '@inline',
+      },
+    })
 
     render(
       <TagForm
         successTitle="Tag created"
         successMessage="Tag created successfully"
         onSubmitAction={onSubmitAction}
+        onSuccess={onSuccess}
+        redirectPath={null}
       />,
     )
 
+    await user.type(screen.getByLabelText('Name'), 'Inline Tag')
+    await user.type(screen.getByLabelText('Tag Expression'), '@inline')
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledWith({
+        id: 'tag-2',
+        name: 'Inline Tag',
+        tagExpression: '@inline',
+      })
+    })
+
+    expect(push).not.toHaveBeenCalled()
+  })
+
+  it('shows validation feedback for an invalid tag expression and does not submit', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <TagForm successTitle="Tag created" successMessage="Tag created successfully" onSubmitAction={onSubmitAction} />,
+    )
+
     await user.type(screen.getByLabelText('Name'), 'Smoke')
     await user.type(screen.getByLabelText('Tag Expression'), 'smoke')
 

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

@@ -4,12 +4,15 @@ 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 { tagFormOpts, 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 { getActionErrorMessage, getCreatedTag, tagFieldValidators, type TagFormSubmitAction } from './tag-form-helpers'
 
+import type { Tag as PrismaTag } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
+import { Save } from 'lucide-react'
 import { useRouter } from 'next/navigation'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 
 type TagFormProps = {
   defaultValues?: Tag
@@ -17,6 +20,8 @@ type TagFormProps = {
   successMessage: string
   id?: string
   onSubmitAction: TagFormSubmitAction
+  onSuccess?: (tag: PrismaTag) => void | Promise<void>
+  redirectPath?: string | null
 }
 
 type TagFieldErrorsProps = {
@@ -43,30 +48,51 @@ function TagFieldErrors({ errors, isTouched }: TagFieldErrorsProps) {
 
   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 TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitAction }: TagFormProps) => {
-  const router = useRouter()
+const TagForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  onSubmitAction,
+  onSuccess,
+  redirectPath = '/tags',
+}: TagFormProps) => {
+  const { push } = useRouter()
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
-    validators: formOpts?.validators,
+    defaultValues: defaultValues ?? tagFormOpts.defaultValues,
+    validators: tagFormOpts.validators,
     onSubmit: async ({ value }) => {
       const res = await onSubmitAction(undefined, value, id)
       if (res.status === 200) {
+        if (onSuccess) {
+          const createdTag = getCreatedTag(res.data)
+          if (!createdTag) {
+            toast({
+              title: 'Error',
+              description: 'Created tag data was not returned.',
+              variant: 'destructive',
+            })
+            return
+          }
+
+          await onSuccess(createdTag)
+        }
+
         toast({
           title: successTitle,
           description: successMessage,
         })
-        router.push('/tags')
+
+        if (redirectPath) {
+          push(redirectPath)
+        }
       }
       if (res.status === 400) {
         toast({
@@ -85,13 +111,7 @@ const TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitActi
     },
   })
   return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
+    <TanStackForm onSubmit={() => form.handleSubmit()}>
       <form.Field
         name="name"
         validators={{
@@ -100,7 +120,7 @@ const TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitActi
       >
         {field => {
           return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+            <div className="mb-4 flex w-full flex-col gap-2 lg:w-1/2">
               <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} />
@@ -116,7 +136,7 @@ const TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitActi
       >
         {field => {
           return (
-            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+            <div className="mb-4 flex w-full flex-col gap-2 lg:w-1/2">
               <Label htmlFor={field.name}>Tag Expression</Label>
               <Input
                 id={field.name}
@@ -132,11 +152,12 @@ const TagForm = ({ defaultValues, successTitle, successMessage, id, onSubmitActi
       <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)/template-step-groups/page.tsx

@@ -27,7 +27,7 @@ const TemplateStepGroups = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<Component className="h-8 w-8" />}
+          icon={<Component className="size-8" />}
           title="No template step groups found"
           description="Get started by creating a template step group to organize related template steps"
           createRoute="/template-step-groups/create"
@@ -42,7 +42,7 @@ const TemplateStepGroups = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <Component className="mr-2 h-8 w-8" />
+            <Component className="mr-2 size-8" />
             Template Step Groups
           </span>
         </PageHeader>

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

@@ -5,9 +5,11 @@ 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 TemplateStepGroup } from '@/constants/form-opts/template-step-group-form-opts'
+import { templateStepGroupFormOpts, type TemplateStepGroup } from '@/constants/form-opts/template-step-group-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { useForm } from '@tanstack/react-form'
+import { Save } from 'lucide-react'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 import { useRouter } from 'next/navigation'
 import {
   getActionErrorMessage,
@@ -49,8 +51,8 @@ function TemplateStepGroupFieldErrors({ errors, isTouched }: TemplateStepGroupFi
 
   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>
   )
@@ -63,10 +65,10 @@ export const TemplateStepGroupForm = ({
   id,
   onSubmitAction,
 }: TemplateStepGroupFormProps) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts.defaultValues,
-    validators: formOpts.validators,
+    defaultValues: defaultValues ?? templateStepGroupFormOpts.defaultValues,
+    validators: templateStepGroupFormOpts.validators,
     onSubmit: async ({ value }) => {
       const res = await onSubmitAction(undefined, value, id)
       if (res.status === 200) {
@@ -74,7 +76,7 @@ export const TemplateStepGroupForm = ({
           title: successTitle,
           description: successMessage,
         })
-        router.push('/template-step-groups')
+        push('/template-step-groups')
       }
       if (res.status === 400) {
         toast({
@@ -93,13 +95,7 @@ export const TemplateStepGroupForm = ({
     },
   })
   return (
-    <form
-      onSubmit={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-    >
+    <TanStackForm onSubmit={() => form.handleSubmit()}>
       <form.Field
         name="name"
         validators={{
@@ -172,10 +168,11 @@ export const TemplateStepGroupForm = ({
       <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)/template-step-groups/template-step-group-helpers.ts

@@ -1,4 +1,7 @@
-import { templateStepGroupSchema, type TemplateStepGroup as TemplateStepGroupFormValues } from '@/constants/form-opts/template-step-group-form-opts'
+import {
+  templateStepGroupSchema,
+  type TemplateStepGroup as TemplateStepGroupFormValues,
+} from '@/constants/form-opts/template-step-group-form-opts'
 import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
 
 export const templateStepGroupTypes = ['ACTION', 'VALIDATION'] as const

package/templates/blank/src/app/(base)/template-step-groups/template-step-group-table-columns.tsx

@@ -47,11 +47,7 @@ export const templateStepGroupTableCols: ColumnDef<TemplateStepGroupTableRow>[]
     cell: ({ row }) => {
       const templateStepGroup = row.original
       const icon =
-        templateStepGroup.type === 'ACTION' ? (
-          <MousePointer2 className="h-4 w-4" />
-        ) : (
-          <CheckCheck className="h-4 w-4" />
-        )
+        templateStepGroup.type === 'ACTION' ? <MousePointer2 className="size-4" /> : <CheckCheck className="size-4" />
       return (
         <Badge variant="outline" className="flex w-fit items-center gap-1">
           {icon}

package/templates/blank/src/app/(base)/template-steps/modify/[id]/page.tsx

@@ -13,20 +13,26 @@ export const metadata: Metadata = {
 
 export default async function ModifyTemplateStepPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
-  const [templateStepResponse, templateStepGroupsResponse] = await Promise.all([
-    getTemplateStepByIdAction(id),
-    getAllTemplateStepGroupsAction(),
-  ])
+  if (!id?.trim()) {
+    return <div>Error: Invalid template step id.</div>
+  }
 
-  if (templateStepResponse.error || templateStepGroupsResponse.error) {
-    return <div>Error: {templateStepResponse.error || templateStepGroupsResponse.error}</div>
+  const templateStepResponse = await getTemplateStepByIdAction(id)
+  if (templateStepResponse.error) {
+    return <div>Error: {templateStepResponse.error}</div>
   }
 
   const templateStep = getEditableTemplateStep(templateStepResponse.data)
-  const templateStepGroups = getTemplateStepGroupRows(templateStepGroupsResponse.data)
   if (!templateStep) {
     return <div>Error: Invalid template step</div>
   }
+
+  const templateStepGroupsResponse = await getAllTemplateStepGroupsAction()
+  if (templateStepGroupsResponse.error) {
+    return <div>Error: {templateStepGroupsResponse.error}</div>
+  }
+
+  const templateStepGroups = getTemplateStepGroupRows(templateStepGroupsResponse.data)
   return (
     <TemplateStepForm
       successTitle="Template step modified"

package/templates/blank/src/app/(base)/template-steps/page.tsx

@@ -28,7 +28,7 @@ const TemplateSteps = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<LayoutTemplate className="h-8 w-8" />}
+          icon={<LayoutTemplate className="size-8" />}
           title="No template steps found"
           description="Get started by creating a template step to define reusable test steps"
           createRoute="/template-steps/create"
@@ -43,7 +43,7 @@ const TemplateSteps = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <LayoutTemplate className="mr-2 h-8 w-8" />
+            <LayoutTemplate className="mr-2 size-8" />
             Template Steps
           </span>
         </PageHeader>

package/templates/blank/src/app/(base)/template-steps/paramChip.tsx

@@ -5,7 +5,14 @@ import type React from 'react'
 import { useState, useEffect } from 'react'
 import { PlusCircle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
@@ -116,26 +123,21 @@ export default function ParamChip({
     e.preventDefault()
 
     if (validateForm()) {
-      // Create a new item with the form values
       const newItem = {
         id: crypto.randomUUID(),
         ...formValues,
       }
 
-      // Add the new item to the items array
-      setItems([...items, newItem])
+      const nextItems = [...items, newItem]
+      setItems(nextItems)
+      onSubmit(nextItems.map(stripItemId))
 
-      // Reset the form
       setFormValues({
         name: '',
         type: '',
         order: 1,
       })
 
-      // Call the onSubmit callback with the new item
-      onSubmit([...items, newItem].map(stripItemId))
-
-      // Close the modal
       setIsOpen(false)
     }
   }
@@ -150,7 +152,7 @@ export default function ParamChip({
   return (
     <div className="space-y-6">
       <Button type="button" onClick={() => setIsOpen(true)} variant="outline" size="icon">
-        <PlusCircle className="h-4 w-4" />
+        <PlusCircle className="size-4" />
       </Button>
 
       {/* Display the added items as chips */}
@@ -175,6 +177,7 @@ export default function ParamChip({
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Add New Item</DialogTitle>
+            <DialogDescription>Add a parameter name, type, and display order.</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">

package/templates/blank/src/app/(base)/template-steps/template-step-form-helpers.ts

@@ -0,0 +1,67 @@
+import { TemplateStepType } from '@prisma/client'
+
+import {
+  templateStepSchema,
+  type TemplateStep as TemplateStepFormValues,
+} from '@/constants/form-opts/template-test-step-form-opts'
+import type { ActionResponse } from '@/types/form/actionHandler'
+
+export const templateStepFieldValidators = {
+  name: templateStepSchema.shape.name,
+  templateStepGroupId: templateStepSchema.shape.templateStepGroupId,
+  type: templateStepSchema.shape.type,
+  signature: templateStepSchema.shape.signature,
+}
+
+export function getInitialFunctionDefinition() {
+  return `When('', async function(this:CustomWorld){});`
+}
+
+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 buildFunctionDefinitionPreview(
+  currentDefinition: string,
+  signature: string,
+  type: TemplateStepType,
+  params: Array<{ name: string; type: string }>,
+  quoteType: `'` | `"` | '`' = `'`,
+) {
+  const updatedSignature = currentDefinition.replace(/(When|Then)\((['"`])(.*?)\2/, () => {
+    const keyword = type === TemplateStepType.ASSERTION ? 'Then' : 'When'
+    return `${keyword}(${quoteType}${signature}${quoteType}`
+  })
+
+  const paramsString = params
+    .map(
+      param => `${param.name}: ${param.type.toLowerCase() === 'locator' ? 'SelectorName' : param.type.toLowerCase()}`,
+    )
+    .join(', ')
+
+  return updatedSignature.replace(
+    /async function\s*\(\s*this\s*:\s*CustomWorld(?:,\s*.*?)?\s*\)/,
+    `async function(this:CustomWorld${params.length > 0 ? ', ' : ''}${paramsString})`,
+  )
+}
+
+export function getTemplateStepFormDefaults(defaultValues?: TemplateStepFormValues) {
+  return {
+    signature: defaultValues?.signature ?? '',
+    functionDefinition: defaultValues?.functionDefinition ?? getInitialFunctionDefinition(),
+    type: (defaultValues?.type as TemplateStepType) ?? TemplateStepType.ACTION,
+    params: defaultValues?.params ?? [],
+  }
+}

package/templates/blank/src/app/(base)/template-steps/template-step-form.tsx

@@ -5,10 +5,11 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 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 TemplateStep } from '@/constants/form-opts/template-test-step-form-opts'
+import { templateStepFormOpts, type TemplateStep } from '@/constants/form-opts/template-test-step-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { TemplateStepType } from '@prisma/client'
 import { useForm } from '@tanstack/react-form'
+import { TanStackForm } from '@/lib/form/tanstack-form'
 import CodeMirror, { EditorView } from '@uiw/react-codemirror'
 import { langs } from '@uiw/codemirror-extensions-langs'
 import { githubDark } from '@uiw/codemirror-theme-github'
@@ -46,7 +47,7 @@ export const TemplateStepForm = ({
   onSubmitAction: TemplateStepFormSubmitAction
   templateStepGroups: Array<{ id: string; name: string }>
 }) => {
-  const router = useRouter()
+  const { push } = useRouter()
   const initialState = getTemplateStepFormDefaults(defaultValues)
   const [signature, setSignature] = useState(initialState.signature)
   const [baseFunctionDefinition, setBaseFunctionDefinition] = useState(initialState.functionDefinition)
@@ -58,8 +59,8 @@ export const TemplateStepForm = ({
   )
 
   const form = useForm({
-    defaultValues: defaultValues ?? formOpts?.defaultValues,
-    validators: formOpts?.validators,
+    defaultValues: defaultValues ?? templateStepFormOpts.defaultValues,
+    validators: templateStepFormOpts.validators,
     onSubmit: async ({ value }) => {
       value.functionDefinition = functionDefinition
       const res = await onSubmitAction(undefined, value, id)
@@ -72,7 +73,7 @@ export const TemplateStepForm = ({
         setBaseFunctionDefinition(getInitialFunctionDefinition())
         setType(TemplateStepType.ACTION)
         setParams([])
-        router.push(`/template-steps`)
+        push(`/template-steps`)
       }
       if (res.status === 400) {
         toast({
@@ -91,8 +92,8 @@ export const TemplateStepForm = ({
     },
   })
 
-  const renderError = (error: unknown, index: number) => (
-    <p key={index} className="text-xs text-pink-500">
+  const renderError = (error: unknown) => (
+    <p key={getFieldErrorMessage(error)} className="text-xs text-pink-500">
       {getFieldErrorMessage(error)}
     </p>
   )
@@ -114,15 +115,9 @@ export const TemplateStepForm = ({
           </p>
         </AlertDescription>
       </Alert>
-      <form
-        onSubmit={e => {
-          e.preventDefault()
-          e.stopPropagation()
-          form.handleSubmit()
-        }}
-      >
+      <TanStackForm onSubmit={() => form.handleSubmit()}>
         <div className="flex gap-4">
-          <Card className="w-full bg-gray-500/10">
+          <Card className="w-full bg-zinc-500/10">
             <CardHeader>
               <CardTitle>Template Step Details</CardTitle>
               <CardDescription>Configure your template step function details</CardDescription>
@@ -285,14 +280,14 @@ export const TemplateStepForm = ({
                   return (
                     <div className="mb-4 flex flex-col gap-2">
                       <Label htmlFor={field.name}>Parameters</Label>
-                        <ParamChip
-                          defaultValues={params}
-                          types={parameterTypes}
-                          onSubmit={value => {
-                            field.handleChange(value)
-                            setParams(value)
-                          }}
-                        />
+                      <ParamChip
+                        defaultValues={params}
+                        types={parameterTypes}
+                        onSubmit={value => {
+                          field.handleChange(value)
+                          setParams(value)
+                        }}
+                      />
                     </div>
                   )
                 }}
@@ -300,7 +295,7 @@ export const TemplateStepForm = ({
               <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
                 {([canSubmit, isSubmitting]) => (
                   <Button type="submit" disabled={!canSubmit}>
-                    <Save className="h-4 w-4" />
+                    <Save className="size-4" />
                     {isSubmitting ? '...' : 'Save'}
                   </Button>
                 )}
@@ -308,7 +303,7 @@ export const TemplateStepForm = ({
             </CardContent>
           </Card>
           <div className="w-full">
-            <Card className="bg-gray-500/10">
+            <Card className="bg-zinc-500/10">
               <CardHeader>
                 <CardTitle>Template Step Function Definition (Preview)</CardTitle>
                 <CardDescription>
@@ -336,7 +331,7 @@ export const TemplateStepForm = ({
             </Card>
           </div>
         </div>
-      </form>
+      </TanStackForm>
     </>
   )
 }