@eccenca/gui-elements 25.0.0-rc.0 → 25.0.0-rc.2

package/src/components/TextReducer/TextReducer.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { renderToString } from "react-dom/server";
-import * as ReactIs from "react-is";
 
+import { reduceToText } from "../../common/utils/reduceToText";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { OverflowText, OverflowTextProps } from "./../Typography";
@@ -38,47 +37,11 @@ export const TextReducer = ({
     useOverflowTextWrapper,
     overflowTextProps,
 }: TextReducerProps) => {
-    const nodesCount = 0;
+    if (typeof children === "undefined") {
+        return <></>;
+    }
 
-    const onlyText = (children: React.ReactNode | React.ReactNode[], maxNodes?: number): string => {
-        if (typeof maxNodes !== "undefined" && nodesCount >= maxNodes) {
-            return "";
-        }
-
-        if (children instanceof Array) {
-            return children
-                .slice(0, maxNodes)
-                .map((child: React.ReactNode) => {
-                    return onlyText(child, maxNodes);
-                })
-                .join(" ");
-        }
-
-        return React.Children.toArray(children)
-            .slice(0, maxNodes)
-            .map((child) => {
-                if (ReactIs.isFragment(child)) {
-                    return onlyText(child.props?.children, maxNodes);
-                }
-                if (typeof child === "string") {
-                    return child;
-                }
-                if (typeof child === "number") {
-                    return child.toString();
-                }
-                if (ReactIs.isElement(child)) {
-                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
-                    return renderToString(<span>{child}</span>);
-                }
-                return "";
-            })
-            .join(" ")
-            .replaceAll("\n", " ");
-    };
-
-    const shrinkedContent = onlyText(children, maxNodes)
-        .replaceAll(/<[^\s][^>]*>/g, "")
-        .slice(0, maxLength);
+    const shrinkedContent = reduceToText(children, { maxLength, maxNodes });
 
     return useOverflowTextWrapper ? (
         <OverflowText

package/src/configuration/_palettes.scss

@@ -13,7 +13,7 @@ $eccgui-color-palette-light: (
     ),
     "semantic": (
         "info": eccgui-create-color-tints(#e5f4fb #aecfe3 #77aaca #4086b2 #096199),
-        "success": eccgui-create-color-tints(#e8f5e9 #b2c6b4 #7c967e #466749 #2f5e3a),
+        "success": eccgui-create-color-tints(#e8f5e9 #b1d4b7 #7ab286 #429154 #0b6f22),
         "warning": eccgui-create-color-tints(#fff3e0 #fad2b3 #f5b287 #f0915a #eb702d),
         "danger": eccgui-create-color-tints(#fff5f6 #edbfc0 #db8989 #c95253 #b71c1c),
     ),

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

@@ -7,9 +7,14 @@ $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.8 !default;
-$reactflow-edge-stroke-opacity-hover: 0.9 !default;
-$reactflow-edge-stroke-opacity-selected: 1 !default;
+$reactflow-edge-rendering: geometricprecision !default;
+$reactflow-edge-stroke-width-default: 2px !default;
+$reactflow-edge-stroke-width-hover: 2px !default;
+$reactflow-edge-stroke-width-selected: 2px !default;
+$reactflow-edge-stroke-opacity-default: $eccgui-opacity-muted !default;
+$reactflow-edge-stroke-opacity-hover: $eccgui-opacity-narrow !default;
+$reactflow-edge-stroke-opacity-selected: $eccgui-opacity-regular !default;
+$reactflow-edge-stroke-opacity-interaction-ratio: $eccgui-opacity-ghostly !default;
 $reactflow-edge-stroke-color-default: #{eccgui-color-var("identity", "text", "700")} !default;
 $reactflow-edge-stroke-color-hover: $reactflow-edge-stroke-color-default !default;
 $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;

package/src/extensions/react-flow/edges/_edges.scss

@@ -10,7 +10,7 @@
     path[class*="react-flow__edge"],
     rect[class*="react-flow__edge"] {
         stroke-opacity: $reactflow-edge-stroke-opacity-default;
-        shape-rendering: optimizespeed;
+        shape-rendering: $reactflow-edge-rendering;
     }
 
     text[class*="react-flow__edge"] {
@@ -60,11 +60,15 @@
 path.react-flow__edge-path {
     stroke: currentcolor;
     stroke-opacity: $reactflow-edge-stroke-opacity-default;
-    stroke-width: 2;
+    stroke-width: $reactflow-edge-stroke-width-default;
+
+    .react-flow__edge:hover & {
+        stroke-width: $reactflow-edge-stroke-width-hover;
+    }
 
     .react-flow__edge.selected & {
         stroke: currentcolor;
-        stroke-width: 2;
+        stroke-width: $reactflow-edge-stroke-width-selected;
     }
 }
 
@@ -78,11 +82,11 @@ path.react-flow__edge-interaction {
     }
 
     .react-flow__edge:hover & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-hover * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-hover * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 
     .react-flow__edge.selected & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 }
 
@@ -96,11 +100,11 @@ path.react-flow__edge-path-glow {
     }
 
     .react-flow__edge:hover & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-hover * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-hover * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 
     .react-flow__edge.selected & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 
     .react-flow__edge.animated & {