@eccenca/gui-elements 22.0.0-rc.7 → 22.1.0-rc.1

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/src/components/Icon/canonicalIconNames.json

@@ -1,120 +0,0 @@
-{
-  "application-dataintegration": "DataUnstructured",
-
-  "application-homepage": "Workspace",
-  "application-useraccount": "UserAvatar",
-  "application-warning": "WarningAlt",
-  "application-mapping": "ModelBuilder",
-  "application-explore": "Explore",
-  "application-vocabularies": "Catalog",
-  "application-queries": "DataView",
-  "application-legacygui": "ResetAlt",
-  "application-activities": "Activity",
-  "module-timetracker": "Timer",
-  "module-accesscontrol": "UserAdmin",
-  "module-annotation": "WatsonHealthTextAnnotationToggle",
-  "module-dashboard": "Dashboard",
-  "module-search": "Search",
-  "module-visualization": "DataVis_1",
-  "module-reports": "ReportData",
-  "module-thesauri": "Book",
-  "module-linkedrules": "Connect",
-  "module-integrations": "AppConnectivity",
-  "module-gdprsearch": "UserProfile",
-
-  "toggler-showmore": "ChevronDown",
-  "toggler-showless": "ChevronUp",
-  "toggler-moveright": "ChevronRight",
-  "toggler-moveleft": "ChevronLeft",
-  "toggler-maximize": "Maximize",
-  "toggler-minimize": "Minimize",
-  "toggler-tree": "TreeViewAlt",
-
-  "navigation-back": "ArrowLeft",
-  "navigation-forth": "ArrowRight",
-  "navigation-close": "Close",
-  "navigation-jump": "JumpLink",
-  "navigation-last": "PageLast",
-  "navigation-previous": "ChevronLeft",
-  "navigation-next": "ChevronRight",
-  "navigation-first": "PageFirst",
-
-  "item-moremenu": "OverflowMenuVertical",
-  "item-vertmenu": "OverflowMenuHorizontal",
-  "item-viewdetails": "View",
-  "item-clone": "Copy",
-  "item-edit": "Edit",
-  "item-evaluation": "Analytics",
-  "item-execution": "Run",
-  "item-info": "Information",
-  "item-remove": "TrashCan",
-  "item-add-artefact": "AddAlt",
-  "item-launch": "Launch",
-  "item-download": "Download",
-  "item-question": "Help",
-  "item-copy": "CopyFile",
-  "item-save": "Save",
-  "item-start": "PlayFilledAlt",
-  "item-stop": "StopFilledAlt",
-  "item-reload": "Renew",
-  "item-shuffle": "Shuffle",
-  "item-draggable": "Draggable",
-
-  "operation-search": "Search",
-  "operation-clear": "Close",
-  "operation-undo": "Undo",
-  "operation-redo": "Redo",
-  "operation-logout": "Logout",
-  "operation-filter": "Filter",
-  "operation-filteredit": "FilterEdit",
-  "operation-auto-graph-layout": "Flow",
-
-  "list-sort": "ArrowsVertical",
-  "list-sortasc": "ArrowDown",
-  "list-sortdesc": "ArrowUp",
-
-  "state-info": "InformationFilled",
-  "state-success": "CheckmarkFilled",
-  "state-warning": "WarningAltFilled",
-  "state-danger": "ErrorFilled",
-  "state-unchecked": "Checkbox",
-  "state-checked": "CheckboxChecked",
-  "state-partlychecked": "CheckboxIndeterminate",
-
-  "artefact-project": "Folder",
-  "artefact-workflow": "ModelBuilder",
-  "artefact-dataset": "Data_2",
-  "artefact-dataset-csv": "Csv",
-  "artefact-dataset-multicsv": "Csv",
-  "artefact-dataset-sparkview": "Sql",
-  "artefact-dataset-sqlendpoint": "Sql",
-  "artefact-dataset-jdbc": "Sql",
-  "artefact-dataset-xml": "Xml",
-  "artefact-dataset-json": "Json",
-  "artefact-dataset-excel": "Xls",
-  "artefact-dataset-file": "DataVis_1",
-  "artefact-dataset-eccencadataplatform": "DataVis_1",
-  "artefact-dataset-sparqlendpoint": "DataVis_1",
-  "artefact-dataset-neo4j": "DataVis_1",
-  "artefact-transform": "DataRefinery",
-  "artefact-linking": "Connect",
-  "artefact-task": "Script",
-  "artefact-customtask": "Script",
-  "artefact-file": "Document",
-  "artefact-embedded": "DataBase",
-  "artefact-remote": "VirtualMachine",
-  "artefact-deprecated": "WarningSquare",
-  "artefact-uncategorized": "Unknown",
-  "artefact-rawdata": "ScriptReference",
-  "artefact-report": "Report",
-
-  "activity-error-report": "Error",
-
-  "select-caret": "CaretSort",
-
-  "linked-item": "Link",
-  "unlinked-item": "Unlink",
-
-  "undefined": "Undefined",
-  "Undefined": "Undefined"
-}

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

@@ -1,36 +0,0 @@
-import React, { useState } from "react";
-import { ComponentStory, 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>);
-}