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

package/src/components/MessageAttachment/_shared/triggerDownload.test.ts

@@ -1,113 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { triggerDownload } from './triggerDownload'
-
-describe('triggerDownload', () => {
-  const fetchMock = vi.fn()
-  const openMock = vi.fn()
-  const createObjectURLMock = vi.fn()
-  const revokeObjectURLMock = vi.fn()
-  const clickMock = vi
-    .spyOn(HTMLAnchorElement.prototype, 'click')
-    .mockImplementation(() => undefined)
-
-  beforeEach(() => {
-    vi.stubGlobal('fetch', fetchMock)
-    vi.spyOn(window, 'open').mockImplementation(openMock)
-    Object.defineProperty(URL, 'createObjectURL', {
-      configurable: true,
-      value: createObjectURLMock,
-    })
-    Object.defineProperty(URL, 'revokeObjectURL', {
-      configurable: true,
-      value: revokeObjectURLMock,
-    })
-    fetchMock.mockReset()
-    openMock.mockReset()
-    createObjectURLMock.mockReset()
-    revokeObjectURLMock.mockReset()
-    clickMock.mockClear()
-  })
-
-  it('downloads a successful response with the supplied filename', async () => {
-    const blob = new Blob(['file'])
-    fetchMock.mockResolvedValue({
-      ok: true,
-      blob: () => Promise.resolve(blob),
-    })
-    createObjectURLMock.mockReturnValue('blob:attachment')
-    const appendSpy = vi.spyOn(document.body, 'appendChild')
-    const removeSpy = vi.spyOn(document.body, 'removeChild')
-
-    await expect(
-      triggerDownload('https://cdn.example.com/file.pdf', 'report.pdf')
-    ).resolves.toBeUndefined()
-
-    expect(fetchMock).toHaveBeenCalledWith('https://cdn.example.com/file.pdf', {
-      mode: 'cors',
-    })
-    expect(createObjectURLMock).toHaveBeenCalledWith(blob)
-    expect(clickMock).toHaveBeenCalledOnce()
-    expect(revokeObjectURLMock).toHaveBeenCalledWith('blob:attachment')
-    const anchor = appendSpy.mock.calls.at(-1)?.[0] as HTMLAnchorElement
-    expect(anchor.href).toBe('blob:attachment')
-    expect(anchor.download).toBe('report.pdf')
-    expect(anchor.style.display).toBe('none')
-    expect(removeSpy).toHaveBeenCalledWith(anchor)
-  })
-
-  it('uses the URL filename when no filename is supplied', async () => {
-    fetchMock.mockResolvedValue({
-      ok: true,
-      blob: () => Promise.resolve(new Blob()),
-    })
-    createObjectURLMock.mockReturnValue('blob:attachment')
-    const appendSpy = vi.spyOn(document.body, 'appendChild')
-
-    await triggerDownload('https://cdn.example.com/a/My%20file.pdf')
-
-    expect(
-      (appendSpy.mock.calls.at(-1)?.[0] as HTMLAnchorElement).download
-    ).toBe('My file.pdf')
-  })
-
-  it.each(['a non-ok response', 'a rejected fetch'])(
-    'falls back to a new window for %s',
-    async (label) => {
-      if (label === 'a non-ok response') {
-        fetchMock.mockResolvedValue({ ok: false, status: 404 })
-      } else {
-        fetchMock.mockRejectedValue(new Error('offline'))
-      }
-      openMock.mockReturnValue({})
-
-      await expect(
-        triggerDownload('https://cdn.example.com/file.pdf')
-      ).resolves.toBeUndefined()
-
-      expect(openMock).toHaveBeenCalledWith(
-        'https://cdn.example.com/file.pdf',
-        '_blank',
-        'noopener,noreferrer'
-      )
-    }
-  )
-
-  it('uses a raw-url anchor when the popup is blocked', async () => {
-    fetchMock.mockRejectedValue(new Error('offline'))
-    openMock.mockReturnValue(null)
-    const appendSpy = vi.spyOn(document.body, 'appendChild')
-    const removeSpy = vi.spyOn(document.body, 'removeChild')
-
-    await expect(
-      triggerDownload('https://cdn.example.com/file.pdf')
-    ).resolves.toBeUndefined()
-
-    const anchor = appendSpy.mock.calls.at(-1)?.[0] as HTMLAnchorElement
-    expect(anchor.href).toBe('https://cdn.example.com/file.pdf')
-    expect(anchor.download).toBe('file.pdf')
-    expect(anchor.target).toBe('_blank')
-    expect(anchor.rel).toBe('noopener noreferrer')
-    expect(removeSpy).toHaveBeenCalledWith(anchor)
-  })
-})

package/src/components/MessageAttachment/_shared/useCarousel.test.tsx

@@ -1,68 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { fireEvent, renderWithProviders, screen } from '../../../test/utils'
-
-import { useCarousel } from './useCarousel'
-
-const Harness = ({
-  open,
-  length,
-  initialIndex = 0,
-}: {
-  open: boolean
-  length: number
-  initialIndex?: number
-}) => {
-  const { index, prev, next } = useCarousel({ open, length, initialIndex })
-  return (
-    <div>
-      <span data-testid="index">{index}</span>
-      <button type="button" onClick={prev}>
-        Prev
-      </button>
-      <button type="button" onClick={next}>
-        Next
-      </button>
-    </div>
-  )
-}
-
-describe('useCarousel', () => {
-  it('clamps initial index, wraps, and resets on reopen', () => {
-    const { rerender } = renderWithProviders(
-      <Harness open length={3} initialIndex={99} />
-    )
-    expect(screen.getByTestId('index')).toHaveTextContent('2')
-    fireEvent.click(screen.getByRole('button', { name: 'Next' }))
-    expect(screen.getByTestId('index')).toHaveTextContent('0')
-    fireEvent.click(screen.getByRole('button', { name: 'Prev' }))
-    expect(screen.getByTestId('index')).toHaveTextContent('2')
-    rerender(<Harness open={false} length={3} initialIndex={1} />)
-    rerender(<Harness open length={3} initialIndex={1} />)
-    expect(screen.getByTestId('index')).toHaveTextContent('1')
-  })
-
-  it('handles arrows only when open with multiple items', () => {
-    const { rerender } = renderWithProviders(
-      <Harness open length={2} initialIndex={0} />
-    )
-    const right = fireEvent.keyDown(window, { key: 'ArrowRight' })
-    expect(screen.getByTestId('index')).toHaveTextContent('1')
-    expect(right).toBe(false)
-    for (const tagName of ['video', 'audio'] as const) {
-      const media = document.createElement(tagName)
-      media.tabIndex = 0
-      document.body.appendChild(media)
-      media.focus()
-      fireEvent.keyDown(window, { key: 'ArrowLeft' })
-      expect(screen.getByTestId('index')).toHaveTextContent('1')
-      media.remove()
-    }
-    rerender(<Harness open length={1} />)
-    fireEvent.keyDown(window, { key: 'ArrowRight' })
-    expect(screen.getByTestId('index')).toHaveTextContent('0')
-    rerender(<Harness open={false} length={2} />)
-    fireEvent.keyDown(window, { key: 'ArrowRight' })
-    expect(screen.getByTestId('index')).toHaveTextContent('0')
-  })
-})

package/src/components/MessageAttachment/_shared/viewerChromeClasses.test.ts

@@ -1,16 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { VIEWER_ACTION_CLASS, VIEWER_NAV_CLASS } from './viewerChromeClasses'
-
-describe('viewer chrome classes', () => {
-  it('keeps the load-bearing action button tokens', () => {
-    expect(VIEWER_ACTION_CLASS).toContain('size-10')
-    expect(VIEWER_ACTION_CLASS).toContain('rounded-full')
-  })
-
-  it('keeps the load-bearing navigation button tokens', () => {
-    expect(VIEWER_NAV_CLASS).toContain('absolute')
-    expect(VIEWER_NAV_CLASS).toContain('size-12')
-    expect(VIEWER_NAV_CLASS).toContain('-translate-y-1/2')
-  })
-})

package/src/logging/index.test.tsx

@@ -1,136 +0,0 @@
-import type { Logger } from '@linktr.ee/messaging-core'
-import { render } from '@testing-library/react'
-import React from 'react'
-import { describe, it, expect, vi, afterEach } from 'vitest'
-
-import {
-  MessagingLoggerProvider,
-  consoleLogger,
-  resolveLogger,
-  useMessagingLogger,
-} from './index'
-
-const ERROR_MESSAGE = '[MessagingShell] Failed to load channels:'
-
-/** Logs one error through the seam the way a call site would. */
-const ErrorEmitter: React.FC<{ error: Error }> = ({ error }) => {
-  const logger = useMessagingLogger()
-  logger.error(ERROR_MESSAGE, error)
-  return null
-}
-
-/** Emits one line at every level so partial-sink fallback is observable. */
-const AllLevelsEmitter: React.FC = () => {
-  const logger = useMessagingLogger()
-  logger.debug('debug line', 1)
-  logger.info('info line', 2)
-  logger.warn('warn line', 3)
-  logger.error('error line', 4)
-  return null
-}
-
-afterEach(() => {
-  vi.restoreAllMocks()
-})
-
-describe('logger seam', () => {
-  it('routes error to an injected sink with the exact message and raw error object', () => {
-    const error = new Error('boom')
-    const sink = { error: vi.fn() }
-
-    render(
-      <MessagingLoggerProvider logger={sink}>
-        <ErrorEmitter error={error} />
-      </MessagingLoggerProvider>
-    )
-
-    expect(sink.error).toHaveBeenCalledTimes(1)
-    expect(sink.error).toHaveBeenCalledWith(ERROR_MESSAGE, error)
-    // The raw Error instance, not a serialized copy.
-    expect(sink.error.mock.calls[0][1]).toBe(error)
-  })
-
-  it('passes identical arguments to console.error when no sink is injected', () => {
-    const error = new Error('boom')
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
-    const sink = { error: vi.fn() }
-
-    render(
-      <MessagingLoggerProvider logger={sink}>
-        <ErrorEmitter error={error} />
-      </MessagingLoggerProvider>
-    )
-    const injectedArgs = sink.error.mock.calls[0]
-
-    // No provider at all, and a provider with no logger prop: both must produce
-    // byte-identical console output to what the injected sink received.
-    render(<ErrorEmitter error={error} />)
-    render(
-      <MessagingLoggerProvider>
-        <ErrorEmitter error={error} />
-      </MessagingLoggerProvider>
-    )
-
-    expect(consoleError).toHaveBeenCalledTimes(2)
-    expect(consoleError.mock.calls[0]).toEqual(injectedArgs)
-    expect(consoleError.mock.calls[1]).toEqual(injectedArgs)
-    expect(consoleError.mock.calls[0][1]).toBe(error)
-  })
-
-  it('falls back to console for the levels a partial sink omits', () => {
-    const consoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
-    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {})
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
-    const sink: Logger = { warn: vi.fn(), error: vi.fn() }
-
-    render(
-      <MessagingLoggerProvider logger={sink}>
-        <AllLevelsEmitter />
-      </MessagingLoggerProvider>
-    )
-
-    expect(sink.warn).toHaveBeenCalledWith('warn line', 3)
-    expect(sink.error).toHaveBeenCalledWith('error line', 4)
-    expect(consoleWarn).not.toHaveBeenCalled()
-    expect(consoleError).not.toHaveBeenCalled()
-    // debug and info are unset on the sink, so both land on console.log.
-    expect(consoleLog.mock.calls).toEqual([
-      ['debug line', 1],
-      ['info line', 2],
-    ])
-  })
-
-  it('defaults every level to console when the hook is used with no provider', () => {
-    const consoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
-    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {})
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    render(<AllLevelsEmitter />)
-
-    expect(consoleLog.mock.calls).toEqual([
-      ['debug line', 1],
-      ['info line', 2],
-    ])
-    expect(consoleWarn).toHaveBeenCalledWith('warn line', 3)
-    expect(consoleError).toHaveBeenCalledWith('error line', 4)
-  })
-
-  it('resolveLogger keeps provided levels and fills the rest from console', () => {
-    const warn = vi.fn()
-    const resolved = resolveLogger({ warn })
-
-    expect(resolved.warn).toBe(warn)
-    expect(resolved.debug).toBe(consoleLogger.debug)
-    expect(resolved.info).toBe(consoleLogger.info)
-    expect(resolved.error).toBe(consoleLogger.error)
-    expect(resolveLogger()).toEqual(consoleLogger)
-  })
-
-  it('consoleLogger dispatches through console at call time, not bind time', () => {
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    consoleLogger.error('late spy', 'arg')
-
-    expect(consoleError).toHaveBeenCalledWith('late spy', 'arg')
-  })
-})

package/src/logging/index.tsx

@@ -1,48 +0,0 @@
-import type { Logger } from '@linktr.ee/messaging-core'
-import React, { createContext, useContext, useMemo } from 'react'
-
-/**
- * Default sink: the console calls the package makes today. Wrappers, not
- * `console.error.bind(console)`, so a later-installed spy is still observed.
- */
-export const consoleLogger: Required<Logger> = {
-  debug: (message, ...args) => console.log(message, ...args),
-  info: (message, ...args) => console.log(message, ...args),
-  warn: (message, ...args) => console.warn(message, ...args),
-  error: (message, ...args) => console.error(message, ...args),
-}
-
-/**
- * Merge a partial sink over the console defaults, so a consumer can route only
- * the levels it cares about (e.g. `error`) and leave the rest on console.
- */
-export const resolveLogger = (logger?: Logger): Required<Logger> => ({
-  debug: logger?.debug ?? consoleLogger.debug,
-  info: logger?.info ?? consoleLogger.info,
-  warn: logger?.warn ?? consoleLogger.warn,
-  error: logger?.error ?? consoleLogger.error,
-})
-
-const LoggerContext = createContext<Required<Logger>>(consoleLogger)
-
-/**
- * Provides the resolved logger sink to the messaging subtree. Rendered by
- * `MessagingProvider`; usable standalone in tests or in a subtree that needs a
- * different sink.
- */
-export const MessagingLoggerProvider: React.FC<{
-  logger?: Logger
-  children: React.ReactNode
-}> = ({ logger, children }) => {
-  const value = useMemo(() => resolveLogger(logger), [logger])
-  return (
-    <LoggerContext.Provider value={value}>{children}</LoggerContext.Provider>
-  )
-}
-
-/**
- * The logger sink for the current subtree. Falls back to console when no
- * provider (or no `logger` prop) is present, so call sites never branch.
- */
-export const useMessagingLogger = (): Required<Logger> =>
-  useContext(LoggerContext)

package/src/stories/customMessageStoryTemplate.tsx

@@ -1,202 +0,0 @@
-import '../stream-custom-data'
-
-import type { StoryFn } from '@storybook/react'
-import React, { useEffect } from 'react'
-import {
-  Channel as ChannelType,
-  QueryChannelAPIResponse,
-  StreamChat,
-} from 'stream-chat'
-import {
-  Channel,
-  Chat,
-  MessageList,
-  MessageUIComponentProps,
-  Window,
-} from 'stream-chat-react'
-
-import { CustomMessage } from '../components/CustomMessage'
-import {
-  OutboundContext,
-  buildOutboundsByRecordId,
-} from '../components/CustomMessage/OutboundContext'
-import CustomTypingIndicator from '../components/CustomTypingIndicator'
-import { createMockStreamChatClient } from '../testing/createMockStreamChatClient'
-import type { OutboundResolver } from '../types'
-
-import { minutesAgo } from './decorators/storyTime'
-import { StoryUser, storyUsers } from './decorators/storyUser'
-
-export const createMockChannel = async (
-  client: StreamChat,
-  messages: TemplateProps['messages']
-) => {
-  const mockMessages = messages.map((msg, index) => ({
-    ...msg,
-    type: msg.type ?? ('regular' as const),
-    created_at: minutesAgo(messages.length - index),
-    updated_at: minutesAgo(messages.length - index),
-    attachments: msg.attachments ?? [],
-    latest_reactions: [],
-    own_reactions: [],
-    reaction_counts: {},
-    reaction_scores: {},
-    reply_count: 0,
-    status: 'received',
-    cid: 'messaging:storybook-channel-1',
-    mentioned_users: msg.mentioned_users ?? [],
-  }))
-
-  const channelData = {
-    members: [storyUsers.creator.id, storyUsers.visitor.id],
-    // Required for useUserRole: canDelete needs delete-own-message, canFlag needs flag-message
-    own_capabilities: ['delete-own-message', 'flag-message'],
-  }
-
-  const channel = client.channel(
-    'messaging',
-    'storybook-channel-1',
-    channelData
-  )
-
-  channel.watch = async () => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    channel.state.messages = mockMessages as unknown as any[]
-    channel.state.members = {
-      [storyUsers.creator.id]: {
-        user: storyUsers.creator,
-        user_id: storyUsers.creator.id,
-      },
-      [storyUsers.visitor.id]: {
-        user: storyUsers.visitor,
-        user_id: storyUsers.visitor.id,
-      },
-    }
-    return {
-      channel: channelData,
-      members: [],
-      messages: mockMessages,
-      watchers: [],
-      pinned_messages: [],
-      duration: '0ms',
-    } as unknown as QueryChannelAPIResponse
-  }
-
-  try {
-    await channel.watch()
-  } catch {
-    // Ignore errors in mock mode
-  }
-
-  return channel
-}
-
-export interface TemplateProps {
-  currentUser: StoryUser
-  typingUser?: StoryUser
-  resolveOutbound?: OutboundResolver
-  messages: Array<{
-    id: string
-    text: string
-    user: StoryUser
-    mentioned_users?: StoryUser[]
-    type?: 'regular' | 'system'
-    attachments?: Array<Record<string, unknown>>
-    metadata?: {
-      custom_type?:
-        | 'MESSAGE_TIP'
-        | 'MESSAGE_PAID'
-        | 'MESSAGE_CHATBOT'
-        | 'MESSAGE_ATTACHMENT'
-        | 'MESSAGE_OUTBOUND'
-      payment_status?: 'pending' | 'paid' | 'failed' | 'refunded'
-      amount_text?: string
-      attachment_title?: string
-      attachment_mime_type?: string
-      attachment_thumbnail?: string
-      attachment_detail?: string
-      attachment_content_type?: 'text' | 'media'
-      outbound_id?: string
-    }
-  }>
-}
-
-const TemplateInner: React.FC<{
-  currentUser: StoryUser
-  typingUser?: StoryUser
-  messages: TemplateProps['messages']
-  resolveOutbound?: OutboundResolver
-}> = ({ currentUser, typingUser, messages, resolveOutbound }) => {
-  const [client] = React.useState(() => createMockStreamChatClient(currentUser))
-
-  const [channel, setChannel] = React.useState<ChannelType | null>(null)
-
-  useEffect(() => {
-    createMockChannel(client, messages).then(setChannel)
-  }, [client, messages])
-
-  useEffect(() => {
-    if (!channel || !typingUser) {
-      return
-    }
-
-    // Stream Channel UI only updates typing context from typing.start/typing.stop events.
-    const timer = setTimeout(() => {
-      client.dispatchEvent({
-        type: 'typing.start',
-        cid: channel.cid,
-        user: typingUser,
-      })
-    }, 0)
-
-    return () => clearTimeout(timer)
-  }, [channel, client, typingUser])
-
-  const outboundsByRecordId = React.useMemo(
-    () => buildOutboundsByRecordId(messages, resolveOutbound),
-    [messages, resolveOutbound]
-  )
-
-  const MessageComponent = React.useMemo(() => {
-    return function CustomMessageComponent(props: MessageUIComponentProps) {
-      return <CustomMessage {...props} onOutboundClick={() => undefined} />
-    }
-  }, [])
-
-  if (!channel) {
-    return <div className="p-4">Loading...</div>
-  }
-
-  return (
-    <OutboundContext.Provider value={outboundsByRecordId}>
-      <Chat client={client}>
-        <div className="h-screen w-full bg-white">
-          <Channel
-            channel={channel}
-            Message={MessageComponent}
-            TypingIndicator={CustomTypingIndicator}
-          >
-            <Window>
-              <MessageList />
-            </Window>
-          </Channel>
-        </div>
-      </Chat>
-    </OutboundContext.Provider>
-  )
-}
-
-export const Template: StoryFn<TemplateProps> = ({
-  currentUser = storyUsers.creator,
-  typingUser,
-  messages,
-  resolveOutbound,
-}) => (
-  <TemplateInner
-    key={currentUser.id}
-    currentUser={currentUser}
-    typingUser={typingUser}
-    messages={messages}
-    resolveOutbound={resolveOutbound}
-  />
-)