@eccenca/gui-elements 23.0.0 → 23.1.0-easynav.1

package/src/components/Typography/index.ts

@@ -0,0 +1,25 @@
+import Highlighter, { HighlighterProps } from "./Highlighter";
+import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
+import HtmlContentBlock, { HtmlContentBlockProps } from "./HtmlContentBlock";
+import OverflowText, { OverflowTextProps } from "./OverflowText";
+import WhiteSpaceContainer, { WhiteSpaceContainerProps } from "./WhiteSpaceContainer";
+
+export type {
+    HighlighterProps,
+    HtmlContentBlockProps,
+    OverflowTextProps,
+    WhiteSpaceContainerProps
+};
+
+export {
+    Highlighter,
+    HtmlContentBlock,
+    OverflowText,
+    WhiteSpaceContainer,
+};
+
+export const HighlighterFunctions = {
+    extractSearchWords,
+    matchesAllWords,
+    createMultiWordRegex,
+};

package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
+
+const whiteSpaceSizeOptions = {
+    control: "select",
+    options: {
+        "not set": undefined,
+        "tiny": "tiny",
+        "small": "small",
+        "regular": "regular",
+        "large": "large",
+        "xlarge": "xlarge"
+    }
+}
+
+export default {
+    title: "Components/Typography",
+    component: WhiteSpaceContainerElement,
+    argTypes: {
+        children: { control: "none" },
+        marginTop: {...whiteSpaceSizeOptions},
+        marginRight: {...whiteSpaceSizeOptions},
+        marginBottom: {...whiteSpaceSizeOptions},
+        marginLeft: {...whiteSpaceSizeOptions},
+        paddingTop: {...whiteSpaceSizeOptions},
+        paddingRight: {...whiteSpaceSizeOptions},
+        paddingBottom: {...whiteSpaceSizeOptions},
+        paddingLeft: {...whiteSpaceSizeOptions},
+    },
+} as ComponentMeta<typeof WhiteSpaceContainerElement>;
+
+const Template: ComponentStory<typeof WhiteSpaceContainerElement> = (args) => (
+    <WhiteSpaceContainerElement {...args} style={{background: "#eee"}}/>
+);
+
+const testContent = loremIpsum({
+    p: 2,
+    avgSentencesPerParagraph: 4,
+    random: false
+}).toString()
+
+export const WhiteSpaceContainer = Template.bind({});
+WhiteSpaceContainer.args = {
+    children: [
+        <p>{ testContent }</p>,
+        <p><strong>{ testContent.replaceAll(" ", "") }</strong></p>,
+        <p>{ testContent }</p>
+    ],
+    paddingTop: "tiny",
+    paddingRight: "small",
+    paddingBottom: "regular",
+    paddingLeft: "large",
+}

package/src/components/Typography/typography.scss

@@ -205,7 +205,7 @@ table {
 .#{$eccgui}-typography__overflowtext--passdown * {
     overflow: hidden;
     text-overflow: ellipsis;
-    word-wrap: normal;
+    overflow-wrap: normal;
     white-space: nowrap;
     // display: inherit;
     max-width: 100%;
@@ -254,7 +254,8 @@ table {
 }
 
 .#{$eccgui}-typography--forcelinebreak {
-    word-break: break-all;
+    word-break: normal;
+    overflow-wrap: anywhere;
 }
 
 .#{$eccgui}-typography--preventlinebreak {

package/src/components/Workspace/WorkspaceContent.tsx

@@ -12,7 +12,7 @@ function WorkspaceContent({ children, className = '', ...restProps }: any) {
             className={`${eccgui}-workspace__content ` + className}
             fullWidth={true}
         >
-            <GridRow>
+            <GridRow dontWrapColumns={false}>
                 { children }
             </GridRow>
         </Grid>

package/src/components/index.scss

@@ -0,0 +1,5 @@
+@import "./Badge/badge";
+@import "./Depiction/depiction";
+@import "./Icon/icon";
+@import "./Tree/tree";
+@import "./Typography/typography";

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Badge/Badge";
+export * from "./Depiction/Depiction";
+export * from "./Icon";
+export * from "./Tree/Tree";
+export * from "./Typography";

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

@@ -1,4 +1,5 @@
 $reactflow-node-basesize: $button-height !default;
+$reactflow-node-largesize: mini-units(6) !default;
 $reactflow-node-border-color: $eccgui-color-workspace-text !default;
 $reactflow-node-background-color: $button-background-color !default;
 $reactflow-node-color: $eccgui-color-workspace-text !default;

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

@@ -0,0 +1,83 @@
+import React, { memo } from "react";
+import { Icon, Depiction, DepictionProps, OverflowText } from "../../../index";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { IntentTypes, intentClassName } from "../../../common/Intent";
+
+export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Depiction element displayed left from the label.
+     */
+    depiction?: ValidIconName | React.ReactElement<DepictionProps>;
+    /**
+     * Label of the edge.
+     * Cannot overflow the parent container.
+     */
+    text: string | JSX.Element;
+    /**
+     * One or multiple other elements displayed right from label.
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * The element is increased in its size.
+     */
+    large?: boolean;
+    /**
+     * Stretches the label component to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Add a info state to the label, visualized by color.
+     */
+    intent?: IntentTypes;
+}
+
+export const EdgeLabel = memo(({
+    depiction,
+    text,
+    actions,
+    large,
+    fullWidth,
+    intent,
+    ...otherDivProps
+} : EdgeLabelProps) => {
+
+    const depEl = (!!depiction && typeof depiction === "string")
+        ? <Depiction image={<Icon name={depiction as ValidIconName} />} />
+        : depiction;
+
+    return (
+        <div
+            className={
+                `${eccgui}-graphviz__edge-label` +
+                (large ? ` ${eccgui}-graphviz__edge-label--large` : "") +
+                (fullWidth ? ` ${eccgui}-graphviz__edge-label--fullwidth` : "") +
+                (!!intent ? ` ${intentClassName(intent)}` : '')
+            }
+            {...otherDivProps}
+        >
+            {!!depEl && (
+                <div className={`${eccgui}-graphviz__edge-label__depiction`}>
+                    {
+                        React.cloneElement(depEl, {
+                            padding: "tiny",
+                            ratio: "1:1",
+                            resizing: "contain",
+                            forceInlineSvg: true,
+                            border: false,
+                            backgroundColor: undefined,
+                        })
+                    }
+                </div>
+            )}
+            <div className={`${eccgui}-graphviz__edge-label__text`}>
+                { typeof text === "string" ? <OverflowText>{ text }</OverflowText> : text }
+            </div>
+            {!!actions && (
+                <div className={`${eccgui}-graphviz__edge-label__aux`}>
+                    { actions }
+                </div>
+            )}
+        </div>
+    )
+});

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

@@ -154,3 +154,80 @@ path.react-flow__edge-path-glow {
         transform: scale(1.75, 0.75);
     }
 }
+
+// Custom label
+
+.#{$eccgui}-graphviz__edge-label {
+    border: 0.5*$reactflow-node-border-width solid $reactflow-node-border-color;
+    border-radius: $reactflow-node-border-radius;
+    background: #fff; // TODO color
+    color: $reactflow-node-color;
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    max-width: 20rem;
+    height: 0.5 * $reactflow-node-largesize;
+    font-size: $reactflow-node-font-size;
+
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+        border-color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
+        color: $eccgui-color-accent;
+        border-color: $eccgui-color-accent;
+    }
+    &.#{$eccgui}-intent--success {
+        color: $eccgui-color-success-text;
+        border-color: $eccgui-color-success-text;
+    }
+    &.#{$eccgui}-intent--info {
+        color: $eccgui-color-info-text;
+        border-color: $eccgui-color-info-text;
+    }
+    &.#{$eccgui}-intent--warning {
+        color: $eccgui-color-warning-text;
+        border-color: $eccgui-color-warning-text;
+    }
+    &.#{$eccgui}-intent--danger {
+        color: $eccgui-color-danger-text;
+        border-color: $eccgui-color-danger-text;
+    }
+}
+.#{$eccgui}-graphviz__edge-label--large {
+    height: $reactflow-node-largesize;
+}
+.#{$eccgui}-graphviz__edge-label--fullwidth {
+    max-width: none;
+    width: 100%;
+}
+.#{$eccgui}-graphviz__edge-label__depiction {
+    margin: $eccgui-size-block-whitespace * 0.25;
+    flex-grow: 0;
+    flex-shrink: 0;
+    .#{$eccgui}-depiction__image {
+        height: calc(#{0.5 * $reactflow-node-largesize} - #{$eccgui-size-block-whitespace * 0.25});
+
+        .#{$eccgui}-graphviz__edge-label--large & {
+            height: calc(#{$reactflow-node-largesize} - #{$eccgui-size-block-whitespace * 0.25});
+        }
+    }
+}
+.#{$eccgui}-graphviz__edge-label__text {
+    margin: $eccgui-size-block-whitespace * 0.25;
+    flex-grow: 1;
+    flex-shrink: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+
+    .#{$eccgui}-graphviz__edge-label--fullwidth & {
+        text-align: left;
+    }
+}
+.#{$eccgui}-graphviz__edge-label__aux {
+    margin: $eccgui-size-block-whitespace * 0.25;
+    flex-grow: 0;
+    flex-shrink: 0;
+}

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from 'react-lorem-ipsum';
+import { EdgeLabel, IconButton, Badge } from "./../../../../../index";
+import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+import { helpersArgTypes } from "../../../../../.storybook/helpers";
+
+export default {
+    title: "Extensions/React Flow/Custom EdgeLabel",
+    component: EdgeLabel,
+    argTypes: {
+        depiction: {
+            control: "select",
+            options: [...(Object.keys(canonicalIcons))],
+        },
+        actions: {
+            control: "select",
+            options: ["Not set", "Icon button", "Icon button small", "Info 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")} />,
+                "Info badge": <Badge intent="info">Info</Badge>,
+            },
+        },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
+    },
+} as ComponentMeta<typeof EdgeLabel>;
+
+const Template: ComponentStory<typeof EdgeLabel> = (args) => (
+    <EdgeLabel {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    text: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
+};

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

@@ -1,29 +1,57 @@
 import React, {memo} from 'react';
 import {
-    HandleProps as ReactFlowHandleProps,
-    Handle,
+    HandleProps as ReactFlowHandleLegacyProps,
+    Handle as HandleLegacy,
 } from "react-flow-renderer";
+import {
+    HandleProps as ReactFlowHandleNextProps,
+    Handle as HandleNext,
+} from "react-flow-renderer-lts";
 import { HandleContent, HandleContentProps } from "./HandleContent";
+import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
-export interface HandleProps extends ReactFlowHandleProps {
+interface HandleExtensionProps extends ReacFlowVersionSupportProps {
     data?: HandleContentProps;
     tooltip?: string;
     children?: JSX.Element | string;
+    onClick?: () => void;
+}
+
+export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {
+}
+
+export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {
 }
 
 export const HandleDefault = memo(({
+    flowVersion = useReactFlowVersion(),
     data,
     tooltip,
     children,
     ...handleProps
-}: HandleProps) => {
+}: HandleProps | HandleNextProps) => {
     const tooltipTitle = !!tooltip ? { title: tooltip } : {};
 
-    return (
-        <Handle {...handleProps} {...tooltipTitle}>
-            <HandleContent {...data}>
-                { children }
-            </HandleContent>
-        </Handle>
+    const handleContent = (
+        <HandleContent {...data}>
+            { children }
+        </HandleContent>
     );
+
+    switch (flowVersion) {
+        case "legacy":
+            return (
+                <HandleLegacy {...handleProps} {...tooltipTitle}>
+                    { handleContent }
+                </HandleLegacy>
+            );
+        case "next":
+            return (
+                <HandleNext {...handleProps} {...tooltipTitle}>
+                    { handleContent }
+                </HandleNext>
+            );
+        default:
+            return <></>;
+    }
 });

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

@@ -7,6 +7,7 @@ export { EdgeDefault } from "./edges/EdgeDefault";
 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";