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

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

@@ -1,68 +1,67 @@
-import React, {memo, useEffect, useState} from "react";
-import {
-    PopoverInteractionKind as BlueprintPopoverInteractionKind,
-} from "@blueprintjs/core";
+import React, { memo, useEffect, useState } from "react";
+import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core";
+
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ContextOverlay, IconButton } from "../../../index";
+
 import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay";
-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
+    closeMenu: () => void;
 }
 
 export interface NodeToolsProps extends Omit<ContextOverlayProps, "children"> {
     children: string | JSX.Element;
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
-    menuButtonDataTestId?: string
+    menuButtonDataTestId?: string;
     /** If defined this function will be called with the menu API object to be used externally. */
-    menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any
+    menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any;
 }
 
-export const NodeTools = memo(({
-    children,
-    togglerElement = "item-moremenu",
-    togglerText = "Show more options",
-    menuButtonDataTestId,
-    menuFunctionsCallback,
-    ...otherOverlayProps
-}: NodeToolsProps) => {
-    const [isOpen, setIsOpen] = useState<boolean>(false);
+export const NodeTools = memo(
+    ({
+        children,
+        togglerElement = "item-moremenu",
+        togglerText = "Show more options",
+        menuButtonDataTestId,
+        menuFunctionsCallback,
+        ...otherOverlayProps
+    }: NodeToolsProps) => {
+        const [isOpen, setIsOpen] = useState<boolean>(false);
 
-    useEffect(() => {
-        menuFunctionsCallback && menuFunctionsCallback({
-            closeMenu(): void {
-                setIsOpen(false)
-            }
-        })
-    }, [menuFunctionsCallback])
+        useEffect(() => {
+            menuFunctionsCallback &&
+                menuFunctionsCallback({
+                    closeMenu(): void {
+                        setIsOpen(false);
+                    },
+                });
+        }, [menuFunctionsCallback]);
 
-    return (
-        <ContextOverlay
-            isOpen={isOpen}
-            onClose={() => setIsOpen(false)}
-            hoverCloseDelay={500}
-            interactionKind={isOpen ? BlueprintPopoverInteractionKind.HOVER : BlueprintPopoverInteractionKind.CLICK}
-            {...otherOverlayProps}
-            content={(
-                <div className={`${eccgui}-graphviz__nodetools__content`}>
-                    { children }
-                </div>
-            )}
-        >
-            {typeof togglerElement === "string" ? (
-                <IconButton
-                    data-test-id={menuButtonDataTestId}
-                    name={togglerElement}
-                    text={togglerText}
-                    onClick={() => setIsOpen(previous => !previous)}
-                />
-            ) : (
-                <>{ togglerElement }</>
-            )}
-        </ContextOverlay>
-    );
-});
+        return (
+            <ContextOverlay
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                hoverCloseDelay={500}
+                interactionKind={isOpen ? BlueprintPopoverInteractionKind.HOVER : BlueprintPopoverInteractionKind.CLICK}
+                {...otherOverlayProps}
+                content={<div className={`${eccgui}-graphviz__nodetools__content`}>{children}</div>}
+            >
+                {typeof togglerElement === "string" ? (
+                    <IconButton
+                        data-test-id={menuButtonDataTestId}
+                        name={togglerElement}
+                        text={togglerText}
+                        onClick={() => setIsOpen((previous) => !previous)}
+                    />
+                ) : (
+                    <>{togglerElement}</>
+                )}
+            </ContextOverlay>
+        );
+    }
+);

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

@@ -8,7 +8,7 @@ type IStickyNote = {
     color: string;
     position: number[];
     dimension: number[];
-}
+};
 
 /**
  * converts a react-flow node with

package/src/extensions/react-flow/nodes/stories/NodeContentExtension.stories.tsx

@@ -1,14 +1,12 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import {
-    NodeContentExtension,
-    NodeContentExtensionProps
-} from "./../NodeContentExtension";
 import IconButton from "../../../../components/Icon/IconButton";
 import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
 
+import { NodeContentExtension, NodeContentExtensionProps } from "./../NodeContentExtension";
+
 export default {
     title: "Extensions/React Flow/Node Content Extension",
     component: NodeContentExtension,
@@ -24,7 +22,14 @@ const Template: ComponentStory<typeof NodeContentExtension> = (args: NodeContent
 
 export const Default = Template.bind({});
 Default.args = {
-    actionButtons: <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />,
+    actionButtons: (
+        <IconButton
+            name="item-question"
+            onClick={(e) => {
+                alert("this is a action button");
+            }}
+        />
+    ),
     slideOutOfNode: false,
     isExpanded: false,
     setExpanded: (_event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
@@ -35,7 +40,7 @@ Default.args = {
             <h4>Extension example.</h4>
             <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
         </HtmlContentBlock>
-    )
+    ),
 } as NodeContentExtensionProps;
 
 export const SlideOutOfNode = Template.bind({});

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

@@ -11,12 +11,12 @@ export interface ReacFlowVersionSupportProps {
 export const useReactFlowVersion = () => {
     try {
         const [, , zoom] = getStoreStateFlowLegacy((state) => state.transform);
-        return !!zoom ? "legacy" : "none";
+        return zoom ? "legacy" : "none";
     } catch {}
     try {
         const [, , zoom] = getStoreStateFlowNext((state) => state.transform);
-        return !!zoom ? "next" : "none";
+        return zoom ? "next" : "none";
     } catch {}
 
     return "none";
-}
+};

package/src/includes/blueprintjs/_requisits.scss

@@ -1,5 +1,6 @@
 @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";

package/src/includes/blueprintjs/_variables.scss

@@ -43,8 +43,8 @@ $pt-intent-danger: $eccgui-color-danger-text !default;
 // $pt-dark-app-background-color: $dark-gray3 !default;
 
 $pt-outline-color: rgba($eccgui-color-accent, 0.6);
-
 $pt-text-color: $eccgui-color-application-text !default;
+
 // $pt-text-color-muted: $gray1 !default;
 // $pt-text-color-disabled: rgba($pt-text-color-muted, 0.6) !default;
 // $pt-heading-color: $pt-text-color !default;
@@ -77,12 +77,11 @@ $pt-text-color: $eccgui-color-application-text !default;
 
 // Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
 // Do not quote this value, for Less consumers.
-$ns: bp4 !default;
+$ns: bp5 !default;
 
 // easily the most important variable, so it comes up top
 // (so other variables can use it to define themselves)
 $pt-grid-size: math.div($eccgui-size-typo-text, 1.4) !default;
-
 $pt-font-family: $eccgui-font-family-default !default;
 $pt-font-family-monospace: $eccgui-font-family-monospace !default;
 $pt-font-size: $eccgui-size-typo-text !default;
@@ -91,6 +90,7 @@ $pt-font-size-small: $eccgui-size-typo-caption !default;
 $pt-line-height: $eccgui-size-typo-text-lineheight !default;
 
 // tag: (font-size, line-height)
+
 /*
 $headings: (
   "h1": (36px, 40px),
@@ -139,6 +139,7 @@ $pt-icon-size-large: 32px !default;
 
 // Elevations
 // all shadow lists must be the same length to avoid flicker in transitions.
+
 /*
 $pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black,
                         0 0 0 rgba($black, 0),
@@ -179,6 +180,7 @@ $pt-dark-elevation-shadow-4: border-shadow($pt-dark-border-shadow-opacity),
 // $pt-transition-duration: 100ms !default;
 
 // Light theme styles
+
 /*
 $pt-input-box-shadow: inset border-shadow(0.15),
                       inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
@@ -188,6 +190,7 @@ $pt-input-box-shadow: inset border-shadow(0.15),
 // $pt-tooltip-box-shadow: $pt-popover-box-shadow !default;
 
 // Dark theme styles
+
 /*
 $pt-dark-input-box-shadow: inset border-shadow(0.3),
                            inset 0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;

package/src/includes/carbon-components/_requisits.scss

@@ -11,8 +11,10 @@
 @import "~@carbon/styles/scss/feature-flags";
 @import "~@carbon/styles/scss/colors";
 @import "~@carbon/styles/scss/theme";
+
 :root {
     @include theme;
 }
+
 @import "~@carbon/styles/scss/spacing";
 @import "~@carbon/styles/scss/utilities/z-index";

package/src/includes/carbon-components/_variables.scss

@@ -4,7 +4,6 @@
 // TODO: calculate them from own configuration variables, all unchanged variables are commented out
 
 $prefix: "cds" !default;
-
 $flex-grid-columns: 16 !default;
 $use-flexbox-grid: true !default;
 
@@ -28,8 +27,8 @@ $css--default-type: false !default;
 
 /// Used with `css--font-face` feature flag, if true, uses Plex font families instead of Helvetica
 $css--plex: false !default;
-
 $base-font-size: $eccgui-size-typo-base !default;
+
 @import "~@carbon/styles/scss/utilities/convert";
 
 $label-01: (
@@ -76,7 +75,6 @@ $heading-02: (
     font-weight: 600,
     line-height: $eccgui-size-typo-text-lineheight * $eccgui-size-type-levelratio,
 ) !default;
-
 $layer-01: transparent !default;
 $layer-02: $eccgui-color-workspace-background !default;
 $ui-03: $pt-divider-black !default;
@@ -99,7 +97,6 @@ $button-disabled: $disabled-02 !default;
 $border-disabled: $disabled-02 !default;
 $spacing-05: rem($eccgui-size-inline-whitespace) !default;
 $spacing-09: rem($eccgui-size-block-whitespace * 2 * $eccgui-size-type-levelratio) !default;
-
 $data-table-zebra-color: $layer-02 !default;
 
 // FIXME: for some unknown reasons it is not possible to set the $layer* vars here, for example they are used to color the tables

package/src/index.scss

@@ -15,8 +15,10 @@
 
 // calculate blueprintjs configuration
 @import "./includes/blueprintjs/variables";
+
 // load blueprintjs requisists
 @import "./includes/blueprintjs/requisits";
+
 // load blueprintjs components
 @import "./includes/blueprintjs/components";
 
@@ -32,8 +34,10 @@
 
 // calculate carbon configuration
 @import "./includes/carbon-components/variables";
+
 // load carbon requsists
 @import "./includes/carbon-components/requisits";
+
 // load carbon components
 @import "./includes/carbon-components/components";
 

package/src/index.ts

@@ -1,12 +1,15 @@
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
+
 import { ClassNames as IntentClassNames } from "./common/Intent";
 import * as Skeleton from "./components/Skeleton/classnames";
 import * as TypographyClassNames from "./components/Typography/classnames";
 import * as LegacyReplacements from "./legacy-replacements";
 
 const ClassNames = {
+    Blueprint: BlueprintClasses,
+    Intent: IntentClassNames,
     Skeleton,
     Typography: TypographyClassNames,
-    Intent: IntentClassNames,
 };
 // @deprecated use `ClassNames`
 const HelperClasses = ClassNames;

package/src/legacy-replacements/Button/AffirmativeButton.tsx

@@ -1,15 +1,10 @@
-import React from 'react';
+import React from "react";
+
 import { ButtonReplacement } from "./Button";
 
-export function AffirmativeButtonReplacement ({
-    children,
-    ...otherProps
-}: any) {
+export function AffirmativeButtonReplacement({ children, ...otherProps }: any) {
     return (
-        <ButtonReplacement
-            {...otherProps}
-            affirmative={true}
-        >
+        <ButtonReplacement {...otherProps} affirmative={true}>
             {children}
         </ButtonReplacement>
     );

package/src/legacy-replacements/Button/Button.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
+import React from "react";
+
 import Button from "../../components/Button/Button";
 
-export const iconMappings: {[key: string]: any } = {
-    "edit": "item-edit",
-    "delete": "item-remove",
-    "expand_more": "toggler-showmore",
-    "expand_less": "toggler-showless",
-    "arrow_nextpage": "navigation-forth",
-    "arrow_back": "navigation-back"
+export const iconMappings: { [key: string]: any } = {
+    edit: "item-edit",
+    delete: "item-remove",
+    expand_more: "toggler-showmore",
+    expand_less: "toggler-showless",
+    arrow_nextpage: "navigation-forth",
+    arrow_back: "navigation-back",
 };
 
-export function ButtonReplacement ({
+export function ButtonReplacement({
     children,
     className,
     fabSize,
@@ -25,8 +26,10 @@ export function ButtonReplacement ({
     colored = false,
     ...otherProps
 }: any) {
-    if (process.env.NODE_ENV === 'development') {
-        const debugMsg = ["This button element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Button)."];
+    if (process.env.NODE_ENV === "development") {
+        const debugMsg = [
+            "This button element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Button).",
+        ];
         if (typeof otherProps.accent !== "undefined") {
             debugMsg.push("Button 'accent' property is not supported on legacy replacement element.");
             delete otherProps.accent;
@@ -40,9 +43,11 @@ export function ButtonReplacement ({
             delete otherProps.ripple;
         }
         if (typeof progress !== "undefined") {
-            debugMsg.push("Button 'progress' property is not fully supported on legacy replacement element, it only shows a loading spinner in the button.");
+            debugMsg.push(
+                "Button 'progress' property is not fully supported on legacy replacement element, it only shows a loading spinner in the button."
+            );
         }
-        debugMsg.forEach(element => console.debug(element));
+        debugMsg.forEach((element) => console.debug(element));
     }
     if (typeof otherProps.accent !== "undefined") {
         delete otherProps.accent;
@@ -59,13 +64,13 @@ export function ButtonReplacement ({
             className={className}
             minimal={!!iconName && raised === false ? true : false}
             icon={iconName ? (iconName && iconMappings[iconName] ? iconMappings[iconName] : iconName) : undefined}
-            tooltip={!!tooltip ? tooltip : false}
+            tooltip={tooltip ? tooltip : false}
             disabled={disabled}
             affirmative={affirmative}
             disruptive={disruptive}
-            hasStatePrimary={ !!fabSize || colored || !dismissive}
+            hasStatePrimary={!!fabSize || colored || !dismissive}
             large={!!fabSize && fabSize !== "mini"}
-            loading={!!progress ? true : false}
+            loading={progress ? true : false}
         >
             {children}
         </Button>

package/src/legacy-replacements/Button/DismissiveButton.tsx

@@ -1,15 +1,10 @@
-import React from 'react';
+import React from "react";
+
 import { ButtonReplacement } from "./Button";
 
-export function DismissiveButtonReplacement ({
-    children,
-    ...otherProps
-}: any) {
+export function DismissiveButtonReplacement({ children, ...otherProps }: any) {
     return (
-        <ButtonReplacement
-            {...otherProps}
-            dismissive={true}
-        >
+        <ButtonReplacement {...otherProps} dismissive={true}>
             {children}
         </ButtonReplacement>
     );

package/src/legacy-replacements/Button/DisruptiveButton.tsx

@@ -1,15 +1,10 @@
-import React from 'react';
+import React from "react";
+
 import { ButtonReplacement } from "./Button";
 
-export function DisruptiveButtonReplacement ({
-    children,
-    ...otherProps
-}: any) {
+export function DisruptiveButtonReplacement({ children, ...otherProps }: any) {
     return (
-        <ButtonReplacement
-            {...otherProps}
-            disruptive={true}
-        >
+        <ButtonReplacement {...otherProps} disruptive={true}>
             {children}
         </ButtonReplacement>
     );

package/src/legacy-replacements/Checkbox/Checkbox.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+
 import Checkbox from "../../components/Checkbox/Checkbox";
 
 const extendedOnChangeBoolean = (onChangeFn: any, event: any) => {
@@ -12,7 +13,7 @@ const extendedOnChangeBoolean = (onChangeFn: any, event: any) => {
     }
 };
 
-export function CheckboxReplacement ({
+export function CheckboxReplacement({
     children = null,
     checked = false,
     className = null,
@@ -21,8 +22,10 @@ export function CheckboxReplacement ({
     onChange,
     ...otherProps
 }: any) {
-    if (process.env.NODE_ENV === 'development') {
-        const debugMsg = ["This checkbox element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Checkbox)."];
+    if (process.env.NODE_ENV === "development") {
+        const debugMsg = [
+            "This checkbox element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Checkbox).",
+        ];
         if (typeof otherProps.ripple !== "undefined") {
             debugMsg.push("Checkbox 'ripple' property is not supported on legacy replacement element.");
             delete otherProps.ripple;
@@ -31,7 +34,7 @@ export function CheckboxReplacement ({
             debugMsg.push("Checkbox 'hideLabel' property is not supported on legacy replacement element.");
             delete otherProps.hideLabel;
         }
-        debugMsg.forEach(element => console.debug(element));
+        debugMsg.forEach((element) => console.debug(element));
     }
     if (typeof otherProps.ripple !== "undefined") {
         delete otherProps.ripple;

package/src/legacy-replacements/Radio/RadioButton.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
+import React from "react";
+
 import RadioButton from "../../components/RadioButton/RadioButton";
 
-export function RadioButtonReplacement ({
-    children,
-    label,
-    ...otherProps
-}: any) {
-    if (process.env.NODE_ENV === 'development') {
-        const debugMsg = ["This radio element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (RadioButton)."];
+export function RadioButtonReplacement({ children, label, ...otherProps }: any) {
+    if (process.env.NODE_ENV === "development") {
+        const debugMsg = [
+            "This radio element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (RadioButton).",
+        ];
         if (typeof otherProps.ripple !== "undefined") {
             debugMsg.push("Radio 'ripple' property is not supported on legacy replacement element.");
             delete otherProps.ripple;
@@ -19,7 +18,7 @@ export function RadioButtonReplacement ({
         if (typeof label !== "undefined") {
             debugMsg.push("Radio 'label' property is not supported exactly like at the legacy element.");
         }
-        debugMsg.forEach(element => console.debug(element));
+        debugMsg.forEach((element) => console.debug(element));
     }
     if (typeof otherProps.ripple !== "undefined") {
         delete otherProps.ripple;
@@ -28,9 +27,7 @@ export function RadioButtonReplacement ({
         delete otherProps.hideLabel;
     }
     return (
-        <RadioButton
-            {...otherProps}
-        >
+        <RadioButton {...otherProps}>
             {label}
             {children}
         </RadioButton>

package/src/legacy-replacements/Tabs/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import { Tabs } from "./../../legacy-replacements";
 
@@ -13,14 +13,12 @@ export default {
             table: {
                 defaultValue: { summary: undefined },
                 type: { summary: "string" },
-            }
+            },
         },
     },
 } as ComponentMeta<typeof Tabs>;
 
-const TemplateDeprecated: ComponentStory<typeof Tabs> = (args) => (
-    <Tabs {...args} />
-);
+const TemplateDeprecated: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
 
 export const DeprecatedUsage = TemplateDeprecated.bind({});
 DeprecatedUsage.args = {
@@ -41,6 +39,6 @@ DeprecatedUsage.args = {
             tabId: "deprecatedtab3",
             tabTitle: "Tab title 3",
             tabContent: "Tab content 3",
-        }
-    ]
+        },
+    ],
 };