@linktr.ee/messaging-react 1.32.1 → 1.33.0-rc-1777504230

package/src/components/MediaMessage/MediaMessage.stories.tsx

@@ -0,0 +1,233 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import type { LocalMessage } from 'stream-chat'
+
+import { MediaMessage } from '.'
+
+const meta: Meta<typeof MediaMessage> = {
+  title: 'Components/MediaMessage',
+  component: MediaMessage,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+
+const SENDER = { id: 'user-other', name: 'Jane Creator', image: 'https://i.pravatar.cc/40?img=5' }
+const ME = { id: 'user-me', name: 'Me' }
+
+const base = (overrides: Partial<LocalMessage> = {}): LocalMessage => ({
+  id: 'msg-1',
+  text: '',
+  type: 'regular',
+  created_at: new Date(),
+  updated_at: new Date(),
+  user: SENDER,
+  attachments: [],
+  ...overrides,
+})
+
+const VARIANTS = [
+  {
+    label: 'Video',
+    attachment: {
+      type: 'video',
+      asset_url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      mime_type: 'video/mp4',
+      title: "Alicia's Workout Plan",
+      file_size: 788_456,
+    },
+  },
+  {
+    label: 'Audio',
+    attachment: {
+      type: 'audio',
+      asset_url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+      mime_type: 'audio/mpeg',
+      title: 'Morning Meditation',
+      file_size: 6_900_000,
+    },
+  },
+  {
+    label: 'Image',
+    attachment: {
+      type: 'image',
+      image_url: 'https://picsum.photos/seed/storybook/560/315',
+      mime_type: 'image/jpeg',
+      title: 'Picture of my cat',
+      file_size: 3_355_443,
+    },
+  },
+  {
+    label: 'Document',
+    attachment: {
+      type: 'file',
+      asset_url: 'https://www.w3.org/WAI/WCAG21/wcag21.pdf',
+      mime_type: 'application/pdf',
+      title: 'Strength Training Guide',
+      file_size: 1_240_000,
+    },
+  },
+  {
+    label: 'Unknown',
+    attachment: {
+      type: 'file',
+      asset_url: 'https://www.w3.org/WAI/WCAG21/wcag21.pdf',
+      mime_type: 'application/octet-stream',
+      title: 'Unknown Attachment',
+      file_size: 456_000,
+    },
+  },
+] as const
+
+const LINK_VARIANTS = [
+  {
+    label: 'With image',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/brieparsons',
+      title: 'World Famous 3 Bottle Grey Wash Set',
+      text: 'When its time to shade, the World Famous Grey Wash set has you covered.',
+      image_url: 'https://picsum.photos/seed/linkcard/560/315',
+    },
+  },
+  {
+    label: 'No image',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/brieparsons',
+      title: 'World Famous 3 Bottle Grey Wash Set',
+      text: 'When its time to shade, the World Famous Grey Wash set has you covered.',
+    },
+  },
+  {
+    label: 'Title only',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/someone',
+      title: 'Check out my Linktree',
+    },
+  },
+  {
+    label: 'URL only',
+    attachment: {
+      type: 'link',
+      og_scrape_url: 'https://linktr.ee/someone',
+    },
+  },
+] as const
+
+// ---------------------------------------------------------------------------
+// Layout primitives
+// ---------------------------------------------------------------------------
+
+const GridTable: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="p-12 bg-[#F9F7F4]">
+    <table className="border-separate border-spacing-4">{children}</table>
+  </div>
+)
+
+const GridHead: React.FC<{ labels: readonly string[] }> = ({ labels }) => (
+  <thead>
+    <tr>
+      {labels.map((label) => (
+        <th key={label} className="text-left text-xs font-medium text-black/40 pb-2">
+          {label}
+        </th>
+      ))}
+    </tr>
+  </thead>
+)
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const Received: StoryFn = () => (
+  <GridTable>
+    <GridHead labels={VARIANTS.map((v) => v.label)} />
+    <tbody>
+      <tr>
+        {VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={false}
+              message={base({ user: SENDER, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </GridTable>
+)
+Received.parameters = {
+  docs: {
+    description: {
+      story: 'Received messages — left-aligned with avatar, light gray card background.',
+    },
+  },
+}
+
+export const Sent: StoryFn = () => (
+  <GridTable>
+    <GridHead labels={VARIANTS.map((v) => v.label)} />
+    <tbody>
+      <tr>
+        {VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={true}
+              message={base({ user: ME, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </GridTable>
+)
+Sent.parameters = {
+  docs: {
+    description: {
+      story: 'Sent messages — right-aligned, no avatar, black card background.',
+    },
+  },
+}
+
+export const Links: StoryFn = () => (
+  <GridTable>
+    <GridHead labels={LINK_VARIANTS.map((v) => v.label)} />
+    <tbody>
+      <tr>
+        {LINK_VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={false}
+              message={base({ user: SENDER, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+      <tr>
+        {LINK_VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={true}
+              message={base({ user: ME, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </GridTable>
+)
+Links.parameters = {
+  docs: {
+    description: {
+      story: 'Link preview cards — top row received, bottom row sent. Shows thumbnail, title, description, and URL with image fallback.',
+    },
+  },
+}