@eccenca/gui-elements 24.4.0 → 24.4.1-featurechatcomponentscmem6775.1

package/src/components/Chat/ChatArea.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { FlexibleLayoutContainer, FlexibleLayoutContainerProps, FlexibleLayoutItem } from "./../FlexibleLayout";
+import { Spacing, SpacingProps } from "./../Separation/Spacing";
+import { ChatFieldProps } from "./ChatField";
+
+export interface ChatAreaProps
+    extends Omit<FlexibleLayoutContainerProps, "vertical" | "noEqualItemSpace">,
+        TestableComponent {
+    /**
+     * The inut field for the chat.
+     */
+    chatField?: React.ReactElement<ChatFieldProps>;
+    /**
+     * Set the position of the chat field.
+     */
+    chatFieldPosition?: "top" | "bottom";
+    /**
+     * Sets the maximum width for chat contents and input.
+     */
+    contentWidth?: "small" | "medium" | "large" | "full";
+    /**
+     * Put chat content in a list and add spacings automatically.
+     * Works best if each `ChatArea` child represents one chat content item.
+     */
+    autoSpacingSize?: SpacingProps["size"];
+    /**
+     * Scrolls content to the first or last child automatically.
+     * The correct value depends on the place where you insert the most recent chat item.
+     */
+    autoScrollTo?: "first" | "last";
+}
+
+/**
+ * Component to display a full chat, containing chat content bubbles and text input.
+ */
+export const ChatArea = ({
+    children,
+    className,
+    chatField,
+    chatFieldPosition = "bottom",
+    contentWidth = "medium",
+    autoSpacingSize,
+    gapSize = "medium",
+    autoScrollTo,
+    ...otherFlexibleLayoutContainerProps
+}: ChatAreaProps) => {
+    const chatcontents = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (chatcontents.current && children && autoScrollTo) {
+            const chatitems = chatcontents.current.getElementsByClassName(`${eccgui}-chat__content`);
+            if (chatitems.length > 0) {
+                chatitems[autoScrollTo === "first" ? 0 : chatitems.length - 1].scrollIntoView({
+                    behavior: "instant",
+                    block: autoScrollTo === "first" ? "start" : "end",
+                });
+            }
+        }
+    }, [chatcontents, children, autoScrollTo]);
+
+    return (
+        <FlexibleLayoutContainer
+            className={
+                `${eccgui}-chat__area` + ` ${eccgui}-chat__area--${contentWidth}` + (className ? ` ${className}` : "")
+            }
+            vertical
+            noEqualItemSpace
+            gapSize={gapSize}
+            {...otherFlexibleLayoutContainerProps}
+        >
+            {chatField && (
+                <FlexibleLayoutItem
+                    growFactor={0}
+                    shrinkFactor={0}
+                    style={chatFieldPosition === "bottom" ? { order: 1 } : undefined}
+                >
+                    <div className={`${eccgui}-chat__area-contentwidth`}>{chatField}</div>
+                </FlexibleLayoutItem>
+            )}
+            <FlexibleLayoutItem
+                style={
+                    otherFlexibleLayoutContainerProps.useAbsoluteSpace
+                        ? {
+                              overflow: "auto",
+                              minHeight: 0,
+                              padding: "2px 0",
+                          }
+                        : undefined
+                }
+            >
+                <div className={`${eccgui}-chat__area-contentwidth`} ref={chatcontents}>
+                    {autoSpacingSize && children ? (
+                        <ul>
+                            {React.Children.toArray(children).map((child) => (
+                                <li>
+                                    {child}
+                                    <Spacing size={autoSpacingSize} />
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        children
+                    )}
+                </div>
+            </FlexibleLayoutItem>
+        </FlexibleLayoutContainer>
+    );
+};
+
+export default ChatArea;

package/src/components/Chat/ChatContent.tsx

@@ -0,0 +1,199 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import * as ReactIs from "react-is";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
+import { DepictionProps } from "./../Depiction/Depiction";
+import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
+import { IconButton } from "./../Icon/IconButton";
+import { Spacing } from "./../Separation/Spacing";
+import { HtmlContentBlock, OverflowText, OverflowTextProps } from "./../Typography";
+
+export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
+    /**
+     * Should be a line of text, e.g. username, timestamp, ...
+     */
+    statusLine?: React.ReactElement<OverflowTextProps>;
+    /**
+     * How the chat content box is displayed.
+     */
+    displayType?: "free" | "simple" | "bubble";
+    /**
+     * A depiction used as avatar next to the content box.
+     */
+    avatar?: React.ReactElement<DepictionProps>;
+    /**
+     * If indented then the content box has some white space on the opposite side to the alignment
+     */
+    indentationSize?: "small" | "medium" | "large";
+    /**
+     * How the content box and avatar is aligned.
+     * If `left` is set then the avatar is on the left side, and the indentation on the right side.
+     */
+    alignment?: "left" | "right";
+    /**
+     * If set then the chat bubble only grows to a height of 50% of the viewport.
+     * In case you need to set other maximum heights then use the `style` property directly.
+     */
+    limitHeight?: React.ReactChild;
+    /**
+     * If given then the content is automatically parsed and displayed by our `<Markdown />` component.
+     * `children` need to a `string` then, otherwise it cannot be parsed.
+     */
+    markdownProps?: Omit<MarkdownProps, "children">;
+    /**
+     * Callback handler if content should be expanded.
+     * Button to shrink/expand is displayed, depending on `shrinked` value.
+     * If this handler is given then the component never will change the `shrinked` state automatically.
+     */
+    onToggleSize?: () => void;
+    /**
+     * Content should dislayed shrinked.
+     * Button to expand content is displayed.
+     * Component can reduce content automatically to one line if `autoShrink` is set to `true`.
+     * If `onToggleSize` handler is not given then `autoShrink=true` is inferred and size toggling is automatically provided.
+     */
+    shrinked?: boolean;
+    /**
+     * Children elements are automatically shrinked to one line.
+     * If `shrinked` are not given then `shrinked=true` is infered.
+     */
+    autoShrink?: boolean;
+}
+
+/**
+ * Component to display singe chat contents, including avatar and status line.
+ */
+export const ChatContent = ({
+    className,
+    children,
+    statusLine,
+    avatar,
+    displayType = "bubble",
+    indentationSize,
+    alignment = "left",
+    limitHeight,
+    markdownProps,
+    shrinked,
+    autoShrink,
+    onToggleSize,
+    ...otherDivProps
+}: ChatContentProps) => {
+    const [displayShrinked, setDispayShrinked] = React.useState<boolean>(
+        shrinked === true || (autoShrink === true && typeof shrinked === "undefined")
+    );
+
+    const toggleSize = () => {
+        if (onToggleSize) {
+            onToggleSize();
+        } else {
+            setDispayShrinked(!displayShrinked);
+        }
+    };
+
+    const content =
+        markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
+
+    const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
+        if (children instanceof Array) {
+            return children
+                .map((child: React.ReactNode) => {
+                    return onlyText(child);
+                })
+                .join(" ");
+        }
+
+        return React.Children.toArray(children)
+            .map((child) => {
+                if (ReactIs.isFragment(child)) {
+                    return onlyText(child.props?.children);
+                }
+                if (typeof child === "string") {
+                    return child;
+                }
+                if (typeof child === "number") {
+                    return child.toString();
+                }
+                if (ReactIs.isElement(child)) {
+                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
+                    return renderToString(<span>{child}</span>);
+                }
+                return "";
+            })
+            .join(" ");
+    };
+
+    const chatitem = (
+        <div
+            className={
+                `${eccgui}-chat__content` +
+                ` ${eccgui}-chat__content--display-${displayType}` +
+                ` ${eccgui}-chat__content--align-${alignment}` +
+                (limitHeight ? ` ${eccgui}-chat__content--limitheight` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherDivProps}
+        >
+            {statusLine && (
+                <HtmlContentBlock small>
+                    {statusLine}
+                    <Spacing size="tiny" />
+                </HtmlContentBlock>
+            )}
+            {displayShrinked && autoShrink ? (
+                <OverflowText passDown>
+                    <Markdown removeMarkup>{onlyText(content)}</Markdown>
+                </OverflowText>
+            ) : (
+                content
+            )}
+        </div>
+    );
+
+    const indentationSizes = {
+        small: "8%",
+        medium: "21%",
+        large: "34%",
+    };
+
+    return (
+        <div
+            style={{
+                marginLeft: alignment === "right" && indentationSize ? indentationSizes[indentationSize] : undefined,
+                marginRight: alignment === "left" && indentationSize ? indentationSizes[indentationSize] : undefined,
+            }}
+        >
+            <FlexibleLayoutContainer noEqualItemSpace gapSize="tiny">
+                {avatar && (
+                    <FlexibleLayoutItem
+                        className={`${eccgui}-chat__content-avatar`}
+                        growFactor={0}
+                        shrinkFactor={0}
+                        style={alignment === "right" ? { order: 1 } : undefined}
+                    >
+                        {React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" })}
+                    </FlexibleLayoutItem>
+                )}
+                <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{chatitem}</FlexibleLayoutItem>
+                {(displayShrinked || onToggleSize || autoShrink) && (
+                    <FlexibleLayoutItem
+                        className={`${eccgui}-chat__content-sizetoggle`}
+                        growFactor={0}
+                        shrinkFactor={0}
+                        style={alignment === "right" ? { order: -1 } : undefined}
+                    >
+                        <IconButton
+                            name={displayShrinked ? "toggler-showmore" : "toggler-showless"}
+                            onClick={() => toggleSize()}
+                        />
+                    </FlexibleLayoutItem>
+                )}
+            </FlexibleLayoutContainer>
+        </div>
+    );
+};
+
+export default ChatContent;

package/src/components/Chat/ChatField.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { IconButton } from "../Icon/IconButton";
+import { TextArea, TextAreaProps } from "../TextField/TextArea";
+
+export interface ChatFieldProps extends Pick<TextAreaProps, "className">, TestableComponent {
+    /**
+     * Default input to start with.
+     */
+    children?: string;
+    /**
+     * Callback handler to process the input of the field when `Enter` is pressed or the submit button is clicked.
+     */
+    onSubmit: (value: string) => void;
+}
+
+/**
+ * Component to input chat text.
+ * Based on `TextArea` component.
+ */
+export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFieldProps) => {
+    const chatvalue = React.useRef<string>(otherTextAreaProps.children ?? "");
+
+    const onContentChange = (value: string) => {
+        chatvalue.current = value;
+    };
+
+    const onEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.keyCode === 13 && e.shiftKey === false) {
+            e.preventDefault();
+            onSubmit(chatvalue.current);
+        }
+    };
+
+    return (
+        <TextArea
+            fill
+            autoResize
+            className={`${eccgui}-chat__inputfield` + (className ? ` ${className}` : "")}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                onContentChange(e.target.value);
+            }}
+            onKeyDown={onEnter}
+            rightElement={<IconButton name={"operation-send"} onClick={() => onSubmit(chatvalue.current)} />}
+            {...otherTextAreaProps}
+        />
+    );
+};
+
+export default ChatField;

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,3 @@
+export * from "./ChatArea";
+export * from "./ChatContent";
+export * from "./ChatField";

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatArea, ChatContent, ChatField } from "../../../index";
+
+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" />,
+        <ChatContent {...ShortChatBubble.args} avatar={undefined} displayType="free" />,
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContent {...LongChatBubble.args} autoShrink />,
+        <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,60 @@
+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>
+    ),
+    onToggleSize: undefined,
+};
+
+export const LongChatBubble = TemplateFull.bind({});
+LongChatBubble.args = {
+    ...Default.args,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
+        </HtmlContentBlock>
+    ),
+    limitHeight: true,
+};

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatField } 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 = {
+    onSubmit: (value) => alert(value),
+};

package/src/components/Icon/IconButton.tsx

@@ -50,7 +50,7 @@ export const IconButton = ({
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
         openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
-        swapPlaceholderDelay: 1,
+        swapPlaceholderDelay: 10,
     };
     const iconProps = {
         small: restProps.small,

package/src/components/Icon/canonicalIconNames.tsx

@@ -8,6 +8,7 @@ const canonicalIcons = {
     "application-homepage": icons.Workspace,
     "application-legacygui": icons.ResetAlt,
     "application-mapping": icons.ModelBuilder,
+    "application-colors": icons.ColorPalette,
     "application-queries": icons.DataView,
     "application-useraccount": icons.UserAvatar,
     "application-vocabularies": icons.Catalog,
@@ -50,6 +51,7 @@ const canonicalIcons = {
     "artefact-workflow": icons.ModelBuilder,
 
     "data-boolean": icons.Boolean,
+    "data-color": icons.ColorPalette,
     "data-sourcepath": icons.Data_2,
     "data-targetpath": icons.Data_1,
     "data-string": icons.StringText,
@@ -145,6 +147,7 @@ const canonicalIcons = {
     "operation-merge": icons.DirectionMerge,
     "operation-redo": icons.Redo,
     "operation-search": icons.Search,
+    "operation-send": icons.Send,
     "operation-sharelink": icons.CopyLink,
     "operation-transform": icons.Calculation,
     "operation-translate": icons.Translate,

package/src/components/TextField/TextArea.tsx

@@ -91,7 +91,7 @@ export const TextArea = ({
                             leftIconElementRect.width ?? 0
                         }px)`
                     );
-                    leftIconElement.addEventListener("click", (_event: MouseEvent) => {
+                    leftIconElement.addEventListener("click", () => {
                         textAreaElement.focus();
                     });
                 }
@@ -157,7 +157,7 @@ export const TextArea = ({
             rows={
                 rows && !otherBlueprintTextAreaProps.autoResize && !otherBlueprintTextAreaProps.growVertically
                     ? rows
-                    : 1
+                    : 2
             }
             {...otherBlueprintTextAreaProps}
             dir={"auto"}

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { Tooltip } from "../../index";
 
@@ -34,6 +35,7 @@ Default.args = {
     children: "hover me",
     content: testContent,
     addIndicator: true,
+    onOpening: fn(),
 };
 
 export const MarkdownSupport = Template.bind({});

package/src/components/Tooltip/Tooltip.tsx

@@ -134,7 +134,15 @@ export const Tooltip = ({
                         (target as HTMLElement).focus();
                         break;
                     case "afterhover":
-                        (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+                        // re-check if the cursor is still over the element after swapping the placeholder before triggering the event to bubble up
+                        (target as HTMLElement).addEventListener(
+                            "mouseover",
+                            () => (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })),
+                            {
+                                capture: true,
+                                once: true,
+                            }
+                        );
                         break;
                 }
             }

package/src/components/index.scss

@@ -3,6 +3,7 @@
 @import "./Breadcrumb/breadcrumb";
 @import "./Button/button";
 @import "./Card/card";
+@import "./Chat/chat";
 @import "./Checkbox/checkbox";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from "./Badge/Badge";
 export * from "./Breadcrumb";
 export * from "./Button/Button";
 export * from "./Card";
+export * from "./Chat";
 export * from "./Checkbox/Checkbox";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";