77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { ChatMessageComponent } from './ChatMessage';
|
|
import { ChatMessage } from '../store/chatStore';
|
|
|
|
// Mock data
|
|
const mockMessage: ChatMessage = {
|
|
id: 'msg-1',
|
|
conversation_id: 'conv-1',
|
|
sender_id: 'user-1',
|
|
sender_username: 'Alice',
|
|
content: 'Hello, how are you doing today?',
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString(),
|
|
read_by: [],
|
|
reactions: { '👍': ['user-2'] },
|
|
attachments: [],
|
|
};
|
|
|
|
const myMessage: ChatMessage = {
|
|
...mockMessage,
|
|
id: 'msg-2',
|
|
sender_id: 'me', // Assuming 'me' matches current user logic or fallback
|
|
sender_username: 'You',
|
|
content: 'I am doing great! Just working on some Storybook stories.',
|
|
reactions: {},
|
|
};
|
|
|
|
const attachmentMessage: ChatMessage = {
|
|
...mockMessage,
|
|
id: 'msg-3',
|
|
content: 'Check out this design.',
|
|
attachments: [
|
|
{
|
|
file_name: 'design-v1.png',
|
|
file_type: 'image/png',
|
|
file_url: 'https://images.unsplash.com/photo-1561070791-2526d30994b5',
|
|
file_size: 1024,
|
|
},
|
|
],
|
|
};
|
|
|
|
const meta = {
|
|
title: 'Components/Features/Chat/Components/ChatMessage',
|
|
component: ChatMessageComponent,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
message: { control: 'object' },
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="p-4 bg-card min-h-[200px] flex flex-col justify-end">
|
|
<Story />
|
|
</div>
|
|
)
|
|
]
|
|
} satisfies Meta<typeof ChatMessageComponent>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const OthersMessage: Story = {
|
|
args: {
|
|
message: mockMessage,
|
|
},
|
|
};
|
|
|
|
export const MyMessage: Story = {
|
|
args: {
|
|
message: myMessage,
|
|
},
|
|
};
|
|
|
|
export const WithAttachment: Story = {
|
|
args: {
|
|
message: attachmentMessage,
|
|
},
|
|
};
|