Merge branch 'develop' into feature/reusableRuleBlocks-CMEM-1590

Author: andreas-schultz

.github/workflows/push-tagged-release.yml

@@ -37,7 +37,6 @@ jobs:
       - uses: actions/setup-node@main
         with:
           node-version: "lts/krypton"
-          registry-url: "https://registry.npmjs.org"
       - name: Set name vars
         id: info-vars
         run: |
@@ -68,6 +67,11 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.chromaticToken }}
           exitZeroOnChanges: true
+      - uses: actions/setup-node@main
+        with:
+          node-version: "lts/krypton"
+          registry-url: "https://registry.npmjs.org"
+          package-manager-cache: false
       - name: Publish npm package
         run: yarn publish --access public
         env:

.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},
                 },
             },
         },
@@ -98,7 +99,4 @@ module.exports = {
         };
         return config;
     },
-    docs: {
-        autodocs: true,
-    },
 };

.storybook/preview.js

@@ -1,36 +1,24 @@
-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 = {
     options: {
         storySort: {
             order: ["Configuration", "Components", "Forms", "Extensions", "CMEM", "*"],
         },
     },
-    actions: {
-        argTypesRegex: "^on[A-Z].*",
-    },
     controls: {
         matchers: {
             color: /(background|color)$/i,
             date: /Date$/,
         },
     },
 };
+
+const preview = {
+    // Enables auto-generated documentation for all stories
+    // @see https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters,
+};
+
+export default preview;

CHANGELOG.md

@@ -32,6 +32,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - **React and its types were updated to v18, so you may hit incompatibilities if you run it with React 16 or 17.**
 - `color` library was upgraded from v4 to v5, so the types changed
     - if you forward properties then they cannot have `Color` as type, use `ColorLike`
+- `@blueprintjs/core` library was updated to v6
+    - you may need to update class names in your tests (the new prefix is `bp6-`)
+    - `Toaster.create` is now an async function
 - `<MultiSelect />`
     - by default, if no searchPredicate or searchListPredicate is defined, the filtering is done via case-insensitive multi-word filtering.
 

blueprint/toaster/index.tsx

@@ -1 +1,9 @@
-export { Toaster as default } from "@blueprintjs/core";
+import { OverlayToaster } from "@blueprintjs/core";
+
+/**
+ * `OverlayToaster` from BlueprintJS, we still serve it as `Toaster`.
+ * @deprecated (v27) will be completely removed.
+ */
+const Toaster = OverlayToaster;
+export { Toaster };
+export default Toaster;

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,15 @@
         "@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-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 +142,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 +163,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",
@@ -176,17 +175,16 @@
         "yargs": "^18.0.0"
     },
     "peerDependencies": {
-        "@blueprintjs/core": ">=5",
+        "@blueprintjs/core": ">=6",
         "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" {