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

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

@@ -1,28 +1,28 @@
-import { createEnvironmentAction } from '@/actions/environments/environment-actions'
-import EnvironmentForm from '../environment-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 Environment',
-  description: 'Create a new environment configuration for your test runs',
-}
-
-const CreateEnvironment = async () => {
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Create Environment</PageHeader>
-        <HeaderSubtitle>Create a new environment configuration for your test runs.</HeaderSubtitle>
-      </div>
-      <EnvironmentForm
-        successTitle="Environment created"
-        successMessage="Environment created successfully"
-        onSubmitAction={createEnvironmentAction}
-      />
-    </>
-  )
-}
-
-export default CreateEnvironment
+import { createEnvironmentAction } from '@/actions/environments/environment-actions'
+import EnvironmentForm from '../environment-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 Environment',
+  description: 'Create a new environment configuration for your test runs',
+}
+
+const CreateEnvironment = async () => {
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Environment</PageHeader>
+        <HeaderSubtitle>Create a new environment configuration for your test runs.</HeaderSubtitle>
+      </div>
+      <EnvironmentForm
+        successTitle="Environment created"
+        successMessage="Environment created successfully"
+        onSubmitAction={createEnvironmentAction}
+      />
+    </>
+  )
+}
+
+export default CreateEnvironment

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

@@ -10,7 +10,7 @@ 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,
@@ -210,7 +210,8 @@ const EnvironmentForm = ({ defaultValues, successTitle, successMessage, id, onSu
       <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)/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/starter/src/app/(base)/layout.tsx

@@ -1,10 +1,10 @@
-/**
- * All (base) routes depend on server data (Prisma). Force dynamic rendering
- * so these pages are not statically generated at build time (e.g. in CI where
- * no database is available).
- */
-export const dynamic = 'force-dynamic'
-
-export default function BaseLayout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>
-}
+/**
+ * All (base) routes depend on server data (Prisma). Force dynamic rendering
+ * so these pages are not statically generated at build time (e.g. in CI where
+ * no database is available).
+ */
+export const dynamic = 'force-dynamic'
+
+export default function BaseLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}

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

@@ -3,10 +3,11 @@
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { locatorGroupFormOpts, 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'
@@ -174,7 +175,7 @@ const LocatorGroupForm = ({
       <form.Field
         name="route"
         validators={{
-          onChange: z.string().optional(),
+          onChange: locatorGroupSchema.shape.route,
         }}
       >
         {field => {
@@ -204,7 +205,8 @@ 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>

package/templates/starter/src/app/(base)/locator-groups/locator-group-table-columns.tsx

@@ -1,77 +1,77 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { LocatorGroup, Module } from '@prisma/client'
-import { formatDateTime } from '@/lib/utils'
-import { deleteLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
-import { Badge } from '@/components/ui/badge'
-
-export const locatorGroupTableCols: ColumnDef<LocatorGroup & { module: Module }>[] = [
-  {
-    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: 'module.name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Module" />,
-    cell: ({ row }) => {
-      const locatorGroup = row.original
-      return <Badge variant="outline">{locatorGroup.module?.name}</Badge>
-    },
-  },
-  {
-    accessorKey: 'route',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Route" />,
-  },
-  {
-    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 locatorGroup = row.original
-      return (
-        <TableActions
-          modifyLink={`/locator-groups/modify/${locatorGroup.id}`}
-          deleteHandler={() => deleteLocatorGroupAction([locatorGroup.id])}
-        />
-      )
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { LocatorGroup, Module } from '@prisma/client'
+import { formatDateTime } from '@/lib/utils'
+import { deleteLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
+import { Badge } from '@/components/ui/badge'
+
+export const locatorGroupTableCols: ColumnDef<LocatorGroup & { module: Module }>[] = [
+  {
+    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: 'module.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Module" />,
+    cell: ({ row }) => {
+      const locatorGroup = row.original
+      return <Badge variant="outline">{locatorGroup.module?.name}</Badge>
+    },
+  },
+  {
+    accessorKey: 'route',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Route" />,
+  },
+  {
+    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 locatorGroup = row.original
+      return (
+        <TableActions
+          modifyLink={`/locator-groups/modify/${locatorGroup.id}`}
+          deleteHandler={() => deleteLocatorGroupAction([locatorGroup.id])}
+        />
+      )
+    },
+  },
+]

package/templates/starter/src/app/(base)/locator-groups/locator-group-table.tsx

@@ -1,28 +1,28 @@
-import { deleteLocatorGroupAction, getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { DataTable } from '@/components/ui/data-table'
-import { LocatorGroup, Module } from '@prisma/client'
-import { locatorGroupTableCols } from './locator-group-table-columns'
-
-const LocatorGroupTable = async () => {
-  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
-
-  if (locatorGroupsError) {
-    return <div>Error: {locatorGroupsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={locatorGroupTableCols}
-        data={locatorGroups as (LocatorGroup & { module: Module })[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/locator-groups/create"
-        modifyLink="/locator-groups/modify"
-        deleteAction={deleteLocatorGroupAction}
-      />
-    </>
-  )
-}
-
-export default LocatorGroupTable
+import { deleteLocatorGroupAction, getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { LocatorGroup, Module } from '@prisma/client'
+import { locatorGroupTableCols } from './locator-group-table-columns'
+
+const LocatorGroupTable = async () => {
+  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
+
+  if (locatorGroupsError) {
+    return <div>Error: {locatorGroupsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={locatorGroupTableCols}
+        data={locatorGroups as (LocatorGroup & { module: Module })[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/locator-groups/create"
+        modifyLink="/locator-groups/modify"
+        deleteAction={deleteLocatorGroupAction}
+      />
+    </>
+  )
+}
+
+export default LocatorGroupTable

package/templates/starter/src/app/(base)/locator-groups/modify/[id]/page.tsx

@@ -1,46 +1,46 @@
-import { getLocatorGroupByIdAction } from '@/actions/locator-groups/locator-group-actions'
-import { LocatorGroup, Module } from '@prisma/client'
-import React from 'react'
-import LocatorGroupForm from '../../locator-group-form'
-import { updateLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
-import { getAllModulesAction } from '@/actions/modules/module-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Locator Group',
-  description: 'Update locator group configuration',
-}
-
-const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data, error } = await getLocatorGroupByIdAction(id)
-
-  if (error) {
-    return <div>Error: {error}</div>
-  }
-
-  const locatorGroup = data as LocatorGroup
-
-  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
-
-  if (moduleListError) {
-    return <div>Error: {moduleListError}</div>
-  }
-
-  return (
-    <LocatorGroupForm
-      defaultValues={{
-        name: locatorGroup.name ?? '',
-        moduleId: locatorGroup.moduleId ?? '',
-        route: locatorGroup.route ?? '',
-      }}
-      successTitle="Locator Group updated"
-      successMessage="Locator Group updated successfully"
-      onSubmitAction={updateLocatorGroupAction}
-      id={id}
-      moduleList={moduleList as Module[]}
-    />
-  )
-}
-
-export default ModifyLocator
+import { getLocatorGroupByIdAction } from '@/actions/locator-groups/locator-group-actions'
+import { LocatorGroup, Module } from '@prisma/client'
+import React from 'react'
+import LocatorGroupForm from '../../locator-group-form'
+import { updateLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Locator Group',
+  description: 'Update locator group configuration',
+}
+
+const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data, error } = await getLocatorGroupByIdAction(id)
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+
+  const locatorGroup = data as LocatorGroup
+
+  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
+
+  if (moduleListError) {
+    return <div>Error: {moduleListError}</div>
+  }
+
+  return (
+    <LocatorGroupForm
+      defaultValues={{
+        name: locatorGroup.name ?? '',
+        moduleId: locatorGroup.moduleId ?? '',
+        route: locatorGroup.route ?? '',
+      }}
+      successTitle="Locator Group updated"
+      successMessage="Locator Group updated successfully"
+      onSubmitAction={updateLocatorGroupAction}
+      id={id}
+      moduleList={moduleList as Module[]}
+    />
+  )
+}
+
+export default ModifyLocator

package/templates/starter/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',
@@ -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 size-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 size-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/starter/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' },

package/templates/starter/src/app/(base)/locators/create/create-locator-workspace-response.ts

@@ -51,9 +51,7 @@ function isEnvironmentRow(value: unknown): value is Environment {
 }
 
 function isLocatorGroupRow(value: unknown): value is LocatorGroup {
-  return (
-    isRecord(value) && hasStringProps(value, ['id', 'name', 'route', 'moduleId']) && hasDateProps(value)
-  )
+  return isRecord(value) && hasStringProps(value, ['id', 'name', 'route', 'moduleId']) && hasDateProps(value)
 }
 
 function isModuleRow(value: unknown): value is Module {
@@ -82,7 +80,15 @@ function isLocatorPickerSession(value: unknown): value is LocatorPickerSession {
   return (
     value.browserName === 'chromium' &&
     hasStringProp(value.launchSource, 'url') &&
-    hasStringProps(value, ['sessionId', 'status', 'currentUrl', 'currentPathname', 'pageTitle', 'startedAt', 'updatedAt']) &&
+    hasStringProps(value, [
+      'sessionId',
+      'status',
+      'currentUrl',
+      'currentPathname',
+      'pageTitle',
+      'startedAt',
+      'updatedAt',
+    ]) &&
     (typeof value.companionPid === 'number' || value.companionPid === null) &&
     'companionPid' in value
   )
@@ -109,7 +115,18 @@ export function getLocatorPickerSession(data: ActionResponseData | undefined) {
 }
 
 export function getInlineLocatorSaveResult(data: ActionResponseData | undefined): InlineLocatorSaveResult | null {
-  if (isRecord(data) && hasStringProps(data, ['locatorId', 'locatorName', 'locatorGroupId', 'locatorGroupName', 'selector', 'route', 'moduleId'])) {
+  if (
+    isRecord(data) &&
+    hasStringProps(data, [
+      'locatorId',
+      'locatorName',
+      'locatorGroupId',
+      'locatorGroupName',
+      'selector',
+      'route',
+      'moduleId',
+    ])
+  ) {
     return {
       locatorId: data.locatorId,
       locatorName: data.locatorName,

package/templates/starter/src/app/(base)/locators/create/create-locator-workspace-state.ts

@@ -147,7 +147,11 @@ function applySuggestedLocatorName(
   nextState.lastAutoLocatorName = suggestedName
 }
 
-function applySuggestedRoute(nextState: LocatorWorkspaceState, currentState: LocatorWorkspaceState, suggestedRoute: string) {
+function applySuggestedRoute(
+  nextState: LocatorWorkspaceState,
+  currentState: LocatorWorkspaceState,
+  suggestedRoute: string,
+) {
   if (!canReplaceRoute(currentState)) {
     return
   }

package/templates/starter/src/app/(base)/locators/create/use-locator-workspace.ts

@@ -75,7 +75,11 @@ export function useLocatorWorkspace({
 
   useEffect(() => {
     const nextPayloadSignature = getPickerPayloadSignature(session)
-    if (!session?.pickedLocator || nextPayloadSignature === '' || nextPayloadSignature === payloadSignatureRef.current) {
+    if (
+      !session?.pickedLocator ||
+      nextPayloadSignature === '' ||
+      nextPayloadSignature === payloadSignatureRef.current
+    ) {
       return
     }
 
@@ -118,7 +122,8 @@ export function useLocatorWorkspace({
 
     toast({
       title: 'Chromium launched',
-      description: 'Use the in-browser Appraise picker panel to start picking, click one element, then confirm Use selector.',
+      description:
+        'Use the in-browser Appraise picker panel to start picking, click one element, then confirm Use selector.',
     })
   }
 

package/templates/starter/src/app/(base)/locators/locator-file-sync.ts

@@ -1,10 +1,6 @@
 import { syncLocatorsFromFilesAction } from '@/actions/locator/locator-actions'
 
-import {
-  showLocatorSyncFailureToast,
-  showLocatorSyncToast,
-  type LocatorSyncPayload,
-} from './locator-sync-toast'
+import { showLocatorSyncFailureToast, showLocatorSyncToast, type LocatorSyncPayload } from './locator-sync-toast'
 
 export async function runLocatorFileSync(refresh: () => void) {
   try {

package/templates/starter/src/app/(base)/locators/locator-helpers.ts

@@ -13,21 +13,11 @@ export type LocatorGroupSummary = {
 export type ConflictResolutionSummary = Pick<ConflictResolution, 'id'>
 
 function isLocatorGroupRow(value: unknown): value is LocatorGroupSummary {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'name' in value &&
-    typeof value.name === 'string'
-  )
+  return typeof value === 'object' && value !== null && 'name' in value && typeof value.name === 'string'
 }
 
 function isConflictRow(value: unknown): value is ConflictResolutionSummary {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'id' in value &&
-    typeof value.id === 'string'
-  )
+  return typeof value === 'object' && value !== null && 'id' in value && typeof value.id === 'string'
 }
 
 function isLocatorTableRow(value: unknown): value is LocatorTableRow {