create-appraisejs 0.2.0-alpha.6 → 0.3.0-alpha.0

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

@@ -1,163 +1,43 @@
 'use client'
 
-import {
-  Blocks,
-  Code,
-  Command,
-  Component,
-  FileCheck,
-  Group,
-  LayoutDashboard,
-  LayoutTemplate,
-  ListChecks,
-  Plus,
-  Puzzle,
-  Server,
-  Settings2,
-  Tag,
-  TestTubeDiagonal,
-  TestTubes,
-} from 'lucide-react'
-import { Button } from '../ui/button'
+import { Command, Plus } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+
 import { cn } from '@/lib/utils'
-import { useEffect, useState } from 'react'
-import { CommandEmpty, CommandList, CommandGroup, CommandItem, CommandDialog } from '../ui/command'
+
+import { Button } from '../ui/button'
+import { CommandDialog, CommandEmpty, CommandGroup, CommandItem, CommandList } from '../ui/command'
 import { DialogDescription, DialogTitle } from '../ui/dialog'
-import Link from 'next/link'
-import { useRouter } from 'next/navigation'
 import { CommandChainInput } from './command-chain-input'
-import { EntitySearchCommand } from './entity-search-command'
-import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
-import { TestSuite, TestCase, TemplateStep, TestRun, TemplateTestCase } from '@prisma/client'
-import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
-import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
-import { getAllTestRunsAction } from '@/actions/test-run/test-run-actions'
-import { getAllTemplateTestCasesAction } from '@/actions/template-test-case/template-test-case-actions'
-
-type CommandMode =
-  | null
-  | 'search-test-suite'
-  | 'search-test-case'
-  | 'search-template-step'
-  | 'search-test-run'
-  | 'search-template-test-case'
+import {
+  commandModePlaceholders,
+  defaultCommandPlaceholder,
+  getCommandBadge,
+  navigationCommandGroups,
+  searchCommandItems,
+} from './nav-command-helpers'
+import { NavCommandSearch } from './nav-command-search'
+import { useNavCommand } from './use-nav-command'
 
-const commandModeToPlaceholder = {
-  'search-test-suite': 'Search Test Suite by Name...',
-  'search-test-case': 'Search Test Case by Title...',
-  'search-template-step': 'Search Template Step by Name...',
-  'search-test-run': 'Search Test Run by Name...',
-  'search-template-test-case': 'Search Template Test Case by Name...',
+export type NavCommandProps = {
+  className?: string
 }
 
-export default function NavCommand({ className }: { className?: string }) {
+export default function NavCommand({ className }: NavCommandProps) {
   const router = useRouter()
+  const { open, setOpen, commandMode, searchQuery, setSearchQuery, isMac, clearSearchMode, selectSearchMode } =
+    useNavCommand()
 
-  const [open, setOpen] = useState(false)
-  const [commandMode, setCommandMode] = useState<CommandMode>(null)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [isMac, setIsMac] = useState(false)
-
-  // Detect platform only after mount to avoid hydration mismatch (server has no navigator)
-  useEffect(() => {
-    queueMicrotask(() => setIsMac(navigator.userAgent.toLowerCase().includes('mac')))
-  }, [])
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen(open => !open)
-      }
-    }
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-  }, [])
-
-  // Reset command mode and search query when dialog closes (defer setState to avoid sync setState in effect)
-  useEffect(() => {
-    if (!open) {
-      queueMicrotask(() => {
-        setCommandMode(null)
-        setSearchQuery('')
-      })
-    }
-  }, [open])
-
-  const handleTestSuiteSelect = (testSuite: TestSuite) => {
-    router.push(`/test-suites/modify/${testSuite.id}`)
-    setOpen(false)
-  }
-  const handleTestCaseSelect = (testCase: TestCase) => {
-    router.push(`/test-cases/modify/${testCase.id}`)
-    setOpen(false)
-  }
-  const handleTemplateStepSelect = (templateStep: TemplateStep) => {
-    router.push(`/template-steps/modify/${templateStep.id}`)
-    setOpen(false)
-  }
-  const handleTestRunSelect = (testRun: TestRun) => {
-    router.push(`/test-runs/${testRun.id}`)
-    setOpen(false)
-  }
-  const handleTemplateTestCaseSelect = (templateTestCase: TemplateTestCase) => {
-    router.push(`/template-test-cases/modify/${templateTestCase.id}`)
+  const handleNavigate = (href: string) => {
+    router.push(href)
     setOpen(false)
   }
 
-  const getBadgeConfig = () => {
-    if (commandMode === 'search-test-suite') {
-      return {
-        label: 'Search Test Suite',
-        onClose: () => {
-          setCommandMode(null)
-          setSearchQuery('')
-        },
-      }
-    }
-    if (commandMode === 'search-test-case') {
-      return {
-        label: 'Search Test Case',
-        onClose: () => {
-          setCommandMode(null)
-          setSearchQuery('')
-        },
-      }
-    }
-    if (commandMode === 'search-template-step') {
-      return {
-        label: 'Search Template Step',
-        onClose: () => {
-          setCommandMode(null)
-          setSearchQuery('')
-        },
-      }
-    }
-    if (commandMode === 'search-test-run') {
-      return {
-        label: 'Search Test Run',
-        onClose: () => {
-          setCommandMode(null)
-          setSearchQuery('')
-        },
-      }
-    }
-    if (commandMode === 'search-template-test-case') {
-      return {
-        label: 'Search Template Test Case',
-        onClose: () => {
-          setCommandMode(null)
-          setSearchQuery('')
-        },
-      }
-    }
-    return undefined
-  }
-
   return (
     <>
       <Button
         variant="outline"
+        aria-label="Open Command Palette"
         className={cn('hover:bg-accent-foreground/10 flex w-1/5 justify-between px-4 hover:text-primary', className)}
         onClick={() => setOpen(true)}
       >
@@ -174,343 +54,40 @@ export default function NavCommand({ className }: { className?: string }) {
         <DialogTitle className="sr-only">Command Palette</DialogTitle>
         <DialogDescription className="sr-only">Search for a command or navigate to a page</DialogDescription>
         <CommandChainInput
-          placeholder={commandMode ? commandModeToPlaceholder[commandMode] : 'Type a command or search...'}
-          badge={getBadgeConfig()}
+          placeholder={commandMode ? commandModePlaceholders[commandMode] : defaultCommandPlaceholder}
+          badge={getCommandBadge(commandMode, clearSearchMode)}
           value={searchQuery}
           onValueChange={setSearchQuery}
         />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
-          {commandMode === 'search-test-suite' ? (
-            <EntitySearchCommand
-              searchQuery={searchQuery}
-              entityName="Test Suite"
-              fetchAction={getAllTestSuitesAction}
-              searchKey="name"
-              icon={<TestTubes className="h-4 w-4" />}
-              onSelect={handleTestSuiteSelect}
-            />
-          ) : commandMode === 'search-test-case' ? (
-            <EntitySearchCommand
-              searchQuery={searchQuery}
-              entityName="Test Case"
-              fetchAction={getAllTestCasesAction}
-              searchKey="title"
-              icon={<TestTubeDiagonal className="h-4 w-4" />}
-              onSelect={handleTestCaseSelect}
-            />
-          ) : commandMode === 'search-template-step' ? (
-            <EntitySearchCommand
-              searchQuery={searchQuery}
-              entityName="Template Step"
-              fetchAction={getAllTemplateStepsAction}
-              searchKey="name"
-              icon={<LayoutTemplate className="h-4 w-4" />}
-              onSelect={handleTemplateStepSelect}
-            />
-          ) : commandMode === 'search-test-run' ? (
-            <EntitySearchCommand
-              searchQuery={searchQuery}
-              entityName="Test Run"
-              fetchAction={getAllTestRunsAction}
-              searchKey="name"
-              icon={<ListChecks className="h-4 w-4" />}
-              onSelect={handleTestRunSelect}
-            />
-          ) : commandMode === 'search-template-test-case' ? (
-            <EntitySearchCommand
-              searchQuery={searchQuery}
-              entityName="Template Test Case"
-              fetchAction={getAllTemplateTestCasesAction}
-              searchKey="name"
-              icon={<Blocks className="h-4 w-4" />}
-              onSelect={handleTemplateTestCaseSelect}
-            />
+          {commandMode ? (
+            <NavCommandSearch commandMode={commandMode} searchQuery={searchQuery} onSelectRoute={handleNavigate} />
           ) : (
             <>
-              <CommandGroup heading="Overview">
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/')
-                  }}
-                >
-                  <Link href="/" onClick={() => setOpen(false)}>
-                    <LayoutDashboard className="h-4 w-4" />
-                    Dashboard
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/settings')
-                  }}
-                >
-                  <Link href="/settings" onClick={() => setOpen(false)}>
-                    <Settings2 className="h-4 w-4" />
-                    Settings
-                  </Link>
-                </CommandItem>
-              </CommandGroup>
-              <CommandGroup heading="Automate">
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/test-suites')
-                  }}
-                >
-                  <Link href="/test-suites" onClick={() => setOpen(false)}>
-                    <TestTubes className="h-4 w-4" />
-                    Test Suites
-                  </Link>
-                </CommandItem>
-
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/test-cases')
-                  }}
-                >
-                  <Link href="/test-cases" onClick={() => setOpen(false)}>
-                    <TestTubeDiagonal className="h-4 w-4" />
-                    Test Cases
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/test-runs')
-                  }}
-                >
-                  <Link href="/test-runs" onClick={() => setOpen(false)}>
-                    <ListChecks className="h-4 w-4" />
-                    Test Runs
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/reports')
-                  }}
-                >
-                  <Link href="/reports" onClick={() => setOpen(false)}>
-                    <FileCheck className="h-4 w-4" />
-                    Reports
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/test-runs/create')
-                  }}
-                >
-                  <Link href="/test-runs/create" onClick={() => setOpen(false)}>
-                    <ListChecks className="h-4 w-4" />
-                    Create Test Run
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/test-suites/create')
-                  }}
-                >
-                  <Link href="/test-suites/create" onClick={() => setOpen(false)}>
-                    <TestTubes className="h-4 w-4" />
-                    Create Test Suite
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/test-cases/create')
-                  }}
-                >
-                  <Link href="/test-cases/create" onClick={() => setOpen(false)}>
-                    <TestTubeDiagonal className="h-4 w-4" />
-                    Create Test Case
-                  </Link>
-                </CommandItem>
-              </CommandGroup>
-              <CommandGroup heading="Template">
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/template-steps')
-                  }}
-                >
-                  <Link href="/template-steps" onClick={() => setOpen(false)}>
-                    <LayoutTemplate className="h-4 w-4" />
-                    Template Steps
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/template-step-groups')
-                  }}
-                >
-                  <Link href="/template-step-groups" onClick={() => setOpen(false)}>
-                    <Component className="h-4 w-4" />
-                    Template Step Groups
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/template-test-cases')
-                  }}
-                >
-                  <Link href="/template-test-cases" onClick={() => setOpen(false)}>
-                    <Blocks className="h-4 w-4" />
-                    Template Test Cases
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/template-steps/create')
-                  }}
-                >
-                  <Link href="/template-steps/create" onClick={() => setOpen(false)}>
-                    <LayoutTemplate className="h-4 w-4" />
-                    Create Template Step
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/template-test-cases/create')
-                  }}
-                >
-                  <Link href="/template-test-cases/create" onClick={() => setOpen(false)}>
-                    <Blocks className="h-4 w-4" />
-                    Create Template Test Case
-                  </Link>
-                </CommandItem>
-              </CommandGroup>
-              <CommandGroup heading="Configuration">
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/locators')
-                  }}
-                >
-                  <Link href="/locators" onClick={() => setOpen(false)}>
-                    <Code className="h-4 w-4" />
-                    Locators
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/locator-groups')
-                  }}
-                >
-                  <Link href="/locator-groups" onClick={() => setOpen(false)}>
-                    <Group className="h-4 w-4" />
-                    Locator Groups
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/modules')
-                  }}
-                >
-                  <Link href="/modules" onClick={() => setOpen(false)}>
-                    <Puzzle className="h-4 w-4" />
-                    Modules
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/environments')
-                  }}
-                >
-                  <Link href="/environments" onClick={() => setOpen(false)}>
-                    <Server className="h-4 w-4" />
-                    Environments
-                  </Link>
-                </CommandItem>
-                <CommandItem
-                  asChild
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push('/tags')
-                  }}
-                >
-                  <Link href="/tags" onClick={() => setOpen(false)}>
-                    <Tag className="h-4 w-4" />
-                    Tags
-                  </Link>
-                </CommandItem>
-              </CommandGroup>
+              {navigationCommandGroups.map(group => (
+                <CommandGroup key={group.heading} heading={group.heading}>
+                  {group.items.map(item => {
+                    const Icon = item.icon
+                    return (
+                      <CommandItem key={item.href} value={item.label} onSelect={() => handleNavigate(item.href)}>
+                        <Icon className="h-4 w-4" />
+                        {item.label}
+                      </CommandItem>
+                    )
+                  })}
+                </CommandGroup>
+              ))}
               <CommandGroup heading="Search">
-                <CommandItem
-                  onSelect={() => {
-                    setCommandMode('search-test-case')
-                    setSearchQuery('')
-                  }}
-                >
-                  <TestTubeDiagonal className="h-4 w-4" />
-                  Search Test Cases
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    setCommandMode('search-test-suite')
-                    setSearchQuery('')
-                  }}
-                >
-                  <TestTubes className="h-4 w-4" />
-                  Search Test Suites
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    setCommandMode('search-template-step')
-                    setSearchQuery('')
-                  }}
-                >
-                  <LayoutTemplate className="h-4 w-4" />
-                  Search Template Steps
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    setCommandMode('search-test-run')
-                    setSearchQuery('')
-                  }}
-                >
-                  <ListChecks className="h-4 w-4" />
-                  Search Test Runs
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    setCommandMode('search-template-test-case')
-                    setSearchQuery('')
-                  }}
-                >
-                  <Blocks className="h-4 w-4" />
-                  Search Template Test Cases
-                </CommandItem>
+                {searchCommandItems.map(item => {
+                  const Icon = item.icon
+                  return (
+                    <CommandItem key={item.mode} value={item.label} onSelect={() => selectSearchMode(item.mode)}>
+                      <Icon className="h-4 w-4" />
+                      {item.label}
+                    </CommandItem>
+                  )
+                })}
               </CommandGroup>
             </>
           )}

package/templates/default/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