Upgrade BlueprintJS to v6 (CMEM-7139)

.storybook/main.js

@@ -1,19 +1,20 @@
 const sass = require("sass");
 const path = require("path");
 const sassRenderSyncConfig = require("./../scripts/sassConfig");
+const { silenceDeprecations } = require("../scripts/sassDeprecationConfig");
 
 module.exports = {
     stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
     addons: [
         "@storybook/addon-links",
-        "@storybook/addon-essentials",
-        "@storybook/addon-jest",
+        "@storybook/addon-docs",
+        "@storybook/addon-a11y",
         {
             name: "@storybook/preset-scss",
             options: {
                 sassLoaderOptions: {
                     implementation: sass,
-                    sassOptions: sassRenderSyncConfig,
+                    sassOptions: {...sassRenderSyncConfig, silenceDeprecations},
                 },
             },
         },

.storybook/preview.js

@@ -1,21 +1,6 @@
-import { withTests } from "@storybook/addon-jest";
-
 import "./styles.scss";
 
-const getJestResults = () => {
-    try {
-        return require("../.jest-test-results.json");
-    } catch (err) {
-        return {};
-    }
-};
-
-const jestResults = getJestResults();
-
 export const decorators = [
-    withTests({
-        results: jestResults,
-    }),
 ];
 
 export const parameters = {
@@ -34,3 +19,12 @@ export const parameters = {
         },
     },
 };
+
+const preview = {
+    // Enables auto-generated documentation for all stories
+    // @see https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters,
+};
+
+export default preview;

package.json

@@ -68,9 +68,9 @@
         "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^5.1.11",
-        "@blueprintjs/core": "^5.19.1",
-        "@blueprintjs/select": "^5.3.21",
+        "@blueprintjs/colors": "^5.1.16",
+        "@blueprintjs/core": "6.8.1",
+        "@blueprintjs/select": "6.1.1",
         "@carbon/icons": "^11.80.0",
         "@carbon/react": "^1.107.1",
         "@codemirror/lang-html": "^6.4.11",
@@ -120,16 +120,16 @@
         "@eslint/compat": "^2.1.0",
         "@eslint/eslintrc": "^3.3.5",
         "@eslint/js": "^10.0.1",
-        "@storybook/addon-actions": "^8.6.14",
-        "@storybook/addon-essentials": "^8.6.18",
-        "@storybook/addon-jest": "^8.6.14",
-        "@storybook/addon-links": "^8.6.14",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-        "@storybook/cli": "^8.6.18",
+        "@storybook/addon-a11y": "^10.4.0",
+        "@storybook/addon-actions": "^9.0.8",
+        "@storybook/addon-docs": "^10.4.0",
+        "@storybook/addon-links": "^10.4.0",
+        "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
+        "@storybook/cli": "^10.4.0",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.6.18",
-        "@storybook/react-webpack5": "^8.6.18",
-        "@storybook/test": "^8.6.18",
+        "@storybook/react": "^10.4.0",
+        "@storybook/react-webpack5": "^10.4.0",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@types/he": "^1.2.3",
@@ -143,7 +143,7 @@
         "@typescript-eslint/eslint-plugin": "^8.59.3",
         "@typescript-eslint/parser": "^8.59.3",
         "babel-jest": "^30.4.1",
-        "chromatic": "^13.3.4",
+        "chromatic": "^16.10.1",
         "eslint": "^10.3.0",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^7.1.1",
@@ -164,7 +164,7 @@
         "rimraf": "^6.1.3",
         "sass": "^1.99.0",
         "sass-loader": "^16.0.8",
-        "storybook": "^8.6.18",
+        "storybook": "^10.4.0",
         "stylelint": "^17.11.0",
         "stylelint-config-recess-order": "^7.7.0",
         "stylelint-config-standard-scss": "^17.0.0",
@@ -180,13 +180,12 @@
         "react": ">=18"
     },
     "resolutions": {
-        "node-sass-package-importer/**/postcss": "^8.5.6",
+        "**/@blueprintjs/core": "6.8.1",
+        "node-sass-package-importer/**/postcss": "^8.5.10",
         "hast-util-from-parse5": "8.0.0",
-        "**/lodash": "^4.18.0",
+        "**/lodash": "^4.18.1",
         "**/minimatch": "^3.1.4",
-        "**/tar": "^7.5.11",
-        "**/fast-uri": "^3.1.2",
-        "**/serialize-javascript": "^7.0.3"
+        "**/serialize-javascript": "^7.0.5"
     },
     "husky": {
         "hooks": {

scripts/compile-sass.ts

@@ -3,13 +3,14 @@ import * as sass from "sass";
 import yargs from "yargs";
 
 import sassRenderSyncConfig from "./sassConfig";
+import { silenceDeprecations } from "./sassDeprecationConfig"
 
 const args = yargs(process.argv.slice(2)).argv as any;
 
 const styles = sass.renderSync({
     importer: tildeImporter(),
     ...sassRenderSyncConfig,
-    silenceDeprecations: ["import", "legacy-js-api"],
+    silenceDeprecations: silenceDeprecations as sass.DeprecationOrId[],
     file: "src/index.scss",
     includePaths: ["node_modules"], // Carbon does not use tilde import syntax
 });

scripts/sassDeprecationConfig.js

@@ -0,0 +1,3 @@
+module.exports = {
+    silenceDeprecations: ["import", "legacy-js-api"],
+}

src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -7,7 +7,7 @@ import {
     Position,
 } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 import {
     Background as BackgroundV12,
     BackgroundVariant as BackgroundVariantV12,

src/common/scss/_color-functions.scss

@@ -92,7 +92,11 @@
     }
 
     @if $alpha > 0 {
-        @return eccgui-color-mix($color 100% * $alpha, transparent);
+        @if math.is-unitless($alpha) {
+            $alpha: 100% * $alpha;
+        }
+
+        @return eccgui-color-mix($color $alpha, transparent);
     } @else {
         // workaround: we need to prevent `0%` because it will reduced to `0` by some CSS minifiers and leads to invalid color-mix values
         @return eccgui-color-mix($color, transparent 100%);
@@ -102,6 +106,8 @@
 $debug-rgba-values: "yes";
 
 /**
+ * Overwrite SCSS built-in rgba function
+ * TODO: we need to check if this is future proof, maybe this behaviour is not planned by Dart Sass library.
  * Split between rgba(red, green, blue, alpha) and rgba(color, alpha).
  */
 @function rgba($r, $g, $b: "undefined", $a: 1) {
@@ -113,15 +119,14 @@ $debug-rgba-values: "yes";
     } @else {
         // rgba(r, g, b, a) is used -> rgb(r g b / a)
         // @see https://developer.mozilla.org/de/docs/Web/CSS/color_value/rgb
-        $color-new-notation: rgb(#{$r} #{$g} #{$b} / #{$a});
+        $color-new-notation: #{"rgb(" + $r + " " + $g + " " + $b + " / " + $a + ")"};
 
         @return $color-new-notation;
     }
 }
 
 /**
- * Overwrite SCSS built-in rgba function to support colors by custom properties and CSS color methods.
- * TODO: we need to check if this is future proof, maybe this bahaviour is not planned by Dart Sass library.
+ * Support colors by custom properties and CSS color methods.
  */
 @function rgba-extended($color, $alpha) {
     @if meta.type-of($color) == "color" {

src/components/Application/stories/ColorPalettes.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { loremIpsum } from "react-lorem-ipsum";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import Color from "color";
 
@@ -183,7 +184,9 @@ const ColorPaletteConfigurator = ({
 
     React.useEffect(() => {
         if (refConfigurator.current) {
-            const panelConfig = document.getElementById("bp5-tab-panel_colorconfig_editor");
+            const panelConfig = document.getElementById(
+                `${BlueprintClasses.getClassNamespace()}-tab-panel_colorconfig_editor`,
+            );
             if (panelConfig) {
                 const warnings = Array.from(panelConfig.getElementsByClassName("eccgui-badge"))
                     .map((warning: Element) => {

src/components/Application/tests/ApplicationViewability.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { expect } from "@storybook/test";
 import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
@@ -25,19 +24,14 @@ describe("ApplicationViewability", () => {
          * Looks like it is not too easy to include and test them.
          * So we only test for the correct CSS class.
          */
-        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `hide=screen`", () => {
         applyViewabilityAndCheckClass({ hide: "screen" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
     it("should be visible on `hide=print`", () => {
         applyViewabilityAndCheckClass({ hide: "print" });
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `show=print`", () => {
         applyViewabilityAndCheckClass({ show: "print" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
 });

src/components/Chat/_chat.scss

@@ -1,5 +1,5 @@
 .#{$eccgui}-chat__content {
-    @extend .bp5-elevation-1;
+    @extend .#{$ns}-elevation-1;
 
     position: relative;
     z-index: 0;
@@ -32,7 +32,7 @@
         position: relative;
 
         &::before {
-            @extend .bp5-elevation-1;
+            @extend .#{$ns}-elevation-1;
 
             position: absolute;
             top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});

src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";

src/components/ContextOverlay/ContextOverlay.stories.tsx

@@ -4,7 +4,7 @@ import { PopoverInteractionKind, PopperModifierOverrides } from "@blueprintjs/co
 import { PopperPlacements } from "@blueprintjs/core";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { Button, ContextOverlay, HtmlContentBlock } from "../../index";
 

src/components/Dialog/stories/AlertDialog.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { AlertDialog } from "./../../../../index";
 import simpleDialogStory, { Default as SimpleDialogExample } from "./SimpleDialog.stories";

src/components/Dialog/stories/Modal.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 

src/components/Dialog/stories/SimpleDialog.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { SimpleDialog } from "./../../../../index";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";

src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Notification } from "../Notification/Notification";

src/components/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, Depiction, MenuItem, Select } from "../../index";

src/components/Sticky/stories/StickyTarget.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { HtmlContentBlock, StickyTarget } from "../../../../index";
 
@@ -10,7 +10,7 @@ export default {
     argTypes: {},
 } as Meta<typeof StickyTarget>;
 
-const Template: Story<typeof StickyTarget> = (args) => (
+const Template: StoryFn<typeof StickyTarget> = (args) => (
     <div style={{ height: "10rem", overflow: "auto", position: "relative" }}>
         <HtmlContentBlock>
             {args.getConnectedElement && args.to !== "bottom" && (

src/components/TextField/TextArea.tsx

@@ -38,6 +38,11 @@ export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
      * The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.
      */
     wrapperDivProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    /**
+     * Whether the text area should automatically grow vertically to accommodate content.
+     * @deprecated (v27) use the `autoResize` property instead.
+     */
+    growVertically?: boolean;
 }
 
 export const TextArea = ({

src/components/Tooltip/Tooltip.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { Tooltip } from "../../index";
 

src/includes/blueprintjs/_variables.scss

@@ -59,3 +59,4 @@ $pt-font-size-small: $eccgui-size-typo-caption !default;
 $pt-line-height: $eccgui-size-typo-text-lineheight !default;
 $pt-icon-size-standard: 20px !default;
 $pt-icon-size-large: 32px !default;
+$pt-border-radius: 2px !default;