@linktr.ee/messaging-react 3.10.0-rc-1783660962 → 3.10.0

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

@@ -1,541 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react'
-import React, { useState } from 'react'
-import { MessageText } from 'stream-chat-react'
-
-import type { LockedAttachmentGalleryItem } from './types'
-
-import LockedAttachment from '.'
-
-const meta: Meta = {
-  title: 'LockedAttachment',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-
-const MatrixTable: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className="min-h-screen w-full bg-[#F9F7F4] p-12">
-    <table className="border-separate border-spacing-4">
-      <thead>
-        <tr>
-          <th className="w-8 pb-2" />
-          <th className="pb-2 text-left text-xs font-medium text-black/40">
-            Visitor
-          </th>
-          <th className="pb-2 text-left text-xs font-medium text-black/40">
-            Creator
-          </th>
-        </tr>
-      </thead>
-      <tbody>{children}</tbody>
-    </table>
-  </div>
-)
-
-const MatrixTableRow: React.FC<{
-  label: React.ReactNode
-  received: React.ReactNode
-  sent: React.ReactNode
-}> = ({ label, received, sent }) => (
-  <tr>
-    <td className="whitespace-nowrap pr-4 align-top text-xs font-medium text-black/40">
-      {label}
-    </td>
-    <td className="align-top">
-      <MatrixTableCell isMine={false}>{received}</MatrixTableCell>
-    </td>
-    <td className="align-top">
-      <MatrixTableCell isMine>{sent}</MatrixTableCell>
-    </td>
-  </tr>
-)
-
-/**
- * Deliberately renders WITHOUT any `.str-chat` ancestor or
- * `str-chat__message*` structure — the real Composer/preview surfaces this
- * card renders in outside a message thread. If a card looks wrong here, it's
- * leaning on ambient stream-chat-react CSS instead of its own explicit
- * styling.
- */
-const MatrixTableCell: React.FC<{
-  isMine: boolean
-  children: React.ReactNode
-}> = ({ children }) => <div>{children}</div>
-
-export const Text: StoryFn = () => {
-  const [isUnlocking, setUnlocking] = useState(false)
-
-  // Matches what `CustomMessage` passes `MessageText` for a revealed paid
-  // text attachment (`displayMessage`) — just enough of a `LocalMessage`
-  // shape to render the real `str-chat__message-text` markup/CSS.
-  const purchasedMessage = {
-    text: "Here's the address, see you Thursday at 7!",
-    type: 'regular',
-  } as Parameters<typeof MessageText>[0]['message']
-
-  return (
-    <MatrixTable>
-      <MatrixTableRow
-        label="Draft"
-        received={null}
-        sent={
-          <LockedAttachment
-            isDraft
-            contentType="text"
-            renderedText={purchasedMessage?.text}
-            amountText="AU$4.99"
-            onDismiss={() => alert('Removed')}
-          />
-        }
-      />
-      <MatrixTableRow
-        label="Preview"
-        received={null}
-        sent={
-          <LockedAttachment
-            isPreview
-            contentType="text"
-            placeholderAmountText="AU$0.00"
-          />
-        }
-      />
-      <MatrixTableRow
-        label="Idle"
-        received={
-          <LockedAttachment
-            isMine={false}
-            contentType="text"
-            amountText="AU$4.99"
-            isUnlocking={isUnlocking}
-            onUnlockClick={() => {
-              setUnlocking(true)
-              setTimeout(() => setUnlocking(false), 1500)
-            }}
-          />
-        }
-        sent={
-          <LockedAttachment
-            isMine
-            contentType="text"
-            amountText="AU$4.99"
-            paymentStatus="pending"
-          />
-        }
-      />
-      <MatrixTableRow
-        label="Unlocking"
-        received={
-          <LockedAttachment
-            isMine={false}
-            contentType="text"
-            amountText="AU$4.99"
-            isUnlocking
-          />
-        }
-        sent={null}
-      />
-      <MatrixTableRow
-        label="Purchased"
-        received={
-          <LockedAttachment
-            isMine={false}
-            contentType="text"
-            amountText="AU$4.99"
-            paymentStatus="paid"
-            renderedText={<MessageText message={purchasedMessage} />}
-          />
-        }
-        sent={
-          <LockedAttachment
-            isMine
-            contentType="text"
-            amountText="AU$4.99"
-            paymentStatus="paid"
-            renderedText={<MessageText message={purchasedMessage} />}
-          />
-        }
-      />
-    </MatrixTable>
-  )
-}
-
-const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
-const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
-const VIDEO_SOURCE = '/video-source.mp4'
-
-const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
-const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
-const AUDIO_SOURCE = '/audio-source.mp3'
-
-const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
-const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
-const IMAGE_SOURCE = '/image-source.jpg'
-
-const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
-const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
-const DOCUMENT_SOURCE = '/document-source.pdf'
-
-const VARIANTS = [
-  {
-    label: 'Video',
-    title: "Alicia's Workout Plan",
-    mimeType: 'video/mp4',
-    detail: '1:20',
-    thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
-    thumbnailUnlockedUrl: VIDEO_THUMBNAIL,
-    sourceUrl: VIDEO_SOURCE,
-  },
-  {
-    label: 'Audio',
-    title: 'Morning Meditation',
-    mimeType: 'audio/mpeg',
-    detail: '4:35',
-    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
-    thumbnailUnlockedUrl: AUDIO_THUMBNAIL,
-    sourceUrl: AUDIO_SOURCE,
-  },
-  {
-    label: 'Image',
-    title: 'Picture of my cat',
-    mimeType: 'image/jpeg',
-    detail: '3.2 MB',
-    thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
-    thumbnailUnlockedUrl: IMAGE_THUMBNAIL,
-    sourceUrl: IMAGE_SOURCE,
-  },
-  {
-    label: 'Document',
-    title: 'Strength Training Guide',
-    mimeType: 'application/zip',
-    detail: '14 files',
-    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
-    thumbnailUnlockedUrl: DOCUMENT_THUMBNAIL,
-    sourceUrl: DOCUMENT_SOURCE,
-  },
-  {
-    label: 'Unknown',
-    title: 'Unknown Attachment',
-    mimeType: 'application/octet-stream',
-    detail: '2.4 MB',
-    thumbnailUrl: undefined,
-    thumbnailUnlockedUrl: undefined,
-    sourceUrl: DOCUMENT_SOURCE,
-  },
-]
-
-/**
- * A mixed-media collection (a video + 3 photos) used by the Gallery stories
- * below. `LockedAttachment` accepts a `gallery` prop and renders a carousel
- * of these items when 2+ items are provided.
- */
-const GALLERY_ITEMS: LockedAttachmentGalleryItem[] = [
-  {
-    mimeType: 'video/mp4',
-    thumbnailUrl: VIDEO_THUMBNAIL,
-    sourceUrl: VIDEO_SOURCE,
-  },
-  {
-    mimeType: 'image/jpeg',
-    thumbnailUrl: IMAGE_THUMBNAIL,
-    sourceUrl: IMAGE_SOURCE,
-  },
-  {
-    mimeType: 'application/pdf',
-    thumbnailUrl: DOCUMENT_THUMBNAIL,
-    sourceUrl: DOCUMENT_SOURCE,
-  },
-  {
-    mimeType: 'audio/mpeg',
-    thumbnailUrl: AUDIO_THUMBNAIL,
-    sourceUrl: AUDIO_SOURCE,
-  },
-]
-
-const GALLERY_DETAIL = '4 items'
-const GALLERY_TITLE = 'Workout Guide'
-
-const MediaMatrix: React.FC<{ variant: (typeof VARIANTS)[number] }> = ({
-  variant,
-}) => {
-  const [isPaid, setPaid] = useState(false)
-  const [isUnlocking, setUnlocking] = useState(false)
-  const {
-    title,
-    mimeType,
-    detail,
-    thumbnailUrl,
-    thumbnailUnlockedUrl,
-    sourceUrl,
-  } = variant
-
-  const fetchSource = async () => ({
-    sourceUrl,
-    thumbnailUrl: thumbnailUnlockedUrl,
-  })
-
-  return (
-    <MatrixTable>
-      <MatrixTableRow
-        label="Draft"
-        received={null}
-        sent={
-          <LockedAttachment
-            isDraft
-            title={title}
-            thumbnailUrl={thumbnailUrl}
-            contentType="media"
-            mimeType={mimeType}
-            detail={detail}
-            amountText="AU$9.99"
-            onDismiss={() => alert('Dismissed')}
-          />
-        }
-      />
-      <MatrixTableRow
-        label="Preview"
-        received={null}
-        sent={
-          <LockedAttachment
-            isPreview
-            placeholderTitle="Attachment title"
-            placeholderAmountText="AU$0.00"
-            thumbnailUrl={thumbnailUrl}
-            mimeType={mimeType}
-            contentType="media"
-            detail={detail}
-          />
-        }
-      />
-      <MatrixTableRow
-        label="Idle"
-        received={
-          <LockedAttachment
-            isMine={false}
-            title={title}
-            thumbnailUrl={thumbnailUrl}
-            mimeType={mimeType}
-            contentType="media"
-            detail={detail}
-            amountText="AU$9.99"
-            paymentStatus={isPaid ? 'paid' : undefined}
-            isUnlocking={isUnlocking}
-            onUnlockClick={() => {
-              setUnlocking(true)
-              setTimeout(() => {
-                setUnlocking(false)
-                setPaid(true)
-              }, 1500)
-            }}
-            onDownloadClick={() => alert('Download clicked')}
-            onFetchSource={fetchSource}
-          />
-        }
-        sent={
-          <LockedAttachment
-            isMine
-            title={title}
-            thumbnailUrl={thumbnailUrl}
-            mimeType={mimeType}
-            contentType="media"
-            detail={detail}
-            amountText="AU$9.99"
-            onFetchSource={fetchSource}
-          />
-        }
-      />
-      <MatrixTableRow
-        label="Unlocking"
-        received={
-          <LockedAttachment
-            isMine={false}
-            title={title}
-            thumbnailUrl={thumbnailUrl}
-            mimeType={mimeType}
-            contentType="media"
-            detail={detail}
-            amountText="AU$9.99"
-            isUnlocking
-            onDownloadClick={() => alert('Download clicked')}
-            onFetchSource={fetchSource}
-          />
-        }
-        // Sender never unlocks their own message — no distinct state to show.
-        sent={null}
-      />
-      <MatrixTableRow
-        label="Purchased"
-        received={
-          <LockedAttachment
-            isMine={false}
-            title={title}
-            thumbnailUrl={thumbnailUrl}
-            mimeType={mimeType}
-            contentType="media"
-            detail={detail}
-            amountText="AU$9.99"
-            paymentStatus="paid"
-            onUnlockClick={() => alert('Unlock clicked')}
-            onDownloadClick={() => alert('Download clicked')}
-            onFetchSource={fetchSource}
-          />
-        }
-        sent={
-          <LockedAttachment
-            isMine
-            title={title}
-            thumbnailUrl={thumbnailUrl}
-            mimeType={mimeType}
-            contentType="media"
-            detail={detail}
-            amountText="AU$9.99"
-            paymentStatus="paid"
-            onFetchSource={fetchSource}
-          />
-        }
-      />
-    </MatrixTable>
-  )
-}
-
-const variantByLabel = (label: string) =>
-  VARIANTS.find((v) => v.label === label)!
-
-export const Video: StoryFn = () => (
-  <MediaMatrix variant={variantByLabel('Video')} />
-)
-// LockedAttachment (contentType="media", !isMine) autoplays the video preview once paid; even with
-// our SMIL/CSS animation freeze the <video> element advances frames
-// independently and produces a non-deterministic snapshot. Skip in Chromatic.
-Video.parameters = { chromatic: { disableSnapshot: true } }
-
-export const Audio: StoryFn = () => (
-  <MediaMatrix variant={variantByLabel('Audio')} />
-)
-
-export const Image: StoryFn = () => (
-  <MediaMatrix variant={variantByLabel('Image')} />
-)
-
-export const Document: StoryFn = () => (
-  <MediaMatrix variant={variantByLabel('Document')} />
-)
-
-export const Unknown: StoryFn = () => (
-  <MediaMatrix variant={variantByLabel('Unknown')} />
-)
-
-export const Gallery: StoryFn = () => {
-  const [isPaid, setPaid] = useState(false)
-  const [isUnlocking, setUnlocking] = useState(false)
-
-  return (
-    <MatrixTable>
-      <MatrixTableRow
-        label="Draft"
-        received={null}
-        sent={
-          <LockedAttachment
-            isDraft
-            contentType="media"
-            title={GALLERY_TITLE}
-            detail={GALLERY_DETAIL}
-            amountText="AU$50.00"
-            gallery={GALLERY_ITEMS}
-            onDismiss={() => alert('Dismissed gallery')}
-            onEditClick={() => alert('Edit gallery')}
-          />
-        }
-      />
-      <MatrixTableRow
-        label="Preview"
-        received={null}
-        sent={
-          <LockedAttachment
-            isPreview
-            contentType="media"
-            placeholderTitle="Attachment title"
-            detail={GALLERY_DETAIL}
-            placeholderAmountText="AU$0.00"
-            gallery={GALLERY_ITEMS}
-          />
-        }
-      />
-      <MatrixTableRow
-        label="Idle"
-        received={
-          <LockedAttachment
-            isMine={false}
-            contentType="media"
-            title={GALLERY_TITLE}
-            detail={GALLERY_DETAIL}
-            amountText="AU$50.00"
-            gallery={GALLERY_ITEMS}
-            paymentStatus={isPaid ? 'paid' : undefined}
-            isUnlocking={isUnlocking}
-            onUnlockClick={() => {
-              setUnlocking(true)
-              setTimeout(() => {
-                setUnlocking(false)
-                setPaid(true)
-              }, 1500)
-            }}
-            onDownloadClick={() => alert('Download gallery')}
-          />
-        }
-        sent={
-          <LockedAttachment
-            isMine
-            contentType="media"
-            title={GALLERY_TITLE}
-            detail={GALLERY_DETAIL}
-            amountText="AU$50.00"
-            gallery={GALLERY_ITEMS}
-          />
-        }
-      />
-      <MatrixTableRow
-        label="Unlocking"
-        received={
-          <LockedAttachment
-            isMine={false}
-            contentType="media"
-            title={GALLERY_TITLE}
-            detail={GALLERY_DETAIL}
-            amountText="AU$50.00"
-            gallery={GALLERY_ITEMS}
-            isUnlocking
-            onDownloadClick={() => alert('Download gallery')}
-          />
-        }
-        // Sender never unlocks their own message — no distinct state to show.
-        sent={null}
-      />
-      <MatrixTableRow
-        label="Purchased"
-        received={
-          <LockedAttachment
-            isMine={false}
-            contentType="media"
-            title={GALLERY_TITLE}
-            detail={GALLERY_DETAIL}
-            amountText="AU$50.00"
-            paymentStatus="paid"
-            gallery={GALLERY_ITEMS}
-            onUnlockClick={() => alert('Unlock clicked')}
-            onDownloadClick={() => alert('Download gallery')}
-          />
-        }
-        sent={
-          <LockedAttachment
-            isMine
-            contentType="media"
-            title={GALLERY_TITLE}
-            detail={GALLERY_DETAIL}
-            amountText="AU$50.00"
-            paymentStatus="paid"
-            gallery={GALLERY_ITEMS}
-          />
-        }
-      />
-    </MatrixTable>
-  )
-}

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

@@ -1,117 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-
-import { renderWithProviders, screen } from '../../../test/utils'
-
-import MediaCard from './components/Media/Card'
-import TextCard from './components/Text/Card'
-
-/**
- * Characterization tests — the safety net for the LockedAttachment
- * separate-concerns refactor. They assert stable, user-visible facts only
- * (lock affordances, CTAs, amount/status text, the preview toggle), never
- * DOM structure or class names — exactly the things the refactor moves
- * around. Storybook remains the pixel-level visual oracle.
- */
-describe('LockedAttachment (characterization)', () => {
-  describe('Draft', () => {
-    it('media mode: shows the placeholder title when locked with no title', () => {
-      renderWithProviders(<MediaCard isDraft />)
-      expect(screen.getByText('Attachment title')).toBeInTheDocument()
-    })
-
-    it('media mode: renders a preview toggle when a source fetcher is wired', () => {
-      renderWithProviders(
-        <MediaCard isDraft onFetchSource={vi.fn().mockResolvedValue(undefined)} />
-      )
-      expect(
-        screen.getByRole('button', { name: 'Toggle preview' })
-      ).toBeInTheDocument()
-    })
-
-    it('media mode: renders a dismiss control when onDismiss is provided', () => {
-      renderWithProviders(<MediaCard isDraft onDismiss={vi.fn()} />)
-      expect(
-        screen.getByRole('button', { name: 'Dismiss attachment' })
-      ).toBeInTheDocument()
-    })
-
-    it('text mode: shows the draft text and amount', () => {
-      renderWithProviders(
-        <TextCard isDraft amountText="$5" renderedText="Secret draft" />
-      )
-      expect(screen.getByText('Secret draft')).toBeInTheDocument()
-      expect(screen.getByText('$5')).toBeInTheDocument()
-    })
-  })
-
-  describe('Preview', () => {
-    it('media mode: shows the placeholder title when locked with no title', () => {
-      renderWithProviders(<MediaCard isPreview amountText="$5" />)
-      expect(screen.getByText('Attachment title')).toBeInTheDocument()
-      expect(screen.getByText('$5')).toBeInTheDocument()
-    })
-
-    it('text mode: never shows real text, only the amount', () => {
-      renderWithProviders(<TextCard isPreview amountText="$5" />)
-      expect(screen.queryByText('Secret draft')).not.toBeInTheDocument()
-      expect(screen.getByText('$5')).toBeInTheDocument()
-    })
-  })
-
-  describe('Media (isMine)', () => {
-    it('shows the amount in the status badge', () => {
-      renderWithProviders(<MediaCard isMine amountText="$5" />)
-      expect(screen.getByText('$5')).toBeInTheDocument()
-    })
-  })
-
-  describe('Text (isMine)', () => {
-    it('pending: shows the amount with no status label', () => {
-      renderWithProviders(
-        <TextCard isMine amountText="$5" paymentStatus="pending" />
-      )
-      expect(screen.queryByText('Sent')).not.toBeInTheDocument()
-      expect(screen.getByText('$5')).toBeInTheDocument()
-    })
-
-    it('paid: shows the Sold label', () => {
-      renderWithProviders(
-        <TextCard isMine amountText="$5" paymentStatus="paid" />
-      )
-      expect(screen.getByText('Sold')).toBeInTheDocument()
-    })
-  })
-
-  describe('Media (!isMine)', () => {
-    it('renders the locked-attachment root and an Unlock CTA when locked', () => {
-      renderWithProviders(
-        <MediaCard isMine={false} amountText="$5" onUnlockClick={vi.fn()} />
-      )
-      expect(screen.getByTestId('locked-attachment')).toBeInTheDocument()
-      expect(
-        screen.getByRole('button', { name: 'Unlock' })
-      ).toBeInTheDocument()
-    })
-  })
-
-  describe('Text (!isMine)', () => {
-    it('shows an Unlock control and the amount', () => {
-      renderWithProviders(
-        <TextCard isMine={false} amountText="$5" onUnlockClick={vi.fn()} />
-      )
-      expect(
-        screen.getByRole('button', { name: 'Unlock message' })
-      ).toBeInTheDocument()
-      expect(screen.getByText('$5')).toBeInTheDocument()
-    })
-
-    it('unlocking: marks the Unlock control busy', () => {
-      renderWithProviders(
-        <TextCard isMine={false} isUnlocking onUnlockClick={vi.fn()} />
-      )
-      const button = screen.getByRole('button', { name: 'Unlocking message' })
-      expect(button).toBeDisabled()
-      expect(button).toHaveAttribute('aria-busy', 'true')
-    })
-  })
-})