create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/components/diagram/flow-diagram-block-dialog.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+
+type FlowDiagramBlockDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  editingBlockId: string | null
+  blockName: string
+  onBlockNameChange: (value: string) => void
+  onSubmit: () => void
+}
+
+export function FlowDiagramBlockDialog({
+  open,
+  onOpenChange,
+  editingBlockId,
+  blockName,
+  onBlockNameChange,
+  onSubmit,
+}: FlowDiagramBlockDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{editingBlockId ? 'Rename block' : 'Create block'}</DialogTitle>
+          <DialogDescription>
+            {editingBlockId
+              ? 'Update the display name for this flow block.'
+              : 'Name the selected nodes before saving them as a flow block.'}
+          </DialogDescription>
+        </DialogHeader>
+        <Input
+          aria-label="Block name"
+          value={blockName}
+          onChange={event => onBlockNameChange(event.target.value)}
+          placeholder="Block name"
+        />
+        <DialogFooter>
+          <Button type="button" onClick={onSubmit}>
+            {editingBlockId ? 'Rename' : 'Create'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/templates/starter/src/components/diagram/flow-diagram-block-overlays.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { ViewportPortal } from '@xyflow/react'
+import { Pencil, Trash2 } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import type { FlowBlockBounds } from './flow-block-helpers'
+
+type FlowDiagramBlockOverlaysProps = {
+  flowBlockBounds: FlowBlockBounds[]
+  onRenameBlock: (block: FlowBlockBounds) => void
+  onDeleteBlock: (blockId: string) => void
+}
+
+export function FlowDiagramBlockOverlays({
+  flowBlockBounds,
+  onRenameBlock,
+  onDeleteBlock,
+}: FlowDiagramBlockOverlaysProps) {
+  if (flowBlockBounds.length === 0) {
+    return null
+  }
+
+  return (
+    <ViewportPortal>
+      {flowBlockBounds.map(block => (
+        <div
+          key={block.id}
+          className="pointer-events-none absolute rounded-lg border border-emerald-400/70 bg-emerald-400/10"
+          style={{
+            left: block.x,
+            top: block.y,
+            width: block.width,
+            height: block.height,
+            zIndex: -1,
+          }}
+        >
+          <div className="bg-background/95 shadow-background/40 pointer-events-auto absolute -top-9 left-2 flex items-center gap-1 rounded-md border border-emerald-300/80 px-2.5 py-1.5 text-sm font-semibold text-foreground shadow-md">
+            <span>{block.name}</span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-5"
+              onClick={() => onRenameBlock(block)}
+              aria-label={`Rename ${block.name}`}
+            >
+              <Pencil className="size-3" />
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-5"
+              onClick={() => onDeleteBlock(block.id)}
+              aria-label={`Delete ${block.name}`}
+            >
+              <Trash2 className="size-3" />
+            </Button>
+          </div>
+        </div>
+      ))}
+    </ViewportPortal>
+  )
+}

package/templates/starter/src/components/diagram/flow-diagram-connection-guards.ts

@@ -0,0 +1,127 @@
+import { addEdge, type Connection, type Edge, type Node, type EdgeChange, type NodeChange, type OnConnect } from '@xyflow/react'
+import {
+  determineStartNodeIds,
+  isAddNodePromptNode,
+  isEdgeWithinSameFlowBlock,
+  isValidDiagramConnection,
+  removeOrphanedEdges,
+} from './flow-diagram-helpers'
+
+export function filterBlockedEdgeChanges(
+  changes: EdgeChange[],
+  edges: Edge[],
+  flowBlockMembership: Map<string, string>,
+) {
+  const blockedDeleteIds = changes.reduce<Set<string>>((ids, change) => {
+    if (change.type !== 'remove' || !change.id) {
+      return ids
+    }
+
+    const edge = edges.find(edge => edge.id === change.id)
+    if (edge && isEdgeWithinSameFlowBlock(edge, flowBlockMembership)) {
+      ids.add(edge.id)
+    }
+
+    return ids
+  }, new Set())
+
+  return {
+    blockedDeleteIds,
+    allowedChanges: changes.filter(change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id)),
+  }
+}
+
+export function filterBlockedNodeChanges(changes: NodeChange[], flowBlockMembership: Map<string, string>) {
+  const blockedDeleteIds = new Set(
+    changes.flatMap(change => (change.type === 'remove' && change.id && flowBlockMembership.has(change.id) ? [change.id] : [])),
+  )
+
+  return {
+    blockedDeleteIds,
+    allowedChanges: changes.filter(change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id)),
+  }
+}
+
+export function createOnConnectHandler(
+  edges: Edge[],
+  flowBlockMembership: Map<string, string>,
+  setEdges: (updater: (edges: Edge[]) => Edge[]) => void,
+  showTopologyBlockedToast: () => void,
+): OnConnect {
+  return params => {
+    if (isEdgeWithinSameFlowBlock(params as Edge, flowBlockMembership)) {
+      showTopologyBlockedToast()
+      return
+    }
+
+    const isValid =
+      !isEdgeWithinSameFlowBlock(params as Edge, flowBlockMembership) && isValidDiagramConnection(edges, params)
+
+    if (isValid) {
+      setEdges(eds => addEdge(params, eds))
+    }
+  }
+}
+
+export function isValidFlowDiagramConnection(
+  connection: Connection | Edge,
+  edges: Edge[],
+  flowBlockMembership: Map<string, string>,
+) {
+  return (
+    !isEdgeWithinSameFlowBlock(connection as Edge, flowBlockMembership) && isValidDiagramConnection(edges, connection)
+  )
+}
+
+export function syncFlowNodePresentationMetadata(
+  currentNodes: Node[],
+  edges: Edge[],
+  flowBlockMembership: Map<string, string>,
+  searchHighlightedNodeId: string | null,
+  isConnectionInProgress: boolean,
+) {
+  const nextEdges = removeOrphanedEdges(currentNodes, edges)
+  const startNodeIds = determineStartNodeIds(currentNodes, nextEdges)
+
+  let hasUpdates = false
+  const updatedNodes = currentNodes.map(node => {
+    if (isAddNodePromptNode(node)) {
+      return node
+    }
+
+    const isFirstNode = startNodeIds.has(node.id)
+    const hasOutgoingConnection = nextEdges.some(edge => edge.source === node.id)
+    const currentIsFirstNode = Boolean((node.data as { isFirstNode?: boolean }).isFirstNode)
+    const currentHasOutgoingConnection = Boolean((node.data as { hasOutgoingConnection?: boolean }).hasOutgoingConnection)
+    const currentIsConnectionInProgress = Boolean((node.data as { isConnectionInProgress?: boolean }).isConnectionInProgress)
+    const currentIsSearchHighlighted = Boolean((node.data as { isSearchHighlighted?: boolean }).isSearchHighlighted)
+    const isDeleteDisabled = flowBlockMembership.has(node.id)
+    const currentIsDeleteDisabled = Boolean((node.data as { isDeleteDisabled?: boolean }).isDeleteDisabled)
+    const isSearchHighlighted = searchHighlightedNodeId === node.id
+
+    if (
+      currentIsFirstNode === isFirstNode &&
+      currentHasOutgoingConnection === hasOutgoingConnection &&
+      currentIsConnectionInProgress === isConnectionInProgress &&
+      currentIsSearchHighlighted === isSearchHighlighted &&
+      currentIsDeleteDisabled === isDeleteDisabled
+    ) {
+      return node
+    }
+
+    hasUpdates = true
+    return {
+      ...node,
+      data: {
+        ...node.data,
+        isFirstNode,
+        hasOutgoingConnection,
+        isConnectionInProgress,
+        isSearchHighlighted,
+        isDeleteDisabled,
+      },
+    }
+  })
+
+  return hasUpdates ? updatedNodes : currentNodes
+}

package/templates/starter/src/components/diagram/flow-diagram-grouping-hints.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+
+type FlowDiagramGroupingHintsProps = {
+  showCreateBlock: boolean
+  showOrphanMessage: boolean
+  orphanMessage: string
+  onCreateBlock: () => void
+}
+
+export function FlowDiagramGroupingHints({
+  showCreateBlock,
+  showOrphanMessage,
+  orphanMessage,
+  onCreateBlock,
+}: FlowDiagramGroupingHintsProps) {
+  if (!showCreateBlock && !showOrphanMessage) {
+    return null
+  }
+
+  return (
+    <>
+      {showCreateBlock ? (
+        <div className="absolute right-4 top-16 z-20 rounded-md border border-border bg-popover p-2 shadow-xl">
+          <Button type="button" size="sm" onClick={onCreateBlock}>
+            Create block
+          </Button>
+        </div>
+      ) : null}
+      {showOrphanMessage ? (
+        <div className="absolute right-4 top-16 z-20 max-w-64 rounded-md border border-border bg-popover p-3 text-sm text-muted-foreground shadow-xl">
+          {orphanMessage}
+        </div>
+      ) : null}
+    </>
+  )
+}

package/templates/starter/src/components/diagram/flow-diagram-helpers.test.ts

@@ -3,13 +3,66 @@ import { describe, expect, it } from 'vitest'
 
 import {
   buildFlowNodeData,
+  createAddNodePromptNode,
   determineNodeOrders,
+  determineStartNodeIds,
   generateInitialNodesAndEdges,
+  getFlowBlockBounds,
+  getFlowBlockMembershipMap,
+  hasOrphanedFlowNode,
+  normalizeFlowBlocks,
+  isAddNodePromptNode,
+  isEdgeWithinSameFlowBlock,
   isValidDiagramConnection,
   removeOrphanedEdges,
+  searchFlowNodesByLabel,
 } from './flow-diagram-helpers'
 
 describe('flow-diagram helpers', () => {
+  it('returns add-node prompt when node order is empty', () => {
+    const { nodes, edges } = generateInitialNodesAndEdges({}, [], false)
+
+    expect(nodes).toHaveLength(1)
+    expect(isAddNodePromptNode(nodes[0]!)).toBe(true)
+    expect(nodes[0]!.draggable).toBe(false)
+    expect(edges).toEqual([])
+  })
+
+  it('does not serialize add-node prompt into node order map', () => {
+    const prompt = createAddNodePromptNode()
+    const orders = determineNodeOrders([prompt] as never, [])
+
+    expect(orders).toEqual({})
+  })
+
+  it('searches real node labels case-insensitively after three trimmed characters', () => {
+    const nodes = [
+      createAddNodePromptNode(),
+      {
+        id: 'node-1',
+        data: {
+          label: 'Open Checkout',
+          gherkinStep: 'Given the cart page',
+          parameters: [{ name: 'target', value: 'cart', type: StepParameterType.STRING, order: 1 }],
+        },
+      },
+      {
+        id: 'node-2',
+        data: {
+          label: 'Submit payment',
+          gherkinStep: 'When checkout is submitted',
+          parameters: [{ name: 'card', value: 'visa', type: StepParameterType.STRING, order: 1 }],
+        },
+      },
+    ] as never
+
+    expect(searchFlowNodesByLabel(nodes, ' che ')).toEqual([{ id: 'node-1', label: 'Open Checkout' }])
+    expect(searchFlowNodesByLabel(nodes, 'PAY')).toEqual([{ id: 'node-2', label: 'Submit payment' }])
+    expect(searchFlowNodesByLabel(nodes, 'pa')).toEqual([])
+    expect(searchFlowNodesByLabel(nodes, 'cart')).toEqual([])
+    expect(searchFlowNodesByLabel(nodes, 'visa')).toEqual([])
+  })
+
   it('hydrates initial nodes and edges from ordered node maps', () => {
     const { nodes, edges } = generateInitialNodesAndEdges(
       {
@@ -95,6 +148,84 @@ describe('flow-diagram helpers', () => {
     expect(orders['node-3']?.order).toBe(-1)
   })
 
+  it('detects connected start nodes and excludes isolated nodes', () => {
+    const startNodeIds = determineStartNodeIds(
+      [
+        {
+          id: 'node-1',
+          data: { label: 'First', parameters: [], templateStepId: 'step-1' },
+        },
+        {
+          id: 'node-2',
+          data: { label: 'Second', parameters: [], templateStepId: 'step-2' },
+        },
+        {
+          id: 'node-3',
+          data: { label: 'Isolated', parameters: [], templateStepId: 'step-3' },
+        },
+      ] as never,
+      [
+        {
+          source: 'node-1',
+          target: 'node-2',
+        },
+      ] as never,
+    )
+
+    expect(startNodeIds.has('node-1')).toBe(true)
+    expect(startNodeIds.has('node-2')).toBe(false)
+    expect(startNodeIds.has('node-3')).toBe(false)
+  })
+
+  it('does not mark any first node when the start is ambiguous', () => {
+    const startNodeIds = determineStartNodeIds(
+      [
+        {
+          id: 'node-1',
+          data: { label: 'First chain root', parameters: [], templateStepId: 'step-1' },
+        },
+        {
+          id: 'node-2',
+          data: { label: 'First chain child', parameters: [], templateStepId: 'step-2' },
+        },
+        {
+          id: 'node-3',
+          data: { label: 'Second chain root', parameters: [], templateStepId: 'step-3' },
+        },
+        {
+          id: 'node-4',
+          data: { label: 'Second chain child', parameters: [], templateStepId: 'step-4' },
+        },
+      ] as never,
+      [
+        {
+          source: 'node-1',
+          target: 'node-2',
+        },
+        {
+          source: 'node-3',
+          target: 'node-4',
+        },
+      ] as never,
+    )
+
+    expect(startNodeIds.size).toBe(0)
+  })
+
+  it('does not mark a lone disconnected node as a start node', () => {
+    const startNodeIds = determineStartNodeIds(
+      [
+        {
+          id: 'node-1',
+          data: { label: 'Only', parameters: [], templateStepId: 'step-1' },
+        },
+      ] as never,
+      [],
+    )
+
+    expect(startNodeIds.size).toBe(0)
+  })
+
   it('validates single in/out connections and removes orphaned edges', () => {
     const edges = [
       { source: 'node-1', target: 'node-2' },
@@ -104,14 +235,65 @@ describe('flow-diagram helpers', () => {
     expect(isValidDiagramConnection(edges, { source: 'node-1', target: 'node-3' } as never)).toBe(false)
     expect(isValidDiagramConnection(edges, { source: 'node-3', target: 'node-4' } as never)).toBe(true)
 
+    expect(removeOrphanedEdges([{ id: 'node-1' }, { id: 'node-2' }] as never, edges)).toEqual([
+      { source: 'node-1', target: 'node-2' },
+    ])
+  })
+
+  it('normalizes block payloads and computes bounds from real nodes only', () => {
+    expect(
+      normalizeFlowBlocks(
+        [
+          { id: 'block-1', name: '  ', nodeIds: ['node-1', 'node-1', 'node-2', 'missing'] },
+          { id: 'block-2', name: 'Too small', nodeIds: ['node-1'] },
+        ],
+        new Set(['node-1', 'node-2']),
+      ),
+    ).toEqual([{ id: 'block-1', name: 'Untitled block', nodeIds: ['node-1', 'node-2'] }])
+
     expect(
-      removeOrphanedEdges(
+      getFlowBlockBounds(
         [
-          { id: 'node-1' },
-          { id: 'node-2' },
+          createAddNodePromptNode(),
+          { id: 'node-1', position: { x: 100, y: 50 }, data: {}, width: 200, height: 100 },
+          { id: 'node-2', position: { x: 360, y: 80 }, data: {}, width: 160, height: 90 },
         ] as never,
-        edges,
+        [{ id: 'block-1', name: 'Checkout', nodeIds: ['node-1', 'node-2', 'missing'] }],
       ),
-    ).toEqual([{ source: 'node-1', target: 'node-2' }])
+    ).toEqual([
+      {
+        id: 'block-1',
+        name: 'Checkout',
+        nodeIds: ['node-1', 'node-2'],
+        x: 68,
+        y: 18,
+        width: 484,
+        height: 184,
+      },
+    ])
+  })
+
+  it('detects orphaned nodes before block creation', () => {
+    const nodes = [
+      { id: 'node-1', data: {} },
+      { id: 'node-2', data: {} },
+      { id: 'node-3', data: {} },
+    ] as never
+
+    expect(hasOrphanedFlowNode(nodes, [{ source: 'node-1', target: 'node-2' }] as never)).toBe(true)
+    expect(
+      hasOrphanedFlowNode(nodes, [
+        { source: 'node-1', target: 'node-2' },
+        { source: 'node-2', target: 'node-3' },
+      ] as never),
+    ).toBe(false)
+    expect(hasOrphanedFlowNode([createAddNodePromptNode()] as never, [])).toBe(false)
+  })
+
+  it('blocks only edge mutations inside the same flow block', () => {
+    const membership = getFlowBlockMembershipMap([{ id: 'block-1', name: 'Checkout', nodeIds: ['node-1', 'node-2'] }])
+
+    expect(isEdgeWithinSameFlowBlock({ source: 'node-1', target: 'node-2' } as never, membership)).toBe(true)
+    expect(isEdgeWithinSameFlowBlock({ source: 'node-2', target: 'node-3' } as never, membership)).toBe(false)
   })
 })