@yiyi_zhang/reactflow-ui 0.1.0

package/dist/types/workflow.d.ts

@@ -0,0 +1,165 @@
+import { Node, Edge, Position } from 'reactflow';
+import { WorkflowDef, TaskDef, WorkflowInstance, TaskInstance } from './conductor';
+/**
+ * 布局方向
+ */
+export type LayoutDirection = 'TB' | 'LR';
+/**
+ * 编辑模式
+ */
+export type EditorMode = 'view' | 'edit' | 'run';
+/**
+ * 执行状态（Conductor OSS TaskStatus）
+ */
+export type ExecutionStatus = 'SCHEDULED' | 'IN_PROGRESS' | 'COMPLETED' | 'COMPLETED_WITH_ERRORS' | 'FAILED' | 'FAILED_WITH_TERMINAL_ERROR' | 'TIMED_OUT' | 'SKIPPED' | 'CANCELED';
+/**
+ * 任务执行数据
+ */
+export interface TaskExecutionData {
+    taskReferenceName: string;
+    status: ExecutionStatus;
+    attempts: TaskInstance[];
+    startTime?: number;
+    endTime?: number;
+    output?: any;
+    input?: any;
+    reasonForIncompletion?: string;
+    iteration?: number;
+}
+/**
+ * 解析结果
+ */
+export interface ParserResult {
+    nodes: WorkflowNode[];
+    edges: Edge[];
+    taskMap: Record<string, TaskDef>;
+    nextId: number;
+    joinNodeId?: string;
+}
+/**
+ * 校验条目
+ */
+export interface ValidationItem {
+    type: 'TASK' | 'GLOBAL';
+    ref: string;
+    message: string;
+}
+/**
+ * 校验结果
+ */
+export interface ValidationResults {
+    isValid: boolean;
+    errors: ValidationItem[];
+    warnings: ValidationItem[];
+}
+/**
+ * 节点数据结构
+ */
+export interface WorkflowNodeData {
+    label: string;
+    taskReferenceName: string;
+    taskType: string;
+    task?: TaskDef;
+    layoutDirection: LayoutDirection;
+    isHighlighted?: boolean;
+    isError?: boolean;
+    hasWarning?: boolean;
+    isDynamic?: boolean;
+    subWorkflowName?: string;
+    loopOver?: TaskDef[];
+    loopCondition?: string;
+    decisionCases?: Record<string, TaskDef[]>;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+}
+/**
+ * 强类型节点
+ */
+export type WorkflowNode = Node<WorkflowNodeData>;
+/**
+ * 应用主题模式
+ * - `dark`: 暗色模式
+ * - `light`: 亮色模式
+ */
+export type ThemeMode = 'dark' | 'light';
+/**
+ * 品牌主色调
+ * - `blue`: 科技蓝
+ * - `orange`: 活力橙
+ */
+export type ThemeColor = 'blue' | 'orange';
+/**
+ * 工作流存储状态
+ */
+export interface WorkflowState {
+    mode: EditorMode;
+    workflowDef: WorkflowDef | null;
+    workflowInstance: WorkflowInstance | null;
+    nodes: WorkflowNode[];
+    edges: Edge[];
+    taskMap: Record<string, TaskDef>;
+    layoutDirection: LayoutDirection;
+    selectedTask: TaskDef | null;
+    selectedTaskInstance: TaskInstance | null;
+    executionData: Record<string, TaskExecutionData> | null;
+    validationResults: ValidationResults;
+    theme: ThemeMode;
+    themeColor: ThemeColor;
+    edgeType: string;
+    nodesLocked: boolean;
+    copiedTask: TaskDef | null;
+    isDetailPanelOpen: boolean;
+}
+/**
+ * 工作流操作接口
+ */
+export interface WorkflowActions {
+    setWorkflow: (workflowJson: any, direction?: LayoutDirection) => void;
+    setMode: (mode: EditorMode) => void;
+    setExecutionData: (data: Record<string, TaskExecutionData> | null) => void;
+    updateTaskStatus: (taskRef: string, status: ExecutionStatus) => void;
+    loadSampleExecution: () => Promise<void>;
+    importExecutionJSON: (json: any) => void;
+    setLayoutDirection: (direction: LayoutDirection) => void;
+    onNodesChange: (changes: any) => void;
+    onEdgesChange: (changes: any) => void;
+    onConnect: (connection: any) => void;
+    setSelectedTask: (task: TaskDef | null) => void;
+    setSelectedTaskInstance: (instance: TaskInstance | null) => void;
+    checkTaskRefUniqueness: (newRef: string, currentRef: string) => boolean;
+    updateTask: (taskRef: string, field: string | Record<string, any>, value?: any) => void;
+    updateWorkflowProperties: (properties: Partial<WorkflowDef>) => void;
+    addNode: (newNode: any, sourceId: string, targetId: string, edgeId: string, edgeData?: any) => void;
+    removeNode: (nodeId: string) => void;
+    addLoopTask: (loopRef: string, taskType: string) => void;
+    removeLoopTask: (loopRef: string, taskRef: string) => void;
+    addDecisionBranch: (taskRef: string, caseName: string) => void;
+    removeDecisionBranch: (taskRef: string, caseName: string) => void;
+    addForkBranch: (taskRef: string) => void;
+    copyTask: (task: TaskDef) => void;
+    pasteTask: (task: TaskDef) => void;
+    setTheme: (theme: ThemeMode) => void;
+    setThemeColor: (color: ThemeColor) => void;
+    setEdgeType: (edgeType: string) => void;
+    setNodesLocked: (nodesLocked: boolean) => void;
+    createBlankWorkflow: (name?: string) => void;
+    applyAIGeneratedWorkflow: (workflowJson: any) => void;
+    setIsDetailPanelOpen: (isOpen: boolean) => void;
+    selectTaskAction: (task: TaskDef | null, openPanel?: boolean) => void;
+}
+/**
+ * 运行态操作回调
+ * 集成方通过此接口注入工作流执行操作（暂停/恢复/停止/重试/重启）的回调函数。
+ * 未传入的回调对应的按钮不会渲染。
+ */
+export interface ExecutionActions {
+    onRestart?: (workflowId: string) => void;
+    onPause?: (workflowId: string) => void;
+    onResume?: (workflowId: string) => void;
+    onTerminate?: (workflowId: string) => void;
+    onRetry?: (workflowId: string) => void;
+}
+/**
+ * 组合 Store 类型
+ */
+export type WorkflowStore = WorkflowState & WorkflowActions;

package/dist/utils/validationRules.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Conductor 校验规则配置
+ */
+export declare const WORKFLOW_RULES: ({
+    field: string;
+    type: string;
+    message: string;
+    value?: undefined;
+} | {
+    field: string;
+    type: string;
+    value: number;
+    message: string;
+})[];
+export declare const TASK_RULES: {
+    common: ({
+        field: string;
+        type: string;
+        message: string;
+        value?: undefined;
+    } | {
+        field: string;
+        type: string;
+        value: RegExp;
+        message: string;
+    })[];
+    types: {
+        HTTP: ({
+            field: string;
+            type: string;
+            message: string;
+            level?: undefined;
+        } | {
+            field: string;
+            type: string;
+            level: string;
+            message: string;
+        })[];
+        LAMBDA: {
+            field: string;
+            type: string;
+            message: string;
+        }[];
+        JSON_JQ_TRANSFORM: {
+            field: string;
+            type: string;
+            message: string;
+        }[];
+        SUB_WORKFLOW: {
+            field: string;
+            type: string;
+            message: string;
+        }[];
+        TERMINATE: ({
+            field: string;
+            type: string;
+            level: string;
+            message: string;
+            value?: undefined;
+        } | {
+            field: string;
+            type: string;
+            value: string[];
+            message: string;
+            level?: undefined;
+        })[];
+        DO_WHILE: {
+            field: string;
+            type: string;
+            message: string;
+        }[];
+        DECISION: {
+            field: string;
+            type: string;
+            validate: (val: any) => boolean;
+            message: string;
+        }[];
+        SWITCH: {
+            field: string;
+            type: string;
+            validate: (val: any) => boolean;
+            message: string;
+        }[];
+    };
+};

package/dist/utils/validator.d.ts

@@ -0,0 +1,6 @@
+import { WorkflowDef } from '../types/conductor';
+import { ValidationResults } from '../types/workflow';
+/**
+ * 校验整个工作流定义
+ */
+export declare const validateWorkflow: (workflowDef: WorkflowDef | null) => ValidationResults;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@yiyi_zhang/reactflow-ui",
+  "version": "0.1.0",
+  "description": "Conductor Workflow IDE — a visual workflow designer built with React 19, ReactFlow and Zustand for editing, validating and monitoring Netflix Conductor workflows.",
+  "keywords": [
+    "conductor",
+    "workflow",
+    "reactflow",
+    "react",
+    "visual-editor",
+    "dag"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yiyisf/reactflow-ui.git"
+  },
+  "homepage": "https://github.com/yiyisf/reactflow-ui#readme",
+  "bugs": {
+    "url": "https://github.com/yiyisf/reactflow-ui/issues"
+  },
+  "type": "module",
+  "main": "./dist/reactflow-ui.umd.js",
+  "module": "./dist/reactflow-ui.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/reactflow-ui.es.js",
+      "require": "./dist/reactflow-ui.umd.js"
+    },
+    "./style.css": "./dist/reactflow-ui.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && tsc -p tsconfig.build.json",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "dagre": "^0.8.5",
+    "lucide-react": "^0.562.0",
+    "react-hotkeys-hook": "^5.2.1",
+    "zundo": "^2.3.0",
+    "zustand": "^5.0.9"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "reactflow": "^11.11.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/dagre": "^0.7.53",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "reactflow": "^11.11.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
+  }
+}