create-appraise 0.1.0

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

@@ -0,0 +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

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

@@ -0,0 +1,112 @@
+'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

@@ -0,0 +1,159 @@
+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

@@ -0,0 +1,253 @@
+'use client'
+
+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'
+
+/** 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
+    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) {
+  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, _index) => (
+                      <Badge key={_index} 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, _index) => (
+                      <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>
+                            )}
+                          </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, _index) => (
+                      <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>
+  )
+}