@linktr.ee/messaging-react 4.2.1 → 4.3.0-rc-1787410254

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

@@ -1,270 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react'
-import React from 'react'
-import type { LocalMessage } from 'stream-chat'
-
-import { now } from '../../stories/decorators/storyTime'
-
-import { MediaMessage } from '.'
-
-const meta: Meta<typeof MediaMessage> = {
-  title: 'MediaMessage',
-  component: MediaMessage,
-  parameters: {
-    layout: 'fullscreen',
-  },
-}
-export default meta
-
-type MessageAttachment = NonNullable<LocalMessage['attachments']>[number]
-
-const base = (overrides: Partial<LocalMessage> = {}): LocalMessage => {
-  const defaultMessage: LocalMessage = {
-    id: 'msg-1',
-    text: '',
-    type: 'regular',
-    created_at: now(),
-    updated_at: now(),
-    deleted_at: null,
-    pinned_at: null,
-    status: 'received',
-    attachments: [],
-  }
-
-  return {
-    ...defaultMessage,
-    ...overrides,
-    created_at: overrides.created_at ?? defaultMessage.created_at,
-    updated_at: overrides.updated_at ?? defaultMessage.updated_at,
-    deleted_at: overrides.deleted_at ?? defaultMessage.deleted_at,
-    pinned_at: overrides.pinned_at ?? defaultMessage.pinned_at,
-    status: overrides.status ?? defaultMessage.status,
-  }
-}
-
-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
-
-const Table: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className="min-h-screen w-full p-12 bg-[#F9F7F4]">
-    <table className="border-separate border-spacing-4">{children}</table>
-  </div>
-)
-
-const TableHead: React.FC<{ variants: readonly { label: string }[] }> = ({
-  variants,
-}) => (
-  <thead>
-    <tr>
-      <th className="text-left text-xs font-medium text-black/40 pb-2" />
-      {variants.map(({ label }) => (
-        <th
-          key={label}
-          className="text-left text-xs font-medium text-black/40 pb-2"
-        >
-          {label}
-        </th>
-      ))}
-    </tr>
-  </thead>
-)
-
-export const Attachment: StoryFn = () => (
-  <Table>
-    <TableHead variants={VARIANTS} />
-    <tbody>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Visitor
-        </td>
-        {VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
-            <MediaMessage
-              isMyMessage={false}
-              message={base({
-                attachments: [attachment as MessageAttachment],
-              })}
-            />
-          </td>
-        ))}
-      </tr>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Creator
-        </td>
-        {VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
-            <MediaMessage
-              isMyMessage={true}
-              message={base({
-                attachments: [attachment as MessageAttachment],
-              })}
-            />
-          </td>
-        ))}
-      </tr>
-    </tbody>
-  </Table>
-)
-
-export const Links: StoryFn = () => (
-  <Table>
-    <TableHead variants={LINK_VARIANTS} />
-    <tbody>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Visitor
-        </td>
-        {LINK_VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
-            <MediaMessage
-              isMyMessage={false}
-              message={base({
-                attachments: [attachment as MessageAttachment],
-              })}
-            />
-          </td>
-        ))}
-      </tr>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Creator
-        </td>
-        {LINK_VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
-            <MediaMessage
-              isMyMessage={true}
-              message={base({
-                attachments: [attachment as MessageAttachment],
-              })}
-            />
-          </td>
-        ))}
-      </tr>
-    </tbody>
-  </Table>
-)
-
-/** Standalone cards (no chat bubble shell), matching LockedAttachment story layout. */
-export const Compound: StoryFn = () => (
-  <Table>
-    <TableHead variants={VARIANTS} />
-    <tbody>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          MediaMessage.Visitor
-        </td>
-        {VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
-            <MediaMessage.Visitor
-              message={base({
-                attachments: [attachment as MessageAttachment],
-              })}
-            />
-          </td>
-        ))}
-      </tr>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          MediaMessage.Creator
-        </td>
-        {VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
-            <MediaMessage.Creator
-              message={base({
-                attachments: [attachment as MessageAttachment],
-              })}
-            />
-          </td>
-        ))}
-      </tr>
-    </tbody>
-  </Table>
-)