@eccenca/gui-elements 23.6.0 → 23.7.0-rc.1

package/src/components/Sticky/stories/StickyTarget.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, Story } from "@storybook/react";
+
+import { HtmlContentBlock, StickyTarget } from "../../../../index";
+
+export default {
+    title: "Components/StickyTarget",
+    component: StickyTarget,
+    argTypes: {},
+} as Meta<typeof StickyTarget>;
+
+const Template: Story<typeof StickyTarget> = (args) => (
+    <div style={{ height: "10rem", overflow: "auto", position: "relative" }}>
+        <HtmlContentBlock>
+            {args.getConnectedElement && args.to !== "bottom" && (
+                <p
+                    id="connected-element"
+                    style={{ background: "red", color: "white", padding: "0.5rem", position: "fixed", top: "20px" }}
+                >
+                    Top element.
+                </p>
+            )}
+            <LoremIpsum p={3} avgSentencesPerParagraph={5} random={false} />
+            <StickyTarget {...args} style={args.to === "bottom" ? { zIndex: 2 } : undefined}>
+                <p style={{ color: "red", padding: "0.5rem" }}>First sticky element.</p>
+            </StickyTarget>
+            <LoremIpsum p={5} avgSentencesPerParagraph={5} random={false} />
+            <div>
+                <StickyTarget {...args}>
+                    <p style={{ color: "green", padding: "0.5rem" }}>Sticky element.</p>
+                </StickyTarget>
+                <LoremIpsum p={5} avgSentencesPerParagraph={5} random={false} />
+            </div>
+            <StickyTarget {...args}>
+                <p style={{ color: "blue", padding: "0.5rem" }}>Another sticky element.</p>
+            </StickyTarget>
+            <LoremIpsum p={5} avgSentencesPerParagraph={5} random={false} />
+            {args.getConnectedElement && args.to === "bottom" && (
+                <p
+                    id="connected-element"
+                    style={{ background: "red", color: "white", padding: "0.5rem", position: "fixed", bottom: "20px" }}
+                >
+                    Bottom element.
+                </p>
+            )}
+        </HtmlContentBlock>
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    className: "stickytarget-extraclass",
+    "data-test-id": "stickytarget-test-id",
+    "data-testid": "stickytarget-testid",
+};
+
+export const ConnectedElement = Template.bind({});
+ConnectedElement.args = {
+    getConnectedElement: () => {
+        return window.document.getElementById("connected-element") || false;
+    },
+};

package/src/components/index.scss

@@ -24,6 +24,7 @@
 @import "./Separation/separation";
 @import "./Skeleton/skeleton";
 @import "./Spinner/spinner";
+@import "./Sticky/sticky";
 @import "./Structure/titles";
 @import "./Table/table";
 @import "./Tabs/tabs";

package/src/components/index.ts

@@ -36,6 +36,7 @@ export * from "./Separation/Divider";
 export * from "./Separation/Spacing";
 export * from "./Skeleton/Skeleton";
 export * from "./Spinner/Spinner";
+export * from "./Sticky";
 export * from "./Structure";
 export * from "./Switch/Switch";
 export * from "./Table";

package/src/extensions/codemirror/CodeMirror.tsx

@@ -114,7 +114,7 @@ export const CodeEditor = ({
     id,
     mode = "undefined",
     preventLineNumbers = false,
-    defaultValue,
+    defaultValue = "",
     readOnly = false,
     height,
     wrapLines = false,

package/src/extensions/react-flow/edges/EdgeDefault.tsx

@@ -39,6 +39,11 @@ export interface EdgeDefaultDataProps {
      * Callback handler that returns a React element used as edge title.
      */
     renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
+    /**
+     * Properties are forwarded to the internally used SVG `g` element.
+     * Data attributes for test ids coud be included here.
+     */
+    edgeSvgProps?: React.SVGProps<SVGGElement>;
 }
 
 export interface EdgeDefaultProps extends ReactFlowEdgeProps {
@@ -52,75 +57,78 @@ export interface EdgeDefaultProps extends ReactFlowEdgeProps {
     drawSvgPath?: (edge: ReactFlowEdgeProps) => string;
 }
 
-export const EdgeDefault = memo((edge: EdgeDefaultProps) => {
-    const { data = {}, drawSvgPath = drawEdgeStraight, ...edgeOriginalProperties } = edge;
-    const { pathGlowWidth = 10, markerStart, strokeType, intent, highlightColor } = data;
+export const EdgeDefault = memo(
+    ({ data = {}, drawSvgPath = drawEdgeStraight, ...edgeOriginalProperties }: EdgeDefaultProps) => {
+        const { pathGlowWidth = 10, markerStart, strokeType, intent, highlightColor, edgeSvgProps } = data;
 
-    const pathDisplay = drawSvgPath({ ...edgeOriginalProperties, data });
-    const markerEnd = getMarkerEnd(edgeOriginalProperties.arrowHeadType, edgeOriginalProperties.markerEndId);
-    const edgeCenter = getEdgeCenter({
-        sourceX: edgeOriginalProperties.sourceX,
-        sourceY: edgeOriginalProperties.sourceY,
-        targetX: edgeOriginalProperties.targetX,
-        targetY: edgeOriginalProperties.targetY,
-    });
+        const pathDisplay = drawSvgPath({ ...edgeOriginalProperties, data });
+        const markerEnd = getMarkerEnd(edgeOriginalProperties.arrowHeadType, edgeOriginalProperties.markerEndId);
+        const edgeCenter = getEdgeCenter({
+            sourceX: edgeOriginalProperties.sourceX,
+            sourceY: edgeOriginalProperties.sourceY,
+            targetX: edgeOriginalProperties.targetX,
+            targetY: edgeOriginalProperties.targetY,
+        });
 
-    const edgeLabel =
-        data.renderLabel?.(edgeCenter) ??
-        (edgeOriginalProperties.label ? (
-            <EdgeText
-                x={edgeCenter[0]}
-                y={edgeCenter[1]}
-                label={edgeOriginalProperties.label}
-                labelStyle={edgeOriginalProperties.labelStyle}
-                labelShowBg={edgeOriginalProperties.labelShowBg}
-                labelBgStyle={edgeOriginalProperties.labelBgStyle}
-                labelBgPadding={edgeOriginalProperties.labelBgPadding || [5, 5]}
-                labelBgBorderRadius={edgeOriginalProperties.labelBgBorderRadius || 3}
-            />
-        ) : null);
+        const edgeLabel =
+            data.renderLabel?.(edgeCenter) ??
+            (edgeOriginalProperties.label ? (
+                <EdgeText
+                    x={edgeCenter[0]}
+                    y={edgeCenter[1]}
+                    label={edgeOriginalProperties.label}
+                    labelStyle={edgeOriginalProperties.labelStyle}
+                    labelShowBg={edgeOriginalProperties.labelShowBg}
+                    labelBgStyle={edgeOriginalProperties.labelBgStyle}
+                    labelBgPadding={edgeOriginalProperties.labelBgPadding || [5, 5]}
+                    labelBgBorderRadius={edgeOriginalProperties.labelBgBorderRadius || 3}
+                />
+            ) : null);
 
-    const edgeStyle = edgeOriginalProperties.style ?? {};
-    const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors(
-        "--edge-highlight",
-        highlightColor
-    );
+        const edgeStyle = edgeOriginalProperties.style ?? {};
+        const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors(
+            "--edge-highlight",
+            highlightColor
+        );
 
-    return (
-        <g
-            className={createEdgeDefaultClassName({ intent }, "")}
-            style={{
-                ...edgeStyle,
-                color: edgeStyle.color || edgeStyle.stroke,
-            }}
-        >
-            {highlightColor && (
+        return (
+            <g
+                {...edgeSvgProps}
+                className={createEdgeDefaultClassName({ intent }, edgeSvgProps?.className ?? "")}
+                style={{
+                    ...edgeSvgProps?.style,
+                    ...edgeStyle,
+                    color: edgeStyle.color || edgeStyle.stroke,
+                }}
+            >
+                {highlightColor && (
+                    <path
+                        d={pathDisplay}
+                        className={createEdgeDefaultClassName({ highlightColor }, "react-flow__edge-path-highlight")}
+                        strokeWidth={pathGlowWidth}
+                        style={{
+                            ...highlightCustomPropertySettings,
+                        }}
+                    />
+                )}
+                {pathGlowWidth && (
+                    <path
+                        d={pathDisplay}
+                        className={createEdgeDefaultClassName({}, "react-flow__edge-path-glow")}
+                        strokeWidth={pathGlowWidth}
+                    />
+                )}
                 <path
                     d={pathDisplay}
-                    className={createEdgeDefaultClassName({ highlightColor }, "react-flow__edge-path-highlight")}
-                    strokeWidth={pathGlowWidth}
-                    style={{
-                        ...highlightCustomPropertySettings,
-                    }}
+                    className={createEdgeDefaultClassName({ strokeType })}
+                    markerStart={markerStart}
+                    markerEnd={markerEnd}
                 />
-            )}
-            {pathGlowWidth && (
-                <path
-                    d={pathDisplay}
-                    className={createEdgeDefaultClassName({}, "react-flow__edge-path-glow")}
-                    strokeWidth={pathGlowWidth}
-                />
-            )}
-            <path
-                d={pathDisplay}
-                className={createEdgeDefaultClassName({ strokeType })}
-                markerStart={markerStart}
-                markerEnd={markerEnd}
-            />
-            {edgeLabel}
-        </g>
-    );
-});
+                {edgeLabel}
+            </g>
+        );
+    }
+);
 
 const createEdgeDefaultClassName = (
     { strokeType, intent, highlightColor }: EdgeDefaultDataProps,

package/src/extensions/react-flow/edges/EdgeLabel.tsx

@@ -38,7 +38,18 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const EdgeLabel = memo(
-    ({ depiction, text, actions, large, fullWidth, loose, intent, title, ...otherDivProps }: EdgeLabelProps) => {
+    ({
+        depiction,
+        text,
+        actions,
+        large,
+        fullWidth,
+        loose,
+        intent,
+        title,
+        className,
+        ...otherDivProps
+    }: EdgeLabelProps) => {
         const depEl =
             !!depiction && typeof depiction === "string" ? (
                 <Depiction image={<Icon name={depiction as ValidIconName} />} />
@@ -53,7 +64,8 @@ export const EdgeLabel = memo(
                     (large ? ` ${eccgui}-graphviz__edge-label--large` : "") +
                     (fullWidth ? ` ${eccgui}-graphviz__edge-label--fullwidth` : "") +
                     (loose ? ` ${eccgui}-graphviz__edge-label--loose` : "") +
-                    (intent ? ` ${intentClassName(intent)}` : "")
+                    (intent ? ` ${intentClassName(intent)}` : "") +
+                    (className ? ` ${className}` : "")
                 }
                 {...otherDivProps}
             >

package/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from "react-flow-renderer";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { EdgeLabel, EdgeLabelObject, ReactFlow } from "./../../../../../index";
 import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
@@ -21,7 +21,7 @@ export default {
             options: [...Object.keys(edgeTypes)],
         },
     },
-} as ComponentMeta<typeof EdgeDefault>;
+} as Meta<typeof EdgeDefault>;
 
 const EdgeDefaultExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
@@ -77,17 +77,23 @@ const EdgeDefaultExample = (args: any) => {
     );
 };
 
-const Template: ComponentStory<typeof EdgeDefault> = (args) => <EdgeDefaultExample {...args} />;
+const Template: StoryFn<typeof EdgeDefault> = (args) => <EdgeDefaultExample {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
     id: "default",
-    type: "dangerStep",
+    type: "storybook",
     label: "edge",
     arrowHeadType: "arrowclosed",
     source: "node-1",
     target: "node-2",
-    data: {},
+    data: {
+        edgeSvgProps: {
+            "data-testid": "storybook-testid",
+            "data-test-id": "storybook-test-id",
+            className: "storybook__test__classname",
+        },
+    },
 };
 
 export const CustomLabel = Template.bind({});

package/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx

@@ -45,6 +45,8 @@ const labelText = loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSen
 export const Default = Template.bind({});
 Default.args = {
     text: labelText,
+    "data-testid": "storybook-testid",
+    "data-test-id": "storybook-test-id",
 };
 
 export const ReverseEllipsisLabel = Template.bind({});

package/src/extensions/react-flow/handles/HandleContent.tsx

@@ -3,8 +3,7 @@ import React, { memo } from "react";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { Tooltip, TooltipProps } from "../../../index";
 
-export interface HandleContentProps {
-    children?: JSX.Element | string;
+export interface HandleContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
     /**
      * Tooltip displayed as overlay on hover.
      */
@@ -15,28 +14,32 @@ export interface HandleContentProps {
     tooltipProps?: Omit<TooltipProps, "content" | "children" | "renderTarget">;
 }
 
-export const HandleContent = memo(({ children, extendedTooltip, tooltipProps }: HandleContentProps) => {
-    const handleContent = children ? (
-        <div className={`${eccgui}-graphviz__handle__content`}>{children}</div>
-    ) : extendedTooltip ? (
-        <div className={`${eccgui}-graphviz__handle__content`} />
-    ) : (
-        <></>
-    );
-
-    if (extendedTooltip && tooltipProps?.isOpen) {
-        return (
-            <Tooltip
-                content={extendedTooltip}
-                autoFocus={false}
-                enforceFocus={false}
-                openOnTargetFocus={false}
-                {...tooltipProps}
-            >
-                {handleContent}
-            </Tooltip>
+export const HandleContent = memo(
+    ({ children, extendedTooltip, tooltipProps, ...otherDivProps }: HandleContentProps) => {
+        const handleContent = children ? (
+            <div className={`${eccgui}-graphviz__handle__content`} {...otherDivProps}>
+                {children}
+            </div>
+        ) : extendedTooltip ? (
+            <div className={`${eccgui}-graphviz__handle__content`} {...otherDivProps} />
+        ) : (
+            <></>
         );
-    }
 
-    return handleContent;
-});
+        if (extendedTooltip && tooltipProps?.isOpen) {
+            return (
+                <Tooltip
+                    content={extendedTooltip}
+                    autoFocus={false}
+                    enforceFocus={false}
+                    openOnTargetFocus={false}
+                    {...tooltipProps}
+                >
+                    {handleContent}
+                </Tooltip>
+            );
+        }
+
+        return handleContent;
+    }
+);

package/src/extensions/react-flow/handles/HandleTools.tsx

@@ -40,6 +40,7 @@ export const HandleTools = ({ children, ...otherContextOverlayProps }: HandleToo
             <div
                 className={`${eccgui}-graphviz__handletools-target`}
                 data-test-id={otherContextOverlayProps["data-test-id"]}
+                data-testid={otherContextOverlayProps["data-testid"]}
             />
         </ContextOverlay>
     );

package/src/extensions/react-flow/handles/stories/HandleDefault.stories.tsx

@@ -18,7 +18,7 @@ import { edgeTypes } from "./../../edges/edgeTypes";
 
 const HandleDefaultDataProps = (data: HandleProps["data"]) => {
     // this is only a mock to get it as sub element in the table
-    return <>{data.extendedTooltip}</>;
+    return <>{data?.extendedTooltip}</>;
 };
 
 export default {
@@ -101,6 +101,8 @@ Default.args = {
     tooltip: "this is a target handle",
     isConnectable: true,
     onClick: () => alert("Clicked handle."),
+    "data-test-id": "handle-test-id",
+    "data-testid": "handle-testid",
 };
 
 export const UsingHandleTools = Template.bind({});
@@ -111,5 +113,7 @@ UsingHandleTools.args = {
     children: <HandleTestMenu />,
     data: {
         extendedTooltip: "This is another Tooltip",
+        "data-test-id": "handlecontent-test-id",
+        "data-testid": "handlecontent-testid",
     },
 };

package/src/extensions/react-flow/minimap/MiniMap.stories.tsx

@@ -0,0 +1,62 @@
+import React, { FC, useCallback, useEffect, useState } from "react";
+import { Background, BackgroundVariant, Elements, FlowElement } from "react-flow-renderer";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Default as ReactFlowExample } from "../../../cmem/react-flow/ReactFlow/ReactFlow.stories";
+
+import { MiniMap as MiniMapElement, MiniMapProps, ReactFlow, ReactFlowProps } from "./../../../../index";
+
+export default {
+    title: "Extensions/React Flow/MiniMap",
+    component: MiniMapElement,
+    argTypes: {},
+} as Meta<typeof MiniMapElement>;
+
+const MiniMapExample: FC<MiniMapProps> = (args) => {
+    const [reactflowInstance, setReactflowInstance] = useState(undefined);
+    const [elements, setElements] = useState([] as Elements);
+    const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+    const nodeExamples = ReactFlowExample.nodeExamples.workflow;
+
+    useEffect(() => {
+        setElements(nodeExamples as Elements);
+    }, [args]);
+
+    // Helper methods for nodes and edges
+    const isNode = (element: FlowElement & { source?: string }): boolean => !element.source;
+    const isEdge = (element: FlowElement & { source?: string }): boolean => !isNode(element);
+
+    const onLoad = useCallback((rfi) => {
+        if (!reactflowInstance) {
+            setReactflowInstance(rfi);
+        }
+    }, []);
+
+    return (
+        <OverlaysProvider>
+            <ReactFlow
+                configuration={"workflow"}
+                elements={elements}
+                style={{ height: "400px" }}
+                onLoad={onLoad}
+                defaultZoom={1}
+            >
+                <MiniMapElement flowInstance={reactflowInstance} {...args} />
+                <Background variant={BackgroundVariant.Lines} gap={16} />
+            </ReactFlow>
+            {edgeTools}
+        </OverlaysProvider>
+    );
+};
+
+const Template: StoryFn<typeof MiniMapExample> = (args) => <MiniMapExample {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    enableNavigation: true,
+    wrapperProps: {
+        "data-test-id": "minimap-test-id",
+        "data-testid": "minimap-testid",
+    },
+};

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -5,8 +5,22 @@ import { FlowTransform } from "react-flow-renderer/dist/types";
 import { miniMapUtils } from "../minimap/utils";
 
 export interface MiniMapProps extends ReactFlowMiniMapProps {
+    /**
+     * React-Flow instance
+     */
     flowInstance?: OnLoadParams;
+    /**
+     * Enable navigating the react-flow canvas by dragging and clicking on the mini-map.
+     */
     enableNavigation?: boolean;
+    /**
+     * Properties are forwarded to the HTML `div` element used as minimap wrapper.
+     * Data attributes for test ids coud be included here.
+     */
+    wrapperProps?: Omit<
+        React.HTMLAttributes<HTMLDivElement>,
+        "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseLeave"
+    >;
 }
 
 interface configParams {
@@ -33,6 +47,7 @@ export const MiniMap = memo(
         nodeClassName = miniMapUtils.nodeClassName,
         nodeColor = miniMapUtils.nodeColor,
         nodeStrokeColor = miniMapUtils.borderColor,
+        wrapperProps,
         ...minimapProps
     }: MiniMapProps) => {
         const minimapWrapper = React.useRef<HTMLDivElement | null>(null);
@@ -88,17 +103,13 @@ export const MiniMap = memo(
             }
         };
 
-        /**
-        sets the view for the user when clicked and finish navigation
-     **/
+        // sets the view for the user when clicked and finish navigation
         const handleMiniMapMouseUp = (event: any) => {
             handleMiniMapMouseMove(event);
             minimapCalcConf.navigationOn = false;
         };
 
-        /**
-        enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
-     **/
+        // enables the mini-map fake drag effect see "handleMiniMapMouseMove" above.
         const handleMiniMapMouseDown = () => {
             if (enableNavigation && flowInstance) {
                 minimapCalcConf.navigationOn = true;
@@ -112,7 +123,12 @@ export const MiniMap = memo(
                 onMouseUp={handleMiniMapMouseUp}
                 onMouseMove={handleMiniMapMouseMove}
                 onMouseLeave={handleMiniMapMouseUp}
-                style={flowInstance ? { cursor: "grab" } : {}}
+                {...wrapperProps}
+                style={
+                    flowInstance && enableNavigation
+                        ? { ...(wrapperProps?.style ?? {}), cursor: "grab" }
+                        : wrapperProps?.style
+                }
             >
                 <ReactFlowMiniMap
                     maskColor={maskColor}

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -199,6 +199,8 @@ Default.args = {
         },
     ],
     onNodeResize: false, // workaround that storybook do not automatically include empty handle function
+    "data-test-id": "nodecontent-test-id",
+    "data-testid": "nodecontent-testid",
 };
 
 export const Resizeable = Template.bind({});

package/src/extensions/react-flow/nodes/stories/NodeContentExtension.stories.tsx

@@ -41,6 +41,8 @@ Default.args = {
             <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
         </HtmlContentBlock>
     ),
+    "data-test-id": "contentextension-test-id",
+    "data-testid": "contentextension-testid",
 } as NodeContentExtensionProps;
 
 export const SlideOutOfNode = Template.bind({});

package/src/extensions/react-flow/nodes/stories/NodeDefault.stories.tsx

@@ -11,7 +11,6 @@ import { nodeTypes } from "./nodeTypes";
 export default {
     title: "Extensions/React Flow/Node",
     component: NodeDefault,
-    subcomponents: { NodeContent },
     argTypes: {
         id: {
             control: "text",