@uipath/apollo-react 3.53.0 → 3.54.0-pr354.c980c37

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

@@ -26,30 +26,39 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     EmptyGroup: ()=>EmptyGroup,
     default: ()=>GroupNode_stories,
-    Default: ()=>Default
+    WithHeaderActions: ()=>WithHeaderActions,
+    MinimalWithExecutionStatus: ()=>MinimalWithExecutionStatus,
+    WithExecutionStatus: ()=>WithExecutionStatus,
+    WithoutCollapse: ()=>WithoutCollapse,
+    Default: ()=>Default,
+    Minimal: ()=>Minimal
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
-const index_cjs_namespaceObject = require("../../storybook-utils/index.cjs");
+const external_storybook_utils_index_cjs_namespaceObject = require("../../storybook-utils/index.cjs");
 const external_types_cjs_namespaceObject = require("../../types.cjs");
 const external_BaseCanvas_index_cjs_namespaceObject = require("../BaseCanvas/index.cjs");
 const external_BaseNode_index_cjs_namespaceObject = require("../BaseNode/index.cjs");
 const external_CanvasPositionControls_cjs_namespaceObject = require("../CanvasPositionControls.cjs");
+const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
 const external_GroupNode_cjs_namespaceObject = require("./GroupNode.cjs");
+const external_GroupNodeConfigContext_cjs_namespaceObject = require("./GroupNodeConfigContext.cjs");
 const meta = {
     title: 'Canvas/GroupNode',
     parameters: {
         layout: 'fullscreen'
     },
     decorators: [
-        (0, index_cjs_namespaceObject.withCanvasProviders)()
+        (0, external_storybook_utils_index_cjs_namespaceObject.withCanvasProviders)()
     ]
 };
 const GroupNode_stories = meta;
+const CHILD_NODE_TYPE = 'uipath.timer-activity';
 const nodeTypes = {
     group: external_GroupNode_cjs_namespaceObject.GroupNode,
-    base: external_BaseNode_index_cjs_namespaceObject.BaseNode
+    [CHILD_NODE_TYPE]: external_BaseNode_index_cjs_namespaceObject.BaseNode
 };
 function createGroupNode(id, title, iconName, position, size, backgroundColor) {
     return {
@@ -58,7 +67,9 @@ function createGroupNode(id, title, iconName, position, size, backgroundColor) {
         position,
         data: {
             title,
-            iconName,
+            ...iconName && {
+                iconName
+            },
             backgroundColor
         },
         style: {
@@ -73,12 +84,11 @@ function createGroupNode(id, title, iconName, position, size, backgroundColor) {
 function createChildNode(id, label, position, parentId) {
     return {
         id,
-        type: 'base',
+        type: CHILD_NODE_TYPE,
         position,
         data: {
             display: {
-                label,
-                shape: 'square'
+                label
             }
         },
         parentId,
@@ -106,7 +116,7 @@ function createDefaultNodes() {
             x: 370,
             y: 60
         }, 'group-1'),
-        createGroupNode('group-2', 'Classification agent', 'magic_button', {
+        createGroupNode('group-2', 'Classification agent', void 0, {
             x: 750,
             y: 100
         }, {
@@ -168,7 +178,7 @@ function createDefaultEdges() {
 function DefaultStory() {
     const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>createDefaultNodes(), []);
     const initialEdges = (0, external_react_namespaceObject.useMemo)(()=>createDefaultEdges(), []);
-    const { canvasProps } = (0, index_cjs_namespaceObject.useCanvasStory)({
+    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
         initialNodes,
         initialEdges
     });
@@ -177,7 +187,7 @@ function DefaultStory() {
         nodeTypes: nodeTypes,
         mode: "design",
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.StoryInfoPanel, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
                 title: "Group Nodes",
                 description: "Drag groups to move all child nodes together"
             }),
@@ -203,7 +213,7 @@ function EmptyGroupStory() {
                 height: 300
             })
         ], []);
-    const { canvasProps } = (0, index_cjs_namespaceObject.useCanvasStory)({
+    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
         initialNodes
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
@@ -211,7 +221,7 @@ function EmptyGroupStory() {
         nodeTypes: nodeTypes,
         mode: "design",
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.StoryInfoPanel, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
                 title: "Empty Group",
                 description: "A group node with no children"
             }),
@@ -227,12 +237,599 @@ function EmptyGroupStory() {
 const EmptyGroup = {
     render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyGroupStory, {})
 };
+function GroupNodeWithActions(props) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNodeConfigContext_cjs_namespaceObject.GroupNodeConfigProvider, {
+        value: {
+            headerActions: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                style: {
+                    fontSize: '10px',
+                    padding: '2px 6px',
+                    borderRadius: '4px',
+                    backgroundColor: 'var(--uix-canvas-success-background)',
+                    color: 'var(--uix-canvas-success-icon)',
+                    whiteSpace: 'nowrap'
+                },
+                children: "Active"
+            })
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNode_cjs_namespaceObject.GroupNode, {
+            ...props
+        })
+    });
+}
+function WithHeaderActionsStory() {
+    const nodeTypesWithActions = (0, external_react_namespaceObject.useMemo)(()=>({
+            group: GroupNodeWithActions,
+            [CHILD_NODE_TYPE]: external_BaseNode_index_cjs_namespaceObject.BaseNode
+        }), []);
+    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
+            createGroupNode('group-1', 'Agent Workflow', 'smart_toy', {
+                x: 50,
+                y: 100
+            }, {
+                width: 600,
+                height: 250
+            }),
+            createChildNode('node-1', 'Classifier', {
+                x: 30,
+                y: 60
+            }, 'group-1'),
+            createChildNode('node-2', 'Extractor', {
+                x: 200,
+                y: 60
+            }, 'group-1')
+        ], []);
+    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
+        initialNodes
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+        ...canvasProps,
+        nodeTypes: nodeTypesWithActions,
+        mode: "design",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
+                title: "With Header Actions",
+                description: "Group node with custom actions in the header via context"
+            }),
+            /*#__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 WithHeaderActions = {
+    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(WithHeaderActionsStory, {})
+};
+function GroupNodeWithStatus({ status, message }) {
+    return function(props) {
+        const tooltipContent = message || status;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNodeConfigContext_cjs_namespaceObject.GroupNodeConfigProvider, {
+            value: {
+                executionStatus: status,
+                executionMessage: message,
+                headerActions: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+                    content: tooltipContent,
+                    placement: "top",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        style: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: 24,
+                            height: 24
+                        },
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
+                            status: status,
+                            size: 16
+                        })
+                    })
+                })
+            },
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNode_cjs_namespaceObject.GroupNode, {
+                ...props
+            })
+        });
+    };
+}
+function WithExecutionStatusStory() {
+    const CompletedGroupNode = (0, external_react_namespaceObject.useMemo)(()=>GroupNodeWithStatus({
+            status: 'Completed'
+        }), []);
+    const InProgressGroupNode = (0, external_react_namespaceObject.useMemo)(()=>GroupNodeWithStatus({
+            status: 'InProgress'
+        }), []);
+    const FailedGroupNode = (0, external_react_namespaceObject.useMemo)(()=>GroupNodeWithStatus({
+            status: 'Failed',
+            message: 'SMTP connection refused: unable to reach mail server at port 587'
+        }), []);
+    const PausedGroupNode = (0, external_react_namespaceObject.useMemo)(()=>GroupNodeWithStatus({
+            status: 'Paused',
+            message: 'Waiting for manual approval from admin'
+        }), []);
+    const nodeTypesMap = (0, external_react_namespaceObject.useMemo)(()=>({
+            'group-completed': CompletedGroupNode,
+            'group-in-progress': InProgressGroupNode,
+            'group-failed': FailedGroupNode,
+            'group-paused': PausedGroupNode,
+            [CHILD_NODE_TYPE]: external_BaseNode_index_cjs_namespaceObject.BaseNode
+        }), [
+        CompletedGroupNode,
+        InProgressGroupNode,
+        FailedGroupNode,
+        PausedGroupNode
+    ]);
+    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
+            {
+                ...createGroupNode('group-completed', 'Data Pipeline', 'account_tree', {
+                    x: 50,
+                    y: 50
+                }, {
+                    width: 500,
+                    height: 220
+                }),
+                type: 'group-completed'
+            },
+            createChildNode('n-c-1', 'Validate', {
+                x: 30,
+                y: 60
+            }, 'group-completed'),
+            createChildNode('n-c-2', 'Transform', {
+                x: 200,
+                y: 60
+            }, 'group-completed'),
+            createChildNode('n-c-3', 'Store', {
+                x: 370,
+                y: 60
+            }, 'group-completed'),
+            {
+                ...createGroupNode('group-in-progress', 'ML Training', 'model_training', {
+                    x: 620,
+                    y: 50
+                }, {
+                    width: 400,
+                    height: 220
+                }),
+                type: 'group-in-progress'
+            },
+            createChildNode('n-ip-1', 'Preprocess', {
+                x: 30,
+                y: 60
+            }, 'group-in-progress'),
+            createChildNode('n-ip-2', 'Train', {
+                x: 200,
+                y: 60
+            }, 'group-in-progress'),
+            {
+                ...createGroupNode('group-failed', 'Email Sender', 'mail', {
+                    x: 50,
+                    y: 340
+                }, {
+                    width: 400,
+                    height: 220
+                }),
+                type: 'group-failed'
+            },
+            createChildNode('n-f-1', 'Template', {
+                x: 30,
+                y: 60
+            }, 'group-failed'),
+            createChildNode('n-f-2', 'Send', {
+                x: 200,
+                y: 60
+            }, 'group-failed'),
+            {
+                ...createGroupNode('group-paused', 'Approval Flow', 'approval', {
+                    x: 520,
+                    y: 340
+                }, {
+                    width: 500,
+                    height: 220
+                }),
+                type: 'group-paused'
+            },
+            createChildNode('n-p-1', 'Request', {
+                x: 30,
+                y: 60
+            }, 'group-paused'),
+            createChildNode('n-p-2', 'Review', {
+                x: 200,
+                y: 60
+            }, 'group-paused'),
+            createChildNode('n-p-3', 'Approve', {
+                x: 370,
+                y: 60
+            }, 'group-paused')
+        ], []);
+    const initialEdges = (0, external_react_namespaceObject.useMemo)(()=>[
+            {
+                id: 'e-c-1-2',
+                source: 'n-c-1',
+                target: 'n-c-2',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-c-2-3',
+                source: 'n-c-2',
+                target: 'n-c-3',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-ip-1-2',
+                source: 'n-ip-1',
+                target: 'n-ip-2',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-f-1-2',
+                source: 'n-f-1',
+                target: 'n-f-2',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-p-1-2',
+                source: 'n-p-1',
+                target: 'n-p-2',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-p-2-3',
+                source: 'n-p-2',
+                target: 'n-p-3',
+                type: 'smoothstep'
+            }
+        ], []);
+    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
+        initialNodes,
+        initialEdges
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+        ...canvasProps,
+        nodeTypes: nodeTypesMap,
+        mode: "design",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
+                title: "With Execution Status",
+                description: "Group nodes showing different execution statuses (Completed, In Progress, Failed, Paused)"
+            }),
+            /*#__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 WithExecutionStatus = {
+    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(WithExecutionStatusStory, {})
+};
+function GroupNodeNoCollapse(props) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNodeConfigContext_cjs_namespaceObject.GroupNodeConfigProvider, {
+        value: {
+            hideCollapseButton: true
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNode_cjs_namespaceObject.GroupNode, {
+            ...props
+        })
+    });
+}
+function WithoutCollapseStory() {
+    const nodeTypesNoCollapse = (0, external_react_namespaceObject.useMemo)(()=>({
+            group: GroupNodeNoCollapse,
+            [CHILD_NODE_TYPE]: external_BaseNode_index_cjs_namespaceObject.BaseNode
+        }), []);
+    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
+            createGroupNode('group-1', 'Static Group', 'lock', {
+                x: 50,
+                y: 100
+            }, {
+                width: 600,
+                height: 250
+            }),
+            createChildNode('node-1', 'Step A', {
+                x: 30,
+                y: 60
+            }, 'group-1'),
+            createChildNode('node-2', 'Step B', {
+                x: 200,
+                y: 60
+            }, 'group-1'),
+            createChildNode('node-3', 'Step C', {
+                x: 370,
+                y: 60
+            }, 'group-1')
+        ], []);
+    const initialEdges = (0, external_react_namespaceObject.useMemo)(()=>[
+            {
+                id: 'e-1-2',
+                source: 'node-1',
+                target: 'node-2',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-2-3',
+                source: 'node-2',
+                target: 'node-3',
+                type: 'smoothstep'
+            }
+        ], []);
+    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
+        initialNodes,
+        initialEdges
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+        ...canvasProps,
+        nodeTypes: nodeTypesNoCollapse,
+        mode: "design",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
+                title: "Without Collapse",
+                description: "Group node with the collapse/expand button hidden via hideCollapseButton"
+            }),
+            /*#__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 WithoutCollapse = {
+    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(WithoutCollapseStory, {})
+};
+function GroupNodeMinimalWithStatus({ status, message }) {
+    return function(props) {
+        const tooltipContent = message || status;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNodeConfigContext_cjs_namespaceObject.GroupNodeConfigProvider, {
+            value: {
+                executionStatus: status,
+                executionMessage: message,
+                hideCollapseButton: true,
+                hideMoreOptions: true,
+                headerActions: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
+                    content: tooltipContent,
+                    placement: "top",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        style: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: 24,
+                            height: 24
+                        },
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
+                            status: status,
+                            size: 16
+                        })
+                    })
+                })
+            },
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNode_cjs_namespaceObject.GroupNode, {
+                ...props
+            })
+        });
+    };
+}
+function MinimalWithExecutionStatusStory() {
+    const CompletedNode = (0, external_react_namespaceObject.useMemo)(()=>GroupNodeMinimalWithStatus({
+            status: 'Completed'
+        }), []);
+    const FailedNode = (0, external_react_namespaceObject.useMemo)(()=>GroupNodeMinimalWithStatus({
+            status: 'Failed',
+            message: 'Timeout after 30s'
+        }), []);
+    const nodeTypesMap = (0, external_react_namespaceObject.useMemo)(()=>({
+            'group-completed': CompletedNode,
+            'group-failed': FailedNode,
+            [CHILD_NODE_TYPE]: external_BaseNode_index_cjs_namespaceObject.BaseNode
+        }), [
+        CompletedNode,
+        FailedNode
+    ]);
+    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
+            {
+                ...createGroupNode('group-completed', 'ETL Pipeline', 'account_tree', {
+                    x: 50,
+                    y: 100
+                }, {
+                    width: 500,
+                    height: 220
+                }),
+                type: 'group-completed'
+            },
+            createChildNode('n-c-1', 'Extract', {
+                x: 30,
+                y: 60
+            }, 'group-completed'),
+            createChildNode('n-c-2', 'Load', {
+                x: 200,
+                y: 60
+            }, 'group-completed'),
+            createChildNode('n-c-3', 'Transform', {
+                x: 370,
+                y: 60
+            }, 'group-completed'),
+            {
+                ...createGroupNode('group-failed', 'Notification Service', 'mail', {
+                    x: 620,
+                    y: 100
+                }, {
+                    width: 400,
+                    height: 220
+                }),
+                type: 'group-failed'
+            },
+            createChildNode('n-f-1', 'Template', {
+                x: 30,
+                y: 60
+            }, 'group-failed'),
+            createChildNode('n-f-2', 'Send', {
+                x: 200,
+                y: 60
+            }, 'group-failed')
+        ], []);
+    const initialEdges = (0, external_react_namespaceObject.useMemo)(()=>[
+            {
+                id: 'e-c-1-2',
+                source: 'n-c-1',
+                target: 'n-c-2',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-c-2-3',
+                source: 'n-c-2',
+                target: 'n-c-3',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-f-1-2',
+                source: 'n-f-1',
+                target: 'n-f-2',
+                type: 'smoothstep'
+            }
+        ], []);
+    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
+        initialNodes,
+        initialEdges
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+        ...canvasProps,
+        nodeTypes: nodeTypesMap,
+        mode: "design",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
+                title: "Minimal with Execution Status",
+                description: "Execution status borders and icons, no collapse button, no 3-dot menu"
+            }),
+            /*#__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 MinimalWithExecutionStatus = {
+    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MinimalWithExecutionStatusStory, {})
+};
+function GroupNodeMinimal(props) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNodeConfigContext_cjs_namespaceObject.GroupNodeConfigProvider, {
+        value: {
+            hideCollapseButton: true,
+            hideMoreOptions: true
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_GroupNode_cjs_namespaceObject.GroupNode, {
+            ...props
+        })
+    });
+}
+function MinimalStory() {
+    const nodeTypesMinimal = (0, external_react_namespaceObject.useMemo)(()=>({
+            group: GroupNodeMinimal,
+            [CHILD_NODE_TYPE]: external_BaseNode_index_cjs_namespaceObject.BaseNode
+        }), []);
+    const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
+            createGroupNode('group-1', 'Simple Group', 'folder', {
+                x: 50,
+                y: 100
+            }, {
+                width: 600,
+                height: 250
+            }),
+            createChildNode('node-1', 'Step A', {
+                x: 30,
+                y: 60
+            }, 'group-1'),
+            createChildNode('node-2', 'Step B', {
+                x: 200,
+                y: 60
+            }, 'group-1'),
+            createChildNode('node-3', 'Step C', {
+                x: 370,
+                y: 60
+            }, 'group-1'),
+            createGroupNode('group-2', 'No Icon Group', void 0, {
+                x: 750,
+                y: 100
+            }, {
+                width: 400,
+                height: 250
+            }),
+            createChildNode('node-4', 'Task 1', {
+                x: 30,
+                y: 60
+            }, 'group-2'),
+            createChildNode('node-5', 'Task 2', {
+                x: 200,
+                y: 60
+            }, 'group-2')
+        ], []);
+    const initialEdges = (0, external_react_namespaceObject.useMemo)(()=>[
+            {
+                id: 'e-1-2',
+                source: 'node-1',
+                target: 'node-2',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-2-3',
+                source: 'node-2',
+                target: 'node-3',
+                type: 'smoothstep'
+            },
+            {
+                id: 'e-4-5',
+                source: 'node-4',
+                target: 'node-5',
+                type: 'smoothstep'
+            }
+        ], []);
+    const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
+        initialNodes,
+        initialEdges
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
+        ...canvasProps,
+        nodeTypes: nodeTypesMinimal,
+        mode: "design",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
+                title: "Minimal",
+                description: "Group node with no collapse, no 3-dot menu, and no execution status — title only"
+            }),
+            /*#__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 Minimal = {
+    render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MinimalStory, {})
+};
 exports.Default = __webpack_exports__.Default;
 exports.EmptyGroup = __webpack_exports__.EmptyGroup;
+exports.Minimal = __webpack_exports__.Minimal;
+exports.MinimalWithExecutionStatus = __webpack_exports__.MinimalWithExecutionStatus;
+exports.WithExecutionStatus = __webpack_exports__.WithExecutionStatus;
+exports.WithHeaderActions = __webpack_exports__.WithHeaderActions;
+exports.WithoutCollapse = __webpack_exports__.WithoutCollapse;
 exports["default"] = __webpack_exports__["default"];
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "Default",
     "EmptyGroup",
+    "Minimal",
+    "MinimalWithExecutionStatus",
+    "WithExecutionStatus",
+    "WithHeaderActions",
+    "WithoutCollapse",
     "default"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {