@eccenca/gui-elements 24.2.0 → 24.4.0

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

@@ -0,0 +1,270 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+import { Node, ReactFlow, ReactFlowProvider, useNodesState } from "@xyflow/react";
+
+import { Definitions } from "../../../../common/Intent";
+import { NodeDefaultV12 } from "../NodeDefaultV12";
+
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+import {
+    Badge,
+    ContextMenu,
+    HtmlContentBlock,
+    IconButton,
+    MenuItem,
+    NodeContent,
+    NodeContentExtension,
+    OverflowText,
+    Tag,
+    TagList,
+} from "./../../../../index";
+import {
+    Default as ContentExtensionExample,
+    SlideOutOfNode as ContentExtensionExampleSlideOut,
+} from "./NodeContentExtension.stories";
+
+export default {
+    title: "Extensions/React Flow V12/Node Content",
+    component: NodeContent,
+    subcomponents: { NodeContentExtension },
+    argTypes: {
+        contentExtension: {
+            control: "select",
+            options: ["Not set", "Default example", "Slide out example"],
+            mapping: {
+                "Not set": undefined,
+                "Default example": <NodeContentExtension {...ContentExtensionExample.args} />,
+                "Slide out example": <NodeContentExtension {...ContentExtensionExampleSlideOut.args} />,
+            },
+        },
+        labelSubline: {
+            control: "select",
+            options: ["Not set", "Text string", "OverflowText element", "Tag list"],
+            mapping: {
+                "Not set": undefined,
+                "Text string": loremIpsum({
+                    p: 1,
+                    avgSentencesPerParagraph: 1,
+                    avgWordsPerSentence: 8,
+                    random: false,
+                }).toString(),
+                "OverflowText element": (
+                    <OverflowText>
+                        {loremIpsum({
+                            p: 1,
+                            avgSentencesPerParagraph: 2,
+                            avgWordsPerSentence: 4,
+                            random: false,
+                        }).toString()}
+                    </OverflowText>
+                ),
+                "Tag list": (
+                    <TagList>
+                        {loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 5, random: false })
+                            .toString()
+                            .split(" ")
+                            .map((term) => (
+                                <Tag small>{term}</Tag>
+                            ))}
+                    </TagList>
+                ),
+            },
+        },
+        menuButtons: {
+            control: "select",
+            options: ["Not set", "Icon button", "Context Menu", "Info badge"],
+            mapping: {
+                "Not set": undefined,
+                "Icon button": <IconButton name="item-info" text="Icon button" onClick={() => alert("Click info")} />,
+                "Context Menu": (
+                    <ContextMenu>
+                        <MenuItem text="Context menu" />
+                    </ContextMenu>
+                ),
+                "Info badge": <Badge intent="info">Info</Badge>,
+            },
+        },
+        iconName: {
+            control: "select",
+            options: [...Object.keys(canonicalIcons)],
+        },
+        highlightedState: {
+            control: "select",
+            options: ["Not set", "success", "warning", "danger", "match", "altmatch", "danger + match"],
+            mapping: {
+                "Not set": undefined,
+                "danger + match": ["danger", "match"],
+            },
+        },
+        border: {
+            control: "select",
+            options: [undefined, "solid", "double", "dashed", "dotted"],
+        },
+        intent: {
+            control: "select",
+            options: [undefined, ...Object.values(Definitions)],
+        },
+        highlightColor: {
+            control: "select",
+            options: [
+                "Not set",
+                "Default",
+                "Alternate",
+                "Default + alternate",
+                "Custom (red)",
+                "Default + Custom (red)",
+                "Custom (green) + alternate",
+                "Custom (purple) + custom (yellow)",
+            ],
+            mapping: {
+                "Not set": undefined,
+                Default: "default",
+                Alternate: "alternate",
+                "Default + alternate": ["default", "alternate"],
+                "Custom (red)": "red",
+                "Default + Custom (red)": ["default", "red"],
+                "Custom (green) + alternate": ["green", "alternate"],
+                "Custom (purple) + custom (yellow)": ["purple", "yellow"],
+            },
+        },
+        content: { control: false },
+        footerContent: { control: false },
+        isConnectable: { table: { disable: true } },
+        targetPosition: { table: { disable: true } },
+        sourcePosition: { table: { disable: true } },
+        selected: { table: { disable: true } },
+        businessData: { table: { disable: true } },
+    },
+} as Meta<typeof NodeContent>;
+
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
+
+const nodeTypes = { default: NodeDefaultV12 };
+
+const NodeContentExample = (args: any) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+    const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+
+    const defaultElement = {
+        id: "example-1",
+        type: "default",
+        data: args as object & { label: string },
+        position: { x: 50, y: 50 },
+    };
+
+    useEffect(() => {
+        const sizeReset = {};
+        if (args.resizeMaxDimensions && args.resizeDirections) {
+            sizeReset["onNodeResize"] = (dimensions) => {
+                // eslint-disable-next-line no-console
+                console.log("call onNodeResize method");
+                if (args.onNodeResize) {
+                    args.onNodeResize(dimensions);
+                }
+                if (dimensions?.width || dimensions?.height) {
+                    sizeReset["menuButtons"] = (
+                        <IconButton
+                            name="item-reset"
+                            onClick={() => {
+                                // eslint-disable-next-line no-console
+                                console.log("reset size");
+                                setNodes([
+                                    {
+                                        ...defaultElement,
+                                        data: { ...defaultElement.data, ...sizeReset, ...{ nodeDimensions: {} } },
+                                    },
+                                ]);
+                            }}
+                        />
+                    );
+                }
+                setNodes([
+                    {
+                        ...defaultElement,
+                        data: { ...defaultElement.data, ...sizeReset, ...{ nodeDimensions: dimensions } },
+                    },
+                ]);
+            };
+        }
+        setNodes([
+            {
+                ...defaultElement,
+                data: { ...defaultElement.data, ...sizeReset },
+            },
+        ]);
+    }, [args]);
+
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+
+    return (
+        <div style={{ width: "100%", height: "400px" }}>
+            <ReactFlowProvider>
+                <ReactFlow
+                    nodes={nodes}
+                    edges={[]}
+                    style={{ height: "400px" }}
+                    onLoad={onLoad}
+                    nodeTypes={nodeTypes}
+                    onNodesChange={onNodesChange}
+                />
+            </ReactFlowProvider>
+        </div>
+    );
+};
+
+const Template: StoryFn<typeof NodeContent> = (args) => (
+    <NodeContentExample {...args} /*some comment*/ key={++forcedUpdateKey} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    label: "Node title",
+    content: (
+        <HtmlContentBlock>
+            <h4>Node body</h4>
+            <LoremIpsum p={4} avgSentencesPerParagraph={3} random={false} />
+        </HtmlContentBlock>
+    ),
+    footerContent: <OverflowText passDown>Node footer with some text information.</OverflowText>,
+    contentExtension: undefined,
+    minimalShape: "none",
+    getMinimalTooltipData: (node: any) => {
+        return {
+            label: node.data?.label,
+            content: node.data?.content,
+            iconName: node.data?.iconName,
+            depiction: node.data?.depiction,
+        };
+    },
+    handles: [
+        {
+            type: "target",
+            tooltip: "this is a target handle",
+        },
+        {
+            type: "source",
+            data: { extendedTooltip: "this is a source handle" },
+        },
+    ],
+    onNodeResize: undefined,
+};
+
+export const Resizeable = Template.bind({});
+Resizeable.args = {
+    ...Default.args,
+    resizeMaxDimensions: { width: 1000, height: 500 },
+    nodeDimensions: {},
+    resizeDirections: { bottom: true, right: true },
+    onNodeResize: (dimensions) => {
+        // eslint-disable-next-line no-console
+        console.log("onNodeResize", `new dimensions: ${dimensions.width}x${dimensions.height}`);
+    },
+};

package/src/extensions/react-flow/versionsupport.ts

@@ -1,11 +1,13 @@
 import { useStoreState as getStoreStateFlowLegacy } from "react-flow-renderer";
 import { useStore as getStoreStateFlowNext } from "react-flow-renderer-lts";
+import { useStore as useStoreFlowV12 } from "@xyflow/react";
 
 export interface ReacFlowVersionSupportProps {
     /**
      * Spevifies the context of the react flow renderer version that is used for the component.
+     * @deprecated (v25) `legacy` and `next` will be removed/replaced by `v##` values in future versions
      */
-    flowVersion?: "legacy" | "next" | "none";
+    flowVersion?: "v12" | "legacy" | "next" | "none";
 }
 
 export const useReactFlowVersion = () => {
@@ -17,6 +19,9 @@ export const useReactFlowVersion = () => {
         const [, , zoom] = getStoreStateFlowNext((state) => state.transform);
         return zoom ? "next" : "none";
     } catch {}
-
+    try {
+        const [, , zoom] = useStoreFlowV12((state) => state.transform);
+        return zoom ? "v12" : "none";
+    } catch {}
     return "none";
 };