Merge pull request #393 from eccenca/feature/maintainLibraries-CMEM-7611

Maintain libraries (CMEM-7611)

Author: J-x-D

.gitignore

@@ -61,3 +61,6 @@ launch.json
 storybook-static
 //jest
 .jest-test-results.json
+
+# ignore Typescript assets
+*.tsbuildinfo

.typescript/tsbuild-esm.json

@@ -1,7 +1,16 @@
 {
     "extends": "./../tsconfig.json",
     "compilerOptions": {
-        "lib": ["dom", "dom.iterable", "es2015", "es2020", "es2021", "es2022.intl", "es2015.collection", "es2015.iterable"],
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "es2015",
+            "es2020",
+            "es2021",
+            "es2022.intl",
+            "es2015.collection",
+            "es2015.iterable"
+        ],
         "module": "es2015",
         "target": "es5",
         "noEmit": false,

CHANGELOG.md

@@ -22,9 +22,9 @@ yarn add --dev @types/carbon-components-react
 
 ### Inclusion
 
--   To include SCSS styles for all basic components add `@import "~@eccenca/gui-elements/index";` into your main SCSS file.
--   To use extensions and special Corporate Memory components the include of `@eccenca/gui-elements/extensions` and `@eccenca/gui-elements/cmem` is necessary
--   To include only the default configuration add `@import "~@eccenca/gui-elements/src/configuration/variables;` into your SCSS file.
+- To include SCSS styles for all basic components add `@import "~@eccenca/gui-elements/index";` into your main SCSS file.
+- To use extensions and special Corporate Memory components the include of `@eccenca/gui-elements/extensions` and `@eccenca/gui-elements/cmem` is necessary
+- To include only the default configuration add `@import "~@eccenca/gui-elements/src/configuration/variables;` into your SCSS file.
 
 ### Configuration
 
@@ -76,40 +76,40 @@ All palette colors will be transformed into CSS custom properties automatically
 
 All other colors are based on the palette but it is still possible to set them before the default values are used by importing the configuration or the full library.
 
--   `$eccgui-color-primary`: color for very important buttons and switches
--   `$eccgui-color-primary-contrast`: readable text color used on primary color areas
--   `$eccgui-color-accent`: color for most conformation buttons, links, etc
--   `$eccgui-color-accent-contrast`: readable text color used on accent color areas
--   `$eccgui-color-applicationheader-text`
--   `$eccgui-color-applicationheader-background`
--   `$eccgui-color-workspace-text`
--   `$eccgui-color-workspace-background`
+- `$eccgui-color-primary`: color for very important buttons and switches
+- `$eccgui-color-primary-contrast`: readable text color used on primary color areas
+- `$eccgui-color-accent`: color for most conformation buttons, links, etc
+- `$eccgui-color-accent-contrast`: readable text color used on accent color areas
+- `$eccgui-color-applicationheader-text`
+- `$eccgui-color-applicationheader-background`
+- `$eccgui-color-workspace-text`
+- `$eccgui-color-workspace-background`
 
 #### Sizes
 
--   `$eccgui-size-typo-base`: size including absolute unit, currently only `px` is supported
--   `$eccgui-size-typo-base-lineheight`: only ratio to font size, no unit!
--   `$eccgui-size-type-levelratio`: ratio without unit! used to calculate different text sizes based on `$eccgui-size-typo-base`
--   `$eccgui-size-block-whitespace`: white space between block level elements, currently only `px` is supported
+- `$eccgui-size-typo-base`: size including absolute unit, currently only `px` is supported
+- `$eccgui-size-typo-base-lineheight`: only ratio to font size, no unit!
+- `$eccgui-size-type-levelratio`: ratio without unit! used to calculate different text sizes based on `$eccgui-size-typo-base`
+- `$eccgui-size-block-whitespace`: white space between block level elements, currently only `px` is supported
 
 ## Development
 
 ### Branch management
 
 We have 4 types of major branches representing the current state:
 
--   `main`: contains the latest official release, only `release/*` branches will be merged into this branch
--   `develop`: contains the latest state of development, `feature/*`, `bugfix/*` and `next` branches will be merged into `develop`
--   `next`: development tree for an upcoming new major version, it will be merged into `develop` at some point, `feature/*`, `bugfix/*` and `release/*` branches will be merged into it
--   `legacy`: development tree for the predecessor of the current major version, only `bugfix/*` and `hotfix/*` branches will be merged into it
+- `main`: contains the latest official release, only `release/*` branches will be merged into this branch
+- `develop`: contains the latest state of development, `feature/*`, `bugfix/*` and `next` branches will be merged into `develop`
+- `next`: development tree for an upcoming new major version, it will be merged into `develop` at some point, `feature/*`, `bugfix/*` and `release/*` branches will be merged into it
+- `legacy`: development tree for the predecessor of the current major version, only `bugfix/*` and `hotfix/*` branches will be merged into it
 
 We allow a few more prefixes for valid branchnames:
 
--   `feature/*`: extend functionality
--   `fix/*`, `bugfix/*`, `hotfix/*`: fix functionality
--   `release/*`: branches to finalize releases, also used to publish release candidate packages
--   `change/*`, `temp/*`, `test/*`: unspecific changes, maybe only created to test something that won't end necessarily in a PR
--   `maintain/*`: maintain dependencies, changes created in publishing process
+- `feature/*`: extend functionality
+- `fix/*`, `bugfix/*`, `hotfix/*`: fix functionality
+- `release/*`: branches to finalize releases, also used to publish release candidate packages
+- `change/*`, `temp/*`, `test/*`: unspecific changes, maybe only created to test something that won't end necessarily in a PR
+- `maintain/*`: maintain dependencies, changes created in publishing process
 
 `next` and `legacy` only exist if necessary, otherwise we do not maintain those branches. Merges into `main`, `develop`, `next` and `legacy` are always managed by pull requests.
 
@@ -142,9 +142,9 @@ Default.parameters = {
 
 ### Naming conventions
 
--   Use a `*Props` suffix for component interfaces.
--   Use a `*Utils` suffix for objects providing helper functions to compoents.
-    Name should start with a lowercase letter.
+- Use a `*Props` suffix for component interfaces.
+- Use a `*Utils` suffix for objects providing helper functions to compoents.
+  Name should start with a lowercase letter.
 
 Don't forget to export them.
 They need to be available via simple import from `@eccenca/gui-elements`.

README.md

@@ -71,56 +71,55 @@
         "@blueprintjs/colors": "^5.1.11",
         "@blueprintjs/core": "^5.19.1",
         "@blueprintjs/select": "^5.3.21",
-        "@carbon/icons": "^11.70.0",
-        "@carbon/react": "^1.96.0",
+        "@carbon/icons": "^11.80.0",
+        "@carbon/react": "^1.107.1",
         "@codemirror/lang-html": "^6.4.11",
-        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/lang-javascript": "^6.2.5",
         "@codemirror/lang-json": "^6.0.2",
         "@codemirror/lang-markdown": "^6.5.0",
         "@codemirror/lang-sql": "^6.10.0",
         "@codemirror/lang-xml": "^6.1.0",
-        "@codemirror/lang-yaml": "^6.1.2",
+        "@codemirror/lang-yaml": "^6.1.3",
         "@codemirror/legacy-modes": "^6.5.2",
         "@mavrin/remark-typograf": "^2.2.0",
         "@xyflow/react": "^12.9.3",
         "classnames": "^2.5.1",
         "codemirror": "^6.0.2",
-        "color": "^4.2.3",
+        "color": "^5.0.3",
         "compute-scroll-into-view": "^3.1.1",
         "he": "^1.2.0",
         "jshint": "^2.13.6",
         "lodash": "^4.18.1",
         "n3": "^1.26.0",
         "re-resizable": "^6.10.3",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "react-flow-renderer": "9.7.4",
-        "react-inlinesvg": "^3.0.3",
-        "react-is": "^16.13.1",
+        "react-inlinesvg": "^4.4.1",
+        "react-is": "^18.3.1",
         "react-markdown": "^10.1.0",
-        "react-syntax-highlighter": "^15.6.6",
+        "react-syntax-highlighter": "^16.1.1",
         "rehype-external-links": "^3.0.0",
         "rehype-raw": "^7.0.0",
         "remark-definition-list": "^2.0.0",
         "remark-gfm": "^4.0.1",
         "remark-parse": "^11.0.0",
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
-        "wicg-inert": "^3.1.3",
-        "xml-formatter": "^3.6.7"
+        "wicg-inert": "^3.1.3"
     },
     "devDependencies": {
-        "@babel/core": "^7.28.5",
-        "@babel/plugin-transform-class-properties": "^7.27.1",
-        "@babel/plugin-transform-private-methods": "^7.27.1",
-        "@babel/plugin-transform-private-property-in-object": "^7.27.1",
-        "@babel/preset-env": "^7.28.5",
+        "@babel/core": "^7.29.0",
+        "@babel/plugin-transform-class-properties": "^7.28.6",
+        "@babel/plugin-transform-private-methods": "^7.28.6",
+        "@babel/plugin-transform-private-property-in-object": "^7.28.6",
+        "@babel/preset-env": "^7.29.5",
         "@babel/preset-flow": "^7.27.1",
         "@babel/preset-react": "^7.28.5",
         "@babel/preset-typescript": "^7.28.5",
-        "@eslint/compat": "^1.4.1",
-        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "^9.39.1",
+        "@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",
@@ -132,65 +131,62 @@
         "@storybook/react-webpack5": "^8.6.18",
         "@storybook/test": "^8.6.18",
         "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^14.3.1",
-        "@types/color": "^3.0.6",
+        "@testing-library/react": "^16.3.2",
         "@types/he": "^1.2.3",
         "@types/jest": "^30.0.0",
         "@types/jshint": "^2.12.4",
-        "@types/lodash": "^4.17.21",
+        "@types/lodash": "^4.17.24",
         "@types/n3": "^1.26.1",
+        "@types/react-dom": "^18.3.7",
         "@types/react-is": "^19.2.0",
         "@types/react-syntax-highlighter": "^15.5.13",
-        "@typescript-eslint/eslint-plugin": "^8.47.0",
-        "@typescript-eslint/parser": "^8.47.0",
-        "babel-jest": "^30.2.0",
+        "@typescript-eslint/eslint-plugin": "^8.59.3",
+        "@typescript-eslint/parser": "^8.59.3",
+        "babel-jest": "^30.4.1",
         "chromatic": "^13.3.4",
-        "eslint": "^9.39.1",
+        "eslint": "^10.3.0",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-simple-import-sort": "^12.1.1",
-        "husky": "4",
+        "eslint-plugin-react-hooks": "^7.1.1",
+        "eslint-plugin-simple-import-sort": "^13.0.0",
+        "husky": "^4.3.8",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^30.2.0",
-        "jest-environment-jsdom": "^30.2.0",
+        "jest": "^30.4.2",
+        "jest-environment-jsdom": "^30.4.1",
         "jest-fixed-jsdom": "^0.0.11",
         "jest-pnp-resolver": "^1.2.3",
         "lint-staged": "^15.5.2",
         "node-sass-package-importer": "^5.3.3",
         "path": "^0.12.7",
-        "prettier": "^2.8.8",
+        "prettier": "^3.8.3",
         "react-app-polyfill": "^3.0.0",
         "react-lorem-ipsum": "^1.4.9",
-        "regenerator-runtime": "^0.13.9",
+        "regenerator-runtime": "^0.14.1",
         "rimraf": "^6.1.3",
-        "sass": "1.62.1",
-        "sass-loader": "10.3.1",
+        "sass": "^1.99.0",
+        "sass-loader": "^16.0.8",
         "storybook": "^8.6.18",
-        "stylelint": "^17.6.0",
+        "stylelint": "^17.11.0",
         "stylelint-config-recess-order": "^7.7.0",
         "stylelint-config-standard-scss": "^17.0.0",
         "stylelint-order": "^8.1.1",
         "ts-node": "^10.9.2",
         "tsc-esm-fix": "^3.1.2",
-        "typescript": "5.5.3",
+        "typescript": "^5.9.3",
         "url-loader": "^4.1.1",
-        "yargs": "^17.7.2"
+        "yargs": "^18.0.0"
     },
     "peerDependencies": {
         "@blueprintjs/core": ">=5",
         "react": ">=18"
     },
     "resolutions": {
         "node-sass-package-importer/**/postcss": "^8.5.6",
-        "string-width": "^4.2.3",
-        "wrap-ansi": "^7.0.0",
         "hast-util-from-parse5": "8.0.0",
-        "**/picomatch": "^2.3.2",
-        "**/minimatch": "^3.1.4",
         "**/lodash": "^4.18.0",
-        "**/serialize-javascript": "^7.0.3",
+        "**/minimatch": "^3.1.4",
         "**/tar": "^7.5.11",
-        "**/immutable": "^4.3.8"
+        "**/fast-uri": "^3.1.2",
+        "**/serialize-javascript": "^7.0.3"
     },
     "husky": {
         "hooks": {

package.json

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

scripts/compile-sass.ts

@@ -6,8 +6,8 @@ const functions = {
     },
 };
 const sassRenderSyncConfig = {
-    quietDeps: true,
     functions,
+    quietDeps: true,
 };
 
 module.exports = sassRenderSyncConfig;

scripts/sassConfig.js

@@ -97,7 +97,7 @@ export const WidgetWithAdditionalActions: StoryFn<typeof ActivityControlWidget>
                 <IconButton name="application-explore" onClick={() => setIsOpen(true)} />,
             ],
         }),
-        []
+        [],
     );
 
     return (

src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -109,15 +109,15 @@ export interface ActivityControlWidgetAction extends TestableComponent {
     // Warning state
     hasStateWarning?: boolean;
     // Active state
-    active?: boolean
+    active?: boolean;
     /** A notification that is shown in an overlay pointing at the activity action button. */
     notification?: {
-        message: string
-        onClose: () => void
-        intent?: NotificationProps["intent"]
+        message: string;
+        onClose: () => void;
+        intent?: NotificationProps["intent"];
         // Timeout in ms before notification is closed. Default: none
-        timeout?: number
-    }
+        timeout?: number;
+    };
 }
 
 interface IActivityMenuAction extends ActivityControlWidgetAction {
@@ -222,11 +222,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                 data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined}
             >
                 {activityActions &&
-                    activityActions.map((action, idx) => <ActivityActionButton
-                            key={idx}
-                            action={action}
-                        />
-                    )}
+                    activityActions.map((action, idx) => <ActivityActionButton key={idx} action={action} />)}
                 {additionalActions}
                 {activityContextMenu && activityContextMenu.menuItems.length > 0 && (
                     <ContextMenu
@@ -261,10 +257,10 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
 }
 
 interface ActivityActionButtonProps {
-    action: ActivityControlWidgetAction
+    action: ActivityControlWidgetAction;
 }
 
-const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
+const ActivityActionButton = ({ action }: ActivityActionButtonProps) => {
     const actionButtonRef = React.useRef(null);
     const ActionButton = () => (
         <IconButton
@@ -277,16 +273,16 @@ const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
             intent={action.hasStateWarning ? "warning" : undefined}
             tooltipProps={{
                 hoverOpenDelay: 200,
-                placement: "bottom"
+                placement: "bottom",
             }}
             active={action.active}
         />
-    )
-    return action.notification ?
+    );
+    return action.notification ? (
         <>
-                                <span ref={actionButtonRef}>
-                                    <ActionButton/>
-                                </span>
+            <span ref={actionButtonRef}>
+                <ActionButton />
+            </span>
             {actionButtonRef.current && (
                 <DecoupledOverlay targetSelectorOrElement={actionButtonRef.current} paddingSize={"small"}>
                     <Notification
@@ -297,6 +293,8 @@ const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
                     />
                 </DecoupledOverlay>
             )}
-        </> :
-        <ActionButton/>
-}
+        </>
+    ) : (
+        <ActionButton />
+    );
+};

src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -1,7 +1,8 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
+
+import Button from "../../components/Button/Button";
 import SimpleDialog from "../../components/Dialog/SimpleDialog";
 import IconButton from "../../components/Icon/IconButton";
-import Button from "../../components/Button/Button";
 import HtmlContentBlock from "../../components/Typography/HtmlContentBlock";
 
 interface ActivityExecutionErrorReportModalProps {