@uipath/apollo-react 3.63.1 → 3.64.0-pr431.cb6b0b8

package/dist/canvas/components/StageNode/StageNode.stories.cjs

@@ -25,8 +25,9 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     DraggableTaskReordering: ()=>DraggableTaskReordering,
-    default: ()=>StageNode_stories,
+    WithRulesTags: ()=>WithRulesTags,
     LoanProcessingWorkflow: ()=>LoanProcessingWorkflow,
+    default: ()=>StageNode_stories,
     AddTaskLoading: ()=>AddTaskLoading,
     AdhocTasks: ()=>AdhocTasks,
     InteractiveTaskManagement: ()=>InteractiveTaskManagement,
@@ -48,6 +49,54 @@ const external_TaskIcon_index_cjs_namespaceObject = require("../TaskIcon/index.c
 const external_StageConnectionEdge_cjs_namespaceObject = require("./StageConnectionEdge.cjs");
 const external_StageEdge_cjs_namespaceObject = require("./StageEdge.cjs");
 const external_StageNode_cjs_namespaceObject = require("./StageNode.cjs");
+const external_StageNode_stories_utils_cjs_namespaceObject = require("./StageNode.stories.utils.cjs");
+const external_StageNode_types_cjs_namespaceObject = require("./StageNode.types.cjs");
+const DefaultCanvasDecorator = ({ initialNodes, initialEdges = [] })=>{
+    const [nodes, _setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
+    const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)(initialEdges);
+    const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>{
+        setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds));
+    }, [
+        setEdges
+    ]);
+    const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
+            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
+        }), []);
+    const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
+            stage: external_StageEdge_cjs_namespaceObject.StageEdge
+        }), []);
+    const defaultEdgeOptions = (0, external_react_namespaceObject.useMemo)(()=>({
+            type: 'stage'
+        }), []);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        style: {
+            width: '100vw',
+            height: '100vh'
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+                nodes: nodes,
+                edges: edges,
+                onNodesChange: onNodesChange,
+                onEdgesChange: onEdgesChange,
+                onConnect: onConnect,
+                nodeTypes: nodeTypes,
+                edgeTypes: edgeTypes,
+                mode: "design",
+                connectionMode: react_cjs_namespaceObject.ConnectionMode.Strict,
+                defaultEdgeOptions: defaultEdgeOptions,
+                connectionLineComponent: external_StageConnectionEdge_cjs_namespaceObject.StageConnectionEdge,
+                elevateEdgesOnSelect: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
+                    position: "bottom-right",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
+                        translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
+                    })
+                })
+            })
+        })
+    });
+};
 const meta = {
     title: 'Canvas/StageNode',
     component: external_StageNode_cjs_namespaceObject.StageNode,
@@ -57,10 +106,6 @@ const meta = {
     decorators: [
         (Story, context)=>{
             if (context.parameters?.useCustomRender) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Story, {});
-            const StageNodeWrapper = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
-                    ...props,
-                    ...props.data
-                });
             const initialNodes = context.parameters?.nodes || [
                 {
                     id: '1',
@@ -80,51 +125,9 @@ const meta = {
                 }
             ];
             const initialEdges = context.parameters?.edges || [];
-            const [nodes, _setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
-            const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)(initialEdges);
-            const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>{
-                setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds));
-            }, [
-                setEdges
-            ]);
-            const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-                    stage: StageNodeWrapper
-                }), [
-                StageNodeWrapper
-            ]);
-            const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-                    stage: external_StageEdge_cjs_namespaceObject.StageEdge
-                }), []);
-            const defaultEdgeOptions = (0, external_react_namespaceObject.useMemo)(()=>({
-                    type: 'stage'
-                }), []);
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                style: {
-                    width: '100vw',
-                    height: '100vh'
-                },
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-                        nodes: nodes,
-                        edges: edges,
-                        onNodesChange: onNodesChange,
-                        onEdgesChange: onEdgesChange,
-                        onConnect: onConnect,
-                        nodeTypes: nodeTypes,
-                        edgeTypes: edgeTypes,
-                        mode: "design",
-                        connectionMode: react_cjs_namespaceObject.ConnectionMode.Strict,
-                        defaultEdgeOptions: defaultEdgeOptions,
-                        connectionLineComponent: external_StageConnectionEdge_cjs_namespaceObject.StageConnectionEdge,
-                        elevateEdgesOnSelect: true,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
-                            position: "bottom-right",
-                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
-                                translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
-                            })
-                        })
-                    })
-                })
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultCanvasDecorator, {
+                initialNodes: initialNodes,
+                initialEdges: initialEdges
             });
         }
     ],
@@ -200,7 +203,7 @@ const DocumentIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("sv
         strokeWidth: "1.5",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
-                d: "M14 2H6C4.9 2 4 2.9 4 4V20C20 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
+                d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
                 d: "M14 2V8H20"
@@ -1311,17 +1314,9 @@ const initialTasks = [
     ]
 ];
 const DraggableTaskReorderingStory = ()=>{
-    const StageNodeWrapper = (0, external_react_namespaceObject.useMemo)(()=>function(props) {
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
+        }), []);
     const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
             stage: external_StageEdge_cjs_namespaceObject.StageEdge
         }), []);
@@ -1490,17 +1485,9 @@ const availableTaskOptions = [
     }
 ];
 const AddAndReplaceTasksStory = ()=>{
-    const StageNodeWrapper = (0, external_react_namespaceObject.useMemo)(()=>function(props) {
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
+        }), []);
     const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
             stage: external_StageEdge_cjs_namespaceObject.StageEdge
         }), []);
@@ -1741,20 +1728,25 @@ const AddAndReplaceTasks = {
     args: {}
 };
 const InlineTitleEditStory = ()=>{
-    const StageNodeWrapper = (0, external_react_namespaceObject.useMemo)(()=>function(props) {
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
+        }), []);
     const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
             stage: external_StageEdge_cjs_namespaceObject.StageEdge
         }), []);
+    const setNodesRef = (0, external_react_namespaceObject.useRef)(null);
+    const createTitleChangeHandler = (0, external_react_namespaceObject.useCallback)((nodeId)=>(newTitle)=>{
+            setNodesRef.current((nds)=>nds.map((node)=>node.id === nodeId ? {
+                        ...node,
+                        data: {
+                            ...node.data,
+                            stageDetails: {
+                                ...node.data.stageDetails,
+                                label: newTitle
+                            }
+                        }
+                    } : node));
+        }, []);
     const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
             {
                 id: 'editable-stage',
@@ -1786,7 +1778,8 @@ const InlineTitleEditStory = ()=>{
                     },
                     onTaskAdd: ()=>{
                         window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
+                    },
+                    onStageTitleChange: createTitleChangeHandler('editable-stage')
                 }
             },
             {
@@ -1812,36 +1805,16 @@ const InlineTitleEditStory = ()=>{
                     },
                     onTaskAdd: ()=>{
                         window.alert('Add task functionality - this would open a dialog to add a new task');
-                    }
+                    },
+                    onStageTitleChange: createTitleChangeHandler('long-title-stage')
                 }
             }
-        ], []);
-    const [nodes, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
-    const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
-    const createTitleChangeHandler = (0, external_react_namespaceObject.useCallback)((nodeId)=>(newTitle)=>{
-            setNodes((nds)=>nds.map((node)=>node.id === nodeId ? {
-                        ...node,
-                        data: {
-                            ...node.data,
-                            stageDetails: {
-                                ...node.data.stageDetails,
-                                label: newTitle
-                            }
-                        }
-                    } : node));
-        }, [
-        setNodes
-    ]);
-    const nodesWithHandlers = (0, external_react_namespaceObject.useMemo)(()=>nodes.map((node)=>({
-                ...node,
-                data: {
-                    ...node.data,
-                    onStageTitleChange: createTitleChangeHandler(node.id)
-                }
-            })), [
-        nodes,
+        ], [
         createTitleChangeHandler
     ]);
+    const [nodes, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
+    setNodesRef.current = setNodes;
+    const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
     const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
         setEdges
     ]);
@@ -1852,7 +1825,7 @@ const InlineTitleEditStory = ()=>{
         },
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-                nodes: nodesWithHandlers,
+                nodes: nodes,
                 edges: edges,
                 onNodesChange: onNodesChange,
                 onEdgesChange: onEdgesChange,
@@ -1943,20 +1916,33 @@ const loadedTaskOptionsWithChildren = [
     }
 ];
 const AddTaskLoadingStory = ()=>{
-    const StageNodeWrapper = (0, external_react_namespaceObject.useMemo)(()=>function(props) {
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_cjs_namespaceObject.StageNode, {
-                ...props,
-                ...props.data
-            });
-        }, []);
     const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
-            stage: StageNodeWrapper
-        }), [
-        StageNodeWrapper
-    ]);
+            stage: external_StageNode_stories_utils_cjs_namespaceObject.StageNodeWrapper
+        }), []);
     const edgeTypes = (0, external_react_namespaceObject.useMemo)(()=>({
             stage: external_StageEdge_cjs_namespaceObject.StageEdge
         }), []);
+    const setNodesRef = (0, external_react_namespaceObject.useRef)(null);
+    const timeoutRef = (0, external_react_namespaceObject.useRef)(void 0);
+    const handleAddTaskFromToolbox = (0, external_react_namespaceObject.useCallback)((nodeId, _taskItem)=>{
+        clearTimeout(timeoutRef.current);
+        setNodesRef.current((nds)=>nds.map((n)=>n.id === nodeId ? {
+                    ...n,
+                    data: {
+                        ...n.data,
+                        addTaskLoading: true
+                    }
+                } : n));
+        timeoutRef.current = setTimeout(()=>{
+            setNodesRef.current((nds)=>nds.map((n)=>n.id === nodeId ? {
+                        ...n,
+                        data: {
+                            ...n.data,
+                            addTaskLoading: false
+                        }
+                    } : n));
+        }, 2000);
+    }, []);
     const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
             {
                 id: 'loading-stage-empty',
@@ -1972,7 +1958,10 @@ const AddTaskLoadingStory = ()=>{
                         tasks: []
                     },
                     addTaskLoading: true,
-                    taskOptions: []
+                    taskOptions: [],
+                    onAddTaskFromToolbox: (taskItem)=>{
+                        handleAddTaskFromToolbox('loading-stage-empty', taskItem);
+                    }
                 }
             },
             {
@@ -1997,11 +1986,17 @@ const AddTaskLoadingStory = ()=>{
                         ]
                     },
                     addTaskLoading: false,
-                    taskOptions: loadedTaskOptionsWithChildren
+                    taskOptions: loadedTaskOptionsWithChildren,
+                    onAddTaskFromToolbox: (taskItem)=>{
+                        handleAddTaskFromToolbox('loading-stage-children', taskItem);
+                    }
                 }
             }
-        ], []);
-    const [nodesState, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
+        ], [
+        handleAddTaskFromToolbox
+    ]);
+    const [nodes, setNodes, onNodesChange] = (0, react_cjs_namespaceObject.useNodesState)(initialNodes);
+    setNodesRef.current = setNodes;
     const [edges, setEdges, onEdgesChange] = (0, react_cjs_namespaceObject.useEdgesState)([]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const timeout = setTimeout(()=>{
@@ -2018,41 +2013,7 @@ const AddTaskLoadingStory = ()=>{
     }, [
         setNodes
     ]);
-    const timeoutRef = (0, external_react_namespaceObject.useRef)(void 0);
     (0, external_react_namespaceObject.useEffect)(()=>()=>clearTimeout(timeoutRef.current), []);
-    const handleAddTaskFromToolbox = (0, external_react_namespaceObject.useCallback)((nodeId, _taskItem)=>{
-        clearTimeout(timeoutRef.current);
-        setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
-                    ...n,
-                    data: {
-                        ...n.data,
-                        addTaskLoading: true
-                    }
-                } : n));
-        timeoutRef.current = setTimeout(()=>{
-            setNodes((nds)=>nds.map((n)=>n.id === nodeId ? {
-                        ...n,
-                        data: {
-                            ...n.data,
-                            addTaskLoading: false
-                        }
-                    } : n));
-        }, 2000);
-    }, [
-        setNodes
-    ]);
-    const nodesWithHandler = (0, external_react_namespaceObject.useMemo)(()=>nodesState.map((node)=>({
-                ...node,
-                data: {
-                    ...node.data,
-                    onAddTaskFromToolbox: (taskItem)=>{
-                        handleAddTaskFromToolbox(node.id, taskItem);
-                    }
-                }
-            })), [
-        nodesState,
-        handleAddTaskFromToolbox
-    ]);
     const onConnect = (0, external_react_namespaceObject.useCallback)((connection)=>setEdges((eds)=>(0, react_cjs_namespaceObject.addEdge)(connection, eds)), [
         setEdges
     ]);
@@ -2063,7 +2024,7 @@ const AddTaskLoadingStory = ()=>{
         },
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.ReactFlowProvider, {
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
-                nodes: nodesWithHandler,
+                nodes: nodes,
                 edges: edges,
                 onNodesChange: onNodesChange,
                 onEdgesChange: onEdgesChange,
@@ -2237,6 +2198,206 @@ const AdhocTasks = {
     },
     args: {}
 };
+const WithRulesTags = {
+    name: 'With Rules & Tags',
+    parameters: {
+        nodes: [
+            {
+                id: '1',
+                type: 'stage',
+                position: {
+                    x: 48,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    stageDetails: {
+                        label: 'Application',
+                        tasks: [
+                            [
+                                {
+                                    id: 't1',
+                                    label: 'Verify applicant identity',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VerificationIcon, {})
+                                }
+                            ],
+                            [
+                                {
+                                    id: 't2',
+                                    label: 'Pull credit report',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
+                                }
+                            ]
+                        ],
+                        headerChips: [
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
+                                count: 1,
+                                tooltip: 'Entry rules',
+                                onClick: ()=>window.alert('Open entry rules panel')
+                            },
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
+                                count: 3,
+                                tooltip: 'Exit rules',
+                                onClick: ()=>window.alert('Open exit rules panel')
+                            }
+                        ]
+                    },
+                    onTaskClick: (taskId)=>window.alert(`Task clicked: ${taskId}`),
+                    onTaskAdd: ()=>window.alert('Add task')
+                }
+            },
+            {
+                id: '2',
+                type: 'stage',
+                position: {
+                    x: 400,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    stageDetails: {
+                        label: 'Pending with customer',
+                        tasks: [
+                            [
+                                {
+                                    id: 't3',
+                                    label: 'Request documents',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
+                                }
+                            ],
+                            [
+                                {
+                                    id: 't4',
+                                    label: 'Send reminder or request',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
+                                }
+                            ]
+                        ],
+                        headerChips: [
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
+                                count: 2,
+                                tooltip: 'Entry rules',
+                                onClick: ()=>window.alert('Open entry rules panel')
+                            },
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
+                                count: 1,
+                                tooltip: 'Exit rules',
+                                onClick: ()=>window.alert('Open exit rules panel')
+                            },
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.ReturnToOrigin,
+                                tooltip: 'Return to origin conditions',
+                                onClick: ()=>window.alert('Open return to origin panel')
+                            }
+                        ]
+                    },
+                    onTaskClick: (taskId)=>window.alert(`Task clicked: ${taskId}`),
+                    onTaskAdd: ()=>window.alert('Add task')
+                }
+            },
+            {
+                id: '3',
+                type: 'stage',
+                position: {
+                    x: 752,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    stageDetails: {
+                        label: 'Withdrawn',
+                        tasks: [
+                            [
+                                {
+                                    id: 't5',
+                                    label: 'Process withdrawal',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
+                                }
+                            ]
+                        ],
+                        headerChips: [
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
+                                count: 2,
+                                tooltip: 'Entry rules',
+                                onClick: ()=>window.alert('Open entry rules panel')
+                            },
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
+                                count: 1,
+                                tooltip: 'Exit rules',
+                                onClick: ()=>window.alert('Open exit rules panel')
+                            },
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseExit,
+                                tooltip: 'Case exit',
+                                onClick: ()=>window.alert('Open case exit panel')
+                            }
+                        ]
+                    },
+                    onTaskClick: (taskId)=>window.alert(`Task clicked: ${taskId}`),
+                    onTaskAdd: ()=>window.alert('Add task')
+                }
+            },
+            {
+                id: '4',
+                type: 'stage',
+                position: {
+                    x: 1104,
+                    y: 96
+                },
+                width: 304,
+                data: {
+                    stageDetails: {
+                        label: 'Closing',
+                        tasks: [
+                            [
+                                {
+                                    id: 't6',
+                                    label: 'Prepare closing docs',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DocumentIcon, {})
+                                }
+                            ],
+                            [
+                                {
+                                    id: 't7',
+                                    label: 'eSign envelope',
+                                    icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessIcon, {})
+                                }
+                            ]
+                        ],
+                        headerChips: [
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Entry,
+                                count: 1,
+                                tooltip: 'Entry rules',
+                                onClick: ()=>window.alert('Open entry rules panel')
+                            },
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.Exit,
+                                count: 3,
+                                tooltip: 'Exit rules',
+                                onClick: ()=>window.alert('Open exit rules panel')
+                            },
+                            {
+                                type: external_StageNode_types_cjs_namespaceObject.StageHeaderChipType.CaseCompletion,
+                                tooltip: 'Case completion',
+                                onClick: ()=>window.alert('Open case completion panel')
+                            }
+                        ]
+                    },
+                    onTaskClick: (taskId)=>window.alert(`Task clicked: ${taskId}`),
+                    onTaskAdd: ()=>window.alert('Add task')
+                }
+            }
+        ]
+    },
+    args: {}
+};
 exports.AddAndReplaceTasks = __webpack_exports__.AddAndReplaceTasks;
 exports.AddTaskLoading = __webpack_exports__.AddTaskLoading;
 exports.AdhocTasks = __webpack_exports__.AdhocTasks;
@@ -2246,6 +2407,7 @@ exports.EditableStageTitle = __webpack_exports__.EditableStageTitle;
 exports.ExecutionStatus = __webpack_exports__.ExecutionStatus;
 exports.InteractiveTaskManagement = __webpack_exports__.InteractiveTaskManagement;
 exports.LoanProcessingWorkflow = __webpack_exports__.LoanProcessingWorkflow;
+exports.WithRulesTags = __webpack_exports__.WithRulesTags;
 exports.WithTaskIcons = __webpack_exports__.WithTaskIcons;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
@@ -2258,6 +2420,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "ExecutionStatus",
     "InteractiveTaskManagement",
     "LoanProcessingWorkflow",
+    "WithRulesTags",
     "WithTaskIcons",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/canvas/components/StageNode/StageNode.stories.d.ts

@@ -13,4 +13,5 @@ export declare const AddAndReplaceTasks: Story;
 export declare const EditableStageTitle: Story;
 export declare const AddTaskLoading: Story;
 export declare const AdhocTasks: Story;
+export declare const WithRulesTags: Story;
 //# sourceMappingURL=StageNode.stories.d.ts.map

package/dist/canvas/components/StageNode/StageNode.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0FD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KAoHrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AA8GF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AAkVF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AA2HF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AA0KF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiHxB,CAAC"}
+{"version":3,"file":"StageNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyBvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAmDxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA8CD,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KAoHrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsE3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8M7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA+HvC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAoKpC,CAAC;AAsGF,eAAO,MAAM,uBAAuB,EAAE,KAOrC,CAAC;AA0UF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AA4GF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAqJF,eAAO,MAAM,cAAc,EAAE,KAO5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiHxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA+I3B,CAAC"}