create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/components/diagram/template-step-combobox.tsx

@@ -2,25 +2,22 @@
 
 import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command'
+import { Badge } from '@/components/ui/badge'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { KeyToIconTransformer } from '@/lib/transformers/key-to-icon-transformer'
 import { cn } from '@/lib/utils'
-import {
-  capitalizeGroupName,
-  type TemplateStepWithGroup,
-} from '@/types/diagram/template-step'
+import { capitalizeGroupName, type TemplateStepWithGroup } from '@/types/diagram/template-step'
 
 const GROUP_KEY_OTHER = 'Other'
+const MAX_VISIBLE_PARAMETER_BADGES = 4
+const SCORE_EXACT_NAME_MATCH = 400
+const SCORE_PREFIX_NAME_MATCH = 300
+const SCORE_CONTAINS_NAME_MATCH = 200
+const SCORE_EXACT_KEYWORD_MATCH = 120
+const SCORE_PREFIX_KEYWORD_MATCH = 100
+const SCORE_CONTAINS_KEYWORD_MATCH = 80
 
-function groupStepsByGroupName(
-  steps: TemplateStepWithGroup[],
-): Map<string, TemplateStepWithGroup[]> {
+function groupStepsByGroupName(steps: TemplateStepWithGroup[]): Map<string, TemplateStepWithGroup[]> {
   const map = new Map<string, TemplateStepWithGroup[]>()
   for (const step of steps) {
     const key = step.templateStepGroup?.name ?? GROUP_KEY_OTHER
@@ -31,13 +28,64 @@ function groupStepsByGroupName(
   return map
 }
 
-export type TemplateStepComboboxProps = {
+function buildStepKeywords(step: TemplateStepWithGroup, groupKey: string) {
+  return [step.description, groupKey, ...(step.parameters ?? []).map(parameter => parameter.name)].filter(
+    (keyword): keyword is string => typeof keyword === 'string' && keyword.length > 0,
+  )
+}
+
+function normalizeForSearch(value: string) {
+  return value.trim().toLowerCase()
+}
+
+function scoreMatch(candidate: string, search: string) {
+  if (!search) return 0
+  if (candidate === search) return SCORE_EXACT_NAME_MATCH
+  if (candidate.startsWith(search)) return SCORE_PREFIX_NAME_MATCH
+  if (candidate.includes(search)) return SCORE_CONTAINS_NAME_MATCH
+  return 0
+}
+
+function getStepSearchScore(step: TemplateStepWithGroup, groupKey: string, search: string) {
+  if (!search) return 1
+
+  const normalizedName = normalizeForSearch(step.name)
+  const nameScore = scoreMatch(normalizedName, search)
+  if (nameScore > 0) return nameScore
+
+  const keywords = buildStepKeywords(step, groupKey).map(keyword => normalizeForSearch(keyword))
+
+  if (keywords.some(keyword => keyword === search)) return SCORE_EXACT_KEYWORD_MATCH
+  if (keywords.some(keyword => keyword.startsWith(search))) return SCORE_PREFIX_KEYWORD_MATCH
+  if (keywords.some(keyword => keyword.includes(search))) return SCORE_CONTAINS_KEYWORD_MATCH
+
+  return 0
+}
+
+function formatParameterLabel(label: string) {
+  return label
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[\s_-]+/g, ' ')
+    .trim()
+    .replace(/\b\w/g, char => char.toUpperCase())
+}
+
+function StepIcon({ icon, className }: { icon: TemplateStepWithGroup['icon']; className?: string }) {
+  return (
+    <span className="bg-muted/40 flex size-9 shrink-0 items-center justify-center rounded-md border text-muted-foreground">
+      {KeyToIconTransformer(icon, className ?? 'size-4')}
+    </span>
+  )
+}
+
+type TemplateStepComboboxProps = {
   value: string
   onValueChange: (value: string) => void
   templateSteps: TemplateStepWithGroup[]
   placeholder?: string
   disabled?: boolean
   id?: string
+  className?: string
 }
 
 const TemplateStepCombobox = ({
@@ -47,22 +95,52 @@ const TemplateStepCombobox = ({
   placeholder = 'Select a template step',
   disabled = false,
   id,
+  className,
 }: TemplateStepComboboxProps) => {
   const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState('')
   const containerRef = React.useRef<HTMLDivElement>(null)
   const searchInputRef = React.useRef<HTMLInputElement>(null)
+  const generatedId = React.useId()
+  const comboboxId = id ?? generatedId
+  const listboxId = `${comboboxId}-listbox`
 
-  const selectedStep = React.useMemo(
-    () => templateSteps.find(s => s.id === value) ?? null,
-    [templateSteps, value],
-  )
+  const selectedStep = React.useMemo(() => templateSteps.find(s => s.id === value) ?? null, [templateSteps, value])
 
   const groups = React.useMemo(() => {
-    const map = groupStepsByGroupName(templateSteps)
-    return Array.from(map.entries()).sort(([a], [b]) =>
-      a.localeCompare(b, undefined, { sensitivity: 'base' }),
+    const normalizedSearch = normalizeForSearch(search)
+    const scoredSteps = templateSteps.reduce<{ step: TemplateStepWithGroup; groupKey: string; score: number }[]>(
+      (steps, step) => {
+        const groupKey = step.templateStepGroup?.name ?? GROUP_KEY_OTHER
+        const score = getStepSearchScore(step, groupKey, normalizedSearch)
+        if (score > 0) {
+          steps.push({ step, groupKey, score })
+        }
+
+        return steps
+      },
+      [],
     )
-  }, [templateSteps])
+
+    if (!normalizedSearch) {
+      const map = groupStepsByGroupName(scoredSteps.map(({ step }) => step))
+      return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
+    }
+
+    scoredSteps.sort((a, b) => {
+      if (b.score !== a.score) return b.score - a.score
+      return a.step.name.localeCompare(b.step.name, undefined, { sensitivity: 'base' })
+    })
+
+    const map = new Map<string, TemplateStepWithGroup[]>()
+    for (const { step, groupKey } of scoredSteps) {
+      const list = map.get(groupKey) ?? []
+      list.push(step)
+      map.set(groupKey, list)
+    }
+
+    return Array.from(map.entries())
+  }, [search, templateSteps])
 
   const handleSelect = React.useCallback(
     (stepId: string) => {
@@ -80,6 +158,11 @@ const TemplateStepCombobox = ({
     return () => cancelAnimationFrame(id)
   }, [open])
 
+  React.useEffect(() => {
+    if (open) return
+    setSearch('')
+  }, [open])
+
   React.useEffect(() => {
     if (!open) return
     const handleClickOutside = (e: MouseEvent) => {
@@ -102,44 +185,98 @@ const TemplateStepCombobox = ({
     <div ref={containerRef} className="relative w-full">
       <button
         type="button"
-        id={id}
+        id={comboboxId}
         role="combobox"
         aria-expanded={open}
-        aria-controls={open ? `${id}-listbox` : undefined}
+        aria-controls={open ? listboxId : undefined}
         aria-haspopup="listbox"
-        aria-label={placeholder}
+        aria-label={id ? undefined : placeholder}
         disabled={disabled}
         onClick={() => setOpen(prev => !prev)}
         className={cn(
-          'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background',
+          'flex min-h-11 w-full items-center justify-between gap-3 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background',
           'focus:outline-none focus:ring-1 focus:ring-ring',
           'disabled:cursor-not-allowed disabled:opacity-50',
-          'data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1',
+          'text-left',
+          className,
         )}
       >
-        <span className={cn(!selectedStep && 'text-muted-foreground')}>
-          {selectedStep ? selectedStep.name : placeholder}
-        </span>
-        <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+        {selectedStep ? (
+          <span className="flex min-w-0 flex-1 items-center gap-3">
+            <StepIcon icon={selectedStep.icon} />
+            <span className="min-w-0 flex-1">
+              <span className="block truncate font-bold capitalize text-foreground">{selectedStep.name}</span>
+              {selectedStep.description ? (
+                <span className="block truncate text-xs text-muted-foreground">{selectedStep.description}</span>
+              ) : null}
+            </span>
+          </span>
+        ) : (
+          <span className="truncate text-muted-foreground">{placeholder}</span>
+        )}
+        <ChevronDown className="size-4 shrink-0 opacity-50" />
       </button>
       {open && (
-        <div id={`${id}-listbox`} role="listbox" className="absolute left-0 right-0 top-full z-50 mt-1">
-          <Command shouldFilter className="rounded-md border border-input bg-popover shadow-md">
-            <CommandInput ref={searchInputRef} placeholder="Search template steps…" />
+        <div id={listboxId} role="listbox" className="absolute left-0 right-0 top-full z-50 mt-1">
+          <Command shouldFilter={false} className="rounded-md border border-input bg-popover shadow-md">
+            <CommandInput
+              ref={searchInputRef}
+              placeholder="Search template steps…"
+              value={search}
+              onValueChange={setSearch}
+            />
             <CommandList>
-              <CommandEmpty>No step found.</CommandEmpty>
+              {groups.length === 0 ? <CommandEmpty>No step found.</CommandEmpty> : null}
               {groups.map(([groupKey, steps]) => (
                 <CommandGroup
                   key={groupKey}
-                  heading={capitalizeGroupName(groupKey)}
+                  heading={
+                    <div className="text-muted-foreground/80 flex items-center justify-between gap-2 text-[11px] font-medium uppercase tracking-[0.12em]">
+                      <span>{capitalizeGroupName(groupKey)}</span>
+                      <span className="text-[10px] font-normal tracking-normal">{steps.length}</span>
+                    </div>
+                  }
                 >
                   {steps.map(step => (
                     <CommandItem
                       key={step.id}
                       value={step.name}
+                      keywords={buildStepKeywords(step, groupKey)}
                       onSelect={() => handleSelect(step.id)}
+                      className={cn(
+                        'items-start gap-3 rounded-lg border border-transparent px-3 py-3 text-left hover:cursor-pointer',
+                        'data-[selected=true]:border-emerald-500/35 data-[selected=true]:bg-emerald-500/20 data-[selected=true]:text-foreground dark:data-[selected=true]:bg-emerald-500/5',
+                      )}
                     >
-                      {step.name}
+                      <StepIcon icon={step.icon} className="size-4" />
+                      <span className="min-w-0 flex-1 space-y-2">
+                        <span className="block space-y-1">
+                          <span className="block truncate font-bold capitalize leading-tight">{step.name}</span>
+                          {step.description ? (
+                            <span className="line-clamp-2 block text-xs leading-5 text-muted-foreground">
+                              {step.description}
+                            </span>
+                          ) : null}
+                        </span>
+                        {step.parameters?.length ? (
+                          <span className="flex flex-wrap gap-1.5">
+                            {step.parameters.slice(0, MAX_VISIBLE_PARAMETER_BADGES).map(parameter => (
+                              <Badge
+                                key={parameter.id}
+                                variant="secondary"
+                                className="max-w-full truncate text-[10px] font-medium"
+                              >
+                                {formatParameterLabel(parameter.name)}
+                              </Badge>
+                            ))}
+                            {step.parameters.length > MAX_VISIBLE_PARAMETER_BADGES ? (
+                              <Badge variant="outline" className="text-[10px] font-medium">
+                                +{step.parameters.length - MAX_VISIBLE_PARAMETER_BADGES}
+                              </Badge>
+                            ) : null}
+                          </span>
+                        ) : null}
+                      </span>
                     </CommandItem>
                   ))}
                 </CommandGroup>

package/templates/starter/src/components/diagram/use-flow-diagram-block-grouping.ts

@@ -0,0 +1,130 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import type { Node } from '@xyflow/react'
+import type { FlowBlock } from '@/types/diagram/diagram'
+import { getFlowBlockBounds, getFlowBlockMembershipMap, hasOrphanedFlowNode } from './flow-diagram-helpers'
+
+type UseFlowDiagramBlockGroupingOptions = {
+  enableNodeGrouping: boolean
+  flowBlocks: FlowBlock[]
+  nodes: Node[]
+  edges: Parameters<typeof hasOrphanedFlowNode>[1]
+  realNodeIds: Set<string>
+  onFlowBlocksChange?: (flowBlocks: FlowBlock[]) => void
+}
+
+export function useFlowDiagramBlockGrouping({
+  enableNodeGrouping,
+  flowBlocks,
+  nodes,
+  edges,
+  realNodeIds,
+  onFlowBlocksChange,
+}: UseFlowDiagramBlockGroupingOptions) {
+  const [isGroupingSelectionMode, setIsGroupingSelectionMode] = useState(false)
+  const [selectedGroupingNodeIds, setSelectedGroupingNodeIds] = useState<string[]>([])
+  const [pendingBlockNodeIds, setPendingBlockNodeIds] = useState<string[]>([])
+  const [blockName, setBlockName] = useState('')
+  const [editingBlockId, setEditingBlockId] = useState<string | null>(null)
+  const [isBlockDialogOpen, setIsBlockDialogOpen] = useState(false)
+
+  const flowBlockMembership = useMemo(() => getFlowBlockMembershipMap(flowBlocks), [flowBlocks])
+  const flowBlockBounds = useMemo(() => getFlowBlockBounds(nodes, flowBlocks), [nodes, flowBlocks])
+  const hasOrphanedNodes = useMemo(() => hasOrphanedFlowNode(nodes, edges), [nodes, edges])
+  const blockOrphanedNodeMessage = 'Connect or remove orphaned nodes before creating a block.'
+
+  const openCreateBlockDialog = useCallback(() => {
+    if (selectedGroupingNodeIds.length < 2 || hasOrphanedNodes) {
+      return
+    }
+
+    setPendingBlockNodeIds(selectedGroupingNodeIds)
+    setEditingBlockId(null)
+    setBlockName('')
+    setIsBlockDialogOpen(true)
+  }, [hasOrphanedNodes, selectedGroupingNodeIds])
+
+  const openRenameBlockDialog = useCallback((block: FlowBlock) => {
+    setPendingBlockNodeIds(block.nodeIds)
+    setEditingBlockId(block.id)
+    setBlockName(block.name)
+    setIsBlockDialogOpen(true)
+  }, [])
+
+  const handleBlockDialogSubmit = useCallback(() => {
+    const name = blockName.trim() || 'Untitled block'
+    if (editingBlockId) {
+      onFlowBlocksChange?.(flowBlocks.map(block => (block.id === editingBlockId ? { ...block, name } : block)))
+    } else {
+      onFlowBlocksChange?.([
+        ...flowBlocks,
+        {
+          id: crypto.randomUUID(),
+          name,
+          nodeIds: pendingBlockNodeIds.filter(nodeId => realNodeIds.has(nodeId)),
+        },
+      ])
+    }
+    setIsBlockDialogOpen(false)
+    setBlockName('')
+    setPendingBlockNodeIds([])
+    setEditingBlockId(null)
+    setSelectedGroupingNodeIds([])
+  }, [blockName, editingBlockId, flowBlocks, onFlowBlocksChange, pendingBlockNodeIds, realNodeIds])
+
+  const deleteBlock = useCallback(
+    (blockId: string) => {
+      onFlowBlocksChange?.(flowBlocks.filter(block => block.id !== blockId))
+    },
+    [flowBlocks, onFlowBlocksChange],
+  )
+
+  const handleSelectionChange = useCallback(
+    ({ nodes: selectedNodes }: { nodes: Node[] }) => {
+      if (!enableNodeGrouping || !isGroupingSelectionMode) {
+        return
+      }
+
+      const selectedIds = selectedNodes.reduce<string[]>((nodeIds, node) => {
+        if (realNodeIds.has(node.id) && !flowBlockMembership.has(node.id)) {
+          nodeIds.push(node.id)
+        }
+
+        return nodeIds
+      }, [])
+
+      setSelectedGroupingNodeIds(current =>
+        current.length === selectedIds.length && current.every((nodeId, index) => nodeId === selectedIds[index])
+          ? current
+          : selectedIds,
+      )
+    },
+    [enableNodeGrouping, flowBlockMembership, isGroupingSelectionMode, realNodeIds],
+  )
+
+  const toggleGroupingSelectionMode = useCallback(() => {
+    setIsGroupingSelectionMode(current => !current)
+    setSelectedGroupingNodeIds(current => (current.length === 0 ? current : []))
+  }, [])
+
+  return {
+    flowBlockMembership,
+    flowBlockBounds,
+    hasOrphanedNodes,
+    blockOrphanedNodeMessage,
+    isGroupingSelectionMode,
+    selectedGroupingNodeIds,
+    isBlockDialogOpen,
+    setIsBlockDialogOpen,
+    editingBlockId,
+    blockName,
+    setBlockName,
+    openCreateBlockDialog,
+    openRenameBlockDialog,
+    handleBlockDialogSubmit,
+    deleteBlock,
+    handleSelectionChange,
+    toggleGroupingSelectionMode,
+  }
+}

package/templates/starter/src/components/diagram/use-flow-diagram-search.ts

@@ -0,0 +1,114 @@
+'use client'
+
+import { useCallback, useMemo, useRef, useState, type PointerEvent } from 'react'
+import type { Node } from '@xyflow/react'
+import type { ReactFlowInstance } from '@xyflow/react'
+import { isAddNodePromptNode, searchFlowNodesByLabel } from './flow-diagram-helpers'
+
+type UseFlowDiagramSearchOptions = {
+  enableNodeSearch: boolean
+  nodes: Node[]
+  onEditNode: (nodeId: string) => void
+  flowInstanceRef: React.MutableRefObject<ReactFlowInstance | null>
+}
+
+export function useFlowDiagramSearch({
+  enableNodeSearch,
+  nodes,
+  onEditNode,
+  flowInstanceRef,
+}: UseFlowDiagramSearchOptions) {
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const [searchHighlightedNodeId, setSearchHighlightedNodeId] = useState<string | null>(null)
+
+  const nodeSearchResults = useMemo(() => searchFlowNodesByLabel(nodes, searchQuery), [nodes, searchQuery])
+  const shouldShowSearchSuggestions = enableNodeSearch && isSearchOpen && searchQuery.trim().length >= 3
+
+  const closeSearch = useCallback(() => {
+    setIsSearchOpen(false)
+    setSearchQuery('')
+  }, [])
+
+  const openSearch = useCallback(() => {
+    setIsSearchOpen(true)
+    requestAnimationFrame(() => {
+      searchInputRef.current?.focus()
+    })
+  }, [])
+
+  const toggleSearch = useCallback(() => {
+    if (isSearchOpen) {
+      closeSearch()
+      return
+    }
+
+    openSearch()
+  }, [closeSearch, isSearchOpen, openSearch])
+
+  const clearSearchHighlight = useCallback(() => {
+    setSearchHighlightedNodeId(null)
+  }, [])
+
+  const handleFlowPointerDown = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (!isSearchOpen) {
+        return
+      }
+
+      const target = event.target as HTMLElement | null
+      if (target?.closest('[data-node-search-root="true"]')) {
+        return
+      }
+
+      closeSearch()
+    },
+    [closeSearch, isSearchOpen],
+  )
+
+  const handleSearchResultClick = useCallback(
+    (nodeId: string) => {
+      const node = nodes.find(node => node.id === nodeId)
+      if (!node || isAddNodePromptNode(node)) {
+        return
+      }
+
+      setSearchHighlightedNodeId(nodeId)
+      flowInstanceRef.current?.setCenter(node.position.x + 72, node.position.y + 72, {
+        zoom: 1.15,
+        duration: 420,
+      })
+      onEditNode(nodeId)
+    },
+    [nodes, onEditNode, flowInstanceRef],
+  )
+
+  const handlePaneClick = useCallback(() => {
+    clearSearchHighlight()
+  }, [clearSearchHighlight])
+
+  const handleNodeClick = useCallback(
+    (_event: unknown, node: Node) => {
+      if (searchHighlightedNodeId && node.id !== searchHighlightedNodeId) {
+        clearSearchHighlight()
+      }
+    },
+    [clearSearchHighlight, searchHighlightedNodeId],
+  )
+
+  return {
+    isSearchOpen,
+    searchQuery,
+    searchInputRef,
+    searchHighlightedNodeId,
+    nodeSearchResults,
+    shouldShowSearchSuggestions,
+    setSearchQuery,
+    toggleSearch,
+    handleFlowPointerDown,
+    handleSearchResultClick,
+    handlePaneClick,
+    handleNodeClick,
+  }
+}