@linktr.ee/messaging-react 4.2.0-rc-1787325521 → 4.2.0-rc-1787599724

package/src/components/AttachmentCard/index.test.tsx

@@ -1,160 +0,0 @@
-import React from 'react'
-import { describe, expect, it } from 'vitest'
-
-import { renderWithProviders, screen } from '../../test/utils'
-
-import AttachmentCard from './index'
-
-const thumbnail = <div data-testid="thumbnail">thumbnail</div>
-
-describe('AttachmentCard', () => {
-  it('applies the dark and light root surfaces and type icon colors', () => {
-    const dark = renderWithProviders(
-      <AttachmentCard
-        variant="dark"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="Dark file"
-      />
-    )
-    expect(screen.getByText('Dark file')).toBeInTheDocument()
-    expect(dark.container.firstElementChild).toHaveClass('bg-[#1e2330]')
-    expect(dark.container.querySelector('svg')).toHaveClass('text-white/55')
-    dark.unmount()
-
-    const light = renderWithProviders(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="Light file"
-      />
-    )
-    expect(light.container.firstElementChild).toHaveClass('bg-white')
-    expect(light.container.querySelector('svg')).toHaveClass('text-black/55')
-  })
-
-  it('uses the dark placeholder title and dims it when title is absent', () => {
-    renderWithProviders(
-      <AttachmentCard
-        variant="dark"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        placeholderTitle="Waiting for title"
-      />
-    )
-    expect(screen.getByText('Waiting for title')).toHaveClass('text-white/30')
-  })
-
-  it('does not render a light title for missing or whitespace-only values', () => {
-    const { rerender } = renderWithProviders(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-      />
-    )
-    expect(screen.queryByText('Attachment title')).toBeNull()
-
-    rerender(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="   "
-      />
-    )
-    expect(screen.queryByText('   ')).toBeNull()
-  })
-
-  it('uses an undimmed title class when a dark title is provided', () => {
-    renderWithProviders(
-      <AttachmentCard
-        variant="dark"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="Named file"
-      />
-    )
-    expect(screen.getByText('Named file')).toHaveClass('text-white')
-    expect(screen.getByText('Named file')).not.toHaveClass('text-white/30')
-  })
-
-  it('renders detail only for non-empty values', () => {
-    const { rerender } = renderWithProviders(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="File"
-        detail="2 MB"
-      />
-    )
-    expect(screen.getByText('2 MB')).toBeInTheDocument()
-
-    rerender(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        title="File"
-        detail=""
-      />
-    )
-    expect(screen.queryByText('2 MB')).toBeNull()
-  })
-
-  it('renders optional slots only when supplied', () => {
-    const { container } = renderWithProviders(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        statusBadge={<span>Ready</span>}
-        action={<button type="button">Open</button>}
-        topLeft={<span>Left</span>}
-        topRight={<span>Right</span>}
-      />
-    )
-    expect(screen.getByText('Ready')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument()
-    expect(screen.getByText('Left').parentElement).toHaveClass(
-      'pointer-events-auto',
-      'absolute',
-      'left-3',
-      'top-3'
-    )
-    expect(screen.getByText('Right').parentElement).toHaveClass(
-      'pointer-events-auto',
-      'absolute',
-      'right-3',
-      'top-3'
-    )
-    expect(container.querySelectorAll('.pointer-events-auto')).toHaveLength(2)
-
-    const withoutSlots = renderWithProviders(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-      />
-    )
-    expect(
-      withoutSlots.container.querySelectorAll('.pointer-events-auto')
-    ).toHaveLength(0)
-  })
-
-  it('forwards rootRef and data-testid to the root', () => {
-    const rootRef = React.createRef<HTMLDivElement>()
-    renderWithProviders(
-      <AttachmentCard
-        variant="light"
-        thumbnail={thumbnail}
-        mimeType="application/pdf"
-        rootRef={rootRef}
-        data-testid="attachment-card"
-      />
-    )
-    expect(screen.getByTestId('attachment-card')).toBe(rootRef.current)
-  })
-})

package/src/components/ChannelList/ChannelListContext.test.tsx

@@ -1,87 +0,0 @@
-import type { Channel } from 'stream-chat'
-import { describe, expect, it, vi } from 'vitest'
-
-import { fireEvent, renderWithProviders, screen } from '../../test/utils'
-
-import {
-  ChannelListProvider,
-  useChannelListContext,
-} from './ChannelListContext'
-
-const channel = { id: 'channel-1' } as Channel
-
-function ContextConsumer() {
-  const value = useChannelListContext()
-
-  return (
-    <div>
-      <span data-testid="selected-channel">
-        {value.selectedChannel?.id ?? 'undefined'}
-      </span>
-      <span data-testid="debug">{String(value.debug)}</span>
-      <span data-testid="render-message-preview">
-        {value.renderMessagePreview ? 'provided' : 'undefined'}
-      </span>
-      <span data-testid="channel-preview">
-        {value.channelPreview ? 'provided' : 'undefined'}
-      </span>
-      <span data-testid="viewer-language">
-        {value.viewerLanguage ?? 'undefined'}
-      </span>
-      <button type="button" onClick={() => value.onChannelSelect(channel)}>
-        Select channel
-      </button>
-    </div>
-  )
-}
-
-describe('ChannelListContext', () => {
-  it('provides safe documented defaults without a provider', () => {
-    renderWithProviders(<ContextConsumer />)
-
-    expect(screen.getByTestId('selected-channel')).toHaveTextContent(
-      'undefined'
-    )
-    expect(screen.getByTestId('debug')).toHaveTextContent('false')
-    expect(screen.getByTestId('render-message-preview')).toHaveTextContent(
-      'undefined'
-    )
-    expect(screen.getByTestId('channel-preview')).toHaveTextContent('undefined')
-    expect(screen.getByTestId('viewer-language')).toHaveTextContent('undefined')
-    expect(() => fireEvent.click(screen.getByRole('button'))).not.toThrow()
-  })
-
-  it('exposes the value supplied by a provider', () => {
-    const onChannelSelect = vi.fn()
-    const ChannelPreview = () => null
-    const renderMessagePreview = () => 'preview'
-
-    renderWithProviders(
-      <ChannelListProvider
-        value={{
-          selectedChannel: channel,
-          onChannelSelect,
-          debug: true,
-          renderMessagePreview,
-          channelPreview: ChannelPreview,
-          viewerLanguage: 'es',
-        }}
-      >
-        <ContextConsumer />
-      </ChannelListProvider>
-    )
-
-    expect(screen.getByTestId('selected-channel')).toHaveTextContent(
-      'channel-1'
-    )
-    expect(screen.getByTestId('debug')).toHaveTextContent('true')
-    expect(screen.getByTestId('render-message-preview')).toHaveTextContent(
-      'provided'
-    )
-    expect(screen.getByTestId('channel-preview')).toHaveTextContent('provided')
-    expect(screen.getByTestId('viewer-language')).toHaveTextContent('es')
-
-    fireEvent.click(screen.getByRole('button'))
-    expect(onChannelSelect).toHaveBeenCalledWith(channel)
-  })
-})

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

@@ -1,108 +0,0 @@
-import type { Meta } from '@storybook/react'
-
-import {
-  Template,
-  type TemplateProps,
-} from '../../stories/customMessageStoryTemplate'
-import {
-  currentUserArgType,
-  storyUsers,
-} from '../../stories/decorators/storyUser'
-
-const meta: Meta = {
-  title: 'CustomMessage/Locked Attachment',
-  argTypes: currentUserArgType,
-  args: { currentUser: storyUsers.creator },
-  parameters: {
-    layout: 'fullscreen',
-  },
-}
-export default meta
-
-export const LockedAttachment = Template.bind({})
-LockedAttachment.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'Can I have your workout plan?',
-      user: storyUsers.visitor,
-    },
-    {
-      id: 'msg-2',
-      text: 'Yes, of course!',
-      user: storyUsers.creator,
-    },
-    {
-      id: 'msg-3',
-      text: 'let me know if you have any questions!',
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$9.99',
-        attachment_title: "Alicia's Workout Plan",
-        attachment_mime_type: 'video/mp4',
-        attachment_thumbnail: '/video-thumbnail-blurred.jpg',
-        attachment_detail: '1:20',
-      },
-    },
-    {
-      id: 'msg-4',
-      text: 'Looks amazing, unlocking now!',
-      user: storyUsers.visitor,
-    },
-  ],
-} satisfies TemplateProps
-
-export const LockedTextAttachment = Template.bind({})
-LockedTextAttachment.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'Can you send me the details privately?',
-      user: storyUsers.visitor,
-    },
-    {
-      id: 'msg-2',
-      // Empty text: the real content is redacted server-side until purchase,
-      // so the bubble renders the blurred placeholder instead.
-      text: '',
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$4.99',
-        attachment_content_type: 'text',
-      },
-    },
-    {
-      id: 'msg-3',
-      text: '',
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$4.99',
-        payment_status: 'paid',
-        attachment_content_type: 'text',
-      },
-    },
-    {
-      id: 'msg-4',
-      // Buyer reveal: backend writes the real text back onto the message.
-      text: "Here's the address — see you Thursday at 7!",
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$4.99',
-        payment_status: 'paid',
-        attachment_content_type: 'text',
-      },
-    },
-  ],
-} satisfies TemplateProps
-LockedTextAttachment.parameters = {
-  docs: {
-    description: {
-      story:
-        'A paid text-only message renders as a regular bubble with blurred placeholder copy (msg-2: pending, msg-3: purchased-but-not-yet-revealed) until the real text is revealed (msg-4).',
-    },
-  },
-}

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

@@ -1,42 +0,0 @@
-import type { Meta } from '@storybook/react'
-
-import {
-  Template,
-  type TemplateProps,
-} from '../../stories/customMessageStoryTemplate'
-import {
-  currentUserArgType,
-  storyUsers,
-} from '../../stories/decorators/storyUser'
-
-const meta: Meta = {
-  title: 'CustomMessage/Paid Message',
-  argTypes: currentUserArgType,
-  args: { currentUser: storyUsers.creator },
-  parameters: {
-    layout: 'fullscreen',
-  },
-}
-export default meta
-
-// A paid message keeps the original small "Delivered with $X message" tag
-// (gift icon + green text) under the bubble — unlike a tip, it never gets
-// the pill treatment.
-export const Default = Template.bind({})
-Default.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: "Here's the private coaching link we discussed!",
-      user: storyUsers.creator,
-      metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10' },
-    },
-    // Trailing reply so the paid message is no longer the latest own
-    // message — keeps the "✓✓ Delivered" stamp off this example.
-    {
-      id: 'msg-2',
-      text: 'Thank you so much!',
-      user: storyUsers.visitor,
-    },
-  ],
-} satisfies TemplateProps

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

@@ -1,48 +0,0 @@
-import type { Meta } from '@storybook/react'
-
-import {
-  Template,
-  type TemplateProps,
-} from '../../stories/customMessageStoryTemplate'
-import {
-  currentUserArgType,
-  storyUsers,
-} from '../../stories/decorators/storyUser'
-
-const meta: Meta = {
-  title: 'CustomMessage/Tip Message',
-  argTypes: currentUserArgType,
-  args: { currentUser: storyUsers.creator },
-  parameters: {
-    layout: 'fullscreen',
-  },
-}
-export default meta
-
-// Figma "Tip with message" (node 2353:14548): a sent tip pill stacked
-// directly above its accompanying text bubble, tail + delivery status below.
-export const TipWithMessage = Template.bind({})
-TipWithMessage.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'Thanks you so much!',
-      user: storyUsers.creator,
-      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$1' },
-    },
-  ],
-} satisfies TemplateProps
-
-// Same "Tip with message" layout, but textless — only the tip pill renders,
-// no second bubble.
-export const TipWithoutMessage = Template.bind({})
-TipWithoutMessage.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: '',
-      user: storyUsers.creator,
-      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$1' },
-    },
-  ],
-} satisfies TemplateProps

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

@@ -1,51 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react'
-import React from 'react'
-import { LocalMessage } from 'stream-chat'
-
-import { now } from '../../../stories/decorators/storyTime'
-
-import { TipMessage } from '.'
-
-type ComponentProps = React.ComponentProps<typeof TipMessage>
-
-const meta: Meta<ComponentProps> = {
-  title: 'TipMessage',
-  component: TipMessage,
-  parameters: {
-    layout: 'centered',
-  },
-}
-export default meta
-
-interface MockMessageOptions {
-  metadata?: {
-    custom_type?: 'MESSAGE_TIP'
-    amount_text?: string
-  }
-  text?: string
-}
-
-const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
-  ({
-    id: 'msg-1',
-    text: options?.text ?? '',
-    type: 'regular',
-    created_at: now(),
-    updated_at: now(),
-    metadata: options?.metadata,
-  }) as LocalMessage
-
-const Template: StoryFn<ComponentProps> = (args) => {
-  return (
-    <div className="p-12">
-      <TipMessage {...args} />
-    </div>
-  )
-}
-
-export const Standalone: StoryFn<ComponentProps> = Template.bind({})
-Standalone.args = {
-  message: createMockMessage({
-    metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
-  }),
-}

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

@@ -1,65 +0,0 @@
-import { LocalMessage } from 'stream-chat'
-import { describe, expect, it } from 'vitest'
-
-import { renderWithProviders, screen } from '../../../test/utils'
-
-import { TipMessage } from '.'
-
-interface MockMessageOptions {
-  metadata?: {
-    custom_type?: 'MESSAGE_TIP'
-    amount_text?: string
-  }
-  text?: string
-}
-
-const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
-  ({
-    id: 'msg-1',
-    text: options?.text ?? 'Hello world',
-    type: 'regular',
-    created_at: new Date(),
-    updated_at: new Date(),
-    metadata: options?.metadata,
-  }) as LocalMessage
-
-describe('TipMessage', () => {
-  it('renders tip pill regardless of accompanying text', () => {
-    renderWithProviders(
-      <TipMessage
-        message={createMockMessage({
-          metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
-        })}
-      />
-    )
-
-    const tipTag = screen.getByText('$5.50 tip!')
-    expect(tipTag.closest('.message-tip-pill')).not.toBeNull()
-  })
-
-  it('renders tip pill label for textless tip messages', () => {
-    renderWithProviders(
-      <TipMessage
-        message={createMockMessage({
-          text: '',
-          metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
-        })}
-      />
-    )
-
-    const tipTag = screen.getByText('$50.00 tip!')
-    expect(tipTag.closest('.message-tip-pill')).not.toBeNull()
-  })
-
-  it('returns null when amount_text is missing', () => {
-    const { container } = renderWithProviders(
-      <TipMessage
-        message={createMockMessage({
-          metadata: { custom_type: 'MESSAGE_TIP' },
-        })}
-      />
-    )
-
-    expect(container.firstChild).toBeNull()
-  })
-})

package/src/components/CustomMessage/TipMessage/index.tsx

@@ -1,27 +0,0 @@
-import { MESSAGE_CUSTOM_TYPE } from '@linktr.ee/messaging-taxonomy'
-import { LocalMessage } from 'stream-chat'
-
-/** Check if a message is a tip based on metadata */
-export const isTipMessage = (message: LocalMessage): boolean => {
-  return message.metadata?.custom_type === MESSAGE_CUSTOM_TYPE.TIP
-}
-
-/** Tip pill — the gift-emoji bubble a tip message attaches, with or without accompanying text */
-export const TipMessage = ({ message }: { message: LocalMessage }) => {
-  const amountText = message.metadata?.amount_text
-  if (!amountText) return null
-
-  return (
-    <div className="message-tip-pill inline-flex items-end gap-0.5 max-w-[520px] rounded-[1.5rem] bg-[#43e660] px-4 py-3 text-white">
-      <span
-        className="flex h-5 items-center text-[20px] leading-none"
-        aria-hidden="true"
-      >
-        🎁
-      </span>
-      <span className="text-[14px] font-bold leading-[1.43] tracking-[0.28px] text-[rgba(4,4,3,0.9)]">
-        {amountText} tip!
-      </span>
-    </div>
-  )
-}