@eccenca/gui-elements 22.0.0-rc.6 → 22.1.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "22.0.0-rc.6",
+  "version": "22.1.0-rc.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "keywords": [
@@ -18,7 +18,7 @@
       "web": "https://eccence.com/"
     }
   ],
-  "repositories": [
+  "repository": [
     {
       "type": "git",
       "url": "git://github.com/eccenca/gui-elements.git"
@@ -27,19 +27,26 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "main": "./src/index.ts",
-  "style": "./src/index.scss",
-  "module": "./dist/index.js",
+  "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"
+    }
+  },
   "files": [
-    "blueprint",
     "dist",
-    "src",
-    "index.scss",
-    "index.ts"
+    "src"
   ],
   "scripts": {
+    "build:clean": "rimraf 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",
-    "build": "tsc --build tsbuild.json && NODE_ENV=production babel ./src --out-dir ./dist --extensions '.ts,.tsx' --ignore '**/*.test.ts,**/*.test.tsx,**/*.stories.ts,**/*.stories.tsx'",
     "compile-scss": "node-sass src/index.scss --importer=node_modules/node-sass-tilde-importer",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -50,19 +57,21 @@
   },
   "dependencies": {
     "@blueprintjs/core": "3.49.1",
-    "@blueprintjs/select": "^3.18.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",
+    "carbon-icons": "7.0.7",
+    "codemirror": "^5.61.0",
     "color": "3.2.1",
+    "lodash": "^4.17.21",
     "micromark": "^3.0.10",
     "react": "^16.13.1",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^16.13.1",
-    "react-flow-renderer": "^9.6.1",
+    "react-flow-renderer": "9.7.4",
     "react-markdown": "^7.0.1",
     "rehype-raw": "^6.1.0",
     "remark-definition-list": "^1.1.0",
@@ -72,12 +81,10 @@
     "unified": "^10.1.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
     "@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/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-flow": "^7.16.5",
     "@babel/preset-react": "^7.16.7",
@@ -91,29 +98,43 @@
     "@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/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",
+    "copyfiles": "^2.4.1",
     "css-loader": "3.4.2",
     "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": "4.12.0",
+    "node-sass": "4.14.1",
     "node-sass-tilde-importer": "^1.0.2",
     "react-app-polyfill": "^1.0.6",
     "react-lorem-ipsum": "^1.4.9",
     "regenerator-runtime": "^0.13.9",
+    "rimraf": "^3.0.2",
     "sass-loader": "8.0.2",
     "style-loader": "0.23.1",
     "typescript": "4.4.4",
     "webpack": "^4.46.0"
   },
+  "resolutions": {
+    "**/@blueprintjs/core": "3.49.1",
+    "**/@blueprintjs/select": "3.18.1",
+    "**/@carbon/icons": "10.44.0",
+    "**/@carbon/icons-react": "10.44.0",
+    "**/carbon-components": "10.44.0",
+    "**/carbon-components-react": "7.44.1",
+    "**/carbon-icons": "7.0.7",
+    "**/@types/react": "^17.0.0"
+  },
   "eslintConfig": {
     "extends": [
       "react-app"
@@ -156,6 +177,9 @@
       "web.jsx",
       "jsx",
       "node"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
   }
 }

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -18,7 +18,7 @@ export interface IActivityStatus {
     // If the activity has been cancelled
     cancelled: boolean;
     // The concrete status ID
-    concreteStatus: "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling";
+    concreteStatus: ConcreteActivityStatus;
     // If there was an error, this contains the exception message
     exceptionMessage?: string | null;
     // The runtime in ms
@@ -26,3 +26,5 @@ export interface IActivityStatus {
     // The start time as date time, e.g. "2021-09-07T09:34:53.153Z"
     startTime?: string;
 }
+
+export type ConcreteActivityStatus = "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling"

package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { ActivityControlWidget } from "./ActivityControlWidget";
+import { loremIpsum, name } from "react-lorem-ipsum";
+import Tag from "../../components/Tag/Tag";
+import TagList from "../../components/Tag/TagList";
+
+export default {
+    title: "Cmem/ActivityControlWidget",
+    component: ActivityControlWidget,
+    argTypes: {
+        border: {
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            },
+        },
+        small: {
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            },
+        },
+        canShrink: {
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            },
+        },
+    },
+} as ComponentMeta<typeof ActivityControlWidget>;
+
+const Template: ComponentStory<typeof ActivityControlWidget> = (args) => <ActivityControlWidget {...args} />;
+
+export const FullExample = Template.bind({});
+
+const actions = [
+    {
+        "data-test-id": "activity-reload-activity",
+        icon: "item-reload",
+        action: () => {},
+        tooltip: "Reload Activity",
+        disabled: false,
+    },
+    {
+        "data-test-id": "activity-start-activity",
+        icon: "item-start",
+        action: () => console.log("start"),
+        tooltip: "Start Activity",
+        disabled: false,
+    },
+    {
+        "data-test-id": "activity-stop-activity",
+        icon: "item-stop",
+        action: () => console.log("cancel"),
+        tooltip: "Stop Activity",
+        disabled: false,
+    },
+    {
+        "data-test-id": "activity-view-data",
+        icon: "artefact-rawdata",
+        action: () => {},
+        tooltip: "preview report",
+    },
+];
+
+const commonWidgetArgs = {
+    label: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4 }),
+    border: true,
+    activityActions: actions,
+    statusMessage: loremIpsum({ p: 1, startWithLoremIpsum: false }),
+    progressSpinner: {
+        intent: "none",
+        value: 0.5,
+    },
+};
+
+FullExample.args = {
+    ...commonWidgetArgs,
+};
+
+const TemplateWithTags: ComponentStory<typeof ActivityControlWidget> = (args) => <ActivityControlWidget {...args} />;
+
+export const WidgetWithTags = TemplateWithTags.bind({});
+
+const widgetTags = (
+    <TagList>
+        <Tag small>{name()}</Tag>
+        <Tag small>{name()}</Tag>
+        <Tag small>{name()}</Tag>
+    </TagList>
+);
+
+WidgetWithTags.args = {
+    ...commonWidgetArgs,
+    tags: widgetTags,
+};

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -11,60 +11,88 @@ import {
     OverviewItemDescription,
     OverviewItemLine,
     ProgressBar,
+    Spacing,
     Spinner,
     Tooltip,
 } from "../../index";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import {TestableComponent} from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../../components/interfaces";
 import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
 import { SpinnerProps } from "../../components/Spinner/Spinner";
+import { ValidIconName } from "../../components/Icon/canonicalIconNames";
+import { IconProps } from "../../components/Icon/Icon";
 
 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
+    /**
+     * The label to be shown
+     */
+    label?: string | JSX.Element;
+    /**
+     * To add tags in addition to the widget status description
+     */
+    tags?: 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
+    /**
+     * display widget inside rectangle
+     */
     border?: boolean;
-    // only use necessary width, not always the available 100% of parent element
+    /**
+     * only use necessary width, not always the available 100% of parent element
+     */
     canShrink?: boolean;
+    /**
+     * if this is set the spinner is replaced when the progress has finished from 0 - 1
+     */
+    progressSpinnerFinishedIcon?: React.ReactElement<IconProps>;
 }
 
 interface IActivityContextMenu extends TestableComponent {
     // Tooltip for the context menu
-    tooltip?: string
+    tooltip?: string;
     // The entries of the context menu
-    menuItems: IActivityMenuAction[]
+    menuItems: IActivityMenuAction[];
 }
 
 export interface IActivityAction extends TestableComponent {
     // The action that should be triggered
-    action: () => any
+    action: () => any;
     // The tooltip that should be shown over the action icon
-    tooltip?: string
+    tooltip?: string;
     // The icon of the action button
-    icon: string
+    icon: ValidIconName
     // Action is currently disabled (but shown)
-    disabled?: boolean
+    disabled?: boolean;
     // Warning state
-    hasStateWarning?: boolean
+    hasStateWarning?: boolean;
 }
 
 export interface IActivityMenuAction extends IActivityAction, TestableComponent {
     // Optional link
-    href?: string
+    href?: string;
 }
-
 /** Shows the status of activities and supports actions on these activities. */
 export function ActivityControlWidget(props: IActivityControlProps) {
     const {
@@ -75,78 +103,94 @@ export function ActivityControlWidget(props: IActivityControlProps) {
         activityContextMenu,
         small,
         border,
-        canShrink
-    } = props
-
-    const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`
-
+        canShrink,
+        tags,
+        progressSpinnerFinishedIcon,
+    } = props;
+    const spinnerClassNames = (progressSpinner?.className ?? "") + ` ${eccgui}-spinner--permanent`;
     const widget = (
         <OverviewItem data-test-id={dataTestId} hasSpacing={border} densityHigh={small}>
-            {progressBar && (
-                <ProgressBar
-                    {...progressBar}
-                />
-            )}
-            {progressSpinner && (
+            {progressBar && <ProgressBar {...progressBar} />}
+            {(progressSpinner || progressSpinnerFinishedIcon) && (
                 <OverviewItemDepiction keepColors>
-                    <Spinner
-                        position="inline"
-                        size={small ? "tiny" : "small"}
-                        stroke={small ? "bold" : "medium"}
-                        {...progressSpinner}
-                        className={spinnerClassNames}
-                    />
+                    {progressSpinnerFinishedIcon ? (
+                        React.cloneElement(progressSpinnerFinishedIcon, { small, large: !small })
+                    ) : (
+                        <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 && (
+                {props.label && (
+                    <OverviewItemLine small={small}>
+                        <OverflowText inline={true}>{props.label}</OverflowText>
+                    </OverviewItemLine>
+                )}
+                {(props.statusMessage || tags) && (
                     <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>
-                            )
-                        }
+                        {tags && (
+                            <>
+                                { tags }
+                                <Spacing vertical size="tiny" />
+                            </>
+                        )}
+                        {props.statusMessage && (
+                            <>
+                                {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}
-                        />
+                {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}
+                            />
+                        );
                     })}
-                </ContextMenu>
-                }
+                {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>
     );
@@ -158,8 +202,6 @@ export function ActivityControlWidget(props: IActivityControlProps) {
             {widget}
         </Card>
     ) : (
-        <div className={classname}>
-            {widget}
-        </div>
+        <div className={classname}>{widget}</div>
     );
 }