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

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

@@ -1,17 +1,19 @@
 import React from "react";
-import Color from "color";
-import { Resizable } from "re-resizable";
 import { Position, useStoreState as getStoreStateFlowLegacy } from "react-flow-renderer";
 import { useStore as getStoreStateFlowNext } from "react-flow-renderer-lts";
-import { Icon, Depiction, OverflowText } from "../../../index";
-import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
-import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import Color from "color";
+import { Resizable } from "re-resizable";
+
+import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { DepictionProps } from "../../../components/Depiction/Depiction";
-import { IntentTypes, intentClassName } from "../../../common/Intent";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { Depiction, Icon, OverflowText } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
-import { HandleDefault, HandleProps, HandleNextProps } from "./../handles/HandleDefault";
-import { NodeProps } from "./NodeDefault";
+
+import { HandleDefault, HandleNextProps, HandleProps } from "./../handles/HandleDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
+import { NodeProps } from "./NodeDefault";
 import { HighlightingState, NodeHighlightColor } from "./sharedTypes";
 
 // @deprecated use `NodeContentProps<any>['highlightedState']` (or import from `src/extensions/react-flow/nodes/sharedTypes`)
@@ -24,7 +26,7 @@ interface NodeContentHandleLegacyProps extends HandleProps {
 // @deprecated use `NodeContentHandleProps`
 export type IHandleProps = NodeContentHandleLegacyProps;
 
-interface NodeContentHandleNextProps extends HandleNextProps {
+export interface NodeContentHandleNextProps extends HandleNextProps {
     category?: "configuration";
 }
 
@@ -74,7 +76,8 @@ interface NodeContentData<CONTENT_PROPS = any> {
 }
 
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
-    extends NodeContentData, ReacFlowVersionSupportProps,
+    extends NodeContentData,
+        ReacFlowVersionSupportProps,
         Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * Size of the node.
@@ -174,12 +177,12 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.
      */
-    targetPosition?: typeof Position[keyof typeof Position];
+    targetPosition?: (typeof Position)[keyof typeof Position];
     /**
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.
      */
-    sourcePosition?: typeof Position[keyof typeof Position];
+    sourcePosition?: (typeof Position)[keyof typeof Position];
     /**
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.
@@ -230,7 +233,7 @@ const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"])
         default:
             return [];
     }
-}
+};
 
 const getDefaultMinimalTooltipData = (node: any) => {
     return {
@@ -241,7 +244,14 @@ const getDefaultMinimalTooltipData = (node: any) => {
     };
 };
 
-const addHandles = (handles: any, position: any, posDirection: any, isConnectable: any, nodeStyle: any, flowVersion: any = "legacy") => {
+const addHandles = (
+    handles: any,
+    position: any,
+    posDirection: any,
+    isConnectable: any,
+    nodeStyle: any,
+    flowVersion: any = "legacy"
+) => {
     return handles[position].map((handle: any, idx: any) => {
         const { className, style = {}, category } = handle;
         const styleAdditions: { [key: string]: string } = {
@@ -255,7 +265,7 @@ const addHandles = (handles: any, position: any, posDirection: any, isConnectabl
                 style: { ...style, ...styleAdditions },
                 posdirection: posDirection,
                 isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
-                className: !!category
+                className: category
                     ? (className ? className + " " : "") +
                       gethighlightedStateClasses(category, `${eccgui}-graphviz__handle`)
                     : className,
@@ -265,14 +275,9 @@ const addHandles = (handles: any, position: any, posDirection: any, isConnectabl
     });
 };
 
-const gethighlightedStateClasses = (
-    state: HighlightingState | HighlightingState[],
-    baseClassName: string
-) => {
-    let hightlights = typeof state === "string" ? [state] : state;
-    return hightlights.map(
-        (item : HighlightingState) => `${baseClassName}--highlight-${item}`
-    ).join(" ");
+const gethighlightedStateClasses = (state: HighlightingState | HighlightingState[], baseClassName: string) => {
+    const hightlights = typeof state === "string" ? [state] : state;
+    return hightlights.map((item: HighlightingState) => `${baseClassName}--highlight-${item}`).join(" ");
 };
 
 const MemoHandler = React.memo(
@@ -281,9 +286,8 @@ const MemoHandler = React.memo(
         return (
             // we only test a few properties to control re-rendering
             // need to be extended if also other properties need to be changed late
-            prev.style[prev.posdirection] === next.style[next.posdirection]
-            && prev.isConnectable === next.isConnectable
-        )
+            prev.style[prev.posdirection] === next.style[next.posdirection] && prev.isConnectable === next.isConnectable
+        );
     }
 );
 
@@ -336,27 +340,36 @@ export function NodeContent<CONTENT_PROPS = any>({
     const evaluateFlowVersion = useReactFlowVersion();
     const flowVersionCheck = flowVersion || evaluateFlowVersion;
 
-    const {
-        handles = defaultHandles(flowVersionCheck),
-        ...otherProps
-    } = otherDomProps;
+    const { handles = defaultHandles(flowVersionCheck), ...otherProps } = otherDomProps;
 
-    const isResizeable = (!!onNodeResize && minimalShape === "none");
+    const isResizeable = !!onNodeResize && minimalShape === "none";
     const [width, setWidth] = React.useState<number>(nodeDimensions?.width ?? 0);
     const [height, setHeight] = React.useState<number>(nodeDimensions?.height ?? 0);
     let zoom = 1;
-    if (isResizeable) try {
-        [, , zoom] = flowVersionCheck === "legacy"
-            ? getStoreStateFlowLegacy((state) => state.transform)
-            : getStoreStateFlowNext((state) => state.transform);
-    } catch {}
+    if (isResizeable)
+        try {
+            [, , zoom] =
+                flowVersionCheck === "legacy"
+                    ? getStoreStateFlowLegacy((state) => state.transform)
+                    : getStoreStateFlowNext((state) => state.transform);
+        } catch (error) {
+            // do not handle error but at least push it to the console
+            console.error(error);
+        }
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
     const nodeContentRef = React.useRef<any>();
-    const handleStack = flowVersionCheck==="legacy" ? {} as { [key: string]: NodeContentHandleLegacyProps[] } : {} as { [key: string]: NodeContentHandleNextProps[] };
-    handleStack[Position.Top] = flowVersionCheck==="legacy" ? [] as NodeContentHandleLegacyProps[] : [] as NodeContentHandleNextProps[];
-    handleStack[Position.Right] = flowVersionCheck==="legacy" ? [] as NodeContentHandleLegacyProps[] : [] as NodeContentHandleNextProps[];
-    handleStack[Position.Bottom] = flowVersionCheck==="legacy" ? [] as NodeContentHandleLegacyProps[] : [] as NodeContentHandleNextProps[];
-    handleStack[Position.Left] = flowVersionCheck==="legacy" ? [] as NodeContentHandleLegacyProps[] : [] as NodeContentHandleNextProps[];
+    const handleStack =
+        flowVersionCheck === "legacy"
+            ? ({} as { [key: string]: NodeContentHandleLegacyProps[] })
+            : ({} as { [key: string]: NodeContentHandleNextProps[] });
+    handleStack[Position.Top] =
+        flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
+    handleStack[Position.Right] =
+        flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
+    handleStack[Position.Bottom] =
+        flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
+    handleStack[Position.Left] =
+        flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
 
     // initial dimension before resize
     React.useEffect(() => {
@@ -383,7 +396,7 @@ export function NodeContent<CONTENT_PROPS = any>({
 
     if (handles.length > 0) {
         handles.forEach((handle) => {
-            if (!!handle.position) {
+            if (handle.position) {
                 handleStack[handle.position].push(handle);
             } else if (handle.category === "configuration") {
                 handleStack[Position.Top].push(handle);
@@ -397,7 +410,7 @@ export function NodeContent<CONTENT_PROPS = any>({
             }
         });
     }
-    const styleExpandDimensions: { [key: string]: string | number } = {};
+    const styleExpandDimensions: { [key: string]: string | number } = Object.create(null);
     if (
         typeof adaptHeightForHandleMinCount !== "undefined" &&
         (minimalShape === "none" || !!selected) &&
@@ -410,12 +423,13 @@ export function NodeContent<CONTENT_PROPS = any>({
         styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
     }
 
-    const {
-        highlightClassNameSuffix,
-        highlightCustomPropertySettings
-    } = evaluateHighlightColors("--node-highlight", highlightColor);
+    const { highlightClassNameSuffix, highlightCustomPropertySettings } = evaluateHighlightColors(
+        "--node-highlight",
+        highlightColor
+    );
 
-    const resizableStyles = (!!onNodeResize === true && minimalShape === "none" && (width + height > 0)) ? { width, height } : {};
+    const resizableStyles =
+        !!onNodeResize === true && minimalShape === "none" && width + height > 0 ? { width, height } : {};
     const nodeContent = (
         <>
             <section
@@ -430,10 +444,11 @@ export function NodeContent<CONTENT_PROPS = any>({
                     (border ? ` ${eccgui}-graphviz__node--border-${border}` : "") +
                     (intent ? ` ${intentClassName(intent)}` : "") +
                     (highlightClassNameSuffix.length > 0
-                        ? highlightClassNameSuffix.map(highlight => ` ${eccgui}-graphviz__node--highlight-${highlight}`).join("")
-                        : ""
-                    ) +
-                    (!!highlightedState
+                        ? highlightClassNameSuffix
+                              .map((highlight) => ` ${eccgui}-graphviz__node--highlight-${highlight}`)
+                              .join("")
+                        : "") +
+                    (highlightedState
                         ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`)
                         : "") +
                     (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
@@ -441,13 +456,15 @@ export function NodeContent<CONTENT_PROPS = any>({
                     (letPassWheelEvents === false ? ` nowheel` : "")
                 }
             >
-                <header className={
-                    `${eccgui}-graphviz__node__header` +
-                    ((enlargeHeader && minimalShape==="none") ? ` ${eccgui}-graphviz__node__header--large` : "")
-                }>
+                <header
+                    className={
+                        `${eccgui}-graphviz__node__header` +
+                        (enlargeHeader && minimalShape === "none" ? ` ${eccgui}-graphviz__node__header--large` : "")
+                    }
+                >
                     {(!!iconName || !!depiction || !!leftElement) && (
                         <div className={`${eccgui}-graphviz__node__header-depiction`}>
-                            { leftElement }
+                            {leftElement}
                             {!!depiction && !leftElement && typeof depiction === "string" && (
                                 <Depiction
                                     image={<img src={depiction} alt="" />}
@@ -459,7 +476,9 @@ export function NodeContent<CONTENT_PROPS = any>({
                                     forceInlineSvg
                                 />
                             )}
-                            {!!depiction && !leftElement && typeof depiction !== "string" && (
+                            {!!depiction &&
+                                !leftElement &&
+                                typeof depiction !== "string" &&
                                 React.cloneElement(depiction, {
                                     caption: minimalShape === "none" || selected ? typeLabel : undefined,
                                     captionPosition: "tooltip",
@@ -467,8 +486,7 @@ export function NodeContent<CONTENT_PROPS = any>({
                                     ratio: "1:1",
                                     resizing: "contain",
                                     forceInlineSvg: true,
-                                })
-                            )}
+                                })}
                             {!!iconName && !leftElement && !depiction && (
                                 <Depiction
                                     image={<Icon name={iconName} />}
@@ -482,16 +500,19 @@ export function NodeContent<CONTENT_PROPS = any>({
                             )}
                         </div>
                     )}
-                    <div className={`${eccgui}-graphviz__node__header-label`} title={typeof label==="string" ? label : undefined}>
-                        {
-                            typeof label === "string"
-                                ? <OverflowText className={`${eccgui}-graphviz__node__header-label__mainline`}>{label}</OverflowText>
-                                : <div className={`${eccgui}-graphviz__node__header-label__mainline`}>{label}</div>
-                        }
+                    <div
+                        className={`${eccgui}-graphviz__node__header-label`}
+                        title={typeof label === "string" ? label : undefined}
+                    >
+                        {typeof label === "string" ? (
+                            <OverflowText className={`${eccgui}-graphviz__node__header-label__mainline`}>
+                                {label}
+                            </OverflowText>
+                        ) : (
+                            <div className={`${eccgui}-graphviz__node__header-label__mainline`}>{label}</div>
+                        )}
                         {!!labelSubline && (
-                            <div className={`${eccgui}-graphviz__node__header-label__subline`}>
-                                { labelSubline }
-                            </div>
+                            <div className={`${eccgui}-graphviz__node__header-label__subline`}>{labelSubline}</div>
                         )}
                     </div>
                     {(menuButtons || (showExecutionButtons && executionButtons)) && (
@@ -509,11 +530,7 @@ export function NodeContent<CONTENT_PROPS = any>({
                     </div>
                 )}
                 {contentExtension}
-                 {footerContent && (
-                     <footer className={`${eccgui}-graphviz__node__footer`}>
-                        { footerContent }
-                     </footer>
-                 )}
+                {footerContent && <footer className={`${eccgui}-graphviz__node__footer`}>{footerContent}</footer>}
             </section>
             {!!handles && (
                 <>
@@ -553,7 +570,7 @@ export function NodeContent<CONTENT_PROPS = any>({
         </Resizable>
     );
 
-    return (isResizeable) ? resizableNode() : nodeContent;
+    return isResizeable ? resizableNode() : nodeContent;
 }
 
 const evaluateHighlightColors = (
@@ -565,8 +582,8 @@ const evaluateHighlightColors = (
         [`${baseCustomProperty}-alternate-color`]: undefined,
     } as React.CSSProperties;
     const classesHightlightColors = [] as string[];
-    if (!!highlightColor) {
-        const highlightingColors = (typeof highlightColor === "string") ? [highlightColor] : highlightColor;
+    if (highlightColor) {
+        const highlightingColors = typeof highlightColor === "string" ? [highlightColor] : highlightColor;
         (highlightingColors as Array<string>).map((color, idx) => {
             switch (color) {
                 case "default":
@@ -575,26 +592,27 @@ const evaluateHighlightColors = (
                 case "alternate":
                     classesHightlightColors.push("alternate");
                     break;
-                default:
+                default: {
                     classesHightlightColors.push("custom");
-                    let customColor = Color("#ffffff")
+                    let customColor = Color("#ffffff");
                     try {
                         customColor = Color(color);
-                    } catch(ex) {
-                        console.warn("Received invalid color for highlight: " + color)
+                    } catch (ex) {
+                        console.warn("Received invalid color for highlight: " + color);
                     }
                     if (idx === 0) {
                         styleHighlightColors = {
                             ...styleHighlightColors,
                             [`${baseCustomProperty}-default-color`]: customColor.rgb().toString(),
-                        } as React.CSSProperties
+                        } as React.CSSProperties;
                     } else {
                         styleHighlightColors = {
                             ...styleHighlightColors,
                             [`${baseCustomProperty}-alternate-color`]: customColor.rgb().toString(),
-                        } as React.CSSProperties
+                        } as React.CSSProperties;
                     }
                     break;
+                }
             }
             return color;
         });
@@ -603,10 +621,10 @@ const evaluateHighlightColors = (
     return {
         highlightClassNameSuffix: classesHightlightColors,
         highlightCustomPropertySettings: styleHighlightColors,
-    }
-}
+    };
+};
 
 export const nodeContentUtils = {
     evaluateHighlightColors,
-    gethighlightedStateClasses
-}
+    gethighlightedStateClasses,
+};

package/src/index.ts

@@ -9,13 +9,10 @@ const ClassNames = {
 // @deprecated use `ClassNames`
 const HelperClasses = ClassNames;
 
+export * from "./configuration/constants";
 export * from "./common";
 export * from "./components";
 export * from "./extensions";
 export * from "./cmem";
 
-export {
-    ClassNames,
-    HelperClasses,
-    LegacyReplacements,
-};
+export { ClassNames, HelperClasses, LegacyReplacements };

package/src/components/AutoSuggestion/stories/AutoSuggestion.stories.tsx

@@ -1,83 +0,0 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
-import { AutoSuggestion, AutoSuggestionProps } from "../../../../index";
-import { IPartialAutoCompleteResult } from "../AutoSuggestion";
-
-export default {
-    title: "Forms/AutoSuggestion",
-    component: AutoSuggestion,
-    argTypes: {}
-} as Meta<typeof AutoSuggestion>;
-
-const Template: StoryFn<typeof AutoSuggestion> = (args) => (
-    <AutoSuggestion {...args}></AutoSuggestion>
-);
-
-const resultList = [
-    "find me",
-    "item",
-    "auto-completion result"
-]
-
-const defaultProps: AutoSuggestionProps = {
-    initialValue: "",
-    fetchSuggestions(inputString: string, cursorPosition: number): IPartialAutoCompleteResult | undefined | Promise<IPartialAutoCompleteResult | undefined> {
-        const stringBeforeCursor = inputString.substring(0, cursorPosition)
-        const lastSpaceIdx = stringBeforeCursor.lastIndexOf(" ")
-        const searchWordStart = lastSpaceIdx >= 0 ? lastSpaceIdx + 1 : 0
-        const lastWordBeforeCursor = stringBeforeCursor.substring(searchWordStart, stringBeforeCursor.length).toLowerCase().trim()
-        const replacements = resultList.filter(item => item.toLowerCase().includes(lastWordBeforeCursor))
-        if (replacements.length) {
-            return {
-                cursorPosition: cursorPosition,
-                inputString: inputString,
-                replacementResults: [{
-                    extractedQuery: lastWordBeforeCursor,
-                    replacementInterval: {
-                        from: searchWordStart,
-                        length: lastWordBeforeCursor.length
-                    },
-                    replacements: replacements.map((v) => ({
-                        label: `Label of '${v}'`,
-                        description: `Description of '${v}'`,
-                        value: v
-                    }))
-                }]
-            }
-        }
-    },
-    placeholder: "The word before the cursor will be auto-completed. At the beginning or after a space, all results are shown.",
-    onChange(): any {
-        // Do nothing
-    },
-}
-
-/** Offers basic auto-completion for the word right before the cursor. */
-export const Default = Template.bind({});
-
-Default.args = defaultProps
-
-/** Shows validation error if the input string contains the word 'not'. */
-export const WithValidation = Template.bind({});
-
-WithValidation.args = {
-    ...defaultProps,
-    initialValue: "Contains not",
-    checkInput: (inputString) => {
-        const notIndex = inputString.indexOf("not")
-        if(notIndex >= 0) {
-            return {
-                valid: false,
-                parseError: {
-                    message: "Strings containing the sub-string 'not' are NOT allowed.",
-                    start: notIndex,
-                    end: notIndex + 3
-                }
-            }
-        } else {
-            return {
-                valid: true
-            }
-        }
-    }
-}

package/src/components/AutocompleteField/stories/AutoCompleteField.stories.tsx

@@ -1,86 +0,0 @@
-import React from "react";
-import {ComponentMeta, ComponentStory} from "@storybook/react";
-
-import {AutoCompleteField, IAutoCompleteFieldProps} from "../AutoCompleteField";
-import {extractSearchWords, matchesAllWords} from "../../Typography/Highlighter";
-import {createNewItemRendererFactory} from "../autoCompleteFieldUtils";
-
-const AutoCompleteFieldStory: ComponentMeta<typeof AutoCompleteField> = {
-    title: "Forms/AutoCompleteField",
-    component: AutoCompleteField,
-    argTypes: {
-    },
-}
-
-const Template: ComponentStory<typeof AutoCompleteField> = (args) => (
-    <AutoCompleteField {...args}></AutoCompleteField>
-);
-
-export const Default = Template.bind({});
-export const AdaptQueryAfterSelection = Template.bind({})
-export const AllowReset = Template.bind({})
-export const AllowCustomValues = Template.bind({})
-export const ReadOnlyState = Template.bind({})
-
-// Renders string values as string
-const defaultRenderer = (item: string) => item
-
-const defaultArgs: IAutoCompleteFieldProps<string, string> = {
-    itemRenderer: (item: string) => `Rendered item: ${item}`,
-    itemValueRenderer: (item: string) => `Selected item: ${item}`,
-    itemValueString: (item: string) => `Query: ${item}`,
-    onSearch: (query: string) => {
-        const multiWord = extractSearchWords(query, true)
-        return ["search item A", "search element B", "search object C"]
-            .filter(word => matchesAllWords(word.toLowerCase(), multiWord))
-    },
-    onChange: elem => {
-        console.log(`Entry '${elem}' selected!`)
-    },
-    itemValueSelector: defaultRenderer,
-    noResultText: "No result",
-}
-
-// Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
-const adaptQueryAfterSelection: IAutoCompleteFieldProps<string, string> = {
-    ...defaultArgs,
-    resetQueryToValue: (selectedValue: string) => selectedValue
-}
-
-// Allows to reset a selection
-const resetSelection: IAutoCompleteFieldProps<string, string> = {
-    ...defaultArgs,
-    reset: {
-        resetValue: "",
-        resetButtonText: "Clear selected value",
-        resettableValue: (value: string) => true
-    }
-}
-
-const allowCustomValues: IAutoCompleteFieldProps<string, string> = {
-    ...defaultArgs,
-    createNewItem: {
-        itemRenderer: createNewItemRendererFactory(
-            (query: string) => `Create new item: ${query}`,
-            "item-add-artefact"
-        ),
-        itemFromQuery: item => item,
-    }
-}
-
-// Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
-const readOnlyState: IAutoCompleteFieldProps<string, string> = {
-    ...defaultArgs,
-    initialValue: "search item B",
-    inputProps: {
-        readOnly: true
-    }
-}
-
-Default.args = defaultArgs;
-AdaptQueryAfterSelection.args = adaptQueryAfterSelection;
-AllowReset.args = resetSelection;
-AllowCustomValues.args = allowCustomValues;
-ReadOnlyState.args = readOnlyState;
-
-export default AutoCompleteFieldStory