@eccenca/gui-elements 6.2.0 → 22.0.0-rc.7

package/package.json

@@ -1,81 +1,166 @@
 {
   "name": "@eccenca/gui-elements",
-  "version": "6.2.0",
-  "description": "Collection of low-level GUI elements like Buttons, Icons or Alerts. Also includes core styles for those elements.",
-  "main": "es5/component.js",
-  "es5": "es5/component.js",
-  "es6": "index.js",
-  "scripts": {
-    "test": "export TEST_REPORT_PATH='./test/reports/' && jest --no-cache --detectOpenHandles",
-    "lint": "eslint --ignore-path .gitignore '**/*.{js,jsx}' --fix",
-    "cover": "gulp cover",
-    "start": "gulp",
-    "build": "gulp full-build",
-    "init": "ecc-link-dotfiles",
-    "prepare": "ecc-link-dotfiles && gulp full-build",
-    "docs": "gulp docs",
-    "precommit": "lint-staged && npm run docs"
-  },
-  "bugs": {
-    "url": "https://github.com/eccenca/ecc-gui-elements/issues"
-  },
-  "author": "eccenca GmbH <opensource@eccenca.com> (http://eccenca.com)",
-  "license": "MIT",
-  "dependencies": {
-    "@eccenca/material-design-lite": "^2.0.0",
-    "classnames": "^2.2.5",
-    "lodash": "^4.16.4",
-    "moment": "^2.20.1",
-    "prop-types": "^15.7.2",
-    "react-datetime": "^2.11.0",
-    "react-highlight-words": "^0.10.0",
-    "react-mdl": "^2.1.0",
-    "react-select": "1.0.1",
-    "sassyjson": "^1.1.8",
-    "scroll-into-view": "^1.9.0"
+  "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
+  "version": "22.0.0-rc.7",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/eccenca/gui-elements",
+  "keywords": [
+    "GUI",
+    "React",
+    "Blueprint JS",
+    "Carbon Components",
+    "Typescript"
+  ],
+  "maintainers": [
+    {
+      "name": " eccenca GmbH",
+      "email": "info@eccenca.com",
+      "web": "https://eccence.com/"
+    }
+  ],
+  "repositories": [
+    {
+      "type": "git",
+      "url": "git://github.com/eccenca/gui-elements.git"
+    }
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/eccenca/ecc-gui-elements.git"
+  "style": "src/index.scss",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es5/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/es5/index.js",
+      "require": "./dist/cjs/index.js"
+    }
   },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build:clean": "rm -rf dist/",
+    "build:es5": "tsc --build .typescript/tsbuild-es5.json && ./scripts/fix-es5-dist",
+    "build:cjs": "tsc --build .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
+    "build:all": "yarn build:clean && yarn build:es5 && yarn build:cjs",
+    "compile": "tsc --build tsconfig.json",
+    "compile-scss": "node-sass src/index.scss --importer=node_modules/node-sass-tilde-importer",
+    "storybook": "start-storybook -p 6006",
+    "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"
   },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+  "dependencies": {
+    "@blueprintjs/core": "3.49.1",
+    "@blueprintjs/select": "^3.18.1",
+    "@carbon/icons": "10.44.0",
+    "@carbon/icons-react": "10.44.0",
+    "@mavrin/remark-typograf": "^2.2.0",
+    "carbon-components": "10.44.0",
+    "carbon-components-react": "7.44.1",
+    "carbon-icons": "^7.0.7",
+    "codemirror": "^5.52.2",
+    "color": "3.2.1",
+    "micromark": "^3.0.10",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-flow-renderer": "^9.6.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"
   },
   "devDependencies": {
-    "@eccenca/dotfiles": "^2.6.3",
-    "@eccenca/gulp-tasks": "^3.16.10",
-    "babel-jest": "^23.6.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "ecc-messagebus": "^3.6.0",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-15": "^1.4.0",
-    "enzyme-to-json": "^3.3.5",
-    "fs-extra": "^5.0.0",
-    "gulp-download-stream": "^0.0.13",
-    "gulp-rename": "^1.2.2",
-    "gulp-sequence": "^1.0.0",
-    "jest": "^23.6.0",
-    "jest-environment-enzyme": "^7.0.1",
-    "jest-enzyme": "^7.0.1",
-    "jest-html-reporter": "^2.4.4",
-    "jest-junit-reporter": "^1.1.0",
-    "jest-raw-loader": "^1.0.1",
-    "js-yaml": "^3.8.4",
-    "markdown-loader-jest": "^0.1.1",
-    "nock": "^10.0.6",
-    "node-sass": "^4.5.3",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-router-dom": "^4.3.1",
-    "react-test-renderer": "^15",
-    "sinon": "^7.2.3"
+    "@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.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-jest": "^6.4.13",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.4.9",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/carbon-components-react": "^7.49.0",
+    "@types/carbon__icons-react": "^10.31.2",
+    "@types/color": "^3.0.2",
+    "@types/jest": "^24.9.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "babel-jest": "^27.5.1",
+    "chromatic": "^6.5.1",
+    "css-loader": "3.4.2",
+    "eslint": "^7.32.0",
+    "eslint-config-react-app": "^6.0.0",
+    "jest": "^26.6.3",
+    "jest-environment-jsdom-fourteen": "1.0.1",
+    "jest-pnp-resolver": "^1.2.1",
+    "node-sass": "4.12.0",
+    "node-sass-tilde-importer": "^1.0.2",
+    "react-app-polyfill": "^1.0.6",
+    "react-lorem-ipsum": "^1.4.9",
+    "regenerator-runtime": "^0.13.9",
+    "sass-loader": "8.0.2",
+    "style-loader": "0.23.1",
+    "typescript": "4.4.4",
+    "webpack": "^4.46.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
   },
-  "lint-staged": {
-    "*.{js,jsx}": "eslint"
+  "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"
+    ]
   }
 }

package/src/_shame.scss

@@ -0,0 +1,111 @@
+// 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;
+}
+
+.#{$prefix}--assistive-text,
+.#{$prefix}--visually-hidden {
+    /*
+        TODO: move to better place, originally from ~carbon-components/scss/globals/scss/css--helpers
+        but we cannot use it directly because of other included rules there.
+    */
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    visibility: inherit;
+    white-space: nowrap;
+}
+
+.uppy-DragDrop-container {
+    // TODO: create own file upload elements
+
+    border-width: 1px;
+    //border-style: dotted;
+    border-radius: 3px;
+
+    color: inherit;
+    background-color: $data-table-zebra-color;
+
+    .uppy-DragDrop-inner {
+        line-height: inherit;
+        padding: 1rem;
+    }
+
+    .uppy-DragDrop-arrow {
+        height: 2rem;
+        width: 2rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .uppy-DragDrop-label {
+        font-size: inherit;
+        margin-bottom: 0.5rem;
+    }
+}
+
+/*
+    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
+*/
+
+* {
+scrollbar-width: thin;
+scrollbar-color: #bbb transparent;
+
+    &::-webkit-scrollbar {
+        width: 0.25rem;
+        height: 0.25rem;
+        background-color: #fefefe;
+    }
+
+    &::-webkit-scrollbar-thumb
+    {
+        border-radius: 0.125rem;
+        background-color: #bbb;
+    }
+}

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -0,0 +1,28 @@
+export interface IActivityStatus {
+    // Optional project ID
+    project?: string;
+    // Optional task ID
+    task?: string;
+    // The activity name
+    activity: string;
+    // If the activity is currently running
+    isRunning: boolean;
+    // If the activity has failed
+    failed: boolean;
+    // The name of the status class
+    statusName: "Waiting" | "Finished" | "Idle" | "Running" | "Canceling";
+    // A number between 0 and 100
+    progress: number;
+    // More information corresponding to the status
+    message: string;
+    // If the activity has been cancelled
+    cancelled: boolean;
+    // The concrete status ID
+    concreteStatus: "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling";
+    // If there was an error, this contains the exception message
+    exceptionMessage?: string | null;
+    // The runtime in ms
+    runtime?: number;
+    // The start time as date time, e.g. "2021-09-07T09:34:53.153Z"
+    startTime?: string;
+}

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import {
+    Card,
+    ContextMenu,
+    IconButton,
+    MenuItem,
+    OverflowText,
+    OverviewItem,
+    OverviewItemActions,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    ProgressBar,
+    Spinner,
+    Tooltip,
+} from "../../index";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import {TestableComponent} from "../../components/interfaces";
+import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
+import { SpinnerProps } from "../../components/Spinner/Spinner";
+
+export interface IActivityControlProps extends TestableComponent {
+    // The label to be shown
+    label?: string | JSX.Element
+    // The progress bar parameters if it should be show by a progres bar
+    progressBar?: ProgressBarProps
+    // The spinner parameters if it should be show by a spinner
+    progressSpinner?: SpinnerProps
+    // Status message
+    statusMessage?: string
+    // The action buttons
+    activityActions?: IActivityAction[]
+    // Context menu items
+    activityContextMenu?: IActivityContextMenu
+    // show small version of the widget
+    small?: boolean;
+    // display widget inside rectange
+    border?: boolean;
+    // only use necessary width, not always the available 100% of parent element
+    canShrink?: boolean;
+}
+
+interface IActivityContextMenu extends TestableComponent {
+    // Tooltip for the context menu
+    tooltip?: string
+    // The entries of the context menu
+    menuItems: IActivityMenuAction[]
+}
+
+export interface IActivityAction extends TestableComponent {
+    // The action that should be triggered
+    action: () => any
+    // The tooltip that should be shown over the action icon
+    tooltip?: string
+    // The icon of the action button
+    icon: string
+    // Action is currently disabled (but shown)
+    disabled?: boolean
+    // Warning state
+    hasStateWarning?: boolean
+}
+
+export interface IActivityMenuAction extends IActivityAction, TestableComponent {
+    // Optional link
+    href?: string
+}
+
+/** Shows the status of activities and supports actions on these activities. */
+export function ActivityControlWidget(props: IActivityControlProps) {
+    const {
+        "data-test-id": dataTestId,
+        progressBar,
+        progressSpinner,
+        activityActions,
+        activityContextMenu,
+        small,
+        border,
+        canShrink
+    } = props
+
+    const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`
+
+    const widget = (
+        <OverviewItem data-test-id={dataTestId} hasSpacing={border} densityHigh={small}>
+            {progressBar && (
+                <ProgressBar
+                    {...progressBar}
+                />
+            )}
+            {progressSpinner && (
+                <OverviewItemDepiction keepColors>
+                    <Spinner
+                        position="inline"
+                        size={small ? "tiny" : "small"}
+                        stroke={small ? "bold" : "medium"}
+                        {...progressSpinner}
+                        className={spinnerClassNames}
+                    />
+                </OverviewItemDepiction>
+            )}
+            <OverviewItemDescription>
+                {props.label && <OverviewItemLine small={small}>
+                    <OverflowText inline={true}>{props.label}</OverflowText>
+                </OverviewItemLine>}
+                {props.statusMessage && (
+                    <OverviewItemLine small>
+                        {
+                            props.statusMessage.length > 50 ? (
+                                <Tooltip content={props.statusMessage} size="large" tooltipProps={{placement: "top", boundary: "viewport"}}>
+                                    <OverflowText inline={true}>
+                                        {props.statusMessage}
+                                    </OverflowText>
+                                </Tooltip>
+                            ) : (
+                                <OverflowText inline={true}>
+                                    {props.statusMessage}
+                                </OverflowText>
+                            )
+                        }
+                    </OverviewItemLine>
+                )}
+            </OverviewItemDescription>
+            <OverviewItemActions>
+                {activityActions && activityActions.map((action) => {
+                    return <IconButton
+                        key={action.icon}
+                        data-test-id={action["data-test-id"]}
+                        name={action.icon}
+                        text={action.tooltip}
+                        onClick={action.action}
+                        tooltipOpenDelay={200}
+                        disabled={action.disabled}
+                        hasStateWarning={action.hasStateWarning}
+                    />
+                })}
+                {activityContextMenu && activityContextMenu.menuItems.length > 0 && <ContextMenu
+                    data-test-id={activityContextMenu["data-test-id"]}
+                    togglerText={activityContextMenu.tooltip}
+                >
+                    {activityContextMenu.menuItems.map((menuAction) => {
+                        return <MenuItem
+                            icon={menuAction.icon}
+                            key={menuAction.icon}
+                            onClick={menuAction.action}
+                            text={menuAction.tooltip}
+                        />
+                    })}
+                </ContextMenu>
+                }
+            </OverviewItemActions>
+        </OverviewItem>
+    );
+
+    const classname = `${eccgui}-addon-activitycontrol` + (canShrink ? ` ${eccgui}-addon-activitycontrol--shrink` : "");
+
+    return border ? (
+        <Card isOnlyLayout elevation={0} className={classname}>
+            {widget}
+        </Card>
+    ) : (
+        <div className={classname}>
+            {widget}
+        </div>
+    );
+}

package/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx

@@ -0,0 +1,55 @@
+import {Button, HtmlContentBlock, SimpleDialog} from "../../index";
+import React from "react";
+
+interface IProps {
+    // Title of the modal
+    title?: string
+    // Called when the close button is clicked
+    onDiscard: () => any
+    // The error report
+    report: JSX.Element
+    // Value of the download button
+    downloadButtonValue: string
+    // Value of the close button
+    closeButtonValue: string
+    // Function that fetches the Markdown error report
+    fetchErrorReport: () => Promise<string | undefined>
+}
+
+/** Shows the execution error report to the user and offers to download the report. */
+export const ActivityExecutionErrorReportModal = ({title, onDiscard, report, downloadButtonValue, closeButtonValue, fetchErrorReport}: IProps) => {
+    const fileName = "Activity execution report from " + (new Date()).toISOString().replace(/T/, " ").replace(/:/g, "-").substr(0, 19) + ".md"
+    const handleDownload = async () => {
+        const markdown = await fetchErrorReport()
+        if(markdown) {
+            const element = document.createElement("a");
+            element.href = window.URL.createObjectURL(new Blob([markdown], { type: "text/markdown" }));
+            element.download = fileName
+            //the above code is equivalent to
+            document.body.appendChild(element);
+            //onClick property
+            element.click();
+            document.body.removeChild(element);
+        }
+    };
+
+    return (
+        <SimpleDialog
+            title={title}
+            isOpen={true}
+            onClose={onDiscard}
+            actions={[
+                <Button data-test-id={"error-report-download-btn"} affirmative onClick={handleDownload} key="download">
+                    {downloadButtonValue}
+                </Button>,
+                <Button data-test-id={"error-report-close-btn"} key="close" onClick={onDiscard}>
+                    {closeButtonValue}
+                </Button>,
+            ]}
+        >
+            <HtmlContentBlock>
+                {report}
+            </HtmlContentBlock>
+        </SimpleDialog>
+    );
+}