@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/ButtonHandle/SmartHandle.stories.js

@@ -1,568 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FontVariantToken } from "@uipath/apollo-core";
-import { Column } from "../../layouts/index.js";
-import { Panel, Position } from "../../xyflow/react.js";
-import { ApTypography } from "../../../material/index.js";
-import { ApIcon } from "../../../material/components/index.js";
-import { useCallback, useMemo } from "react";
-import { StoryInfoPanel, useCanvasStory, withCanvasProviders } from "../../storybook-utils/index.js";
-import { DefaultCanvasTranslations } from "../../types.js";
-import { BaseCanvas } from "../BaseCanvas/BaseCanvas.js";
-import { CanvasPositionControls } from "../CanvasPositionControls.js";
-import { SequenceEdge } from "../Edges/SequenceEdge.js";
-import { SmartHandle, SmartHandleProvider, SmartSourceHandle, SmartTargetHandle } from "./SmartHandle.js";
-const meta = {
-    title: 'Canvas/SmartHandle',
-    component: SmartHandle,
-    parameters: {
-        layout: 'fullscreen'
-    },
-    decorators: [
-        withCanvasProviders()
-    ]
-};
-const SmartHandle_stories = meta;
-function SmartNode({ data, selected }) {
-    return /*#__PURE__*/ jsxs("div", {
-        style: {
-            width: 160,
-            height: 60,
-            borderRadius: 8,
-            backgroundColor: 'var(--uix-canvas-background)',
-            border: selected ? '2px solid var(--uix-canvas-selection-indicator)' : '1px solid var(--uix-canvas-border)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative'
-        },
-        children: [
-            /*#__PURE__*/ jsx(ApTypography, {
-                variant: FontVariantToken.fontSizeSBold,
-                color: "var(--uix-canvas-foreground)",
-                children: data.label
-            }),
-            /*#__PURE__*/ jsx(SmartTargetHandle, {
-                id: "input"
-            }),
-            /*#__PURE__*/ jsx(SmartSourceHandle, {
-                id: "output"
-            })
-        ]
-    });
-}
-const HUB_NODE_SIZE = 100;
-function HubNode({ data, selected }) {
-    return /*#__PURE__*/ jsx(SmartHandleProvider, {
-        nodeWidth: HUB_NODE_SIZE,
-        nodeHeight: HUB_NODE_SIZE,
-        children: /*#__PURE__*/ jsxs("div", {
-            style: {
-                width: HUB_NODE_SIZE,
-                height: HUB_NODE_SIZE,
-                borderRadius: '50%',
-                backgroundColor: 'var(--uix-canvas-background)',
-                border: selected ? '2px solid var(--uix-canvas-selection-indicator)' : '2px solid var(--uix-canvas-border)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                position: 'relative'
-            },
-            children: [
-                /*#__PURE__*/ jsxs(Column, {
-                    align: "center",
-                    gap: 4,
-                    children: [
-                        /*#__PURE__*/ jsx(ApIcon, {
-                            name: "hub",
-                            size: "24px",
-                            color: "var(--uix-canvas-foreground-de-emp)"
-                        }),
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeXsBold,
-                            color: "var(--uix-canvas-foreground)",
-                            children: data.label
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "target",
-                    id: "in-1",
-                    defaultPosition: Position.Left,
-                    handleType: "input",
-                    nodeWidth: HUB_NODE_SIZE,
-                    nodeHeight: HUB_NODE_SIZE
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "target",
-                    id: "in-2",
-                    defaultPosition: Position.Left,
-                    handleType: "input",
-                    nodeWidth: HUB_NODE_SIZE,
-                    nodeHeight: HUB_NODE_SIZE
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "target",
-                    id: "in-3",
-                    defaultPosition: Position.Left,
-                    handleType: "input",
-                    nodeWidth: HUB_NODE_SIZE,
-                    nodeHeight: HUB_NODE_SIZE
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "source",
-                    id: "out-1",
-                    defaultPosition: Position.Right,
-                    handleType: "output",
-                    nodeWidth: HUB_NODE_SIZE,
-                    nodeHeight: HUB_NODE_SIZE
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "source",
-                    id: "out-2",
-                    defaultPosition: Position.Right,
-                    handleType: "output",
-                    nodeWidth: HUB_NODE_SIZE,
-                    nodeHeight: HUB_NODE_SIZE
-                })
-            ]
-        })
-    });
-}
-const edgeTypes = {
-    sequence: SequenceEdge
-};
-function DefaultStory() {
-    const nodeTypes = useMemo(()=>({
-            smartNode: SmartNode,
-            hubNode: HubNode
-        }), []);
-    const initialNodes = [
-        {
-            id: 'node-a',
-            type: 'smartNode',
-            position: {
-                x: 100,
-                y: 200
-            },
-            data: {
-                label: 'Node A'
-            }
-        },
-        {
-            id: 'node-b',
-            type: 'smartNode',
-            position: {
-                x: 400,
-                y: 200
-            },
-            data: {
-                label: 'Node B'
-            }
-        },
-        {
-            id: 'node-c',
-            type: 'smartNode',
-            position: {
-                x: 250,
-                y: 50
-            },
-            data: {
-                label: 'Node C'
-            }
-        },
-        {
-            id: 'node-d',
-            type: 'smartNode',
-            position: {
-                x: 250,
-                y: 350
-            },
-            data: {
-                label: 'Node D'
-            }
-        }
-    ];
-    const initialEdges = [
-        {
-            id: 'e1',
-            type: 'sequence',
-            source: 'node-a',
-            sourceHandle: 'output',
-            target: 'node-b',
-            targetHandle: 'input'
-        },
-        {
-            id: 'e2',
-            type: 'sequence',
-            source: 'node-c',
-            sourceHandle: 'output',
-            target: 'node-d',
-            targetHandle: 'input'
-        }
-    ];
-    const { canvasProps, setEdges } = useCanvasStory({
-        initialNodes,
-        initialEdges
-    });
-    const onEdgesChange = useCallback((changes)=>{
-        canvasProps.onEdgesChange?.(changes);
-    }, [
-        canvasProps
-    ]);
-    const onConnect = useCallback((connection)=>{
-        const newEdge = {
-            id: `e-${Date.now()}`,
-            type: 'sequence',
-            source: connection.source,
-            sourceHandle: connection.sourceHandle,
-            target: connection.target,
-            targetHandle: connection.targetHandle
-        };
-        setEdges((edges)=>[
-                ...edges,
-                newEdge
-            ]);
-    }, [
-        setEdges
-    ]);
-    return /*#__PURE__*/ jsxs(BaseCanvas, {
-        ...canvasProps,
-        nodeTypes: nodeTypes,
-        edgeTypes: edgeTypes,
-        onEdgesChange: onEdgesChange,
-        onConnect: onConnect,
-        deleteKeyCode: "Backspace",
-        mode: "design",
-        children: [
-            /*#__PURE__*/ jsx(StoryInfoPanel, {
-                title: "SmartHandle",
-                collapsible: true,
-                defaultCollapsed: false,
-                children: /*#__PURE__*/ jsxs(Column, {
-                    gap: 8,
-                    style: {
-                        marginTop: 8
-                    },
-                    children: [
-                        /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            color: "var(--uix-canvas-foreground-de-emp)",
-                            children: [
-                                "• ",
-                                /*#__PURE__*/ jsx("strong", {
-                                    children: "Drag nodes"
-                                }),
-                                " to see handles reposition"
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            color: "var(--uix-canvas-foreground-de-emp)",
-                            children: [
-                                "• ",
-                                /*#__PURE__*/ jsx("strong", {
-                                    children: "Select edge + Backspace"
-                                }),
-                                " to delete"
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            color: "var(--uix-canvas-foreground-de-emp)",
-                            children: [
-                                "• ",
-                                /*#__PURE__*/ jsx("strong", {
-                                    children: "Drag from handle"
-                                }),
-                                " to create new connection"
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            color: "var(--uix-canvas-foreground-de-emp)",
-                            children: "• Handles return to default position when disconnected"
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsx(Panel, {
-                position: "bottom-right",
-                children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                    translations: DefaultCanvasTranslations
-                })
-            })
-        ]
-    });
-}
-const MULTI_NODE_WIDTH = 200;
-const MULTI_NODE_HEIGHT = 80;
-function MultiHandleNode({ data, selected }) {
-    return /*#__PURE__*/ jsx(SmartHandleProvider, {
-        children: /*#__PURE__*/ jsxs("div", {
-            style: {
-                width: MULTI_NODE_WIDTH,
-                height: MULTI_NODE_HEIGHT,
-                borderRadius: 8,
-                backgroundColor: 'var(--uix-canvas-background)',
-                border: selected ? '2px solid var(--uix-canvas-selection-indicator)' : '1px solid var(--uix-canvas-border)',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                position: 'relative'
-            },
-            children: [
-                /*#__PURE__*/ jsx(ApTypography, {
-                    variant: FontVariantToken.fontSizeSBold,
-                    color: "var(--uix-canvas-foreground)",
-                    children: data.label
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "target",
-                    id: "in-1",
-                    defaultPosition: Position.Left,
-                    handleType: "input",
-                    nodeWidth: MULTI_NODE_WIDTH,
-                    nodeHeight: MULTI_NODE_HEIGHT
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "target",
-                    id: "in-2",
-                    defaultPosition: Position.Left,
-                    handleType: "input",
-                    nodeWidth: MULTI_NODE_WIDTH,
-                    nodeHeight: MULTI_NODE_HEIGHT
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "target",
-                    id: "in-3",
-                    defaultPosition: Position.Left,
-                    handleType: "input",
-                    nodeWidth: MULTI_NODE_WIDTH,
-                    nodeHeight: MULTI_NODE_HEIGHT
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "source",
-                    id: "out-1",
-                    defaultPosition: Position.Right,
-                    handleType: "output",
-                    nodeWidth: MULTI_NODE_WIDTH,
-                    nodeHeight: MULTI_NODE_HEIGHT
-                }),
-                /*#__PURE__*/ jsx(SmartHandle, {
-                    type: "source",
-                    id: "out-2",
-                    defaultPosition: Position.Right,
-                    handleType: "output",
-                    nodeWidth: MULTI_NODE_WIDTH,
-                    nodeHeight: MULTI_NODE_HEIGHT
-                })
-            ]
-        })
-    });
-}
-function MultiHandleStory() {
-    const nodeTypes = useMemo(()=>({
-            multiHandleNode: MultiHandleNode
-        }), []);
-    const initialNodes = [
-        {
-            id: 'center',
-            type: 'multiHandleNode',
-            position: {
-                x: 300,
-                y: 200
-            },
-            data: {
-                label: 'Center Node'
-            }
-        },
-        {
-            id: 'input-1',
-            type: 'multiHandleNode',
-            position: {
-                x: 50,
-                y: 50
-            },
-            data: {
-                label: 'Input 1'
-            }
-        },
-        {
-            id: 'input-2',
-            type: 'multiHandleNode',
-            position: {
-                x: 50,
-                y: 200
-            },
-            data: {
-                label: 'Input 2'
-            }
-        },
-        {
-            id: 'input-3',
-            type: 'multiHandleNode',
-            position: {
-                x: 50,
-                y: 350
-            },
-            data: {
-                label: 'Input 3'
-            }
-        },
-        {
-            id: 'output-1',
-            type: 'multiHandleNode',
-            position: {
-                x: 550,
-                y: 100
-            },
-            data: {
-                label: 'Output 1'
-            }
-        },
-        {
-            id: 'output-2',
-            type: 'multiHandleNode',
-            position: {
-                x: 550,
-                y: 300
-            },
-            data: {
-                label: 'Output 2'
-            }
-        }
-    ];
-    const initialEdges = [
-        {
-            id: 'e1',
-            type: 'sequence',
-            source: 'input-1',
-            sourceHandle: 'out-1',
-            target: 'center',
-            targetHandle: 'in-1'
-        },
-        {
-            id: 'e2',
-            type: 'sequence',
-            source: 'input-2',
-            sourceHandle: 'out-1',
-            target: 'center',
-            targetHandle: 'in-2'
-        },
-        {
-            id: 'e3',
-            type: 'sequence',
-            source: 'input-3',
-            sourceHandle: 'out-1',
-            target: 'center',
-            targetHandle: 'in-3'
-        },
-        {
-            id: 'e4',
-            type: 'sequence',
-            source: 'center',
-            sourceHandle: 'out-1',
-            target: 'output-1',
-            targetHandle: 'in-1'
-        },
-        {
-            id: 'e5',
-            type: 'sequence',
-            source: 'center',
-            sourceHandle: 'out-2',
-            target: 'output-2',
-            targetHandle: 'in-1'
-        }
-    ];
-    const { canvasProps, setEdges } = useCanvasStory({
-        initialNodes,
-        initialEdges
-    });
-    const onEdgesChange = useCallback((changes)=>{
-        canvasProps.onEdgesChange?.(changes);
-    }, [
-        canvasProps
-    ]);
-    const onConnect = useCallback((connection)=>{
-        const newEdge = {
-            id: `e-${Date.now()}`,
-            type: 'sequence',
-            source: connection.source,
-            sourceHandle: connection.sourceHandle,
-            target: connection.target,
-            targetHandle: connection.targetHandle
-        };
-        setEdges((edges)=>[
-                ...edges,
-                newEdge
-            ]);
-    }, [
-        setEdges
-    ]);
-    return /*#__PURE__*/ jsxs(BaseCanvas, {
-        ...canvasProps,
-        nodeTypes: nodeTypes,
-        edgeTypes: edgeTypes,
-        onEdgesChange: onEdgesChange,
-        onConnect: onConnect,
-        deleteKeyCode: "Backspace",
-        mode: "design",
-        children: [
-            /*#__PURE__*/ jsx(StoryInfoPanel, {
-                title: "Multi-Handle SmartHandle",
-                collapsible: true,
-                defaultCollapsed: false,
-                children: /*#__PURE__*/ jsxs(Column, {
-                    gap: 8,
-                    style: {
-                        marginTop: 8
-                    },
-                    children: [
-                        /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            color: "var(--uix-canvas-foreground-de-emp)",
-                            children: [
-                                "• Multiple handles on same side ",
-                                /*#__PURE__*/ jsx("strong", {
-                                    children: "auto-space"
-                                }),
-                                " with grid alignment"
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxs(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            color: "var(--uix-canvas-foreground-de-emp)",
-                            children: [
-                                "• ",
-                                /*#__PURE__*/ jsx("strong", {
-                                    children: "Drag nodes"
-                                }),
-                                " to see handles reposition dynamically"
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeS,
-                            color: "var(--uix-canvas-foreground-de-emp)",
-                            children: "• Center node has 3 inputs + 2 outputs"
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsx(Panel, {
-                position: "bottom-right",
-                children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                    translations: DefaultCanvasTranslations
-                })
-            })
-        ]
-    });
-}
-const Default = {
-    name: 'Default',
-    render: ()=>/*#__PURE__*/ jsx(DefaultStory, {})
-};
-const MultiHandle = {
-    name: 'Multi-Handle Grid Spacing',
-    render: ()=>/*#__PURE__*/ jsx(MultiHandleStory, {})
-};
-export { Default, MultiHandle, SmartHandle_stories as default };