Merge pull request #152 from eccenca/feature/upgradeBlueprintJS-CMEM-…

…5311 Upgrade BlueprintJS to v5 (CMEM-5311)
eccenca · Mar 6, 2024 · 4054c97 · 4054c97
2 parents 9213ded + 74f8dde
commit 4054c97
Show file tree

Hide file tree

Showing 42 changed files with 3,749 additions and 4,825 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,29 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `ClassNames` now forwards all BlueprintJS CSS class names
+    -   ```
+        import { ClassNames } from "@eccenca/gui-elements";
+        export const bpButtonClass = ClassNames.Blueprint.BUTTON;
+        ```
+
+### Changed
+
+-   BlueprintJS libraries was updated to v5
+    -   Popover2 lib was removed because we can now again use the internal component from core lib again
+-   `<ApplicationContainer />`
+    -   `<OverlaysProvider />` from BlueprintJS is now used
+    -   @see https://github.com/palantir/blueprint/wiki/Overlay2-migration
+
+### Deprecated
+
+-   `AnchorOrButtonProps`
+    -   currently exported together with the `<Button />` component
+    -   will be removed with the next major version
+    -   there won't be a replacement or alternate interface as `ButtonProps` should be always enough
+
 ## [23.5.0] - 2024-02-15
 
 ### Added

diff --git a/package.json b/package.json
@@ -65,64 +65,62 @@
         "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",
@@ -132,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"
     },
@@ -158,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": {

diff --git a/src/cmem/markdown/highlightSearchWords.ts b/src/cmem/markdown/highlightSearchWords.ts
@@ -4,11 +4,7 @@ import { Node } from "unist";
 
 import { highlighterUtils } from "../../components/Typography/Highlighter";
 
-/**
- * Creates a react-markdown reHype plugin that marks text based on a multi-word search query.
- * @deprecated moved to `markdownUtils.highlightSearchWordsPluginFactory`
- */
-export default function highlightSearchWordsPluginFactory(searchQuery: string | undefined) {
+const highlightSearchWordsPluginFactoryFn = (searchQuery: string | undefined) => {
     const searchStringParts = searchQuery ? highlighterUtils.extractSearchWords(searchQuery) : [];
     const multiWordRegex = highlighterUtils.createMultiWordRegex(searchStringParts);
     const createTextNode = (text: string): Text => ({ type: "text", value: text });
@@ -67,8 +63,16 @@ export default function highlightSearchWordsPluginFactory(searchQuery: string |
     return function highlightSearchWords(): Transformer<Root, Root> {
         return (input: Root) => highlightRootNode(input);
     };
-}
+};
+
+/**
+ * Creates a react-markdown reHype plugin that marks text based on a multi-word search query.
+ * @deprecated moved to `markdownUtils.highlightSearchWordsPluginFactory`
+ */
+const highlightSearchWordsPluginFactory = highlightSearchWordsPluginFactoryFn;
+
+export default highlightSearchWordsPluginFactory;
 
 export const markdownUtils = {
-    highlightSearchWordsPluginFactory,
+    highlightSearchWordsPluginFactory: highlightSearchWordsPluginFactoryFn,
 };
diff --git a/src/components/Application/ApplicationContainer.tsx b/src/components/Application/ApplicationContainer.tsx
@@ -1,14 +1,17 @@
 import React from "react";
+import { OverlaysProvider } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
 
 export const ApplicationContainer = ({ children, className = "", ...otherDivProps }: ApplicationContainerProps) => {
     return (
-        <div className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
-            {children}
-        </div>
+        <OverlaysProvider>
+            <div className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
+                {children}
+            </div>
+        </OverlaysProvider>
     );
 };
 

diff --git a/src/components/AutoSuggestion/AutoSuggestion.scss b/src/components/AutoSuggestion/AutoSuggestion.scss
@@ -13,7 +13,7 @@
         margin-top: 0;
         overflow-x: hidden;
         overflow-y: auto;
-        background-color: $pt-popover2-background-color;
+        background-color: $pt-popover-background-color;
 
         // TODO: was: 1px solid $list-container-item-border-color
         border: 1px solid;

diff --git a/src/components/AutoSuggestion/tests/AutoSuggestionList.test.tsx b/src/components/AutoSuggestion/tests/AutoSuggestionList.test.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Classes } from "@blueprintjs/core";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
@@ -14,8 +15,12 @@ describe("Dropdown list", () => {
             loading: false,
             isOpen: false,
             options: [],
-            itemToHighlight: () => {},
-            onItemSelectionChange: () => {},
+            itemToHighlight: () => {
+                return;
+            },
+            onItemSelectionChange: () => {
+                return;
+            },
         };
 
         mockOptions = [
@@ -87,12 +92,14 @@ describe("Dropdown list", () => {
             options: mockOptions,
         };
         const { container } = render(<AutoSuggestionList {...props} />);
-        const activeListItems = Array.from(container.querySelectorAll("li .bp4-menu-item.bp4-active"));
+        const activeListItems = Array.from(container.querySelectorAll(`li .${Classes.MENU_ITEM}.${Classes.ACTIVE}`));
         expect(activeListItems.length).toBe(1);
     });
 
     it("should respond to click on each item and pass the clicked item to autosuggestion", () => {
-        const mockOnItemSelection = jest.fn((item) => {});
+        const mockOnItemSelection = jest.fn((item) => {
+            return;
+        });
         props = {
             ...props,
             loading: false,
@@ -108,7 +115,9 @@ describe("Dropdown list", () => {
     });
 
     it("should call highlight function when list item is mouse hovered", () => {
-        const mockItemToHighlight = jest.fn((item) => {});
+        const mockItemToHighlight = jest.fn((item) => {
+            return;
+        });
         props = {
             ...props,
             loading: false,

diff --git a/src/components/AutocompleteField/AutoCompleteField.tsx b/src/components/AutocompleteField/AutoCompleteField.tsx
@@ -387,7 +387,7 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
                     {onlyDropdownWithQuery === false && (
                         <IconButton
                             name={"toggler-caretdown"}
-                            onClick={(e) => {
+                            onClick={(e: React.MouseEvent<HTMLElement>) => {
                                 const target = e.currentTarget
                                     .closest(`.${eccgui}-autocompletefield__input`)
                                     ?.querySelector("input");

diff --git a/src/components/Breadcrumb/BreadcrumbList.tsx b/src/components/Breadcrumb/BreadcrumbList.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from "react";
 import {
-    Breadcrumbs2 as BlueprintBreadcrumbList,
-    Breadcrumbs2Props as BlueprintBreadcrumbsProps,
-} from "@blueprintjs/popover2";
+    Breadcrumbs as BlueprintBreadcrumbList,
+    BreadcrumbsProps as BlueprintBreadcrumbsProps,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -28,7 +28,7 @@ export interface BreadcrumbListProps
     /**
         click handler used on breadcrumb items
     */
-    onItemClick?(itemUrl: string | undefined, event: object): any;
+    onItemClick?(itemUrl: string | undefined, event: object): boolean | void;
     /**
         native attributes for the unordered HTML list (ul)
     */