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

package/dist/types/legacy-replacements/Button/DisruptiveButton.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function DisruptiveButtonReplacement({ children, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Checkbox/Checkbox.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function CheckboxReplacement({ children, checked, className, disabled, label, onChange, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Radio/RadioButton.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function RadioButtonReplacement({ children, label, ...otherProps }: any): React.JSX.Element;

package/dist/types/legacy-replacements/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
 interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "animate"> {
     activeTab: string;
@@ -7,8 +7,8 @@ interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "
     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;
 }
 export interface DeprecatedTabProps {

package/dist/types/legacy-replacements/TextField/TextField.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function TextFieldReplacement({ className, disabled, error, inputClassName, label, multiline, onChange, onClearValue, required, stretch, value, ...otherProps }: any): React.JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.5.0",
+    "version": "23.6.0-rc.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -58,67 +58,69 @@
         "test": "jest",
         "test:ci": "jest --ci --reporters='default'",
         "test:coverage": "jest --collectCoverage",
-        "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
+        "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
+        "autolint:scripts": "eslint --fix .storybook/ blueprint/ scripts/ src/ index.ts || exit 0",
+        "autolint:styles": "stylelint \"{.storybook,src}/**/*.{css,scss}\" --fix || exit 0",
+        "autolint:prettier": "prettier \"{.github,.storybook,.typescript,blueprint,scripts,src}/**/*\" .* *.json *.md *.ts --write --ignore-unknown",
+        "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^4.1.22",
-        "@blueprintjs/core": "^4.18.0",
-        "@blueprintjs/popover2": "^1.14.1",
-        "@blueprintjs/select": "^4.9.14",
+        "@blueprintjs/colors": "^5.1.0",
+        "@blueprintjs/core": "^5.9.1",
+        "@blueprintjs/select": "^5.1.1",
         "@carbon/icons": "^11.19.0",
         "@carbon/icons-react": "11.19.0",
         "@carbon/styles": "1.32.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "carbon-components-react": "^8.28.0",
-        "codemirror": "^5.65.13",
-        "color": "3.2.1",
+        "codemirror": "^5.65.16",
+        "color": "^4.2.3",
         "lodash": "^4.17.21",
-        "micromark": "^3.0.10",
         "re-resizable": "6.9.9",
         "react": "^16.13.1",
-        "react-codemirror2": "^7.2.1",
+        "react-codemirror2": "^7.3.0",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
-        "react-inlinesvg": "^3.0.2",
+        "react-inlinesvg": "^3.0.3",
         "react-markdown": "^8.0.7",
-        "rehype-raw": "^6.1.0",
-        "remark-definition-list": "^1.1.0",
-        "remark-gfm": "^3.0.0",
-        "remark-parse": "^10.0.0",
-        "reset-css": "^5.0.1",
-        "unified": "^10.1.1",
+        "rehype-raw": "^6.1.1",
+        "remark-definition-list": "^1.2.0",
+        "remark-gfm": "^3.0.1",
+        "remark-parse": "^10.0.2",
+        "reset-css": "^5.0.2",
+        "unified": "^11.0.4",
         "wicg-inert": "^3.1.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.21.8",
+        "@babel/core": "^7.23.9",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
         "@babel/plugin-proposal-private-methods": "^7.16.11",
-        "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
-        "@babel/preset-env": "^7.21.5",
-        "@babel/preset-flow": "^7.16.5",
-        "@babel/preset-react": "^7.16.7",
-        "@babel/preset-typescript": "^7.21.5",
-        "@storybook/addon-actions": "^7.0.9",
-        "@storybook/addon-essentials": "^7.0.9",
-        "@storybook/addon-jest": "^7.0.9",
-        "@storybook/addon-links": "^7.0.9",
-        "@storybook/cli": "^7.0.9",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/preset-env": "^7.23.9",
+        "@babel/preset-flow": "^7.23.3",
+        "@babel/preset-react": "^7.23.3",
+        "@babel/preset-typescript": "^7.23.3",
+        "@storybook/addon-actions": "^7.6.17",
+        "@storybook/addon-essentials": "^7.6.17",
+        "@storybook/addon-jest": "^7.6.17",
+        "@storybook/addon-links": "^7.6.17",
+        "@storybook/cli": "^7.6.17",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^7.0.9",
-        "@storybook/react-webpack5": "^7.0.9",
-        "@testing-library/jest-dom": "^6.1.3",
+        "@storybook/react": "^7.6.17",
+        "@storybook/react-webpack5": "^7.6.17",
+        "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^12.1.2",
-        "@types/carbon-components-react": "^7.55.2",
-        "@types/codemirror": "^5.60.5",
-        "@types/color": "^3.0.2",
-        "@types/jest": "^29.5.4",
-        "@types/lodash": "^4.14.194",
+        "@types/carbon-components-react": "^7.55.10",
+        "@types/codemirror": "^5.60.15",
+        "@types/color": "^3.0.6",
+        "@types/jest": "^29.5.12",
+        "@types/lodash": "^4.14.202",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-jest": "^29.7.0",
-        "chromatic": "^6.17.4",
-        "eslint": "^8.49.0",
+        "chromatic": "^10.9.6",
+        "eslint": "^8.56.0",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-simple-import-sort": "^10.0.0",
@@ -128,21 +130,21 @@
         "jest-environment-jsdom": "^29.7.0",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^13.3.0",
-        "node-sass-package-importer": "^5.3.2",
+        "node-sass-package-importer": "^5.3.3",
         "prettier": "^2.8.8",
         "react-app-polyfill": "^3.0.0",
         "react-lorem-ipsum": "^1.4.9",
         "regenerator-runtime": "^0.13.9",
-        "rimraf": "^5.0.1",
-        "sass": "^1.62.1",
-        "sass-loader": "^13.2.2",
-        "storybook": "^7.0.9",
-        "stylelint": "^15.7.0",
-        "stylelint-config-recess-order": "^4.2.0",
+        "rimraf": "^5.0.5",
+        "sass": "1.62.1",
+        "sass-loader": "10.3.1",
+        "storybook": "^7.6.17",
+        "stylelint": "^15.11.0",
+        "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
-        "ts-node": "^10.9.1",
-        "tsc-esm-fix": "^2.20.15",
-        "typescript": "4.4.4",
+        "ts-node": "^10.9.2",
+        "tsc-esm-fix": "^2.20.25",
+        "typescript": "4.5.2",
         "url-loader": "^4.1.1",
         "yargs": "^17.7.2"
     },
@@ -154,11 +156,11 @@
         "react-dom": ">=16"
     },
     "resolutions": {
-        "**/@babel/traverse": "^7.23.2",
-        "**/@types/react": "^17.0.59",
-        "**/postcss": "^8.4.31",
-        "**/parse5": "^6.0.1",
-        "**/@carbon/icons-react": "11.19.0"
+        "**/@types/react": "^17.0.75",
+        "**/@carbon/icons-react": "11.19.0",
+        "**/jackspeak": "2.1.1",
+        "node-sass-package-importer/**/postcss": "^8.4.31",
+        "**/word-wrap": "^1.2.4"
     },
     "husky": {
         "hooks": {
@@ -166,11 +168,11 @@
         }
     },
     "lint-staged": {
-        "*.(js|json|md)": [
+        "*.(json|md)": [
             "prettier --write",
             "git add"
         ],
-        "*.(ts|tsx)": [
+        "*.(js|ts|tsx)": [
             "eslint --fix",
             "prettier --write",
             "git add"

package/scripts/compile-sass.ts

@@ -1,6 +1,7 @@
-import * as sass from "sass";
 import tildeImporter from "node-sass-package-importer";
+import * as sass from "sass";
 import yargs from "yargs";
+
 import sassRenderSyncConfig from "./sassConfig";
 
 const args = yargs(process.argv.slice(2)).argv as any;

package/scripts/sassConfig.js

@@ -1,8 +1,8 @@
 const sass = require("sass");
 
 const functions = {
-    'svg-icon($path, $selectors: null)': function(_path, _selectors) {
-        return new sass.SassString("unset", {quotes: false});
+    "svg-icon($path, $selectors: null)": function (_path, _selectors) {
+        return new sass.SassString("unset", { quotes: false });
     },
 };
 const sassRenderSyncConfig = {

package/src/_shame.scss

@@ -14,35 +14,35 @@
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
-    border: 0;
-    visibility: inherit;
     white-space: nowrap;
+    visibility: inherit;
+    border: 0;
 }
 
 .uppy-DragDrop-container {
+    color: inherit;
+    background-color: $data-table-zebra-color;
     // TODO: create own file upload elements
 
     border-width: 1px;
+
     //border-style: dotted;
     border-radius: 3px;
 
-    color: inherit;
-    background-color: $data-table-zebra-color;
-
     .uppy-DragDrop-inner {
-        line-height: inherit;
         padding: 1rem;
+        line-height: inherit;
     }
 
     .uppy-DragDrop-arrow {
-        height: 2rem;
         width: 2rem;
+        height: 2rem;
         margin-bottom: 0.5rem;
     }
 
     .uppy-DragDrop-label {
-        font-size: inherit;
         margin-bottom: 0.5rem;
+        font-size: inherit;
     }
 }
 
@@ -51,8 +51,8 @@
 */
 
 * {
-scrollbar-width: thin;
-scrollbar-color: #bbb transparent;
+    scrollbar-width: thin;
+    scrollbar-color: #bbb transparent;
 
     &::-webkit-scrollbar {
         width: 0.25rem;
@@ -60,10 +60,9 @@ scrollbar-color: #bbb transparent;
         background-color: #fefefe;
     }
 
-    &::-webkit-scrollbar-thumb
-    {
-        border-radius: 0.125rem;
+    &::-webkit-scrollbar-thumb {
         background-color: #bbb;
+        border-radius: 0.125rem;
     }
 }
 

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -7,7 +7,7 @@ export interface IActivityStatus {
     // The activity ID
     activity: string;
     // Human-readable activity label
-    activityLabel: string
+    activityLabel: string;
     // If the activity is currently running
     isRunning: boolean;
     // If the activity has failed
@@ -34,5 +34,12 @@ export interface IActivityStatus {
 export type SilkActivityStatusProps = IActivityStatus;
 
 // @deprecated use `SilkActivityStatusConcrete`
-export type ConcreteActivityStatus = "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling"
+export type ConcreteActivityStatus =
+    | "Cancelled"
+    | "Failed"
+    | "Successful"
+    | "Not executed"
+    | "Running"
+    | "Waiting"
+    | "Canceling";
 export type SilkActivityStatusConcrete = ConcreteActivityStatus;

package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import { Tag, TagList, ActivityControlWidget } from "../../../index";
 import { helpersArgTypes } from "../../../.storybook/helpers";
+import { ActivityControlWidget, Tag, TagList } from "../../../index";
 
 export default {
     title: "Cmem/ActivityControlWidget",

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -1,4 +1,12 @@
 import React from "react";
+
+import { ValidIconName } from "../../components/Icon/canonicalIconNames";
+import { IconProps } from "../../components/Icon/Icon";
+import { TestIconProps } from "../../components/Icon/TestIcon";
+import { TestableComponent } from "../../components/interfaces";
+import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
+import { SpinnerProps } from "../../components/Spinner/Spinner";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
     Card,
     ContextMenu,
@@ -14,13 +22,6 @@ import {
     Spinner,
     Tooltip,
 } from "../../index";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { TestableComponent } from "../../components/interfaces";
-import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
-import { SpinnerProps } from "../../components/Spinner/Spinner";
-import { ValidIconName } from "../../components/Icon/canonicalIconNames";
-import { IconProps } from "../../components/Icon/Icon";
-import { TestIconProps } from "../../components/Icon/TestIcon";
 
 export interface ActivityControlWidgetProps extends TestableComponent {
     /**
@@ -79,7 +80,7 @@ export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * execution timer messages for waiting and running times.
      */
-    timerExecutionMsg?: JSX.Element | null
+    timerExecutionMsg?: JSX.Element | null;
 }
 
 // @deprecated use `ActivityControlWidgetProps`
@@ -98,7 +99,7 @@ export interface ActivityControlWidgetAction extends TestableComponent {
     // The tooltip that should be shown over the action icon
     tooltip?: string;
     // The icon of the action button
-    icon: ValidIconName | React.ReactElement<TestIconProps>
+    icon: ValidIconName | React.ReactElement<TestIconProps>;
     // Action is currently disabled (but shown)
     disabled?: boolean;
     // Warning state
@@ -151,12 +152,12 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
             <OverviewItemDescription>
                 {props.label && (
                     <OverviewItemLine small={small}>
-                        { React.cloneElement(labelWrapper, {}, props.label) }
+                        {React.cloneElement(labelWrapper, {}, props.label)}
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
                     <OverviewItemLine small>
-                        { tags }
+                        {tags}
                         {props.statusMessage && (
                             <OverflowText passDown>
                                 {props.statusMessage.length > 50 ? (
@@ -175,7 +176,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                         )}
                     </OverviewItemLine>
                 )}
-             {timerExecutionMsg && <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>}
+                {timerExecutionMsg && <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>}
             </OverviewItemDescription>
             <OverviewItemActions>
                 {activityActions &&
@@ -191,7 +192,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                                 hasStateWarning={action.hasStateWarning}
                                 tooltipProps={{
                                     hoverOpenDelay: 200,
-                                    placement: "bottom"
+                                    placement: "bottom",
                                 }}
                             />
                         );
@@ -205,7 +206,11 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                             return (
                                 <MenuItem
                                     icon={menuAction.icon}
-                                    key={typeof menuAction.icon === "string" ? menuAction.icon : menuAction["data-test-id"] ?? idx}
+                                    key={
+                                        typeof menuAction.icon === "string"
+                                            ? menuAction.icon
+                                            : menuAction["data-test-id"] ?? idx
+                                    }
                                     onClick={menuAction.action}
                                     text={menuAction.tooltip}
                                 />

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,19 +1,20 @@
-import {Button, HtmlContentBlock, IconButton, SimpleDialog} from "../../index";
 import React, { useState } from "react";
 
+import { Button, HtmlContentBlock, IconButton, SimpleDialog } from "../../index";
+
 interface ActivityExecutionErrorReportModalProps {
     // Title of the modal
-    title?: string
+    title?: string;
     // Called when the close button is clicked
-    onDiscard: () => any
+    onDiscard: () => any;
     // The error report
-    report: JSX.Element
+    report: JSX.Element;
     // Value of the download button
-    downloadButtonValue: string
+    downloadButtonValue: string;
     // Value of the close button
-    closeButtonValue: string
+    closeButtonValue: string;
     // Function that fetches the Markdown error report
-    fetchErrorReport: () => Promise<string | undefined>
+    fetchErrorReport: () => Promise<string | undefined>;
 }
 
 /** Shows the execution error report to the user and offers to download the report. */
@@ -23,16 +24,19 @@ export const ActivityExecutionErrorReportModal = ({
     report,
     downloadButtonValue,
     closeButtonValue,
-    fetchErrorReport
+    fetchErrorReport,
 }: ActivityExecutionErrorReportModalProps) => {
     const [displayFullscreen, setDisplayFullscreen] = useState<boolean>(false);
-    const fileName = "Activity execution report from " + (new Date()).toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md"
+    const fileName =
+        "Activity execution report from " +
+        new Date().toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) +
+        ".md";
     const handleDownload = async () => {
-        const markdown = await fetchErrorReport()
-        if(markdown) {
+        const markdown = await fetchErrorReport();
+        if (markdown) {
             const element = document.createElement("a");
             element.href = window.URL.createObjectURL(new Blob([markdown], { type: "text/markdown" }));
-            element.download = fileName
+            element.download = fileName;
             //the above code is equivalent to
             document.body.appendChild(element);
             //onClick property
@@ -47,12 +51,12 @@ export const ActivityExecutionErrorReportModal = ({
             isOpen={true}
             size={displayFullscreen ? "fullscreen" : "large"}
             onClose={onDiscard}
-            headerOptions={(
+            headerOptions={
                 <IconButton
                     name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
                     onClick={() => setDisplayFullscreen(!displayFullscreen)}
                 />
-            )}
+            }
             actions={[
                 <Button data-test-id={"error-report-download-btn"} affirmative onClick={handleDownload} key="download">
                     {downloadButtonValue}
@@ -62,9 +66,7 @@ export const ActivityExecutionErrorReportModal = ({
                 </Button>,
             ]}
         >
-            <HtmlContentBlock noScrollbarsOnChildren>
-                {report}
-            </HtmlContentBlock>
+            <HtmlContentBlock noScrollbarsOnChildren>{report}</HtmlContentBlock>
         </SimpleDialog>
     );
-}
+};

package/src/cmem/ActivityControl/activitycontrol.scss

@@ -4,18 +4,18 @@
     }
 
     .#{$ns}-progress-bar {
-        display: block;
         position: absolute;
-        left: 0;
         bottom: 0;
+        left: 0;
+        display: block;
         width: 100%;
         height: $tab-indicator-width;
     }
 }
 
 .#{$eccgui}-addon-activitycontrol--shrink {
-    max-width: 100%;
     display: inline-flex;
+    max-width: 100%;
 
     &:not(.#{$eccgui}-card) {
         display: inline-block;

package/src/cmem/ConfidenceValue/ConfidenceValue.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { ConfidenceValue } from "../../../index";
 
 export default {
@@ -9,14 +10,11 @@ export default {
         barColor: {
             control: "color",
         },
-    }
-
+    },
 } as ComponentMeta<typeof ConfidenceValue>;
 
-const TemplateIcons: ComponentStory<typeof ConfidenceValue> = (args) => (
-    <ConfidenceValue {...args} />
-);
+const TemplateIcons: ComponentStory<typeof ConfidenceValue> = (args) => <ConfidenceValue {...args} />;
 export const Default = TemplateIcons.bind({});
 Default.args = {
-    value: "0.5"
+    value: "0.5",
 };

package/src/cmem/ConfidenceValue/ConfidenceValue.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import Color from "color";
-import { Tag, TagProps } from "./../../components/Tag";
-import { ProgressBar, ProgressBarProps } from "./../../components/ProgressBar";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import { ProgressBar, ProgressBarProps } from "./../../components/ProgressBar";
+import { Tag, TagProps } from "./../../components/Tag";
+
 export interface ConfidenceValueProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
      * Confidence value.
@@ -47,12 +49,12 @@ export interface ConfidenceValueProps extends Omit<React.HTMLAttributes<HTMLSpan
 }
 
 const toPercent = (n: number) => {
-    let formatted = (n * 100).toFixed(2)
-    const maybeRemovedFraction = formatted.replace(/(\.0+$)|(0+$)/, "")
-    return `${maybeRemovedFraction}%`
-}
+    const formatted = (n * 100).toFixed(2);
+    const maybeRemovedFraction = formatted.replace(/(\.0+$)|(0+$)/, "");
+    return `${maybeRemovedFraction}%`;
+};
 
-export function ConfidenceValue ({
+export function ConfidenceValue({
     className,
     value,
     minValue = -1,
@@ -65,19 +67,19 @@ export function ConfidenceValue ({
     progressBarProps,
     ...otherProps
 }: ConfidenceValueProps) {
-
-    const barValue = (
-        value === centerValue ? 0 :
-        value < centerValue ? value / (minValue - centerValue) :
-        value / (maxValue - centerValue)
-    );
+    const barValue =
+        value === centerValue
+            ? 0
+            : value < centerValue
+            ? value / (minValue - centerValue)
+            : value / (maxValue - centerValue);
 
     let color = Color("#000000");
-    if (!!barColor) {
+    if (barColor) {
         try {
             color = Color(barColor);
-        } catch(ex) {
-            console.warn("Received invalid color for confidence bar: " + barColor)
+        } catch (ex) {
+            console.warn("Received invalid color for confidence bar: " + barColor);
         }
     }
 
@@ -87,25 +89,24 @@ export function ConfidenceValue ({
                 `${eccgui}-confidencevalue` +
                 ` ${eccgui}-confidencevalue--${barStart}` +
                 ` ${eccgui}-confidencevalue--${spaceUsage}space` +
-                (value < centerValue ? ` ${eccgui}-confidencevalue--negative` : ` ${eccgui}-confidencevalue--positive`) +
+                (value < centerValue
+                    ? ` ${eccgui}-confidencevalue--negative`
+                    : ` ${eccgui}-confidencevalue--positive`) +
                 (className ? ` ${className}` : "")
             }
             {...otherProps}
         >
-            <Tag
-                className={`${eccgui}-confidencevalue__value`}
-                {...tagProps}
-            >
+            <Tag className={`${eccgui}-confidencevalue__value`} {...tagProps}>
                 {toPercent(value)}
             </Tag>
             <div
                 className={`${eccgui}-confidencevalue__bar-colorwrapper`}
-                style={!!barColor ? { color: color.rgb().toString() } : {}}
+                style={barColor ? { color: color.rgb().toString() } : {}}
             >
                 <ProgressBar
                     className={`${eccgui}-confidencevalue__bar`}
                     value={barValue}
-                    intent={!!barColor ? undefined : value < centerValue ? "danger" : "success"}
+                    intent={barColor ? undefined : value < centerValue ? "danger" : "success"}
                     stripes={false}
                     animate={false}
                     {...progressBarProps}