add component for chat area

Author: haschek

src/components/Chat/ChatArea.tsx

@@ -0,0 +1,94 @@
+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 in chat content in a list and add spacings automatically.
+     * Works best if each child represents one chat content item.
+     */
+    autoSpacingSize?: SpacingProps["size"];
+}
+
+/**
+ * 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",
+    ...otherFlexibleLayoutContainerProps
+}: ChatAreaProps) => {
+    return (
+        <FlexibleLayoutContainer
+            className={
+                `${eccgui}-chat__area` + ` ${eccgui}-chat__area--${contentWidth}` + (className ? ` ${className}` : "")
+            }
+            vertical
+            noEqualItemSpace
+            gapSize={gapSize}
+            {...otherFlexibleLayoutContainerProps}
+        >
+            {chatField && (
+                <FlexibleLayoutItem
+                    className={`${eccgui}-chat__area-contents`}
+                    growFactor={0}
+                    shrinkFactor={0}
+                    style={chatFieldPosition === "bottom" ? { order: 1 } : undefined}
+                >
+                    {chatField}
+                </FlexibleLayoutItem>
+            )}
+            <FlexibleLayoutItem
+                className={`${eccgui}-chat__area-contents`}
+                style={
+                    otherFlexibleLayoutContainerProps.useAbsoluteSpace
+                        ? {
+                              overflow: "auto",
+                              minHeight: 0,
+                              paddingRight: "0.25rem",
+                          }
+                        : undefined
+                }
+            >
+                {autoSpacingSize && children ? (
+                    <ul>
+                        {React.Children.toArray(children).map((child) => (
+                            <li>
+                                {child}
+                                <Spacing size={autoSpacingSize} />
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    children
+                )}
+            </FlexibleLayoutItem>
+        </FlexibleLayoutContainer>
+    );
+};
+
+export default ChatArea;

src/components/Chat/_chat.scss

@@ -59,8 +59,23 @@
     max-height: 50vh;
 }
 
-.eccgui-chat__inputfield {
+.#{$eccgui}-chat__inputfield {
     min-height: mini-units(9);
     max-height: 39vh;
     resize: none !important;
 }
+
+.#{$eccgui}-chat__area-contents {
+    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;
+    }
+}

src/components/Chat/index.ts

@@ -1,2 +1,3 @@
+export * from "./ChatArea";
 export * from "./ChatContent";
 export * from "./ChatField";

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

@@ -0,0 +1,33 @@
+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} />,
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContent {...ShortChatBubble.args} />,
+    ],
+};