@linktr.ee/messaging-react 3.9.0-rc-1783472582 → 3.9.0-rc-1783575293

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/LockedAttachment.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import classNames from 'classnames'
 import React, { useState } from 'react'
 import { MessageText } from 'stream-chat-react'
 
@@ -14,16 +13,16 @@ const meta: Meta = {
 export default meta
 
 const MatrixTable: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className="str-chat min-h-screen w-full bg-[#F9F7F4] p-12">
+  <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">
-            Received (buyer&apos;s view)
+            Visitor
           </th>
           <th className="pb-2 text-left text-xs font-medium text-black/40">
-            Sent (creator&apos;s view)
+            Creator
           </th>
         </tr>
       </thead>
@@ -51,29 +50,16 @@ const MatrixTableRow: React.FC<{
 )
 
 /**
- * Mirrors the exact DOM `CustomMessage` produces around a paid TEXT
- * attachment (see `CustomMessage/index.tsx`'s `isTextAttachmentMessage`
- * branch), so the bubble color/radius CSS custom properties (scoped under
- * `.str-chat` in styles.css) resolve the same way they do for the real
- * consumer — no hardcoded fallback colors needed in the cards themselves.
+ * 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
-}> = ({ isMine, children }) => (
-  <div
-    className={classNames(
-      'str-chat__message str-chat__message-simple str-chat__message--regular str-chat__message--received has-no-text',
-      isMine
-        ? 'str-chat__message--me str-chat__message-simple--me'
-        : 'str-chat__message--other'
-    )}
-  >
-    <div className="str-chat__message-inner">
-      <div className="str-chat__message-bubble-wrapper">{children}</div>
-    </div>
-  </div>
-)
+}> = ({ children }) => <div>{children}</div>
 
 export const Text: StoryFn = () => {
   const [isUnlocking, setUnlocking] = useState(false)
@@ -89,33 +75,35 @@ export const Text: StoryFn = () => {
   return (
     <MatrixTable>
       <MatrixTableRow
-        label="Preview"
+        label="Draft"
         received={null}
         sent={
-          <LockedAttachment.Composer
+          <LockedAttachment
+            isDraft
             contentType="text"
-            placeholderAmountText="AU$0.00"
+            renderedText={purchasedMessage?.text}
+            amountText="AU$4.99"
             onDismiss={() => alert('Removed')}
           />
         }
       />
       <MatrixTableRow
-        label="Composer"
+        label="Preview"
         received={null}
         sent={
-          <LockedAttachment.Composer
+          <LockedAttachment
+            isPreview
             contentType="text"
-            text={purchasedMessage?.text}
-            amountText="AU$4.99"
-            onDismiss={() => alert('Removed')}
+            placeholderAmountText="AU$0.00"
           />
         }
       />
       <MatrixTableRow
         label="Idle"
         received={
-          <LockedAttachment.Text
+          <LockedAttachment
             isMine={false}
+            contentType="text"
             amountText="AU$4.99"
             isUnlocking={isUnlocking}
             onUnlockClick={() => {
@@ -125,8 +113,9 @@ export const Text: StoryFn = () => {
           />
         }
         sent={
-          <LockedAttachment.Text
+          <LockedAttachment
             isMine
+            contentType="text"
             amountText="AU$4.99"
             paymentStatus="pending"
           />
@@ -135,8 +124,9 @@ export const Text: StoryFn = () => {
       <MatrixTableRow
         label="Unlocking"
         received={
-          <LockedAttachment.Text
+          <LockedAttachment
             isMine={false}
+            contentType="text"
             amountText="AU$4.99"
             isUnlocking
           />
@@ -146,22 +136,22 @@ export const Text: StoryFn = () => {
       <MatrixTableRow
         label="Purchased"
         received={
-          <LockedAttachment.Text
+          <LockedAttachment
             isMine={false}
+            contentType="text"
             amountText="AU$4.99"
             paymentStatus="paid"
-          >
-            <MessageText message={purchasedMessage} />
-          </LockedAttachment.Text>
+            renderedText={<MessageText message={purchasedMessage} />}
+          />
         }
         sent={
-          <LockedAttachment.Text
+          <LockedAttachment
             isMine
+            contentType="text"
             amountText="AU$4.99"
             paymentStatus="paid"
-          >
-            <MessageText message={purchasedMessage} />
-          </LockedAttachment.Text>
+            renderedText={<MessageText message={purchasedMessage} />}
+          />
         }
       />
     </MatrixTable>
@@ -172,6 +162,10 @@ 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'
@@ -180,10 +174,6 @@ const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
 const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
 const DOCUMENT_SOURCE = '/document-source.pdf'
 
-const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
-const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
-const AUDIO_SOURCE = '/audio-source.mp3'
-
 const VARIANTS = [
   {
     label: 'Video',
@@ -234,8 +224,8 @@ const VARIANTS = [
 
 /**
  * A mixed-media collection (a video + 3 photos) used by the Gallery stories
- * below. Each `LockedAttachment.*` card accepts a `gallery` prop and renders
- * a carousel of these items when 2+ items are provided.
+ * below. `LockedAttachment` accepts a `gallery` prop and renders a carousel
+ * of these items when 2+ items are provided.
  */
 const GALLERY_ITEMS: LockedAttachmentGalleryItem[] = [
   {
@@ -260,7 +250,7 @@ const GALLERY_ITEMS: LockedAttachmentGalleryItem[] = [
   },
 ]
 
-const GALLERY_DETAIL = '1 video, 1 photo, 1 document, 1 audio'
+const GALLERY_DETAIL = '4 items'
 const GALLERY_TITLE = 'Workout Guide'
 
 const MediaMatrix: React.FC<{ variant: (typeof VARIANTS)[number] }> = ({
@@ -285,41 +275,45 @@ const MediaMatrix: React.FC<{ variant: (typeof VARIANTS)[number] }> = ({
   return (
     <MatrixTable>
       <MatrixTableRow
-        label="Preview"
+        label="Draft"
         received={null}
         sent={
-          <LockedAttachment.Composer
-            placeholderTitle="Attachment title"
-            placeholderAmountText="AU$0.00"
+          <LockedAttachment
+            isDraft
+            title={title}
             thumbnailUrl={thumbnailUrl}
+            contentType="media"
             mimeType={mimeType}
             detail={detail}
-            onFetchSource={fetchSource}
+            amountText="AU$9.99"
+            onDismiss={() => alert('Dismissed')}
           />
         }
       />
       <MatrixTableRow
-        label="Composer"
+        label="Preview"
         received={null}
         sent={
-          <LockedAttachment.Composer
-            title={title}
+          <LockedAttachment
+            isPreview
+            placeholderTitle="Attachment title"
+            placeholderAmountText="AU$0.00"
             thumbnailUrl={thumbnailUrl}
             mimeType={mimeType}
+            contentType="media"
             detail={detail}
-            amountText="AU$9.99"
-            onDismiss={() => alert('Dismissed')}
           />
         }
       />
       <MatrixTableRow
         label="Idle"
         received={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine={false}
             title={title}
             thumbnailUrl={thumbnailUrl}
             mimeType={mimeType}
+            contentType="media"
             detail={detail}
             amountText="AU$9.99"
             paymentStatus={isPaid ? 'paid' : undefined}
@@ -336,11 +330,12 @@ const MediaMatrix: React.FC<{ variant: (typeof VARIANTS)[number] }> = ({
           />
         }
         sent={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine
             title={title}
             thumbnailUrl={thumbnailUrl}
             mimeType={mimeType}
+            contentType="media"
             detail={detail}
             amountText="AU$9.99"
             onFetchSource={fetchSource}
@@ -350,11 +345,12 @@ const MediaMatrix: React.FC<{ variant: (typeof VARIANTS)[number] }> = ({
       <MatrixTableRow
         label="Unlocking"
         received={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine={false}
             title={title}
             thumbnailUrl={thumbnailUrl}
             mimeType={mimeType}
+            contentType="media"
             detail={detail}
             amountText="AU$9.99"
             isUnlocking
@@ -368,11 +364,12 @@ const MediaMatrix: React.FC<{ variant: (typeof VARIANTS)[number] }> = ({
       <MatrixTableRow
         label="Purchased"
         received={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine={false}
             title={title}
             thumbnailUrl={thumbnailUrl}
             mimeType={mimeType}
+            contentType="media"
             detail={detail}
             amountText="AU$9.99"
             paymentStatus="paid"
@@ -382,11 +379,12 @@ const MediaMatrix: React.FC<{ variant: (typeof VARIANTS)[number] }> = ({
           />
         }
         sent={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine
             title={title}
             thumbnailUrl={thumbnailUrl}
             mimeType={mimeType}
+            contentType="media"
             detail={detail}
             amountText="AU$9.99"
             paymentStatus="paid"
@@ -404,7 +402,7 @@ const variantByLabel = (label: string) =>
 export const Video: StoryFn = () => (
   <MediaMatrix variant={variantByLabel('Video')} />
 )
-// LockedAttachment.Media (!isMine) autoplays the video preview once paid; even with
+// 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 } }
@@ -432,34 +430,41 @@ export const Gallery: StoryFn = () => {
   return (
     <MatrixTable>
       <MatrixTableRow
-        label="Preview"
+        label="Draft"
         received={null}
         sent={
-          <LockedAttachment.Composer
+          <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="Composer"
+        label="Preview"
         received={null}
         sent={
-          <LockedAttachment.Composer
-            title={GALLERY_TITLE}
+          <LockedAttachment
+            isPreview
+            contentType="media"
+            placeholderTitle="Attachment title"
             detail={GALLERY_DETAIL}
-            amountText="AU$50.00"
+            placeholderAmountText="AU$0.00"
             gallery={GALLERY_ITEMS}
-            onDismiss={() => alert('Dismissed gallery')}
-            onEditClick={() => alert('Edit gallery')}
           />
         }
       />
       <MatrixTableRow
         label="Idle"
         received={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine={false}
+            contentType="media"
             title={GALLERY_TITLE}
             detail={GALLERY_DETAIL}
             amountText="AU$50.00"
@@ -477,8 +482,9 @@ export const Gallery: StoryFn = () => {
           />
         }
         sent={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine
+            contentType="media"
             title={GALLERY_TITLE}
             detail={GALLERY_DETAIL}
             amountText="AU$50.00"
@@ -489,8 +495,9 @@ export const Gallery: StoryFn = () => {
       <MatrixTableRow
         label="Unlocking"
         received={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine={false}
+            contentType="media"
             title={GALLERY_TITLE}
             detail={GALLERY_DETAIL}
             amountText="AU$50.00"
@@ -505,8 +512,9 @@ export const Gallery: StoryFn = () => {
       <MatrixTableRow
         label="Purchased"
         received={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine={false}
+            contentType="media"
             title={GALLERY_TITLE}
             detail={GALLERY_DETAIL}
             amountText="AU$50.00"
@@ -517,8 +525,9 @@ export const Gallery: StoryFn = () => {
           />
         }
         sent={
-          <LockedAttachment.Media
+          <LockedAttachment
             isMine
+            contentType="media"
             title={GALLERY_TITLE}
             detail={GALLERY_DETAIL}
             amountText="AU$50.00"

package/src/components/{LockedAttachment → CustomMessage/LockedAttachment}/LockedAttachment.test.tsx

@@ -1,8 +1,7 @@
 import { describe, it, expect, vi } from 'vitest'
 
-import { renderWithProviders, screen } from '../../test/utils'
+import { renderWithProviders, screen } from '../../../test/utils'
 
-import ComposerCard from './components/Composer/Card'
 import MediaCard from './components/Media/Card'
 import TextCard from './components/Text/Card'
 
@@ -14,15 +13,15 @@ import TextCard from './components/Text/Card'
  * around. Storybook remains the pixel-level visual oracle.
  */
 describe('LockedAttachment (characterization)', () => {
-  describe('Composer', () => {
+  describe('Draft', () => {
     it('media mode: shows the placeholder title when locked with no title', () => {
-      renderWithProviders(<ComposerCard />)
+      renderWithProviders(<MediaCard isDraft />)
       expect(screen.getByText('Attachment title')).toBeInTheDocument()
     })
 
     it('media mode: renders a preview toggle when a source fetcher is wired', () => {
       renderWithProviders(
-        <ComposerCard onFetchSource={vi.fn().mockResolvedValue(undefined)} />
+        <MediaCard isDraft onFetchSource={vi.fn().mockResolvedValue(undefined)} />
       )
       expect(
         screen.getByRole('button', { name: 'Toggle preview' })
@@ -30,7 +29,7 @@ describe('LockedAttachment (characterization)', () => {
     })
 
     it('media mode: renders a dismiss control when onDismiss is provided', () => {
-      renderWithProviders(<ComposerCard onDismiss={vi.fn()} />)
+      renderWithProviders(<MediaCard isDraft onDismiss={vi.fn()} />)
       expect(
         screen.getByRole('button', { name: 'Dismiss attachment' })
       ).toBeInTheDocument()
@@ -38,13 +37,27 @@ describe('LockedAttachment (characterization)', () => {
 
     it('text mode: shows the draft text and amount', () => {
       renderWithProviders(
-        <ComposerCard contentType="text" text="Secret draft" amountText="$5" />
+        <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" />)
@@ -53,11 +66,11 @@ describe('LockedAttachment (characterization)', () => {
   })
 
   describe('Text (isMine)', () => {
-    it('pending: shows the Sent status and amount', () => {
+    it('pending: shows the amount with no status label', () => {
       renderWithProviders(
         <TextCard isMine amountText="$5" paymentStatus="pending" />
       )
-      expect(screen.getByText('Sent')).toBeInTheDocument()
+      expect(screen.queryByText('Sent')).not.toBeInTheDocument()
       expect(screen.getByText('$5')).toBeInTheDocument()
     })
 
@@ -87,7 +100,7 @@ describe('LockedAttachment (characterization)', () => {
         <TextCard isMine={false} amountText="$5" onUnlockClick={vi.fn()} />
       )
       expect(
-        screen.getByRole('button', { name: 'Unlock' })
+        screen.getByRole('button', { name: 'Unlock message' })
       ).toBeInTheDocument()
       expect(screen.getByText('$5')).toBeInTheDocument()
     })
@@ -96,7 +109,7 @@ describe('LockedAttachment (characterization)', () => {
       renderWithProviders(
         <TextCard isMine={false} isUnlocking onUnlockClick={vi.fn()} />
       )
-      const button = screen.getByRole('button', { name: 'Unlocking' })
+      const button = screen.getByRole('button', { name: 'Unlocking message' })
       expect(button).toBeDisabled()
       expect(button).toHaveAttribute('aria-busy', 'true')
     })