@eccenca/gui-elements 22.0.1 → 22.1.0-rc.0

package/dist/types/components/Tabs/TabTitle.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export interface TabTitleProps {
+    /**
+     * Content of the label that is displayed in the tab element.
+     */
+    text: string | React.ReactNode;
+    /**
+     * Content that is displayed before the tab label, could be used for icons, change markers, etc.
+     * Use text content inside `<span>` element to force white space between th eprefix and the label.
+     */
+    titlePrefix?: React.ReactNode;
+    /**
+     * Content that is display after tab label, could be used for counts or close/remove buttons.
+     * Use text content inside `<span>` element to force white space between th eprefix and the label.
+     */
+    titleSuffix?: React.ReactNode;
+    /**
+     * Enable larger display of the tab.
+     */
+    large?: boolean;
+    /**
+     * Enable smaller display of the tab.
+     */
+    small?: boolean;
+    /**
+     * Add a tooltip to a tab, displayed when user hoveres over it.
+     */
+    tooltip?: string | JSX.Element;
+    /**
+     * Make the tab not usable, display is also narrowed.
+     */
+    disabled?: boolean;
+}
+/**
+ * Gives control about functionality and layout of the tab titles.
+ */
+declare const TabTitle: ({ text, tooltip, titlePrefix, titleSuffix, large, small, disabled, }: TabTitleProps) => JSX.Element;
+export default TabTitle;

package/dist/types/components/Tabs/Tabs.d.ts

@@ -1,24 +1,18 @@
 import React from 'react';
-import { TabsProps as BlueprintTabsProbs, TabProps as BlueprintTabProbs } from "@blueprintjs/core";
-export interface TabProps extends BlueprintTabProbs {
-    titlePrefix?: React.ReactNode;
-    titleSuffix?: React.ReactNode;
-    dontShrink?: boolean;
-    large?: boolean;
-    small?: boolean;
-}
-export interface DeprecatedTabProps {
-    tabId: string;
-    tabTitle: React.ReactNode;
-    tabContent?: JSX.Element;
-    dontShrink?: boolean;
-}
-interface TabsProps extends Omit<BlueprintTabsProbs, "vertical" | "onChange" | "large"> {
-    activeTab: string;
-    tabs: any[];
-    onTabClick: ({ props }: any) => void;
-    prefixTabNames?: string;
+import { TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
+import { TabProps } from "./Tab";
+interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large" | "animate"> {
+    children?: React.ReactNode;
+    /**
+     * Data structure containing all tabs, including their titles and content panels.
+     * Currently it is not possible to add `Tab` elements direct as children elements to the `<Tabs>` container.
+     */
+    tabs?: TabProps[];
+    /**
+     * Allow scrollbars on the tabs header.
+     * Otherwise they will be shrinked if not enough space.
+     */
     allowScrollbars?: boolean;
 }
-declare function Tabs({ activeTab, tabs, onTabClick, prefixTabNames, className, allowScrollbars, ...restProps }: TabsProps): JSX.Element;
+declare function Tabs({ tabs, children, className, allowScrollbars, ...restProps }: TabsProps): JSX.Element;
 export default Tabs;

package/dist/types/components/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TagProps as BlueprintTagProps } from "@blueprintjs/core";
 import Color from "color";
-interface TagProps extends Omit<BlueprintTagProps, "active" | "fill" | "large" | "multiline" | "intent" | "rightIcon" | "round"> {
+interface TagProps extends Omit<BlueprintTagProps, "active" | "fill" | "large" | "multiline" | "intent" | "rightIcon"> {
     /**
      * Sets the background color of a tag, depends on the `Color` object provided by the
      * [npm color module](https://www.npmjs.com/package/color) v3. You can use it with

package/dist/types/extensions/react-flow/edges/utils.d.ts

@@ -1,4 +1,4 @@
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
-export declare const drawEdgeStraight: ({ sourceX, sourceY, targetX, targetY, }: EdgeDefaultProps) => string;
+export declare const drawEdgeStraight: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, }: EdgeDefaultProps) => string;
 export declare const drawEdgeStep: ({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data, }: EdgeStepProps) => string;

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -3,11 +3,11 @@ import { Position } from "react-flow-renderer";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { HandleProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
-declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
+export declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
-interface NodeContentData {
+interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Name of icon that should be displayed before the node label.
      * Must be a name from our list of canonical icon names.
@@ -24,13 +24,13 @@ interface NodeContentData {
     /**
      * Content element, displayed in the node body.
      */
-    content?: React.ReactNode;
+    content?: React.ReactNode | ((adjustedContentProps: Partial<CONTENT_PROPS>) => React.ReactNode);
     /**
      * Content extension, displayed at the bottom side of a node.
      */
     contentExtension?: React.ReactNode;
 }
-export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
+export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the node.
      * If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
@@ -57,7 +57,7 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
     /**
      * Set of defined buttons and icons that can be displayed.
      */
-    executionButtons?: () => React.ReactNode;
+    executionButtons?: (adjustedContentProps: Partial<NODE_CONTENT_PROPS>, setAdjustedContentProps: React.Dispatch<React.SetStateAction<Partial<NODE_CONTENT_PROPS>>>) => React.ReactElement<NODE_CONTENT_PROPS>;
     /**
      * Can be used for permanent action button or context menu.
      * It is displayed at the node header right to the label.
@@ -80,7 +80,7 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
      * Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
      * If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
      */
-    getMinimalTooltipData?: (node: NodeProps<T>) => NodeContentData;
+    getMinimalTooltipData?: (node: NodeProps<NODE_DATA>) => NodeContentData;
     /**
      * Set if a handle is displayed even if it does not allow a connection to an edge.
      */
@@ -90,7 +90,7 @@ export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttribut
      */
     animated?: boolean;
     /** Additional data stored in the node. */
-    businessData?: T;
+    businessData?: NODE_DATA;
     /**
      * This property is only forwarded from the `NodeDefault` element.
      * If set then it will be always overwritten internally.
@@ -117,5 +117,5 @@ export declare const gethighlightedStateClasses: (state: any, baseClassName: any
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare const NodeContent: ({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, businessData, ...otherProps }: NodeContentProps<any>) => JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
 export {};

package/dist/types/extensions/react-flow/nodes/NodeDefault.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { NodeProps as ReactFlowNodeProps } from "react-flow-renderer";
 import { NodeContentProps } from "./NodeContent";
-export interface NodeProps<T> extends ReactFlowNodeProps {
+export interface NodeProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends ReactFlowNodeProps {
     /**
      * Contains all properties for our implementation of the React-Flow node.
      * For details pls see the `NodeContent` element documentation.
      */
-    data: NodeContentProps<T>;
+    data: NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS>;
 }
 /**
  * The `NodeDefault` element manages the display of React-Flow nodes.

package/dist/types/extensions/react-flow/nodes/NodeTools.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { IPopoverProps as IBlueprintPopoverProps } from "@blueprintjs/core";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 export interface NodeToolsProps extends IBlueprintPopoverProps {
     children: string | JSX.Element;
-    togglerElement?: string | JSX.Element;
+    togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string;
 }

package/dist/types/extensions/react-flow/nodes/nodeTypes.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 export declare const nodeTypes: {
-    default: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    graphNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    classNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    instanceNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    propertyNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    datasetNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    linkingNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    transformNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    taskNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
-    workflowNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any>) => JSX.Element>;
+    default: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    graphNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    classNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    instanceNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    propertyNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    datasetNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    linkingNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    transformNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    taskNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
+    workflowNode: import("react").MemoExoticComponent<(node: import("./NodeDefault").NodeProps<any, any>) => JSX.Element>;
 };

package/dist/types/index.d.ts

@@ -9,6 +9,9 @@ import ApplicationToolbar from "./components/Application/ApplicationToolbar";
 import ApplicationToolbarSection from "./components/Application/ApplicationToolbarSection";
 import ApplicationToolbarAction from "./components/Application/ApplicationToolbarAction";
 import ApplicationToolbarPanel from "./components/Application/ApplicationToolbarPanel";
+import AutoSuggestion from "./components/AutoSuggestion/AutoSuggestion";
+import { AutoSuggestionList } from "./components/AutoSuggestion/AutoSuggestionList";
+import SingleLineCodeEditor from "./components/AutoSuggestion/SingleLineCodeEditor";
 import HtmlContentBlock from "./components/Typography/HtmlContentBlock";
 import OverflowText from "./components/Typography/OverflowText";
 import WhiteSpaceContainer from "./components/Typography/WhiteSpaceContainer";
@@ -27,6 +30,8 @@ import Button from "./components/Button/Button";
 import Checkbox from "./components/Checkbox/Checkbox";
 import RadioButton from "./components/RadioButton/RadioButton";
 import Tabs from "./components/Tabs/Tabs";
+import Tab from "./components/Tabs/Tab";
+import TabTitle from "./components/Tabs/TabTitle";
 import TextField from "./components/TextField/TextField";
 import TextArea from "./components/TextField/TextArea";
 import SearchField from "./components/TextField/SearchField";
@@ -47,6 +52,7 @@ import TagList from "./components/Tag/TagList";
 import Notification from "./components/Notification/Notification";
 import Toast from "./components/Notification/Toast";
 import { Select } from "@blueprintjs/select";
+import MultiSelect from "./components/MultiSelect/MultiSelect";
 import { Iframe } from "./components/Iframe/Iframe";
 import { IframeModal } from "./components/Iframe/IframeModal";
 import { OverviewItem, OverviewItemActions, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemList } from "./components/OverviewItem";
@@ -75,6 +81,7 @@ import { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList } fro
 import * as TypographyClassNames from "./components/Typography/classnames";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import List from "./components/List/List";
+import * as LegacyReplacements from "./legacy-replacements";
 declare const HelperClasses: {
     Typography: typeof TypographyClassNames;
     Intent: {
@@ -84,9 +91,9 @@ declare const HelperClasses: {
 declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
 };
-export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, HtmlContentBlock, OverflowText, WhiteSpaceContainer, Highlighter, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, Icon, IconButton, Label, Button, Checkbox, RadioButton, Tabs, TextField, TextArea, SearchField, Switch, // TODO: scss styles
+export { ApplicationContainer, ApplicationHeader, ApplicationContent, ApplicationSidebarNavigation, ApplicationSidebarToggler, ApplicationTitle, ApplicationToolbar, ApplicationToolbarSection, ApplicationToolbarAction, ApplicationToolbarPanel, AutoSuggestion, AutoSuggestionList, SingleLineCodeEditor, HtmlContentBlock, OverflowText, WhiteSpaceContainer, Highlighter, Grid, GridRow, GridColumn, List, WorkspaceContent, WorkspaceMain, WorkspaceSide, WorkspaceHeader, Menu, MenuItem, MenuDivider, ContextOverlay, ContextMenu, OverviewItem, OverviewItemDepiction, OverviewItemDescription, OverviewItemLine, OverviewItemActions, OverviewItemList, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader, Icon, IconButton, Label, Button, Checkbox, RadioButton, Tabs, Tab, TabTitle, TextField, TextArea, SearchField, Switch, // TODO: scss styles
 NumericInput, // TODO: scss styles
 FieldItem, FieldItemRow, FieldSet, BreadcrumbList, BreadcrumbItem, Modal, SimpleDialog, AlertDialog, Card, CardHeader, CardTitle, CardOptions, CardContent, CardActions, CardActionsAux, Spacing, Divider, Tooltip, Section, SectionHeader, TitlePage, TitleMainsection, TitleSubsection, Accordion, AccordionItem, Toolbar, ToolbarSection, Tag, TagList, Pagination, Notification, Link, Spinner, PropertyName, PropertyValue, PropertyValuePair, PropertyValueList, Toast, HelperClasses, Select, // TODO: include as own element
-AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities };
+MultiSelect, AutoCompleteField, ProgressBar, Iframe, IframeModal, Utilities, LegacyReplacements, };
 export * from "./cmem";
 export * from "./extensions/react-flow";

package/dist/types/legacy-replacements/Button/AffirmativeButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function AffirmativeButtonReplacement({ children, ...otherProps }: any): JSX.Element;

package/dist/types/legacy-replacements/Button/Button.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const iconMappings: {
+    [key: string]: any;
+};
+export declare function ButtonReplacement({ children, className, fabSize, iconName, tooltip, progress, disabled, affirmative, dismissive, disruptive, raised, colored, ...otherProps }: any): JSX.Element;

package/dist/types/legacy-replacements/Button/DismissiveButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DismissiveButtonReplacement({ children, ...otherProps }: any): JSX.Element;

package/dist/types/legacy-replacements/Button/DisruptiveButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DisruptiveButtonReplacement({ children, ...otherProps }: any): JSX.Element;

package/dist/types/legacy-replacements/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CheckboxReplacement({ children, checked, className, disabled, label, onChange, ...otherProps }: any): JSX.Element;

package/dist/types/legacy-replacements/Radio/RadioButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function RadioButtonReplacement({ children, label, ...otherProps }: any): JSX.Element;

package/dist/types/legacy-replacements/Tabs/Tabs.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
+interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "onChange" | "large" | "id" | "renderActiveTabPanelOnly"> {
+    activeTab: string;
+    tabs: DeprecatedTabProps[];
+    onTabClick?: ({ props }: any) => void;
+    prefixTabNames: string;
+    allowScrollbars?: boolean;
+    /**
+    * If controlled usage is enable then a `onTabClick` handler is ncessary to control tab panel content and `activeTab` updates.
+    */
+    controlled?: boolean;
+}
+export interface DeprecatedTabProps {
+    tabId: string;
+    tabTitle: React.ReactNode;
+    tabContent?: JSX.Element;
+    dontShrink?: boolean;
+    className?: string;
+}
+export declare function TabsReplacement({ activeTab, tabs, onTabClick, controlled, prefixTabNames, className, allowScrollbars, ...restProps }: TabsProps): JSX.Element;
+export {};

package/dist/types/legacy-replacements/TextField/TextField.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function TextFieldReplacement({ className, disabled, error, inputClassName, label, multiline, onChange, onClearValue, required, stretch, value, ...otherProps }: any): JSX.Element;

package/dist/types/legacy-replacements/index.d.ts

@@ -0,0 +1,10 @@
+export { ButtonReplacement as Button } from "./Button/Button";
+export { AffirmativeButtonReplacement as AffirmativeButton } from "./Button/AffirmativeButton";
+export { DismissiveButtonReplacement as DismissiveButton } from "./Button/DismissiveButton";
+export { DisruptiveButtonReplacement as DisruptiveButton } from "./Button/DisruptiveButton";
+export { ButtonReplacement as ProgressButton } from "./Button/Button";
+export { CheckboxReplacement as Checkbox } from "./Checkbox/Checkbox";
+export { RadioButtonReplacement as Radio } from "./Radio/RadioButton";
+export { TabsReplacement as Tabs } from "./Tabs/Tabs";
+export { TextFieldReplacement as TextField } from "./TextField/TextField";
+export type { DeprecatedTabProps } from "./Tabs/Tabs";

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.1",
+  "version": "22.1.0-rc.0",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "keywords": [
@@ -42,7 +42,7 @@
     "src"
   ],
   "scripts": {
-    "build:clean": "rm -rf dist/",
+    "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",
@@ -64,12 +64,14 @@
     "carbon-components": "10.44.0",
     "carbon-components-react": "7.44.1",
     "carbon-icons": "7.0.7",
-    "codemirror": "^5.52.2",
+    "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",
@@ -96,24 +98,28 @@
     "@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",
@@ -171,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,
+};