@eccenca/gui-elements 23.1.0 → 23.2.0-rc.1

package/package.json

@@ -1,200 +1,220 @@
 {
-  "name": "@eccenca/gui-elements",
-  "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "23.1.0",
-  "license": "Apache-2.0",
-  "homepage": "https://github.com/eccenca/gui-elements",
-  "bugs": "https://github.com/eccenca/gui-elements/issues",
-  "keywords": [
-    "GUI",
-    "React",
-    "Blueprint",
-    "Carbon Design System",
-    "Typescript",
-    "SCSS"
-  ],
-  "maintainers": [
-    {
-      "name": " eccenca GmbH",
-      "email": "info@eccenca.com",
-      "web": "https://eccence.com/"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/eccenca/gui-elements.git"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "engines": {
-    "node": ">=14.x"
-  },
-  "style": "src/index.scss",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./config/sassOptions": "./scripts/sassConfig.js"
-  },
-  "files": [
-    "dist",
-    "src",
-    "scripts"
-  ],
-  "scripts": {
-    "build:clean": "rimraf dist/",
-    "build:esm": "tsc --project .typescript/tsbuild-esm.json && ./scripts/fix-esm-dist",
-    "build:cjs": "tsc --project .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
-    "build:all": "yarn build:clean && yarn build:esm && yarn build:cjs",
-    "compile": "tsc --build tsconfig.json",
-    "compile-scss": "ts-node -O \"{ \\\"esModuleInterop\\\": true, \\\"module\\\": \\\"commonjs\\\"}\" ./scripts/compile-sass.ts",
-    "storybook": "start-storybook -p 6006 --no-open",
-    "build-storybook": "build-storybook",
-    "test": "jest",
-    "test:ci": "jest --ci --reporters='default'",
-    "test:coverage": "jest --collectCoverage",
-    "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
-    "check:package": "pjv --warnings --recommendations"
-  },
-  "dependencies": {
-    "@blueprintjs/colors": "^4.1.5",
-    "@blueprintjs/core": "^4.9.0",
-    "@blueprintjs/popover2": "^1.6.0",
-    "@blueprintjs/select": "^4.6.0",
-    "@carbon/icons": "^11.11.0",
-    "@carbon/icons-react": "^11.11.0",
-    "@carbon/styles": "^1.17.0",
-    "@mavrin/remark-typograf": "^2.2.0",
-    "carbon-components-react": "^8.17.0",
-    "codemirror": "^5.61.0",
-    "color": "3.2.1",
-    "lodash": "^4.17.21",
-    "micromark": "^3.0.10",
-    "re-resizable": "6.9.9",
-    "react": "^16.13.1",
-    "react-codemirror2": "^7.2.1",
-    "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.1",
-    "react-markdown": "^7.0.1",
-    "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",
-    "wicg-inert": "^3.1.2"
-  },
-  "devDependencies": {
-    "@babel/core": "7.9.0",
-    "@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.16.11",
-    "@babel/preset-flow": "^7.16.5",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-jest": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.10",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@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": "^24.9.1",
-    "@types/lodash": "^4.14.182",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "babel-jest": "^27.5.1",
-    "chromatic": "^6.5.1",
-    "eslint": "^7.32.0",
-    "eslint-config-react-app": "^6.0.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
-    "jest-environment-jsdom-fourteen": "1.0.1",
-    "jest-pnp-resolver": "^1.2.1",
-    "node-sass-package-importer": "^5.3.2",
-    "package-json-validator": "^0.6.3",
-    "react-app-polyfill": "^1.0.6",
-    "react-lorem-ipsum": "^1.4.9",
-    "regenerator-runtime": "^0.13.9",
-    "rimraf": "^3.0.2",
-    "sass": "^1.53.0",
-    "sass-loader": "^10.3.1",
-    "ts-node": "^10.9.1",
-    "tsc-esm-fix": "^2.13.0",
-    "typescript": "4.4.4",
-    "yargs": "^17.6.2"
-  },
-  "peerDependencies": {
-    "@types/carbon-components-react": ">=7",
-    "react": ">=16",
-    "react-dom": ">=16"
-  },
-  "resolutions": {
-    "**/@types/react": "^17.0.52",
-    "**/node-gyp": "^7.0.0",
-    "**/glob-parent": "^5.1.2",
-    "**/trim": "^0.0.3",
-    "**/trim-newlines": "^3.0.1",
-    "**/minimist": "^1.2.7",
-    "**/postcss": "^7.0.36"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
-  },
-  "jest": {
-    "roots": [
-      "<rootDir>/src/"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts"
-    ],
-    "resolver": "jest-pnp-resolver",
-    "setupFiles": [
-      "react-app-polyfill/jsdom"
+    "name": "@eccenca/gui-elements",
+    "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
+    "version": "23.2.0-rc.1",
+    "license": "Apache-2.0",
+    "homepage": "https://github.com/eccenca/gui-elements",
+    "bugs": "https://github.com/eccenca/gui-elements/issues",
+    "keywords": [
+        "GUI",
+        "React",
+        "Blueprint",
+        "Carbon Design System",
+        "Typescript",
+        "SCSS"
     ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/test/setupTests.js"
+    "maintainers": [
+        {
+            "name": " eccenca GmbH",
+            "email": "info@eccenca.com",
+            "web": "https://eccence.com/"
+        }
     ],
-    "testMatch": [
-      "<rootDir>/src/**/*(*.)@(spec|test).{js,jsx,ts,tsx}"
-    ],
-    "testEnvironment": "jest-environment-jsdom-fourteen",
-    "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/eccenca/gui-elements.git"
     },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\](?!react-markdown|vfile|unist-util-stringify-position|).+\\.(js|jsx|ts|tsx)$",
-      "^.+\\.module\\.(css|sass|scss)$"
-    ],
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org"
+    },
+    "engines": {
+        "node": ">=16.x"
+    },
+    "style": "src/index.scss",
+    "main": "dist/cjs/index.js",
+    "module": "dist/esm/index.js",
+    "types": "dist/types/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/esm/index.js",
+            "require": "./dist/cjs/index.js"
+        },
+        "./config/sassOptions": "./scripts/sassConfig.js"
+    },
+    "files": [
+        "dist",
+        "src",
+        "scripts"
     ],
-    "moduleNameMapper": {
-      "\\.(css|scss)$": "identity-obj-proxy"
+    "scripts": {
+        "build:clean": "rimraf dist/",
+        "build:esm": "tsc --project .typescript/tsbuild-esm.json && ./scripts/fix-esm-dist",
+        "build:cjs": "tsc --project .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
+        "build:all": "yarn build:clean && yarn build:esm && yarn build:cjs",
+        "compile": "tsc --build tsconfig.json",
+        "compile-scss": "ts-node -O \"{ \\\"esModuleInterop\\\": true, \\\"module\\\": \\\"commonjs\\\"}\" ./scripts/compile-sass.ts",
+        "storybook": "storybook dev -p 6006 --no-open",
+        "build-storybook": "storybook build --webpack-stats-json",
+        "test": "jest",
+        "test:ci": "jest --ci --reporters='default'",
+        "test:coverage": "jest --collectCoverage",
+        "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
+    },
+    "dependencies": {
+        "@blueprintjs/colors": "^4.1.22",
+        "@blueprintjs/core": "^4.18.0",
+        "@blueprintjs/popover2": "^1.14.1",
+        "@blueprintjs/select": "^4.9.14",
+        "@carbon/icons": "^11.19.0",
+        "@carbon/icons-react": "^11.19.0",
+        "@carbon/styles": "^1.28.0",
+        "@mavrin/remark-typograf": "^2.2.0",
+        "carbon-components-react": "^8.28.0",
+        "codemirror": "^5.65.13",
+        "color": "3.2.1",
+        "lodash": "^4.17.21",
+        "micromark": "^3.0.10",
+        "re-resizable": "6.9.9",
+        "react": "^16.13.1",
+        "react-codemirror2": "^7.2.1",
+        "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-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",
+        "wicg-inert": "^3.1.2"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.21.8",
+        "@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",
+        "@storybook/preset-scss": "^1.0.3",
+        "@storybook/react": "^7.0.9",
+        "@storybook/react-webpack5": "^7.0.9",
+        "@testing-library/jest-dom": "^5.16.1",
+        "@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": "^24.9.1",
+        "@types/lodash": "^4.14.194",
+        "@typescript-eslint/eslint-plugin": "^5.59.11",
+        "@typescript-eslint/parser": "^5.59.11",
+        "babel-jest": "^27.5.1",
+        "chromatic": "^6.17.4",
+        "eslint": "^8.42.0",
+        "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-simple-import-sort": "^10.0.0",
+        "husky": "4",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^26.6.3",
+        "jest-environment-jsdom-fourteen": "1.0.1",
+        "jest-pnp-resolver": "^1.2.1",
+        "lint-staged": "^13.2.2",
+        "node-sass-package-importer": "^5.3.2",
+        "prettier": "^2.8.8",
+        "react-app-polyfill": "^3.0.0",
+        "react-lorem-ipsum": "^1.4.9",
+        "regenerator-runtime": "^0.13.9",
+        "rimraf": "^5.0.0",
+        "sass": "^1.62.1",
+        "sass-loader": "^13.2.2",
+        "storybook": "^7.0.9",
+        "stylelint": "^15.7.0",
+        "stylelint-config-recess-order": "^4.2.0",
+        "stylelint-config-standard-scss": "^9.0.0",
+        "ts-node": "^10.9.1",
+        "tsc-esm-fix": "^2.20.13",
+        "typescript": "4.4.4",
+        "url-loader": "^4.1.1",
+        "yargs": "^17.7.2"
+    },
+    "peerDependencies": {
+        "@types/carbon-components-react": ">=7",
+        "react": ">=16",
+        "react-dom": ">=16"
+    },
+    "resolutions": {
+        "**/@types/react": "^17.0.59",
+        "**/postcss": "^8.4.23"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "lint-staged": {
+        "*.(js|json|md)": [
+            "prettier --write",
+            "git add"
+        ],
+        "*.(ts|tsx)": [
+            "eslint --fix",
+            "prettier --write",
+            "git add"
+        ],
+        "*.(scss)": [
+            "stylelint --fix",
+            "prettier --write",
+            "git add"
+        ]
+    },
+    "jest": {
+        "roots": [
+            "<rootDir>/src/"
+        ],
+        "collectCoverageFrom": [
+            "src/**/*.{js,jsx,ts,tsx}",
+            "!src/**/*.d.ts"
+        ],
+        "resolver": "jest-pnp-resolver",
+        "setupFiles": [
+            "react-app-polyfill/jsdom"
+        ],
+        "setupFilesAfterEnv": [
+            "<rootDir>/src/test/setupTests.js"
+        ],
+        "testMatch": [
+            "<rootDir>/src/**/*(*.)@(spec|test).{js,jsx,ts,tsx}"
+        ],
+        "testEnvironment": "jest-environment-jsdom-fourteen",
+        "transform": {
+            "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+        },
+        "transformIgnorePatterns": [
+            "[/\\\\]node_modules[/\\\\](?!react-markdown|vfile|unist-util-stringify-position|).+\\.(js|jsx|ts|tsx)$",
+            "^.+\\.module\\.(css|sass|scss)$"
+        ],
+        "moduleFileExtensions": [
+            "web.js",
+            "js",
+            "web.ts",
+            "ts",
+            "web.tsx",
+            "tsx",
+            "json",
+            "web.jsx",
+            "jsx",
+            "node"
+        ],
+        "moduleNameMapper": {
+            "\\.(css|scss)$": "identity-obj-proxy"
+        }
     }
-  }
 }

package/scripts/sassConfig.js

@@ -2,7 +2,7 @@ const sass = require("sass");
 
 const functions = {
     'svg-icon($path, $selectors: null)': function(_path, _selectors) {
-        return new sass.SassString("unset");
+        return new sass.SassString("unset", {quotes: false});
     },
 };
 const sassRenderSyncConfig = {

package/src/_shame.scss

@@ -1,15 +1,5 @@
 // Add stuff to test fast and dirty.
-// This file should not contain any styles because we do not work dirty!
-
-.#{$ns}-portal {
-    z-index: 8001; // higher than carbon ui shell header
-}
-
-html {
-    // TODO: move to application or workspace element
-    background-color: $eccgui-color-workspace-background;
-    color: $eccgui-color-workspace-text;
-}
+// This file should not contain any styles.
 
 .#{$prefix}--assistive-text,
 .#{$prefix}--visually-hidden {
@@ -56,39 +46,6 @@ html {
     }
 }
 
-/*
-    TODO: create own auto complete input in new hui elements
-*/
-.app_di-autocomplete__options {
-    max-width: 90vw;
-    min-width: 40rem;
-    max-height: 60vh;
-    overflow: auto;
-}
-
-/*
-    WORKAROUND: markdown footnotes rendered without (empty) local anchors
-*/
-
-.#{$eccgui}-typography__contentblock {
-    a[href=""] {
-        font-size: $eccgui-size-typo-caption;
-        line-height: $eccgui-size-typo-caption-lineheight;
-        pointer-events: none;
-        cursor: text;
-        color: currentColor;
-        text-decoration: none;
-        vertical-align: super;
-
-        &:before {
-            content: "[";
-        }
-        &:after {
-            content: "]";
-        }
-    }
-}
-
 /*
     WORKAROUND: thinner scrollbars
 */
@@ -114,7 +71,6 @@ scrollbar-color: #bbb transparent;
     CHANGE: default focus behaviour
 */
 
-
 :focus,
 input:focus-visible,
 textarea:focus-visible {

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -1,3 +1,4 @@
+// @deprecated use `SilkActivityStatusProps`
 export interface IActivityStatus {
     // Optional project ID
     project?: string;
@@ -28,5 +29,8 @@ export interface IActivityStatus {
     // The start time as date time, e.g. "2021-09-07T09:34:53.153Z"
     startTime?: string;
 }
+export type SilkActivityStatusProps = IActivityStatus;
 
+// @deprecated use `SilkActivityStatusConcrete`
 export type ConcreteActivityStatus = "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling"
+export type SilkActivityStatusConcrete = ConcreteActivityStatus;

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -22,7 +22,7 @@ import { ValidIconName } from "../../components/Icon/canonicalIconNames";
 import { IconProps } from "../../components/Icon/Icon";
 import { TestIconProps } from "../../components/Icon/TestIcon";
 
-export interface IActivityControlProps extends TestableComponent {
+export interface ActivityControlWidgetProps extends TestableComponent {
     /**
      * The label to be shown
      */
@@ -51,7 +51,7 @@ export interface IActivityControlProps extends TestableComponent {
     /**
      * The action buttons
      */
-    activityActions?: IActivityAction[];
+    activityActions?: ActivityControlWidgetAction[];
     /**
      * Context menu items
      */
@@ -78,6 +78,9 @@ export interface IActivityControlProps extends TestableComponent {
     progressSpinnerFinishedIcon?: React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
 }
 
+// @deprecated use `ActivityControlWidgetProps`
+export type IActivityControlProps = ActivityControlWidgetProps;
+
 interface IActivityContextMenu extends TestableComponent {
     // Tooltip for the context menu
     tooltip?: string;
@@ -85,7 +88,7 @@ interface IActivityContextMenu extends TestableComponent {
     menuItems: IActivityMenuAction[];
 }
 
-export interface IActivityAction extends TestableComponent {
+export interface ActivityControlWidgetAction extends TestableComponent {
     // The action that should be triggered
     action: () => any;
     // The tooltip that should be shown over the action icon
@@ -98,12 +101,15 @@ export interface IActivityAction extends TestableComponent {
     hasStateWarning?: boolean;
 }
 
-export interface IActivityMenuAction extends IActivityAction, TestableComponent {
+// @deprecated use `ActivityControlWidgetAction`
+export type IActivityAction = ActivityControlWidgetAction;
+
+interface IActivityMenuAction extends ActivityControlWidgetAction {
     // Optional link
     href?: string;
 }
 /** Shows the status of activities and supports actions on these activities. */
-export function ActivityControlWidget(props: IActivityControlProps) {
+export function ActivityControlWidget(props: ActivityControlWidgetProps) {
     const {
         "data-test-id": dataTestId,
         progressBar,

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -1,7 +1,7 @@
 import {Button, HtmlContentBlock, IconButton, SimpleDialog} from "../../index";
 import React, { useState } from "react";
 
-interface IProps {
+interface ActivityExecutionErrorReportModalProps {
     // Title of the modal
     title?: string
     // Called when the close button is clicked
@@ -17,7 +17,14 @@ interface IProps {
 }
 
 /** Shows the execution error report to the user and offers to download the report. */
-export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, downloadButtonValue, closeButtonValue, fetchErrorReport}: IProps) => {
+export const ActivityExecutionErrorReportModal = ({
+    title,
+    onDiscard,
+    report,
+    downloadButtonValue,
+    closeButtonValue,
+    fetchErrorReport
+}: ActivityExecutionErrorReportModalProps) => {
     const [displayFullscreen, setDisplayFullscreen] = useState<boolean>(false);
     const fileName = "Activity execution report from " + (new Date()).toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md"
     const handleDownload = async () => {