create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/components/navigation/nav-command-search.tsx

@@ -69,7 +69,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTestSuitesAction}
           getEntities={getTestSuiteRows}
           searchKey="name"
-          icon={<TestTubes className="h-4 w-4" />}
+          icon={<TestTubes className="size-4" />}
           onSelect={testSuite => onSelectRoute(`/test-suites/modify/${testSuite.id}`)}
         />
       )
@@ -81,7 +81,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTestCasesAction}
           getEntities={getTestCaseRows}
           searchKey="title"
-          icon={<TestTubeDiagonal className="h-4 w-4" />}
+          icon={<TestTubeDiagonal className="size-4" />}
           onSelect={testCase => onSelectRoute(`/test-cases/modify/${testCase.id}`)}
         />
       )
@@ -93,7 +93,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTemplateStepsAction}
           getEntities={getTemplateStepRows}
           searchKey="name"
-          icon={<LayoutTemplate className="h-4 w-4" />}
+          icon={<LayoutTemplate className="size-4" />}
           onSelect={templateStep => onSelectRoute(`/template-steps/modify/${templateStep.id}`)}
         />
       )
@@ -105,7 +105,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTestRunsAction}
           getEntities={getTestRunRows}
           searchKey="name"
-          icon={<ListChecks className="h-4 w-4" />}
+          icon={<ListChecks className="size-4" />}
           onSelect={testRun => onSelectRoute(`/test-runs/${testRun.id}`)}
         />
       )
@@ -117,7 +117,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTemplateTestCasesAction}
           getEntities={getTemplateTestCaseRows}
           searchKey="name"
-          icon={<Blocks className="h-4 w-4" />}
+          icon={<Blocks className="size-4" />}
           onSelect={templateTestCase => onSelectRoute(`/template-test-cases/modify/${templateTestCase.id}`)}
         />
       )

package/templates/starter/src/components/navigation/nav-command.tsx

@@ -24,12 +24,12 @@ export type NavCommandProps = {
 }
 
 export default function NavCommand({ className }: NavCommandProps) {
-  const router = useRouter()
+  const { push } = useRouter()
   const { open, setOpen, commandMode, searchQuery, setSearchQuery, isMac, clearSearchMode, selectSearchMode } =
     useNavCommand()
 
   const handleNavigate = (href: string) => {
-    router.push(href)
+    push(href)
     setOpen(false)
   }
 
@@ -43,11 +43,11 @@ export default function NavCommand({ className }: NavCommandProps) {
       >
         <span>Open Command Palette</span>
         <div className="flex items-center gap-1 text-xs text-muted-foreground">
-          <kbd className="rounded-md bg-muted px-1 text-xs text-gray-400">
-            {isMac ? <Command className="h-2 w-2 text-gray-400" /> : 'Ctrl'}
+          <kbd className="rounded-md bg-muted px-1 text-xs text-zinc-400">
+            {isMac ? <Command className="size-2 text-zinc-400" /> : 'Ctrl'}
           </kbd>
-          <Plus className="h-2 w-2 text-gray-400" />
-          <kbd className="rounded-md bg-muted px-1 text-xs text-gray-400">K</kbd>
+          <Plus className="size-2 text-zinc-400" />
+          <kbd className="rounded-md bg-muted px-1 text-xs text-zinc-400">K</kbd>
         </div>
       </Button>
       <CommandDialog open={open} onOpenChange={setOpen} shouldFilter={!commandMode}>
@@ -71,7 +71,7 @@ export default function NavCommand({ className }: NavCommandProps) {
                     const Icon = item.icon
                     return (
                       <CommandItem key={item.href} value={item.label} onSelect={() => handleNavigate(item.href)}>
-                        <Icon className="h-4 w-4" />
+                        <Icon className="size-4" />
                         {item.label}
                       </CommandItem>
                     )
@@ -83,7 +83,7 @@ export default function NavCommand({ className }: NavCommandProps) {
                   const Icon = item.icon
                   return (
                     <CommandItem key={item.mode} value={item.label} onSelect={() => selectSearchMode(item.mode)}>
-                      <Icon className="h-4 w-4" />
+                      <Icon className="size-4" />
                       {item.label}
                     </CommandItem>
                   )

package/templates/starter/src/components/navigation/nav-link.tsx

@@ -1,60 +1,60 @@
-'use client'
-
-import { usePathname } from 'next/navigation'
-import Link from 'next/link'
-import { useMemo } from 'react'
-import { cn } from '@/lib/utils'
-
-const NavLink = ({
-  children,
-  href,
-  icon,
-  className,
-  isIconOnly,
-}: {
-  children?: React.ReactNode
-  href: string
-  icon?: React.ReactNode
-  className?: React.HTMLAttributes<HTMLAnchorElement>['className']
-  isIconOnly?: boolean
-}) => {
-  const pathname = usePathname()
-
-  // Use useMemo to prevent unnecessary re-renders and ensure stable active state
-  const isActive = useMemo(() => {
-    // Exact match for root paths
-    if (href === '/' && pathname === '/') {
-      return true
-    }
-    // For other paths, check if the current path starts with the href
-    // This handles nested routes like /test-cases/create, /test-cases/modify, etc.
-    return href !== '/' && pathname.startsWith(href)
-  }, [pathname, href])
-
-  return (
-    <Link
-      href={href}
-      className={cn(
-        'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors',
-        'hover:bg-accent hover:text-accent-foreground',
-        'focus:bg-accent focus:text-accent-foreground',
-        'focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50',
-        'disabled:pointer-events-none disabled:opacity-50',
-        'outline-none',
-        isActive && 'bg-accent text-accent-foreground',
-        className,
-      )}
-    >
-      {isIconOnly ? (
-        icon
-      ) : (
-        <div className="flex items-center gap-1">
-          {icon}
-          {children}
-        </div>
-      )}
-    </Link>
-  )
-}
-
-export default NavLink
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { useMemo } from 'react'
+import { cn } from '@/lib/utils'
+
+const NavLink = ({
+  children,
+  href,
+  icon,
+  className,
+  isIconOnly,
+}: {
+  children?: React.ReactNode
+  href: string
+  icon?: React.ReactNode
+  className?: React.HTMLAttributes<HTMLAnchorElement>['className']
+  isIconOnly?: boolean
+}) => {
+  const pathname = usePathname()
+
+  // Use useMemo to prevent unnecessary re-renders and ensure stable active state
+  const isActive = useMemo(() => {
+    // Exact match for root paths
+    if (href === '/' && pathname === '/') {
+      return true
+    }
+    // For other paths, check if the current path starts with the href
+    // This handles nested routes like /test-cases/create, /test-cases/modify, etc.
+    return href !== '/' && pathname.startsWith(href)
+  }, [pathname, href])
+
+  return (
+    <Link
+      href={href}
+      className={cn(
+        'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors',
+        'hover:bg-accent hover:text-accent-foreground',
+        'focus:bg-accent focus:text-accent-foreground',
+        'focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'outline-none',
+        isActive && 'bg-accent text-accent-foreground',
+        className,
+      )}
+    >
+      {isIconOnly ? (
+        icon
+      ) : (
+        <div className="flex items-center gap-1">
+          {icon}
+          {children}
+        </div>
+      )}
+    </Link>
+  )
+}
+
+export default NavLink

package/templates/starter/src/components/navigation/nav-menu-card-deck.tsx

@@ -6,7 +6,8 @@ import React, { useState } from 'react'
 import { cn } from '@/lib/utils'
 import { Card, CardContent } from '../ui/card'
 import { ChevronDown } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
+import { AnimatePresence, LazyMotion, domAnimation } from 'motion/react'
+import * as motion from 'motion/react-m'
 
 const NavMenuCardDeck = ({
   containerButtonText,
@@ -34,78 +35,80 @@ const NavMenuCardDeck = ({
   }
 
   return (
-    <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <button
-        type="button"
-        className={cn(
-          'flex items-center gap-2 rounded-md px-4 py-2 outline-none transition-colors',
-          checkIfTriggerActive(pathname) && 'bg-accent text-accent-foreground',
-          'hover:bg-accent hover:text-accent-foreground',
-        )}
-      >
-        {containerButtonIcon}
-        <span className="text-sm font-medium">{containerButtonText}</span>
-        <motion.div animate={{ rotate: isHovered ? 180 : 0 }} transition={{ duration: 0.2, ease: 'easeInOut' }}>
-          <ChevronDown className="h-4 w-4 text-muted-foreground" />
-        </motion.div>
-      </button>
+    <LazyMotion features={domAnimation} strict>
+      <div className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+        <button
+          type="button"
+          className={cn(
+            'flex items-center gap-2 rounded-md px-4 py-2 outline-none transition-colors',
+            checkIfTriggerActive(pathname) && 'bg-accent text-accent-foreground',
+            'hover:bg-accent hover:text-accent-foreground',
+          )}
+        >
+          {containerButtonIcon}
+          <span className="text-sm font-medium">{containerButtonText}</span>
+          <motion.div animate={{ rotate: isHovered ? 180 : 0 }} transition={{ duration: 0.2, ease: 'easeInOut' }}>
+            <ChevronDown className="size-4 text-muted-foreground" />
+          </motion.div>
+        </button>
 
-      <AnimatePresence>
-        {isHovered && (
-          <>
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="absolute left-0 top-full h-1 w-full bg-transparent"
-            />
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="absolute left-0 top-full z-50 mt-1 rounded-md border border-none bg-popover p-2 shadow-md"
-            >
-              <div
-                className={cn(
-                  'grid gap-1',
-                  dropdownItems.length === 1 ? 'w-[300px] grid-cols-1' : 'w-[600px] grid-cols-2',
-                )}
+        <AnimatePresence>
+          {isHovered && (
+            <>
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="absolute left-0 top-full h-1 w-full bg-transparent"
+              />
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="absolute left-0 top-full z-50 mt-1 rounded-md border border-none bg-popover p-2 shadow-md"
               >
-                {dropdownItems.map(item => (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    className="transition-colors hover:cursor-pointer"
-                    onClick={() => setIsHovered(false)}
-                  >
-                    <Card
-                      className={cn(
-                        'h-24 w-full border-none outline-none transition-colors hover:bg-accent dark:hover:bg-primary-foreground dark:hover:text-accent-foreground',
-                        checkIfItemActive(item.href) &&
-                          'bg-green-400/25 text-accent-foreground dark:bg-primary-foreground',
-                        'hover:cursor-pointer',
-                      )}
+                <div
+                  className={cn(
+                    'grid gap-1',
+                    dropdownItems.length === 1 ? 'w-[300px] grid-cols-1' : 'w-[600px] grid-cols-2',
+                  )}
+                >
+                  {dropdownItems.map(item => (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className="transition-colors hover:cursor-pointer"
+                      onClick={() => setIsHovered(false)}
                     >
-                      <CardContent className="flex h-full w-full items-center gap-3 p-4">
-                        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md text-accent-foreground">
-                          {item.icon}
-                        </div>
-                        <div className="flex min-w-0 flex-1 flex-col justify-center">
-                          <span className="truncate text-sm font-medium">{item.text}</span>
-                          <span className="line-clamp-2 text-xs text-accent-foreground">{item.description}</span>
-                        </div>
-                      </CardContent>
-                    </Card>
-                  </Link>
-                ))}
-              </div>
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
-    </div>
+                      <Card
+                        className={cn(
+                          'h-24 w-full border-none outline-none transition-colors hover:bg-accent dark:hover:bg-primary-foreground dark:hover:text-accent-foreground',
+                          checkIfItemActive(item.href) &&
+                            'bg-green-400/25 text-accent-foreground dark:bg-primary-foreground',
+                          'hover:cursor-pointer',
+                        )}
+                      >
+                        <CardContent className="flex size-full items-center gap-3 p-4">
+                          <div className="flex size-12 flex-shrink-0 items-center justify-center rounded-md text-accent-foreground">
+                            {item.icon}
+                          </div>
+                          <div className="flex min-w-0 flex-1 flex-col justify-center">
+                            <span className="truncate text-sm font-medium">{item.text}</span>
+                            <span className="line-clamp-2 text-xs text-accent-foreground">{item.description}</span>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </Link>
+                  ))}
+                </div>
+              </motion.div>
+            </>
+          )}
+        </AnimatePresence>
+      </div>
+    </LazyMotion>
   )
 }
 

package/templates/starter/src/components/reports/test-case-logs-modal.tsx

@@ -49,7 +49,7 @@ const stepStatusToBadge = (status: StepStatus) => {
           variant="outline"
           className="flex items-center gap-1 rounded-xl border-green-700 bg-green-700/10 py-0.5 text-xs text-green-500"
         >
-          <CheckCircle className="h-3 w-3" />
+          <CheckCircle className="size-3" />
           PASSED
         </Badge>
       )
@@ -59,7 +59,7 @@ const stepStatusToBadge = (status: StepStatus) => {
           variant="outline"
           className="flex items-center gap-1 rounded-xl border-red-700 bg-red-700/10 py-0.5 text-xs text-red-500"
         >
-          <XCircle className="h-3 w-3" />
+          <XCircle className="size-3" />
           FAILED
         </Badge>
       )
@@ -67,9 +67,9 @@ const stepStatusToBadge = (status: StepStatus) => {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-1 rounded-xl border-gray-700 bg-gray-700/10 py-0.5 text-xs text-gray-500"
+          className="flex items-center gap-1 rounded-xl border-zinc-700 bg-zinc-700/10 py-0.5 text-xs text-zinc-500"
         >
-          <Clock className="h-3 w-3" />
+          <Clock className="size-3" />
           SKIPPED
         </Badge>
       )
@@ -77,7 +77,7 @@ const stepStatusToBadge = (status: StepStatus) => {
       return (
         <Badge
           variant="outline"
-          className="flex items-center gap-1 rounded-xl border-gray-700 bg-gray-700/10 py-0.5 text-xs text-gray-500"
+          className="flex items-center gap-1 rounded-xl border-zinc-700 bg-zinc-700/10 py-0.5 text-xs text-zinc-500"
         >
           {status}
         </Badge>
@@ -109,7 +109,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
   }
 
   // Sort steps by order
-  const sortedSteps = [...reportScenario.steps].sort((a, b) => a.order - b.order)
+  const sortedSteps = reportScenario.steps.toSorted((a, b) => a.order - b.order)
 
   return (
     <>
@@ -170,7 +170,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
                               {step.errorMessage && (
                                 <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
                                   <div className="mb-1 flex items-center gap-2">
-                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <AlertCircle className="size-4 text-red-500" />
                                     <span className="text-sm font-medium text-red-400">Error Message</span>
                                   </div>
                                   <pre className="whitespace-pre-wrap break-words text-xs text-red-300">
@@ -181,7 +181,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
                               {step.errorTrace && (
                                 <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
                                   <div className="mb-1 flex items-center gap-2">
-                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <AlertCircle className="size-4 text-red-500" />
                                     <span className="text-sm font-medium text-red-400">Error Trace</span>
                                   </div>
                                   <pre className="whitespace-pre-wrap break-words font-mono text-xs text-red-300">
@@ -255,7 +255,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
                               {hook.errorMessage && (
                                 <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
                                   <div className="mb-1 flex items-center gap-2">
-                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <AlertCircle className="size-4 text-red-500" />
                                     <span className="text-sm font-medium text-red-400">Error Message</span>
                                   </div>
                                   <pre className="whitespace-pre-wrap break-words text-xs text-red-300">
@@ -266,7 +266,7 @@ export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCa
                               {hook.errorTrace && (
                                 <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
                                   <div className="mb-1 flex items-center gap-2">
-                                    <AlertCircle className="h-4 w-4 text-red-500" />
+                                    <AlertCircle className="size-4 text-red-500" />
                                     <span className="text-sm font-medium text-red-400">Error Trace</span>
                                   </div>
                                   <pre className="whitespace-pre-wrap break-words font-mono text-xs text-red-300">

package/templates/starter/src/components/table/table-actions.test.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { ReactNode } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import TableActions from './table-actions'
+
+const { toast } = vi.hoisted(() => ({
+  toast: vi.fn(),
+}))
+
+vi.mock('next/link', () => ({
+  default: ({ href, children, ...props }: { href: string; children: ReactNode }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+describe('TableActions', () => {
+  it('restores interactivity after deleting from the row actions menu', async () => {
+    const user = userEvent.setup()
+    const deleteHandler = vi.fn().mockResolvedValue({
+      status: 200,
+      message: 'Deleted',
+    })
+
+    render(<TableActions deleteHandler={deleteHandler} />)
+
+    await user.click(screen.getByRole('button', { name: 'Open menu' }))
+    await user.click(screen.getByText('Delete'))
+    await user.click(screen.getByRole('button', { name: /^delete$/i }))
+
+    await waitFor(() => {
+      expect(deleteHandler).toHaveBeenCalledTimes(1)
+    })
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+
+    expect(document.body.style.pointerEvents).not.toBe('none')
+
+    await user.click(screen.getByRole('button', { name: 'Open menu' }))
+    expect(screen.getByText('Actions')).toBeInTheDocument()
+  })
+})

package/templates/starter/src/components/table/table-actions.tsx

@@ -30,10 +30,10 @@ const TableActions = ({
   editActionText = 'Edit',
   deleteActionText = 'Delete',
   cancelActionText = 'Cancel',
-  editActionIcon = <Pencil className="h-4 w-4" />,
-  deleteActionIcon = <Trash className="h-4 w-4" />,
-  viewActionIcon = <Eye className="h-4 w-4" />,
-  cancelActionIcon = <XCircle className="h-4 w-4" />,
+  editActionIcon = <Pencil className="size-4" />,
+  deleteActionIcon = <Trash className="size-4" />,
+  viewActionIcon = <Eye className="size-4" />,
+  cancelActionIcon = <XCircle className="size-4" />,
 }: {
   modifyLink?: string
   deleteHandler: () => Promise<ActionResponse>
@@ -83,11 +83,11 @@ const TableActions = ({
         open={isDeleteDialogOpen}
         onOpenChange={setIsDeleteDialogOpen}
       />
-      <DropdownMenu>
+      <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="h-8 w-8 p-0">
+          <Button variant="ghost" className="size-8 p-0">
             <span className="sr-only">Open menu</span>
-            <MoreHorizontal className="h-4 w-4" />
+            <MoreHorizontal className="size-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
@@ -159,9 +159,13 @@ const TableActions = ({
             </span>
           </DropdownMenuItem>
           {resolveConflictsHandler && (
-            <DropdownMenuItem>
-              <span className="flex items-center gap-2" onClick={resolveConflictsHandler}>
-                <CheckCircleIcon className="h-4 w-4" /> Mark conflicts as resolved
+            <DropdownMenuItem
+              onClick={() => {
+                void resolveConflictsHandler()
+              }}
+            >
+              <span className="flex items-center gap-2">
+                <CheckCircleIcon className="size-4" /> Mark conflicts as resolved
               </span>
             </DropdownMenuItem>
           )}

package/templates/starter/src/components/test-case/test-case-form-helpers.test.ts

@@ -50,6 +50,7 @@ describe('test-case form helpers', () => {
       }),
     ).toEqual([
       {
+        nodeId: 'node-1',
         gherkinStep: 'fill email',
         label: 'Fill email',
         icon: TemplateStepIcon.INPUT,