@eccenca/gui-elements 23.4.2-rc.0 → 23.6.0-rc.0

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",
-        }
-    ]
+        },
+    ],
 };

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

@@ -1,24 +1,18 @@
-import React from 'react';
-import {
-    Tabs as BlueprintTabs,
-    TabsProps as BlueprintTabsProps,
-    Tab,
-} from "@blueprintjs/core";
+import React from "react";
+import { Tab, Tabs as BlueprintTabs, TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 // deprecated interface
-interface TabsProps extends Omit<
-    BlueprintTabsProps,
-    "vertical" | "onChange" | "large" | "id" | "animate"
-> {
+interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
     activeTab: string;
     tabs: DeprecatedTabProps[];
-    onTabClick?: ({props}: any) => void;
+    onTabClick?: ({ props }: any) => void;
     prefixTabNames: string;
     allowScrollbars?: boolean;
     /**
-    * If controlled usage is enable then a `onTabClick` handler is ncessary to control tab panel content and `activeTab` updates.
-    */
+     * If controlled usage is enable then a `onTabClick` handler is ncessary to control tab panel content and `activeTab` updates.
+     */
     controlled?: boolean;
 }
 
@@ -35,23 +29,16 @@ const createDeprecatedTab = ({
     tabId,
     tabTitle,
     tabContent,
-    dontShrink=false,
+    dontShrink = false,
     ...otherTabProps
 }: DeprecatedTabProps) => {
-    const extraStyles = dontShrink ? { style: {flexShrink: 0} } : {};
-    return <Tab
-        key={tabId}
-        id={tabId}
-        title={tabTitle}
-        panel={tabContent}
-        {...otherTabProps}
-        {...extraStyles}
-    />;
-}
+    const extraStyles = dontShrink ? { style: { flexShrink: 0 } } : {};
+    return <Tab key={tabId} id={tabId} title={tabTitle} panel={tabContent} {...otherTabProps} {...extraStyles} />;
+};
 
 export function TabsReplacement({
     activeTab,
-    tabs=[],
+    tabs = [],
     onTabClick,
     controlled = false,
     prefixTabNames,
@@ -59,28 +46,23 @@ export function TabsReplacement({
     allowScrollbars,
     ...restProps
 }: TabsProps) {
-    const usagetype = controlled ? { selectedTabId: activeTab } : { defaultSelectedTabId: activeTab }
+    const usagetype = controlled ? { selectedTabId: activeTab } : { defaultSelectedTabId: activeTab };
     return (
         <BlueprintTabs
             id={prefixTabNames}
             onChange={onTabClick}
-            className={
-                className +
-                (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")
-            }
+            className={className + (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")}
             {...usagetype}
             renderActiveTabPanelOnly={true}
             {...restProps}
             animate={false}
         >
-            {
-                tabs.map(tab => {
-                    return createDeprecatedTab({
-                        className: `${prefixTabNames}-header-${tab.tabId}`,
-                        ...tab
-                    });
-                })
-            }
+            {tabs.map((tab) => {
+                return createDeprecatedTab({
+                    className: `${prefixTabNames}-header-${tab.tabId}`,
+                    ...tab,
+                });
+            })}
         </BlueprintTabs>
     );
-};
+}

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

@@ -1,10 +1,6 @@
-import React from 'react';
-import {
-    FieldItem,
-    TextField,
-    TextArea,
-    IconButton
-} from "./../../index";
+import React from "react";
+
+import { FieldItem, IconButton, TextArea, TextField } from "./../../index";
 
 const extendedOnChange = (onChangeFn: any, event: any) => {
     if (typeof onChangeFn === "function") {
@@ -17,7 +13,7 @@ const extendedOnChange = (onChangeFn: any, event: any) => {
     }
 };
 
-export function TextFieldReplacement ({
+export function TextFieldReplacement({
     className,
     disabled = false,
     error,
@@ -32,40 +28,42 @@ export function TextFieldReplacement ({
     value,
     ...otherProps
 }: any) {
-    if (process.env.NODE_ENV === 'development') {
-        const debugMsg = ["This textfield element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard elements (FieldItem, TextField, TextArea)."];
+    if (process.env.NODE_ENV === "development") {
+        const debugMsg = [
+            "This textfield element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard elements (FieldItem, TextField, TextArea).",
+        ];
         if (typeof otherProps.reducedSize !== "undefined") {
             debugMsg.push("TextField 'reducedSize' property is currently not supported on legacy replacement element.");
             delete otherProps.reducedSize;
         }
-        debugMsg.forEach(element => console.debug(element));
+        debugMsg.forEach((element) => console.debug(element));
     }
     if (typeof otherProps.reducedSize !== "undefined") {
         delete otherProps.reducedSize;
     }
 
-    const InputElement = !!multiline ? TextArea : TextField;
+    const InputElement = multiline ? TextArea : TextField;
 
     const fieldProperties = {
         className: className,
         messageText: error,
-        labelProps: !!label ? { text: label } : {},
-    }
+        labelProps: label ? { text: label } : {},
+    };
 
-    const inputProperties: {[key: string]: any } = {
+    const inputProperties: { [key: string]: any } = {
         className: inputClassName,
         fullWidth: stretch,
         value: value,
         required: required,
         onChange: extendedOnChange.bind(null, onChange),
-    }
+    };
 
-    if (!!multiline) {
+    if (multiline) {
         delete inputProperties.fullWidth;
     }
 
     if (multiline === false && !!onClearValue && !!value) {
-        inputProperties['rightElement'] = (
+        inputProperties["rightElement"] = (
             <IconButton
                 data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
                 name="operation-clear"
@@ -75,15 +73,12 @@ export function TextFieldReplacement ({
     }
 
     const sharedProperties = {
-        hasStateDanger: !!error ? true : false,
+        hasStateDanger: error ? true : false,
         disabled: disabled,
     };
 
     return !!error || !!label ? (
-        <FieldItem
-            {...sharedProperties}
-            {...fieldProperties}
-        >
+        <FieldItem {...sharedProperties} {...fieldProperties}>
             <InputElement {...otherProps} {...sharedProperties} {...inputProperties} />
         </FieldItem>
     ) : (

package/src/test/setupTests.js

@@ -1,21 +1,20 @@
 import "regenerator-runtime/runtime";
 
 if (window.document) {
-    window.document.body.createTextRange = function() {
+    window.document.body.createTextRange = function () {
         return {
-            setEnd: function(){},
-            setStart: function(){},
-            getBoundingClientRect: function(){
-                return {right: 0};
+            setEnd: function () {},
+            setStart: function () {},
+            getBoundingClientRect: function () {
+                return { right: 0 };
             },
-            getClientRects: function(){
+            getClientRects: function () {
                 return {
                     length: 0,
                     left: 0,
-                    right: 0
-                }
-            }
-        }
-    }
+                    right: 0,
+                };
+            },
+        };
+    };
 }
-