npm - @eccenca/gui-elements - Versions diffs - 23.1.0-rc.2 → 23.1.0-rc.4 - Mend

@eccenca/gui-elements 23.1.0-rc.2 → 23.1.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (295) hide show

package/src/extensions/react-flow/edges/edgeTypes.ts CHANGED Viewed

@@ -12,13 +12,17 @@ export const edgeTypes = {
     default: EdgeDefault,
     straight: EdgeDefault,
     step: EdgeStep,
-    smoothstep: EdgeStep,
-    implicitEdge: EdgeDefault,
-    importEdge: EdgeDefault,
-    subclassEdge: EdgeDefault,
-    subpropertyEdge: EdgeDefault,
-    rdftypeEdge: EdgeDefault,
-    successStep: EdgeStep,
-    warningStep: EdgeStep,
-    dangerStep: EdgeStep,
+    success: EdgeDefault,
+    warning: EdgeDefault,
+    danger: EdgeDefault,
+    implicit: EdgeDefault,
+    import: EdgeDefault,
+    subclass: EdgeDefault,
+    subproperty: EdgeDefault,
+    rdftype: EdgeDefault,
+    value: EdgeStep,
+    score: EdgeStep,
 };

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, Tag } from "./../../../../../index";
+import { ReactFlow, EdgeLabel, EdgeLabelObject } from "./../../../../../index";
 import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from 'react-flow-renderer';
 import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
@@ -16,6 +16,10 @@ export default {
     component: EdgeDefault,
     subcomponents: { EdgeDefaultDataProps },
     argTypes: {
+        type: {
+            control: "select",
+            options: [...(Object.keys(edgeTypes))],
+        },
     },
 } as ComponentMeta<typeof EdgeDefault>;
@@ -74,7 +78,7 @@ const Template: ComponentStory<typeof EdgeDefault> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
     id: 'default',
-    type: 'default',
+    type: 'dangerStep',
     label: "edge",
     arrowHeadType: "arrowclosed",
     source: 'node-1',
@@ -88,21 +92,14 @@ CustomLabel.args = {
     ...Default.args,
     id: "customlabel",
     arrowHeadType: undefined,
+    label: undefined,
     data: {
         renderLabel: (
             edgeCenter: [number, number, number, number]
         ) => (
-            <foreignObject
-                width={100}
-                height={20}
-                x={edgeCenter[0] - 50}
-                y={edgeCenter[1] - 10}
-                requiredExtensions="http://www.w3.org/1999/xhtml"
-            >
-                <body>
-                    <Tag>Custom label</Tag>
-                </body>
-            </foreignObject>
+            <EdgeLabelObject edgeCenter={edgeCenter}>
+                    <EdgeLabel text="Custom label that is very long" />
+            </EdgeLabelObject>
         )
     }
 };
@@ -119,3 +116,27 @@ InverseEdge.args = {
         ),
     }
 };
+export const AdjustStrokeType = Template.bind({});
+AdjustStrokeType.args = {
+    ...Default.args,
+    data: {
+        strokeType: "double",
+    }
+};
+export const AdjustIntent = Template.bind({});
+AdjustIntent.args = {
+    ...Default.args,
+    data: {
+        intent: "warning",
+    }
+};
+export const AdjustHighlight = Template.bind({});
+AdjustHighlight.args = {
+    ...Default.args,
+    data: {
+        highlightColor: ["default", "alternate"]
+    }
+};

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from 'react-lorem-ipsum';
+import { EdgeLabel, IconButton, Badge, Icon } from "./../../../../../index";
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+import { helpersArgTypes } from "../../../../../.storybook/helpers";
+export default {
+    title: "Extensions/React Flow/Custom EdgeLabel",
+    component: EdgeLabel,
+    argTypes: {
+        depiction: {
+            control: "select",
+            options: [...(Object.keys(canonicalIcons))],
+        },
+        actions: {
+            control: "select",
+            options: ["Not set", "Icon button", "Icon button small", "Info badge", "Icon badge"],
+            mapping: {
+                "Not set": undefined,
+                "Icon button": <IconButton name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
+                "Icon button small": <IconButton small name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
+                "Info badge": <Badge intent="info">Info</Badge>,
+                "Icon badge": <Badge intent="accent" size="small"><Icon name="undefined" small /></Badge>,
+            },
+        },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
+    },
+} as ComponentMeta<typeof EdgeLabel>;
+const Template: ComponentStory<typeof EdgeLabel> = (args) => (
+    <EdgeLabel {...args} />
+);
+export const Default = Template.bind({});
+Default.args = {
+    text: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
+};

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

@@ -4,6 +4,9 @@ import { Tooltip } from "../../../index";
 export interface HandleContentProps {
     children?: JSX.Element | string;
+    /**
+     * Tooltip dosplayed as overlay on hover.
+     */
     extendedTooltip?: JSX.Element | string;
 }

package/src/extensions/react-flow/handles/HandleDefault.tsx CHANGED Viewed

@@ -1,29 +1,66 @@
 import React, {memo} from 'react';
 import {
-    HandleProps as ReactFlowHandleProps,
-    Handle,
+    HandleProps as ReactFlowHandleLegacyProps,
+    Handle as HandleLegacy,
 } from "react-flow-renderer";
+import {
+    HandleProps as ReactFlowHandleNextProps,
+    Handle as HandleNext,
+} from "react-flow-renderer-lts";
 import { HandleContent, HandleContentProps } from "./HandleContent";
+import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
-export interface HandleProps extends ReactFlowHandleProps {
+interface HandleExtensionProps extends ReacFlowVersionSupportProps {
+    /**
+     * Extended handle data.
+     */
     data?: HandleContentProps;
+    /**
+     * Simple text tooltip displayed as title on hover.
+     */
     tooltip?: string;
     children?: JSX.Element | string;
+    onClick?: () => void;
+}
+export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
+}
+export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
 }
 export const HandleDefault = memo(({
+    flowVersion,
     data,
     tooltip,
     children,
     ...handleProps
-}: HandleProps) => {
+}: HandleProps | HandleNextProps) => {
+    const evaluateFlowVersion = useReactFlowVersion();
+    const flowVersionCheck = flowVersion || evaluateFlowVersion;
     const tooltipTitle = !!tooltip ? { title: tooltip } : {};
-    return (
-        <Handle {...handleProps} {...tooltipTitle}>
-            <HandleContent {...data}>
-                { children }
-            </HandleContent>
-        </Handle>
+    const handleContent = (
+        <HandleContent {...data}>
+            { children }
+        </HandleContent>
     );
+    switch (flowVersionCheck) {
+        case "legacy":
+            return (
+                <HandleLegacy {...handleProps} {...tooltipTitle}>
+                    { handleContent }
+                </HandleLegacy>
+            );
+        case "next":
+            return (
+                <HandleNext {...handleProps} {...tooltipTitle}>
+                    { handleContent }
+                </HandleNext>
+            );
+        default:
+            return <></>;
+    }
 });

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

@@ -0,0 +1,71 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ReactFlow, HandleDefault, HandleProps } from "./../../../../../index";
+import { Elements, ReactFlowProvider } from 'react-flow-renderer';
+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}</>;
+}
+export default {
+    title: "Extensions/React Flow/Default Handle",
+    component: HandleDefault,
+    subcomponents: { HandleDefaultDataProps },
+    argTypes: {
+    },
+} as ComponentMeta<typeof HandleDefault>;
+const HandleDefaultExample = (args: any) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+    const [elements, setElements] = useState([] as Elements);
+    useEffect(() => {
+        setElements([
+            {
+                id: "node-1",
+                type: "default",
+                data: {
+                    label: "Default ",
+                    content: "Example content.",
+                    minimalShape: "none",
+                    handles: [
+                        { ...args }
+                    ],
+                },
+                position: { x: 50, y: 200 },
+            },
+        ] as Elements);
+    }, [args]);
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+    return <ReactFlowProvider>
+        <ReactFlow
+            elements={elements}
+            style={{ height: '400px' }}
+            onLoad={onLoad}
+            edgeTypes={ edgeTypes }
+            defaultZoom={1}
+        />
+    </ReactFlowProvider>
+}
+const Template: ComponentStory<typeof HandleDefault> = (args) => (
+    <HandleDefaultExample {...args} />
+);
+export const Default = Template.bind({});
+Default.args = {
+    type: "target",
+    tooltip: "this is a target handle",
+    isConnectable: false,
+};

package/src/extensions/react-flow/index.ts CHANGED Viewed

@@ -3,10 +3,10 @@ export { NodeContent } from "./nodes/NodeContent";
 export { NodeContentExtension } from "./nodes/NodeContentExtension";
 export { NodeTools } from "./nodes/NodeTools";
 export { nodeTypes } from "./nodes/nodeTypes";
-export { EdgeDefault } from "./edges/EdgeDefault";
 export { EdgeStep } from "./edges/EdgeStep";
 export { EdgeTools } from "./edges/EdgeTools";
 export { edgeTypes } from "./edges/edgeTypes";
+export * from "./edges/EdgeLabel";
 export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
 export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
 export { MiniMap } from "./minimap/MiniMap";
@@ -17,6 +17,8 @@ export type { NodeProps } from "./nodes/NodeDefault";
 export type { NodeContentProps } from "./nodes/NodeContent";
 export type { NodeContentExtensionProps } from "./nodes/NodeContentExtension";
 export type { NodeToolsProps } from "./nodes/NodeTools";
-export type { EdgeDefaultProps } from "./edges/EdgeDefault";
 export type { EdgeStepProps } from "./edges/EdgeStep";
 export type { MiniMapProps } from "./minimap/MiniMap";
+export * from "./edges/EdgeDefault";
+export * from "./handles/HandleDefault";