@eccenca/gui-elements 23.2.0-rc.1 → 23.3.0-rc.0

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

@@ -1,15 +1,15 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow } from "./../../../../cmem";
-import { Elements } from 'react-flow-renderer';
+import React, { useCallback, useEffect, useState } from "react";
+import { Elements } from "react-flow-renderer";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import { NodeDefault } from "./../NodeDefault";
+import { ReactFlow } from "./../../../../cmem";
 import { NodeContent } from "./../NodeContent";
+import { NodeDefault } from "./../NodeDefault";
 import { nodeTypes } from "./../nodeTypes";
 import { Default as NodeContentExample } from "./NodeContent.stories";
 
 export default {
-    title: "Extensions/React Flow/Default Node",
+    title: "Extensions/React Flow/Node",
     component: NodeDefault,
     subcomponents: { NodeContent },
     argTypes: {
@@ -21,7 +21,7 @@ export default {
             type: { required: true },
             description: "Position on React-Flow canvas.",
             table: {
-                type: { summary: "XYPosition" }
+                type: { summary: "XYPosition" },
             },
         },
         type: {
@@ -29,34 +29,34 @@ export default {
             description: "Key of the imported and connected `nodeTypes` to specify what node implementation is used.",
             table: {
                 type: { summary: "string" },
-                defaultValue: { summary: "default" }
+                defaultValue: { summary: "default" },
             },
             options: Object.keys(nodeTypes),
-            mapping: Object.fromEntries(Object.keys(nodeTypes).map(type => [type, type])),
+            mapping: Object.fromEntries(Object.keys(nodeTypes).map((type) => [type, type])),
         },
         style: {
             control: "object",
             description: "css properties",
             table: {
-                type: { summary: "React.CSSProperties" }
+                type: { summary: "React.CSSProperties" },
             },
         },
         className: {
             control: "text",
-            description: "additional class name"
+            description: "additional class name",
         },
         targetPosition: {
             description: "'left' | 'right' | 'top' | 'bottom' handle position",
             table: {
                 type: { summary: "Position" },
-                defaultValue: { summary: "Position.Left" }
+                defaultValue: { summary: "Position.Left" },
             },
         },
         sourcePosition: {
             description: "'left' | 'right' | 'top' | 'bottom' handle position",
             table: {
                 type: { summary: "Position" },
-                defaultValue: { summary: "Position.Right" }
+                defaultValue: { summary: "Position.Right" },
             },
         },
         isHidden: {
@@ -64,7 +64,7 @@ export default {
             description: "if true, the node will not be rendered",
             table: {
                 type: { summary: "boolean" },
-                defaultValue: { summary: "false" }
+                defaultValue: { summary: "false" },
             },
         },
         draggable: {
@@ -72,7 +72,7 @@ export default {
             description: "if option is not set, the node is draggable (overwrites general nodesDraggable option)",
             table: {
                 type: { summary: "boolean" },
-                defaultValue: { summary: "true" }
+                defaultValue: { summary: "true" },
             },
         },
         connectable: {
@@ -80,7 +80,7 @@ export default {
             description: "if option is not set, the node is connectable (overwrites general nodesConnectable option)",
             table: {
                 type: { summary: "boolean" },
-                defaultValue: { summary: "true" }
+                defaultValue: { summary: "true" },
             },
         },
         selectable: {
@@ -88,12 +88,12 @@ export default {
             description: "if option is not set, the node is selectable (overwrites general elementsSelectable option)",
             table: {
                 type: { summary: "boolean" },
-                defaultValue: { summary: "true" }
+                defaultValue: { summary: "true" },
             },
         },
         dragHandle: {
             control: "text",
-            description: "selector for specifying an element as a drag handle"
+            description: "selector for specifying an element as a drag handle",
         },
     },
 } as ComponentMeta<typeof NodeDefault>;
@@ -104,9 +104,7 @@ const NodeDefaultExample = (args: any) => {
     //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
 
     useEffect(() => {
-        setElements([
-            args
-        ] as Elements);
+        setElements([args] as Elements);
     }, [args]);
 
     const onLoad = useCallback(
@@ -118,23 +116,23 @@ const NodeDefaultExample = (args: any) => {
         [reactflowInstance]
     );
 
-    return <ReactFlow
-        elements={elements}
-        style={{ height: '400px' }}
-        onLoad={onLoad}
-        nodeTypes={ nodeTypes }
-        defaultZoom={1}
-    />
-}
+    return (
+        <ReactFlow
+            elements={elements}
+            style={{ height: "400px" }}
+            onLoad={onLoad}
+            nodeTypes={nodeTypes}
+            defaultZoom={1}
+        />
+    );
+};
 
-const Template: ComponentStory<typeof NodeDefault> = (args) => (
-    <NodeDefaultExample {...args} /*some comment*/ />
-);
+const Template: ComponentStory<typeof NodeDefault> = (args) => <NodeDefaultExample {...args} /*some comment*/ />;
 
 export const Default = Template.bind({});
 Default.args = {
-    id: '1',
-    type: 'default',
+    id: "1",
+    type: "default",
     data: NodeContentExample.args,
     position: { x: 50, y: 50 },
 };