@mdxui/zero 6.0.0

package/tests/visual/zero-components.spec.ts

@@ -0,0 +1,321 @@
+import { test, expect } from '@playwright/test'
+
+/**
+ * Visual Regression Tests for @mdxui/zero components
+ *
+ * These tests ensure our Zero email components match the original
+ * Mail-0/Zero design by comparing screenshots pixel-by-pixel.
+ *
+ * Run: pnpm test:visual
+ * Update baselines: pnpm test:visual --update-snapshots
+ *
+ * Storybook URLs follow the pattern:
+ * /iframe.html?id=<story-title>--<story-name>&viewMode=story
+ */
+
+test.describe('Mail List Components', () => {
+  test('MailList - default view', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-maillist--default&viewMode=story')
+    await page.waitForLoadState('networkidle')
+
+    // Wait for content to render
+    await page.waitForSelector('[data-slot="mail-list"]')
+
+    await expect(page).toHaveScreenshot('mail-list-default.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailList - compact mode', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-maillist--compact&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-list"]')
+
+    await expect(page).toHaveScreenshot('mail-list-compact.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailList - multi-select mode', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-maillist--multi-select&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-list"]')
+
+    await expect(page).toHaveScreenshot('mail-list-multi-select.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailList - empty state', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-maillist--empty&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-list-empty"]')
+
+    await expect(page).toHaveScreenshot('mail-list-empty.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailList - loading skeleton', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-maillist--loading&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-skeleton"]')
+
+    await expect(page).toHaveScreenshot('mail-list-loading.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailItem - single item', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-maillist--single-item&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-item"]')
+
+    await expect(page).toHaveScreenshot('mail-item-single.png', {
+      fullPage: true,
+    })
+  })
+})
+
+test.describe('Thread Display Components', () => {
+  test('ThreadDisplay - full thread', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-threaddisplay--default&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="thread-display"]')
+
+    await expect(page).toHaveScreenshot('thread-display-default.png', {
+      fullPage: true,
+    })
+  })
+
+  test('ThreadDisplay - no navigation', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-threaddisplay--no-navigation&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="thread-display"]')
+
+    await expect(page).toHaveScreenshot('thread-display-no-nav.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MessageView - expanded', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-threaddisplay--single-message-view&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="message-view"]')
+
+    await expect(page).toHaveScreenshot('message-view-expanded.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MessageView - collapsed', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-mail-threaddisplay--collapsed-message-view&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="message-view"]')
+
+    await expect(page).toHaveScreenshot('message-view-collapsed.png', {
+      fullPage: true,
+    })
+  })
+})
+
+test.describe('Sidebar Components', () => {
+  test('MailSidebar - full view', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailsidebar--default&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-sidebar"]')
+
+    await expect(page).toHaveScreenshot('mail-sidebar-default.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailSidebar - collapsed', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailsidebar--collapsed&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-sidebar"]')
+
+    await expect(page).toHaveScreenshot('mail-sidebar-collapsed.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailSidebar - no labels', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailsidebar--no-labels&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-sidebar"]')
+
+    await expect(page).toHaveScreenshot('mail-sidebar-no-labels.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailSidebar - many unread', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailsidebar--many-unread&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-sidebar"]')
+
+    await expect(page).toHaveScreenshot('mail-sidebar-many-unread.png', {
+      fullPage: true,
+    })
+  })
+})
+
+test.describe('Email Composer Components', () => {
+  test('EmailComposer - new email', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-compose-emailcomposer--default&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="email-composer"]')
+
+    await expect(page).toHaveScreenshot('email-composer-default.png', {
+      fullPage: true,
+    })
+  })
+
+  test('EmailComposer - with draft', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-compose-emailcomposer--with-draft&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="email-composer"]')
+
+    await expect(page).toHaveScreenshot('email-composer-draft.png', {
+      fullPage: true,
+    })
+  })
+
+  test('EmailComposer - reply mode', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-compose-emailcomposer--reply&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="email-composer"]')
+
+    await expect(page).toHaveScreenshot('email-composer-reply.png', {
+      fullPage: true,
+    })
+  })
+
+  test('EmailComposer - with CC/BCC', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-compose-emailcomposer--with-cc-bcc&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="email-composer"]')
+
+    await expect(page).toHaveScreenshot('email-composer-cc-bcc.png', {
+      fullPage: true,
+    })
+  })
+
+  test('RecipientInput', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-compose-emailcomposer--recipient-input-default&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="recipient-input"]')
+
+    await expect(page).toHaveScreenshot('recipient-input.png', {
+      fullPage: true,
+    })
+  })
+
+  test('EditorToolbar - default', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-compose-emailcomposer--toolbar-default&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="editor-toolbar"]')
+
+    await expect(page).toHaveScreenshot('editor-toolbar.png', {
+      fullPage: true,
+    })
+  })
+
+  test('EditorToolbar - compact', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-compose-emailcomposer--toolbar-compact&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="editor-toolbar"]')
+
+    await expect(page).toHaveScreenshot('editor-toolbar-compact.png', {
+      fullPage: true,
+    })
+  })
+})
+
+test.describe('Mail Shell (Full Dashboard)', () => {
+  test('MailShell - default layout', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailshell--default&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-shell"]')
+
+    await expect(page).toHaveScreenshot('mail-shell-default.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailShell - no thread selected', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailshell--no-thread-selected&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-shell"]')
+
+    await expect(page).toHaveScreenshot('mail-shell-no-thread.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailShell - collapsed sidebar', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailshell--collapsed-sidebar&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-shell"]')
+
+    await expect(page).toHaveScreenshot('mail-shell-collapsed.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailShell - empty inbox', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailshell--empty-inbox&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-shell"]')
+
+    await expect(page).toHaveScreenshot('mail-shell-empty.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailShell - loading state', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailshell--loading&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-shell"]')
+
+    await expect(page).toHaveScreenshot('mail-shell-loading.png', {
+      fullPage: true,
+    })
+  })
+
+  test('MailShell - compact mode', async ({ page }) => {
+    await page.goto('/iframe.html?id=zero-dashboard-mailshell--compact-mode&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-shell"]')
+
+    await expect(page).toHaveScreenshot('mail-shell-compact.png', {
+      fullPage: true,
+    })
+  })
+})
+
+test.describe('Responsive Behavior', () => {
+  test('MailShell - tablet view', async ({ page }) => {
+    await page.setViewportSize({ width: 1024, height: 768 })
+    await page.goto('/iframe.html?id=zero-dashboard-mailshell--default&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-shell"]')
+
+    await expect(page).toHaveScreenshot('mail-shell-tablet.png', {
+      fullPage: true,
+    })
+  })
+
+  test.skip('MailShell - mobile view', async ({ page }) => {
+    // Skip on wide viewport projects
+    await page.setViewportSize({ width: 390, height: 844 })
+    await page.goto('/iframe.html?id=zero-dashboard-mailshell--no-thread-selected&viewMode=story')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('[data-slot="mail-shell"]')
+
+    await expect(page).toHaveScreenshot('mail-shell-mobile.png', {
+      fullPage: true,
+    })
+  })
+})

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@mdxui/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}