create-appraisejs 0.3.1-alpha.0 → 0.3.1-alpha.1

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

@@ -34,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')
@@ -105,11 +101,7 @@ describe('TagForm', () => {
     const onSubmitAction = vi.fn()
 
     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')

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

@@ -10,6 +10,7 @@ import { getActionErrorMessage, getCreatedTag, tagFieldValidators, type TagFormS
 
 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'
 
@@ -119,7 +120,7 @@ const TagForm = ({
       >
         {field => {
           return (
-            <div className="mb-4 flex w-full flex-col gap-2">
+            <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} />
@@ -135,7 +136,7 @@ const TagForm = ({
       >
         {field => {
           return (
-            <div className="mb-4 flex w-full flex-col gap-2">
+            <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}
@@ -151,7 +152,8 @@ const TagForm = ({
       <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>

package/templates/starter/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/starter/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/starter/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/starter/src/app/(base)/template-step-groups/template-step-group-form.tsx

@@ -8,6 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 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 {
@@ -167,7 +168,8 @@ 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>

package/templates/starter/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/starter/src/app/(base)/template-steps/paramChip.tsx

@@ -128,11 +128,9 @@ export default function ParamChip({
         ...formValues,
       }
 
-      setItems(prev => {
-        const next = [...prev, newItem]
-        onSubmit(next.map(stripItemId))
-        return next
-      })
+      const nextItems = [...items, newItem]
+      setItems(nextItems)
+      onSubmit(nextItems.map(stripItemId))
 
       setFormValues({
         name: '',
@@ -146,11 +144,9 @@ export default function ParamChip({
 
   // Handle removing an item
   const removeItem = (id: string) => {
-    setItems(prev => {
-      const nextItems = prev.filter(item => item.id !== id)
-      onSubmit(nextItems.map(stripItemId))
-      return nextItems
-    })
+    const nextItems = items.filter(item => item.id !== id)
+    setItems(nextItems)
+    onSubmit(nextItems.map(stripItemId))
   }
 
   return (

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

@@ -46,11 +46,13 @@ export function buildFunctionDefinitionPreview(
   })
 
   const paramsString = params
-    .map(param => `${param.name}: ${param.type.toLowerCase() === 'locator' ? 'SelectorName' : param.type.toLowerCase()}`)
+    .map(
+      param => `${param.name}: ${param.type.toLowerCase() === 'locator' ? 'SelectorName' : param.type.toLowerCase()}`,
+    )
     .join(', ')
 
   return updatedSignature.replace(
-    /async function\s*\(\s*this:CustomWorld(?:,\s*.*?)?\s*\)/,
+    /async function\s*\(\s*this\s*:\s*CustomWorld(?:,\s*.*?)?\s*\)/,
     `async function(this:CustomWorld${params.length > 0 ? ', ' : ''}${paramsString})`,
   )
 }

package/templates/starter/src/app/(base)/template-steps/template-step-helpers.test.ts

@@ -1,7 +1,11 @@
 import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
 import { describe, expect, it } from 'vitest'
 
-import { buildFunctionDefinitionPreview, getTemplateStepFormDefaults, getTemplateStepRows } from './template-step-helpers'
+import {
+  buildFunctionDefinitionPreview,
+  getTemplateStepFormDefaults,
+  getTemplateStepRows,
+} from './template-step-helpers'
 
 describe('template-step helpers', () => {
   it('builds function previews from signature, type, and params', () => {
@@ -24,6 +28,20 @@ describe('template-step helpers', () => {
     ).toBe(`Then('see result', async function(this:CustomWorld){});`)
   })
 
+  it('updates function parameters when an existing definition uses formatted CustomWorld spacing', () => {
+    expect(
+      buildFunctionDefinitionPreview(
+        `When('the user does {string}', async function (this: CustomWorld, test: string) {});`,
+        'the user does {string}',
+        TemplateStepType.ACTION,
+        [
+          { name: 'terst', type: StepParameterType.STRING },
+          { name: 'gyg', type: StepParameterType.STRING },
+        ],
+      ),
+    ).toBe(`When('the user does {string}', async function(this:CustomWorld, terst: string, gyg: string) {});`)
+  })
+
   it('derives local state defaults for create and edit modes', () => {
     expect(getTemplateStepFormDefaults()).toEqual({
       signature: '',

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

@@ -6,11 +6,7 @@ export {
   getTemplateStepFormDefaults,
   templateStepFieldValidators,
 } from './template-step-form-helpers'
-export {
-  getEditableTemplateStep,
-  getTemplateStepGroupRows,
-  getTemplateStepRows,
-} from './template-step-row-guards'
+export { getEditableTemplateStep, getTemplateStepGroupRows, getTemplateStepRows } from './template-step-row-guards'
 export {
   getTemplateStepIconOptions,
   getTemplateStepParameterTypes,

package/templates/starter/src/app/(base)/template-steps/template-step-row-guards.ts

@@ -41,11 +41,7 @@ function hasTemplateStepShape(value: unknown): value is UnknownRecord & { parame
     'parameters',
   ] as const
 
-  return (
-    isRecord(value) &&
-    requiredFields.every(field => field in value) &&
-    Array.isArray(value.parameters)
-  )
+  return isRecord(value) && requiredFields.every(field => field in value) && Array.isArray(value.parameters)
 }
 
 function isEditableTemplateStep(value: unknown): value is EditableTemplateStep {

package/templates/starter/src/app/(base)/template-steps/template-step-types.ts

@@ -1,8 +1,4 @@
-import type {
-  TemplateStep as PrismaTemplateStep,
-  TemplateStepGroup,
-  TemplateStepParameter,
-} from '@prisma/client'
+import type { TemplateStep as PrismaTemplateStep, TemplateStepGroup, TemplateStepParameter } from '@prisma/client'
 
 import type { TemplateStep as TemplateStepFormValues } from '@/constants/form-opts/template-test-step-form-opts'
 import type { ActionResponse } from '@/types/form/actionHandler'

package/templates/starter/src/app/(base)/template-test-cases/create-template-test-case-page-data.test.ts

@@ -3,7 +3,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
 import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
 import { getAllModulesAction } from '@/actions/modules/module-actions'
-import { getAllTemplateStepParamsAction, getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import {
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+} from '@/actions/template-step/template-step-actions'
 import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
 
 import { loadCreateTemplateTestCasePageData } from './create-template-test-case-page-data'

package/templates/starter/src/app/(base)/template-test-cases/create-template-test-case-page-data.ts

@@ -39,8 +39,7 @@ export async function loadCreateTemplateTestCasePageData(): Promise<CreateTempla
     getAllModulesAction(),
   ])
 
-  const secondaryError =
-    templateStepsError || locatorsError || locatorGroupsError || environmentsError || modulesError
+  const secondaryError = templateStepsError || locatorsError || locatorGroupsError || environmentsError || modulesError
 
   if (secondaryError) {
     return { status: 'error', message: secondaryError }

package/templates/starter/src/app/(base)/template-test-cases/modify/[id]/page.tsx

@@ -140,6 +140,7 @@ const ModifyTemplateTestCase = async ({ params }: { params: Promise<{ id: string
             name: block.name,
             nodeIds: block.nodes.map(node => node.flowNodeId),
           }))}
+        defaultValueInput={true}
       />
     </>
   )

package/templates/starter/src/app/(base)/template-test-cases/template-test-case-flow.test.tsx

@@ -107,5 +107,4 @@ describe('TemplateTestCaseFlow', () => {
     })
     expect(screen.getByTestId('default-value-input')).toHaveTextContent('true')
   })
-
 })

package/templates/starter/src/app/(base)/template-test-cases/template-test-case-form.tsx

@@ -12,6 +12,7 @@ import {
   type TemplateStepParameter,
 } from '@prisma/client'
 import { useRouter } from 'next/navigation'
+import { Save } from 'lucide-react'
 import { z } from 'zod'
 
 import ErrorMessage from '@/components/form/error-message'
@@ -148,7 +149,8 @@ const TemplateTestCaseForm = ({
       <TemplateTestCaseFormFieldError message={errors.steps} />
       <div className="mb-4 flex flex-col gap-2">
         <Button onClick={handleSubmit} className="w-fit px-6">
-          Save
+          <Save className="size-4" aria-hidden />
+          <span className="font-bold">Save</span>
         </Button>
       </div>
     </div>