@uipath/apollo-react 4.0.0 → 4.1.1

package/dist/canvas/components/Edges/XyFlowEdgeComparison.stories.js

@@ -1,756 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox, FormControl, FormControlLabel, InputLabel, MenuItem, Select } from "@mui/material";
-import { FontVariantToken } from "@uipath/apollo-core";
-import { Column } from "../../layouts/index.js";
-import { MarkerType, Panel, Position, useEdgesState } from "../../xyflow/react.js";
-import { ApTypography } from "../../../material/index.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { StoryInfoPanel, useCanvasStory, withCanvasProviders } from "../../storybook-utils/index.js";
-import { DefaultCanvasTranslations } from "../../types.js";
-import { BaseCanvas } from "../BaseCanvas/index.js";
-import { CanvasPositionControls } from "../CanvasPositionControls.js";
-const meta = {
-    title: 'Canvas/Edges',
-    parameters: {
-        layout: 'fullscreen'
-    },
-    decorators: [
-        withCanvasProviders()
-    ]
-};
-const XyFlowEdgeComparison_stories = meta;
-const GRID = {
-    startX: 400,
-    startY: 100,
-    nodeWidth: 350,
-    nodeHeight: 200,
-    columnGap: 500
-};
-function createNodePair(config) {
-    const { id, label, row, column, yOffset = 0, extraHandles = false } = config;
-    const baseX = GRID.startX + column * GRID.columnGap;
-    const baseY = GRID.startY + row * GRID.nodeHeight;
-    const sourceHandles = extraHandles ? [
-        {
-            position: Position.Right,
-            handles: [
-                {
-                    id: 'out1',
-                    type: 'source',
-                    handleType: 'output'
-                },
-                {
-                    id: 'out2',
-                    type: 'source',
-                    handleType: 'output'
-                }
-            ]
-        },
-        {
-            position: Position.Bottom,
-            handles: [
-                {
-                    id: 'out3',
-                    type: 'source',
-                    handleType: 'output'
-                }
-            ]
-        }
-    ] : [
-        {
-            position: Position.Right,
-            handles: [
-                {
-                    id: 'out',
-                    type: 'source',
-                    handleType: 'output'
-                }
-            ]
-        }
-    ];
-    const targetHandles = extraHandles ? [
-        {
-            position: Position.Left,
-            handles: [
-                {
-                    id: 'in1',
-                    type: 'target',
-                    handleType: 'input'
-                },
-                {
-                    id: 'in2',
-                    type: 'target',
-                    handleType: 'input'
-                }
-            ]
-        },
-        {
-            position: Position.Bottom,
-            handles: [
-                {
-                    id: 'in3',
-                    type: 'target',
-                    handleType: 'input'
-                }
-            ]
-        }
-    ] : [
-        {
-            position: Position.Left,
-            handles: [
-                {
-                    id: 'in',
-                    type: 'target',
-                    handleType: 'input'
-                }
-            ]
-        }
-    ];
-    return [
-        {
-            id: `${id}-1`,
-            type: 'uipath.blank-node',
-            position: {
-                x: baseX,
-                y: baseY
-            },
-            data: {
-                display: {
-                    label,
-                    icon: 'circle'
-                },
-                handleConfigurations: sourceHandles
-            }
-        },
-        {
-            id: `${id}-2`,
-            type: 'uipath.blank-node',
-            position: {
-                x: baseX + GRID.nodeWidth,
-                y: baseY + yOffset
-            },
-            data: {
-                display: {
-                    label,
-                    icon: 'square'
-                },
-                handleConfigurations: targetHandles
-            }
-        }
-    ];
-}
-function AllEdgeTypesStory() {
-    const initialNodes = useMemo(()=>{
-        const yOffsets = [
-            30,
-            0,
-            50,
-            45,
-            45
-        ];
-        return [
-            ...createNodePair({
-                id: 'default',
-                label: 'Default',
-                row: 0,
-                column: 0,
-                yOffset: yOffsets[0]
-            }),
-            ...createNodePair({
-                id: 'straight',
-                label: 'Straight',
-                row: 1,
-                column: 0,
-                yOffset: yOffsets[1]
-            }),
-            ...createNodePair({
-                id: 'step',
-                label: 'Step',
-                row: 2,
-                column: 0,
-                yOffset: yOffsets[2]
-            }),
-            ...createNodePair({
-                id: 'smoothstep',
-                label: 'Smooth Step',
-                row: 3,
-                column: 0,
-                yOffset: yOffsets[3]
-            }),
-            ...createNodePair({
-                id: 'bezier',
-                label: 'Bezier',
-                row: 4,
-                column: 0,
-                yOffset: yOffsets[4]
-            }),
-            ...createNodePair({
-                id: 'animated',
-                label: 'Animated',
-                row: 0,
-                column: 1,
-                yOffset: -yOffsets[0]
-            }),
-            ...createNodePair({
-                id: 'styled',
-                label: 'Styled',
-                row: 1,
-                column: 1,
-                yOffset: -yOffsets[1]
-            }),
-            ...createNodePair({
-                id: 'labeled',
-                label: 'Labeled',
-                row: 2,
-                column: 1,
-                yOffset: -yOffsets[2]
-            }),
-            ...createNodePair({
-                id: 'marker',
-                label: 'Markers',
-                row: 3,
-                column: 1,
-                yOffset: -yOffsets[3]
-            }),
-            ...createNodePair({
-                id: 'complex',
-                label: 'Complex',
-                row: 4,
-                column: 1,
-                extraHandles: true
-            })
-        ];
-    }, []);
-    const initialEdges = useMemo(()=>[
-            {
-                id: 'e-default',
-                source: 'default-1',
-                target: 'default-2',
-                sourceHandle: 'out',
-                targetHandle: 'in',
-                label: 'default (bezier)'
-            },
-            {
-                id: 'e-straight',
-                source: 'straight-1',
-                target: 'straight-2',
-                sourceHandle: 'out',
-                targetHandle: 'in',
-                type: 'straight',
-                label: 'straight'
-            },
-            {
-                id: 'e-step',
-                source: 'step-1',
-                target: 'step-2',
-                sourceHandle: 'out',
-                targetHandle: 'in',
-                type: 'step',
-                label: 'step'
-            },
-            {
-                id: 'e-smoothstep',
-                source: 'smoothstep-1',
-                target: 'smoothstep-2',
-                sourceHandle: 'out',
-                targetHandle: 'in',
-                type: 'smoothstep',
-                label: 'smoothstep'
-            },
-            {
-                id: 'e-bezier',
-                source: 'bezier-1',
-                target: 'bezier-2',
-                sourceHandle: 'out',
-                targetHandle: 'in',
-                type: 'bezier',
-                label: 'bezier'
-            },
-            {
-                id: 'e-animated',
-                source: 'animated-1',
-                target: 'animated-2',
-                sourceHandle: 'out',
-                targetHandle: 'in',
-                animated: true,
-                label: 'animated',
-                style: {
-                    stroke: '#f6ab6c',
-                    strokeWidth: 2
-                }
-            },
-            {
-                id: 'e-styled',
-                source: 'styled-1',
-                target: 'styled-2',
-                sourceHandle: 'out',
-                targetHandle: 'in',
-                style: {
-                    stroke: '#ff0072',
-                    strokeWidth: 3,
-                    strokeDasharray: '5 5'
-                },
-                label: 'styled (dashed)',
-                labelStyle: {
-                    fill: '#ff0072',
-                    fontWeight: 700
-                },
-                labelBgStyle: {
-                    fill: '#ffebe6'
-                }
-            },
-            {
-                id: 'e-labeled',
-                source: 'labeled-1',
-                target: 'labeled-2',
-                sourceHandle: 'out',
-                targetHandle: 'in',
-                type: 'smoothstep',
-                label: 'Edge Label',
-                labelStyle: {
-                    fill: '#2563eb',
-                    fontSize: 14,
-                    fontWeight: 600
-                },
-                labelBgStyle: {
-                    fill: '#dbeafe',
-                    fillOpacity: 0.8
-                },
-                labelShowBg: true,
-                labelBgPadding: [
-                    8,
-                    4
-                ],
-                labelBgBorderRadius: 4
-            },
-            {
-                id: 'e-marker',
-                source: 'marker-1',
-                target: 'marker-2',
-                sourceHandle: 'out',
-                targetHandle: 'in',
-                type: 'smoothstep',
-                markerEnd: {
-                    type: MarkerType.ArrowClosed,
-                    color: '#22c55e'
-                },
-                markerStart: {
-                    type: MarkerType.Arrow,
-                    color: '#22c55e'
-                },
-                style: {
-                    stroke: '#22c55e',
-                    strokeWidth: 2
-                },
-                label: 'with arrows'
-            },
-            {
-                id: 'e-complex-1',
-                source: 'complex-1',
-                target: 'complex-2',
-                sourceHandle: 'out1',
-                targetHandle: 'in1',
-                type: 'bezier',
-                style: {
-                    stroke: '#8b5cf6'
-                },
-                label: 'path 1'
-            },
-            {
-                id: 'e-complex-2',
-                source: 'complex-1',
-                target: 'complex-2',
-                sourceHandle: 'out2',
-                targetHandle: 'in2',
-                type: 'step',
-                style: {
-                    stroke: '#ec4899'
-                },
-                label: 'path 2'
-            },
-            {
-                id: 'e-complex-3',
-                source: 'complex-1',
-                target: 'complex-2',
-                sourceHandle: 'out3',
-                targetHandle: 'in3',
-                type: 'smoothstep',
-                style: {
-                    stroke: '#06b6d4'
-                },
-                label: 'path 3'
-            }
-        ], []);
-    const { canvasProps } = useCanvasStory({
-        initialNodes,
-        initialEdges
-    });
-    return /*#__PURE__*/ jsxs(BaseCanvas, {
-        ...canvasProps,
-        mode: "design",
-        defaultEdgeOptions: {
-            style: {
-                strokeWidth: 2
-            }
-        },
-        children: [
-            /*#__PURE__*/ jsx(StoryInfoPanel, {
-                title: "React Flow Edge Types",
-                children: /*#__PURE__*/ jsxs(Column, {
-                    gap: 8,
-                    style: {
-                        marginTop: 8
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeSBold,
-                            children: "Built-in Types"
-                        }),
-                        /*#__PURE__*/ jsxs("ul", {
-                            style: {
-                                margin: 0,
-                                paddingLeft: 20,
-                                fontSize: 13
-                            },
-                            children: [
-                                /*#__PURE__*/ jsxs("li", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("code", {
-                                            children: "default"
-                                        }),
-                                        " - Bezier curve"
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("li", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("code", {
-                                            children: "straight"
-                                        }),
-                                        " - Direct line"
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("li", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("code", {
-                                            children: "step"
-                                        }),
-                                        " - Right angles"
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("li", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("code", {
-                                            children: "smoothstep"
-                                        }),
-                                        " - Rounded corners"
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("li", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("code", {
-                                            children: "bezier"
-                                        }),
-                                        " - Curved path"
-                                    ]
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeSBold,
-                            children: "Properties"
-                        }),
-                        /*#__PURE__*/ jsxs("ul", {
-                            style: {
-                                margin: 0,
-                                paddingLeft: 20,
-                                fontSize: 13
-                            },
-                            children: [
-                                /*#__PURE__*/ jsxs("li", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("code", {
-                                            children: "animated"
-                                        }),
-                                        " - Animated flow"
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("li", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("code", {
-                                            children: "style"
-                                        }),
-                                        " - Custom styling"
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("li", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("code", {
-                                            children: "label"
-                                        }),
-                                        " - Edge labels"
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("li", {
-                                    children: [
-                                        /*#__PURE__*/ jsx("code", {
-                                            children: "markerStart/End"
-                                        }),
-                                        " - Arrows"
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsx(Panel, {
-                position: "bottom-right",
-                children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                    translations: DefaultCanvasTranslations
-                })
-            })
-        ]
-    });
-}
-function InteractiveEdgeSelectionStory() {
-    const [selectedEdgeType, setSelectedEdgeType] = useState('default');
-    const [isAnimated, setIsAnimated] = useState(false);
-    const [strokeWidth, setStrokeWidth] = useState(2);
-    const [strokeColor, setStrokeColor] = useState('#718096');
-    const initialNodes = useMemo(()=>[
-            {
-                id: 'source',
-                type: 'uipath.blank-node',
-                position: {
-                    x: 200,
-                    y: 400
-                },
-                data: {
-                    display: {
-                        label: 'Source Node'
-                    },
-                    handleConfigurations: [
-                        {
-                            position: Position.Right,
-                            handles: [
-                                {
-                                    id: 'out',
-                                    type: 'source',
-                                    handleType: 'output'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            },
-            {
-                id: 'target',
-                type: 'uipath.blank-node',
-                position: {
-                    x: 600,
-                    y: 400
-                },
-                data: {
-                    display: {
-                        label: 'Target Node'
-                    },
-                    handleConfigurations: [
-                        {
-                            position: Position.Left,
-                            handles: [
-                                {
-                                    id: 'in',
-                                    type: 'target',
-                                    handleType: 'input'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            }
-        ], []);
-    const currentEdge = useMemo(()=>({
-            id: 'interactive-edge',
-            source: 'source',
-            target: 'target',
-            sourceHandle: 'out',
-            targetHandle: 'in',
-            type: 'default' === selectedEdgeType ? void 0 : selectedEdgeType,
-            animated: isAnimated,
-            label: `${selectedEdgeType} edge`,
-            style: {
-                stroke: strokeColor,
-                strokeWidth
-            },
-            markerEnd: {
-                type: MarkerType.ArrowClosed,
-                color: strokeColor
-            }
-        }), [
-        selectedEdgeType,
-        isAnimated,
-        strokeColor,
-        strokeWidth
-    ]);
-    const { canvasProps } = useCanvasStory({
-        initialNodes,
-        initialEdges: [
-            currentEdge
-        ]
-    });
-    const [edges, setEdges, onEdgesChange] = useEdgesState([
-        currentEdge
-    ]);
-    useEffect(()=>setEdges([
-            currentEdge
-        ]), [
-        currentEdge,
-        setEdges
-    ]);
-    const onConnect = useCallback((params)=>setEdges((eds)=>[
-                ...eds,
-                {
-                    ...params,
-                    id: `e-${Date.now()}`,
-                    type: 'default' === selectedEdgeType ? void 0 : selectedEdgeType,
-                    animated: isAnimated,
-                    style: {
-                        stroke: strokeColor,
-                        strokeWidth
-                    }
-                }
-            ]), [
-        setEdges,
-        selectedEdgeType,
-        isAnimated,
-        strokeColor,
-        strokeWidth
-    ]);
-    return /*#__PURE__*/ jsxs(BaseCanvas, {
-        ...canvasProps,
-        edges: edges,
-        onEdgesChange: onEdgesChange,
-        onConnect: onConnect,
-        mode: "design",
-        children: [
-            /*#__PURE__*/ jsx(StoryInfoPanel, {
-                title: "Edge Configuration",
-                children: /*#__PURE__*/ jsxs(Column, {
-                    gap: 12,
-                    style: {
-                        marginTop: 12
-                    },
-                    children: [
-                        /*#__PURE__*/ jsxs(FormControl, {
-                            size: "small",
-                            fullWidth: true,
-                            children: [
-                                /*#__PURE__*/ jsx(InputLabel, {
-                                    children: "Edge type"
-                                }),
-                                /*#__PURE__*/ jsxs(Select, {
-                                    value: selectedEdgeType,
-                                    onChange: (e)=>setSelectedEdgeType(e.target.value),
-                                    label: "Edge type",
-                                    children: [
-                                        /*#__PURE__*/ jsx(MenuItem, {
-                                            value: "default",
-                                            children: "Default (Bezier)"
-                                        }),
-                                        /*#__PURE__*/ jsx(MenuItem, {
-                                            value: "straight",
-                                            children: "Straight"
-                                        }),
-                                        /*#__PURE__*/ jsx(MenuItem, {
-                                            value: "step",
-                                            children: "Step"
-                                        }),
-                                        /*#__PURE__*/ jsx(MenuItem, {
-                                            value: "smoothstep",
-                                            children: "Smooth Step"
-                                        }),
-                                        /*#__PURE__*/ jsx(MenuItem, {
-                                            value: "bezier",
-                                            children: "Bezier"
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(FormControlLabel, {
-                            control: /*#__PURE__*/ jsx(Checkbox, {
-                                checked: isAnimated,
-                                onChange: (e)=>setIsAnimated(e.target.checked)
-                            }),
-                            label: "Animated"
-                        }),
-                        /*#__PURE__*/ jsxs(Column, {
-                            gap: 4,
-                            children: [
-                                /*#__PURE__*/ jsxs(ApTypography, {
-                                    variant: FontVariantToken.fontSizeS,
-                                    children: [
-                                        "Stroke Width: ",
-                                        strokeWidth,
-                                        "px"
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsx("input", {
-                                    type: "range",
-                                    min: "1",
-                                    max: "10",
-                                    value: strokeWidth,
-                                    onChange: (e)=>setStrokeWidth(Number(e.target.value)),
-                                    style: {
-                                        width: '100%'
-                                    }
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxs(Column, {
-                            gap: 4,
-                            children: [
-                                /*#__PURE__*/ jsx(ApTypography, {
-                                    variant: FontVariantToken.fontSizeS,
-                                    children: "Stroke Color"
-                                }),
-                                /*#__PURE__*/ jsx("input", {
-                                    type: "color",
-                                    value: strokeColor,
-                                    onChange: (e)=>setStrokeColor(e.target.value),
-                                    style: {
-                                        width: '100%',
-                                        height: 32,
-                                        borderRadius: 4,
-                                        border: '1px solid var(--uix-canvas-border)',
-                                        cursor: 'pointer'
-                                    }
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            color: "var(--uix-canvas-foreground-de-emp)",
-                            variant: FontVariantToken.fontSizeXs,
-                            children: "Drag the nodes to see how the edge adapts."
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsx(Panel, {
-                position: "bottom-right",
-                children: /*#__PURE__*/ jsx(CanvasPositionControls, {
-                    translations: DefaultCanvasTranslations
-                })
-            })
-        ]
-    });
-}
-const AllEdgeTypes = {
-    name: 'All Edge Types',
-    render: ()=>/*#__PURE__*/ jsx(AllEdgeTypesStory, {})
-};
-const InteractiveEdgeSelection = {
-    name: 'Interactive Edge Type',
-    render: ()=>/*#__PURE__*/ jsx(InteractiveEdgeSelectionStory, {})
-};
-export { AllEdgeTypes, InteractiveEdgeSelection, XyFlowEdgeComparison_stories as default };