@eccenca/gui-elements 6.3.0 → 22.0.1

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,113 @@
+import React, {useEffect, useState} from "react";
+import {
+    Overlay as BlueprintOverlay,
+    OverlayProps as BlueprintOverlayProps,
+    Spinner as BlueprintSpinner,
+    SpinnerProps as BlueprintSpinnerProps
+} from "@blueprintjs/core";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+
+export type SpinnerPosition = "local" | "inline" | "global"
+export type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit"
+export type SpinnerStroke = "thin" | "medium" | "bold"
+type Intent = "inherit" | "primary" | "success" | "warning" | "danger"
+
+/** A spinner that is either displayed globally or locally. */
+export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<BlueprintSpinnerProps, "size">> {
+    // intent value or a valid css color definition
+    color?: Intent | string
+    className?: string
+    description?: string
+    position?: SpinnerPosition
+    size?: SpinnerSize
+    stroke?: SpinnerStroke
+    // Delay when to show the spinner in ms, default: 0
+    delay?: number
+}
+
+function Spinner({
+    className = "",
+    color = "inherit",
+    description = "Loading indicator", // currently unsupported (TODO)
+    position = "local",
+    size,
+    stroke,
+    delay = 0,
+    ...otherProps
+}: SpinnerProps) {
+    const [showSpinner, setShowSpinner] = useState<boolean>(!delay || delay <= 0);
+    useEffect(() => {
+        if(!showSpinner) {
+            const timeoutId = setTimeout(() => setShowSpinner(true), delay);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [showSpinner, delay]);
+    const availableIntent = ["primary", "success", "warning", "danger", "inherit"];
+    const internSizes = {
+        thin: 100,
+        medium: 50,
+        bold: 10
+    };
+
+    const spinnerElement = position === "inline" ? "span" : "div";
+    const spinnerColor = availableIntent.indexOf(color) < 0 ? color : null;
+    const spinnerIntent = availableIntent.indexOf(color) < 0 ? "usercolor" : color;
+
+    let spinnerSize;
+    let spinnerStroke;
+    switch (position) {
+        case "local":
+            spinnerSize = size ?? "medium";
+            spinnerStroke = stroke ?? "medium";
+            break;
+        case "global":
+            spinnerSize = size ?? "large";
+            spinnerStroke = stroke ?? "thin";
+            break;
+        case "inline":
+            spinnerSize = size ?? "inherit";
+            spinnerStroke = stroke ?? "bold";
+            break;
+        default:
+            spinnerSize = size ?? "medium";
+            spinnerStroke = stroke ?? "medium";
+    }
+
+    let spinner = (
+        <BlueprintSpinner
+            size={internSizes[spinnerStroke]}
+            tagName={spinnerElement}
+            className={
+                `${eccgui}-spinner` +
+                (className ? " " + className : "") +
+                ` ${eccgui}-spinner--intent-` +
+                spinnerIntent +
+                ` ${eccgui}-spinner--size-` +
+                spinnerSize
+            }
+            {...otherProps}
+        />
+    );
+
+    if (spinnerColor) {
+        spinner = <span style={{ color: spinnerColor }}>{spinner}</span>;
+    }
+
+    return position === "global" ? (
+        <BlueprintOverlay
+            {...otherProps}
+            className={`${eccgui}-spinner__overlay`}
+            backdropClassName={`${eccgui}-spinner__backdrop`}
+            canOutsideClickClose={false}
+            canEscapeKeyClose={false}
+            hasBackdrop={true}
+            isOpen={true}
+        >
+            {spinner}
+        </BlueprintOverlay>
+    ) : (
+        showSpinner ? spinner : null
+    );
+}
+
+export default Spinner;

package/src/components/Spinner/spinner.scss

@@ -0,0 +1,85 @@
+$eccgui-size-spinner-tiny: 16px !default;
+$eccgui-size-spinner-small: 32px !default;
+$eccgui-size-spinner-medium: 64px !default;
+$eccgui-size-spinner-large: 128px !default;
+$eccgui-size-spinner-xlarge: 256px !default;
+
+// lib import
+@import "~@blueprintjs/core/src/components/spinner/spinner";
+
+.#{$eccgui}-spinner {
+    overflow: hidden;
+    height: 100%;
+
+    .#{$ns}-spinner-head {
+        stroke: currentColor;
+    }
+    .#{$ns}-spinner-track {
+        stroke: rgba(#000, 0.1);
+    }
+}
+
+span.#{$eccgui}-spinner {
+    display: inline-flex;
+    vertical-align: text-top;
+}
+
+.#{$eccgui}-spinner--intent-inherit {
+    color: inherit;
+}
+
+.#{$eccgui}-spinner--intent-primary {
+    color: $eccgui-color-accent;
+}
+
+.#{$eccgui}-spinner--intent-success {
+    color: $eccgui-color-success-text;
+}
+
+.#{$eccgui}-spinner--intent-warning {
+    color: $eccgui-color-warning-text;
+}
+
+.#{$eccgui}-spinner--intent-danger {
+    color: $eccgui-color-danger-text;
+}
+
+.#{$eccgui}-spinner--size-tiny svg {
+    height: $eccgui-size-spinner-tiny;
+    width: $eccgui-size-spinner-tiny;
+}
+.#{$eccgui}-spinner--size-small svg {
+    height: $eccgui-size-spinner-small;
+    width: $eccgui-size-spinner-small;
+}
+.#{$eccgui}-spinner--size-medium svg {
+    height: $eccgui-size-spinner-medium;
+    width: $eccgui-size-spinner-medium;
+}
+.#{$eccgui}-spinner--size-large svg {
+    height: $eccgui-size-spinner-large;
+    width: $eccgui-size-spinner-large;
+}
+.#{$eccgui}-spinner--size-xlarge svg {
+    height: $eccgui-size-spinner-xlarge;
+    width: $eccgui-size-spinner-xlarge;
+}
+.#{$eccgui}-spinner--size-inherit svg {
+    height: 1em;
+    width: 1em;
+}
+
+.#{$eccgui}-spinner__overlay {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .#{$ns}-overlay-content {
+        outline: none;
+    }
+}
+
+.#{$eccgui}-spinner__backdrop {
+    background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
+}

package/src/components/Structure/Section.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function Section({ children, className = '', ...restProps }: any) {
+    return (
+        <section
+            {...restProps}
+            className={`${eccgui}-structure__section ` + className}
+        >
+            { children }
+        </section>
+    )
+}
+
+export default Section;

package/src/components/Structure/SectionHeader.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function SectionHeader({ children, className = '', ...restProps }: any) {
+    return (
+        <header
+            {...restProps}
+            className={`${eccgui}-structure__section__header `+className}
+        >
+            { children }
+        </header>
+    )
+}
+
+export default SectionHeader;

package/src/components/Structure/TitleMainsection.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function TitleMainsection ({
+    children,
+    className = '',
+    ...restProps
+}: any) {
+    let htmlElement = React.createElement('div');
+    const childrenArray = React.Children.toArray(children);
+
+    if (
+        childrenArray.length === 1 &&
+        typeof childrenArray[0] === 'string'
+    ) {
+        htmlElement = React.createElement('h2');
+    }
+
+    return (
+        <htmlElement.type
+            {...restProps}
+            className={`${eccgui}-structure__title-mainsection ` + className}
+        >
+            {children}
+        </htmlElement.type>
+    );
+}
+
+export default TitleMainsection;

package/src/components/Structure/TitlePage.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function TitlePage ({
+    children,
+    className = '',
+    ...restProps
+}: any) {
+    let htmlElement = React.createElement('div');
+    const childrenArray = React.Children.toArray(children);
+
+    if (
+        childrenArray.length === 1 &&
+        typeof childrenArray[0] === 'string'
+    ) {
+        htmlElement = React.createElement('h1');
+    }
+
+    return (
+        <htmlElement.type
+            {...restProps}
+            className={`${eccgui}-structure__title-page ` + className}
+        >
+            {children}
+        </htmlElement.type>
+    );
+}
+
+export default TitlePage;

package/src/components/Structure/TitleSubsection.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function TitleSubsection({ children, className = "", useHtmlElement, ...restProps }: any) {
+    const childrenArray = React.Children.toArray(children);
+    const defaultHtmlElement = childrenArray.length === 1 && typeof childrenArray[0] === "string" ? "h3" : "div";
+    const titleElement = useHtmlElement ? React.createElement(useHtmlElement) : React.createElement(defaultHtmlElement);
+
+    return (
+        <titleElement.type {...restProps} className={`${eccgui}-structure__title-subsection ` + className}>
+            {children}
+        </titleElement.type>
+    );
+}
+
+export default TitleSubsection;

package/src/components/Structure/_titles.scss

@@ -0,0 +1,56 @@
+$eccgui-size-typo-title-page: $eccgui-size-typo-title !default;
+$eccgui-size-typo-title-page-lineheight: $eccgui-size-typo-title-lineheight !default;
+$eccgui-font-weight-title-page: $eccgui-font-weight-bold !default;
+$eccgui-font-spacing-title-page: $eccgui-font-spacing-condensed !default;
+
+$eccgui-size-typo-title-mainsection: $eccgui-size-typo-title-page !default;
+$eccgui-size-typo-title-mainsection-lineheight: $eccgui-size-typo-title-page-lineheight !default;
+$eccgui-font-weight-title-mainsection: $eccgui-font-weight-regular !default;
+$eccgui-font-spacing-title-mainsection: $eccgui-font-spacing-regular !default;
+
+$eccgui-size-typo-title-subsection: $eccgui-size-typo-caption !default;
+$eccgui-size-typo-title-subsection-lineheight: $eccgui-size-typo-caption-lineheight !default;
+$eccgui-font-weight-title-subsection: $eccgui-font-weight-bold !default;
+$eccgui-font-spacing-title-subsection: $eccgui-font-spacing-wide !default;
+
+.#{$eccgui}-structure__title-page {
+    font-size: $eccgui-size-typo-title-page;
+    line-height: $eccgui-size-typo-title-page-lineheight;
+    font-weight: $eccgui-font-weight-title-page;
+    letter-spacing: $eccgui-font-spacing-title-page;
+
+    & > * {
+        font-size: inherit;
+        line-height: inherit;
+    }
+}
+
+.#{$eccgui}-structure__title-mainsection {
+    font-size: $eccgui-size-typo-title-mainsection;
+    line-height: $eccgui-size-typo-title-mainsection-lineheight;
+    font-weight: $eccgui-font-weight-title-mainsection;
+    letter-spacing: $eccgui-font-spacing-title-mainsection;
+
+    & > * {
+        font-size: inherit;
+        line-height: inherit;
+    }
+}
+
+.#{$eccgui}-structure__title-subsection {
+    font-size: $eccgui-size-typo-title-subsection;
+    line-height: $eccgui-size-typo-title-subsection-lineheight;
+    font-weight: $eccgui-font-weight-title-subsection;
+    text-transform: uppercase;
+    letter-spacing: $eccgui-font-spacing-title-subsection;
+
+    & > * {
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    .#{$prefix}--side-nav--rail & {
+        position: fixed;
+        left: -5000rem;
+    }
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+import { Switch as BlueprintSwitch } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function Switch({className, ...otherProps}:any) {
+    const handleChange = (e: any) => {
+        otherProps.onChange(e.target.checked)
+    };
+
+    return <BlueprintSwitch
+        className={`${eccgui}-switch`}
+        {...otherProps}
+        onChange={handleChange}
+    />
+}
+
+export default memo(Switch);

package/src/components/Switch/switch.scss

@@ -0,0 +1,4 @@
+/*
+    currently not used, we need to control switch layout in
+    ../Checkbox/checkbox.scss for now
+*/

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import {
+    Tabs as BlueprintTabs,
+    TabsProps as BlueprintTabsProbs,
+    Tab,
+    TabProps as BlueprintTabProbs,
+} from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Button from "../Button/Button";
+
+// new interface
+export interface TabProps extends BlueprintTabProbs {
+    // could be used for Icons, etc.
+    titlePrefix?: React.ReactNode;
+    // could be used for action  buttons, e.g. "close/remove tab"
+    titleSuffix?: React.ReactNode;
+    // prevent shrinking when too many tabs appear in the list
+    dontShrink?: boolean;
+    // display tab with larger styling
+    large?: boolean;
+    // display tabs with smaller styling
+    small?: boolean;
+}
+
+const createBlueprintTab = ({
+    titlePrefix,
+    title,
+    titleSuffix,
+    dontShrink=false,
+    large=false,
+    small=false,
+    ...otherBlueprintTabProperties
+}: TabProps) => {
+    const extraStyles = dontShrink ? { style: {flexShrink: 0} } : {};
+    return <Tab
+        key={otherBlueprintTabProperties.id}
+        title={(
+            <Button
+                //title={title}
+                minimal
+                tabIndex={-1}
+                text={title}
+                icon={<>{titlePrefix}</>}
+                rightIcon={<>{titleSuffix}</>}
+                small={small}
+                large={large}
+            />
+        )}
+        {...otherBlueprintTabProperties}
+        {...extraStyles}
+    />;
+}
+
+// deprecated interface
+export interface DeprecatedTabProps {
+    tabId: string;
+    tabTitle: React.ReactNode;
+    tabContent?: JSX.Element;
+    dontShrink?: boolean;
+}
+
+const createDeprecatedTab = ({
+    tabId,
+    tabTitle,
+    tabContent,
+    dontShrink=false
+}: DeprecatedTabProps) => {
+    const extraStyles = dontShrink ? { style: {flexShrink: 0} } : {};
+    return <Tab
+        key={tabId}
+        id={tabId}
+        title={tabTitle}
+        panel={tabContent}
+        {...extraStyles}
+    />;
+}
+
+interface TabsProps extends Omit<BlueprintTabsProbs, "vertical" | "onChange" | "large"> {
+    activeTab: string;
+    tabs: any[]; // DeprecatedTabProps[] | TabProps[];
+    onTabClick: ({props}: any) => void;
+    prefixTabNames?: string;
+    allowScrollbars?: boolean;
+}
+
+function Tabs(
+    {
+        activeTab,
+        tabs=[],
+        onTabClick,
+        prefixTabNames='tabBar',
+        className = "",
+        allowScrollbars,
+        ...restProps
+    }: TabsProps) {
+    return (
+        <BlueprintTabs
+            onChange={onTabClick}
+            selectedTabId={activeTab}
+            className={
+                className +
+                (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")
+            }
+            {...restProps}
+        >
+            {
+                tabs.map(tab => {
+                    return !!tab.id ? createBlueprintTab({
+                        className: `${prefixTabNames}-header-${tab.id}`,
+                        ...tab
+                    }) : createDeprecatedTab({
+                        className: `${prefixTabNames}-header-${tab.tabId}`,
+                        ...tab
+                    });
+                })
+            }
+        </BlueprintTabs>
+    );
+};
+
+export default Tabs;

package/src/components/Tabs/tabs.scss

@@ -0,0 +1,65 @@
+/*
+$tab-color-selected: $pt-link-color !default;
+$dark-tab-color-selected: $pt-dark-link-color !default;
+$tab-indicator-width: 3px !default;
+*/
+
+@import "~@blueprintjs/core/src/components/tabs/tabs";
+
+// our changes
+
+/**
+    TODO: Must be adjusted if we need support for vertical tabs.
+*/
+
+.#{$ns}-tab-list {
+    border-bottom: solid 1px $pt-divider-black;
+    max-width: 100%;
+    overflow: auto;
+    column-gap: $eccgui-size-block-whitespace / 4;
+
+    & > *:not(:last-child) {
+        margin-right: 0;
+    }
+}
+
+.#{$ns}-tab {
+    outline: none;
+    max-width: 50%;
+
+    .#{$ns}-tabs:not(.#{$eccgui}-tabs--scrollablelist) > .#{$ns}-tab-list > & {
+        flex-shrink: 1;
+        max-width: 33%;
+    }
+
+    & > .#{$ns}-button {
+        outline: none;
+        margin-bottom: $tab-indicator-width;
+        max-width: 15rem;
+        width: 100%;
+
+        .#{$ns}-button-text {
+            white-space: nowrap;
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            //min-width: 6em;
+        }
+
+        &::before, & > *:not(:last-child) {
+            margin-right: $eccgui-size-block-whitespace / 4;
+        }
+    }
+
+    &:focus > .#{$ns}-button {
+        @extend .#{$ns}-button:hover;
+    }
+
+}
+
+.#{$ns}-tab-indicator-wrapper {
+    //top: $tab-indicator-width;
+}
+
+.#{$ns}-tab-panel {
+    margin-top: $eccgui-size-block-whitespace;
+}

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Tag from "./Tag";
+import { helpersArgTypes } from "../../../.storybook/helpers";
+
+export default {
+    title: "Components/Tag",
+    component: Tag,
+    argTypes: {
+        icon: {
+            description: "Icon element to render before the children.",
+            ...helpersArgTypes.exampleIcon,
+        },
+        backgroundColor: {
+            control: "color",
+        },
+        minimal: {
+            description: "Whether this tag should use minimal (lighter) styles. **Important:** We use this internally as default, so you need to set it explicitely to `false` if necessary.",
+            control: "boolean",
+        },
+        onClick: {
+            description: "Callback invoked when the tag is clicked.",
+            ...helpersArgTypes.handlerOnClick,
+        },
+        onRemove: {
+            description: "Click handler for remove button. The remove button will only be rendered if this prop is defined.",
+            ...helpersArgTypes.handlerOnClick,
+        },
+        emphasized: { control: "none" },
+    },
+} as ComponentMeta<typeof Tag>;
+
+const Template: ComponentStory<typeof Tag> = (args) => (
+  <Tag {...args}>Tag label</Tag>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  small: false,
+};