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

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+import ReactFlow, { Elements } from 'react-flow-renderer';
+import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
+
+import { NodeContent } from "./../NodeContent";
+import { nodeTypes } from "./../nodeTypes";
+import { NodeContentExtension } from "./../NodeContentExtension";
+import { Default as ContentExtensionExample } from "./NodeContentExtension.stories";
+
+export default {
+    title: "Extensions/React Flow/Node Content",
+    component: NodeContent,
+    subcomponents: { NodeContentExtension },
+    argTypes: {
+        contentExtension: {
+            control: "select",
+            options: ["Not set", "Default example"],
+            mapping: {
+                "Not set": undefined,
+                "Default example": <ContentExtensionExample />,
+            },
+        },
+        content: { control: "none" },
+        isConnectable: { table: { disable: true } },
+        targetPosition: { table: { disable: true } },
+        sourcePosition: { table: { disable: true } },
+        selected: { table: { disable: true } },
+        businessData: { table: { disable: true } },
+    },
+} as ComponentMeta<typeof NodeContent>;
+
+const NodeContentExample = (args: any) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+    const [elements, setElements] = useState([] as Elements);
+    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+
+    useEffect(() => {
+        setElements([
+            {
+                id: '1',
+                type: 'default',
+                data: args,
+                position: { x: 50, y: 50 },
+            }
+        ] as Elements);
+    }, [args]);
+
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+
+    return <ReactFlow
+        elements={elements}
+        style={{ height: '400px' }}
+        onLoad={onLoad}
+        nodeTypes={ nodeTypes }
+        defaultZoom={1}
+    />
+}
+
+const Template: ComponentStory<typeof NodeContent> = (args) => (
+    <NodeContentExample {...args} /*some comment*/ />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Node title',
+    content: (
+        <HtmlContentBlock>
+            <h4>Node body</h4>
+            <LoremIpsum p={4} avgSentencesPerParagraph={3} random={false} />
+        </HtmlContentBlock>
+    ),
+    contentExtension: <ContentExtensionExample />,
+    minimalShape: "none",
+};

package/src/extensions/react-flow/nodes/stories/NodeContentExtension.stories.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import { NodeContentExtension } from "./../NodeContentExtension";
+import IconButton from "../../../../components/Icon/IconButton";
+import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
+
+export default {
+    title: "Extensions/React Flow/Node Content Extension",
+    component: NodeContentExtension,
+    argTypes: {
+    },
+} as ComponentMeta<typeof NodeContentExtension>;
+
+export const Default = () => {
+    const [isExpanded, setExpanded] = useState<boolean>(false);
+
+    const toggleExpansion = (event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
+        setExpanded(!expanded);
+    }
+
+    return (
+        <NodeContentExtension
+            isExpanded={isExpanded}
+            onToggle={toggleExpansion}
+            actionButtons={
+                <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />
+            }
+        >
+            <HtmlContentBlock>
+                <h4>Extension example.</h4>
+                <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+        </NodeContentExtension>);
+}

package/src/extensions/react-flow/nodes/stories/NodeDefault.stories.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ReactFlow } from "./../../../../cmem";
+import { Elements } from 'react-flow-renderer';
+
+import { NodeDefault } from "./../NodeDefault";
+import { NodeContent } from "./../NodeContent";
+import { nodeTypes } from "./../nodeTypes";
+import { Default as NodeContentExample } from "./NodeContent.stories";
+
+export default {
+    title: "Extensions/React Flow/Default Node",
+    component: NodeDefault,
+    subcomponents: { NodeContent },
+    argTypes: {
+        id: {
+            control: "text",
+            description: "Internal node identifier.",
+        },
+        position: {
+            type: { required: true },
+            description: "Position on React-Flow canvas.",
+            table: {
+                type: { summary: "XYPosition" }
+            },
+        },
+        type: {
+            control: "select",
+            description: "Key of the imported and connected `nodeTypes` to specify what node implementation is used.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "default" }
+            },
+            options: Object.keys(nodeTypes),
+            mapping: Object.fromEntries(Object.keys(nodeTypes).map(type => [type, type])),
+        },
+        style: {
+            control: "object",
+            description: "css properties",
+            table: {
+                type: { summary: "React.CSSProperties" }
+            },
+        },
+        className: {
+            control: "text",
+            description: "additional class name"
+        },
+        targetPosition: {
+            description: "'left' | 'right' | 'top' | 'bottom' handle position",
+            table: {
+                type: { summary: "Position" },
+                defaultValue: { summary: "Position.Left" }
+            },
+        },
+        sourcePosition: {
+            description: "'left' | 'right' | 'top' | 'bottom' handle position",
+            table: {
+                type: { summary: "Position" },
+                defaultValue: { summary: "Position.Right" }
+            },
+        },
+        isHidden: {
+            control: "boolean",
+            description: "if true, the node will not be rendered",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" }
+            },
+        },
+        draggable: {
+            control: "boolean",
+            description: "if option is not set, the node is draggable (overwrites general nodesDraggable option)",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" }
+            },
+        },
+        connectable: {
+            control: "boolean",
+            description: "if option is not set, the node is connectable (overwrites general nodesConnectable option)",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" }
+            },
+        },
+        selectable: {
+            control: "boolean",
+            description: "if option is not set, the node is selectable (overwrites general elementsSelectable option)",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" }
+            },
+        },
+        dragHandle: {
+            control: "text",
+            description: "selector for specifying an element as a drag handle"
+        },
+    },
+} as ComponentMeta<typeof NodeDefault>;
+
+const NodeDefaultExample = (args: any) => {
+    const [reactflowInstance, setReactflowInstance] = useState(null);
+    const [elements, setElements] = useState([] as Elements);
+    //const [edgeTools, setEdgeTools] = useState<JSX.Element>(<></>);
+
+    useEffect(() => {
+        setElements([
+            args
+        ] as Elements);
+    }, [args]);
+
+    const onLoad = useCallback(
+        (rfi) => {
+            if (!reactflowInstance) {
+                setReactflowInstance(rfi);
+            }
+        },
+        [reactflowInstance]
+    );
+
+    return <ReactFlow
+        elements={elements}
+        style={{ height: '400px' }}
+        onLoad={onLoad}
+        nodeTypes={ nodeTypes }
+        defaultZoom={1}
+    />
+}
+
+const Template: ComponentStory<typeof NodeDefault> = (args) => (
+    <NodeDefaultExample {...args} /*some comment*/ />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    id: '1',
+    type: 'default',
+    data: NodeContentExample.args,
+    position: { x: 50, y: 50 },
+};

package/src/index.scss

@@ -169,6 +169,7 @@
 @import "./components/Tabs/tabs";
 @import "./components/PropertyValuePair/propertyvalue";
 @import "./components/Iframe/iframe";
+@import "./components/AutoSuggestion/AutoSuggestion";
 
 // == load tweaks ==============================================================
 

package/src/index.ts

@@ -8,6 +8,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";
@@ -31,6 +34,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";
@@ -56,6 +61,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";
@@ -125,6 +131,8 @@ import { openInNewTab } from "./common/utils/openInNewTab";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import List from "./components/List/List";
 
+import * as LegacyReplacements from "./legacy-replacements";
+
 const HelperClasses = {
     Typography: TypographyClassNames,
     Intent: IntentClassNames,
@@ -145,6 +153,9 @@ export {
     ApplicationToolbarSection,
     ApplicationToolbarAction,
     ApplicationToolbarPanel,
+    AutoSuggestion,
+    AutoSuggestionList,
+    SingleLineCodeEditor,
     HtmlContentBlock,
     OverflowText,
     WhiteSpaceContainer,
@@ -182,6 +193,8 @@ export {
     Checkbox,
     RadioButton,
     Tabs,
+    Tab,
+    TabTitle,
     TextField,
     TextArea,
     SearchField,
@@ -227,11 +240,13 @@ export {
     Toast,
     HelperClasses,
     Select, // TODO: include as own element
+    MultiSelect,
     AutoCompleteField,
     ProgressBar,
     Iframe,
     IframeModal,
-    Utilities
+    Utilities,
+    LegacyReplacements,
 };
 
 export * from "./cmem";

package/src/legacy-replacements/Tabs/Tabs.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Tabs } from "./../../legacy-replacements";
+
+export default {
+    title: "Legacy/Tabs",
+    component: Tabs,
+    argTypes: {
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "string",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+    },
+} as ComponentMeta<typeof Tabs>;
+
+const TemplateDeprecated: ComponentStory<typeof Tabs> = (args) => (
+    <Tabs {...args} />
+);
+
+export const DeprecatedUsage = TemplateDeprecated.bind({});
+DeprecatedUsage.args = {
+    prefixTabNames: "deprecatedtabs",
+    activeTab: "deprecatedtab1",
+    tabs: [
+        {
+            tabId: "deprecatedtab1",
+            tabTitle: "Tab title 1",
+            tabContent: "Tab content 1",
+        },
+        {
+            tabId: "deprecatedtab2",
+            tabTitle: "Tab title 2",
+            tabContent: "Tab content 2",
+        },
+        {
+            tabId: "deprecatedtab3",
+            tabTitle: "Tab title 3",
+            tabContent: "Tab content 3",
+        }
+    ]
+};

package/src/legacy-replacements/Tabs/Tabs.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+    Tabs as BlueprintTabs,
+    TabsProps as BlueprintTabsProps,
+    Tab,
+} from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+// deprecated interface
+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;
+}
+
+// deprecated interface
+export interface DeprecatedTabProps {
+    tabId: string;
+    tabTitle: React.ReactNode;
+    tabContent?: JSX.Element;
+    dontShrink?: boolean;
+    className?: string;
+}
+
+const createDeprecatedTab = ({
+    tabId,
+    tabTitle,
+    tabContent,
+    dontShrink=false,
+    ...otherTabProps
+}: DeprecatedTabProps) => {
+    const extraStyles = dontShrink ? { style: {flexShrink: 0} } : {};
+    return <Tab
+        key={tabId}
+        id={tabId}
+        title={tabTitle}
+        panel={tabContent}
+        {...otherTabProps}
+        {...extraStyles}
+    />;
+}
+
+export function TabsReplacement({
+    activeTab,
+    tabs=[],
+    onTabClick,
+    controlled = false,
+    prefixTabNames,
+    className = "",
+    allowScrollbars,
+    ...restProps
+}: TabsProps) {
+    const usagetype = controlled ? { selectedTabId: activeTab } : { defaultSelectedTabId: activeTab }
+    return (
+        <BlueprintTabs
+            id={prefixTabNames}
+            onChange={onTabClick}
+            className={
+                className +
+                (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")
+            }
+            {...usagetype}
+            {...restProps}
+        >
+            {
+                tabs.map(tab => {
+                    return createDeprecatedTab({
+                        className: `${prefixTabNames}-header-${tab.tabId}`,
+                        ...tab
+                    });
+                })
+            }
+        </BlueprintTabs>
+    );
+};

package/src/legacy-replacements/index.ts

@@ -0,0 +1,11 @@
+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/src/test/setupTests.js

@@ -1,2 +1,21 @@
 import "regenerator-runtime/runtime";
 
+if (window.document) {
+    window.document.body.createTextRange = function() {
+        return {
+            setEnd: function(){},
+            setStart: function(){},
+            getBoundingClientRect: function(){
+                return {right: 0};
+            },
+            getClientRects: function(){
+                return {
+                    length: 0,
+                    left: 0,
+                    right: 0
+                }
+            }
+        }
+    }
+}
+

package/blueprint/constants.ts

@@ -1,7 +0,0 @@
-import { Classes as B_Classes, Intent as B_Intent, Position as B_Position } from "@blueprintjs/core";
-import { IconNames as B_IconNames } from "@blueprintjs/icons";
-
-export const Position = B_Position;
-export const Intent = B_Intent;
-export const IconNames = B_IconNames;
-export const Classes = B_Classes;

package/blueprint/toaster/index.tsx

@@ -1 +0,0 @@
-export { Toaster as default } from "@blueprintjs/core";

package/dist/cmem/ActivityControl/ActivityControlTypes.d.ts

@@ -1,15 +0,0 @@
-export interface IActivityStatus {
-    project?: string;
-    task?: string;
-    activity: string;
-    isRunning: boolean;
-    failed: boolean;
-    statusName: "Waiting" | "Finished" | "Idle" | "Running" | "Canceling";
-    progress: number;
-    message: string;
-    cancelled: boolean;
-    concreteStatus: "Cancelled" | "Failed" | "Successful" | "Not executed" | "Running" | "Waiting" | "Canceling";
-    exceptionMessage?: string | null;
-    runtime?: number;
-    startTime?: string;
-}

package/dist/cmem/ActivityControl/ActivityControlTypes.js

@@ -1 +0,0 @@
-"use strict";

package/dist/cmem/ActivityControl/ActivityControlWidget.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-import { TestableComponent } from "../../components/interfaces";
-import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
-import { SpinnerProps } from "../../components/Spinner/Spinner";
-export interface IActivityControlProps extends TestableComponent {
-    label?: string | JSX.Element;
-    progressBar?: ProgressBarProps;
-    progressSpinner?: SpinnerProps;
-    statusMessage?: string;
-    activityActions?: IActivityAction[];
-    activityContextMenu?: IActivityContextMenu;
-    small?: boolean;
-    border?: boolean;
-    canShrink?: boolean;
-}
-interface IActivityContextMenu extends TestableComponent {
-    tooltip?: string;
-    menuItems: IActivityMenuAction[];
-}
-export interface IActivityAction extends TestableComponent {
-    action: () => any;
-    tooltip?: string;
-    icon: string;
-    disabled?: boolean;
-    hasStateWarning?: boolean;
-}
-export interface IActivityMenuAction extends IActivityAction, TestableComponent {
-    href?: string;
-}
-/** Shows the status of activities and supports actions on these activities. */
-export declare function ActivityControlWidget(props: IActivityControlProps): JSX.Element;
-export {};

package/dist/cmem/ActivityControl/ActivityControlWidget.js

@@ -1,92 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ActivityControlWidget = ActivityControlWidget;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../../index");
-
-var _constants = require("../../configuration/constants");
-
-/** Shows the status of activities and supports actions on these activities. */
-function ActivityControlWidget(props) {
-  const {
-    "data-test-id": dataTestId,
-    progressBar,
-    progressSpinner,
-    activityActions,
-    activityContextMenu,
-    small,
-    border,
-    canShrink
-  } = props;
-  const spinnerClassNames = ((progressSpinner === null || progressSpinner === void 0 ? void 0 : progressSpinner.className) ?? "") + ` ${_constants.CLASSPREFIX}-spinner--permanent`;
-
-  const widget = /*#__PURE__*/_react.default.createElement(_index.OverviewItem, {
-    "data-test-id": dataTestId,
-    hasSpacing: border,
-    densityHigh: small
-  }, progressBar && /*#__PURE__*/_react.default.createElement(_index.ProgressBar, progressBar), progressSpinner && /*#__PURE__*/_react.default.createElement(_index.OverviewItemDepiction, {
-    keepColors: true
-  }, /*#__PURE__*/_react.default.createElement(_index.Spinner, (0, _extends2.default)({
-    position: "inline",
-    size: small ? "tiny" : "small",
-    stroke: small ? "bold" : "medium"
-  }, progressSpinner, {
-    className: spinnerClassNames
-  }))), /*#__PURE__*/_react.default.createElement(_index.OverviewItemDescription, null, props.label && /*#__PURE__*/_react.default.createElement(_index.OverviewItemLine, {
-    small: small
-  }, /*#__PURE__*/_react.default.createElement(_index.OverflowText, {
-    inline: true
-  }, props.label)), props.statusMessage && /*#__PURE__*/_react.default.createElement(_index.OverviewItemLine, {
-    small: true
-  }, props.statusMessage.length > 50 ? /*#__PURE__*/_react.default.createElement(_index.Tooltip, {
-    content: props.statusMessage,
-    size: "large",
-    tooltipProps: {
-      placement: "top",
-      boundary: "viewport"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_index.OverflowText, {
-    inline: true
-  }, props.statusMessage)) : /*#__PURE__*/_react.default.createElement(_index.OverflowText, {
-    inline: true
-  }, props.statusMessage))), /*#__PURE__*/_react.default.createElement(_index.OverviewItemActions, null, activityActions && activityActions.map(action => {
-    return /*#__PURE__*/_react.default.createElement(_index.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 && /*#__PURE__*/_react.default.createElement(_index.ContextMenu, {
-    "data-test-id": activityContextMenu["data-test-id"],
-    togglerText: activityContextMenu.tooltip
-  }, activityContextMenu.menuItems.map(menuAction => {
-    return /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
-      icon: menuAction.icon,
-      key: menuAction.icon,
-      onClick: menuAction.action,
-      text: menuAction.tooltip
-    });
-  }))));
-
-  const classname = `${_constants.CLASSPREFIX}-addon-activitycontrol` + (canShrink ? ` ${_constants.CLASSPREFIX}-addon-activitycontrol--shrink` : "");
-  return border ? /*#__PURE__*/_react.default.createElement(_index.Card, {
-    isOnlyLayout: true,
-    elevation: 0,
-    className: classname
-  }, widget) : /*#__PURE__*/_react.default.createElement("div", {
-    className: classname
-  }, widget);
-}