@linktr.ee/messaging-react 3.37.0 → 3.37.1

package/dist/index.d.ts

@@ -28,7 +28,7 @@ import { StreamChatServiceConfig } from '@linktr.ee/messaging-core';
 export declare const ActionButton: ({ variant, className, children, ...rest }: ActionButtonProps) => JSX_2.Element;
 
 export declare interface ActionButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "default" | "danger";
+    variant?: 'default' | 'danger';
 }
 
 export declare type AttachmentSourceType = 'image' | 'audio' | 'video' | 'document';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as h, k as L, l as d, m as p, R as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-DGmVyxHy.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as h, k as L, l as d, m as p, R as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, o as z, y as B, z as S, B as q, D, E, G as R, H as V, I as w } from "./index-BOBIiAuD.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.37.0",
+  "version": "3.37.1",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -49,12 +49,13 @@
     "chromatic:ci:main": "chromatic --ci --auto-accept-changes"
   },
   "dependencies": {
-    "@linktr.ee/component-library": "11.8.6",
     "@linktr.ee/messaging-core": "^2.4.0",
     "@linktr.ee/messaging-taxonomy": "^0.9.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {
+    "@linktr.ee/arbor": "25.0.0",
+    "@linktr.ee/design-tokens": "14.0.0",
     "@storybook/addon-essentials": "^8.5.0",
     "@storybook/addon-interactions": "^8.5.0",
     "@storybook/addon-links": "^8.5.0",

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 
 import ActionButton from '.'
 
-
 type ComponentProps = React.ComponentProps<typeof ActionButton>
 
 const meta: Meta<ComponentProps> = {
@@ -44,4 +43,3 @@ Disabled.args = {
   variant: 'default',
   disabled: true,
 }
-

package/src/components/ActionButton/ActionButton.test.tsx

@@ -1,89 +1,94 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi } from 'vitest'
 
-import { renderWithProviders, screen, userEvent } from '../../test/utils';
+import { renderWithProviders, screen, userEvent } from '../../test/utils'
 
-import ActionButton from '.';
+import ActionButton from '.'
 
 describe('ActionButton', () => {
   describe('Rendering', () => {
     it('renders with children text', () => {
-      renderWithProviders(<ActionButton>Click me</ActionButton>);
-      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
-    });
-  });
+      renderWithProviders(<ActionButton>Click me</ActionButton>)
+      expect(
+        screen.getByRole('button', { name: 'Click me' })
+      ).toBeInTheDocument()
+    })
+  })
 
   describe('Disabled State', () => {
     it('is disabled when disabled prop is true', () => {
-      renderWithProviders(<ActionButton disabled>Disabled</ActionButton>);
-      const button = screen.getByRole('button');
-      expect(button).toBeDisabled();
-    });
+      renderWithProviders(<ActionButton disabled>Disabled</ActionButton>)
+      const button = screen.getByRole('button')
+      expect(button).toBeDisabled()
+    })
 
     it('does not trigger onClick when disabled', async () => {
-      const handleClick = vi.fn();
-      const user = userEvent.setup();
-      
+      const handleClick = vi.fn()
+      const user = userEvent.setup()
+
       renderWithProviders(
         <ActionButton disabled onClick={handleClick}>
           Disabled
         </ActionButton>
-      );
+      )
 
-      const button = screen.getByRole('button');
-      await user.click(button);
+      const button = screen.getByRole('button')
+      await user.click(button)
 
-      expect(handleClick).not.toHaveBeenCalled();
-    });
-  });
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+  })
 
   describe('Click Handling', () => {
     it('calls onClick when clicked', async () => {
-      const handleClick = vi.fn();
-      const user = userEvent.setup();
-      
-      renderWithProviders(<ActionButton onClick={handleClick}>Click me</ActionButton>);
+      const handleClick = vi.fn()
+      const user = userEvent.setup()
+
+      renderWithProviders(
+        <ActionButton onClick={handleClick}>Click me</ActionButton>
+      )
 
-      const button = screen.getByRole('button');
-      await user.click(button);
+      const button = screen.getByRole('button')
+      await user.click(button)
 
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-  });
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
 
   describe('Type Attribute', () => {
     it('has button type by default', () => {
-      renderWithProviders(<ActionButton>Default Type</ActionButton>);
-      const button = screen.getByRole('button');
-      expect(button).toHaveAttribute('type', 'button');
-    });
+      renderWithProviders(<ActionButton>Default Type</ActionButton>)
+      const button = screen.getByRole('button')
+      expect(button).toHaveAttribute('type', 'button')
+    })
 
     it('can have submit type', () => {
-      renderWithProviders(<ActionButton type="submit">Submit</ActionButton>);
-      const button = screen.getByRole('button');
-      expect(button).toHaveAttribute('type', 'submit');
-    });
-  });
+      renderWithProviders(<ActionButton type="submit">Submit</ActionButton>)
+      const button = screen.getByRole('button')
+      expect(button).toHaveAttribute('type', 'submit')
+    })
+  })
 
   describe('Accessibility', () => {
     it('is keyboard accessible', async () => {
-      const handleClick = vi.fn();
-      const user = userEvent.setup();
-      
-      renderWithProviders(<ActionButton onClick={handleClick}>Press me</ActionButton>);
+      const handleClick = vi.fn()
+      const user = userEvent.setup()
 
-      const button = screen.getByRole('button');
-      button.focus();
-      await user.keyboard('{Enter}');
+      renderWithProviders(
+        <ActionButton onClick={handleClick}>Press me</ActionButton>
+      )
 
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    });
+      const button = screen.getByRole('button')
+      button.focus()
+      await user.keyboard('{Enter}')
 
-    it('can be focused', () => {
-      renderWithProviders(<ActionButton>Focus me</ActionButton>);
-      const button = screen.getByRole('button');
-      button.focus();
-      expect(button).toHaveFocus();
-    });
-  });
-});
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
 
+    it('can be focused', () => {
+      renderWithProviders(<ActionButton>Focus me</ActionButton>)
+      const button = screen.getByRole('button')
+      button.focus()
+      expect(button).toHaveFocus()
+    })
+  })
+})

package/src/components/ActionButton/index.tsx

@@ -1,33 +1,32 @@
-import classNames from "classnames";
-import React from "react";
+import classNames from 'classnames'
+import React from 'react'
 
-export interface ActionButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "danger";
+export interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'danger'
 }
 
 const ActionButton = ({
-  variant = "default",
+  variant = 'default',
   className,
   children,
   ...rest
 }: ActionButtonProps) => {
-  const isDanger = variant === "danger";
+  const isDanger = variant === 'danger'
   return (
     <button
       type="button"
       className={classNames(
-        "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60",
+        'flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60',
         isDanger
-          ? "text-danger hover:bg-danger/50"
-          : "text-charcoal hover:bg-sand",
-        className,
+          ? 'text-danger hover:bg-danger/50'
+          : 'text-charcoal hover:bg-sand',
+        className
       )}
       {...rest}
     >
       {children}
     </button>
-  );
-};
+  )
+}
 
-export default ActionButton;
+export default ActionButton

package/src/components/AttachmentCard/AttachmentCard.stories.tsx

@@ -184,9 +184,7 @@ export const AllVariants: StoryFn = () => {
         variant: 'dark',
         mimeType: 'image/png',
         detail: '1.1 MB',
-        thumbnail: (
-          <AttachmentThumbnail mimeType="image/png" variant="dark" />
-        ),
+        thumbnail: <AttachmentThumbnail mimeType="image/png" variant="dark" />,
       },
     },
     {

package/src/components/AttachmentCard/MediaPlayer.tsx

@@ -7,11 +7,7 @@ import { renderTypeIcon } from './utils/icons'
 import { getSourceType } from './utils/mimeType'
 
 type TouchEventUnion =
-  | MouseEvent
-  | TouchEvent
-  | React.MouseEvent
-  | React.TouchEvent
-
+  MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
 
 const getClientXFromEvent = (e: TouchEventUnion): number => {
   if ('touches' in e) {
@@ -194,14 +190,20 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       className={`relative cursor-pointer overflow-hidden bg-black ${aspectClass}`}
       style={aspectStyle}
       onClick={(e) => {
-        if (onContainerClick) { onContainerClick(e); return }
+        if (onContainerClick) {
+          onContainerClick(e)
+          return
+        }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}
       onKeyDown={(e) => {
         if (e.key !== 'Enter' && e.key !== ' ') return
         e.preventDefault()
-        if (onContainerClick) { onContainerClick(e as unknown as React.MouseEvent); return }
+        if (onContainerClick) {
+          onContainerClick(e as unknown as React.MouseEvent)
+          return
+        }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}

package/src/components/AttachmentCard/index.tsx

@@ -61,10 +61,14 @@ const AttachmentCard: React.FC<AttachmentCardProps> = ({
       )}
     >
       {topLeft ? (
-        <div className="pointer-events-auto absolute left-3 top-3 z-50">{topLeft}</div>
+        <div className="pointer-events-auto absolute left-3 top-3 z-50">
+          {topLeft}
+        </div>
       ) : null}
       {topRight ? (
-        <div className="pointer-events-auto absolute right-3 top-3 z-50">{topRight}</div>
+        <div className="pointer-events-auto absolute right-3 top-3 z-50">
+          {topRight}
+        </div>
       ) : null}
 
       {thumbnail}

package/src/components/Avatar/Avatar.stories.tsx

@@ -9,8 +9,8 @@ const meta: Meta<ComponentProps> = {
   title: 'Avatar',
   component: Avatar,
   parameters: {
-    layout: 'centered'
-  }
+    layout: 'centered',
+  },
 }
 export default meta
 
@@ -138,11 +138,23 @@ export const DifferentColors: StoryFn = () => {
 // pravatar avatar flake doesn't diff the whole grid.
 export const MixedAvatars: StoryFn = () => {
   const users = [
-    { id: 'user-1', name: 'Alice Anderson', image: 'https://i.pravatar.cc/150?img=1' },
+    {
+      id: 'user-1',
+      name: 'Alice Anderson',
+      image: 'https://i.pravatar.cc/150?img=1',
+    },
     { id: 'user-2', name: 'Bob Brown' },
-    { id: 'user-3', name: 'Carol Chen', image: 'https://i.pravatar.cc/150?img=3' },
+    {
+      id: 'user-3',
+      name: 'Carol Chen',
+      image: 'https://i.pravatar.cc/150?img=3',
+    },
     { id: 'user-4', name: 'David Davis' },
-    { id: 'user-5', name: 'Emma Evans', image: 'https://i.pravatar.cc/150?img=5' },
+    {
+      id: 'user-5',
+      name: 'Emma Evans',
+      image: 'https://i.pravatar.cc/150?img=5',
+    },
     { id: 'user-6', name: 'Frank Foster' },
   ]
 

package/src/components/Avatar/index.tsx

@@ -47,18 +47,12 @@ export const Avatar = ({
   const aiBorderWidth = size >= 40 ? 2 : 1
 
   const borderStyle =
-    shape === 'circle'
-      ? { borderRadius: '50%' }
-      : { borderRadius: '1rem' }
+    shape === 'circle' ? { borderRadius: '50%' } : { borderRadius: '1rem' }
 
   const avatarInner = (
     <div className="h-full w-full overflow-hidden" style={borderStyle}>
       {image ? (
-        <img
-          src={image}
-          alt=""
-          className="h-full w-full object-cover"
-        />
+        <img src={image} alt="" className="h-full w-full object-cover" />
       ) : (
         <div
           aria-hidden="true"
@@ -75,17 +69,16 @@ export const Avatar = ({
 
   return (
     <div
-      className={classNames(
-        'relative flex-shrink-0',
-        className
-      )}
-      style={{
-        '--str-chat__avatar-size': `${size}px`,
-        width: `${size}px`,
-        height: `${size}px`,
-        backgroundColor: image ? undefined : bgColor,
-        ...borderStyle,
-      } as React.CSSProperties}
+      className={classNames('relative flex-shrink-0', className)}
+      style={
+        {
+          '--str-chat__avatar-size': `${size}px`,
+          width: `${size}px`,
+          height: `${size}px`,
+          backgroundColor: image ? undefined : bgColor,
+          ...borderStyle,
+        } as React.CSSProperties
+      }
     >
       {starred && (
         <div
@@ -97,10 +90,7 @@ export const Avatar = ({
       )}
       <div
         data-testid="avatar-ring"
-        className={classNames(
-          'h-full w-full',
-          'bg-transparent'
-        )}
+        className={classNames('h-full w-full', 'bg-transparent')}
         style={{
           ...borderStyle,
           ...(dmAgentEnabled && {

package/src/components/ChannelView.test.tsx

@@ -345,12 +345,10 @@ describe('ChannelView', () => {
     const firstHandler = vi.fn()
     const secondHandler = vi.fn()
     const { rerender: rerenderChannel } = renderWithProviders(
-      <ChannelView
-        channel={createChannel()}
-        onBroadcastClick={firstHandler}
-      />
+      <ChannelView channel={createChannel()} onBroadcastClick={firstHandler} />
     )
-    const firstMessageOverride = activeComponentOverrides.Message as React.ComponentType
+    const firstMessageOverride =
+      activeComponentOverrides.Message as React.ComponentType
     const MessageRowHarness = ({
       Message,
     }: {
@@ -363,12 +361,10 @@ describe('ChannelView', () => {
     expect(customMessageMounts).toHaveBeenCalledOnce()
 
     rerenderChannel(
-      <ChannelView
-        channel={createChannel()}
-        onBroadcastClick={secondHandler}
-      />
+      <ChannelView channel={createChannel()} onBroadcastClick={secondHandler} />
     )
-    const secondMessageOverride = activeComponentOverrides.Message as React.ComponentType
+    const secondMessageOverride =
+      activeComponentOverrides.Message as React.ComponentType
 
     expect(secondMessageOverride).toBe(firstMessageOverride)
     rerenderMessageRow(<MessageRowHarness Message={secondMessageOverride} />)

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

@@ -26,7 +26,10 @@ import { createMockStreamChatClient } from '../../testing/createMockStreamChatCl
 import type { BroadcastNameResolver } from '../../types'
 import CustomTypingIndicator from '../CustomTypingIndicator'
 
-import { BroadcastNameContext, buildBroadcastNamesById } from './BroadcastNameContext'
+import {
+  BroadcastNameContext,
+  buildBroadcastNamesById,
+} from './BroadcastNameContext'
 import { CustomMessageActions } from './CustomMessageActions'
 
 import { CustomMessage } from './index'
@@ -307,7 +310,9 @@ BroadcastStatus.args = {
   ],
 }
 
-export const BroadcastStatusNonLatest: StoryFn<TemplateProps> = Template.bind({})
+export const BroadcastStatusNonLatest: StoryFn<TemplateProps> = Template.bind(
+  {}
+)
 BroadcastStatusNonLatest.args = {
   messages: [
     {

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

@@ -130,9 +130,11 @@ describe('CustomMessage', () => {
     )
 
     rerender(<CustomMessage onBroadcastClick={secondHandler} />)
-    screen.getByRole('button', {
-      name: 'View broadcast July 9th Class attendees',
-    }).click()
+    screen
+      .getByRole('button', {
+        name: 'View broadcast July 9th Class attendees',
+      })
+      .click()
 
     expect(firstHandler).not.toHaveBeenCalled()
     expect(secondHandler).toHaveBeenCalledWith({

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

@@ -21,7 +21,10 @@ describe('LockedAttachment (characterization)', () => {
 
     it('media mode: renders a preview toggle when a source fetcher is wired', () => {
       renderWithProviders(
-        <MediaCard isDraft onFetchSource={vi.fn().mockResolvedValue(undefined)} />
+        <MediaCard
+          isDraft
+          onFetchSource={vi.fn().mockResolvedValue(undefined)}
+        />
       )
       expect(
         screen.getByRole('button', { name: 'Toggle preview' })
@@ -88,9 +91,7 @@ describe('LockedAttachment (characterization)', () => {
         <MediaCard isMine={false} amountText="$5" onUnlockClick={vi.fn()} />
       )
       expect(screen.getByTestId('locked-attachment')).toBeInTheDocument()
-      expect(
-        screen.getByRole('button', { name: 'Unlock' })
-      ).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Unlock' })).toBeInTheDocument()
     })
   })
 

package/src/components/CustomMessage/LockedAttachment/components/Text/Card.tsx

@@ -24,7 +24,7 @@ const DraftTextCard: React.FC<TextCardDraftProps> = ({
   onDismiss,
 }) => (
   <TextShell isMine className="pr-8">
-      {renderedText || <SkeletonTextLines variant="dark" />}
+    {renderedText || <SkeletonTextLines variant="dark" />}
     <PriceLockRow>
       <span className={amountText ? 'text-white/55' : 'text-white/30'}>
         {amountText || placeholderAmountText}
@@ -100,9 +100,7 @@ const OtherTextCard: React.FC<TextCardOtherProps> = ({
     )
   }
 
-  const ariaLabel = isUnlocking
-    ? 'Unlocking message.'
-    : 'Unlock this message.'
+  const ariaLabel = isUnlocking ? 'Unlocking message.' : 'Unlock this message.'
 
   return (
     <TextShell isMine={false}>

package/src/components/CustomMessage/LockedAttachment/components/_shared/CardBody.tsx

@@ -55,12 +55,15 @@ const CardBody: React.FC<CardBodyProps> = ({
         <div className="flex min-w-0 flex-1 flex-col gap-1">
           {displayTitle.trim() !== '' && (
             <p
-              className={classNames('truncate text-base font-medium leading-6', {
-                'text-black/90': !isDark && !titleDimmed,
-                'text-black/30': !isDark && titleDimmed,
-                'text-white/30': isDark && titleDimmed,
-                'text-white': isDark && !titleDimmed,
-              })}
+              className={classNames(
+                'truncate text-base font-medium leading-6',
+                {
+                  'text-black/90': !isDark && !titleDimmed,
+                  'text-black/30': !isDark && titleDimmed,
+                  'text-white/30': isDark && titleDimmed,
+                  'text-white': isDark && !titleDimmed,
+                }
+              )}
             >
               {displayTitle}
             </p>

package/src/components/CustomMessage/LockedAttachment/components/_shared/CardThumbnail.tsx

@@ -36,9 +36,7 @@ export const isGalleryCard = (
  * otherwise auto-detects the icon from `mimeType`. Returned as a ready node so
  * every card shares the same size/tone treatment.
  */
-export const galleryBodyIcon = (
-  variant: CardVariant
-): React.ReactNode => (
+export const galleryBodyIcon = (variant: CardVariant): React.ReactNode => (
   <ImagesIcon
     className={
       variant === 'dark'

package/src/components/CustomMessage/LockedAttachment/components/_shared/GalleryThumbnail.tsx

@@ -4,10 +4,7 @@ import React, { useState } from 'react'
 
 import { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'
 import { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'
-import type {
-  LockedAttachmentGalleryItem,
-  PaymentStatus,
-} from '../../types'
+import type { LockedAttachmentGalleryItem, PaymentStatus } from '../../types'
 
 import { LockBadge } from './LockBadge'
 import type { CardVariant } from './MediaShell'

package/src/components/CustomMessage/LockedAttachment/components/_shared/PurchaseStatusBadge.tsx

@@ -54,7 +54,6 @@ const PurchaseStatusBadge: React.FC<PurchaseStatusBadgeProps> = ({
     )
   }
 
-
   if (paymentStatus === 'failed' || paymentStatus === 'refunded') {
     return (
       <React.Fragment>

package/src/components/CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx

@@ -2,10 +2,7 @@ import classNames from 'classnames'
 import React from 'react'
 
 import { optimizeMessagingAttachmentUrl } from '../../../../../utils/cdnImageUrl'
-import {
-  AttachmentThumbnail,
-  renderTypeIcon,
-} from '../../../../AttachmentCard'
+import { AttachmentThumbnail, renderTypeIcon } from '../../../../AttachmentCard'
 import type { LockedAttachmentSource, PaymentStatus } from '../../types'
 
 import { LockBadge } from './LockBadge'

package/src/components/CustomMessage/LockedAttachment/components/_shared/SkeletonTextLines.tsx

@@ -15,11 +15,16 @@ export interface SkeletonTextLinesProps {
  * support opacity modifiers on the `current` color — `bg-current/30` silently
  * produces no CSS rule at all.
  */
-const SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({ variant = 'dark' }) => {
+const SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({
+  variant = 'dark',
+}) => {
   const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'
 
   return (
-    <div className="flex flex-col gap-2 str-chat__message-text my-1 animate-pulse" aria-hidden>
+    <div
+      className="flex flex-col gap-2 str-chat__message-text my-1 animate-pulse"
+      aria-hidden
+    >
       <div className={classNames('h-3 w-40 rounded-full', colour)} />
       <div className={classNames('h-3 w-24 rounded-full', colour)} />
     </div>

package/src/components/CustomMessage/LockedAttachment/types.ts

@@ -39,6 +39,7 @@ export interface LockedAttachmentContextValue {
   ) => Promise<LockedAttachmentSource | void>
 }
 
-export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue = {
-  isUnlocking: () => false,
-}
+export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue =
+  {
+    isUnlocking: () => false,
+  }