@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/Flow.stories.js

@@ -1,725 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
-import { Handle, Panel, Position, useReactFlow } from "../xyflow/react.js";
-import { Download, Plus, StickyNote } from "lucide-react";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useCanvasEvent, useExportCanvas } from "../hooks/index.js";
-import { NodePositions, StoryInfoPanel, createNode, useCanvasStory, withCanvasProviders } from "../storybook-utils/index.js";
-import { applyPreviewToReactFlow, createPreviewNode } from "../utils/createPreviewNode.js";
-import { AddNodeManager, AddNodePanel } from "./AddNodePanel/index.js";
-import { BaseCanvas } from "./BaseCanvas/index.js";
-import { FloatingCanvasPanel } from "./FloatingCanvasPanel/index.js";
-import { StickyNoteNode } from "./StickyNoteNode/index.js";
-const meta = {
-    title: 'Flow',
-    parameters: {
-        layout: 'fullscreen'
-    },
-    decorators: [
-        withCanvasProviders()
-    ],
-    argTypes: {
-        useSmartHandles: {
-            control: 'boolean',
-            description: 'Enable SmartHandle for dynamic handle positioning based on connected node locations',
-            table: {
-                defaultValue: {
-                    summary: 'false'
-                }
-            }
-        }
-    },
-    args: {
-        useSmartHandles: false
-    }
-};
-const Flow_stories = meta;
-function createInitialNodes(useSmartHandles) {
-    return [
-        createNode({
-            id: 'trigger',
-            type: 'uipath.manual-trigger',
-            position: NodePositions.row2col1,
-            display: {
-                label: 'Manual trigger'
-            },
-            useSmartHandles
-        }),
-        createNode({
-            id: 'action-1',
-            type: 'uipath.blank-node',
-            position: NodePositions.row2col2,
-            display: {
-                label: 'Action',
-                subLabel: 'Process data'
-            },
-            useSmartHandles
-        })
-    ];
-}
-function createInitialEdges() {
-    return [
-        {
-            id: 'e-trigger-action-1',
-            source: 'trigger',
-            target: 'action-1',
-            sourceHandle: 'output',
-            targetHandle: 'input'
-        }
-    ];
-}
-const ToolbarContainer = styled.div`
-  display: flex;
-  align-items: center;
-  background: var(--uix-canvas-background);
-  border: 1px solid var(--uix-canvas-border-de-emp);
-  border-radius: 16px;
-  padding: 4px;
-  gap: 4px;
-  height: 50px;
-`;
-const ToolbarButton = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  border-radius: 16px;
-  transition: background-color 0.15s ease;
-  color: var(--uix-canvas-foreground);
-
-  &:hover {
-    background: var(--uix-canvas-background-hover);
-  }
-`;
-const ToolbarDivider = styled.div`
-  width: 1px;
-  height: 24px;
-  background: var(--uix-canvas-border-de-emp);
-`;
-const ExportOverlay = styled.div`
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  color: white;
-  gap: 12px;
-`;
-const ExportTitle = styled.div`
-  font-size: 18px;
-  font-weight: 500;
-`;
-const ExportMessage = styled.div`
-  font-size: 14px;
-  opacity: 0.8;
-  text-align: center;
-  max-width: 300px;
-`;
-const DELETE_KEY_CODES = [
-    'Backspace',
-    'Delete'
-];
-const additionalNodeTypes = {
-    stickyNote: StickyNoteNode
-};
-function DefaultStory({ useSmartHandles }) {
-    const initialNodes = useMemo(()=>createInitialNodes(useSmartHandles), [
-        useSmartHandles
-    ]);
-    const initialEdges = useMemo(()=>createInitialEdges(), []);
-    const [stickyNoteCounter, setStickyNoteCounter] = useState(0);
-    const [isAddPanelOpen, setIsAddPanelOpen] = useState(false);
-    const [addButtonRect, setAddButtonRect] = useState(null);
-    const addButtonRef = useRef(null);
-    const { isExporting, downloadAsImage } = useExportCanvas();
-    const { canvasProps, setNodes } = useCanvasStory({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes
-    });
-    const handleSmartHandlesToggle = useCallback(()=>{
-        setNodes((nodes)=>nodes.map((node)=>({
-                    ...node,
-                    data: {
-                        ...node.data,
-                        useSmartHandles
-                    }
-                })));
-    }, [
-        setNodes,
-        useSmartHandles
-    ]);
-    useEffect(()=>{
-        handleSmartHandlesToggle();
-    }, [
-        handleSmartHandlesToggle
-    ]);
-    const reactFlowInstance = useReactFlow();
-    const handleCloseAddPanel = useCallback(()=>{
-        setIsAddPanelOpen(false);
-    }, []);
-    const handlePaneClick = useCallback(()=>{
-        if (isAddPanelOpen) handleCloseAddPanel();
-    }, [
-        isAddPanelOpen,
-        handleCloseAddPanel
-    ]);
-    const handleOpenAddPanel = useCallback((e)=>{
-        e.stopPropagation();
-        if (addButtonRef.current) {
-            const rect = addButtonRef.current.getBoundingClientRect();
-            setAddButtonRect({
-                x: rect.left,
-                y: rect.top,
-                width: rect.width,
-                height: rect.height
-            });
-        }
-        setIsAddPanelOpen(true);
-    }, []);
-    const handleNodeSelect = useCallback((nodeItem)=>{
-        const viewportCenter = reactFlowInstance.screenToFlowPosition({
-            x: window.innerWidth / 2,
-            y: window.innerHeight / 2
-        });
-        const newNodeId = `${nodeItem.data?.type || 'node'}-${Date.now()}`;
-        const newNode = {
-            id: newNodeId,
-            type: nodeItem.data?.type,
-            position: {
-                x: viewportCenter.x - 75,
-                y: viewportCenter.y - 25
-            },
-            data: {
-                label: nodeItem.name,
-                subLabel: nodeItem.description,
-                useSmartHandles
-            },
-            selected: true
-        };
-        setNodes((nodes)=>[
-                ...nodes.map((n)=>({
-                        ...n,
-                        selected: false
-                    })),
-                newNode
-            ]);
-        setIsAddPanelOpen(false);
-    }, [
-        reactFlowInstance,
-        setNodes,
-        useSmartHandles
-    ]);
-    const handleAddStickyNote = useCallback((e)=>{
-        e.stopPropagation();
-        if (!reactFlowInstance) return;
-        const viewportCenter = reactFlowInstance.screenToFlowPosition({
-            x: window.innerWidth / 2,
-            y: window.innerHeight / 2
-        });
-        const newStickyNote = {
-            id: `sticky-note-${Date.now()}-${stickyNoteCounter}`,
-            type: 'stickyNote',
-            position: {
-                x: viewportCenter.x - 125,
-                y: viewportCenter.y - 75
-            },
-            data: {
-                color: 'blue',
-                content: '',
-                autoFocus: true
-            },
-            width: 304,
-            height: 288,
-            selected: true
-        };
-        setNodes((nodes)=>[
-                ...nodes.map((n)=>({
-                        ...n,
-                        selected: false
-                    })),
-                newStickyNote
-            ]);
-        setStickyNoteCounter((c)=>c + 1);
-    }, [
-        reactFlowInstance,
-        setNodes,
-        stickyNoteCounter
-    ]);
-    const handleExportToPng = useCallback((e)=>{
-        e.stopPropagation();
-        downloadAsImage('flow-export');
-    }, [
-        downloadAsImage
-    ]);
-    useCanvasEvent('handle:action', (event)=>{
-        if (!reactFlowInstance) return;
-        const { handleId, nodeId, position, handleType } = event;
-        if (handleId && nodeId) {
-            const sourceHandleType = 'input' === handleType ? 'target' : 'source';
-            const sourceNode = reactFlowInstance.getNode(nodeId);
-            const customData = sourceNode?.data?.useSmartHandles ? {
-                useSmartHandles: true
-            } : void 0;
-            const preview = createPreviewNode(nodeId, handleId, reactFlowInstance, void 0, customData, sourceHandleType, void 0, position, [
-                'stickyNote'
-            ]);
-            if (preview) applyPreviewToReactFlow(preview, reactFlowInstance);
-        }
-    });
-    return /*#__PURE__*/ jsxs(BaseCanvas, {
-        ...canvasProps,
-        deleteKeyCode: DELETE_KEY_CODES,
-        mode: "design",
-        selectionOnDrag: true,
-        onPaneClick: handlePaneClick,
-        children: [
-            /*#__PURE__*/ jsx(AddNodeManager, {
-                ignoredNodeTypes: [
-                    'stickyNote'
-                ]
-            }),
-            /*#__PURE__*/ jsx(Panel, {
-                position: "bottom-center",
-                children: /*#__PURE__*/ jsxs(ToolbarContainer, {
-                    className: "nodrag nopan nowheel",
-                    children: [
-                        /*#__PURE__*/ jsx(ToolbarButton, {
-                            type: "button",
-                            ref: addButtonRef,
-                            onClick: handleOpenAddPanel,
-                            title: "Add node",
-                            children: /*#__PURE__*/ jsx(Plus, {
-                                size: 16
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(ToolbarDivider, {}),
-                        /*#__PURE__*/ jsx(ToolbarButton, {
-                            type: "button",
-                            onClick: handleAddStickyNote,
-                            title: "Add note",
-                            children: /*#__PURE__*/ jsx(StickyNote, {
-                                size: 16
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(ToolbarDivider, {}),
-                        /*#__PURE__*/ jsx(ToolbarButton, {
-                            type: "button",
-                            onClick: handleExportToPng,
-                            disabled: isExporting,
-                            title: "Export to PNG",
-                            children: /*#__PURE__*/ jsx(Download, {
-                                size: 16
-                            })
-                        })
-                    ]
-                })
-            }),
-            addButtonRect && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
-                open: isAddPanelOpen,
-                anchorRect: addButtonRect,
-                useFixedPosition: true,
-                placement: "top",
-                offset: 10,
-                children: /*#__PURE__*/ jsx(AddNodePanel, {
-                    onNodeSelect: handleNodeSelect,
-                    onClose: handleCloseAddPanel
-                })
-            })
-        ]
-    });
-}
-const Default = {
-    render: (args)=>/*#__PURE__*/ jsx(DefaultStory, {
-            ...args
-        })
-};
-const NODE_SPACING_X = 250;
-const NODE_SPACING_Y = 150;
-function calculateGridDimensions(nodeCount) {
-    const cols = Math.ceil(Math.sqrt(nodeCount));
-    const rows = Math.ceil(nodeCount / cols);
-    return {
-        cols,
-        rows
-    };
-}
-function createPerformanceNodes(nodeCount, useSmartHandles) {
-    const nodes = [];
-    const { cols } = calculateGridDimensions(nodeCount);
-    for(let i = 0; i < nodeCount; i++){
-        const row = Math.floor(i / cols);
-        const col = i % cols;
-        nodes.push(createNode({
-            id: `node-${i}`,
-            type: 'uipath.blank-node',
-            position: {
-                x: col * NODE_SPACING_X,
-                y: row * NODE_SPACING_Y
-            },
-            display: {
-                label: `Node ${i + 1}`,
-                subLabel: `Row ${row + 1}, Col ${col + 1}`
-            },
-            useSmartHandles
-        }));
-    }
-    return nodes;
-}
-function createPerformanceEdges(nodeCount) {
-    const edges = [];
-    const { cols, rows } = calculateGridDimensions(nodeCount);
-    for(let i = 0; i < nodeCount; i++){
-        const row = Math.floor(i / cols);
-        const col = i % cols;
-        const rightIndex = i + 1;
-        if (col < cols - 1 && rightIndex < nodeCount) edges.push({
-            id: `e-${i}-right`,
-            source: `node-${i}`,
-            target: `node-${rightIndex}`,
-            sourceHandle: 'output',
-            targetHandle: 'input'
-        });
-        const downIndex = i + cols;
-        if (row < rows - 1 && downIndex < nodeCount) edges.push({
-            id: `e-${i}-down`,
-            source: `node-${i}`,
-            target: `node-${downIndex}`,
-            sourceHandle: 'output',
-            targetHandle: 'input'
-        });
-    }
-    return edges;
-}
-const DEFAULT_NODE_COUNT = 500;
-const MIN_NODE_COUNT = 1;
-const MAX_NODE_COUNT = 1000;
-function PerformanceStory({ useSmartHandles }) {
-    const [nodeCount, setNodeCount] = useState(DEFAULT_NODE_COUNT);
-    const initialNodes = useMemo(()=>createPerformanceNodes(DEFAULT_NODE_COUNT, useSmartHandles), [
-        useSmartHandles
-    ]);
-    const initialEdges = useMemo(()=>createPerformanceEdges(DEFAULT_NODE_COUNT), []);
-    const { isExporting, downloadAsImage } = useExportCanvas();
-    const { canvasProps, setNodes, setEdges } = useCanvasStory({
-        initialNodes,
-        initialEdges
-    });
-    const handleSmartHandlesToggle = useCallback(()=>{
-        setNodes((nodes)=>nodes.map((node)=>({
-                    ...node,
-                    data: {
-                        ...node.data,
-                        useSmartHandles
-                    }
-                })));
-    }, [
-        setNodes,
-        useSmartHandles
-    ]);
-    useEffect(()=>{
-        handleSmartHandlesToggle();
-    }, [
-        handleSmartHandlesToggle
-    ]);
-    const handleNodeCountChange = useCallback((e)=>{
-        const newCount = parseInt(e.target.value, 10);
-        setNodeCount(newCount);
-        setNodes(createPerformanceNodes(newCount, useSmartHandles));
-        setEdges(createPerformanceEdges(newCount));
-    }, [
-        setNodes,
-        setEdges,
-        useSmartHandles
-    ]);
-    const handleExportToPng = useCallback((e)=>{
-        e.stopPropagation();
-        downloadAsImage('performance-flow-export');
-    }, [
-        downloadAsImage
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            isExporting && /*#__PURE__*/ jsxs(ExportOverlay, {
-                role: "status",
-                "aria-live": "polite",
-                children: [
-                    /*#__PURE__*/ jsx(ExportTitle, {
-                        children: "Exporting Canvas"
-                    }),
-                    /*#__PURE__*/ jsxs(ExportMessage, {
-                        children: [
-                            "Processing ",
-                            nodeCount,
-                            " nodes. The screen may freeze briefly - this is normal."
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(BaseCanvas, {
-                ...canvasProps,
-                deleteKeyCode: DELETE_KEY_CODES,
-                mode: "design",
-                selectionOnDrag: true,
-                children: [
-                    /*#__PURE__*/ jsx(StoryInfoPanel, {
-                        title: "Performance Test",
-                        description: "Adjust the number of nodes to test canvas performance",
-                        children: /*#__PURE__*/ jsxs("div", {
-                            className: "nodrag nopan nowheel",
-                            style: {
-                                marginTop: 12
-                            },
-                            children: [
-                                /*#__PURE__*/ jsxs("div", {
-                                    style: {
-                                        display: 'flex',
-                                        justifyContent: 'space-between',
-                                        alignItems: 'center',
-                                        marginBottom: 8
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ jsx("span", {
-                                            style: {
-                                                fontSize: 12
-                                            },
-                                            children: "Node Count"
-                                        }),
-                                        /*#__PURE__*/ jsx("span", {
-                                            style: {
-                                                fontWeight: 600,
-                                                fontSize: 14
-                                            },
-                                            children: nodeCount
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsx("input", {
-                                    type: "range",
-                                    min: MIN_NODE_COUNT,
-                                    max: MAX_NODE_COUNT,
-                                    value: nodeCount,
-                                    onChange: handleNodeCountChange,
-                                    style: {
-                                        width: '100%',
-                                        cursor: 'pointer'
-                                    }
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Panel, {
-                        position: "bottom-center",
-                        children: /*#__PURE__*/ jsx(ToolbarContainer, {
-                            className: "nodrag nopan nowheel",
-                            children: /*#__PURE__*/ jsx(ToolbarButton, {
-                                type: "button",
-                                onClick: handleExportToPng,
-                                disabled: isExporting,
-                                title: "Export to PNG",
-                                children: /*#__PURE__*/ jsx(Download, {
-                                    size: 16
-                                })
-                            })
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-}
-const Performance = {
-    render: (args)=>/*#__PURE__*/ jsx(PerformanceStory, {
-            ...args
-        }),
-    parameters: {
-        docs: {
-            description: {
-                story: 'Performance test with adjustable node count (1-1000). Nodes are arranged in a grid and connected horizontally and vertically.'
-            }
-        }
-    }
-};
-const SimpleNodeComponent = ({ data, selected })=>/*#__PURE__*/ jsxs("div", {
-        style: {
-            width: 96,
-            height: 96,
-            background: selected ? '#e3f2fd' : '#fff',
-            border: `2px solid ${selected ? '#2196f3' : '#ddd'}`,
-            borderRadius: 16,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: 11,
-            fontFamily: 'sans-serif',
-            boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
-        },
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                style: {
-                    fontWeight: 600,
-                    textAlign: 'center',
-                    padding: '0 4px'
-                },
-                children: data.label
-            }),
-            data.subLabel && /*#__PURE__*/ jsx("div", {
-                style: {
-                    color: '#666',
-                    fontSize: 9,
-                    textAlign: 'center'
-                },
-                children: data.subLabel
-            }),
-            /*#__PURE__*/ jsx(Handle, {
-                type: "target",
-                position: Position.Left,
-                style: {
-                    background: '#555'
-                }
-            }),
-            /*#__PURE__*/ jsx(Handle, {
-                type: "source",
-                position: Position.Right,
-                style: {
-                    background: '#555'
-                }
-            })
-        ]
-    });
-const SimpleNode = /*#__PURE__*/ memo(SimpleNodeComponent);
-const simpleNodeTypes = {
-    simpleNode: SimpleNode
-};
-function createSimpleNodes(nodeCount) {
-    const nodes = [];
-    const { cols } = calculateGridDimensions(nodeCount);
-    for(let i = 0; i < nodeCount; i++){
-        const row = Math.floor(i / cols);
-        const col = i % cols;
-        nodes.push({
-            id: `node-${i}`,
-            type: 'simpleNode',
-            position: {
-                x: col * NODE_SPACING_X,
-                y: row * NODE_SPACING_Y
-            },
-            data: {
-                label: `Node ${i + 1}`,
-                subLabel: `R${row + 1}, C${col + 1}`
-            }
-        });
-    }
-    return nodes;
-}
-function createSimpleEdges(nodeCount) {
-    const edges = [];
-    const { cols, rows } = calculateGridDimensions(nodeCount);
-    for(let i = 0; i < nodeCount; i++){
-        const row = Math.floor(i / cols);
-        const col = i % cols;
-        const rightIndex = i + 1;
-        if (col < cols - 1 && rightIndex < nodeCount) edges.push({
-            id: `e-${i}-right`,
-            source: `node-${i}`,
-            target: `node-${rightIndex}`
-        });
-        const downIndex = i + cols;
-        if (row < rows - 1 && downIndex < nodeCount) edges.push({
-            id: `e-${i}-down`,
-            source: `node-${i}`,
-            target: `node-${downIndex}`
-        });
-    }
-    return edges;
-}
-function PerformanceBaselineStory() {
-    const [nodeCount, setNodeCount] = useState(DEFAULT_NODE_COUNT);
-    const initialNodes = useMemo(()=>createSimpleNodes(DEFAULT_NODE_COUNT), []);
-    const initialEdges = useMemo(()=>createSimpleEdges(DEFAULT_NODE_COUNT), []);
-    const { canvasProps, setNodes, setEdges } = useCanvasStory({
-        initialNodes,
-        initialEdges,
-        additionalNodeTypes: simpleNodeTypes
-    });
-    const handleNodeCountChange = useCallback((e)=>{
-        const newCount = parseInt(e.target.value, 10);
-        setNodeCount(newCount);
-        setNodes(createSimpleNodes(newCount));
-        setEdges(createSimpleEdges(newCount));
-    }, [
-        setNodes,
-        setEdges
-    ]);
-    return /*#__PURE__*/ jsx(BaseCanvas, {
-        ...canvasProps,
-        deleteKeyCode: DELETE_KEY_CODES,
-        mode: "design",
-        selectionOnDrag: true,
-        children: /*#__PURE__*/ jsx(StoryInfoPanel, {
-            title: "Performance Baseline",
-            description: "Simplified nodes for performance comparison. No hooks, no context, minimal rendering.",
-            children: /*#__PURE__*/ jsxs("div", {
-                className: "nodrag nopan nowheel",
-                style: {
-                    marginTop: 12
-                },
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        style: {
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            marginBottom: 8
-                        },
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                style: {
-                                    fontSize: 12
-                                },
-                                children: "Node Count"
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                style: {
-                                    fontWeight: 600,
-                                    fontSize: 14
-                                },
-                                children: nodeCount
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx("input", {
-                        type: "range",
-                        min: MIN_NODE_COUNT,
-                        max: MAX_NODE_COUNT,
-                        value: nodeCount,
-                        onChange: handleNodeCountChange,
-                        style: {
-                            width: '100%',
-                            cursor: 'pointer'
-                        }
-                    })
-                ]
-            })
-        })
-    });
-}
-const PerformanceBaseline = {
-    render: ()=>/*#__PURE__*/ jsx(PerformanceBaselineStory, {}),
-    parameters: {
-        docs: {
-            description: {
-                story: 'Performance baseline with simplified nodes. Compare panning performance with the regular Performance story to measure BaseNode overhead.'
-            }
-        }
-    }
-};
-export { Default, Performance, PerformanceBaseline, Flow_stories as default };