@eccenca/gui-elements 6.1.0 → 22.0.0-rc.6

package/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -0,0 +1,95 @@
+import React, {useState} from "react";
+import {Link, Spacing} from "../../index";
+
+interface IContentBlobTogglerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+        space-delimited list of class names
+    */
+  className?: string;
+  /**
+        text label used for toggler when preview is displayed
+    */
+  toggleExtendText: string;
+  /**
+        text label used for toggler when full view is displayed
+    */
+  toggleReduceText: string;
+  /**
+        content that is displayed as preview
+    */
+  previewContent: React.ReactNode;
+  /**
+        content that is displayed as extended full view
+    */
+  fullviewContent: React.ReactNode;
+  /**
+        Show extended full view initially. Default: false
+    */
+  startExtended?: boolean;
+  /**
+        Callback if toggler is necessary. Default: true
+    */
+  enableToggler?: boolean;
+}
+
+/** Shows a preview with the option to expand to a full view (and back). */
+export function ContentBlobToggler({
+  className = "",
+  toggleExtendText,
+  toggleReduceText,
+  previewContent,
+  fullviewContent,
+  startExtended = false,
+  enableToggler = true,
+  ...otherProps
+}: IContentBlobTogglerProps) {
+  const [isExtended, setViewState] = useState(startExtended);
+  const handlerToggleView = (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setViewState(!isExtended);
+  };
+
+  return (
+    <div className={className} {...otherProps}>
+        {!isExtended ? (
+          <>
+            {previewContent}
+            {enableToggler && (
+              <>
+                &hellip;{" "}
+                <Link
+                  href="#more"
+                  data-test-id={"content-blob-toggler-more-link"}
+                  onClick={(e: any) => {
+                    handlerToggleView(e);
+                  }}
+                >
+                  {toggleExtendText}
+                </Link>
+              </>
+            )}
+          </>
+        ) : (
+          <>
+            {fullviewContent}
+            {enableToggler && (
+                <div>
+                    <Spacing size="small" />
+                    <Link
+                        data-test-id={"content-blob-toggler-less-link"}
+                        href="#less"
+                        onClick={(e: any) => {
+                            handlerToggleView(e);
+                        }}
+                    >
+                        {toggleReduceText}
+                    </Link>
+                </div>
+            )}
+          </>
+        )}
+    </div>
+  );
+}

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { ContentBlobToggler, Markdown } from "../";
+
+interface IStringPreviewContentBlobTogglerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     space-delimited list of class names
+     */
+    className?: string;
+    /**
+     The preview content will be cut to this length if it is too long.
+     */
+    previewMaxLength?: number;
+    /**
+     text label used for toggler when preview is displayed
+     */
+    toggleExtendText: string;
+    /**
+     text label used for toggler when full view is displayed
+     */
+    toggleReduceText: string;
+    /**
+     The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
+     */
+    content: string;
+    /**
+     Content that is displayed as extended full view
+     */
+    fullviewContent: React.ReactNode;
+    /**
+     show extended full view initially
+     */
+    startExtended?: boolean;
+    /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
+    firstNonEmptyLineOnly?: boolean
+    /** If enabled the preview is rendered as markdown. */
+    renderPreviewAsMarkdown?: boolean
+    /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
+    allowedHtmlElementsInPreview?: string[]
+}
+
+/** Version of the content toggler for text only content. */
+export function StringPreviewContentBlobToggler({
+                                                    className = "",
+                                                    previewMaxLength,
+                                                    toggleExtendText,
+                                                    toggleReduceText,
+                                                    content,
+                                                    fullviewContent,
+                                                    startExtended,
+                                                    firstNonEmptyLineOnly,
+                                                    renderPreviewAsMarkdown = false,
+                                                    allowedHtmlElementsInPreview
+                                                }: IStringPreviewContentBlobTogglerProps) {
+    const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content
+    const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine
+    const enableToggler = previewString !== content
+
+    return <ContentBlobToggler
+        className={className}
+        previewContent={renderPreviewAsMarkdown ? <Markdown allowedElements={allowedHtmlElementsInPreview}>{previewString}</Markdown> : previewString}
+        toggleExtendText={toggleExtendText}
+        toggleReduceText={toggleReduceText}
+        fullviewContent={fullviewContent}
+        startExtended={startExtended}
+        enableToggler={enableToggler}
+    />
+}
+
+const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
+
+/** Takes the first non-empty line from a preview string. */
+export function firstNonEmptyLine(preview: string) {
+    const previewString = preview.trim();
+    const result = newLineRegex.exec(previewString);
+    return result !== null ? previewString.substr(0, result.index) : previewString;
+}

package/src/cmem/DateTimeDisplay/ElapsedDateTimeDisplay.tsx

@@ -0,0 +1,69 @@
+import React, {useEffect, useState} from "react";
+import {TestableComponent} from "../../components/interfaces";
+
+interface IProps extends TestableComponent {
+    // The date time given as string (parseable by Date) or number (ms since 1970-01-01 00:00:00 UTC)
+    dateTime: string | number
+    // String to put before the elapsed time
+    prefix?: string
+    // String to put after the elapsed time
+    suffix?: string
+    // If the date time string should be shown as tooltip
+    showDateTimeTooltip?: boolean
+    // Translate time related vocabulary
+    translateUnits: (unit: TimeUnits) => string
+}
+
+export type TimeUnits = "minute" | "minutes" | "hour" | "hours" | "day" | "days"
+
+const dateTimeToElapsedTimeInMs = (dateTime: string | number) => {
+    const absoluteMs = typeof dateTime === "number" ? dateTime : new Date(dateTime).getTime()
+    return new Date().getTime() - absoluteMs
+}
+
+// Returns a segmentation of the elapsed time, i.e. an array with the nr of days, hours, minutes, seconds
+export const elapsedTimeSegmented = (elapsedTimeInMs: number): number[] => {
+    // In how many segments the time should be split, i.e. hours, minutes, seconds
+    const segmentSteps = [24, 60, 60]
+    // First convert to time in seconds
+    let remaining = Math.floor(elapsedTimeInMs / 1000)
+    const segmentValues: number[] = []
+    segmentSteps.reverse().forEach((segmentSize) => {
+        const segmentValue = remaining % segmentSize
+        remaining =  Math.floor(remaining / segmentSize)
+        segmentValues.push(segmentValue)
+    })
+    segmentValues.push(remaining)
+    return segmentValues.reverse()
+}
+
+// Returns the simplified elapsed time
+export const simplifiedElapsedTime = (timeSegments: number[], translateUnits: (unit: TimeUnits) => string) => {
+    const units: TimeUnits[] = ["day", "hour", "minute"]
+    // Find first non-null value
+    let idx = 0
+    while(idx < 3 && timeSegments[idx] === 0) {
+        idx++
+    }
+    if(idx === 3) {
+        // Do not show exact seconds
+        return `< 1 ${translateUnits("minute")}`
+    } else {
+        return `${timeSegments[idx]} ${translateUnits(units[idx] + (timeSegments[idx] > 1 ? "s": "") as TimeUnits)}`
+    }
+}
+/** Displays the elapsed time in a human readable way. */
+export const ElapsedDateTimeDisplay = ({dateTime, prefix = "", suffix = "", showDateTimeTooltip = true, translateUnits, ...otherProps}: IProps) => {
+    const [elapsedTime, setElapsedTime] = useState<number>(dateTimeToElapsedTimeInMs(dateTime))
+
+    useEffect(() => {
+        const timeout = setInterval(() => {
+            setElapsedTime(dateTimeToElapsedTimeInMs(dateTime))
+        }, 1000)
+        return () => clearInterval(timeout)
+    }, [dateTime])
+
+    return <span data-test-id={otherProps["data-test-id"]} title={showDateTimeTooltip ? new Date(dateTime).toString() : ""}>
+        {prefix + simplifiedElapsedTime(elapsedTimeSegmented(elapsedTime), translateUnits) + suffix}
+    </span>
+}

package/src/cmem/DateTimeDisplay/tests/ElapsedDateTimeDisplay.test.tsx

@@ -0,0 +1,29 @@
+import {simplifiedElapsedTime, elapsedTimeSegmented, TimeUnits} from "../ElapsedDateTimeDisplay";
+
+describe("Elapsed time component", () => {
+    const checkMS = (timeInMs: number, expectedString: string) => expect(elapsedTimeSegmented(timeInMs).join(":")).toBe(expectedString)
+    const checkS = (timeInSeconds: number, expectedString: string) => checkMS(timeInSeconds * 1000, expectedString)
+    const translate = (timeUnit: TimeUnits) => timeUnit
+    const checkHumanReadable = (timeInSeconds: number, expectedString: string) => expect(simplifiedElapsedTime(elapsedTimeSegmented(timeInSeconds * 1000), translate)).toBe(expectedString)
+    it("should segment the time", () => {
+        checkMS(2123, "0:0:0:2")
+        checkS(2, "0:0:0:2")
+        checkS(12, "0:0:0:12")
+        checkS(62, "0:0:1:2")
+        checkS(72, "0:0:1:12")
+        checkS(10*60, "0:0:10:0")
+        checkS(10*60 + 2, "0:0:10:2")
+        checkS(3600 * 123 + 60 * 42 + 23, "5:3:42:23")
+    })
+    it("should return a human-readable representation of the time", () => {
+        checkHumanReadable(2, "< 1 minute")
+        checkHumanReadable(59, "< 1 minute")
+        checkHumanReadable(60, "1 minute")
+        checkHumanReadable(2 * 60, "2 minutes")
+        checkHumanReadable(3600, "1 hour")
+        checkHumanReadable(3600 + 1, "1 hour")
+        checkHumanReadable(2 * 3600, "2 hours")
+        checkHumanReadable(24 * 3600, "1 day")
+        checkHumanReadable(2 * 24 * 3600 + 123, "2 days")
+    })
+})

package/src/cmem/_index.scss

@@ -0,0 +1,2 @@
+@import "./ActivityControl/activitycontrol";
+@import "./markdown/markdown";

package/src/cmem/index.ts

@@ -0,0 +1,35 @@
+import { ActivityControlWidget } from "./ActivityControl/ActivityControlWidget";
+import { ActivityExecutionErrorReportModal } from "./ActivityControl/ActivityExecutionErrorReportModal";
+import {
+    ActivityAction,
+    SilkActivityControl,
+    IActivityControlLayoutProps,
+} from "./ActivityControl/SilkActivityControl";
+import { IActivityStatus } from "./ActivityControl/ActivityControlTypes";
+import { ContentBlobToggler } from "./ContentBlobToggler/ContentBlobToggler";
+import {
+    ElapsedDateTimeDisplay,
+    TimeUnits
+} from "./DateTimeDisplay/ElapsedDateTimeDisplay";
+import { Markdown } from "./markdown/Markdown";
+import {
+    StringPreviewContentBlobToggler,
+    firstNonEmptyLine,
+} from "./ContentBlobToggler/StringPreviewContentBlobToggler";
+
+export {
+    ActivityControlWidget,
+    ActivityExecutionErrorReportModal,
+    ContentBlobToggler,
+    Markdown,
+    StringPreviewContentBlobToggler,
+    SilkActivityControl,
+    ElapsedDateTimeDisplay,
+    firstNonEmptyLine,
+}
+export type {
+    IActivityStatus,
+    ActivityAction,
+    IActivityControlLayoutProps,
+    TimeUnits,
+}

package/src/cmem/markdown/Markdown.tsx

@@ -0,0 +1,89 @@
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+//@ts-ignore
+import remarkTypograf from "@mavrin/remark-typograf";
+import {remarkDefinitionList} from 'remark-definition-list';
+import React from "react";
+import { HtmlContentBlock } from "../../index";
+import { PluggableList } from "react-markdown/lib/react-markdown";
+
+interface MarkdownParserProps {
+    children: string;
+    // allow HTML as partial content, otherwise escape HTML tags (pls use with caution)
+    allowHtml?: boolean;
+    // return an object that only contains simple text without any HTML
+    removeMarkup?: boolean;
+    // If defined, only elements from this list will be rendered. This overwrites the removeMarkup parameter if both are set.
+    allowedElements?: string[];
+    // do not wrap it in a content block element
+    inheritBlock?: boolean;
+    /** Additional reHype plugins to execute.
+     * @see https://github.com/remarkjs/react-markdown#architecture
+     */
+    reHypePlugins?: PluggableList;
+}
+
+const configDefault = {
+    /*
+        Using React Markdown configuration
+        @see https://github.com/remarkjs/react-markdown#api
+    */
+    // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
+    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
+    // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
+    rehypePlugins: [] as PluggableList,
+    allowedElements: [
+        // default markdown
+        "a", "blockquote", "code", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "img", "li", "ol", "p", "pre", "strong", "ul",
+        // gfm (Github Flavoured Markdown) extensions
+        "del", "input", "table", "tbody", "td", "th", "thead", "tr",
+        // other stuff
+        "mark", "dl", "dt", "dd"
+    ],
+    // remove all unwanted HTML markup
+    unwrapDisallowed: true,
+    // show escaped HTML
+    skipHtml: false,
+}
+
+/** Renders a markdown string. */
+export const Markdown = ({
+                             children,
+                             allowHtml = false,
+                             removeMarkup = false,
+                             inheritBlock = false,
+                             allowedElements,
+                             reHypePlugins
+                         }: MarkdownParserProps) => {
+
+    const configHtml = allowHtml ? {
+        rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),
+        // switch from allowed list to disallowed list
+        allowedElements: undefined,
+        disallowedElements: [ "applet", "script", "style", "link", "iframe", "form", "button" ],
+    } : { };
+
+    const configTextOnly = removeMarkup ? {
+        skipHtml: true,
+        allowedElements: [],
+        disallowedElements: undefined,
+    } : { };
+
+    const reactMarkdownProperties = {
+        children: children.trim(),
+        ...configDefault,
+        ...configHtml,
+        ...configTextOnly,
+    };
+    allowedElements && (reactMarkdownProperties.allowedElements = allowedElements)
+    reHypePlugins && reHypePlugins.forEach(plugin => reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
+
+    return inheritBlock ? (
+        <ReactMarkdown {...reactMarkdownProperties} />
+    ) : (
+        <HtmlContentBlock>
+            <ReactMarkdown {...reactMarkdownProperties} />
+        </HtmlContentBlock>
+    );
+}

package/src/cmem/markdown/highlightSearchWords.test.ts

@@ -0,0 +1,36 @@
+import {VFile} from "vfile";
+import {Root, Parent, Element, Text} from "hast";
+import highlightSearchWordsPluginFactory from "./highlightSearchWords";
+
+describe("Highlight search words reHype plugin", () => {
+    it("should highlight search words", () => {
+        const searchQuery = "abc xyz"
+        const highlightSearchWordsPlugin = highlightSearchWordsPluginFactory(searchQuery)
+        const highlightSearchWordTransformer = highlightSearchWordsPlugin()
+        const textNode = (text: string): Text => ({type: "text", value: text})
+        const markNode = (text: string): Element => ({type: "element", tagName: "mark", children: [textNode(text)]})
+        const result = highlightSearchWordTransformer({
+                type: "root",
+                children: [
+                    {
+                        type: "element",
+                        tagName: "p",
+                        children: [textNode("Text with abc query words xyz.")]
+                    }
+                ]
+            },
+            new VFile(),
+            () => {
+            }
+        );
+        const rootChildren = (result as Root).children
+        expect(rootChildren.length).toBe(1)
+        expect((rootChildren[0] as Parent).children).toStrictEqual([
+            textNode("Text with "),
+            markNode("abc"),
+            textNode(" query words "),
+            markNode("xyz"),
+            textNode(".")
+        ])
+    })
+})

package/src/cmem/markdown/highlightSearchWords.ts

@@ -0,0 +1,67 @@
+import {Content, Parent, Root, Text} from "hast";
+import {Transformer} from "unified"
+import {Node} from "unist";
+import {createMultiWordRegex, extractSearchWords} from "../../components/Typography/Highlighter";
+
+/** Creates a react-markdown reHype plugin that marks text based on a multi-word search query. */
+export default function highlightSearchWordsPluginFactory(searchQuery: string | undefined) {
+    const searchStringParts = searchQuery ? extractSearchWords(searchQuery) : []
+    const multiWordRegex = createMultiWordRegex(searchStringParts);
+    const createTextNode = (text: string): Text => ({type: "text", value: text})
+
+    // Highlight a text node by returning an array of text and mark elements
+    const highlightTextNode = (textNode: Text): Content[] => {
+        if (searchStringParts.length === 0) {
+            return [textNode];
+        }
+        const result: Content[] = [];
+
+        const text = textNode.value
+        let offset = 0;
+        // loop through matches and add unmatched and matched parts to result array
+        let matchArray = multiWordRegex.exec(text);
+        while (matchArray !== null) {
+            result.push(createTextNode(text.slice(offset, matchArray.index)));
+            result.push({type: "element", tagName: "mark", children: [createTextNode(matchArray[0])]});
+            offset = multiWordRegex.lastIndex;
+            matchArray = multiWordRegex.exec(text);
+        }
+        // Add remaining unmatched string
+        result.push(createTextNode(text.slice(offset)));
+        return result;
+
+    }
+
+    // Upper level highlight function
+    const highlightRootNode = (node: Root): Root => highlightParentNode(node)
+
+    // Highlight function to be called on Parent nodes
+    const highlightParentNode = <T extends Parent>(parentNode: T): T => {
+        const newChildren: Content[] = [];
+        parentNode.children.forEach(child => {
+            const highlightedChild = highlightTextNodes(child)
+            if(Array.isArray(highlightedChild)) {
+                newChildren.push(...highlightedChild as Content[])
+            } else {
+                newChildren.push(highlightedChild as Content)
+            }
+        })
+        return {...parentNode, children: newChildren} as T
+    }
+
+    // Highlight function to be called on generic inner nodes
+    const highlightTextNodes = (node: Node): Node | Node[] => {
+        if(node.type === "text") {
+            return highlightTextNode(node as Text)
+        } else {
+            if((node as Parent).children) {
+                return highlightParentNode(node as Parent)
+            } else {
+                return node
+            }
+        }
+    }
+    return function highlightSearchWords(): Transformer<Root, Root> {
+        return (input: Root) => highlightRootNode(input)
+    }
+}

package/src/cmem/markdown/markdown.scss

@@ -0,0 +1,32 @@
+.footnote-ref {
+    &::before {
+        content: "[";
+    }
+    &::after {
+        content: "]";
+    }
+
+    vertical-align: super;
+    font-size: $eccgui-size-typo-caption;
+    margin-left: $eccgui-size-inline-whitespace / 2;
+}
+
+.footnote-back {
+    &::before {
+        content: "[";
+    }
+    &::after {
+        content: "]";
+    }
+
+    margin-left: $eccgui-size-inline-whitespace;
+}
+
+
+.task-list-item {
+    list-style: none;
+
+    input:first-child {
+        margin-left: $eccgui-size-block-whitespace * -2;
+    }
+}

package/src/common/Intent/index.ts

@@ -0,0 +1,23 @@
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export const Definitions: { [key: string]: string; } = {
+    PRIMARY: "primary" as "primary",
+    ACCENT: "accent" as "accent",
+    NEUTRAL: "neutral" as "neutral",
+    SUCCESS: "success" as "success",
+    INFO: "info" as "info",
+    WARNING: "warning" as "warning",
+    DANGER: "danger" as "danger",
+}
+
+const classNamesCreation = () => {
+    const intentClasses = {...Definitions};
+    for (let intentDefinition in Definitions) {
+        intentClasses[intentDefinition] = `${eccgui}-intent--${Definitions[intentDefinition]}`;
+    }
+    return intentClasses;
+}
+
+export const ClassNames = classNamesCreation();
+
+export type IntentTypes = typeof Definitions[keyof typeof Definitions];

package/src/common/utils/openInNewTab.ts

@@ -0,0 +1,17 @@
+/** Wrapper for an onClick handler on link-like components, i.e. that navigate to a different URL on click.
+ * Opens a link (url) in a new tab when CMD or CTRL key is pressed at click time. */
+export const openInNewTab = (
+    event: React.MouseEvent<HTMLElement>,
+    handler?: (e: React.MouseEvent<HTMLElement>) => void,
+    url?: string
+) => {
+  //if ctrl key or cmd key bypass click handler and delegation open in the background new tab
+  if (url && (event.ctrlKey || event.metaKey)) {
+    event.preventDefault();
+    event.nativeEvent.stopImmediatePropagation();
+    event.stopPropagation();
+    window.open(url, "_blank");
+  } else if(handler) {
+    handler(event);
+  }
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import {Accordion as CarbonAccordion} from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function Accordion({ children, className = "", align = "start", ...otherProps }: any) {
+    return (
+        <CarbonAccordion className={`${eccgui}-accordion__container ` + className} align={align} {...otherProps}>
+            {children}
+        </CarbonAccordion>
+    );
+}
+
+export default Accordion;

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import {AccordionItem as CarbonAccordionItem} from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface AccordionItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /*
+        additional user class name
+    */
+    className?: string;
+    /*
+        content of accordion item
+    */
+    children: string | JSX.Element | JSX.Element[];
+    /*
+        disable accordion item
+    */
+    disabled?: boolean;
+    /*
+        set accordion item expliciteky as open when displayed first
+    */
+    open?: boolean;
+    /*
+        header of accordion item
+    */
+    label: string | JSX.Element;
+    /*
+        use full available width for content
+    */
+    fullWidth?: boolean;
+    /*
+        minimize white space and paddings
+    */
+    condensed?: boolean;
+    /*
+        do not use borders as visible separations on accordion item
+    */
+    noBorder?: boolean;
+    /*
+        highlight accordion item by different background color
+    */
+    elevated?: boolean;
+    title?: never;
+};
+
+function AccordionItem({
+    children,
+    label,
+    className = "",
+    fullWidth = false,
+    elevated = false,
+    condensed = false,
+    noBorder = false,
+    ...otherProps
+}: AccordionItemProps) {
+    return (
+        <CarbonAccordionItem
+            className={
+                `${eccgui}-accordion__item` +
+                (!!className ? " " + className : "") +
+                (fullWidth ? ` ${eccgui}-accordion__item--fullwidth` : "") +
+                (elevated ? ` ${eccgui}-accordion__item--elevated` : "") +
+                (condensed ? ` ${eccgui}-accordion__item--condensed` : "") +
+                (noBorder ? ` ${eccgui}-accordion__item--noborder` : "")
+            }
+            title={label}
+            {...otherProps}
+        >
+            {children}
+        </CarbonAccordionItem>
+    );
+}
+
+export default AccordionItem;