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

package/src/components/Workspace/WorkspaceContent.tsx

@@ -1,24 +1,19 @@
 import React from "react";
+
 // import PropTypes from 'prop-types';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import Grid, { GridProps } from "./../Grid/Grid";
 import GridRow from "./../Grid/GridRow";
 
-export interface WorkspaceContentProps extends GridProps {};
+export type WorkspaceContentProps = GridProps;
 
-export const WorkspaceContent = ({ children, className = '', ...restProps }: WorkspaceContentProps) => {
+export const WorkspaceContent = ({ children, className = "", ...restProps }: WorkspaceContentProps) => {
     return (
-        <Grid
-            {...restProps}
-            as={'article'}
-            className={`${eccgui}-workspace__content ` + className}
-            fullWidth={true}
-        >
-            <GridRow dontWrapColumns={false}>
-                { children }
-            </GridRow>
+        <Grid {...restProps} as={"article"} className={`${eccgui}-workspace__content ` + className} fullWidth={true}>
+            <GridRow dontWrapColumns={false}>{children}</GridRow>
         </Grid>
-    )
-}
+    );
+};
 
 export default WorkspaceContent;

package/src/components/Workspace/WorkspaceHeader.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface WorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -11,12 +12,12 @@ export interface WorkspaceHeaderProps extends React.HTMLAttributes<HTMLDivElemen
 
 export type IWorkspaceHeaderProps = WorkspaceHeaderProps;
 
-export const WorkspaceHeader = ({ children, className = '', ...otherProps }: WorkspaceHeaderProps) => {
+export const WorkspaceHeader = ({ children, className = "", ...otherProps }: WorkspaceHeaderProps) => {
     return (
         <div className={`${eccgui}-workspace__header ` + className} {...otherProps}>
-            { children }
+            {children}
         </div>
-    )
-}
+    );
+};
 
 export default WorkspaceHeader;

package/src/components/Workspace/WorkspaceMain.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import GridColumn, { GridColumnProps } from "./../Grid/GridColumn";
 
-export interface WorkspaceMainProps extends GridColumnProps {};
+export type WorkspaceMainProps = GridColumnProps;
 
 export const WorkspaceMain = ({ children, className = "", ...restProps }: GridColumnProps) => {
     return (
@@ -10,6 +12,6 @@ export const WorkspaceMain = ({ children, className = "", ...restProps }: GridCo
             {children}
         </GridColumn>
     );
-}
+};
 
 export default WorkspaceMain;

package/src/components/Workspace/WorkspaceSide.tsx

@@ -1,19 +1,21 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import GridColumn, { GridColumnProps } from "./../Grid/GridColumn";
 
-export interface WorkspaceSideProps extends GridColumnProps {};
+export type WorkspaceSideProps = GridColumnProps;
 
-export const WorkspaceSide = ({ children, className = '', ...restProps }: GridColumnProps) => {
+export const WorkspaceSide = ({ children, className = "", ...restProps }: GridColumnProps) => {
     return (
         <GridColumn
             {...restProps}
-            className={`${eccgui}-workspace__side `+className}
-            carbonSizeConfig={{ sm:4, md:8, lg:5, xlg:5 }}
+            className={`${eccgui}-workspace__side ` + className}
+            carbonSizeConfig={{ sm: 4, md: 8, lg: 5, xlg: 5 }}
         >
-            { children }
+            {children}
         </GridColumn>
-    )
-}
+    );
+};
 
 export default WorkspaceSide;

package/src/components/Workspace/_header.scss

@@ -3,7 +3,7 @@ $eccgui-color-workspace-background: #f5f5f5 !default;
 .#{$eccgui}-workspace__header {
     flex-grow: 1;
     min-width: 0;
-    padding: mini-units(1);
     height: mini-units(8);
+    padding: mini-units(1);
     background-color: $eccgui-color-workspace-background;
 }

package/src/components/Workspace/workspace.scss

@@ -1,6 +1,6 @@
-@import 'header';
+@import "header";
 
 html {
-    background-color: $eccgui-color-workspace-background;
     color: $eccgui-color-workspace-text;
+    background-color: $eccgui-color-workspace-background;
 }

package/src/components/index.scss

@@ -4,7 +4,6 @@
 @import "./Button/button";
 @import "./Card/card";
 @import "./Checkbox/checkbox";
-@import "./ContextOverlay/contextoverlay";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
 @import "./Form/form";
@@ -16,6 +15,7 @@
 @import "./Label/label";
 @import "./Link/link";
 @import "./Menu/menu";
+@import "./ContextOverlay/contextoverlay";
 @import "./Notification/notification";
 @import "./OverviewItem/overviewitem";
 @import "./Pagination/pagination";

package/src/components/interfaces.ts

@@ -1,8 +1,8 @@
 export interface TestableComponent {
     /**
      * Can be set to use it as selector in test environments.
+     * It is also possible to use `data-testid`.
      */
-    "data-test-id"?: string
+    "data-test-id"?: string;
+    "data-testid"?: string;
 }
-
-export type { ContextOverlayProps } from "./ContextOverlay/ContextOverlay";

package/src/configuration/constants.ts

@@ -1,2 +1,2 @@
 // basic vars
-export const CLASSPREFIX = 'eccgui';
+export const CLASSPREFIX = "eccgui";

package/src/extensions/_index.scss

@@ -1,4 +1,5 @@
 @import "./react-flow/react-flow";
+
 /*
 CodeMirror styles are already included by the base component styles
 because it is used as lib for elements there already. 

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import { CodeEditor } from "./CodeMirror";
 
@@ -9,14 +9,12 @@ export default {
     //parameters: { actions: { argTypesRegex: '^on.*' } },
     argTypes: {
         onChange: {
-            action: "value changed"
-        }
+            action: "value changed",
+        },
     },
 } as ComponentMeta<typeof CodeEditor>;
 
-const TemplateFull: ComponentStory<typeof CodeEditor> = (args) => (
-    <CodeEditor {...args} />
-);
+const TemplateFull: ComponentStory<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
 
 export const BasicExample = TemplateFull.bind({});
 BasicExample.args = {

package/src/extensions/react-flow/_config.scss

@@ -6,15 +6,12 @@ $reactflow-node-color: $eccgui-color-workspace-text !default;
 $reactflow-node-font-size: $eccgui-size-typo-caption !default;
 $reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
-
 $reactflow-edge-stroke-opacity-default: 0.6 !default;
 $reactflow-edge-stroke-opacity-hover: 0.8 !default;
 $reactflow-edge-stroke-opacity-selected: 1 !default;
 $reactflow-edge-stroke-color-default: $eccgui-color-workspace-text !default;
 $reactflow-edge-stroke-color-hover: $eccgui-color-workspace-text !default;
 $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;
-
 $reactflow-transition-time: 0.25s !default;
 $reactflow-transition-function: "" !default;
-
 $reactflow-transition-anglestart: -90deg;

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

@@ -1,17 +1,13 @@
-import React, { memo } from 'react';
-import {
-    EdgeProps as ReactFlowEdgeProps,
-} from "react-flow-renderer/dist/types";
-import {
-    getMarkerEnd,
-    getEdgeCenter,
-    EdgeText,
-} from "react-flow-renderer";
+import React, { memo } from "react";
+import { EdgeText, getEdgeCenter, getMarkerEnd } from "react-flow-renderer";
+import { EdgeProps as ReactFlowEdgeProps } from "react-flow-renderer/dist/types";
+
+import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { IntentTypes, intentClassName } from "../../../common/Intent";
+
 import { nodeContentUtils } from "./../nodes/NodeContent";
 import { NodeHighlightColor } from "./../nodes/sharedTypes";
-import { drawEdgeStraight, drawEdgeStep } from "./utils";
+import { drawEdgeStep, drawEdgeStraight } from "./utils";
 
 export interface EdgeDefaultDataProps {
     /**
@@ -49,41 +45,29 @@ export interface EdgeDefaultProps extends ReactFlowEdgeProps {
     /**
      * Defining content and markers for the edge.
      */
-    data?: EdgeDefaultDataProps,
+    data?: EdgeDefaultDataProps;
     /**
      * Callback handler that returns a SVG path as string to define how the edge is rendered.
      */
     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((edge: EdgeDefaultProps) => {
+    const { data = {}, drawSvgPath = drawEdgeStraight, ...edgeOriginalProperties } = edge;
+    const { pathGlowWidth = 10, markerStart, strokeType, intent, highlightColor } = 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 ? (
+    const edgeLabel =
+        data.renderLabel?.(edgeCenter) ??
+        (edgeOriginalProperties.label ? (
             <EdgeText
                 x={edgeCenter[0]}
                 y={edgeCenter[1]}
@@ -96,67 +80,65 @@ export const EdgeDefault = memo(
             />
         ) : 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 && (
-                    <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}
-                    />
-                )}
+    return (
+        <g
+            className={createEdgeDefaultClassName({ intent }, "")}
+            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({strokeType})}
-                    markerStart={markerStart}
-                    markerEnd={markerEnd}
+                    className={createEdgeDefaultClassName({}, "react-flow__edge-path-glow")}
+                    strokeWidth={pathGlowWidth}
                 />
-                { edgeLabel }
-            </g>
-        );
-    }
-);
+            )}
+            <path
+                d={pathDisplay}
+                className={createEdgeDefaultClassName({ strokeType })}
+                markerStart={markerStart}
+                markerEnd={markerEnd}
+            />
+            {edgeLabel}
+        </g>
+    );
+});
 
-const createEdgeDefaultClassName = ({
-    strokeType,
-    intent,
-    highlightColor,
-}: EdgeDefaultDataProps, baseClass: string = "react-flow__edge-path") => {
-    const {
-        highlightClassNameSuffix,
-    } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
-    return baseClass +
-    (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
-    (intent ? ` ${intentClassName(intent)}` : "") +
-    (highlightClassNameSuffix.length > 0
-        ? highlightClassNameSuffix.map(highlight => ` ${eccgui}-graphviz__edge--highlight-${highlight}`).join("")
-        : ""
+const createEdgeDefaultClassName = (
+    { strokeType, intent, highlightColor }: EdgeDefaultDataProps,
+    baseClass = "react-flow__edge-path"
+) => {
+    const { highlightClassNameSuffix } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
+    return (
+        baseClass +
+        (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
+        (intent ? ` ${intentClassName(intent)}` : "") +
+        (highlightClassNameSuffix.length > 0
+            ? highlightClassNameSuffix.map((highlight) => ` ${eccgui}-graphviz__edge--highlight-${highlight}`).join("")
+            : "")
     );
-}
+};
 
 export const edgeDefaultUtils = {
     createEdgeDefaultClassName,
     drawEdgeStep,
     drawEdgeStraight,
-}
+};

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

@@ -1,5 +1,6 @@
-import React, { memo } from 'react';
-import { EdgeDefaultProps, EdgeDefaultDataProps, EdgeDefault} from "./EdgeDefault";
+import React, { memo } from "react";
+
+import { EdgeDefault, EdgeDefaultDataProps, EdgeDefaultProps } from "./EdgeDefault";
 import { drawEdgeStep } from "./utils";
 
 interface EdgeStepDataProps extends EdgeDefaultDataProps {
@@ -7,13 +8,9 @@ interface EdgeStepDataProps extends EdgeDefaultDataProps {
 }
 
 export interface EdgeStepProps extends EdgeDefaultProps {
-    data?: EdgeStepDataProps,
+    data?: EdgeStepDataProps;
 }
 
-export const EdgeStep = memo(
-    (edge: EdgeStepProps) => {
-        return (
-            <EdgeDefault {...edge} drawSvgPath={drawEdgeStep} />
-        );
-    }
-);
+export const EdgeStep = memo((edge: EdgeStepProps) => {
+    return <EdgeDefault {...edge} drawSvgPath={drawEdgeStep} />;
+});

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

@@ -1,9 +1,8 @@
-import React, {memo} from 'react';
-import {ContextOverlay} from "../../../index";
-import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
-import {
-    PopoverInteractionKind as BlueprintPopoverInteractionKind,
-} from "@blueprintjs/core";
+import React, { memo } from "react";
+import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ContextOverlay } from "../../../index";
 
 import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
 
@@ -17,25 +16,19 @@ export interface EdgeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element | JSX.Element[];
 }
 
-export const EdgeTools = memo(
-    ({
-        posOffset,
-        children,
-        ...otherProps
-    }: EdgeToolsProps) => {
-        return (
-            <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }}>
-                <ContextOverlay
-                    {...otherProps}
-                    defaultIsOpen={true}
-                    autoFocus={true}
-                    interactionKind={BlueprintPopoverInteractionKind.HOVER}
-                    content={<div className={`${eccgui}-graphviz__edgetools-content`}>{children}</div>}
-                    popoverClassName={`${eccgui}-graphviz__edgetools-overlay`}
-                >
-                    <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />
-                </ContextOverlay>
-            </div>
-        );
-    }
-);
+export const EdgeTools = memo(({ posOffset, children, ...otherProps }: EdgeToolsProps) => {
+    return (
+        <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }}>
+            <ContextOverlay
+                {...otherProps}
+                defaultIsOpen={true}
+                autoFocus={true}
+                interactionKind={BlueprintPopoverInteractionKind.HOVER}
+                content={<div className={`${eccgui}-graphviz__edgetools-content`}>{children}</div>}
+                popoverClassName={`${eccgui}-graphviz__edgetools-overlay`}
+            >
+                <div className={`${eccgui}-graphviz__edgetools-target`} style={{ ...posOffset }} />
+            </ContextOverlay>
+        </div>
+    );
+});

package/src/extensions/react-flow/edges/getSmoothStepPath.ts

@@ -50,8 +50,8 @@ export function getSmoothStepPath({
     const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
     const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
     const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
-    const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
-    const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
+    const cX = typeof centerX !== "undefined" ? centerX : _centerX;
+    const cY = typeof centerY !== "undefined" ? centerY : _centerY;
 
     let firstCornerPath = "";
     let secondCornerPath = "";

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

@@ -1,27 +1,35 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { loremIpsum } from 'react-lorem-ipsum';
-import { EdgeLabel, IconButton, Badge, Icon, OverflowText } from "./../../../../../index";
-import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+import { loremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { helpersArgTypes } from "../../../../../.storybook/helpers";
 
+import { Badge, EdgeLabel, Icon, IconButton, OverflowText } from "./../../../../../index";
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+
 export default {
     title: "Extensions/React Flow/Custom EdgeLabel",
     component: EdgeLabel,
     argTypes: {
         depiction: {
             control: "select",
-            options: [...(Object.keys(canonicalIcons))],
+            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")} />,
+                "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>,
+                "Icon badge": (
+                    <Badge intent="accent" size="small">
+                        <Icon name="undefined" small />
+                    </Badge>
+                ),
             },
         },
         intent: {
@@ -30,11 +38,9 @@ export default {
     },
 } as ComponentMeta<typeof EdgeLabel>;
 
-const Template: ComponentStory<typeof EdgeLabel> = (args) => (
-    <EdgeLabel {...args} />
-);
+const Template: ComponentStory<typeof EdgeLabel> = (args) => <EdgeLabel {...args} />;
 
-const labelText = loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString()
+const labelText = loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString();
 
 export const Default = Template.bind({});
 Default.args = {
@@ -45,4 +51,4 @@ export const ReverseEllipsisLabel = Template.bind({});
 ReverseEllipsisLabel.args = {
     text: <OverflowText ellipsis="reverse">{labelText}</OverflowText>,
     title: labelText,
-}
+};