create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -1,60 +0,0 @@
-'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/default/src/components/navigation/nav-menu-card-deck.tsx

@@ -1,112 +0,0 @@
-'use client'
-
-import { usePathname } from 'next/navigation'
-import Link from 'next/link'
-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'
-
-const NavMenuCardDeck = ({
-  containerButtonText,
-  containerButtonIcon,
-  dropdownItems,
-}: {
-  containerButtonText: string
-  containerButtonIcon: React.ReactNode
-  dropdownItems: {
-    text: string
-    icon: React.ReactNode
-    href: string
-    description: string
-  }[]
-}) => {
-  const pathname = usePathname()
-  const [isHovered, setIsHovered] = useState(false)
-
-  const checkIfTriggerActive = (href: string) => {
-    return dropdownItems.some(item => item.href === href || pathname.startsWith(item.href))
-  }
-
-  const checkIfItemActive = (href: string) => {
-    return href === pathname || pathname.startsWith(href)
-  }
-
-  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>
-
-      <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',
-                )}
-              >
-                {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',
-                      )}
-                    >
-                      <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>
-  )
-}
-
-export default NavMenuCardDeck

package/templates/default/src/components/node-header.tsx

@@ -1,159 +0,0 @@
-import { forwardRef, useCallback, HTMLAttributes, ReactNode } from 'react'
-import { useNodeId, useReactFlow } from '@xyflow/react'
-import { EllipsisVertical, Trash } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import { Slot } from '@radix-ui/react-slot'
-import { Button, ButtonProps } from '@/components/ui/button'
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '@/components/ui/dropdown-menu'
-
-/* NODE HEADER -------------------------------------------------------------- */
-
-export type NodeHeaderProps = HTMLAttributes<HTMLElement>
-
-/**
- * A container for a consistent header layout intended to be used inside the
- * `<BaseNode />` component.
- */
-export const NodeHeader = forwardRef<HTMLElement, NodeHeaderProps>(({ className, ...props }, ref) => {
-  return (
-    <header
-      ref={ref}
-      {...props}
-      className={cn(
-        'flex items-center justify-between gap-2 px-3 py-2',
-        // Remove or modify these classes if you modify the padding in the
-        // `<BaseNode />` component.
-        className,
-      )}
-    />
-  )
-})
-
-NodeHeader.displayName = 'NodeHeader'
-
-/* NODE HEADER TITLE -------------------------------------------------------- */
-
-export type NodeHeaderTitleProps = HTMLAttributes<HTMLHeadingElement> & {
-  asChild?: boolean
-}
-
-/**
- * The title text for the node. To maintain a native application feel, the title
- * text is not selectable.
- */
-export const NodeHeaderTitle = forwardRef<HTMLHeadingElement, NodeHeaderTitleProps>(
-  ({ className, asChild, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'h3'
-
-    return <Comp ref={ref} {...props} className={cn(className, 'user-select-none flex-1 font-semibold')} />
-  },
-)
-
-NodeHeaderTitle.displayName = 'NodeHeaderTitle'
-
-/* NODE HEADER ICON --------------------------------------------------------- */
-
-export type NodeHeaderIconProps = HTMLAttributes<HTMLSpanElement>
-
-export const NodeHeaderIcon = forwardRef<HTMLSpanElement, NodeHeaderIconProps>(({ className, ...props }, ref) => {
-  return <span ref={ref} {...props} className={cn(className, '[&>*]:size-5')} />
-})
-
-NodeHeaderIcon.displayName = 'NodeHeaderIcon'
-
-/* NODE HEADER ACTIONS ------------------------------------------------------ */
-
-export type NodeHeaderActionsProps = HTMLAttributes<HTMLDivElement>
-
-/**
- * A container for right-aligned action buttons in the node header.
- */
-export const NodeHeaderActions = forwardRef<HTMLDivElement, NodeHeaderActionsProps>(({ className, ...props }, ref) => {
-  return <div ref={ref} {...props} className={cn('ml-auto flex items-center gap-1 justify-self-end', className)} />
-})
-
-NodeHeaderActions.displayName = 'NodeHeaderActions'
-
-/* NODE HEADER ACTION ------------------------------------------------------- */
-
-export type NodeHeaderActionProps = ButtonProps & {
-  label: string
-}
-
-/**
- * A thin wrapper around the `<Button />` component with a fixed sized suitable
- * for icons.
- *
- * Because the `<NodeHeaderAction />` component is intended to render icons, it's
- * important to provide a meaningful and accessible `label` prop that describes
- * the action.
- */
-export const NodeHeaderAction = forwardRef<HTMLButtonElement, NodeHeaderActionProps>(
-  ({ className, label, title, ...props }, ref) => {
-    return (
-      <Button
-        ref={ref}
-        variant="ghost"
-        aria-label={label}
-        title={title ?? label}
-        className={cn(className, 'nodrag size-6 p-1')}
-        {...props}
-      />
-    )
-  },
-)
-
-NodeHeaderAction.displayName = 'NodeHeaderAction'
-
-//
-
-export type NodeHeaderMenuActionProps = Omit<NodeHeaderActionProps, 'onClick'> & {
-  trigger?: ReactNode
-}
-
-/**
- * Renders a header action that opens a dropdown menu when clicked. The dropdown
- * trigger is a button with an ellipsis icon. The trigger's content can be changed
- * by using the `trigger` prop.
- *
- * Any children passed to the `<NodeHeaderMenuAction />` component will be rendered
- * inside the dropdown menu. You can read the docs for the shadcn dropdown menu
- * here: https://ui.shadcn.com/docs/components/dropdown-menu
- *
- */
-export const NodeHeaderMenuAction = forwardRef<HTMLButtonElement, NodeHeaderMenuActionProps>(
-  ({ trigger, children, ...props }, ref) => {
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <NodeHeaderAction ref={ref} {...props}>
-            {trigger ?? <EllipsisVertical />}
-          </NodeHeaderAction>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>{children}</DropdownMenuContent>
-      </DropdownMenu>
-    )
-  },
-)
-
-NodeHeaderMenuAction.displayName = 'NodeHeaderMenuAction'
-
-/* NODE HEADER DELETE ACTION --------------------------------------- */
-
-export const NodeHeaderDeleteAction = () => {
-  const id = useNodeId()
-  const { setNodes } = useReactFlow()
-
-  const handleClick = useCallback(() => {
-    setNodes(prevNodes => prevNodes.filter(node => node.id !== id))
-  }, [id, setNodes])
-
-  return (
-    <NodeHeaderAction onClick={handleClick} variant="ghost" label="Delete node">
-      <Trash />
-    </NodeHeaderAction>
-  )
-}
-
-NodeHeaderDeleteAction.displayName = 'NodeHeaderDeleteAction'

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

@@ -1,310 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import Image from 'next/image'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { Badge } from '@/components/ui/badge'
-import { Separator } from '@/components/ui/separator'
-import { StepStatus, ReportScenario } from '@prisma/client'
-import { CheckCircle, XCircle, Clock, AlertCircle } from 'lucide-react'
-import { ScrollArea } from '../ui/scroll-area'
-import { Button } from '@/components/ui/button'
-
-/** Minimal shape so both full Prisma and report-table select types are accepted */
-type ReportScenarioWithDetails = ReportScenario & {
-  tags: Array<{ tagName: string }>
-  steps: Array<{
-    id: string
-    keyword: string
-    name: string
-    status: StepStatus
-    duration: string
-    errorMessage: string | null
-    errorTrace: string | null
-    screenshotPath?: string | null
-    order: number
-    matchLocation?: string | null
-  }>
-  hooks: Array<{
-    id: string
-    keyword: string
-    status: StepStatus
-    duration: string
-    errorMessage: string | null
-    errorTrace: string | null
-  }>
-}
-
-interface TestCaseLogsModalProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  reportScenario: ReportScenarioWithDetails | null
-}
-
-const stepStatusToBadge = (status: StepStatus) => {
-  switch (status) {
-    case StepStatus.PASSED:
-      return (
-        <Badge
-          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" />
-          PASSED
-        </Badge>
-      )
-    case StepStatus.FAILED:
-      return (
-        <Badge
-          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" />
-          FAILED
-        </Badge>
-      )
-    case StepStatus.SKIPPED:
-      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"
-        >
-          <Clock className="h-3 w-3" />
-          SKIPPED
-        </Badge>
-      )
-    default:
-      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"
-        >
-          {status}
-        </Badge>
-      )
-  }
-}
-
-const formatDuration = (duration: string) => {
-  const durationNs = Number(duration)
-  if (isNaN(durationNs)) return '-'
-  const durationMs = Math.round(durationNs / 1000000)
-  if (durationMs < 1000) {
-    return `${durationMs}ms`
-  }
-  const seconds = Math.floor(durationMs / 1000)
-  const milliseconds = durationMs % 1000
-  return `${seconds}.${String(milliseconds).padStart(3, '0')}s`
-}
-
-const formatKeyword = (keyword: string) => {
-  return keyword.charAt(0) + keyword.slice(1).toLowerCase()
-}
-
-export function TestCaseLogsModal({ open, onOpenChange, reportScenario }: TestCaseLogsModalProps) {
-  const [expandedScreenshot, setExpandedScreenshot] = useState<{ stepId: string; stepName: string } | null>(null)
-
-  if (!reportScenario) {
-    return null
-  }
-
-  // Sort steps by order
-  const sortedSteps = [...reportScenario.steps].sort((a, b) => a.order - b.order)
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="flex max-h-[90vh] max-w-4xl flex-col p-0">
-          <DialogHeader className="flex-shrink-0 px-6 pt-6">
-            <DialogTitle className="text-xl font-semibold">{reportScenario.name}</DialogTitle>
-            {reportScenario.description && (
-              <DialogDescription className="text-sm text-muted-foreground">
-                {reportScenario.description}
-              </DialogDescription>
-            )}
-          </DialogHeader>
-
-          <ScrollArea className="h-[calc(90vh-120px)] pr-4">
-            <div className="px-6 pb-6">
-              <div className="space-y-6">
-                {/* Tags */}
-                {reportScenario.tags.length > 0 && (
-                  <div>
-                    <h4 className="mb-2 text-sm font-medium">Tags</h4>
-                    <div className="flex flex-wrap gap-1">
-                      {reportScenario.tags.map(tag => (
-                        <Badge key={tag.tagName} variant="outline">
-                          {tag.tagName}
-                        </Badge>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {/* Steps */}
-                <div>
-                  <h4 className="mb-3 text-sm font-medium">Steps</h4>
-                  <div className="space-y-3">
-                    {sortedSteps.length > 0 ? (
-                      sortedSteps.map(step => (
-                        <div key={step.id} className="space-y-2 rounded-lg border p-3">
-                          <div className="flex items-start justify-between gap-2">
-                            <div className="flex-1">
-                              <div className="mb-1 flex items-center gap-2">
-                                <span className="text-sm font-medium text-muted-foreground">
-                                  {formatKeyword(step.keyword)}
-                                </span>
-                                <span className="text-sm">{step.name}</span>
-                              </div>
-                              {step.matchLocation && (
-                                <div className="mt-1 text-xs text-muted-foreground">{step.matchLocation}</div>
-                              )}
-                            </div>
-                            <div className="flex items-center gap-2">
-                              {stepStatusToBadge(step.status)}
-                              <span className="text-xs text-muted-foreground">{formatDuration(step.duration)}</span>
-                            </div>
-                          </div>
-                          {step.status === StepStatus.FAILED && (
-                            <div className="mt-2 space-y-2">
-                              {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" />
-                                    <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">
-                                    {step.errorMessage}
-                                  </pre>
-                                </div>
-                              )}
-                              {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" />
-                                    <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">
-                                    {step.errorTrace}
-                                  </pre>
-                                </div>
-                              )}
-                              {step.screenshotPath && (
-                                <div className="rounded border border-red-800/50 bg-red-950/20 p-2">
-                                  <div className="mb-2 flex items-center justify-between gap-2">
-                                    <span className="text-sm font-medium text-red-400">Failure Screenshot</span>
-                                    <Button
-                                      type="button"
-                                      size="sm"
-                                      variant="secondary"
-                                      onClick={() => setExpandedScreenshot({ stepId: step.id, stepName: step.name })}
-                                    >
-                                      Expand
-                                    </Button>
-                                  </div>
-                                  <button
-                                    type="button"
-                                    className="block w-full overflow-hidden rounded-md border border-red-900/60"
-                                    onClick={() => setExpandedScreenshot({ stepId: step.id, stepName: step.name })}
-                                  >
-                                    <Image
-                                      src={`/api/reports/steps/${step.id}/screenshot`}
-                                      alt={`Failure screenshot for step ${step.name}`}
-                                      width={1280}
-                                      height={720}
-                                      unoptimized
-                                      className="max-h-64 w-full object-cover"
-                                      loading="lazy"
-                                    />
-                                  </button>
-                                </div>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      ))
-                    ) : (
-                      <div className="text-sm text-muted-foreground">No steps recorded</div>
-                    )}
-                  </div>
-                </div>
-
-                {/* Hooks */}
-                {reportScenario.hooks.length > 0 && (
-                  <div>
-                    <Separator className="my-4" />
-                    <h4 className="mb-3 text-sm font-medium">Hooks</h4>
-                    <div className="space-y-3">
-                      {reportScenario.hooks.map(hook => (
-                        <div key={hook.id} className="space-y-2 rounded-lg border p-3">
-                          <div className="flex items-start justify-between gap-2">
-                            <div className="flex-1">
-                              <div className="mb-1 flex items-center gap-2">
-                                <span className="text-sm font-medium text-muted-foreground">
-                                  {formatKeyword(hook.keyword)} Hook
-                                </span>
-                              </div>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              {stepStatusToBadge(hook.status)}
-                              <span className="text-xs text-muted-foreground">{formatDuration(hook.duration)}</span>
-                            </div>
-                          </div>
-                          {hook.status === StepStatus.FAILED && (
-                            <div className="mt-2 space-y-2">
-                              {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" />
-                                    <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">
-                                    {hook.errorMessage}
-                                  </pre>
-                                </div>
-                              )}
-                              {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" />
-                                    <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">
-                                    {hook.errorTrace}
-                                  </pre>
-                                </div>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </ScrollArea>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={!!expandedScreenshot} onOpenChange={nextOpen => !nextOpen && setExpandedScreenshot(null)}>
-        <DialogContent className="max-w-5xl p-4">
-          <DialogHeader>
-            <DialogTitle>{expandedScreenshot?.stepName ?? 'Failure Screenshot'}</DialogTitle>
-            <DialogDescription>Captured from the failed scenario step.</DialogDescription>
-          </DialogHeader>
-          {expandedScreenshot && (
-            <Image
-              src={`/api/reports/steps/${expandedScreenshot.stepId}/screenshot`}
-              alt={`Failure screenshot for step ${expandedScreenshot.stepName}`}
-              width={1600}
-              height={900}
-              unoptimized
-              className="max-h-[75vh] w-full rounded-md border object-contain"
-            />
-          )}
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}