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

package/templates/starter/src/components/loading-skeleton/form/button-skeleton.tsx

@@ -0,0 +1,8 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const ButtonSkeleton = () => {
+  return <Skeleton className="h-10 w-24" />
+}
+
+export default ButtonSkeleton

package/templates/starter/src/components/loading-skeleton/form/icon-button-skeleton.tsx

@@ -0,0 +1,8 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const IconButtonSkeleton = () => {
+  return <Skeleton className="h-8 w-8 rounded-sm" />
+}
+
+export default IconButtonSkeleton

package/templates/starter/src/components/loading-skeleton/form/text-input-skeleton.tsx

@@ -0,0 +1,8 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const TextInputSkeleton = () => {
+  return <Skeleton className="h-10 w-44" />
+}
+
+export default TextInputSkeleton

package/templates/starter/src/components/loading-skeleton/visualization/table-skeleton.tsx

@@ -0,0 +1,14 @@
+import { Skeleton } from '@/components/ui/skeleton'
+import React from 'react'
+
+const TableSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  )
+}
+
+export default TableSkeleton

package/templates/starter/src/components/logo.tsx

@@ -0,0 +1,15 @@
+import Image from 'next/image'
+
+const Logo = () => {
+  return (
+    <div className="m-2 flex items-center gap-1">
+      <Image src="/logo.svg" alt="AppraiseJS" width={32} height={32} priority className="h-8 w-8" />
+      <span className="flex items-baseline gap-1">
+        <span className="text-foreground/90 text-[0.95rem] font-medium uppercase tracking-[0.12em]">Appraise</span>
+        <span className="text-[0.95rem] font-normal uppercase tracking-[0.12em] text-primary">JS</span>
+      </span>
+    </div>
+  )
+}
+
+export default Logo

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

@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { Badge } from '../ui/badge'
+import { cn } from '@/lib/utils'
+
+export interface CommandBadgeProps {
+  label: string
+  onClose: () => void
+  className?: string
+}
+
+export function CommandBadge({ label, onClose, className }: CommandBadgeProps) {
+  return (
+    <Badge
+      variant="secondary"
+      className={cn('inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium', className)}
+    >
+      <span>{label}</span>
+      <button
+        type="button"
+        onClick={e => {
+          e.stopPropagation()
+          onClose()
+        }}
+        className="hover:bg-secondary-foreground/20 ml-0.5 rounded-sm focus:outline-none focus:ring-1 focus:ring-ring"
+        aria-label={`Clear ${label}`}
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </Badge>
+  )
+}

package/templates/starter/src/components/navigation/command-chain-input.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+import { CommandBadge } from './command-badge'
+import { cn } from '@/lib/utils'
+
+export interface CommandChainInputProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {
+  badge?: {
+    label: string
+    onClose: () => void
+  }
+}
+
+export const CommandChainInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  CommandChainInputProps
+>(({ badge, className, onKeyDown, ...props }, ref) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // If backspace is pressed and input is empty, clear the badge
+    if (e.key === 'Backspace' && !(e.target as HTMLInputElement).value && badge) {
+      e.preventDefault()
+      badge.onClose()
+      return
+    }
+    onKeyDown?.(e)
+  }
+
+  return (
+    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+      <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+      {badge && (
+        <div className="mr-2 flex-shrink-0">
+          <CommandBadge label={badge.label} onClose={badge.onClose} />
+        </div>
+      )}
+      <CommandPrimitive.Input
+        ref={ref}
+        className={cn(
+          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        onKeyDown={handleKeyDown}
+        {...props}
+      />
+    </div>
+  )
+})
+
+CommandChainInput.displayName = 'CommandChainInput'

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

@@ -0,0 +1,118 @@
+'use client'
+
+import * as React from 'react'
+import { useEffect, useState, useMemo } from 'react'
+import { CommandGroup, CommandItem } from '../ui/command'
+import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
+
+export interface EntitySearchCommandProps<T extends { id: string }> {
+  searchQuery: string
+  entityName: string
+  fetchAction: () => Promise<ActionResponse>
+  getEntities: (data: ActionResponseData | undefined) => T[]
+  searchKey: keyof T
+  icon?: React.ReactNode
+  onSelect?: (entity: T) => void
+}
+
+export function EntitySearchCommand<T extends { id: string }>({
+  searchQuery,
+  entityName,
+  fetchAction,
+  getEntities,
+  searchKey,
+  icon,
+  onSelect,
+}: EntitySearchCommandProps<T>) {
+  const [entities, setEntities] = useState<T[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let isMounted = true
+
+    const fetchEntities = async () => {
+      setIsLoading(true)
+      setError(null)
+      try {
+        const result = await fetchAction()
+        if (isMounted) {
+          if (result.status === 200) {
+            setEntities(getEntities(result.data))
+          } else {
+            setError(result.error || 'Failed to fetch entities')
+          }
+          setIsLoading(false)
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : 'An error occurred')
+          setIsLoading(false)
+        }
+      }
+    }
+
+    fetchEntities()
+
+    return () => {
+      isMounted = false
+    }
+  }, [fetchAction, getEntities])
+
+  const filteredEntities = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return entities
+    }
+
+    const query = searchQuery.toLowerCase()
+    return entities.filter(entity => {
+      const value = entity[searchKey]
+      if (typeof value === 'string') {
+        return value.toLowerCase().includes(query)
+      }
+      return false
+    })
+  }, [entities, searchQuery, searchKey])
+
+  if (isLoading) {
+    return (
+      <CommandGroup heading={`Searching ${entityName}...`}>
+        <CommandItem disabled>Loading...</CommandItem>
+      </CommandGroup>
+    )
+  }
+
+  if (error) {
+    return (
+      <CommandGroup heading="Error">
+        <CommandItem disabled className="text-destructive">
+          {error}
+        </CommandItem>
+      </CommandGroup>
+    )
+  }
+
+  if (filteredEntities.length === 0) {
+    return <></>
+  }
+
+  return (
+    <CommandGroup heading={`${entityName} Results`}>
+      {filteredEntities.map(entity => {
+        const displayValue = entity[searchKey]
+        return (
+          <CommandItem
+            key={entity.id}
+            value={typeof displayValue === 'string' ? displayValue : entity.id}
+            onSelect={() => {
+              onSelect?.(entity)
+            }}
+          >
+            {icon}
+            <span>{typeof displayValue === 'string' ? displayValue : entity.id}</span>
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Card, CardContent } from '../ui/card'
+import Link from 'next/link'
+
+const NavCard = ({
+  data,
+  href,
+  icon,
+}: {
+  data: { title: string; description: string }
+  href: string
+  icon: React.ReactNode
+}) => {
+  return (
+    <Link href={href} className="w-full">
+      <Card className="h-24 w-full border-none outline-none transition-colors hover:bg-accent hover:text-accent-foreground">
+        <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">
+            {icon}
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col justify-center">
+            <span className="truncate text-sm font-medium">{data.title}</span>
+            <span className="line-clamp-2 text-xs text-muted-foreground">{data.description}</span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}
+
+export default NavCard

package/templates/starter/src/components/navigation/nav-command-helpers.ts

@@ -0,0 +1,122 @@
+import {
+  Blocks,
+  Code,
+  Component,
+  FileCheck,
+  Group,
+  LayoutDashboard,
+  LayoutTemplate,
+  ListChecks,
+  Puzzle,
+  Server,
+  Settings2,
+  Tag,
+  TestTubeDiagonal,
+  TestTubes,
+  type LucideIcon,
+} from 'lucide-react'
+
+export type SearchCommandMode =
+  | 'search-test-suite'
+  | 'search-test-case'
+  | 'search-template-step'
+  | 'search-test-run'
+  | 'search-template-test-case'
+
+export type CommandMode = SearchCommandMode | null
+
+export type NavigationCommandItem = {
+  href: string
+  label: string
+  icon: LucideIcon
+}
+
+export type NavigationCommandGroup = {
+  heading: string
+  items: NavigationCommandItem[]
+}
+
+export type SearchCommandItem = {
+  mode: SearchCommandMode
+  label: string
+  icon: LucideIcon
+}
+
+export const defaultCommandPlaceholder = 'Type a command or search...'
+
+export const commandModePlaceholders: Record<SearchCommandMode, string> = {
+  '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...',
+}
+
+const commandModeLabels: Record<SearchCommandMode, string> = {
+  'search-test-suite': 'Search Test Suite',
+  'search-test-case': 'Search Test Case',
+  'search-template-step': 'Search Template Step',
+  'search-test-run': 'Search Test Run',
+  'search-template-test-case': 'Search Template Test Case',
+}
+
+export const navigationCommandGroups: NavigationCommandGroup[] = [
+  {
+    heading: 'Overview',
+    items: [
+      { href: '/', label: 'Dashboard', icon: LayoutDashboard },
+      { href: '/settings', label: 'Settings', icon: Settings2 },
+    ],
+  },
+  {
+    heading: 'Automate',
+    items: [
+      { href: '/test-suites', label: 'Test Suites', icon: TestTubes },
+      { href: '/test-cases', label: 'Test Cases', icon: TestTubeDiagonal },
+      { href: '/test-runs', label: 'Test Runs', icon: ListChecks },
+      { href: '/reports', label: 'Reports', icon: FileCheck },
+      { href: '/test-runs/create', label: 'Create Test Run', icon: ListChecks },
+      { href: '/test-suites/create', label: 'Create Test Suite', icon: TestTubes },
+      { href: '/test-cases/create', label: 'Create Test Case', icon: TestTubeDiagonal },
+    ],
+  },
+  {
+    heading: 'Template',
+    items: [
+      { href: '/template-steps', label: 'Template Steps', icon: LayoutTemplate },
+      { href: '/template-step-groups', label: 'Template Step Groups', icon: Component },
+      { href: '/template-test-cases', label: 'Template Test Cases', icon: Blocks },
+      { href: '/template-steps/create', label: 'Create Template Step', icon: LayoutTemplate },
+      { href: '/template-test-cases/create', label: 'Create Template Test Case', icon: Blocks },
+    ],
+  },
+  {
+    heading: 'Configuration',
+    items: [
+      { href: '/locators', label: 'Locators', icon: Code },
+      { href: '/locator-groups', label: 'Locator Groups', icon: Group },
+      { href: '/modules', label: 'Modules', icon: Puzzle },
+      { href: '/environments', label: 'Environments', icon: Server },
+      { href: '/tags', label: 'Tags', icon: Tag },
+    ],
+  },
+]
+
+export const searchCommandItems: SearchCommandItem[] = [
+  { mode: 'search-test-case', label: 'Search Test Cases', icon: TestTubeDiagonal },
+  { mode: 'search-test-suite', label: 'Search Test Suites', icon: TestTubes },
+  { mode: 'search-template-step', label: 'Search Template Steps', icon: LayoutTemplate },
+  { mode: 'search-test-run', label: 'Search Test Runs', icon: ListChecks },
+  { mode: 'search-template-test-case', label: 'Search Template Test Cases', icon: Blocks },
+]
+
+export function getCommandBadge(commandMode: CommandMode, onClose: () => void) {
+  if (!commandMode) {
+    return undefined
+  }
+
+  return {
+    label: commandModeLabels[commandMode],
+    onClose,
+  }
+}

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

@@ -0,0 +1,125 @@
+'use client'
+
+import type { ActionResponseData } from '@/types/form/actionHandler'
+import type { TemplateStep, TemplateTestCase, TestCase, TestRun, TestSuite } from '@prisma/client'
+import { Blocks, LayoutTemplate, ListChecks, TestTubeDiagonal, TestTubes } from 'lucide-react'
+
+import { getAllTemplateTestCasesAction } from '@/actions/template-test-case/template-test-case-actions'
+import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
+import { getAllTestRunsAction } from '@/actions/test-run/test-run-actions'
+import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
+
+import { EntitySearchCommand } from './entity-search-command'
+import type { SearchCommandMode } from './nav-command-helpers'
+
+type NavCommandSearchProps = {
+  commandMode: SearchCommandMode
+  searchQuery: string
+  onSelectRoute: (href: string) => void
+}
+
+function isTestSuiteRow(value: unknown): value is TestSuite {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTestCaseRow(value: unknown): value is TestCase {
+  return typeof value === 'object' && value !== null && 'id' in value && 'title' in value
+}
+
+function isTemplateStepRow(value: unknown): value is TemplateStep {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTestRunRow(value: unknown): value is TestRun {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTemplateTestCaseRow(value: unknown): value is TemplateTestCase {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function getTestSuiteRows(data: ActionResponseData | undefined): TestSuite[] {
+  return Array.isArray(data) ? data.filter(isTestSuiteRow) : []
+}
+
+function getTestCaseRows(data: ActionResponseData | undefined): TestCase[] {
+  return Array.isArray(data) ? data.filter(isTestCaseRow) : []
+}
+
+function getTemplateStepRows(data: ActionResponseData | undefined): TemplateStep[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepRow) : []
+}
+
+function getTestRunRows(data: ActionResponseData | undefined): TestRun[] {
+  return Array.isArray(data) ? data.filter(isTestRunRow) : []
+}
+
+function getTemplateTestCaseRows(data: ActionResponseData | undefined): TemplateTestCase[] {
+  return Array.isArray(data) ? data.filter(isTemplateTestCaseRow) : []
+}
+
+export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: NavCommandSearchProps) {
+  switch (commandMode) {
+    case 'search-test-suite':
+      return (
+        <EntitySearchCommand
+          searchQuery={searchQuery}
+          entityName="Test Suite"
+          fetchAction={getAllTestSuitesAction}
+          getEntities={getTestSuiteRows}
+          searchKey="name"
+          icon={<TestTubes className="h-4 w-4" />}
+          onSelect={testSuite => onSelectRoute(`/test-suites/modify/${testSuite.id}`)}
+        />
+      )
+    case 'search-test-case':
+      return (
+        <EntitySearchCommand
+          searchQuery={searchQuery}
+          entityName="Test Case"
+          fetchAction={getAllTestCasesAction}
+          getEntities={getTestCaseRows}
+          searchKey="title"
+          icon={<TestTubeDiagonal className="h-4 w-4" />}
+          onSelect={testCase => onSelectRoute(`/test-cases/modify/${testCase.id}`)}
+        />
+      )
+    case 'search-template-step':
+      return (
+        <EntitySearchCommand
+          searchQuery={searchQuery}
+          entityName="Template Step"
+          fetchAction={getAllTemplateStepsAction}
+          getEntities={getTemplateStepRows}
+          searchKey="name"
+          icon={<LayoutTemplate className="h-4 w-4" />}
+          onSelect={templateStep => onSelectRoute(`/template-steps/modify/${templateStep.id}`)}
+        />
+      )
+    case 'search-test-run':
+      return (
+        <EntitySearchCommand
+          searchQuery={searchQuery}
+          entityName="Test Run"
+          fetchAction={getAllTestRunsAction}
+          getEntities={getTestRunRows}
+          searchKey="name"
+          icon={<ListChecks className="h-4 w-4" />}
+          onSelect={testRun => onSelectRoute(`/test-runs/${testRun.id}`)}
+        />
+      )
+    case 'search-template-test-case':
+      return (
+        <EntitySearchCommand
+          searchQuery={searchQuery}
+          entityName="Template Test Case"
+          fetchAction={getAllTemplateTestCasesAction}
+          getEntities={getTemplateTestCaseRows}
+          searchKey="name"
+          icon={<Blocks className="h-4 w-4" />}
+          onSelect={templateTestCase => onSelectRoute(`/template-test-cases/modify/${templateTestCase.id}`)}
+        />
+      )
+  }
+}

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

@@ -0,0 +1,106 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import NavCommand from './nav-command'
+
+const {
+  push,
+  getAllTestSuitesAction,
+  getAllTestCasesAction,
+  getAllTemplateStepsAction,
+  getAllTestRunsAction,
+  getAllTemplateTestCasesAction,
+} = vi.hoisted(() => ({
+  push: vi.fn(),
+  getAllTestSuitesAction: vi.fn(),
+  getAllTestCasesAction: vi.fn(),
+  getAllTemplateStepsAction: vi.fn(),
+  getAllTestRunsAction: vi.fn(),
+  getAllTemplateTestCasesAction: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/actions/test-suite/test-suite-actions', () => ({
+  getAllTestSuitesAction,
+}))
+
+vi.mock('@/actions/test-case/test-case-actions', () => ({
+  getAllTestCasesAction,
+}))
+
+vi.mock('@/actions/template-step/template-step-actions', () => ({
+  getAllTemplateStepsAction,
+}))
+
+vi.mock('@/actions/test-run/test-run-actions', () => ({
+  getAllTestRunsAction,
+}))
+
+vi.mock('@/actions/template-test-case/template-test-case-actions', () => ({
+  getAllTemplateTestCasesAction,
+}))
+
+describe('NavCommand', () => {
+  beforeEach(() => {
+    push.mockReset()
+    getAllTestSuitesAction.mockResolvedValue({ status: 200, data: [] })
+    getAllTestCasesAction.mockResolvedValue({ status: 200, data: [] })
+    getAllTemplateStepsAction.mockResolvedValue({ status: 200, data: [] })
+    getAllTestRunsAction.mockResolvedValue({ status: 200, data: [] })
+    getAllTemplateTestCasesAction.mockResolvedValue({ status: 200, data: [] })
+  })
+
+  it('opens with the keyboard shortcut and navigates to a static route', async () => {
+    const user = userEvent.setup()
+
+    render(<NavCommand />)
+
+    fireEvent.keyDown(document, { key: 'k', ctrlKey: true })
+    await user.click(await screen.findByText('Settings'))
+
+    expect(push).toHaveBeenCalledWith('/settings')
+  })
+
+  it('clears the active search mode when backspace is pressed on an empty search input', async () => {
+    const user = userEvent.setup()
+
+    render(<NavCommand />)
+
+    await user.click(screen.getByRole('button', { name: 'Open Command Palette' }))
+    await user.click(screen.getByText('Search Test Cases'))
+
+    const searchInput = screen.getByPlaceholderText('Search Test Case by Title...')
+    expect(screen.getByRole('button', { name: 'Clear Search Test Case' })).toBeInTheDocument()
+
+    fireEvent.keyDown(searchInput, { key: 'Backspace' })
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Type a command or search...')).toBeInTheDocument()
+    })
+  })
+
+  it('loads search results and navigates to the selected entity', async () => {
+    const user = userEvent.setup()
+
+    getAllTestCasesAction.mockResolvedValue({
+      status: 200,
+      data: [{ id: 'case-1', title: 'Login case' }],
+    })
+
+    render(<NavCommand />)
+
+    await user.click(screen.getByRole('button', { name: 'Open Command Palette' }))
+    await user.click(screen.getByText('Search Test Cases'))
+    await user.click(await screen.findByText('Login case'))
+
+    expect(push).toHaveBeenCalledWith('/test-cases/modify/case-1')
+  })
+})