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

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

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { EdgeDefaultProps, EdgeDefaultDataProps, EdgeDefault} from "./EdgeDefault";
 import { drawEdgeStep } from "./utils";
 
-export interface EdgeStepDataProps extends EdgeDefaultDataProps {
+interface EdgeStepDataProps extends EdgeDefaultDataProps {
     stepCornerRadius?: number;
 }
 

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

@@ -8,6 +8,7 @@
 import { EdgeDefault } from "./EdgeDefault";
 import { EdgeStep } from "./EdgeStep";
 
+// @deprecated will be removed because it is probably not used this way anymore
 export const edgeTypes = {
     default: EdgeDefault,
     straight: EdgeDefault,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from 'react-lorem-ipsum';
-import { EdgeLabel, IconButton, Badge, Icon } from "./../../../../../index";
+import { EdgeLabel, IconButton, Badge, Icon, OverflowText } from "./../../../../../index";
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 import { helpersArgTypes } from "../../../../../.storybook/helpers";
 
@@ -34,7 +34,15 @@ const Template: ComponentStory<typeof EdgeLabel> = (args) => (
     <EdgeLabel {...args} />
 );
 
+const labelText = loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString()
+
 export const Default = Template.bind({});
 Default.args = {
-    text: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
+    text: labelText,
 };
+
+export const ReverseEllipsisLabel = Template.bind({});
+ReverseEllipsisLabel.args = {
+    text: <OverflowText ellipsis="reverse">{labelText}</OverflowText>,
+    title: labelText,
+}

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

@@ -23,11 +23,10 @@ interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     onClick?: () => void;
 }
 
-export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
-}
+export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {}
+export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {}
 
-export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
-}
+export type HandleDefaultProps = HandleProps | HandleNextProps;
 
 export const HandleDefault = memo(({
     flowVersion,
@@ -35,7 +34,7 @@ export const HandleDefault = memo(({
     tooltip,
     children,
     ...handleProps
-}: HandleProps | HandleNextProps) => {
+}: HandleDefaultProps) => {
     const evaluateFlowVersion = useReactFlowVersion();
     const flowVersionCheck = flowVersion || evaluateFlowVersion;
 

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

@@ -1,24 +1,28 @@
-export { NodeDefault } from "./nodes/NodeDefault";
-export { NodeContent } from "./nodes/NodeContent";
-export { NodeContentExtension } from "./nodes/NodeContentExtension";
-export { NodeTools } from "./nodes/NodeTools";
-export { nodeTypes } from "./nodes/nodeTypes";
-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";
-export { minimapNodeClassName, minimapNodeColor } from "./minimap/utils";
-export { default as nodeUtils } from "./nodes/nodeUtils";
-
-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 { EdgeStepProps } from "./edges/EdgeStep";
-export type { MiniMapProps } from "./minimap/MiniMap";
+import { miniMapUtils } from "./minimap/utils";
+import { nodeDefaultUtils } from "./nodes/nodeUtils";
 
-export * from "./edges/EdgeDefault";
+export * from "./nodes/NodeDefault";
+export * from "./nodes/NodeContent";
+export * from "./nodes/NodeContentExtension";
+export * from "./nodes/NodeTools";
+export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
+export * from "./edges/EdgeDefault";
+export * from "./edges/EdgeStep";
+export * from "./edges/EdgeTools";
+export * from "./edges/EdgeLabel";
+export * from "./markers/ReactFlowMarkers";
+export * from "./minimap/MiniMap";
+export * from "./minimap/utils";
+
+// deprecated exports
+export { nodeTypes } from "./nodes/nodeTypes"; // FIXME: deprecated, remove it later
+export { edgeTypes } from "./edges/edgeTypes"; // FIXME: deprecated, remove it later
+// @deprecated was moved to `miniMapUtils.nodeClassName`
+const minimapNodeClassName = miniMapUtils.nodeClassName;
+// @deprecated was moved to `miniMapUtils.nodeClassName`
+const minimapNodeColor = miniMapUtils.nodeColor;
+export { minimapNodeClassName, minimapNodeColor };
+// @deprecated renamed to `nodeDefaultUtils`
+const nodeUtils = nodeDefaultUtils;
+export { nodeUtils };

package/src/extensions/react-flow/markers/ReactFlowMarkers.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from "react";
 
+// FIXME: we need to check how these markers are used and if we can justify the namings
+
 import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
 
-export const ReactFlowMarkers: FC = () => {
+const ReactFlowMarkers: FC = () => {
     return (
         <svg>
             <defs>
@@ -11,3 +13,8 @@ export const ReactFlowMarkers: FC = () => {
         </svg>
     );
 };
+
+export {
+    MarkerArrowClosedInverse,
+    ReactFlowMarkers
+}

package/src/extensions/react-flow/minimap/MiniMap.tsx

@@ -5,12 +5,7 @@ import {
     OnLoadParams,
 } from "react-flow-renderer";
 import {FlowTransform} from "react-flow-renderer/dist/types";
-import {
-    minimapNodeClassName,
-    minimapNodeColor,
-    minimapBorderColor
-} from "../minimap/utils";
-
+import { miniMapUtils } from "../minimap/utils";
 
 export interface MiniMapProps extends ReactFlowMiniMapProps {
     flowInstance?: OnLoadParams;
@@ -37,9 +32,9 @@ export const MiniMap = memo(({
     flowInstance,
     enableNavigation = false,
     maskColor = "#ddddddbb",
-    nodeClassName = minimapNodeClassName,
-    nodeColor = minimapNodeColor,
-    nodeStrokeColor = minimapBorderColor,
+    nodeClassName = miniMapUtils.nodeClassName,
+    nodeColor = miniMapUtils.nodeColor,
+    nodeStrokeColor = miniMapUtils.borderColor,
     ...minimapProps
 }: MiniMapProps) => {
     const minimapWrapper = React.useRef<HTMLDivElement | null>(null);

package/src/extensions/react-flow/minimap/utils.ts

@@ -1,20 +1,26 @@
 import { CLASSPREFIX as eccgui } from "./../../../configuration/constants";
-import { gethighlightedStateClasses } from "./../nodes/NodeContent";
+import { nodeContentUtils } from "./../nodes/NodeContent";
 import { intentClassName } from "../../../common/Intent";
 
-export const minimapNodeClassName = (node: any) => {
+const nodeClassName = (node: any) => {
     const typeClass = `${eccgui}-graphviz__minimap__node--` + node.type;
-    const stateClass = node.data?.highlightedState ? gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) : "";
+    const stateClass = node.data?.highlightedState ? nodeContentUtils.gethighlightedStateClasses(node.data.highlightedState, `${eccgui}-graphviz__minimap__node`) : "";
     const intentClass = node.data?.intent ? intentClassName(node.data.intent) : "";
     return `${typeClass} ${intentClass} ${stateClass}`;
 };
 
-export const minimapNodeColor = (node: any) => {
+const nodeColor = (node: any) => {
     const fillColor = node.data?.style?.backgroundColor || node.data?.style?.borderColor;
     return fillColor ?? "";
 }
 
-export const minimapBorderColor = (node: any) => {
+const borderColor = (node: any) => {
     const strokeColor = node.data?.style?.borderColor || node.data?.style?.backgroundColor;
     return strokeColor ?? "";
 }
+
+export const miniMapUtils = {
+    nodeClassName,
+    nodeColor,
+    borderColor,
+}

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

@@ -1,5 +1,6 @@
 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";
@@ -11,19 +12,25 @@ import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupp
 import { HandleDefault, HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
-import { Resizable } from "re-resizable";
+import { HighlightingState, NodeHighlightColor } from "./sharedTypes";
 
-export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
-export type NodeHighlightColor = "default" | "alternate" | Color | string;
+// @deprecated use `NodeContentProps<any>['highlightedState']` (or import from `src/extensions/react-flow/nodes/sharedTypes`)
+export type { HighlightingState };
 
-export interface IHandleProps extends HandleProps {
+interface NodeContentHandleLegacyProps extends HandleProps {
     category?: "configuration";
 }
 
+// @deprecated use `NodeContentHandleProps`
+export type IHandleProps = NodeContentHandleLegacyProps;
+
 interface NodeContentHandleNextProps extends HandleNextProps {
     category?: "configuration";
 }
 
+export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
+
+// @deprecated use `NodeContentProps<any>['nodeDimensions']`
 export type NodeDimensions = {
     width: number;
     height: number;
@@ -68,7 +75,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
 
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
     extends NodeContentData, ReacFlowVersionSupportProps,
-        React.HTMLAttributes<HTMLDivElement> {
+        Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -135,7 +142,7 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
      * Array of property definition objects for `Handle` components that need to be created for the node.
      * @see https://reactflow.dev/docs/api/handle/
      */
-    handles?: IHandleProps[] | NodeContentHandleNextProps[];
+    handles?: NodeContentHandleLegacyProps[] | NodeContentHandleNextProps[];
     /**
      * Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
      */
@@ -217,7 +224,7 @@ type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps;
 const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"]) => {
     switch (flowVersion) {
         case "legacy":
-            return [{ type: "target" }, { type: "source" }] as IHandleProps[];
+            return [{ type: "target" }, { type: "source" }] as NodeContentHandleLegacyProps[];
         case "next":
             return [{ type: "target" }, { type: "source" }] as NodeContentHandleNextProps[];
         default:
@@ -258,7 +265,7 @@ const addHandles = (handles: any, position: any, posDirection: any, isConnectabl
     });
 };
 
-export const gethighlightedStateClasses = (
+const gethighlightedStateClasses = (
     state: HighlightingState | HighlightingState[],
     baseClassName: string
 ) => {
@@ -345,11 +352,11 @@ export function NodeContent<CONTENT_PROPS = any>({
     } catch {}
     const [adjustedContentProps, setAdjustedContentProps] = React.useState<Partial<CONTENT_PROPS>>({});
     const nodeContentRef = React.useRef<any>();
-    const handleStack = flowVersionCheck==="legacy" ? {} as { [key: string]: IHandleProps[] } : {} as { [key: string]: NodeContentHandleNextProps[] };
-    handleStack[Position.Top] = flowVersionCheck==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
-    handleStack[Position.Right] = flowVersionCheck==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
-    handleStack[Position.Bottom] = flowVersionCheck==="legacy" ? [] as IHandleProps[] : [] as NodeContentHandleNextProps[];
-    handleStack[Position.Left] = flowVersionCheck==="legacy" ? [] as IHandleProps[] : [] 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(() => {
@@ -549,7 +556,7 @@ export function NodeContent<CONTENT_PROPS = any>({
     return (isResizeable) ? resizableNode() : nodeContent;
 }
 
-export const evaluateHighlightColors = (
+const evaluateHighlightColors = (
     baseCustomProperty: string,
     highlightColor?: NodeHighlightColor | NodeHighlightColor[]
 ) => {
@@ -598,3 +605,8 @@ export const evaluateHighlightColors = (
         highlightCustomPropertySettings: styleHighlightColors,
     }
 }
+
+export const nodeContentUtils = {
+    evaluateHighlightColors,
+    gethighlightedStateClasses
+}

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

@@ -7,7 +7,7 @@ import { Tooltip } from "../../../index";
 import { NodeContent, NodeContentProps } from "./NodeContent";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
-export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
+export interface NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlowVersionSupportProps, ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
@@ -15,13 +15,16 @@ export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReacFlow
     data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>
 }
 
+// @deprecated use NodeDefaultProps
+export type NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> = NodeDefaultProps<NODE_DATA, NODE_CONTENT_PROPS>;
+
 /**
  * The `NodeDefault` element manages the display of React-Flow nodes.
  * This element cannot be used directly, it must be connected via a `nodeTypes` definition and all properties need to be routed through the `elements` property items inside the `ReactFlow` container.
  * @see https://reactflow.dev/docs/api/nodes/
  */
 export const NodeDefault = memo(
-    (node: NodeProps<any>) => {
+    (node: NodeDefaultProps<any>) => {
         const {
             flowVersion,
             data,
@@ -30,7 +33,7 @@ export const NodeDefault = memo(
             isConnectable = true,
             selected
         } = node;
-        
+
         const evaluateFlowVersion = useReactFlowVersion();
         const flowVersionCheck = flowVersion || evaluateFlowVersion;
 
@@ -57,3 +60,5 @@ export const NodeDefault = memo(
         return nodeEl;
     }
 );
+
+export default NodeDefault;

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

@@ -7,6 +7,12 @@ import {ContextOverlay, IconButton} from "../../../index";
 import {CLASSPREFIX as eccgui} from "../../../configuration/constants";
 import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
 
+// Functions regarding the menu that can be called from the outside
+export interface NodeToolsMenuFunctions {
+    /** Closes the menu if its open. */
+    closeMenu: () => void
+}
+
 export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element;
     togglerElement?: ValidIconName | JSX.Element;
@@ -16,12 +22,6 @@ export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any
 }
 
-// Functions regarding the menu that can be called from the outside
-export interface NodeToolsMenuFunctions {
-    /** Closes the menu if its open. */
-    closeMenu: () => void
-}
-
 export const NodeTools = memo(({
     children,
     togglerElement = "item-moremenu",

package/src/extensions/react-flow/nodes/nodeTypes.ts

@@ -1,5 +1,6 @@
 import { NodeDefault } from "./NodeDefault";
 
+// @deprecated will be removed because it is probably not used this way anymore
 export const nodeTypes = {
     default: NodeDefault,
     graphNode: NodeDefault,

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

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 import { Node } from "react-flow-renderer";
 import Color from "color";
 
-interface IStickyNote {
+type IStickyNote = {
     id: string;
     content: string;
     color: string;
@@ -45,9 +45,9 @@ const generateStyleWithColor = (color: string): CSSProperties => {
     return style;
 };
 
-const utils = {
+export const nodeDefaultUtils = {
     generateStyleWithColor,
     transformNodeToStickyNode,
 };
 
-export default utils;
+export default nodeDefaultUtils;

package/src/extensions/react-flow/nodes/sharedTypes.ts

@@ -0,0 +1,3 @@
+import Color from "color";
+export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
+export type NodeHighlightColor = "default" | "alternate" | Color | string;

package/src/includes/blueprintjs/_components.scss

@@ -0,0 +1,6 @@
+@import "~@blueprintjs/core/src/components/button/button-group";
+@import "~@blueprintjs/core/src/components/collapse/collapse";
+@import "~@blueprintjs/core/src/components/context-menu/context-menu";
+@import "~@blueprintjs/core/src/components/overlay/overlay";
+@import "~@blueprintjs/core/src/components/portal/portal";
+@import "~@blueprintjs/core/src/components/progress-bar/progress-bar";

package/src/includes/blueprintjs/_requisits.scss

@@ -0,0 +1,7 @@
+@import "~@blueprintjs/colors/src/colors";
+@import "~@blueprintjs/core/src/common/variables";
+// future home for $icon-classes var @import "~@blueprintjs/core/src/common/variables-extended";
+@import "~@blueprintjs/core/src/common/react-transition";
+@import "~@blueprintjs/core/src/components/icon/icon-mixins";
+@import "~@blueprintjs/core/src/components/icon/icon"; // currently necessary for $icon-classes var
+@import "~@blueprintjs/core/src/accessibility/focus-states";

package/src/index.scss

@@ -16,20 +16,9 @@
 // calculate blueprintjs configuration
 @import "./includes/blueprintjs/variables";
 // load blueprintjs requisists
-@import "~@blueprintjs/colors/src/colors";
-@import "~@blueprintjs/core/src/common/variables";
-// future home for $icon-classes var @import "~@blueprintjs/core/src/common/variables-extended";
-@import "~@blueprintjs/core/src/common/react-transition";
-@import "~@blueprintjs/core/src/components/icon/icon-mixins";
-@import "~@blueprintjs/core/src/components/icon/icon"; // currently necessary for $icon-classes var
-@import "~@blueprintjs/core/src/accessibility/focus-states";
+@import "./includes/blueprintjs/requisits";
 // load blueprintjs components
-@import "~@blueprintjs/core/src/components/button/button-group";
-@import "~@blueprintjs/core/src/components/collapse/collapse";
-@import "~@blueprintjs/core/src/components/context-menu/context-menu";
-@import "~@blueprintjs/core/src/components/overlay/overlay";
-@import "~@blueprintjs/core/src/components/portal/portal";
-@import "~@blueprintjs/core/src/components/progress-bar/progress-bar";
+@import "./includes/blueprintjs/components";
 
 // -- Carbon Elements ----------------------------------------------------------
 
@@ -48,42 +37,7 @@
 // load carbon components
 @import "./includes/carbon-components/components";
 
-// == Load element styles ======================================================
-
-@import "./components/Application/application";
-@import "./components/Workspace/workspace";
-@import "./components/Grid/grid";
-@import "./components/Menu/menu";
-@import "./components/ContextOverlay/contextoverlay";
-@import "./components/Button/button";
-@import "./components/OverviewItem/overviewitem";
-@import "./components/Breadcrumb/breadcrumb";
-@import "./components/Dialog/dialog";
-@import "./components/Card/card";
-@import "./components/Separation/separation";
-@import "./components/Tooltip/tooltip";
-@import "./components/Structure/titles";
-@import "./components/Accordion/accordion";
-@import "./components/Label/label";
-@import "./components/Form/form";
-@import "./components/Checkbox/checkbox";
-@import "./components/RadioButton/radiobutton";
-@import "./components/TextField/textfield";
-@import "./components/AutocompleteField/autocompletefield";
-@import "./components/Pagination/pagination";
-@import "./components/Toolbar/toolbar";
-@import "./components/Tag/tag";
-@import "./components/TagInput/taginput";
-@import "./components/Notification/notification";
-@import "./components/Link/link";
-@import "./components/Spinner/spinner";
-@import "./components/InteractionGate/interactiongate";
-@import "./components/Tabs/tabs";
-@import "./components/PropertyValuePair/propertyvalue";
-@import "./components/Iframe/iframe";
-@import "./components/AutoSuggestion/AutoSuggestion";
-@import "./components/Select/select";
-@import "./components/HoverToggler/hovertoggler";
+// == Load basic components styles =============================================
 
 @import "./components";
 @import "./extensions/codemirror/codemirror";