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

package/src/components/Dialog/Modal.tsx

@@ -0,0 +1,86 @@
+/*
+    we only use Dialog as pre-configured and enhanced Overlay, it is
+    recommended to use Card elements inside.
+*/
+
+import React from 'react';
+import {Classes as BlueprintClassNames, OverlayProps, Overlay as BlueprintOverlay,} from "@blueprintjs/core";
+import {Card} from "./../Card";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import { IOverlayState } from '@blueprintjs/core';
+
+export interface ModalProps extends OverlayProps, IOverlayState {
+  children: React.ReactNode | React.ReactNode[];
+  /**
+   * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
+   */
+  overlayClassName?: string;
+  /**
+   * Size of the modal.
+   */
+  size?: "tiny" | "small" | "regular" | "large" | "fullscreen";
+  /**
+   * Prevents that a backdrop area is displayed behind the modal elements.
+   */
+  preventBackdrop?: boolean;
+}
+
+/**
+ * Displays contents on top of other elements, used to create dialogs.
+ * This element can be used to create own modal elements and edge cases for modal dialogs.
+ * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ */
+function Modal({
+    children,
+    className='',
+    overlayClassName='',
+    size="regular",
+    canOutsideClickClose=false,
+    canEscapeKeyClose=false,
+    preventBackdrop=false,
+    ...otherProps
+}: ModalProps) {
+
+    const alteredChildren = React.Children.map(children, (child, index) => {
+        if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {
+            return React.cloneElement(
+                child as React.ReactElement,
+                {
+                    isOnlyLayout: true,
+                    elevation: 4
+                }
+            );
+        }
+
+        return child;
+    });
+
+    return (
+        <BlueprintOverlay
+            {...otherProps}
+            className={overlayClassName}
+            backdropClassName={`${eccgui}-dialog__backdrop`}
+            canOutsideClickClose={canOutsideClickClose}
+            canEscapeKeyClose={canEscapeKeyClose}
+            hasBackdrop={!preventBackdrop}
+        >
+            <div
+                className={BlueprintClassNames.DIALOG_CONTAINER}
+                // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
+                data-test-id={(otherProps as any)["data-test-id"] ?? "simpleDialogWidget"}
+            >
+                <section
+                    className={
+                        `${eccgui}-dialog__wrapper` +
+                        (typeof size === 'string' ? ` ${eccgui}-dialog__wrapper--` + size : '') +
+                        (className ? ' ' + className : '')
+                    }
+                >
+                    {alteredChildren}
+                </section>
+            </div>
+        </BlueprintOverlay>
+    );
+}
+
+export default Modal;

package/src/components/Dialog/SimpleDialog.tsx

@@ -0,0 +1,113 @@
+/*
+    provides a simple interface for dialogs using modals with a card inside
+*/
+
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { IntentTypes } from "../../common/Intent";
+import {
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    CardOptions,
+    CardTitle,
+} from "./../Card";
+import Divider from "./../Separation/Divider";
+import Modal, { ModalProps } from "./Modal";
+import {TestableComponent} from "../interfaces";
+
+export interface SimpleDialogProps extends ModalProps, TestableComponent {
+    /**
+     * The title of the dialog.
+     */
+    title?: string;
+    /**
+     * Parts of the dialog are separated by a horizontal ruler.
+     */
+    hasBorder?: boolean;
+    /**
+     * Include elements to the action footer, e.g. buttons.
+     */
+    actions?: React.ReactNode | React.ReactNode[];
+    /**
+     * If populated with elements, then a second contant area is included before the action footer.
+     * Mainly provided to include `Notification` elements.
+     */
+    notifications?: React.ReactNode | React.ReactNode[];
+    /**
+     * Can contain elements actionable/non-actionable elements display right-aligned to the dialog title.
+     */
+    headerOptions?: null | JSX.Element | JSX.Element[];
+    /**
+     * If enabled neither closing via `esc` key or clicking outside of the component will work, except explicitly specified.
+     */
+    preventSimpleClosing?: boolean;
+    /**
+     * Define purpose of the dialog, e.g. if it is a warning.
+     */
+    intent?: IntentTypes;
+}
+
+/**
+ * Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.
+ * Inherits all properties from `Modal`.
+ */
+function SimpleDialog({
+    children,
+    canOutsideClickClose = false,
+    canEscapeKeyClose = false,
+    title = "",
+    actions = null,
+    notifications = null,
+    hasBorder = false,
+    preventSimpleClosing = false,
+    intent,
+    headerOptions,
+    ...otherProps
+}: SimpleDialogProps) {
+    const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";
+    return (
+        <Modal
+            {...otherProps}
+            // set default test id if not given
+            data-test-id={otherProps["data-test-id"] ?? "simpleDialogWidget"}
+            canOutsideClickClose={canOutsideClickClose || !preventSimpleClosing}
+            canEscapeKeyClose={canEscapeKeyClose || !preventSimpleClosing}
+        >
+            <Card className={intentClassName}
+            >
+                {(title || headerOptions) && (
+                    <CardHeader>
+                        <CardTitle
+                            className={intentClassName}
+                        >
+                            {title}
+                        </CardTitle>
+                        {headerOptions && (
+                            <CardOptions>{headerOptions}</CardOptions>
+                        )}
+                    </CardHeader>
+                )}
+                {hasBorder && <Divider />}
+                <CardContent>{children}</CardContent>
+                {hasBorder && <Divider />}
+                {!!notifications && (
+                    <CardContent className={`${eccgui}-dialog__notifications`}>
+                        {notifications}
+                    </CardContent>
+                )}
+                {actions && (
+                    <CardActions
+                        inverseDirection
+                        className={intentClassName}
+                    >
+                        {actions}
+                    </CardActions>
+                )}
+            </Card>
+        </Modal>
+    );
+}
+
+export default SimpleDialog;

package/src/components/Dialog/dialog.scss

@@ -0,0 +1,75 @@
+// our vars
+$eccgui-size-modal-tiny-width: 4/16 * 100vw !default;
+$eccgui-size-modal-tiny-height: 1/9 * 100vh !default;
+$eccgui-size-modal-small-width: 6/16 * 100vw !default;
+$eccgui-size-modal-small-height: 2/9 * 100vh !default;
+$eccgui-size-modal-regular-width: 6/16 * 100vw !default;
+$eccgui-size-modal-regular-height: 3/9 * 100vh !default;
+$eccgui-size-modal-large-width: 8/16 * 100vw !default;
+$eccgui-size-modal-large-height: 6/9 * 100vh !default;
+$eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0.69) !default;
+
+@import "~@blueprintjs/core/src/components/dialog/dialog";
+
+.#{$eccgui}-dialog__backdrop {
+    background-color: $eccgui-color-modal-backdrop;
+}
+
+.#{$eccgui}-dialog__wrapper {
+    margin: 2rem;
+    max-width: calc(100vw - 4rem);
+    max-height: calc(100vh - 4rem);
+    pointer-events: all;
+    user-select: text;
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    align-content: stretch;
+
+    & > * {
+        flex-grow: 1;
+        flex-shrink: 1;
+        max-width: 100%;
+    }
+
+    & * {
+        pointer-events: all;
+    }
+}
+
+.#{$eccgui}-dialog__wrapper--tiny {
+    width: $eccgui-size-modal-tiny-width;
+    min-height: $eccgui-size-modal-tiny-height;
+}
+
+.#{$eccgui}-dialog__wrapper--small {
+    width: $eccgui-size-modal-small-width;
+    min-height: $eccgui-size-modal-small-height;
+}
+
+.#{$eccgui}-dialog__wrapper--regular {
+    width: $eccgui-size-modal-regular-width;
+    min-height: $eccgui-size-modal-regular-height;
+}
+
+.#{$eccgui}-dialog__wrapper--large {
+    width: $eccgui-size-modal-large-width;
+    min-height: $eccgui-size-modal-large-height;
+}
+
+.#{$eccgui}-dialog__wrapper--fullscreen {
+    margin: 0;
+    padding: $eccgui-size-block-whitespace;
+    box-sizing: border-box;
+    height: 100vh;
+    width: 100vw;
+    max-height: 100vh;
+    max-width: 100vw;
+}
+
+.#{$eccgui}-dialog__notifications {
+    &.#{$eccgui}-card__content {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+}

package/src/components/Dialog/stories/AlertDialog.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import AlertDialog from "./../AlertDialog";
+import { Default as SimpleDialogExample } from "./SimpleDialog.stories";
+
+export default {
+    title: "Components/Dialog/AlertDialog",
+    component: AlertDialog,
+    argTypes: {
+        headerOptions: { table: { disable: true }},
+        children: { table: { disable: true }},
+        actions: { table: { disable: true }},
+        hasBorder: { table: { disable: true }},
+        isOpen: { table: { disable: true }},
+        usePortal: { table: { disable: true }},
+        notifications: { table: { disable: true }},
+        preventSimpleClosing	: { table: { disable: true }},
+        intent: { table: { disable: true }},
+        overlayClassName: { table: { disable: true }},
+        preventBackdrop: { table: { disable: true }},
+    },
+} as ComponentMeta<typeof AlertDialog>;
+
+const Template: ComponentStory<typeof AlertDialog> = (args) => (
+    <div style={{height: "400px"}}>
+        <AlertDialog {...args} />
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    ...SimpleDialogExample.args,
+    title: "AlertDialog example title",
+    size: "small",
+    hasBorder: false,
+    headerOptions: [],
+    actions: SimpleDialogExample.args.actions.slice(0, 2),
+    success: false,
+    warning: true,
+    danger: false,
+};

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Modal from "./../Modal";
+import Card from "../../Card/Card";
+import { SimpleCard } from "../../Card/stories/Card.stories";
+
+export default {
+    title: "Components/Dialog/Modal",
+    component: Modal,
+    argTypes: {
+        autoFocus: {
+            description: "Modal acquires application focus when it first opens.",
+            control: "boolean",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            }
+        },
+        canEscapeKeyClose: {
+            description: "Pressing the `esc` key triggers `onClose` handler.",
+            control: "boolean",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            }
+        },
+        canOutsideClickClose: {
+            description: "Clicking outside the modal triggers `onClose` handler.",
+            control: "boolean",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            }
+        },
+        enforceFocus: {
+            description: "Prevent focus from leaving modal element. If an element outside the modal is focused then the modal will immediately bring focus back to itself. If you are nesting modal components, either disable this prop on the outermost modal or mark the nested ones `usePortal={false}`.",
+            control: "boolean",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            }
+        },
+        isOpen: {
+            description: "Toggles the visibility of the overlay and its children, this prop is required because the component is controlled",
+        },
+        onClose: {
+            description: "A callback that is invoked when user interaction causes the modal to close.",
+            table: {
+                type: { summary: "(event: SyntheticEvent<HTMLElement>) => void" },
+                defaultValue: { summary: undefined },
+            }
+        },
+        shouldReturnFocusOnClose: {
+            description: "Return focus to the last active element in the document after modal closes.",
+            control: "boolean",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            }
+        },
+        usePortal: {
+            description: "Whether the modal should be wrapped in a Portal, which renders its contents in a new element attached to `portalContainer` prop, by default to `document.body`.",
+            control: "boolean",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            }
+        },
+        children: {
+            control: "none",
+            description: "Elements to include into the modal container."
+        }
+    },
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = (args) => (
+    <div style={{height: "400px"}}>
+        <Modal {...args} />
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    isOpen: true,
+    usePortal: false,
+    children: <Card {...SimpleCard.args} />
+};

package/src/components/Dialog/stories/SimpleDialog.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import SimpleDialog from "./../SimpleDialog";
+import storyModal from "./Modal.stories";
+import { Default as CardContentExample } from "./../../Card/stories/CardContent.stories";
+import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";
+import { Default as CardOptionExample } from "./../../Card/stories/CardOptions.stories";
+
+export default {
+    title: "Components/Dialog/SimpleDialog",
+    component: SimpleDialog,
+    argTypes: {
+        ...storyModal.argTypes,
+        headerOptions: {
+            control: "none",
+        },
+        actions: {
+            control: "none",
+        }
+    },
+} as ComponentMeta<typeof SimpleDialog>;
+
+const Template: ComponentStory<typeof SimpleDialog> = (args) => (
+    <div style={{height: "400px"}}>
+        <SimpleDialog {...args} />
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    title: "SimpleDialog example title",
+    headerOptions: CardOptionExample.args.children,
+    children: CardContentExample.args.children,
+    actions: CardActionsExample.args.children,
+    hasBorder: true,
+    isOpen: true,
+    usePortal: false,
+};

package/src/components/Form/FieldItem.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import Label from "../Label/Label";
+import {ClassNames as IntentClassNames} from "../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {TestableComponent} from "../interfaces";
+
+/*
+    TODO:
+
+    * disabled stae could be automatically forwarded to inserted input element,
+      currently this need to be dome explicitely .
+    * input id could be forwarded to label and input element
+    * input id could be created when not given
+*/
+
+interface IProps extends TestableComponent {
+    hasStatePrimary?: boolean
+    hasStateSuccess?: boolean
+    hasStateWarning?: boolean
+    hasStateDanger?: boolean
+    children: JSX.Element | JSX.Element[] | null
+    className?: string
+    disabled?: boolean
+    labelAttributes?: object
+    helperText?: string | JSX.Element
+    messageText?: string
+}
+
+function FieldItem({
+    hasStatePrimary = false,
+    hasStateSuccess = false,
+    hasStateWarning = false,
+    hasStateDanger = false,
+    children,
+    className,
+    disabled,
+    labelAttributes = {},
+    helperText,
+    messageText,
+    ...otherProps
+}: IProps) {
+    let classIntent = "";
+    switch (true) {
+        case hasStatePrimary:
+            classIntent = " " + IntentClassNames.PRIMARY;
+            break;
+        case hasStateSuccess:
+            classIntent = " " + IntentClassNames.SUCCESS;
+            break;
+        case hasStateWarning:
+            classIntent = " " + IntentClassNames.WARNING;
+            break;
+        case hasStateDanger:
+            classIntent = " " + IntentClassNames.DANGER;
+            break;
+        default:
+            break;
+    }
+
+    const label = <Label {...labelAttributes} disabled={disabled} />;
+
+    const userhelp =
+        helperText &&
+        (typeof helperText === "string" ? (
+            <p className={`${eccgui}-fielditem__helpertext`}>{helperText}</p>
+        ) : (
+            <div className={`${eccgui}-fielditem__helpertext`}>{helperText}</div>
+        ));
+
+    const inputfields = children && <div className={`${eccgui}-fielditem__inputfields`}>{children}</div>;
+
+    const notification =
+        messageText &&
+        (typeof messageText === "string" ? (
+            <p className={`${eccgui}-fielditem__message` + classIntent}>{messageText}</p>
+        ) : (
+            <div className={`${eccgui}-fielditem__message` + classIntent}>{messageText}</div>
+        ));
+
+    return (
+        <div
+            data-test-id={otherProps["data-test-id"]}
+            className={
+                `${eccgui}-fielditem` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-fielditem--disabled` : "")
+            }
+        >
+            {label}
+            {userhelp}
+            {inputfields}
+            {notification}
+        </div>
+    );
+}
+
+export default FieldItem;

package/src/components/Form/FieldItemRow.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+/*
+    TODO:
+
+    * allow grow factors for children
+*/
+
+function FieldItemRow({ children, className, ...otherProps }: any) {
+    return <div className={`${eccgui}-fielditem__row` + (className ? " " + className : "")}>{children}</div>;
+}
+
+export default FieldItemRow;

package/src/components/Form/FieldSet.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {ClassNames as IntentClassNames} from "../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function FieldSet({
+    boxed = false,
+    children,
+    className,
+    hasStatePrimary = false,
+    hasStateSuccess = false,
+    hasStateWarning = false,
+    hasStateDanger = false,
+    helperText,
+    messageText,
+    title,
+    ...otherProps
+}: any) {
+    let classIntent = "";
+    switch (true) {
+        case hasStatePrimary:
+            classIntent = " " + IntentClassNames.PRIMARY;
+            break;
+        case hasStateSuccess:
+            classIntent = " " + IntentClassNames.SUCCESS;
+            break;
+        case hasStateWarning:
+            classIntent = " " + IntentClassNames.WARNING;
+            break;
+        case hasStateDanger:
+            classIntent = " " + IntentClassNames.DANGER;
+            break;
+        default:
+            break;
+    }
+
+    const userhelp =
+        helperText &&
+        (typeof helperText === "string" ? (
+            <p className={`${eccgui}-fieldset__helpertext`}>{helperText}</p>
+        ) : (
+            <div className={`${eccgui}-fieldset__helpertext`}>{helperText}</div>
+        ));
+
+    const notification =
+        messageText &&
+        (typeof messageText === "string" ? (
+            <p className={`${eccgui}-fieldset__message`}>{messageText}</p>
+        ) : (
+            <div className={`${eccgui}-fieldset__message`}>{messageText}</div>
+        ));
+
+    const fielditems = children && <div className={`${eccgui}-fieldset__fielditems`}>{children}</div>;
+
+    return (
+        <fieldset
+            className={
+                `${eccgui}-fieldset` +
+                (className ? " " + className : "") +
+                classIntent +
+                (boxed ? ` ${eccgui}-fieldset--boxed` : "")
+            }
+        >
+            {title && <legend>{title}</legend>}
+            {userhelp}
+            {notification}
+            {fielditems}
+        </fieldset>
+    );
+}
+
+export default FieldSet;