@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/chat/Chat.stories.tsx

@@ -0,0 +1,466 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaChat, defaultChatUser, defaultChatConversations, defaultChatMessages } from './index'
+import type { ChatMessage, ChatConversation, ChatUser } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaChat> = {
+  title: 'Blocks/Chat',
+  component: WakaChat,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A chat component with multiple layouts (full, embedded, floating, widget), conversation list, message history, status indicators, and real-time features.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    layout: {
+      control: 'select',
+      options: ['full', 'embedded', 'floating', 'widget'],
+    },
+    showConversationList: {
+      control: 'boolean',
+    },
+    showHeader: {
+      control: 'boolean',
+    },
+    showMessageStatus: {
+      control: 'boolean',
+    },
+    showTimestamps: {
+      control: 'boolean',
+    },
+    showAttachments: {
+      control: 'boolean',
+    },
+    showEmoji: {
+      control: 'boolean',
+    },
+    showDateSeparators: {
+      control: 'boolean',
+    },
+    showInputHint: {
+      control: 'boolean',
+    },
+    sending: {
+      control: 'boolean',
+    },
+    loading: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaChat>
+
+export const Default: Story = {
+  render: () => (
+    <WakaChat
+      messages={defaultChatMessages}
+      conversations={defaultChatConversations}
+      activeConversation={defaultChatConversations[0]}
+      currentUser={defaultChatUser}
+      onSendMessage={(content) => console.log('Send:', content)}
+      onConversationSelect={(conv) => console.log('Select:', conv)}
+      onAudioCall={() => console.log('Audio call')}
+      onVideoCall={() => console.log('Video call')}
+    />
+  ),
+}
+
+export const FullLayout: Story = {
+  render: () => (
+    <WakaChat
+      messages={defaultChatMessages}
+      conversations={defaultChatConversations}
+      activeConversation={defaultChatConversations[0]}
+      currentUser={defaultChatUser}
+      layout="full"
+      onSendMessage={(content) => console.log('Send:', content)}
+      onConversationSelect={(conv) => console.log('Select:', conv)}
+    />
+  ),
+}
+
+export const EmbeddedLayout: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaChat
+        messages={defaultChatMessages}
+        conversations={defaultChatConversations}
+        activeConversation={defaultChatConversations[0]}
+        currentUser={defaultChatUser}
+        layout="embedded"
+        onSendMessage={(content) => console.log('Send:', content)}
+      />
+    </div>
+  ),
+}
+
+export const FloatingLayout: Story = {
+  render: () => (
+    <div className="h-screen flex items-end justify-end p-4 bg-muted/30">
+      <WakaChat
+        messages={defaultChatMessages}
+        activeConversation={defaultChatConversations[0]}
+        currentUser={defaultChatUser}
+        layout="floating"
+        showConversationList={false}
+        headerTitle="Support Chat"
+        onSendMessage={(content) => console.log('Send:', content)}
+        onClose={() => console.log('Close')}
+        onMinimize={() => console.log('Minimize')}
+      />
+    </div>
+  ),
+}
+
+export const WidgetLayout: Story = {
+  render: () => (
+    <div className="h-screen flex items-end justify-end p-4 bg-muted/30">
+      <WakaChat
+        messages={defaultChatMessages}
+        activeConversation={defaultChatConversations[0]}
+        currentUser={defaultChatUser}
+        layout="widget"
+        showConversationList={false}
+        headerTitle="Chat"
+        onSendMessage={(content) => console.log('Send:', content)}
+        onClose={() => console.log('Close')}
+        onMinimize={() => console.log('Minimize')}
+      />
+    </div>
+  ),
+}
+
+export const WidgetMinimized: Story = {
+  render: () => (
+    <div className="h-screen flex items-end justify-end p-4 bg-muted/30">
+      <WakaChat
+        messages={defaultChatMessages}
+        conversations={defaultChatConversations}
+        currentUser={defaultChatUser}
+        layout="widget"
+        minimized
+        onMinimize={() => console.log('Toggle minimize')}
+      />
+    </div>
+  ),
+}
+
+export const NoConversationSelected: Story = {
+  render: () => (
+    <WakaChat
+      messages={[]}
+      conversations={defaultChatConversations}
+      currentUser={defaultChatUser}
+      onConversationSelect={(conv) => console.log('Select:', conv)}
+    />
+  ),
+}
+
+export const WithUnreadMessages: Story = {
+  render: () => {
+    const conversationsWithUnread: ChatConversation[] = [
+      {
+        ...defaultChatConversations[0],
+        unreadCount: 5,
+      },
+      {
+        ...defaultChatConversations[1],
+        unreadCount: 12,
+      },
+    ]
+
+    return (
+      <WakaChat
+        messages={defaultChatMessages}
+        conversations={conversationsWithUnread}
+        activeConversation={conversationsWithUnread[0]}
+        currentUser={defaultChatUser}
+        onConversationSelect={(conv) => console.log('Select:', conv)}
+      />
+    )
+  },
+}
+
+export const ManyMessages: Story = {
+  render: () => {
+    const manyMessages: ChatMessage[] = Array.from({ length: 50 }, (_, i) => ({
+      id: `msg-${i}`,
+      content: i % 2 === 0 ? `Message from other user ${i + 1}` : `My response ${i + 1}`,
+      sender: i % 2 === 0
+        ? { id: '2', name: 'Marie Dupont', status: 'online' as const }
+        : defaultChatUser,
+      timestamp: new Date(Date.now() - (50 - i) * 1000 * 60 * 5),
+      status: 'read' as const,
+    }))
+
+    return (
+      <WakaChat
+        messages={manyMessages}
+        conversations={defaultChatConversations}
+        activeConversation={defaultChatConversations[0]}
+        currentUser={defaultChatUser}
+        onSendMessage={(content) => console.log('Send:', content)}
+      />
+    )
+  },
+}
+
+export const WithAttachments: Story = {
+  render: () => {
+    const messagesWithAttachments: ChatMessage[] = [
+      {
+        id: '1',
+        content: 'Voici les fichiers que tu as demandé',
+        sender: { id: '2', name: 'Marie Dupont' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 10),
+        attachments: [
+          { type: 'file', url: '#', name: 'document.pdf', size: 2456000 },
+          { type: 'file', url: '#', name: 'report.xlsx', size: 1234000 },
+        ],
+      },
+      {
+        id: '2',
+        content: 'Et une image aussi',
+        sender: { id: '2', name: 'Marie Dupont' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 5),
+        attachments: [
+          { type: 'image', url: 'https://picsum.photos/300/200', name: 'screenshot.png' },
+        ],
+      },
+      {
+        id: '3',
+        content: 'Super, merci !',
+        sender: defaultChatUser,
+        timestamp: new Date(),
+        status: 'read',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaChat
+          messages={messagesWithAttachments}
+          activeConversation={defaultChatConversations[0]}
+          currentUser={defaultChatUser}
+          layout="embedded"
+          showConversationList={false}
+          onSendMessage={(content) => console.log('Send:', content)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithReply: Story = {
+  render: () => {
+    const messagesWithReply: ChatMessage[] = [
+      {
+        id: '1',
+        content: 'Tu as vu le nouveau design ?',
+        sender: { id: '2', name: 'Marie Dupont' },
+        timestamp: new Date(Date.now() - 1000 * 60 * 30),
+      },
+      {
+        id: '2',
+        content: 'Oui, il est génial !',
+        sender: defaultChatUser,
+        timestamp: new Date(Date.now() - 1000 * 60 * 25),
+        replyTo: {
+          id: '1',
+          content: 'Tu as vu le nouveau design ?',
+          sender: { id: '2', name: 'Marie Dupont' },
+          timestamp: new Date(Date.now() - 1000 * 60 * 30),
+        },
+        status: 'read',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <WakaChat
+          messages={messagesWithReply}
+          activeConversation={defaultChatConversations[0]}
+          currentUser={defaultChatUser}
+          layout="embedded"
+          showConversationList={false}
+          onSendMessage={(content) => console.log('Send:', content)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: () => (
+    <WakaChat
+      messages={[]}
+      conversations={defaultChatConversations}
+      activeConversation={defaultChatConversations[0]}
+      currentUser={defaultChatUser}
+      loading
+    />
+  ),
+}
+
+export const Sending: Story = {
+  render: () => (
+    <WakaChat
+      messages={defaultChatMessages}
+      conversations={defaultChatConversations}
+      activeConversation={defaultChatConversations[0]}
+      currentUser={defaultChatUser}
+      sending
+      onSendMessage={(content) => console.log('Send:', content)}
+    />
+  ),
+}
+
+export const WithCloseButton: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaChat
+        messages={defaultChatMessages}
+        activeConversation={defaultChatConversations[0]}
+        currentUser={defaultChatUser}
+        layout="embedded"
+        showConversationList={false}
+        showCloseButton
+        onCloseConversation={() => console.log('Close conversation')}
+        onSendMessage={(content) => console.log('Send:', content)}
+      />
+    </div>
+  ),
+}
+
+export const NoDateSeparators: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaChat
+        messages={defaultChatMessages}
+        activeConversation={defaultChatConversations[0]}
+        currentUser={defaultChatUser}
+        layout="embedded"
+        showConversationList={false}
+        showDateSeparators={false}
+        onSendMessage={(content) => console.log('Send:', content)}
+      />
+    </div>
+  ),
+}
+
+export const CustomPlaceholder: Story = {
+  render: () => (
+    <div className="p-6">
+      <WakaChat
+        messages={defaultChatMessages}
+        activeConversation={defaultChatConversations[0]}
+        currentUser={defaultChatUser}
+        layout="embedded"
+        showConversationList={false}
+        inputPlaceholder="Type your message here..."
+        inputHintText="Press Enter to send, Shift+Enter for new line"
+        onSendMessage={(content) => console.log('Send:', content)}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [messages, setMessages] = React.useState<ChatMessage[]>(defaultChatMessages)
+    const [activeConversation, setActiveConversation] = React.useState<ChatConversation>(defaultChatConversations[0])
+    const [sending, setSending] = React.useState(false)
+
+    const handleSend = async (content: string) => {
+      setSending(true)
+
+      // Simulate sending
+      await new Promise(r => setTimeout(r, 500))
+
+      const newMessage: ChatMessage = {
+        id: `msg-${Date.now()}`,
+        content,
+        sender: defaultChatUser,
+        timestamp: new Date(),
+        status: 'sent',
+      }
+
+      setMessages(prev => [...prev, newMessage])
+      setSending(false)
+
+      // Simulate response
+      setTimeout(() => {
+        const response: ChatMessage = {
+          id: `msg-${Date.now() + 1}`,
+          content: 'Merci pour votre message ! Je vous réponds dès que possible.',
+          sender: activeConversation.participants.find(p => p.id !== defaultChatUser.id) || { id: '2', name: 'Support' },
+          timestamp: new Date(),
+        }
+        setMessages(prev => [...prev, response])
+      }, 2000)
+    }
+
+    return (
+      <WakaChat
+        messages={messages}
+        conversations={defaultChatConversations}
+        activeConversation={activeConversation}
+        currentUser={defaultChatUser}
+        sending={sending}
+        onSendMessage={handleSend}
+        onConversationSelect={setActiveConversation}
+        onAudioCall={() => alert('Starting audio call...')}
+        onVideoCall={() => alert('Starting video call...')}
+      />
+    )
+  },
+}
+
+export const SupportChat: Story = {
+  render: () => {
+    const supportUser: ChatUser = {
+      id: 'support',
+      name: 'Support Team',
+      status: 'online',
+    }
+
+    const supportConversation: ChatConversation = {
+      id: 'support-conv',
+      participants: [defaultChatUser, supportUser],
+    }
+
+    const supportMessages: ChatMessage[] = [
+      {
+        id: '1',
+        content: 'Bonjour ! Comment puis-je vous aider aujourd\'hui ?',
+        sender: supportUser,
+        timestamp: new Date(Date.now() - 1000 * 60 * 5),
+      },
+    ]
+
+    return (
+      <div className="h-screen flex items-end justify-end p-4 bg-gradient-to-br from-blue-50 to-purple-50">
+        <WakaChat
+          messages={supportMessages}
+          activeConversation={supportConversation}
+          currentUser={defaultChatUser}
+          layout="floating"
+          showConversationList={false}
+          headerTitle="Support"
+          statusText="Généralement répond sous 5 minutes"
+          showInputHint={false}
+          onSendMessage={(content) => console.log('Send:', content)}
+          onClose={() => console.log('Close')}
+          onMinimize={() => console.log('Minimize')}
+        />
+      </div>
+    )
+  },
+}