WorkflowDesigner

import { WorkflowDesigner } from "@vortex/ui-icignal"
import type { WorkflowNode, NodeTypeDefinition } from "@vortex/ui-icignal"
import { useState } from "react"
 
function WorkflowEditor() {
  const [nodes, setNodes] = useState<WorkflowNode[]>([
    { id: "1", type: "trigger", title: "시작", parentId: null },
  ])
 
  const nodeTypes: NodeTypeDefinition[] = [
    { type: "trigger", label: "트리거", maxCount: 1, maxChildren: 1 },
    { type: "action", label: "액션", maxChildren: 1 },
  ]
 
  return (
    <div style={{ height: 600 }}>
      <WorkflowDesigner
        nodes={nodes}
        nodeTypes={nodeTypes}
        onNodesChange={setNodes}
        onNodeSelect={(id) => console.log("선택:", id)}
      />
    </div>
  )
}

<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  onNodesChange={setNodes}
  renderNode={({ node, isSelected }) => (
    <div className="p-3">
      <div className="font-semibold">{node.title}</div>
      {node.description && (
        <div className="text-xs text-muted-foreground mt-1">
          {node.description}
        </div>
      )}
      {isSelected && (
        <div className="text-xs text-primary mt-2">선택됨</div>
      )}
    </div>
  )}
/>

// 간단한 텍스트 헤더
<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  title="캠페인 워크플로우"
  description="고객 여정을 설계하세요"
/>
 
// 커스텀 헤더
<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  header={
    <div className="flex items-center justify-between">
      <h3>캠페인 A</h3>
      <button>저장</button>
    </div>
  }
/>

import { WorkflowDesigner } from "@vortex/ui-icignal"
import type { WorkflowNode, NodeTypeDefinition, CanAddToContext } from "@vortex/ui-icignal"
import { useState } from "react"
 
function WorkflowEditorWithPaletteStates() {
  const [nodes, setNodes] = useState<WorkflowNode[]>([
    { id: "1", type: "start", title: "시작", parentId: null },
  ])
 
  const nodeTypes: NodeTypeDefinition[] = [
    { type: "start", label: "시작", maxCount: 1, maxChildren: 1 },
    // 정적 목록: start, target 뒤에만 추가 가능
    { type: "target", label: "대상자", isAllowed: ["start", "target"] },
    {
      type: "benefit",
      label: "혜택",
      // 동적 판단: target/condition 뒤 + 중복 방지
      isAllowed: ({ parentNode, siblings }: CanAddToContext) => {
        if (!["target", "condition"].includes(parentNode.type)) return false
        return !siblings.some((s) => s.type === "benefit")
      },
      // 추천: target 뒤에서만 하이라이트
      isRecommended: ({ parentNode }: CanAddToContext) =>
        parentNode.type === "target",
    },
    { type: "message", label: "메시지", isAllowed: ["target", "benefit"] },
  ]
 
  return (
    <div style={{ height: 600 }}>
      <WorkflowDesigner
        nodes={nodes}
        nodeTypes={nodeTypes}
        onNodesChange={setNodes}
      />
    </div>
  )
}

<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  layoutDirection="horizontal"
  onNodesChange={setNodes}
/>

import { WorkflowDesigner } from "@vortex/ui-icignal"
import type { WorkflowNode, NodeTypeDefinition } from "@vortex/ui-icignal"
import { useState } from "react"
 
const nodeTypes: NodeTypeDefinition[] = [
  { type: "trigger", label: "트리거", maxCount: 1, maxChildren: 1 },
  { type: "action", label: "액션", maxChildren: 1 },
  { type: "condition", label: "조건", maxChildren: 2, isBranching: true,
    branchLabels: ["Yes", "No"], branchColors: ["#22c55e", "#ef4444"] },
]
 
function MyWorkflow() {
  const [nodes, setNodes] = useState<WorkflowNode[]>([
    { id: "1", type: "trigger", title: "시작", parentId: null },
  ])
  const [selected, setSelected] = useState<string | null>(null)
 
  return (
    <div style={{ height: 600 }}>
      <WorkflowDesigner
        nodes={nodes}
        nodeTypes={nodeTypes}
        selectedNodeId={selected}
        onNodeSelect={setSelected}
        onNodesChange={setNodes}
        onNodeDelete={(id) => console.log("삭제:", id)}
        onNodeSettings={(id) => console.log("설정:", id)}
      />
    </div>
  )
}

import type { WorkflowNodeAction } from "@vortex/ui-icignal"
import { Trash2, Settings, Play } from "lucide-react"
 
const nodeActions: WorkflowNodeAction[] = [
  {
    id: "delete",
    icon: <Trash2 size={14} />,
    label: "삭제",
    position: "top", // 기존과 동일하게 상단
    onClick: (nodeId) => handleDelete(nodeId),
    visible: (node) => !node.locked && !!node.parentId,
  },
  {
    id: "settings",
    icon: <Settings size={14} />,
    label: "설정",
    position: "bottom", // 노드 하단에 배치
    onClick: (nodeId) => handleSettings(nodeId),
  },
  {
    id: "run",
    icon: <Play size={14} />,
    label: "실행",
    position: "bottom",
    onClick: (nodeId) => handleRun(nodeId),
    visible: (node) => node.type === "start", // 시작 노드에서만 표시
  },
]
 
<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  nodeActions={nodeActions}
  onNodesChange={setNodes}
/>

<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  onNodesChange={setNodes}
  canShowAddButton={(parentNodeId) => {
    // 특정 노드 이후에는 + 버튼을 숨김
    const node = nodes.find((n) => n.id === parentNodeId)
    if (node?.type === "end") return false
    return true
  }}
/>

const nodeTypes: NodeTypeDefinition[] = [
  {
    type: "condition",
    label: "조건",
    maxChildren: 2,
    isBranching: true,
    branchLabels: ["Yes", "No"],
    branchColors: ["#22c55e", "#ef4444"],
    childrenLayout: "branch", // 핵심: 레인별 배치 + 빈 레인 placeholder
  },
]

const nodeTypes: NodeTypeDefinition[] = [
  {
    type: "message",
    label: "메시지",
    maxChildren: 1,
    attachedNodes: [
      { type: "schedule", title: "발송 스케줄" },
    ],
  },
  {
    type: "schedule",
    label: "발송 스케줄",
    maxChildren: 1,
    hidden: true, // 팔레트에서 숨김
  },
]

<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  onNodesChange={setNodes}
  sidePanel={
    selectedNode ? (
      <div className="absolute inset-y-0 right-0 w-80 border-l bg-background shadow-lg z-10">
        <h3>{selectedNode.title} 설정</h3>
        {/* 설정 폼 */}
      </div>
    ) : undefined
  }
/>