create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/starter/src/components/diagram/options-header-node.tsx

@@ -1,57 +1,261 @@
-import { memo } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 
-import { NodeProps, Handle, Position } from '@xyflow/react'
+import { OptionsHeaderGherkinStep } from './options-header-gherkin-step'
+
+import { Handle, NodeProps, Position, useNodeId, useReactFlow } from '@xyflow/react'
+import { Pencil, Plus, Trash } from 'lucide-react'
+import { AnimatePresence, LazyMotion, domAnimation } from 'motion/react'
+import * as motion from 'motion/react-m'
+import { TemplateStepIcon, type StepParameterType } from '@prisma/client'
 
 import { BaseNode } from '@/components/base-node'
-import {
-  NodeHeader,
-  NodeHeaderTitle,
-  NodeHeaderActions,
-  NodeHeaderIcon,
-  NodeHeaderDeleteAction,
-} from '@/components/node-header'
-import { NodeHeaderEditAction } from './edit-header-option'
-import { TemplateStepIcon } from '@prisma/client'
+import { Button } from '@/components/ui/button'
 import { KeyToIconTransformer } from '@/lib/transformers/key-to-icon-transformer'
 import { cn } from '@/lib/utils'
+import { flowEdgeMutationGuardRef } from './button-edge'
+
+type OptionsHeaderNodeParameter = {
+  name: string
+  value: string
+  type?: StepParameterType
+  order: number
+}
 
 interface OptionsHeaderNodeData {
   label: string
   gherkinStep: string
   isFirstNode?: boolean
-  icon?: TemplateStepIcon
+  icon?: TemplateStepIcon | string
   isMissingParams?: boolean
+  isSearchHighlighted?: boolean
+  hasOutgoingConnection?: boolean
+  isConnectionInProgress?: boolean
+  isDeleteDisabled?: boolean
+  parameters?: OptionsHeaderNodeParameter[]
 }
 
 interface OptionsHeaderNodeProps extends NodeProps {
   onEdit: (nodeId: string) => void
+  onAddConnectedNode: (nodeId: string) => void
 }
 
-const OptionsHeaderNode = memo(({ selected, data, onEdit }: OptionsHeaderNodeProps) => {
-  OptionsHeaderNode.displayName = 'OptionsHeaderNode'
+function getTemplateStepIcon(icon: OptionsHeaderNodeData['icon']) {
+  return Object.values(TemplateStepIcon).includes(icon as TemplateStepIcon)
+    ? (icon as TemplateStepIcon)
+    : TemplateStepIcon.MOUSE
+}
+
+const OptionsHeaderNode = memo(({ selected, data, onEdit, onAddConnectedNode }: OptionsHeaderNodeProps) => {
+  const { setNodes } = useReactFlow()
+  const id = useNodeId()
+  const [isToolbarVisible, setIsToolbarVisible] = useState(false)
+  const hideToolbarTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const {
+    label,
+    gherkinStep,
+    isFirstNode,
+    icon,
+    isMissingParams,
+    isSearchHighlighted,
+    hasOutgoingConnection,
+    isConnectionInProgress,
+    isDeleteDisabled,
+    parameters = [],
+  } = data as unknown as OptionsHeaderNodeData
+  const handleEdit = useCallback(() => {
+    if (!id) return
+    onEdit(id)
+  }, [id, onEdit])
+
+  const handleAddConnectedNode = useCallback(() => {
+    if (!id || hasOutgoingConnection || isConnectionInProgress) return
+    onAddConnectedNode(id)
+  }, [hasOutgoingConnection, id, isConnectionInProgress, onAddConnectedNode])
 
-  const { label, gherkinStep, isFirstNode, icon, isMissingParams } = data as unknown as OptionsHeaderNodeData
+  const handleDelete = useCallback(() => {
+    if (!id) return
+    if (flowEdgeMutationGuardRef.current.isNodeDeleteBlocked(id)) {
+      flowEdgeMutationGuardRef.current.onBlocked()
+      return
+    }
+    setNodes(prevNodes => prevNodes.filter(node => node.id !== id))
+  }, [id, setNodes])
+
+  const clearHideToolbarTimeout = useCallback(() => {
+    if (!hideToolbarTimeoutRef.current) return
+    clearTimeout(hideToolbarTimeoutRef.current)
+    hideToolbarTimeoutRef.current = null
+  }, [])
+
+  const showToolbarNow = useCallback(() => {
+    clearHideToolbarTimeout()
+    setIsToolbarVisible(true)
+  }, [clearHideToolbarTimeout])
+
+  const hideToolbarWithDelay = useCallback(() => {
+    clearHideToolbarTimeout()
+    hideToolbarTimeoutRef.current = setTimeout(() => {
+      setIsToolbarVisible(false)
+    }, 320)
+  }, [clearHideToolbarTimeout])
+
+  const showToolbar = selected || isToolbarVisible
+
+  useEffect(() => clearHideToolbarTimeout, [clearHideToolbarTimeout])
 
   return (
-    <BaseNode selected={selected} className={cn('max-w-80 border-none px-3 py-2', isMissingParams && 'bg-red-700')}>
-      {!isFirstNode && <Handle type="target" position={Position.Left} />}
-      <NodeHeader className="-mx-3 -mt-2 border-b">
-        <NodeHeaderIcon>{KeyToIconTransformer(icon as TemplateStepIcon)}</NodeHeaderIcon>
-        <NodeHeaderTitle>{label}</NodeHeaderTitle>
-        <NodeHeaderActions>
-          <NodeHeaderEditAction
-            label="Edit"
-            onClick={nodeId => {
-              onEdit(nodeId)
-            }}
-          />
-          <NodeHeaderDeleteAction />
-        </NodeHeaderActions>
-      </NodeHeader>
-      <div className="mt-2">{gherkinStep}</div>
-      <Handle type="source" position={Position.Right} />
-    </BaseNode>
+    <LazyMotion features={domAnimation} strict>
+      <BaseNode
+        selected={selected}
+        data-testid="options-header-node"
+        data-missing-params={isMissingParams ? 'true' : undefined}
+        data-first-node={isFirstNode ? 'true' : undefined}
+        data-search-highlighted={isSearchHighlighted ? 'true' : undefined}
+        onMouseEnter={showToolbarNow}
+        onMouseLeave={hideToolbarWithDelay}
+        onFocus={showToolbarNow}
+        onBlur={event => {
+          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+            hideToolbarWithDelay()
+          }
+        }}
+        className={cn(
+          'shadow-background/30 w-36 overflow-visible p-0 pt-4 shadow-lg transition-[border-radius,box-shadow] duration-300 ease-out',
+          isMissingParams ? 'border-red-700 bg-red-600 text-white ring-1 ring-red-800/60' : 'border-border/70 bg-card',
+          isFirstNode && 'rounded-l-3xl rounded-r-md',
+          isSearchHighlighted && 'shadow-[0_0_28px_rgba(16,185,129,0.34)] ring-2 ring-emerald-500/70',
+        )}
+      >
+        {!isFirstNode && (
+          <Handle type="target" position={Position.Left} className="!z-30 !h-2.5 !w-2.5 !border-0 !bg-zinc-400" />
+        )}
+        <AnimatePresence>
+          {showToolbar && (
+            <div className="absolute -top-12 left-1/2 z-10 -translate-x-1/2">
+              <motion.div
+                className="border-border/70 bg-muted/80 flex items-center gap-1 rounded-md border p-1 shadow-md backdrop-blur"
+                onMouseEnter={showToolbarNow}
+                onMouseLeave={hideToolbarWithDelay}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10, transition: { duration: 0.4, ease: 'easeOut' } }}
+                transition={{ duration: 0.22, ease: 'easeOut' }}
+              >
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="nodrag size-7"
+                  aria-label="Edit"
+                  onClick={handleEdit}
+                >
+                  <Pencil aria-hidden="true" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="nodrag size-7"
+                  aria-label="Delete"
+                  onClick={handleDelete}
+                  disabled={isDeleteDisabled}
+                >
+                  <Trash aria-hidden="true" />
+                </Button>
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>
+        <AnimatePresence>
+          {!hasOutgoingConnection && !isConnectionInProgress && (
+            <div className="absolute left-full top-1/2 z-20 -translate-y-1/2">
+              <motion.div
+                className="flex items-center"
+                initial={{ opacity: 0, x: -6, scale: 0.96 }}
+                animate={{ opacity: 1, x: 0, scale: 1 }}
+                exit={{ opacity: 0, x: -6, scale: 0.96 }}
+                transition={{ duration: 0.18, ease: 'easeOut' }}
+              >
+                <motion.span
+                  aria-hidden="true"
+                  className="h-px w-12 bg-emerald-500/70 shadow-[0_0_8px_rgba(16,185,129,0.4)]"
+                  initial={{ scaleX: 0, transformOrigin: 'left' }}
+                  animate={{ scaleX: 1 }}
+                  exit={{ scaleX: 0 }}
+                  transition={{ duration: 0.2, ease: 'easeOut' }}
+                />
+                <motion.button
+                  type="button"
+                  className="nodrag nopan border-border/70 bg-muted/95 -ml-px flex size-5 items-center justify-center rounded border text-muted-foreground shadow-md transition-colors hover:border-emerald-400/70 hover:bg-emerald-500/20 hover:text-emerald-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/60"
+                  aria-label="Add connected node"
+                  onClick={handleAddConnectedNode}
+                  whileHover={{ scale: 1.12 }}
+                  whileTap={{ scale: 0.92 }}
+                  animate={{
+                    boxShadow: [
+                      '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
+                      '0 0 0 4px rgba(16,185,129,0.12), 0 0 14px rgba(16,185,129,0.26)',
+                      '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
+                    ],
+                  }}
+                  transition={{
+                    boxShadow: {
+                      duration: 2.4,
+                      repeat: Infinity,
+                      ease: 'easeInOut',
+                    },
+                  }}
+                >
+                  <Plus aria-hidden="true" className="size-3" />
+                </motion.button>
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>
+        <div className="flex flex-col items-center gap-3 px-4 py-5 text-center">
+          <div
+            data-testid="node-step-icon"
+            className={cn(
+              'flex size-20 shrink-0 items-center justify-center rounded-2xl shadow-lg [&>svg]:size-10',
+              isMissingParams
+                ? 'bg-white/15 text-white shadow-black/20'
+                : 'bg-primary/15 shadow-primary/20 text-primary',
+            )}
+          >
+            {KeyToIconTransformer(getTemplateStepIcon(icon))}
+          </div>
+        </div>
+        <div className="absolute left-1/2 top-full z-[5] mt-2 min-w-72 -translate-x-[47%]">
+          <h3
+            className={cn(
+              'relative -left-2 w-full text-center text-lg font-bold leading-tight',
+              isMissingParams ? 'text-white' : 'text-card-foreground',
+            )}
+          >
+            {label}
+          </h3>
+          <AnimatePresence>
+            {showToolbar && (
+              <motion.div
+                data-testid="node-gherkin-row"
+                className={cn('mt-2 text-sm leading-relaxed', isMissingParams ? 'text-white' : 'text-muted-foreground')}
+                initial={{ opacity: 0, y: 6 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 6 }}
+                transition={{ duration: 0.2, ease: 'easeOut' }}
+              >
+                <OptionsHeaderGherkinStep gherkinStep={gherkinStep} parameters={parameters} />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+        <Handle type="source" position={Position.Right} className="!z-30 !h-2.5 !w-2.5 !border-0 !bg-zinc-400" />
+      </BaseNode>
+    </LazyMotion>
   )
 })
 
+OptionsHeaderNode.displayName = 'OptionsHeaderNode'
+
 export default OptionsHeaderNode

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

@@ -0,0 +1,144 @@
+// @vitest-environment jsdom
+
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TemplateStepIcon, TemplateStepType } from '@prisma/client'
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import TemplateStepCombobox from './template-step-combobox'
+import type { TemplateStepWithGroup } from '@/types/diagram/template-step'
+
+function buildTemplateStep(step: Partial<TemplateStepWithGroup> = {}): TemplateStepWithGroup {
+  return {
+    id: step.id ?? 'step-1',
+    name: step.name ?? 'Click button',
+    description: step.description ?? 'Clicks the target button',
+    signature: step.signature ?? 'click {string}',
+    functionDefinition: step.functionDefinition ?? '',
+    type: step.type ?? TemplateStepType.ACTION,
+    icon: step.icon ?? TemplateStepIcon.MOUSE,
+    templateStepGroupId: step.templateStepGroupId ?? 'group-actions',
+    createdAt: step.createdAt ?? new Date('2026-01-01T00:00:00.000Z'),
+    updatedAt: step.updatedAt ?? new Date('2026-01-01T00:00:00.000Z'),
+    templateStepGroup: step.templateStepGroup ?? { id: 'group-actions', name: 'actions' },
+    parameters: step.parameters ?? [
+      { id: 'param-target', name: 'target' },
+      { id: 'param-timeout', name: 'timeoutMs' },
+    ],
+  }
+}
+
+function renderCombobox(templateSteps: TemplateStepWithGroup[]) {
+  const TestHarness = () => {
+    const [value, setValue] = React.useState('')
+
+    return <TemplateStepCombobox value={value} onValueChange={setValue} templateSteps={templateSteps} />
+  }
+
+  return render(<TestHarness />)
+}
+
+describe('TemplateStepCombobox', () => {
+  it('renders grouped rich options and shows a richer selected preview', async () => {
+    const user = userEvent.setup()
+
+    renderCombobox([
+      buildTemplateStep(),
+      buildTemplateStep({
+        id: 'step-2',
+        name: 'Validate response',
+        description: 'Checks the response status code',
+        icon: TemplateStepIcon.VALIDATION,
+        type: TemplateStepType.ASSERTION,
+        templateStepGroupId: 'group-assertions',
+        templateStepGroup: { id: 'group-assertions', name: 'assertions' },
+        parameters: [{ id: 'param-status', name: 'expectedStatus' }],
+      }),
+    ])
+
+    await user.click(screen.getByRole('combobox'))
+
+    expect(screen.getByText('Actions')).toBeInTheDocument()
+    expect(screen.getByText('Assertions')).toBeInTheDocument()
+
+    const clickItem = screen.getByText('Click button').closest('[cmdk-item]')
+    expect(clickItem).not.toBeNull()
+    expect(clickItem?.querySelector('svg')).not.toBeNull()
+    expect(within(clickItem as HTMLElement).getByText('Clicks the target button')).toBeInTheDocument()
+    expect(within(clickItem as HTMLElement).getByText('Target')).toBeInTheDocument()
+    expect(within(clickItem as HTMLElement).getByText('Timeout Ms')).toBeInTheDocument()
+
+    await user.click(screen.getByText('Validate response'))
+
+    const combobox = screen.getByRole('combobox')
+    expect(combobox.querySelector('svg')).not.toBeNull()
+    expect(within(combobox).getByText('Validate response')).toBeInTheDocument()
+    expect(within(combobox).getByText('Checks the response status code')).toBeInTheDocument()
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('matches search terms from description, group name, and parameter names', async () => {
+    const user = userEvent.setup()
+
+    renderCombobox([
+      buildTemplateStep(),
+      buildTemplateStep({
+        id: 'step-2',
+        name: 'Validate response',
+        description: 'Checks the response status code',
+        icon: TemplateStepIcon.VALIDATION,
+        type: TemplateStepType.ASSERTION,
+        templateStepGroupId: 'group-assertions',
+        templateStepGroup: { id: 'group-assertions', name: 'assertions' },
+        parameters: [{ id: 'param-status', name: 'expectedStatus' }],
+      }),
+    ])
+
+    await user.click(screen.getByRole('combobox'))
+
+    const searchInput = screen.getByPlaceholderText('Search template steps…')
+
+    await user.type(searchInput, 'status code')
+    expect(screen.getByText('Validate response')).toBeInTheDocument()
+    expect(screen.queryByText('Click button')).not.toBeInTheDocument()
+
+    await user.clear(searchInput)
+    await user.type(searchInput, 'assertions')
+    expect(screen.getByText('Validate response')).toBeInTheDocument()
+
+    await user.clear(searchInput)
+    await user.type(searchInput, 'expectedStatus')
+    expect(screen.getByText('Validate response')).toBeInTheDocument()
+  })
+
+  it('ranks exact name matches above weaker keyword matches', async () => {
+    const user = userEvent.setup()
+
+    renderCombobox([
+      buildTemplateStep({
+        id: 'step-fill',
+        name: 'Fill',
+        description: 'Fill an input field',
+        icon: TemplateStepIcon.TYPE,
+        templateStepGroup: { id: 'group-actions', name: 'actions' },
+      }),
+      buildTemplateStep({
+        id: 'step-assertion',
+        name: 'Validate profile',
+        description: 'Checks that a field is filled',
+        icon: TemplateStepIcon.VALIDATION,
+        type: TemplateStepType.ASSERTION,
+        templateStepGroupId: 'group-assertions',
+        templateStepGroup: { id: 'group-assertions', name: 'assertions' },
+      }),
+    ])
+
+    await user.click(screen.getByRole('combobox'))
+    await user.type(screen.getByPlaceholderText('Search template steps…'), 'fill')
+
+    const options = screen.getAllByRole('option')
+    expect(options).toHaveLength(2)
+    expect(within(options[0] as HTMLElement).getByText('Fill')).toBeInTheDocument()
+  })
+})