@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/chat-interface/ChatInterface.stories.tsx

@@ -0,0 +1,412 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChatInterface, defaultUsers, defaultConversations, defaultMessages } from './index'
+import type { ChatMessage, ChatConversation, ChatUser } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof ChatInterface> = {
+  title: 'Blocks/ChatInterface',
+  component: ChatInterface,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A full-featured chat interface with conversation sidebar, message area, typing indicators, and status badges.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showSidebar: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ChatInterface>
+
+export const Default: Story = {
+  render: () => (
+    <ChatInterface
+      currentUser={defaultUsers[0]}
+      conversations={defaultConversations}
+      selectedConversation={defaultConversations[0]}
+      messages={defaultMessages}
+      onSendMessage={(content) => console.log('Send:', content)}
+      onSelectConversation={(conv) => console.log('Select:', conv)}
+    />
+  ),
+}
+
+export const NoConversationSelected: Story = {
+  render: () => (
+    <ChatInterface
+      currentUser={defaultUsers[0]}
+      conversations={defaultConversations}
+      onSelectConversation={(conv) => console.log('Select:', conv)}
+    />
+  ),
+}
+
+export const WithSidebar: Story = {
+  render: () => (
+    <ChatInterface
+      currentUser={defaultUsers[0]}
+      conversations={defaultConversations}
+      selectedConversation={defaultConversations[0]}
+      messages={defaultMessages}
+      showSidebar
+      onSendMessage={(content) => console.log('Send:', content)}
+      onSelectConversation={(conv) => console.log('Select:', conv)}
+    />
+  ),
+}
+
+export const WithoutSidebar: Story = {
+  render: () => (
+    <ChatInterface
+      currentUser={defaultUsers[0]}
+      selectedConversation={defaultConversations[0]}
+      messages={defaultMessages}
+      showSidebar={false}
+      onSendMessage={(content) => console.log('Send:', content)}
+    />
+  ),
+}
+
+export const WithTypingIndicator: Story = {
+  render: () => (
+    <ChatInterface
+      currentUser={defaultUsers[0]}
+      conversations={defaultConversations}
+      selectedConversation={defaultConversations[0]}
+      messages={defaultMessages}
+      typingUsers={[defaultUsers[1]]}
+      onSendMessage={(content) => console.log('Send:', content)}
+    />
+  ),
+}
+
+export const MultipleTyping: Story = {
+  render: () => (
+    <ChatInterface
+      currentUser={defaultUsers[0]}
+      conversations={defaultConversations}
+      selectedConversation={defaultConversations[2]} // Group conversation
+      messages={defaultMessages}
+      typingUsers={[defaultUsers[1], defaultUsers[2]]}
+      onSendMessage={(content) => console.log('Send:', content)}
+    />
+  ),
+}
+
+export const GroupConversation: Story = {
+  render: () => {
+    const groupMessages: ChatMessage[] = [
+      {
+        id: 'gm1',
+        content: 'Hey team! Ready for the meeting?',
+        senderId: '2',
+        timestamp: new Date(Date.now() - 3600000),
+        status: 'read',
+      },
+      {
+        id: 'gm2',
+        content: 'Yes, just finishing up some notes',
+        senderId: '3',
+        timestamp: new Date(Date.now() - 3500000),
+        status: 'read',
+      },
+      {
+        id: 'gm3',
+        content: 'Great! See you in 5 minutes',
+        senderId: '1',
+        timestamp: new Date(Date.now() - 3400000),
+        status: 'delivered',
+      },
+      {
+        id: 'gm4',
+        content: 'I\'ll share my screen for the demo',
+        senderId: '4',
+        timestamp: new Date(Date.now() - 3300000),
+        status: 'read',
+      },
+    ]
+
+    return (
+      <ChatInterface
+        currentUser={defaultUsers[0]}
+        conversations={defaultConversations}
+        selectedConversation={defaultConversations[2]} // Group conversation
+        messages={groupMessages}
+        onSendMessage={(content) => console.log('Send:', content)}
+        onSelectConversation={(conv) => console.log('Select:', conv)}
+      />
+    )
+  },
+}
+
+export const ManyMessages: Story = {
+  render: () => {
+    const manyMessages: ChatMessage[] = Array.from({ length: 30 }, (_, i) => ({
+      id: `msg-${i}`,
+      content: i % 2 === 0
+        ? `Hey, this is message number ${i + 1} from Jane. How are you doing today?`
+        : `Thanks for message ${i}! I'm doing well. This is a response from John.`,
+      senderId: i % 2 === 0 ? '2' : '1',
+      timestamp: new Date(Date.now() - (30 - i) * 300000),
+      status: i === 29 ? 'sent' : 'read',
+    }))
+
+    return (
+      <ChatInterface
+        currentUser={defaultUsers[0]}
+        conversations={defaultConversations}
+        selectedConversation={defaultConversations[0]}
+        messages={manyMessages}
+        onSendMessage={(content) => console.log('Send:', content)}
+      />
+    )
+  },
+}
+
+export const WithReactions: Story = {
+  render: () => {
+    const messagesWithReactions: ChatMessage[] = [
+      {
+        id: '1',
+        content: 'Just shipped the new feature! 🚀',
+        senderId: '2',
+        timestamp: new Date(Date.now() - 3600000),
+        status: 'read',
+        reactions: [
+          { emoji: '🎉', userId: '1' },
+          { emoji: '🎉', userId: '3' },
+          { emoji: '👍', userId: '4' },
+        ],
+      },
+      {
+        id: '2',
+        content: 'Amazing work team!',
+        senderId: '1',
+        timestamp: new Date(Date.now() - 3500000),
+        status: 'read',
+        reactions: [
+          { emoji: '❤️', userId: '2' },
+        ],
+      },
+    ]
+
+    return (
+      <ChatInterface
+        currentUser={defaultUsers[0]}
+        conversations={defaultConversations}
+        selectedConversation={defaultConversations[0]}
+        messages={messagesWithReactions}
+        onSendMessage={(content) => console.log('Send:', content)}
+      />
+    )
+  },
+}
+
+export const WithAttachments: Story = {
+  render: () => {
+    const messagesWithAttachments: ChatMessage[] = [
+      {
+        id: '1',
+        content: 'Here are the files you requested',
+        senderId: '2',
+        timestamp: new Date(Date.now() - 3600000),
+        status: 'read',
+        attachments: [
+          { id: 'a1', type: 'file', name: 'report.pdf', url: '#', size: '2.4 MB' },
+          { id: 'a2', type: 'image', name: 'screenshot.png', url: '#', size: '540 KB' },
+        ],
+      },
+      {
+        id: '2',
+        content: 'Thanks! I\'ll review them shortly.',
+        senderId: '1',
+        timestamp: new Date(Date.now() - 3500000),
+        status: 'delivered',
+      },
+    ]
+
+    return (
+      <ChatInterface
+        currentUser={defaultUsers[0]}
+        conversations={defaultConversations}
+        selectedConversation={defaultConversations[0]}
+        messages={messagesWithAttachments}
+        onSendMessage={(content) => console.log('Send:', content)}
+      />
+    )
+  },
+}
+
+export const SearchConversations: Story = {
+  render: () => {
+    const manyConversations: ChatConversation[] = [
+      ...defaultConversations,
+      {
+        id: 'conv4',
+        participants: [defaultUsers[0], { id: '5', name: 'Emily Davis', status: 'online' }],
+        lastMessage: {
+          id: 'm4',
+          content: 'Let me check the design specs',
+          senderId: '5',
+          timestamp: new Date(Date.now() - 86400000),
+          status: 'read',
+        },
+      },
+      {
+        id: 'conv5',
+        participants: [defaultUsers[0], { id: '6', name: 'Michael Chen', status: 'offline' }],
+        lastMessage: {
+          id: 'm5',
+          content: 'The API is ready for testing',
+          senderId: '6',
+          timestamp: new Date(Date.now() - 172800000),
+          status: 'read',
+        },
+      },
+    ]
+
+    return (
+      <ChatInterface
+        currentUser={defaultUsers[0]}
+        conversations={manyConversations}
+        selectedConversation={manyConversations[0]}
+        messages={defaultMessages}
+        onSendMessage={(content) => console.log('Send:', content)}
+        onSelectConversation={(conv) => console.log('Select:', conv)}
+      />
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [messages, setMessages] = React.useState<ChatMessage[]>(defaultMessages)
+    const [selectedConversation, setSelectedConversation] = React.useState<ChatConversation | undefined>(
+      defaultConversations[0]
+    )
+    const [isTyping, setIsTyping] = React.useState(false)
+
+    const handleSend = (content: string) => {
+      const newMessage: ChatMessage = {
+        id: `msg-${Date.now()}`,
+        content,
+        senderId: defaultUsers[0].id,
+        timestamp: new Date(),
+        status: 'sent',
+      }
+      setMessages((prev) => [...prev, newMessage])
+
+      // Simulate typing response
+      setIsTyping(true)
+      setTimeout(() => {
+        setIsTyping(false)
+        const response: ChatMessage = {
+          id: `msg-${Date.now() + 1}`,
+          content: 'Thanks for your message! I\'ll get back to you shortly.',
+          senderId: '2',
+          timestamp: new Date(),
+          status: 'read',
+        }
+        setMessages((prev) => [...prev, response])
+      }, 2000)
+    }
+
+    return (
+      <ChatInterface
+        currentUser={defaultUsers[0]}
+        conversations={defaultConversations}
+        selectedConversation={selectedConversation}
+        messages={messages}
+        typingUsers={isTyping ? [defaultUsers[1]] : []}
+        onSendMessage={handleSend}
+        onSelectConversation={setSelectedConversation}
+        onTyping={() => console.log('User is typing...')}
+      />
+    )
+  },
+}
+
+export const EmptyConversations: Story = {
+  render: () => (
+    <ChatInterface
+      currentUser={defaultUsers[0]}
+      conversations={[]}
+      onSelectConversation={(conv) => console.log('Select:', conv)}
+    />
+  ),
+}
+
+export const MessageStatuses: Story = {
+  render: () => {
+    const messagesWithStatuses: ChatMessage[] = [
+      {
+        id: '1',
+        content: 'This message is sending...',
+        senderId: '1',
+        timestamp: new Date(),
+        status: 'sending',
+      },
+      {
+        id: '2',
+        content: 'This message was sent',
+        senderId: '1',
+        timestamp: new Date(Date.now() - 60000),
+        status: 'sent',
+      },
+      {
+        id: '3',
+        content: 'This message was delivered',
+        senderId: '1',
+        timestamp: new Date(Date.now() - 120000),
+        status: 'delivered',
+      },
+      {
+        id: '4',
+        content: 'This message was read',
+        senderId: '1',
+        timestamp: new Date(Date.now() - 180000),
+        status: 'read',
+      },
+    ]
+
+    return (
+      <ChatInterface
+        currentUser={defaultUsers[0]}
+        conversations={defaultConversations}
+        selectedConversation={defaultConversations[0]}
+        messages={messagesWithStatuses}
+        showSidebar={false}
+        onSendMessage={(content) => console.log('Send:', content)}
+      />
+    )
+  },
+}
+
+export const PinnedConversations: Story = {
+  render: () => {
+    const pinnedConversations: ChatConversation[] = [
+      { ...defaultConversations[0], isPinned: true },
+      { ...defaultConversations[2], isPinned: true },
+      defaultConversations[1],
+    ]
+
+    return (
+      <ChatInterface
+        currentUser={defaultUsers[0]}
+        conversations={pinnedConversations}
+        selectedConversation={pinnedConversations[0]}
+        messages={defaultMessages}
+        onSendMessage={(content) => console.log('Send:', content)}
+        onSelectConversation={(conv) => console.log('Select:', conv)}
+      />
+    )
+  },
+}