@eccenca/gui-elements 24.4.1 → 25.0.0-rc.0

package/src/components/Chat/_chat.scss

@@ -0,0 +1,86 @@
+.#{$eccgui}-chat__content {
+    @extend .bp5-elevation-1;
+
+    position: relative;
+    z-index: 0;
+    min-height: $button-height;
+    padding: $eccgui-size-inline-whitespace;
+    overflow: auto;
+    background-color: var(--#{$eccgui}-chat__content-background);
+    border-radius: 3 * $pt-border-radius;
+}
+
+.#{$eccgui}-chat__content--display-free {
+    --#{$eccgui}-chat__content-background: transparent;
+
+    padding: 1px 0;
+    box-shadow: none;
+}
+
+.#{$eccgui}-chat__content--display-bubble {
+    margin-left: 0.75 * $eccgui-size-block-whitespace;
+
+    &.#{$eccgui}-chat__content--align-right {
+        margin-right: 0.75 * $eccgui-size-block-whitespace;
+        margin-left: none;
+    }
+}
+
+.#{$eccgui}-chat__content-wrapper {
+    --#{$eccgui}-chat__content-background: #{$light-gray5};
+    &:has(.#{$eccgui}-chat__content--display-bubble) {
+        position: relative;
+
+        &::before {
+            @extend .bp5-elevation-1;
+
+            position: absolute;
+            top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});
+            left: 0.25 * $eccgui-size-block-whitespace;
+            z-index: 1;
+            width: $eccgui-size-block-whitespace;
+            height: $eccgui-size-block-whitespace;
+            content: " ";
+            background-color: var(--#{$eccgui}-chat__content-background);
+            clip-path: polygon(-5px calc(100% + 5px), -5px -5px, calc(100% + 5px) calc(100% + 5px));
+            transform: rotate(45deg);
+        }
+    }
+    &:has(.#{$eccgui}-chat__content--display-bubble.#{$eccgui}-chat__content--align-right) {
+        &::before {
+            right: 0.25 * $eccgui-size-block-whitespace;
+            left: auto;
+            transform: rotate(225deg);
+        }
+    }
+}
+
+.#{$eccgui}-chat__content--limitheight {
+    max-height: 50vh;
+}
+
+.#{$eccgui}-chat__inputfield {
+    min-height: mini-units(9);
+    max-height: 39vh;
+    resize: none !important;
+}
+
+.#{$eccgui}-chat__area {
+    padding: 0.25rem;
+    background-color: $card-background-color;
+}
+
+.#{$eccgui}-chat__area-contentwidth {
+    width: 100%;
+    margin: 0 auto;
+
+    .#{$eccgui}-chat__area--small & {
+        max-width: 40rem;
+    }
+    .#{$eccgui}-chat__area--medium & {
+        max-width: 60rem;
+    }
+    .#{$eccgui}-chat__area--large & {
+        max-width: 80rem;
+    }
+}

package/src/components/Chat/index.ts

@@ -0,0 +1,4 @@
+export * from "./ChatArea";
+export * from "./ChatContent";
+export * from "./ChatContentCollapsed";
+export * from "./ChatField";

package/src/components/Chat/stories/ChatArea.stories.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import {
+    ChatArea,
+    ChatContent,
+    ChatContentCollapsed,
+    ChatField,
+    ContentGroup,
+    Spacing,
+    TitleSubsection,
+} from "../../../index";
+
+import { BasicExample as ContentGroupExample } from "./../../ContentGroup/ContentGroup.stories";
+import { Default as ShortChatBubble, LongChatBubble } from "./ChatContent.stories";
+import { Default as ChatFieldExample } from "./ChatField.stories";
+
+export default {
+    title: "Components/Chat/ChatArea",
+    component: ChatArea,
+    argTypes: {},
+} as Meta<typeof ChatArea>;
+
+let forceupdate = 0;
+const TemplateFull: StoryFn<typeof ChatArea> = (args) => (
+    <div style={args.useAbsoluteSpace ? { position: "relative", height: "75vh" } : undefined}>
+        <ChatArea {...args} key={forceupdate++} />
+    </div>
+);
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    chatField: <ChatField {...ChatFieldExample.args} />,
+    children: [
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContentCollapsed textReducerProps={{ maxNodes: 1 }}>
+            <ChatContent
+                avatar={undefined}
+                displayType="free"
+                statusLine={
+                    <>
+                        <strong>Bot</strong> right now
+                    </>
+                }
+            >
+                <TitleSubsection>Some technical content</TitleSubsection>
+                <Spacing size="small" />
+                <ContentGroup {...ContentGroupExample.args} style={{ marginRight: "2px" }} />
+            </ChatContent>
+        </ChatContentCollapsed>,
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContentCollapsed>
+            <ChatContent {...LongChatBubble.args} />
+        </ChatContentCollapsed>,
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContent {...ShortChatBubble.args} />,
+    ],
+    autoSpacingSize: "medium",
+    autoScrollTo: "last",
+    useAbsoluteSpace: true,
+};

package/src/components/Chat/stories/ChatContent.stories.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatContent, Depiction, HtmlContentBlock, Icon, OverflowText } from "../../../index";
+
+import canonicalIcons from "./../../Icon/canonicalIconNames";
+
+const allIcons = new Map([
+    ...Object.keys(canonicalIcons).map((keyId) => {
+        return [`Icon: ${keyId}`, <Depiction image={<Icon name={keyId} />} />];
+    }),
+]);
+
+const exampleImages = {
+    None: undefined,
+    ...Object.fromEntries(allIcons),
+};
+
+export default {
+    title: "Components/Chat/ChatContent",
+    component: ChatContent,
+    argTypes: {
+        avatar: {
+            control: "select",
+            options: Object.keys(exampleImages),
+            mapping: exampleImages,
+        },
+    },
+} as Meta<typeof ChatContent>;
+
+let update = 0;
+const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...args} key={update++} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={5} random={false} />
+        </HtmlContentBlock>
+    ),
+    avatar: <Depiction image={<Icon name={"application-useraccount"} />} />,
+    statusLine: (
+        <OverflowText>
+            <strong>Username</strong> 25 minutes ago
+        </OverflowText>
+    ),
+};
+
+export const LongChatBubble = TemplateFull.bind({});
+LongChatBubble.args = {
+    ...Default.args,
+    avatar: undefined,
+    displayType: "simple",
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={7} avgSentencesPerParagraph={7} random={false} />
+        </HtmlContentBlock>
+    ),
+    limitHeight: true,
+};

package/src/components/Chat/stories/ChatContentCollapsed.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatContent, ChatContentCollapsed } from "../../../index";
+
+import { LongChatBubble } from "./ChatContent.stories";
+
+export default {
+    title: "Components/Chat/ChatContentCollapsed",
+    component: ChatContentCollapsed,
+    argTypes: {},
+} as Meta<typeof ChatContentCollapsed>;
+
+let update = 0;
+const TemplateFull: StoryFn<typeof ChatContentCollapsed> = (args) => (
+    <div key={update++}>
+        <ChatContentCollapsed {...args} />
+    </div>
+);
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: <ChatContent {...LongChatBubble.args} />,
+};

package/src/components/Chat/stories/ChatField.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatField, ContextMenu, MenuItem } from "../../../index";
+
+export default {
+    title: "Components/Chat/ChatField",
+    component: ChatField,
+    argTypes: {},
+} as Meta<typeof ChatField>;
+
+let forceupdate = 0;
+const TemplateFull: StoryFn<typeof ChatField> = (args) => <ChatField {...args} key={forceupdate++} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    onTextSubmit: (value) => alert(value),
+    rightElement: (
+        <ContextMenu>
+            <MenuItem text="Just a test" />
+        </ContextMenu>
+    ),
+};

package/src/components/Checkbox/checkbox.scss

@@ -24,9 +24,9 @@ $control-indicator-spacing: $eccgui-size-inline-whitespace !default;
 // $switch-background-color-active: rgba($gray1, 0.5) !default;
 // $switch-background-color-disabled: $button-background-color-disabled !default;
 $switch-checked-background-color: $eccgui-color-accent !default;
-$switch-checked-background-color-hover: rgba($switch-checked-background-color, $eccgui-opacity-narrow) !default;
+$switch-checked-background-color-hover: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-narrow) !default;
 $switch-checked-background-color-active: $switch-checked-background-color-hover !default;
-$switch-checked-background-color-disabled: rgba($switch-checked-background-color, $eccgui-opacity-disabled) !default;
+$switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-disabled) !default;
 
 @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 

package/src/components/CodeAutocompleteField/index.ts

@@ -1 +1,8 @@
-export * from "./CodeAutocompleteField";
+import { AutoSuggestionList, AutoSuggestionListProps } from "./../AutoSuggestion/AutoSuggestionList";
+import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "./../AutoSuggestion/ExtendedCodeEditor";
+
+export * from "./../AutoSuggestion/AutoSuggestion";
+
+export { AutoSuggestionList, ExtendedCodeEditor };
+
+export type { AutoSuggestionListProps, ExtendedCodeEditorProps };

package/src/components/ContentGroup/ContentGroup.tsx

@@ -189,7 +189,7 @@ export const ContentGroup = ({
                                 </div>
                             </ToolbarSection>
                         )}
-                    {!isCollapsed && handlerToggleCollapse && actionOptions && (
+                    {(!isCollapsed || !handlerToggleCollapse) && actionOptions && (
                         <ToolbarSection className={`${eccgui}-contentgroup__header__options`}>
                             <Spacing vertical size="small" />
                             {actionOptions}

package/src/components/ContentGroup/_contentgroup.scss

@@ -1,5 +1,11 @@
-$eccgui-color-scontentgroup-border-main: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted) !default;
-$eccgui-color-scontentgroup-border-sub: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled) !default;
+$eccgui-color-scontentgroup-border-main: eccgui-color-rgba(
+    $eccgui-color-workspace-text,
+    $eccgui-opacity-muted
+) !default;
+$eccgui-color-scontentgroup-border-sub: eccgui-color-rgba(
+    $eccgui-color-workspace-text,
+    $eccgui-opacity-disabled
+) !default;
 
 .#{$eccgui}-contentgroup {
     --#{$eccgui}-color-contentgroup-border-main: #{$eccgui-color-scontentgroup-border-main};

package/src/components/Dialog/Modal.tsx

@@ -5,11 +5,13 @@ import {
     Overlay2Props as BlueprintOverlayProps,
 } from "@blueprintjs/core";
 
+import { preventReactFlowActionsClasses } from "../../cmem";
 import { utils } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
+import { ModalContext } from "./ModalContext";
 
 export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     children: React.ReactNode | React.ReactNode[];
@@ -20,7 +22,7 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     /**
      * Size of the modal.
      */
-    size?: "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+    size?: ModalSize;
     /**
      * Prevents that a backdrop area is displayed behind the modal elements.
      */
@@ -42,8 +44,18 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
      * If this option is used inflationary then this could harm the visibility of other overlays.
      */
     forceTopPosition?: boolean;
+    /**
+     * Modal ID that should be globally unique. If a ModalContext is provided this can be used to track opening/closing of this modal.
+     */
+    modalId?: string;
+    /**
+     * Prevents that pan and zooming actions of an existing react-flow instance are triggered while this Modal is open.
+     */
+    preventReactFlowEvents?: boolean;
 }
 
+export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+
 /**
  * Displays contents on top of other elements, used to create dialogs.
  * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
@@ -65,8 +77,24 @@ export const Modal = ({
     onOpening,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
+    modalId,
+    preventReactFlowEvents = true,
     ...otherProps
 }: ModalProps) => {
+    const modalContext = React.useContext(ModalContext)
+    const uniqueModalId = React.useRef<string>(modalId ?? Date.now().toString(36) + Math.random().toString(36).substring(2))
+
+    React.useEffect(() => {
+        return () => {
+            // Make sure to always remove flag when modal is removed
+            modalContext.setModalOpen(uniqueModalId.current, false)
+        }
+    }, [])
+
+    React.useEffect(() => {
+        modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen)
+    }, [otherProps.isOpen])
+
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
         !canOutsideClickClose && canEscapeKeyClose
             ? {
@@ -114,7 +142,7 @@ export const Modal = ({
         <BlueprintOverlay
             {...otherProps}
             backdropProps={backdropProps}
-            className={overlayClassName}
+            className={`${overlayClassName} ${preventReactFlowEvents ? preventReactFlowActionsClasses : ""}`}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}

package/src/components/Dialog/ModalContext.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+export interface ModalContextProps {
+    /** Set that a specific modal is currently being open (or closed) */
+    setModalOpen: (modalId: string, isOpen: boolean) => void;
+
+    /** The currently opened modals ordered by when they have been opened. Oldest coming first. */
+    openModalStack: string[] | undefined;
+}
+
+/** Can be provided in the application to react to modal related changes. */
+export const ModalContext = React.createContext<ModalContextProps>({
+    setModalOpen: () => {},
+    openModalStack: [],
+});
+
+/** Default implementation for modal context props.
+ * Tracks open modals in a stack representation.
+ **/
+export const useModalContext = (): ModalContextProps => {
+    // A stack of modal IDs. These should reflect a stacked opening of modals on top of each other.
+    const [openModalStack, setOpenModalStack] = React.useState<string[]>([]);
+
+    const setModalOpen = React.useCallback((modalId: string, isOpen: boolean) => {
+        setOpenModalStack((old) => {
+            if (isOpen) {
+                return [...old, modalId];
+            } else {
+                const idx = old.findIndex((id) => modalId === id);
+                switch (idx) {
+                    case -1:
+                        // Trying to close modal that has not been registered as open!
+                        return old;
+                    case old.length - 1:
+                        return old.slice(0, idx);
+                    default:
+                        // Modal in between is closed. Consider all modals after it also as closed.
+                        return old.slice(0, idx);
+                }
+            }
+        });
+    }, []);
+
+    return {
+        openModalStack: openModalStack.length ? [...openModalStack] : undefined,
+        setModalOpen,
+    };
+};

package/src/components/Dialog/SimpleDialog.tsx

@@ -136,7 +136,8 @@ export const modalPreventEvents = {
     onDrag: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onDragStart: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onDragEnd: (event: BaseSyntheticEvent) => event.stopPropagation(),
-    onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
+    // The following prevents some drop-downs to not close anymore when clicking outside of them
+    // onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onMouseUp: (event: BaseSyntheticEvent) => event.stopPropagation(),
     onClick: (event: BaseSyntheticEvent) => event.stopPropagation(),
 };

package/src/components/Dialog/dialog.scss

@@ -11,7 +11,10 @@ $eccgui-size-modal-large-width: math.div(9, 16) * 100vw !default;
 $eccgui-size-modal-large-height: math.div(6, 9) * 100vh !default;
 $eccgui-size-modal-xlarge-width: math.div(12, 16) * 100vw !default;
 $eccgui-size-modal-xlarge-height: math.div(7, 9) * 100vh !default;
-$eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0.69) !default;
+$eccgui-color-modal-backdrop: eccgui-color-rgba(
+    eccgui-color-var("identity", "background", "900"),
+    $eccgui-opacity-muted
+) !default;
 
 @import "~@blueprintjs/core/src/components/dialog/dialog";
 

package/src/components/Dialog/index.ts

@@ -1,3 +1,4 @@
 export * from "./Modal";
 export * from "./SimpleDialog";
 export * from "./AlertDialog";
+export * from "./ModalContext";

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

@@ -1,11 +1,20 @@
 import React from "react";
-import { OverlaysProvider } from "@blueprintjs/core";
+import { Classes, OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
-import { Card, Modal } from "./../../../../index";
+import {
+    Button,
+    Card,
+    CardContent,
+    Modal,
+    ModalContext,
+    ModalSize,
+    Spacing,
+    useModalContext,
+} from "./../../../../index";
 
 export default {
     title: "Components/Dialog/Modal",
@@ -33,3 +42,135 @@ Default.args = {
     onOpening: fn(),
     onClosing: fn(),
 };
+
+const ContextTemplate = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    const { setModalOpen, openModalStack } = useModalContext();
+
+    return (
+        <OverlaysProvider>
+            <div style={{ height: "70vh", position: "relative" }} id={"modalPortal"}>
+                <ModalContext.Provider value={{ setModalOpen, openModalStack }}>{children}</ModalContext.Provider>
+            </div>
+        </OverlaysProvider>
+    );
+};
+
+const ModalContent = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <Card style={{ height: "100%" }}>
+            <CardContent>{children}</CardContent>
+        </Card>
+    );
+};
+
+/** Component for nested modals. */
+const ExampleModal = ({
+    id,
+    size,
+    children,
+}: {
+    id?: string;
+    size: ModalSize;
+    children?: React.HTMLAttributes<HTMLDivElement>["children"];
+}) => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    const [portalElement, setPortalElement] = React.useState<HTMLElement | undefined>();
+
+    React.useEffect(() => {
+        setPortalElement(document.getElementById("modalPortal")!);
+    }, []);
+
+    return (
+        <Modal
+            modalId={id}
+            size={size}
+            isOpen={isOpen}
+            usePortal={true}
+            portalContainer={portalElement}
+            hasBackdrop={true}
+            onOpened={() => {
+                // workaround, Blueprint attach a class to body tht prevents scrolling, probably it is attached to the wrong portal
+                document.body.classList.remove(Classes.OVERLAY_OPEN);
+            }}
+        >
+            <ModalContent>
+                Modal with constant modal ID "{id}".
+                <Spacing />
+                <TrackingContent />
+                <Spacing />
+                {children}
+                <Spacing />
+                <Button key={"close"} onClick={() => setIsOpen(false)}>
+                    Close
+                </Button>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+const InnerModal = () => {
+    return <ExampleModal id="innerModal" size="small" />;
+};
+
+const MiddleModal = () => {
+    return (
+        <ExampleModal id="middleModal" size="regular">
+            <InnerModal />
+        </ExampleModal>
+    );
+};
+
+/** Shows the current stack of open modals. */
+const TrackingContent = () => {
+    const modalContext = React.useContext(ModalContext);
+
+    return (
+        <ul>
+            {(modalContext.openModalStack ?? []).map((modalId, idx) => (
+                <li key={modalId}>
+                    {idx + 1}. {modalId}
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+/**
+ * `ModalContext` can be used as provider to track a stack of modals.
+ *
+ * ```(Javascript)
+ * const ContextTemplate = () => {
+ *     const { setModalOpen, openModalStack } = useModalContext();
+ *     return (
+ *         <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
+ *             <SimpleDialog size="large" isOpen>
+ *                 <OtherModal />
+ *             </SimpleDialog>
+ *         </ModalContext.Provider>
+ *     );
+ * };
+ *
+ * const OtherModal = () => {
+ *     const modalContext = React.useContext(ModalContext);
+ *     return (
+ *         <SimpleDialog size="small">
+ *            <ul>
+ *                {(modalContext.openModalStack ?? []).map((modalId, idx) => (
+ *                    <li key={modalId}>
+ *                        {idx + 1}. {modalId}
+ *                    </li>
+ *                ))}
+ *            </ul>
+ *         </SimpleDialog>
+ *     );
+ * };
+ * ```
+ */
+export const NestedModalWithContext = ContextTemplate.bind({});
+NestedModalWithContext.args = {
+    children: [
+        <ExampleModal id="rootModal" size="large">
+            <MiddleModal />
+        </ExampleModal>,
+    ],
+};