create-appraisejs 0.3.0 → 0.3.1-alpha.0

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

@@ -1,251 +1,22 @@
-import type { Connection, Edge, Node } from '@xyflow/react'
-import { StepParameterType, type TemplateStep, type TemplateStepParameter } from '@prisma/client'
-
-import type { NodeData as NodeFormData } from '@/constants/form-opts/diagram/node-form'
-import { checkMissingMandatoryParams } from '@/lib/utils/node-param-validation'
-import type { NodeOrderMap, TemplateTestCaseNodeData, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
-
-type DiagramParameter =
-  | NodeFormData['parameters'][number]
-  | TemplateTestCaseNodeData['parameters'][number]
-
-type DiagramNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
-type FlowNodeData = {
-  label: string
-  gherkinStep: string
-  icon: string
-  parameters: Array<{
-    name: string
-    value: string
-    type: StepParameterType
-    order: number
-  }>
-  templateStepId: string
-  isFirstNode?: boolean
-  isMissingParams?: true
-}
-
-function toRuntimeParameters(parameters: DiagramParameter[]) {
-  return parameters.map(parameter => ({
-    name: parameter.name,
-    value: 'value' in parameter ? parameter.value : parameter.defaultValue,
-    type: parameter.type ?? StepParameterType.STRING,
-    order: parameter.order,
-  }))
-}
-
-function toSerializableParameters(parameters: NodeFormData['parameters']) {
-  return parameters.map(parameter => ({
-    name: parameter.name,
-    value: parameter.value,
-    type: parameter.type ?? StepParameterType.STRING,
-    order: parameter.order,
-  }))
-}
-
-function toDiagramNodeOrderEntry(node: Node, order: number) {
-  return {
-    order,
-    label: node.data.label as string,
-    gherkinStep: (node.data.gherkinStep as string) ?? '',
-    isFirstNode: (node.data.isFirstNode as boolean) ?? false,
-    icon: (node.data.icon as string) ?? '',
-    parameters: toSerializableParameters((node.data.parameters as NodeFormData['parameters']) ?? []),
-    templateStepId: (node.data.templateStepId as string) ?? '',
-  }
-}
-
-export function buildFlowNodeData(
-  nodeData: DiagramNodeOrder[string],
-  templateStepParams: TemplateStepParameter[],
-  defaultValueInput: boolean,
-): FlowNodeData {
-  const parameters = toRuntimeParameters(nodeData.parameters ?? [])
-  const baseNodeData = {
-    label: nodeData.label,
-    gherkinStep: nodeData.gherkinStep ?? '',
-    icon: nodeData.icon ?? '',
-    parameters,
-    templateStepId: nodeData.templateStepId ?? '',
-    ...('isFirstNode' in nodeData ? { isFirstNode: nodeData.isFirstNode ?? false } : {}),
-  }
-
-  const isMissingParams = checkMissingMandatoryParams(
-    {
-      parameters: baseNodeData.parameters,
-      templateStepId: baseNodeData.templateStepId,
-    },
-    templateStepParams,
-    defaultValueInput,
-  )
-
-  return isMissingParams ? { ...baseNodeData, isMissingParams: true } : baseNodeData
-}
-
-export function generateInitialNodesAndEdges(
-  nodeOrder: DiagramNodeOrder,
-  templateStepParams: TemplateStepParameter[],
-  defaultValueInput: boolean,
-) {
-  const nodes: Node[] = []
-  const edges: Edge[] = []
-
-  const sortedEntries = Object.entries(nodeOrder).sort(([, left], [, right]) => left.order - right.order)
-
-  sortedEntries.forEach(([id, nodeData], index) => {
-    const data = buildFlowNodeData(nodeData, templateStepParams, defaultValueInput)
-
-    if (nodeData.order === -1) {
-      nodes.push({
-        id,
-        data,
-        position: { x: 0, y: index * 100 },
-        type: 'optionsHeaderNode',
-      })
-      return
-    }
-
-    nodes.push({
-      id,
-      data,
-      position: { x: nodeData.order * 500, y: 0 },
-      type: 'optionsHeaderNode',
-    })
-
-    if (index < sortedEntries.length - 1) {
-      const nextEntry = sortedEntries[index + 1]
-      if (nodeData.order !== -1 && nextEntry[1].order !== -1 && nodeData.order === nextEntry[1].order - 1) {
-        edges.push({
-          id: `${id}-${nextEntry[0]}`,
-          source: id,
-          target: nextEntry[0],
-          type: 'buttonEdge',
-        })
-      }
-    }
-  })
-
-  return { nodes, edges }
-}
-
-export function createEditableNodeData(node: Node | undefined): NodeFormData | null {
-  if (!node) {
-    return null
-  }
-
-  return {
-    ...(node.data as NodeFormData),
-    gherkinStep: (node.data.gherkinStep as string) ?? '',
-    parameters: ((node.data.parameters as NodeFormData['parameters']) ?? []).map(parameter => ({
-      name: parameter.name,
-      value: parameter.value,
-      type: parameter.type ?? StepParameterType.STRING,
-      order: parameter.order,
-    })),
-    templateStepId: (node.data.templateStepId as string) ?? '',
-  }
-}
-
-export function getTemplateStepIcon(templateSteps: TemplateStep[], templateStepId: string) {
-  return templateSteps.find(templateStep => templateStep.id === templateStepId)?.icon ?? 'MOUSE'
-}
-
-export function buildNodeFormData(
-  formData: NodeFormData,
-  templateSteps: TemplateStep[],
-  templateStepParams: TemplateStepParameter[],
-  defaultValueInput: boolean,
-  isFirstNode: boolean,
-) {
-  const icon = getTemplateStepIcon(templateSteps, formData.templateStepId)
-  const isMissingParams = checkMissingMandatoryParams(
-    {
-      parameters: formData.parameters,
-      templateStepId: formData.templateStepId,
-    },
-    templateStepParams,
-    defaultValueInput,
-  )
-
-  return {
-    ...formData,
-    icon,
-    isFirstNode,
-    isMissingParams,
-  }
-}
-
-export function determineNodeOrders(nodes: Node[], edges: Edge[]): NodeOrderMap {
-  const graph: Record<string, string[]> = {}
-  const inDegree: Record<string, number> = {}
-  const hasConnections: Record<string, boolean> = {}
-  const nodeIds = new Set(nodes.map(node => node.id))
-
-  nodes.forEach(node => {
-    graph[node.id] = []
-    inDegree[node.id] = 0
-    hasConnections[node.id] = false
-  })
-
-  edges.forEach(edge => {
-    if (edge.source && edge.target && nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
-      graph[edge.source].push(edge.target)
-      inDegree[edge.target] = (inDegree[edge.target] || 0) + 1
-      hasConnections[edge.source] = true
-      hasConnections[edge.target] = true
-    }
-  })
-
-  const queue = nodes.map(node => node.id).filter(nodeId => inDegree[nodeId] === 0 && hasConnections[nodeId])
-
-  const orders: NodeOrderMap = {}
-  let orderNumber = 1
-
-  nodes.forEach(node => {
-    if (!hasConnections[node.id]) {
-      orders[node.id] = toDiagramNodeOrderEntry(node, -1)
-    }
-  })
-
-  while (queue.length > 0) {
-    const currentId = queue.shift()
-    if (!currentId) {
-      break
-    }
-
-    const currentNode = nodes.find(node => node.id === currentId)
-    if (!currentNode) {
-      continue
-    }
-
-    orders[currentId] = toDiagramNodeOrderEntry(currentNode, orderNumber++)
-
-    graph[currentId].forEach(neighborId => {
-      inDegree[neighborId]--
-      if (inDegree[neighborId] === 0) {
-        queue.push(neighborId)
-      }
-    })
-  }
-
-  nodes.forEach(node => {
-    if (!orders[node.id]) {
-      orders[node.id] = toDiagramNodeOrderEntry(node, orderNumber++)
-    }
-  })
-
-  return orders
-}
-
-export function removeOrphanedEdges(nodes: Node[], edges: Edge[]) {
-  const nodeIds = new Set(nodes.map(node => node.id))
-  return edges.filter(edge => nodeIds.has(edge.source) && nodeIds.has(edge.target))
-}
-
-export function isValidDiagramConnection(edges: Edge[], connection: Connection | Edge) {
-  const hasSourceConnection = edges.some(edge => edge.source === connection.source)
-  const hasTargetConnection = edges.some(edge => edge.target === connection.target)
-  const isReconnecting = edges.some(edge => edge.source === connection.source && edge.target === connection.target)
-
-  return isReconnecting || (!hasSourceConnection && !hasTargetConnection)
-}
+export {
+  ADD_NODE_PROMPT_NODE_TYPE,
+  createAddNodePromptNode,
+  isAddNodePromptNode,
+  type AddNodePromptNodeData,
+} from './flow-add-node-prompt-helpers'
+export { searchFlowNodesByLabel } from './flow-node-search-helpers'
+export {
+  getFlowBlockBounds,
+  getFlowBlockMembershipMap,
+  hasOrphanedFlowNode,
+  isEdgeWithinSameFlowBlock,
+  normalizeFlowBlocks,
+} from './flow-block-helpers'
+export { buildFlowNodeData, buildNodeFormData, createEditableNodeData } from './flow-node-data-helpers'
+export {
+  determineNodeOrders,
+  determineStartNodeIds,
+  generateInitialNodesAndEdges,
+  isValidDiagramConnection,
+  removeOrphanedEdges,
+} from './flow-node-order-helpers'

package/templates/starter/src/components/diagram/flow-diagram-node-search.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import type { RefObject } from 'react'
+import { Search, X } from 'lucide-react'
+import { AnimatePresence, LazyMotion, domAnimation } from 'motion/react'
+import * as motion from 'motion/react-m'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+
+export type FlowNodeSearchResult = {
+  id: string
+  label: string
+}
+
+type FlowDiagramNodeSearchProps = {
+  isSearchOpen: boolean
+  searchQuery: string
+  searchInputRef: RefObject<HTMLInputElement | null>
+  shouldShowSearchSuggestions: boolean
+  nodeSearchResults: FlowNodeSearchResult[]
+  onSearchQueryChange: (value: string) => void
+  onToggleSearch: () => void
+  onSelectResult: (nodeId: string) => void
+}
+
+export function FlowDiagramNodeSearch({
+  isSearchOpen,
+  searchQuery,
+  searchInputRef,
+  shouldShowSearchSuggestions,
+  nodeSearchResults,
+  onSearchQueryChange,
+  onToggleSearch,
+  onSelectResult,
+}: FlowDiagramNodeSearchProps) {
+  return (
+    <LazyMotion features={domAnimation} strict>
+    <div className="relative flex items-start gap-2" data-node-search-root="true">
+      <AnimatePresence>
+        {isSearchOpen ? (
+          <motion.div
+            className="flex flex-col items-end"
+            initial={{ opacity: 0, x: 14, scale: 0.98 }}
+            animate={{ opacity: 1, x: 0, scale: 1 }}
+            exit={{ opacity: 0, x: 14, scale: 0.98 }}
+            transition={{ duration: 0.18, ease: 'easeOut' }}
+          >
+            <Input
+              ref={searchInputRef}
+              aria-label="Search nodes"
+              value={searchQuery}
+              onChange={event => onSearchQueryChange(event.target.value)}
+              placeholder="Search labels..."
+              className="border-border/70 bg-background/95 h-9 w-56 shadow-md backdrop-blur"
+            />
+            <AnimatePresence>
+              {shouldShowSearchSuggestions ? (
+                <motion.div
+                  className="border-border/70 mt-2 w-64 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-xl"
+                  initial={{ opacity: 0, y: -6 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -6 }}
+                  transition={{ duration: 0.16, ease: 'easeOut' }}
+                >
+                  {nodeSearchResults.length > 0 ? (
+                    <div className="max-h-64 overflow-y-auto py-1">
+                      {nodeSearchResults.map(result => (
+                        <button
+                          key={result.id}
+                          type="button"
+                          className="block w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none"
+                          onClick={() => onSelectResult(result.id)}
+                        >
+                          {result.label}
+                        </button>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="px-3 py-2 text-sm text-muted-foreground">No matching labels</div>
+                  )}
+                </motion.div>
+              ) : null}
+            </AnimatePresence>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={onToggleSearch}
+              aria-label={isSearchOpen ? 'Close node search' : 'Search nodes'}
+            >
+              {isSearchOpen ? <X /> : <Search />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{isSearchOpen ? 'Close search' : 'Search nodes'}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+    </LazyMotion>
+  )
+}

package/templates/starter/src/components/diagram/flow-diagram-node-types.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import type { NodeProps } from '@xyflow/react'
+
+import ButtonEdge from './button-edge'
+import OptionsHeaderNode from './options-header-node'
+import { AddNodePromptNode, type AddNodePromptFlowNode } from './add-node-prompt-node'
+
+export const flowDiagramHandlersRef = {
+  current: {
+    onEditNode: (nodeId: string) => {
+      void nodeId
+    },
+    onOpenAddNode: (sourceNodeId?: string) => {
+      void sourceNodeId
+    },
+  },
+}
+
+function OptionsHeaderNodeWrapper(props: NodeProps) {
+  return (
+    <OptionsHeaderNode
+      {...props}
+      onEdit={nodeId => flowDiagramHandlersRef.current.onEditNode(nodeId)}
+      onAddConnectedNode={nodeId => flowDiagramHandlersRef.current.onOpenAddNode(nodeId)}
+    />
+  )
+}
+
+function AddNodePromptNodeWrapper(props: NodeProps) {
+  return (
+    <AddNodePromptNode
+      {...(props as NodeProps<AddNodePromptFlowNode>)}
+      onOpenAddNode={() => flowDiagramHandlersRef.current.onOpenAddNode()}
+    />
+  )
+}
+
+export const flowEdgeTypes = {
+  buttonEdge: ButtonEdge,
+}
+
+export const flowNodeTypes = {
+  optionsHeaderNode: OptionsHeaderNodeWrapper,
+  addNodePromptNode: AddNodePromptNodeWrapper,
+}

package/templates/starter/src/components/diagram/flow-diagram-toolbar.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import type { RefObject } from 'react'
+import { Boxes, MousePointer2, Plus } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { FlowDiagramNodeSearch } from './flow-diagram-node-search'
+import type { FlowNodeSearchResult } from './flow-diagram-node-search'
+
+type FlowDiagramToolbarProps = {
+  enableNodeSearch: boolean
+  enableNodeGrouping: boolean
+  isSearchOpen: boolean
+  searchQuery: string
+  searchInputRef: RefObject<HTMLInputElement | null>
+  shouldShowSearchSuggestions: boolean
+  nodeSearchResults: FlowNodeSearchResult[]
+  isGroupingSelectionMode: boolean
+  onSearchQueryChange: (value: string) => void
+  onToggleSearch: () => void
+  onSearchResultSelect: (nodeId: string) => void
+  onToggleGroupingSelectionMode: () => void
+  onOpenAddNodeDialog: () => void
+}
+
+export function FlowDiagramToolbar({
+  enableNodeSearch,
+  enableNodeGrouping,
+  isSearchOpen,
+  searchQuery,
+  searchInputRef,
+  shouldShowSearchSuggestions,
+  nodeSearchResults,
+  isGroupingSelectionMode,
+  onSearchQueryChange,
+  onToggleSearch,
+  onSearchResultSelect,
+  onToggleGroupingSelectionMode,
+  onOpenAddNodeDialog,
+}: FlowDiagramToolbarProps) {
+  return (
+    <div className="absolute right-4 top-4 z-20 flex items-start gap-2">
+      {enableNodeSearch ? (
+        <FlowDiagramNodeSearch
+          isSearchOpen={isSearchOpen}
+          searchQuery={searchQuery}
+          searchInputRef={searchInputRef}
+          shouldShowSearchSuggestions={shouldShowSearchSuggestions}
+          nodeSearchResults={nodeSearchResults}
+          onSearchQueryChange={onSearchQueryChange}
+          onToggleSearch={onToggleSearch}
+          onSelectResult={onSearchResultSelect}
+        />
+      ) : null}
+      {enableNodeGrouping ? (
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant={isGroupingSelectionMode ? 'default' : 'outline'}
+                size="icon"
+                onClick={onToggleGroupingSelectionMode}
+                aria-label={isGroupingSelectionMode ? 'Exit block selection mode' : 'Select nodes for block'}
+              >
+                {isGroupingSelectionMode ? <Boxes /> : <MousePointer2 />}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              {isGroupingSelectionMode ? 'Selection mode' : 'Create block'}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : null}
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button type="button" variant="outline" size="icon" onClick={onOpenAddNodeDialog} aria-label="Add Node">
+              <Plus />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">Add Node</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  )
+}

package/templates/starter/src/components/diagram/flow-diagram-types.ts

@@ -0,0 +1,21 @@
+import type { NodeOrderMap, TemplateTestCaseNodeOrderMap, FlowBlock } from '@/types/diagram/diagram'
+import type { Environment, Locator, LocatorGroup, Module, TemplateStep, TemplateStepParameter } from '@prisma/client'
+
+export type FlowDiagramProps = {
+  nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name' | 'route' | 'moduleId'>>
+  environments: Array<Pick<Environment, 'id' | 'name'>>
+  modules: Array<Pick<Module, 'id' | 'name' | 'parentId'>>
+  defaultValueInput?: boolean
+  enableNodeSearch?: boolean
+  enableNodeGrouping?: boolean
+  flowBlocks?: FlowBlock[]
+  layoutRefreshKey?: string | number | boolean
+  onFlowBlocksChange?: (flowBlocks: FlowBlock[]) => void
+  onNodeOrderChange: (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => void
+}
+
+export const EMPTY_FLOW_BLOCKS: FlowBlock[] = []