feat(MessageThread): add message thread component

packages/components/package.json

@@ -257,6 +257,11 @@
       "types": "./dist/js/types/components/Message/index.d.ts",
       "import": "./dist/js/Message.js"
     },
+    "./MessageThread/styles.css": "./dist/css/MessageThread.css",
+    "./MessageThread": {
+      "types": "./dist/js/types/components/MessageThread/index.d.ts",
+      "import": "./dist/js/MessageThread.js"
+    },
     "./Modal/styles.css": "./dist/css/Modal.css",
     "./Modal": {
       "types": "./dist/js/types/components/Modal/index.d.ts",

packages/components/src/components/Message/Message.module.scss

@@ -3,18 +3,33 @@
   flex-direction: column;
   row-gap: var(--message--spacing-y);
   width: max-content;
-  max-width: 100%;
+  max-width: min(100%, var(--text--max-width));
 
   .content {
     grid-area: content;
     border-radius: var(--message--corner-radius);
     padding-inline: var(--message--padding-x);
     padding-block: var(--message--padding-y);
-    background-color: var(--message--background-color-sender);
+    background-color: var(--message--background-color-responder);
   }
 
-  &.responder .content {
-    background-color: var(--message--background-color-responder);
+  &.sender {
+    align-self: flex-end;
+    .header {
+      flex-direction: row-reverse;
+
+      .user {
+        flex-direction: row-reverse;
+
+        :global(.flow--text) {
+          text-align: end;
+        }
+      }
+    }
+
+    .content {
+      background-color: var(--message--background-color-sender);
+    }
   }
 
   .header {
@@ -39,18 +54,4 @@
       order: 3;
     }
   }
-
-  &.right {
-    .header {
-      flex-direction: row-reverse;
-
-      .user {
-        flex-direction: row-reverse;
-
-        :global(.flow--text) {
-          text-align: end;
-        }
-      }
-    }
-  }
 }

packages/components/src/components/Message/Message.tsx

@@ -8,21 +8,14 @@ import { IconContextMenu } from "@/components/Icon/components/icons";
 import PropsContextProvider from "@/lib/propsContext/PropsContextProvider";
 
 export interface MessageProps extends PropsWithChildren, PropsWithClassName {
-  /** Determines the color of the message. @default "sender" */
+  /** Determines the color and orientation of the message. @default "responder" */
   type?: "responder" | "sender";
-  /** The orientation of the chat message. */
-  orientation?: "left" | "right";
 }
 
 export const Message: FC<MessageProps> = (props) => {
-  const { type = "sender", children, className, orientation = "left" } = props;
+  const { type = "responder", children, className } = props;
 
-  const rootClassName = clsx(
-    styles.message,
-    styles[type],
-    styles[orientation],
-    className,
-  );
+  const rootClassName = clsx(styles.message, styles[type], className);
 
   const propsContext: PropsContext = {
     Content: { className: styles.content },

packages/components/src/components/Message/stories/Default.stories.tsx

@@ -51,7 +51,7 @@ type Story = StoryObj<typeof Message>;
 
 export const Default: Story = {};
 
-export const Responder: Story = { args: { type: "responder" } };
+export const Sender: Story = { args: { type: "sender" } };
 
 export const MessageOnly: Story = {
   render: (props) => (
@@ -62,5 +62,3 @@ export const MessageOnly: Story = {
     </Message>
   ),
 };
-
-export const OrientationRight: Story = { args: { orientation: "right" } };

packages/components/src/components/MessageThread/MessageThread.module.scss

@@ -0,0 +1,5 @@
+.messageThread {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--message-thread--spacing);
+}

packages/components/src/components/MessageThread/MessageThread.tsx

@@ -0,0 +1,15 @@
+import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import type { PropsWithClassName } from "@/lib/types/props";
+import clsx from "clsx";
+import styles from "./MessageThread.module.scss";
+
+export type MessageThreadProps = PropsWithChildren & PropsWithClassName;
+
+export const MessageThread: FC<MessageThreadProps> = (props) => {
+  const { children, className } = props;
+
+  const rootClassName = clsx(styles.messageThread, className);
+
+  return <div className={rootClassName}>{children}</div>;
+};

packages/components/src/components/MessageThread/index.ts

@@ -0,0 +1,4 @@
+import { MessageThread } from "./MessageThread";
+
+export { type MessageThreadProps, MessageThread } from "./MessageThread";
+export default MessageThread;

packages/components/src/components/MessageThread/stories/Default.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { FC } from "react";
+import React from "react";
+import type { MessageProps } from "@/components/Message";
+import { Message } from "@/components/Message";
+import { MessageThread } from "@/components/MessageThread";
+import { Header } from "@/components/Header";
+import { Align } from "@/components/Align";
+import { Avatar } from "@/components/Avatar";
+import { Initials } from "@/components/Initials";
+import { Text } from "@/components/Text";
+import { Content } from "@/components/Content";
+import { dummyText } from "@/lib/dev/dummyText";
+
+interface ExampleMessageProps extends Pick<MessageProps, "type"> {
+  name: string;
+  content: string;
+}
+const ExampleMessage: FC<ExampleMessageProps> = (props) => {
+  const { name, content, ...rest } = props;
+  return (
+    <Message {...rest}>
+      <Header>
+        <Align>
+          <Avatar>
+            <Initials>{name}</Initials>
+          </Avatar>
+          <Text>
+            <b>{name}</b>
+          </Text>
+        </Align>
+      </Header>
+
+      <Content>
+        <Text>{content}</Text>
+      </Content>
+    </Message>
+  );
+};
+
+const meta: Meta<typeof MessageThread> = {
+  title: "Content/MessageThread",
+  component: MessageThread,
+  render: (props) => (
+    <MessageThread {...props}>
+      <ExampleMessage
+        name="Max Mustermann"
+        content={dummyText.medium}
+        type="sender"
+      />
+      <ExampleMessage
+        name="John Doe"
+        content={dummyText.long}
+        type="responder"
+      />
+      <ExampleMessage
+        name="Max Mustermann"
+        content={dummyText.short}
+        type="sender"
+      />
+    </MessageThread>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof MessageThread>;
+
+export const Default: Story = {};

packages/components/vite.build.config.base.ts

@@ -84,6 +84,7 @@ export const buildConfig = (opts: Options) => {
     Markdown: "./src/components/Markdown/index.ts",
     MenuItem: "./src/components/MenuItem/index.ts",
     Message: "./src/components/Message/index.ts",
+    MessageThread: "./src/components/MessageThread/index.ts",
     Modal: "./src/components/Modal/index.ts",
     Navigation: "./src/components/Navigation/index.ts",
     Notification: "./src/components/Notification/index.ts",

packages/design-tokens/src/content/messageThread.yml

@@ -0,0 +1,3 @@
+message-thread:
+  spacing:
+    value: "{size-rem.l}"

packages/docs/src/content/03-components/content/message/examples/responder.tsx → packages/docs/src/content/03-components/content/message/examples/sender.tsx

@@ -12,7 +12,7 @@ import { Initials } from "@mittwald/flow-react-components/Initials";
 import { Text } from "@mittwald/flow-react-components/Text";
 import { Content } from "@mittwald/flow-react-components/Content";
 
-<Message type="responder">
+<Message type="sender">
   <Header>
     <ContextMenuTrigger>
       <Button />

packages/docs/src/content/03-components/content/message/overview.mdx

@@ -6,15 +6,7 @@
 
 # Type
 
-Im default ist der Type der Message `sender`, wird er auf `responder` geändert,
-ändert sich die Hintergrundfarbe der Message.
+Im default ist der Type der Message `responder`, wird er auf `sender` geändert,
+ändert sich die Hintergrundfarbe und Anordnung der Message.
 
-<LiveCodeEditor example="responder" editorCollapsed />
-
----
-
-# Orientation
-
-Die Message kann rechts- oder linksbündig angezeigt werden.
-
-<LiveCodeEditor example="right" editorCollapsed />
+<LiveCodeEditor example="sender" editorCollapsed />

packages/docs/src/content/03-components/content/messageThread/develop.mdx

@@ -0,0 +1,3 @@
+# Properties
+
+<PropertiesTables />

packages/docs/src/content/03-components/content/messageThread/examples/default.tsx

@@ -0,0 +1,73 @@
+import { Message } from "@mittwald/flow-react-components/Message";
+import { Header } from "@mittwald/flow-react-components/Header";
+import { Align } from "@mittwald/flow-react-components/Align";
+import { Avatar } from "@mittwald/flow-react-components/Avatar";
+import { Initials } from "@mittwald/flow-react-components/Initials";
+import { Text } from "@mittwald/flow-react-components/Text";
+import { Content } from "@mittwald/flow-react-components/Content";
+import { MessageThread } from "@mittwald/flow-react-components/MessageThread";
+
+<MessageThread>
+  <Message type="sender">
+    <Header>
+      <Align>
+        <Avatar>
+          <Initials>Max Mustermann</Initials>
+        </Avatar>
+        <Text>
+          <b>Max Mustermann</b>
+        </Text>
+      </Align>
+    </Header>
+    <Content>
+      <Text>
+        Lorem ipsum dolor sit amet consectetur adipisicing
+        elit. Cumque eius quam quas vel voluptas, ullam
+        aliquid fugit. Voluptate harum accusantium rerum
+        ullam modi blanditiis vitae.
+      </Text>
+    </Content>
+  </Message>
+
+  <Message type="responder">
+    <Header>
+      <Align>
+        <Avatar>
+          <Initials>John Doe</Initials>
+        </Avatar>
+        <Text>
+          <b>John Doe</b>
+        </Text>
+      </Align>
+    </Header>
+    <Content>
+      <Text>
+        Lorem ipsum dolor sit amet consectetur adipisicing
+        elit. Cumque eius quam quas vel voluptas, ullam
+        aliquid fugit. Voluptate harum accusantium rerum
+        ullam modi blanditiis vitae, laborum ea tempore,
+        dolore voluptas. Earum pariatur, similique corrupti
+        id officia perferendis. Labore, similique. Earum,
+        quas in. At dolorem corrupti blanditiis nulla
+        deserunt laborum! Corrupti delectus aspernatur nihil
+        nulla obcaecati ipsam porro sequi rem? Quam.
+      </Text>
+    </Content>
+  </Message>
+
+  <Message type="sender">
+    <Header>
+      <Align>
+        <Avatar>
+          <Initials>Max Mustermann</Initials>
+        </Avatar>
+        <Text>
+          <b>Max Mustermann</b>
+        </Text>
+      </Align>
+    </Header>
+    <Content>
+      <Text>Lorem ipsum dolor sit amet.</Text>
+    </Content>
+  </Message>
+</MessageThread>;