create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -0,0 +1,98 @@
+'use client'
+
+import { Command, Plus } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+
+import { cn } from '@/lib/utils'
+
+import { Button } from '../ui/button'
+import { CommandDialog, CommandEmpty, CommandGroup, CommandItem, CommandList } from '../ui/command'
+import { DialogDescription, DialogTitle } from '../ui/dialog'
+import { CommandChainInput } from './command-chain-input'
+import {
+  commandModePlaceholders,
+  defaultCommandPlaceholder,
+  getCommandBadge,
+  navigationCommandGroups,
+  searchCommandItems,
+} from './nav-command-helpers'
+import { NavCommandSearch } from './nav-command-search'
+import { useNavCommand } from './use-nav-command'
+
+export type NavCommandProps = {
+  className?: string
+}
+
+export default function NavCommand({ className }: NavCommandProps) {
+  const router = useRouter()
+  const { open, setOpen, commandMode, searchQuery, setSearchQuery, isMac, clearSearchMode, selectSearchMode } =
+    useNavCommand()
+
+  const handleNavigate = (href: string) => {
+    router.push(href)
+    setOpen(false)
+  }
+
+  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)}
+      >
+        <span>Open Command Palette</span>
+        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+          <kbd className="rounded-md bg-muted px-1 text-xs text-gray-400">
+            {isMac ? <Command className="h-2 w-2 text-gray-400" /> : 'Ctrl'}
+          </kbd>
+          <Plus className="h-2 w-2 text-gray-400" />
+          <kbd className="rounded-md bg-muted px-1 text-xs text-gray-400">K</kbd>
+        </div>
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen} shouldFilter={!commandMode}>
+        <DialogTitle className="sr-only">Command Palette</DialogTitle>
+        <DialogDescription className="sr-only">Search for a command or navigate to a page</DialogDescription>
+        <CommandChainInput
+          placeholder={commandMode ? commandModePlaceholders[commandMode] : defaultCommandPlaceholder}
+          badge={getCommandBadge(commandMode, clearSearchMode)}
+          value={searchQuery}
+          onValueChange={setSearchQuery}
+        />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          {commandMode ? (
+            <NavCommandSearch commandMode={commandMode} searchQuery={searchQuery} onSelectRoute={handleNavigate} />
+          ) : (
+            <>
+              {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">
+                {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>
+            </>
+          )}
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}

package/templates/starter/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/starter/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/starter/src/components/navigation/use-nav-command.ts

@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import type { SearchCommandMode } from './nav-command-helpers'
+
+export function useNavCommand() {
+  const [open, setOpen] = useState(false)
+  const [commandMode, setCommandMode] = useState<SearchCommandMode | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [isMac, setIsMac] = useState(false)
+
+  useEffect(() => {
+    queueMicrotask(() => setIsMac(navigator.userAgent.toLowerCase().includes('mac')))
+  }, [])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        setOpen(currentOpen => !currentOpen)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  useEffect(() => {
+    if (!open) {
+      queueMicrotask(() => {
+        setCommandMode(null)
+        setSearchQuery('')
+      })
+    }
+  }, [open])
+
+  const clearSearchMode = () => {
+    setCommandMode(null)
+    setSearchQuery('')
+  }
+
+  const selectSearchMode = (nextMode: SearchCommandMode) => {
+    setCommandMode(nextMode)
+    setSearchQuery('')
+  }
+
+  return {
+    open,
+    setOpen,
+    commandMode,
+    searchQuery,
+    setSearchQuery,
+    isMac,
+    clearSearchMode,
+    selectSearchMode,
+  }
+}

package/templates/starter/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'