@mdxui/zero 6.0.0

package/src/mail/message-view.stories.tsx

@@ -0,0 +1,459 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { Message } from "mdxui";
+import { MessageHeader, MessageView } from "./message-view";
+
+// Sample messages for testing different MessageView states
+const simpleMessage: Message = {
+	id: "m1",
+	threadId: "t1",
+	subject: "Quick question about the project",
+	from: { address: "sarah@company.com", name: "Sarah Chen" },
+	to: [{ address: "me@company.com", name: "Me" }],
+	date: new Date(Date.now() - 3600000).toISOString(),
+	snippet: "Hey, just wanted to check in on the project timeline.",
+	textBody: `Hey,
+
+Just wanted to check in on the project timeline. Are we still on track for the Q4 launch?
+
+Let me know if you need anything from my end.
+
+Thanks,
+Sarah`,
+	attachments: [],
+	labels: [],
+	isRead: true,
+	isStarred: false,
+	isImportant: false,
+	isDraft: false,
+};
+
+const richHtmlMessage: Message = {
+	id: "m2",
+	threadId: "t2",
+	subject: "Product Launch Strategy - Q1 2025",
+	from: { address: "alex@startup.io", name: "Alex Rivera" },
+	to: [{ address: "me@company.com", name: "Me" }],
+	cc: [
+		{ address: "marketing@startup.io", name: "Marketing Team" },
+		{ address: "sales@startup.io", name: "Sales Team" },
+	],
+	date: new Date(Date.now() - 7200000).toISOString(),
+	snippet:
+		"Great ideas! I think we should focus on the enterprise segment first...",
+	textBody: `Hi there,
+
+Thanks for sharing the product launch strategy. I've reviewed the document and have some thoughts:
+
+1. **Enterprise Focus**: I strongly agree we should target enterprise customers first. They have the budget and the pain points our product solves.
+
+2. **Timeline**: Q1 might be aggressive given the holiday freeze. Consider a soft launch in late January with full GA in February.
+
+3. **Marketing Channels**:
+   - LinkedIn ads for B2B reach
+   - Content marketing with case studies
+   - Webinar series with industry experts
+
+Let me know what you think about these suggestions. Happy to hop on a call to discuss further.
+
+Best,
+Alex`,
+	htmlBody: `<div>
+    <p>Hi there,</p>
+    <p>Thanks for sharing the product launch strategy. I've reviewed the document and have some thoughts:</p>
+    <ol>
+      <li><strong>Enterprise Focus</strong>: I strongly agree we should target enterprise customers first. They have the budget and the pain points our product solves.</li>
+      <li><strong>Timeline</strong>: Q1 might be aggressive given the holiday freeze. Consider a soft launch in late January with full GA in February.</li>
+      <li><strong>Marketing Channels</strong>:
+        <ul>
+          <li>LinkedIn ads for B2B reach</li>
+          <li>Content marketing with case studies</li>
+          <li>Webinar series with industry experts</li>
+        </ul>
+      </li>
+    </ol>
+    <p>Let me know what you think about these suggestions. Happy to hop on a call to discuss further.</p>
+    <p>Best,<br/>Alex</p>
+  </div>`,
+	attachments: [
+		{
+			id: "a1",
+			filename: "launch-timeline.pdf",
+			mimeType: "application/pdf",
+			size: 245000,
+			url: "#",
+			inline: false,
+		},
+		{
+			id: "a2",
+			filename: "market-research.xlsx",
+			mimeType:
+				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+			size: 89000,
+			url: "#",
+			inline: false,
+		},
+	],
+	labels: [{ id: "l1", name: "Important", color: "#ef4444", type: "user" }],
+	isRead: true,
+	isStarred: true,
+	isImportant: true,
+	isDraft: false,
+};
+
+const starredMessage: Message = {
+	id: "m3",
+	threadId: "t3",
+	subject: "Critical: Production Issue Alert",
+	from: { address: "alerts@monitoring.io", name: "Monitoring System" },
+	to: [{ address: "oncall@company.com", name: "On-Call Team" }],
+	date: new Date(Date.now() - 1800000).toISOString(),
+	snippet: "Error rate increased to 15% in the last 5 minutes...",
+	textBody: `ALERT: High Error Rate Detected
+
+Service: api.example.com.ai
+Error Rate: 15%
+Duration: 5 minutes
+Severity: Critical
+
+Please investigate immediately.
+
+View dashboard: https://monitoring.io/dashboard
+View logs: https://monitoring.io/logs`,
+	attachments: [],
+	labels: [
+		{ id: "l2", name: "Urgent", color: "#ef4444", type: "user" },
+		{ id: "l3", name: "Production", color: "#f59e0b", type: "system" },
+	],
+	isRead: false,
+	isStarred: true,
+	isImportant: true,
+	isDraft: false,
+};
+
+const messageWithImages: Message = {
+	id: "m4",
+	threadId: "t4",
+	subject: "Design Mockups - Homepage Redesign",
+	from: { address: "mike@design.co", name: "Mike Johnson" },
+	to: [{ address: "me@company.com", name: "Me" }],
+	date: new Date(Date.now() - 43200000).toISOString(),
+	snippet: "Here are the updated mockups for the homepage redesign.",
+	textBody:
+		"Here are the updated mockups for the homepage redesign. Let me know what you think!",
+	attachments: [
+		{
+			id: "a3",
+			filename: "homepage-hero.png",
+			mimeType: "image/png",
+			size: 1200000,
+			url: "#",
+			thumbnailUrl:
+				"https://placehold.co/400x300/e2e8f0/475569?text=Homepage+Hero",
+			inline: false,
+		},
+		{
+			id: "a4",
+			filename: "homepage-features.png",
+			mimeType: "image/png",
+			size: 980000,
+			url: "#",
+			thumbnailUrl:
+				"https://placehold.co/400x300/e2e8f0/475569?text=Features+Section",
+			inline: false,
+		},
+		{
+			id: "a5",
+			filename: "homepage-pricing.png",
+			mimeType: "image/png",
+			size: 850000,
+			url: "#",
+			thumbnailUrl:
+				"https://placehold.co/400x300/e2e8f0/475569?text=Pricing+Table",
+			inline: false,
+		},
+	],
+	labels: [{ id: "l4", name: "Design", color: "#10b981", type: "user" }],
+	isRead: true,
+	isStarred: false,
+	isImportant: false,
+	isDraft: false,
+};
+
+const messageWithReplyTo: Message = {
+	id: "m5",
+	threadId: "t5",
+	subject: "Newsletter: Weekly Product Updates",
+	from: { address: "newsletter@product.io", name: "Product Updates" },
+	to: [{ address: "me@company.com", name: "Me" }],
+	replyTo: { address: "support@product.io", name: "Product Support" },
+	date: new Date(Date.now() - 86400000).toISOString(),
+	snippet: "Check out what's new this week...",
+	htmlBody: `<div>
+    <h2 style="color: #3b82f6;">What's New This Week</h2>
+    <ul>
+      <li>New dashboard widgets</li>
+      <li>Improved export functionality</li>
+      <li>Bug fixes and performance improvements</li>
+    </ul>
+    <p>Thanks for using our product!</p>
+  </div>`,
+	attachments: [],
+	labels: [],
+	isRead: true,
+	isStarred: false,
+	isImportant: false,
+	isDraft: false,
+};
+
+const unreadMessage: Message = {
+	id: "m6",
+	threadId: "t6",
+	subject: "Meeting Notes - Sprint Planning",
+	from: { address: "john@company.com", name: "John Doe" },
+	to: [
+		{ address: "me@company.com", name: "Me" },
+		{ address: "team@company.com", name: "Development Team" },
+	],
+	date: new Date(Date.now() - 900000).toISOString(),
+	snippet: "Here are the notes from today's sprint planning meeting.",
+	textBody: `Team,
+
+Here are the notes from today's sprint planning meeting:
+
+Sprint Goals:
+- Complete user authentication flow
+- Implement dashboard analytics
+- Fix critical bugs from last sprint
+
+Action Items:
+- @sarah: Set up OAuth integration
+- @mike: Design dashboard mockups
+- @alex: Review and prioritize bug backlog
+
+Next meeting: Friday at 2pm
+
+Cheers,
+John`,
+	attachments: [
+		{
+			id: "a6",
+			filename: "sprint-planning-notes.docx",
+			mimeType:
+				"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+			size: 45000,
+			url: "#",
+			inline: false,
+		},
+	],
+	labels: [{ id: "l5", name: "Meetings", color: "#8b5cf6", type: "user" }],
+	isRead: false,
+	isStarred: false,
+	isImportant: false,
+	isDraft: false,
+};
+
+const meta: Meta<typeof MessageView> = {
+	title: "Zero/Mail/MessageView",
+	component: MessageView,
+	parameters: {
+		layout: "centered",
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		isExpanded: {
+			control: "boolean",
+		},
+		showHeaders: {
+			control: "boolean",
+		},
+	},
+	decorators: [
+		(Story) => (
+			<div className="w-full max-w-4xl bg-background">
+				<Story />
+			</div>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default expanded message view.
+ * Shows full message content with action buttons.
+ */
+export const Default: Story = {
+	args: {
+		message: simpleMessage,
+		isExpanded: true,
+		showHeaders: false,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Message with rich HTML content and formatting.
+ * Includes lists, bold text, and structured content.
+ */
+export const RichHtml: Story = {
+	args: {
+		message: richHtmlMessage,
+		isExpanded: true,
+		showHeaders: false,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Starred and important message.
+ * Shows star icon in header and importance indicators.
+ */
+export const Starred: Story = {
+	args: {
+		message: starredMessage,
+		isExpanded: true,
+		showHeaders: false,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Collapsed message view.
+ * Shows only snippet and sender avatar.
+ */
+export const Collapsed: Story = {
+	args: {
+		message: simpleMessage,
+		isExpanded: false,
+		showHeaders: false,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Message with CC recipients.
+ * Shows additional recipient fields when headers expanded.
+ */
+export const WithCc: Story = {
+	args: {
+		message: richHtmlMessage,
+		isExpanded: true,
+		showHeaders: true,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Message with Reply-To address.
+ * Shows Reply-To field in expanded headers.
+ */
+export const WithReplyTo: Story = {
+	args: {
+		message: messageWithReplyTo,
+		isExpanded: true,
+		showHeaders: true,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Message with file attachments.
+ * Shows attachment list below message body.
+ */
+export const WithAttachments: Story = {
+	args: {
+		message: richHtmlMessage,
+		isExpanded: true,
+		showHeaders: false,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Message with image attachments.
+ * Shows image thumbnails in attachment list.
+ */
+export const WithImages: Story = {
+	args: {
+		message: messageWithImages,
+		isExpanded: true,
+		showHeaders: false,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Unread message.
+ * Typically shown with different styling in thread context.
+ */
+export const Unread: Story = {
+	args: {
+		message: unreadMessage,
+		isExpanded: true,
+		showHeaders: false,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Message with multiple labels.
+ * Shows colored badges for message categorization.
+ */
+export const WithLabels: Story = {
+	args: {
+		message: starredMessage,
+		isExpanded: true,
+		showHeaders: false,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Plain text message without HTML.
+ * Preserves formatting with whitespace.
+ */
+export const PlainText: Story = {
+	args: {
+		message: simpleMessage,
+		isExpanded: true,
+		showHeaders: false,
+		showReplyComposer: false,
+	},
+};
+
+/**
+ * Message header component in expanded state.
+ * Shows all recipient details and metadata.
+ */
+export const HeaderExpanded: StoryObj<typeof MessageHeader> = {
+	render: () => (
+		<div className="max-w-4xl border rounded-lg bg-background p-4">
+			<MessageHeader message={richHtmlMessage} expanded={true} />
+		</div>
+	),
+};
+
+/**
+ * Message header component in collapsed state.
+ * Shows minimal recipient information.
+ */
+export const HeaderCollapsed: StoryObj<typeof MessageHeader> = {
+	render: () => (
+		<div className="max-w-4xl border rounded-lg bg-background p-4">
+			<MessageHeader message={richHtmlMessage} expanded={false} />
+		</div>
+	),
+};
+
+/**
+ * Message header with star indicator.
+ * Shows visual indicator for starred messages.
+ */
+export const HeaderStarred: StoryObj<typeof MessageHeader> = {
+	render: () => (
+		<div className="max-w-4xl border rounded-lg bg-background p-4">
+			<MessageHeader message={starredMessage} expanded={false} />
+		</div>
+	),
+};