Merge pull request #195 from eccenca/feature/upgradeCarbonReact-CMEM-…

…4709 Update carbon dependencies
eccenca · Sep 9, 2024 · a6f2b28 · a6f2b28
2 parents 884ea42 + 0e5c999
commit a6f2b28
Show file tree

Hide file tree

Showing 43 changed files with 421 additions and 526 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   you may run into problems if you try it with Node v16 or v17, or Webpack v4, mainly because of a Node bugfix regarding the OpenSSL provider
     -   if you cannot upgrade your dependencies then you could workaround that by patching the `crypto` package or using Node with `--openssl-legacy-provider` option
     -   see https://github.com/webpack/webpack/issues/14532 and https://stackoverflow.com/questions/69692842/ for more info and possible solutions
+-   upgrade to `@carbon/react` package
+    -   almost all Carbon related packages were replaced by using only `@carbon/react`
+    -   some component interfaces partly lack documentation in our Storybook because their base interfaces from `@carbon/react` are currently not exported: `AccordionItemProps`, `ApplicationHeaderProps`, `ApplicationToolbarProps`, `ApplicationToolbarActionProps`, `ApplicationToolbarPanelProps`, `CarbonIconType`, `TableCellProps`, `TableExpandRowProps`, `TableProps`
 -   upgrade to Typescript v5
     -   your package should be compatible to Typescript 5 patterns
 -   upgrade to Storybook v8

diff --git a/declarations.d.ts b/declarations.d.ts
@@ -1,3 +1,2 @@
-declare module "@carbon/icons-react";
 declare module "carbon-components-react/es/index";
 declare module "wicg-inert";
diff --git a/package.json b/package.json
@@ -68,11 +68,9 @@
         "@blueprintjs/colors": "^5.1.1",
         "@blueprintjs/core": "^5.11.0",
         "@blueprintjs/select": "^5.2.2",
-        "@carbon/icons": "^11.19.0",
-        "@carbon/icons-react": "11.19.0",
-        "@carbon/styles": "1.32.0",
+        "@carbon/icons": "^11.47.1",
+        "@carbon/react": "^1.64.1",
         "@mavrin/remark-typograf": "^2.2.0",
-        "carbon-components-react": "^8.28.0",
         "codemirror": "^5.65.16",
         "codemirror-formatting": "^1.0.0",
         "color": "^4.2.3",
@@ -86,7 +84,7 @@
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
         "react-markdown": "^8.0.7",
-        "react-syntax-highlighter": "15.5.0",
+        "react-syntax-highlighter": "^15.5.0",
         "rehype-raw": "^6.1.1",
         "remark-definition-list": "^1.2.0",
         "remark-gfm": "^3.0.1",
@@ -116,12 +114,11 @@
         "@storybook/test": "^8.2.9",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^12.1.2",
-        "@types/carbon-components-react": "^7.55.13",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
         "@types/jest": "^29.5.12",
         "@types/lodash": "^4.17.7",
-        "@types/react-syntax-highlighter": "15.5.11",
+        "@types/react-syntax-highlighter": "^15.5.13",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
         "babel-jest": "^29.7.0",
@@ -156,15 +153,11 @@
     },
     "peerDependencies": {
         "@blueprintjs/core": ">=5",
-        "@carbon/icons-react": ">=11.34.1",
-        "@carbon/styles": "<1.33.0",
-        "@types/carbon-components-react": ">=7",
         "react": ">=16",
         "react-dom": ">=16"
     },
     "resolutions": {
         "**/@types/react": "^17.0.80",
-        "**/@carbon/icons-react": "11.19.0",
         "node-sass-package-importer/**/postcss": "^8.4.41"
     },
     "husky": {

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -1,11 +1,12 @@
-import React from "react";
-import { Accordion as CarbonAccordion, AccordionProps as CarbonAccordionProps } from "carbon-components-react";
+import React, { ReactNode } from "react";
+import { Accordion as CarbonAccordion, AccordionProps as CarbonAccordionProps } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { AccordionItemProps } from "./AccordionItem";
 
-export interface AccordionProps extends Omit<CarbonAccordionProps, "className" | "size"> {
+export interface AccordionProps extends Omit<CarbonAccordionProps, "children" | "className" | "size" | "isFlush"> {
+    children?: ReactNode;
     /**
      * Additional CSS classes.
      */

diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx
@@ -1,15 +1,16 @@
 import React from "react";
-import {
-    AccordionItem as CarbonAccordionItem,
-    AccordionItemProps as CarbonAccordionItemProps,
-} from "carbon-components-react";
+import { AccordionItem as CarbonAccordionItem } from "@carbon/react";
 
+// import { AccordionItemProps as CarbonAccordionItemProps } from "@carbon/react/es/components/Accordion/AccordionItem"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type sizeOptions = "none" | "small" | "medium" | "large";
 
+// workaround to get type/interface
+type CarbonAccordionItemProps = React.ComponentProps<typeof CarbonAccordionItem>;
 export interface AccordionItemProps
-    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
+    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando">,
+        Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
     /**
      * additional user class name
      */

diff --git a/src/components/Accordion/accordion.scss b/src/components/Accordion/accordion.scss
@@ -1,6 +1,6 @@
 // lib import
 @use "sass:color";
-@use "~@carbon/styles/scss/components/accordion/accordion";
+@use "~@carbon/react/scss/components/accordion/accordion";
 @include accordion.accordion;
 
 // own vars
@@ -77,11 +77,21 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
     }
 }
 
+.#{$prefix}--accordion__wrapper {
+    .#{$prefix}--accordion__item--active > & {
+        padding-block: 0;
+    }
+}
+
 .#{$prefix}--accordion__heading {
     align-items: center;
     min-height: var(--#{$eccgui}-accordion-header-height, mini-units(5));
     color: inherit;
 
+    .#{$prefix}--accordion--end & {
+        padding-right: 0;
+    }
+
     .#{$prefix}--accordion__arrow {
         margin: 0 $eccgui-size-block-whitespace * 0.5 0 0;
 
@@ -110,6 +120,7 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
 
 .#{$prefix}--accordion__title {
     min-width: 0; // flex layout fix
+    padding-left: 0;
     margin: 0 0 0 $eccgui-size-block-whitespace;
     font-size: inherit;
     line-height: inherit;

diff --git a/src/components/Application/ApplicationContent.tsx b/src/components/Application/ApplicationContent.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Content as CarbonContent } from "carbon-components-react";
+import { Content as CarbonContent } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

diff --git a/src/components/Application/ApplicationHeader.tsx b/src/components/Application/ApplicationHeader.tsx
@@ -1,9 +1,12 @@
 import React from "react";
-import { Header as CarbonHeader, HeaderProps as CarbonHeaderProps } from "carbon-components-react";
+import { Header as CarbonHeader } from "@carbon/react";
 
+// import { HeaderProps as CarbonHeaderProps } from "@carbon/react/es/components/UIShell/Header"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type ApplicationHeaderProps = CarbonHeaderProps;
+// workaround to get type/interface
+type CarbonHeaderProps = React.ComponentProps<typeof CarbonHeader>;
+export interface ApplicationHeaderProps extends CarbonHeaderProps, React.HTMLAttributes<HTMLElement> {}
 
 export const ApplicationHeader = ({
     children = "",

diff --git a/src/components/Application/ApplicationSidebarNavigation.tsx b/src/components/Application/ApplicationSidebarNavigation.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "carbon-components-react";
+import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationSidebarNavigationProps
-    extends Omit<CarbonSideNavProps, "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
+    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
         React.HTMLAttributes<HTMLElement> {}
 
 export const ApplicationSidebarNavigation = ({

diff --git a/src/components/Application/ApplicationSidebarToggler.tsx b/src/components/Application/ApplicationSidebarToggler.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import {
     HeaderMenuButton as CarbonHeaderMenuButton,
     HeaderMenuButtonProps as CarbonHeaderMenuButtonProps,
-} from "carbon-components-react";
+} from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

diff --git a/src/components/Application/ApplicationTitle.tsx b/src/components/Application/ApplicationTitle.tsx
@@ -1,27 +1,12 @@
 import React from "react";
-import { HeaderName as CarbonHeaderName, HeaderNameProps as CarbonHeaderNameProps } from "carbon-components-react";
+import { HeaderName as CarbonHeaderName, HeaderNameProps as CarbonHeaderNameProps } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type SvgDepiction = HTMLElement & SVGElement;
 type ImgDepiction = HTMLElement & HTMLImageElement;
 
-export interface ApplicationTitleProps extends CarbonHeaderNameProps {
-    // from CarbonHeaderNameProps
-    /**
-        addional class name
-    */
-    className?: string;
-    /**
-        prefix the application name by extra string, e.g. company name
-    */
-    prefix?: string;
-    /**
-        home link
-    */
-    href?: string;
-
-    // our extensions
+export type ApplicationTitleProps = CarbonHeaderNameProps<"a"> & {
     /**
         application logo, <img>, <svg> or react element
     */
@@ -42,7 +27,7 @@ export interface ApplicationTitleProps extends CarbonHeaderNameProps {
         native attributes for the anchor HTML element (<a>)
     */
     htmlAProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
-}
+};
 
 export const ApplicationTitle = ({
     children,

diff --git a/src/components/Application/ApplicationToolbar.tsx b/src/components/Application/ApplicationToolbar.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import {
-    HeaderGlobalBar as CarbonHeaderGlobalBar,
-    HeaderGlobalBarProps as CarbonHeaderGlobalBarProps,
-} from "carbon-components-react";
+import { HeaderGlobalBar as CarbonHeaderGlobalBar } from "@carbon/react";
 
+// import { HeaderGlobalBarProps as CarbonHeaderGlobalBarProps } from "@carbon/react/es/components/UIShell/HeaderGlobalBar"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+// workaround to get type/inteface
+type CarbonHeaderGlobalBarProps = React.ComponentProps<typeof CarbonHeaderGlobalBar>;
 export type ApplicationToolbarProps = CarbonHeaderGlobalBarProps;
 
 export const ApplicationToolbar = ({

diff --git a/src/components/Application/ApplicationToolbarAction.tsx b/src/components/Application/ApplicationToolbarAction.tsx
@@ -1,12 +1,14 @@
 import React from "react";
-import {
-    HeaderGlobalAction as CarbonHeaderGlobalAction,
-    HeaderGlobalActionProps as CarbonHeaderGlobalActionProps,
-} from "carbon-components-react";
+import { HeaderGlobalAction as CarbonHeaderGlobalAction } from "@carbon/react";
 
+// import { HeaderGlobalActionProps as CarbonHeaderGlobalActionProps } from "@carbon/react/es/components/UIShell/HeaderGlobalAction"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type ApplicationToolbarActionProps = CarbonHeaderGlobalActionProps;
+// workaround to get type/interface
+type CarbonHeaderGlobalActionProps = React.ComponentProps<typeof CarbonHeaderGlobalAction>;
+export interface ApplicationToolbarActionProps
+    extends CarbonHeaderGlobalActionProps,
+        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {}
 
 export const ApplicationToolbarAction = ({
     children,

diff --git a/src/components/Application/ApplicationToolbarPanel.tsx b/src/components/Application/ApplicationToolbarPanel.tsx
@@ -1,9 +1,12 @@
 import React from "react";
-import { HeaderPanel as CarbonHeaderPanel, HeaderPanelProps as CarbonHeaderPanelProps } from "carbon-components-react";
+import { HeaderPanel as CarbonHeaderPanel } from "@carbon/react";
 
+// import { HeaderPanelProps as CarbonHeaderPanelProps } from "@carbon/react/es/components/UIShell/HeaderPanel"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationToolbarPanelProps extends CarbonHeaderPanelProps {
+// workaround to get type/inteface
+type CarbonHeaderPanelProps = React.ComponentProps<typeof CarbonHeaderPanel>;
+export interface ApplicationToolbarPanelProps extends CarbonHeaderPanelProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Event handler getting called when the pointer device leaves the area of the panel menu.
      * Could be used to close it automatically.

diff --git a/src/components/Application/_config.scss b/src/components/Application/_config.scss
@@ -5,7 +5,7 @@
 */
 
 /// should be already imported
-//@import '~@carbon/styles/scss/colors';
+//@import '~@carbon/react/scss/colors';
 
 /*
 //----------------------------------------------------------------------------

diff --git a/src/components/Application/_content.scss b/src/components/Application/_content.scss
@@ -1,6 +1,6 @@
 $ui-02: $eccgui-color-workspace-background !default;
 
-@import "~@carbon/styles/scss/components/ui-shell/content/index";
+@import "~@carbon/react/scss/components/ui-shell/content/index";
 
 // tweack original layout
 

diff --git a/src/components/Application/_header.scss b/src/components/Application/_header.scss
@@ -53,7 +53,7 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 $shell-header-link: $blue-60 !default;
 
 // load library sub component
-@import "~@carbon/styles/scss/components/ui-shell/header/index";
+@import "~@carbon/react/scss/components/ui-shell/header/index";
 
 // tweack original layout
 

diff --git a/src/components/Application/_sidebar.scss b/src/components/Application/_sidebar.scss
@@ -1,6 +1,6 @@
 $ui-02: $eccgui-color-workspace-background !default;
 
-@import "~@carbon/styles/scss/components/ui-shell/side-nav/index";
+@import "~@carbon/react/scss/components/ui-shell/side-nav/index";
 
 // tweak original layout
 

diff --git a/src/components/Application/_toolbar.scss b/src/components/Application/_toolbar.scss
@@ -32,7 +32,7 @@ $shell-panel-text-02: $eccgui-color-applicationheader-text !default;
 /// Header panel focus border
 $shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
-@import "~@carbon/styles/scss/components/ui-shell/header-panel/index";
+@import "~@carbon/react/scss/components/ui-shell/header-panel/index";
 
 // tweack original layout
 

diff --git a/src/components/Application/application.scss b/src/components/Application/application.scss
@@ -2,10 +2,10 @@
 @import "header";
 @import "toolbar";
 
-// @import '~@carbon/styles/scss/components/ui-shell/product-switcher';
-// @import '~@carbon/styles/scss/components/ui-shell/switcher';
+// @import '~@carbon/react/scss/components/ui-shell/product-switcher';
+// @import '~@carbon/react/scss/components/ui-shell/switcher';
 @import "sidebar";
 
-// @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
+// @import '~@carbon/react/scss/components/ui-shell/navigation-menu';
 @import "content";
 @import "dropzone";
diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-// @ts-ignore // FlexGrid is not part of @types/carbon-components-react
-import { FlexGrid as CarbonGrid, GridDefaultProps } from "carbon-components-react";
+import { FlexGrid as CarbonGrid } from "@carbon/react";
+import { GridProps as CarbonGridProps } from "@carbon/react/es/components/Grid";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow" | "as"> {
+export interface GridProps
+    extends Omit<CarbonGridProps<"article" | "section" | "div">, "fullWidth" | "columns" | "narrow" | "as"> {
     /**
      * The available grid height can be distributed between multiple rows.
      * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.

diff --git a/src/components/Grid/GridColumn.tsx b/src/components/Grid/GridColumn.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-// import PropTypes from 'prop-types';
-import { Column as CarbonColumn, ColumnDefaultProps } from "carbon-components-react";
+import { Column as CarbonColumn } from "@carbon/react";
+import { ColumnProps as CarbonGridColumnProps } from "@carbon/react/es/components/Grid/Column";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
+export interface GridColumnProps extends Omit<CarbonGridColumnProps<"div">, "max" | "xlg" | "lg" | "md" | "sm"> {
     /**
      * Column width is small, using 3 (or 2, on medium viewports) parts out of 16.
      * This boolean property is basically a quick switch for setting `{ md:2, lg:3 }`.
@@ -22,7 +22,7 @@ export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg"
     /**
      * Overwrite column sizes by using the original size config of the Carbon grid column.
      */
-    carbonSizeConfig?: Pick<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm">;
+    carbonSizeConfig?: Pick<CarbonGridColumnProps<"div">, "max" | "xlg" | "lg" | "md" | "sm">;
     /**
      * @deprecated
      * Grid column always uses full width if it is the only column and does not have any othe size config.

diff --git a/src/components/Grid/GridRow.tsx b/src/components/Grid/GridRow.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 // import PropTypes from 'prop-types';
-import { Row as CarbonRow, RowDefaultProps } from "carbon-components-react";
+import { Row as CarbonRow } from "@carbon/react";
+import { RowProps as CarbonRowProps } from "@carbon/react/es/components/Grid/Row";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
+export interface GridRowProps extends Omit<CarbonRowProps<"div">, "narrow"> {
     /**
      * Do not wrap column children when there is not enough space available.
      * This only works for grids on medium sized and larger viewports.

diff --git a/src/components/Grid/grid.scss b/src/components/Grid/grid.scss
@@ -7,7 +7,7 @@ $eccgui-size-grid-gutter: $eccgui-size-block-whitespace !default;
 $grid-gutter: rem($eccgui-size-grid-gutter);
 
 // load grid
-@import "~@carbon/styles/scss/grid/flexbox";
+@import "~@carbon/react/scss/grid/flexbox";
 
 // adjustments