@eccenca/gui-elements 6.2.0 → 22.0.0-rc.7

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;

package/src/components/Accordion/accordion.scss

@@ -0,0 +1,96 @@
+// lib import
+@import "~carbon-components/scss/components/accordion/accordion";
+
+// changes
+
+
+.#{$prefix}--accordion__heading {
+    min-height: mini-units(5);
+    align-items: center;
+    color: inherit;
+
+    .#{$prefix}--accordion__arrow {
+        margin: 0 $eccgui-size-block-whitespace / 2 0 0;
+
+        .#{$prefix}--accordion--start & {
+            margin: 0 0 0 $eccgui-size-block-whitespace / 2;
+        }
+    }
+}
+
+.#{$prefix}--accordion__title {
+    min-width: 0; // flex layout fix
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: 0 0 0 $eccgui-size-block-whitespace;
+
+    .#{$prefix}--accordion--start & {
+        margin: 0 0 0 $eccgui-size-block-whitespace / 2;
+    }
+}
+
+.#{$prefix}--accordion__content {
+    padding: $eccgui-size-block-whitespace / 2;
+    margin: 0 calc(1rem + #{$eccgui-size-block-whitespace / 2}) 0 $eccgui-size-block-whitespace / 2;
+
+    .#{$prefix}--accordion__item--active & {
+        padding: $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace $eccgui-size-block-whitespace / 2;
+    }
+
+    .#{$prefix}--accordion--start & {
+        margin: 0 $eccgui-size-block-whitespace / 2 0 calc(1rem + #{$eccgui-size-block-whitespace / 2});
+    }
+
+    .#{$eccgui}-accordion__item--fullwidth & {
+        margin: 0;
+    }
+
+    *, *::before, *::after {
+        box-sizing: revert;
+    }
+}
+
+.#{$eccgui}-accordion__item--elevated {
+    background-color: $data-table-zebra-color; //rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
+}
+
+.#{$eccgui}-accordion__item--noborder {
+    border-top: none;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.#{$eccgui}-accordion__item--condensed {
+    .#{$prefix}--accordion__heading {
+        min-height: 0;
+        line-height: 1em;
+        padding: 0;
+
+        .#{$prefix}--accordion__arrow {
+            margin: 0;
+
+            .#{$prefix}--accordion--start & {
+                margin: 0;
+            }
+        }
+
+        .#{$prefix}--accordion__title {
+            margin: 0 0 0 $eccgui-size-block-whitespace / 4;
+
+            .#{$prefix}--accordion--start & {
+                margin: 0 0 0 $eccgui-size-block-whitespace / 4;
+            }
+        }
+    }
+
+    .#{$prefix}--accordion__content {
+        padding: $eccgui-size-block-whitespace / 4 0;
+
+        .#{$prefix}--accordion__item--active & {
+            padding: $eccgui-size-block-whitespace / 4 0;
+        }
+    }
+}

package/src/components/Application/ApplicationContainer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+
+function ApplicationContainer({
+    children,
+    className = "",
+    ...otherProps
+}: ApplicationContainerProps) {
+
+    return (
+        <div className={`${eccgui}-application__container ${className}`} {...otherProps}>
+            { children }
+        </div>
+    )
+}
+
+export default ApplicationContainer;

package/src/components/Application/ApplicationContent.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Content as CarbonContent } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface IApplicationContentProps {
+    // original properties from Carbon
+    children: React.ReactNode;
+    /**
+        addional class name
+    */
+    className?: string;
+
+    // our extensions
+    /**
+        is the sidebar navigation currently displayed or not
+    */
+    isApplicationSidebarExpanded?: boolean;
+    /**
+        is the rail version of the sidebar used or not
+    */
+    isApplicationSidebarRail?: boolean;
+    /**
+        native attributes for the <main> HTML element
+    */
+    htmlMainProps?: React.HTMLAttributes<HTMLElement>;
+}
+
+function ApplicationContent({
+    children,
+    isApplicationSidebarExpanded = false,
+    isApplicationSidebarRail = false,
+    htmlMainProps,
+    /*
+        TODO: type definitions do not include data attributes because of their infinite number of possible names, so we
+        need to solve this by filtering out all other props, or create a stack of allowed data attributes or using
+        a combined process of dynamic keys and template mappings in typescript
+    */
+    ...otherPropsShouldOnlyBeUsedForDataAttributes
+}: IApplicationContentProps) {
+
+    let addSidebarMargin = "";
+    if (isApplicationSidebarExpanded) { addSidebarMargin = `${eccgui}-application__content--withsidebar`; }
+    if (isApplicationSidebarRail) { addSidebarMargin = `${eccgui}-application__content--railsidebar`; }
+
+    return (
+        <CarbonContent
+            {...otherPropsShouldOnlyBeUsedForDataAttributes}
+            {...htmlMainProps}
+            className={`${eccgui}-application__content ${addSidebarMargin}`}
+            tagName={"main"}
+        >
+            { children }
+        </CarbonContent>
+    )
+}
+
+export default ApplicationContent;

package/src/components/Application/ApplicationHeader.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { Header as CarbonHeader } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function ApplicationHeader({ children, ...restProps }: any) {
+    return (
+        <CarbonHeader {...restProps} className={`${eccgui}-application__header`}>
+            { children }
+        </CarbonHeader>
+    )
+}
+
+export default ApplicationHeader;

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { SideNav as CarbonSideNav } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface IApplicationSidebarNavigationProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    expanded?: boolean;
+    isRail?: boolean;
+    // do not allow these properties
+    defaultExpanded?: never;
+    isPersistent?: never;
+    isFixedNav?: never;
+    isChildOfHeader?: never;
+}
+
+function ApplicationSidebarNavigation({
+    children,
+    className,
+    ...otherProps
+}: IApplicationSidebarNavigationProps) {
+
+    const additionalClassName = className ? className : "";
+
+    return (
+        <CarbonSideNav
+            className={`${eccgui}-application__menu__sidebar ${additionalClassName}`}
+            {...otherProps}
+            aria-label={"sidebar"}
+            defaultExpanded={false}
+            isPersistent={false}
+            isFixedNav={true}
+            isChildOfHeader={true}
+        >
+            {children}
+        </CarbonSideNav>
+    )
+}
+
+export default ApplicationSidebarNavigation;

package/src/components/Application/ApplicationSidebarToggler.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { HeaderMenuButton as CarbonHeaderMenuButton } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function ApplicationSidebarToggler({ ...restProps }: any) {
+    return (
+        <CarbonHeaderMenuButton
+            className={`${eccgui}-application__menu__toggler`}
+            {...restProps}
+            isCollapsible={true}
+        />
+    )
+}
+
+export default ApplicationSidebarToggler;