@linktr.ee/messaging-react 3.6.1 → 3.6.2-rc-1783304704

package/src/components/CustomMessage/StreamAttachmentMessage.stories.tsx

@@ -1,178 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react'
-import classNames from 'classnames'
-import React from 'react'
-import type { Attachment } from 'stream-chat'
-
-import {
-  currentUserArgType,
-  storyUsers,
-  type StoryUser,
-} from '../../stories/decorators/storyUser'
-
-import StreamAttachmentMessage from './StreamAttachmentMessage'
-
-/* ──────────────────────────────────────────────────────────────────
- * Stories for `StreamAttachmentMessage` — the toolkit-owned renderer
- * that `CustomMessage` uses for every generic Stream-attachment message
- * (link OG previews + image / video / audio / pdf / file media).
- *
- * Unlike `MessageAttachmentConversations.stories.tsx` — which hand-builds
- * `MessageAttachment.*` JSX directly — these stories feed raw Stream
- * `Attachment[]` shapes through `StreamAttachmentMessage` so they exercise
- * the mapping the component actually owns: ordered segment building,
- * Stream-attachment → `LinkAttachment` prop mapping, caption
- * de-duplication (including emoji preservation), and media clustering.
- *
- * The component renders bare rows; this wrapper just anchors the run to
- * the correct chat edge so sent/received read the way they do in-app.
- * ────────────────────────────────────────────────────────────────── */
-
-const Bubbles: React.FC<{ isMyMessage: boolean; children: React.ReactNode }> = ({
-  isMyMessage,
-  children,
-}) => (
-  <div className="mx-auto max-w-2xl p-12">
-    <div
-      className={classNames(
-        'flex flex-col gap-[2px]',
-        isMyMessage ? 'items-end' : 'items-start'
-      )}
-    >
-      {children}
-    </div>
-  </div>
-)
-
-const Render = (attachments: Attachment[], text?: string): StoryFn<StoryArgs> =>
-  function StreamAttachmentStory({ currentUser }) {
-    const isMyMessage = currentUser.id === storyUsers.creator.id
-    return (
-      <Bubbles isMyMessage={isMyMessage}>
-        <StreamAttachmentMessage
-          groupPosition="single"
-          isMyMessage={isMyMessage}
-          message={{ attachments, text }}
-        />
-      </Bubbles>
-    )
-  }
-
-const HERO = 'https://picsum.photos/seed/og-hero/1200/630'
-const PHOTO = (seed: string) => `https://picsum.photos/seed/${seed}/720/720`
-const VIDEO_SRC = '/video-source.mp4'
-const VIDEO_POSTER = '/video-thumbnail.jpg'
-const PDF_SRC = 'https://www.w3.org/WAI/WCAG21/wcag21.pdf'
-
-const linkAttachment = (overrides: Partial<Attachment> = {}): Attachment => ({
-  type: 'link',
-  og_scrape_url: 'https://linktr.ee/marketplace',
-  title: 'Linktree Marketplace',
-  text: 'Browse the best apps to customize your link in bio.',
-  image_url: HERO,
-  ...overrides,
-})
-
-const imageAttachment = (seed: string): Attachment => ({
-  type: 'image',
-  image_url: PHOTO(seed),
-})
-
-interface StoryArgs {
-  currentUser: StoryUser
-}
-
-const meta: Meta<StoryArgs> = {
-  title: 'CustomMessage/StreamAttachmentMessage',
-  argTypes: currentUserArgType,
-  args: { currentUser: storyUsers.creator },
-  parameters: {
-    layout: 'fullscreen',
-    // Story render output embeds live React elements; pin source generation
-    // to the static story code (matches MessageAttachmentConversations).
-    docs: { source: { type: 'code' } },
-  },
-}
-export default meta
-
-/** Link share with an OG image → the featured card layout. */
-export const LinkFeatured = Render([linkAttachment()])
-
-/** Link share with no thumbnail → the classic (compact) card layout. */
-export const LinkClassic = Render([
-  linkAttachment({ image_url: undefined, thumb_url: undefined }),
-])
-
-/**
- * Link share with an emoji-only caption alongside the URL. The emoji is
- * real content, so the caption is preserved as a separate bubble beneath
- * the card (regression guard for the caption-dedup predicate).
- */
-export const LinkWithEmojiCaption = Render(
-  [linkAttachment({ og_scrape_url: 'https://mrdrnose.itch.io/votv' })],
-  'https://mrdrnose.itch.io/votv 👽'
-)
-
-/**
- * Caption that is just the link URL → suppressed (the card already shows
- * the URL, so no duplicate text bubble).
- */
-export const LinkWithUrlOnlyCaption = Render(
-  [linkAttachment()],
-  'https://linktr.ee/marketplace'
-)
-
-/** Single image attachment. */
-export const SingleImage = Render([imageAttachment('single')])
-
-/** Several images in one message → a clustered image bubble. */
-export const ImageCluster = Render([
-  imageAttachment('cluster-1'),
-  imageAttachment('cluster-2'),
-  imageAttachment('cluster-3'),
-])
-
-/** Video attachment (poster + play affordance). */
-export const Video = Render([
-  {
-    type: 'video',
-    asset_url: VIDEO_SRC,
-    thumb_url: VIDEO_POSTER,
-    mime_type: 'video/mp4',
-    title: 'trailer.mp4',
-  },
-])
-
-/** PDF document attachment with a caption. */
-export const Pdf = Render(
-  [
-    {
-      type: 'file',
-      asset_url: PDF_SRC,
-      mime_type: 'application/pdf',
-      title: 'launch-checklist.pdf',
-      file_size: 142_336,
-    },
-  ],
-  'Section 4 has the details.'
-)
-
-/** Generic (non-PDF) file attachment with a download affordance. */
-export const GenericFile = Render([
-  {
-    type: 'file',
-    asset_url: 'https://cdn.example.com/brand-kit.zip',
-    mime_type: 'application/zip',
-    title: 'brand-kit.zip',
-    file_size: 11_500_000,
-  },
-])
-
-/**
- * Mixed message — media followed by a link share with a caption. Exercises
- * ordered-segment building across kinds: the image cluster renders first,
- * the link card second, and the caption attaches to the last bubble.
- */
-export const MixedMediaAndLink = Render(
-  [imageAttachment('mixed-1'), imageAttachment('mixed-2'), linkAttachment()],
-  'Check these out 🔥'
-)

package/src/components/CustomMessage/StreamAttachmentMessage.test.tsx

@@ -1,186 +0,0 @@
-import React from 'react'
-import { describe, expect, it } from 'vitest'
-
-import { renderWithProviders, screen } from '../../test/utils'
-
-import StreamAttachmentMessage, {
-  linkCaptionDuplicatesAttachmentUrl,
-  linkCardPropsFromStreamAttachment,
-} from './StreamAttachmentMessage'
-
-describe('linkCardPropsFromStreamAttachment', () => {
-  it('uses the featured layout when a thumbnail is present', () => {
-    expect(
-      linkCardPropsFromStreamAttachment({
-        type: 'link',
-        og_scrape_url: 'https://linktr.ee/someone',
-        image_url: 'https://cdn.example.com/thumb.jpg',
-      }).layout
-    ).toBe('featured')
-  })
-
-  it('uses the classic layout for a plain link with no thumbnail', () => {
-    expect(
-      linkCardPropsFromStreamAttachment({
-        type: 'link',
-        og_scrape_url: 'https://linktr.ee/someone',
-      }).layout
-    ).toBe('classic')
-  })
-
-  it('keeps the featured layout for a playable clip with no thumbnail so the player renders', () => {
-    expect(
-      linkCardPropsFromStreamAttachment({
-        type: 'link',
-        og_scrape_url: 'https://linktr.ee/someone',
-        asset_url: 'https://cdn.example.com/clip.mp3',
-        mime_type: 'audio/mpeg',
-      }).layout
-    ).toBe('featured')
-  })
-})
-
-describe('linkCaptionDuplicatesAttachmentUrl', () => {
-  it('suppresses captions that are just the link plus punctuation', () => {
-    expect(
-      linkCaptionDuplicatesAttachmentUrl(
-        'https://tr.ee/abc !',
-        'https://tr.ee/abc'
-      )
-    ).toBe(true)
-  })
-
-  it('keeps captions that add emoji after the link', () => {
-    expect(
-      linkCaptionDuplicatesAttachmentUrl(
-        'https://tr.ee/abc 😎',
-        'https://tr.ee/abc'
-      )
-    ).toBe(false)
-  })
-})
-
-describe('StreamAttachmentMessage', () => {
-  it('renders a sent link card and suppresses a URL-only caption', () => {
-    renderWithProviders(
-      <StreamAttachmentMessage
-        groupPosition="single"
-        isMyMessage={true}
-        message={{
-          attachments: [
-            {
-              type: 'link',
-              og_scrape_url: 'https://linktr.ee/someone',
-              title: 'My Linktree',
-              text: 'Check out my links',
-              image_url: 'https://cdn.example.com/thumb.jpg',
-            },
-          ],
-          text: 'https://linktr.ee/someone !',
-        }}
-      />
-    )
-
-    expect(
-      screen.getByRole('link', { name: /my linktree/i })
-    ).toHaveAttribute('href', 'https://linktr.ee/someone')
-    expect(screen.queryByText('https://linktr.ee/someone !')).toBeNull()
-  })
-
-  it('keeps an emoji-only caption instead of dropping it', () => {
-    renderWithProviders(
-      <StreamAttachmentMessage
-        groupPosition="single"
-        isMyMessage={false}
-        message={{
-          attachments: [
-            {
-              type: 'link',
-              og_scrape_url: 'https://linktr.ee/someone',
-              title: 'My Linktree',
-            },
-          ],
-          text: 'https://linktr.ee/someone 😎',
-        }}
-      />
-    )
-
-    expect(screen.getByText('https://linktr.ee/someone 😎')).toBeInTheDocument()
-  })
-
-  it('renders mixed link and media attachments in order', () => {
-    const { container } = renderWithProviders(
-      <StreamAttachmentMessage
-        groupPosition="single"
-        isMyMessage={true}
-        message={{
-          attachments: [
-            {
-              type: 'link',
-              og_scrape_url: 'https://linktr.ee/someone',
-              title: 'My Linktree',
-            },
-            {
-              type: 'image',
-              image_url: 'https://cdn.example.com/photo.jpg',
-              title: 'Vacation',
-            },
-          ],
-          text: 'caption',
-        }}
-      />
-    )
-
-    const link = screen.getByRole('link', { name: /my linktree/i })
-    const imageBubble = screen.getByTestId('image-attachment')
-
-    expect(link.compareDocumentPosition(imageBubble)).toBe(
-      Node.DOCUMENT_POSITION_FOLLOWING
-    )
-    expect(container).toHaveTextContent('caption')
-  })
-
-  // The message text must never be dropped when a message carries an
-  // attachment — only genuine URL-only captions are suppressed.
-  it('renders the accompanying message text next to a link attachment', () => {
-    renderWithProviders(
-      <StreamAttachmentMessage
-        groupPosition="single"
-        isMyMessage={true}
-        message={{
-          attachments: [
-            {
-              type: 'link',
-              og_scrape_url: 'https://linktr.ee/someone',
-              title: 'My Linktree',
-            },
-          ],
-          text: 'you have to see this',
-        }}
-      />
-    )
-
-    expect(screen.getByText('you have to see this')).toBeInTheDocument()
-  })
-
-  it('renders the accompanying message text next to a media attachment', () => {
-    const { container } = renderWithProviders(
-      <StreamAttachmentMessage
-        groupPosition="single"
-        isMyMessage={false}
-        message={{
-          attachments: [
-            {
-              type: 'image',
-              image_url: 'https://cdn.example.com/photo.jpg',
-              title: 'Vacation',
-            },
-          ],
-          text: 'from the trip',
-        }}
-      />
-    )
-
-    expect(container).toHaveTextContent('from the trip')
-  })
-})