BA-2190-fe-storybook-messages

packages/components/CHANGELOG.md

@@ -1,8 +1,15 @@
 # @baseapp-frontend/components
 
+## 1.0.35
+
+### Patch Changes
+
+- create MessageList, messageItem, ChatRoom and MessagesGroup storybook
+
 ## 1.0.34
 
 ### Patch Changes
+
 - Content Feed creation page and Dropzone Improvements
 - Updated dependencies
   - @baseapp-frontend/design-system@1.0.15

packages/components/modules/messages/web/ChatRoom/__storybook__/ChatRoom.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Messages/ChatRoom" />
+
+# Component Documentation
+
+## ChatRoom
+
+- **Purpose**: Central component for rendering a complete chat experience, including header, message list, and input form.
+- **Expected Behavior**: Loads chat room data via Relay, shows messages, allows message sending, and provides access to group or conversation-specific actions.
+
+## Use Cases
+
+- **Current Usage**: Used in the messaging module as the main interface for individual or group chats.
+- **Potential Usage**: Could be adapted for support ticket threads, comment discussions, or community channels.
+
+## Props
+
+- **roomId** (`string`): The unique identifier for the chat room to fetch and render.
+- **MessagesList** (`component`, optional): Custom component to render messages. Defaults to `DefaultMessagesList`.
+- **MessagesListProps** (`object`, optional): Extra props passed to `MessagesList`.
+- **SendMessage** (`component`, optional): Custom component to render the message input. Defaults to `DefaultSendMessage`.
+- **SendMessageProps** (`object`, optional): Extra props passed to `SendMessage`.
+- **onDisplayGroupDetailsClicked** (`function`): Callback triggered when user clicks on group chat header to view group info.
+
+## Notes
+
+- **Related Components**:
+  - `MessagesList` – Renders the message timeline inside the chat.
+  - `SendMessage` – Handles input and sending of messages.
+  - `ChatRoomHeader` – Displays chat participants, title, and group options.
+
+## Example Usage
+
+```tsx
+const MyComponent = () => {
+  return (
+    <ChatRoom
+      roomId="room-123"
+      onDisplayGroupDetailsClicked={() => console.log('Group info opened')}
+    />
+  )
+}
+
+export default MyComponent
+```

packages/components/modules/messages/web/ChatRoom/__storybook__/ChatRoomWithQuery/index.tsx

@@ -0,0 +1,34 @@
+import { graphql, useLazyLoadQuery } from 'react-relay'
+
+import SuspendedChatRoom from '../..'
+import { ChatRoomWithQuery as Query } from '../../../../../../__generated__/ChatRoomWithQuery.graphql'
+import { MessagesListFragment$key } from '../../../../../../__generated__/MessagesListFragment.graphql'
+
+const ChatRoomWithQuery = () => {
+  const data = useLazyLoadQuery<Query>(
+    graphql`
+      query ChatRoomWithQuery @relay_test_operation {
+        chatRoom(id: "room-123") {
+          id
+          isArchived
+          participantsCount
+          ...TitleFragment
+          ...MessagesListFragment
+        }
+      }
+    `,
+    {},
+  )
+
+  if (!data.chatRoom) return <div>Room not found</div>
+
+  return (
+    <SuspendedChatRoom
+      roomId={data.chatRoom.id}
+      onDisplayGroupDetailsClicked={() => alert('Group details clicked')}
+      MessagesListProps={{ roomRef: data.chatRoom as MessagesListFragment$key }}
+    />
+  )
+}
+
+export default ChatRoomWithQuery

packages/components/modules/messages/web/ChatRoom/__storybook__/mockResolvers.ts

@@ -0,0 +1,265 @@
+export const mockResolverGroup = {
+  ChatRoom: () => ({
+    id: 'room-123',
+    isArchived: false,
+    participantsCount: 3,
+    isGroup: true,
+    participants: {
+      edges: [
+        {
+          node: {
+            profile: {
+              id: 'UHJvZmlsZToxNzM=',
+              name: 'John',
+              image: null,
+            },
+            role: 'MEMBER',
+            id: 'Q2hhdFJvb21QYXJ0aWNpcGFudDoxNA==',
+          },
+        },
+        {
+          node: {
+            profile: {
+              id: 'UHJvZmlsZToxNTM=',
+              name: 'Priscilla',
+              image: null,
+            },
+            role: 'ADMIN',
+            id: 'Q2hhdFJvb21QYXJ0aWNpcGFudDoxNg==',
+          },
+        },
+      ],
+    },
+    image: null,
+    title: 'TSL',
+    unreadMessages: {
+      count: 0,
+      markedUnread: false,
+      id: 'VW5yZWFkTWVzc2FnZUNvdW50OjIw',
+    },
+    allMessages: {
+      totalCount: 6,
+      edges: [
+        {
+          node: {
+            id: 'TWVzc2FnZToxOQ==DKS',
+            created: '2025-03-25T03:42:31.004711+00:00',
+            profile: {
+              id: 'UHJvZmlsZToxNzsdM=',
+              name: 'Alex',
+              image: null,
+            },
+            isRead: true,
+            messageType: 'USER_MESSAGE',
+            content: 'Hey guys!',
+            deleted: false,
+            extraData: null,
+            inReplyTo: null,
+            pk: 20,
+            verb: 'SENT_MESSAGE',
+            __typename: 'Message',
+          },
+          cursor: 'YXJyYXljb25uZWN0zxaW9uOjA=',
+        },
+        {
+          node: {
+            id: 'TWVzc2FnZToxOQ==',
+            created: '2025-03-24T03:42:31.004711+00:00',
+            profile: {
+              id: 'UHJvZmlsZToxNzM=',
+              name: 'John',
+              image: null,
+            },
+            isRead: true,
+            messageType: 'USER_MESSAGE',
+            content: 'Hello Priscilla!',
+            deleted: false,
+            extraData: null,
+            inReplyTo: null,
+            pk: 19,
+            verb: 'SENT_MESSAGE',
+            __typename: 'Message',
+          },
+          cursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+        },
+        {
+          node: {
+            id: 'TWVzc2FnZToxNQ==',
+            created: '2025-03-24T01:23:19.810162+00:00',
+            profile: {
+              id: 'UHJvZmlsZToxNTM=',
+              name: 'Priscilla',
+              image: null,
+            },
+            isRead: true,
+            messageType: 'USER_MESSAGE',
+            content: 'Hello everyone',
+            deleted: false,
+            extraData: null,
+            inReplyTo: null,
+            pk: 15,
+            verb: 'SENT_MESSAGE',
+            __typename: 'Message',
+          },
+          cursor: 'YXJyYXljb25uZWN0aW9uOjQ=',
+        },
+        {
+          node: {
+            id: 'TWVzc2FnZToxNA==',
+            created: '2025-03-24T01:23:15.065540+00:00',
+            profile: null,
+            isRead: null,
+            messageType: 'SYSTEM_GENERATED',
+            content: 'Priscilla created group "TSL"',
+            deleted: false,
+            extraData: null,
+            inReplyTo: null,
+            pk: 14,
+            verb: 'SENT_MESSAGE',
+            __typename: 'Message',
+          },
+          cursor: 'YXJyYXljb25uZWN0aW9uOjU=',
+        },
+      ],
+      pageInfo: {
+        hasNextPage: false,
+        endCursor: 'YXJyYXljb25uZWN0aW9uOjU=',
+      },
+    },
+  }),
+}
+
+export const mockResolverPrivate = {
+  ChatRoom: () => ({
+    id: 'room-123',
+    isArchived: false,
+    participantsCount: 2,
+    isGroup: false,
+    participants: {
+      edges: [
+        {
+          node: {
+            profile: {
+              id: 'UHJvZmlsZToxNzM=',
+              name: 'John',
+              image: null,
+            },
+            role: 'ADMIN',
+            id: 'Q2hhdFJvb21QYXJ0aWNpcGFudDoxMw==',
+          },
+        },
+        {
+          node: {
+            profile: {
+              id: 'UHJvZmlsZToxNTM=',
+              name: 'Priscilla',
+              image: null,
+            },
+            role: 'MEMBER',
+            id: 'Q2hhdFJvb21QYXJ0aWNpcGFudDoxMg==',
+          },
+        },
+      ],
+    },
+    image: null,
+    title: null,
+    unreadMessages: {
+      count: 0,
+      markedUnread: false,
+      id: 'VW5yZWFkTWVzc2FnZUNvdW50OjE5',
+    },
+    allMessages: {
+      totalCount: 4,
+      edges: [
+        {
+          node: {
+            id: 'TWVzc2FnZToyMQ==',
+            created: '2025-03-27T02:31:22.786185+00:00',
+            profile: {
+              id: 'UHJvZmlsZToxNTM=',
+              name: 'Priscilla',
+              image: null,
+            },
+            isRead: true,
+            messageType: 'USER_MESSAGE',
+            content: 'fine and you?',
+            deleted: false,
+            extraData: null,
+            inReplyTo: null,
+            pk: 21,
+            verb: 'SENT_MESSAGE',
+            __typename: 'Message',
+          },
+          cursor: 'YXJyYXljb25uZWN0aW9uOjA=',
+        },
+        {
+          node: {
+            id: 'TWVzc2FnZToyMA==',
+            created: '2025-03-27T02:30:01.484497+00:00',
+            profile: {
+              id: 'UHJvZmlsZToxNzM=',
+              name: 'John',
+              image: null,
+            },
+            isRead: true,
+            messageType: 'USER_MESSAGE',
+            content: 'how are you?',
+            deleted: false,
+            extraData: null,
+            inReplyTo: null,
+            pk: 20,
+            verb: 'SENT_MESSAGE',
+            __typename: 'Message',
+          },
+          cursor: 'YXJyYXljb25uZWN0aW9uOjE=',
+        },
+        {
+          node: {
+            id: 'TWVzc2FnZToxMw==',
+            created: '2025-03-24T01:15:25.749043+00:00',
+            profile: {
+              id: 'UHJvZmlsZToxNTM=',
+              name: 'Priscilla',
+              image: null,
+            },
+            isRead: true,
+            messageType: 'USER_MESSAGE',
+            content: 'This message was deleted',
+            deleted: true,
+            extraData: null,
+            inReplyTo: null,
+            pk: 13,
+            verb: 'SENT_MESSAGE',
+            __typename: 'Message',
+          },
+          cursor: 'YXJyYXljb25uZWN0aW9uOjI=',
+        },
+        {
+          node: {
+            id: 'TWVzc2FnZToxMg==',
+            created: '2025-03-24T01:14:45.029307+00:00',
+            profile: {
+              id: 'UHJvZmlsZToxNzM=',
+              name: 'John',
+              image: null,
+            },
+            isRead: true,
+            messageType: 'USER_MESSAGE',
+            content: 'Hello, Priscilla!',
+            deleted: false,
+            extraData: null,
+            inReplyTo: null,
+            pk: 12,
+            verb: 'SENT_MESSAGE',
+            __typename: 'Message',
+          },
+          cursor: 'YXJyYXljb25uZWN0aW9uOjM=',
+        },
+      ],
+      pageInfo: {
+        hasNextPage: false,
+        endCursor: 'YXJyYXljb25uZWN0aW9uOjM=',
+      },
+    },
+  }),
+}