@linktr.ee/messaging-react 3.3.4 → 3.3.5

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DTZNltUC.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CBtOPvxW.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

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

@@ -0,0 +1,104 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import AttachmentCard, { AttachmentThumbnail } from '.'
+
+type ComponentProps = React.ComponentProps<typeof AttachmentCard>
+
+const meta: Meta<ComponentProps> = {
+  title: 'AttachmentCard',
+  component: AttachmentCard,
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: { control: { type: 'inline-radio' }, options: ['light', 'dark'] },
+  },
+}
+export default meta
+
+const IMAGE_URL = '/image-thumbnail.jpg'
+
+const Template: StoryFn<ComponentProps> = (args) => <AttachmentCard {...args} />
+
+export const LightImage: StoryFn<ComponentProps> = Template.bind({})
+LightImage.args = {
+  variant: 'light',
+  title: 'sunset.jpg',
+  mimeType: 'image/jpeg',
+  detail: '2.4 MB',
+  thumbnail: (
+    <AttachmentThumbnail
+      mimeType="image/jpeg"
+      sourceUrl={IMAGE_URL}
+      title="sunset"
+      variant="light"
+    />
+  ),
+}
+
+export const DarkImage: StoryFn<ComponentProps> = Template.bind({})
+DarkImage.args = {
+  variant: 'dark',
+  title: 'sunset.jpg',
+  mimeType: 'image/jpeg',
+  detail: '2.4 MB',
+  thumbnail: (
+    <AttachmentThumbnail
+      mimeType="image/jpeg"
+      sourceUrl={IMAGE_URL}
+      title="sunset"
+      variant="dark"
+    />
+  ),
+}
+
+export const PdfPlaceholder: StoryFn<ComponentProps> = Template.bind({})
+PdfPlaceholder.args = {
+  variant: 'light',
+  title: 'invoice.pdf',
+  mimeType: 'application/pdf',
+  detail: '120 KB',
+  thumbnail: <AttachmentThumbnail mimeType="application/pdf" variant="light" />,
+}
+
+export const AudioPosterOnly: StoryFn<ComponentProps> = Template.bind({})
+AudioPosterOnly.args = {
+  variant: 'dark',
+  title: 'voice-memo.m4a',
+  mimeType: 'audio/m4a',
+  detail: '0:42',
+  thumbnail: (
+    <AttachmentThumbnail
+      mimeType="audio/m4a"
+      thumbnailUrl={IMAGE_URL}
+      title="voice memo"
+      variant="dark"
+    />
+  ),
+}
+
+export const UntitledDark: StoryFn<ComponentProps> = Template.bind({})
+UntitledDark.args = {
+  variant: 'dark',
+  mimeType: 'image/png',
+  detail: '1.1 MB',
+  thumbnail: <AttachmentThumbnail mimeType="image/png" variant="dark" />,
+}
+
+export const WithTopBadges: StoryFn<ComponentProps> = Template.bind({})
+WithTopBadges.args = {
+  variant: 'light',
+  title: 'receipt.pdf',
+  mimeType: 'application/pdf',
+  detail: 'Paid',
+  thumbnail: <AttachmentThumbnail mimeType="application/pdf" variant="light" />,
+  topLeft: (
+    <span className="rounded-full bg-black/80 px-2 py-0.5 text-xs font-medium text-white">
+      Locked
+    </span>
+  ),
+  topRight: (
+    <span className="rounded-full bg-white/90 px-2 py-0.5 text-xs font-medium text-black">
+      $5.00
+    </span>
+  ),
+}

package/src/components/ChannelActionsMenu/ChannelActionsMenu.test.tsx

@@ -19,15 +19,19 @@ const { getBlockedUsersMock, blockUserMock, unBlockUserMock } = vi.hoisted(
   })
 )
 
+// Stable service + context references — production MessagingProvider keeps
+// the service in useState and memoizes the context value, so the hook's
+// service-keyed lookup invalidation only fires on real swaps. Returning a
+// new object literal each call would re-trigger the lookup every render and
+// loop forever.
+const mockService = {
+  getBlockedUsers: getBlockedUsersMock,
+  blockUser: blockUserMock,
+  unBlockUser: unBlockUserMock,
+}
+const mockContext = { service: mockService, debug: false }
 vi.mock('../../providers/MessagingProvider', () => ({
-  useMessagingContext: () => ({
-    service: {
-      getBlockedUsers: getBlockedUsersMock,
-      blockUser: blockUserMock,
-      unBlockUser: unBlockUserMock,
-    },
-    debug: false,
-  }),
+  useMessagingContext: () => mockContext,
 }))
 
 vi.mock('../ActionButton', () => ({
@@ -229,6 +233,27 @@ describe('ChannelActionsMenu', () => {
     })
   })
 
+  it('recovers from a blocked-status lookup failure', async () => {
+    // Suppress the expected console.error for the rejected lookup so the
+    // test output stays clean.
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {})
+    getBlockedUsersMock.mockRejectedValueOnce(new Error('network down'))
+
+    renderWithProviders(<ChannelActionsMenu {...defaultProps()} />)
+    await openMenu()
+
+    // The lookup rejected, but the action recovers — Block becomes actionable
+    // rather than staying stuck in the disabled spinner state.
+    await waitFor(() => {
+      const block = screen.getByText('Block').closest('button')
+      expect(block).not.toBeDisabled()
+    })
+
+    consoleErrorSpy.mockRestore()
+  })
+
   it('calls onReportParticipantClick and opens the report page', async () => {
     const onReportParticipantClick = vi.fn()
     const windowOpenSpy = vi

package/src/components/ChannelList/CustomChannelPreview.stories.tsx

@@ -7,6 +7,14 @@ import {
   StreamChat,
 } from 'stream-chat'
 
+import {
+  daysAgo,
+  hoursAgo,
+  minutesAgo,
+  now,
+  secondsAgo,
+} from '../../stories/decorators/storyTime'
+
 import CustomChannelPreview from './CustomChannelPreview'
 
 type ComponentProps = React.ComponentProps<typeof CustomChannelPreview>
@@ -54,7 +62,7 @@ const createMockChannel = (options: {
     participantId,
     participantImage,
     lastMessageText = 'Hey! How are you doing?',
-    lastMessageTime = new Date(),
+    lastMessageTime = now(),
     unreadCount = 0,
     lastMessageAttachments,
     lastMessageMetadata,
@@ -134,7 +142,7 @@ Default.args = {
     participantId: 'participant-1',
     participantImage: 'https://i.pravatar.cc/150?img=2',
     lastMessageText: 'Hey! How are you doing?',
-    lastMessageTime: new Date(),
+    lastMessageTime: now(),
   }),
 }
 
@@ -146,7 +154,7 @@ Selected.args = {
     participantId: 'participant-2',
     participantImage: 'https://i.pravatar.cc/150?img=3',
     lastMessageText: 'That sounds great!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+    lastMessageTime: minutesAgo(5),
   }),
   selectedChannel: createMockChannel({
     id: 'channel-2',
@@ -164,7 +172,7 @@ WithUnreadMessages.args = {
     participantId: 'participant-3',
     participantImage: 'https://i.pravatar.cc/150?img=4',
     lastMessageText: 'Did you see my last message?',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
+    lastMessageTime: minutesAgo(15),
     unreadCount: 3,
   }),
 }
@@ -177,7 +185,7 @@ ManyUnreadMessages.args = {
     participantId: 'participant-4',
     participantImage: 'https://i.pravatar.cc/150?img=5',
     lastMessageText: 'Please check this out!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60), // 1 hour ago
+    lastMessageTime: hoursAgo(1),
     unreadCount: 127,
   }),
 }
@@ -189,7 +197,7 @@ NoAvatar.args = {
     participantName: 'Emma Davis',
     participantId: 'participant-5',
     lastMessageText: 'Thanks for your help!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 30), // 30 minutes ago
+    lastMessageTime: minutesAgo(30),
   }),
 }
 
@@ -213,7 +221,7 @@ LongMessage.args = {
     participantImage: 'https://i.pravatar.cc/150?img=7',
     lastMessageText:
       'This is a very long message that should be truncated because it contains way too much text to display in the preview. We want to make sure the component handles this gracefully.',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
+    lastMessageTime: hoursAgo(2),
   }),
 }
 
@@ -224,7 +232,7 @@ LongName.args = {
     participantName: 'Alexander Christopher Wellington-Montgomery III',
     participantId: 'participant-8',
     lastMessageText: 'Nice to meet you!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 45), // 45 minutes ago
+    lastMessageTime: minutesAgo(45),
   }),
 }
 
@@ -236,7 +244,7 @@ ChatbotMessage.args = {
     participantId: 'participant-chatbot',
     participantImage: 'https://i.pravatar.cc/150?img=9',
     lastMessageText: 'Thanks for reaching out! How can I help you today?',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 2), // 2 minutes ago
+    lastMessageTime: minutesAgo(2),
     lastMessageMetadata: { custom_type: 'MESSAGE_CHATBOT' },
   }),
 }
@@ -249,7 +257,7 @@ TipMessage.args = {
     participantId: 'participant-tip',
     participantImage: 'https://i.pravatar.cc/150?img=2',
     lastMessageText: 'Take my money!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 3),
+    lastMessageTime: minutesAgo(3),
     lastMessageMetadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.00' },
   }),
 }
@@ -262,7 +270,7 @@ PaidMessage.args = {
     participantId: 'participant-paid',
     participantImage: 'https://i.pravatar.cc/150?img=3',
     lastMessageText: 'I paid for this message!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 10),
+    lastMessageTime: minutesAgo(10),
     lastMessageMetadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
   }),
 }
@@ -275,7 +283,7 @@ PaidAttachment.args = {
     participantId: 'participant-paid-attachment',
     participantImage: 'https://i.pravatar.cc/150?img=4',
     lastMessageText: 'Check out this exclusive photo!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 20),
+    lastMessageTime: minutesAgo(20),
     lastMessageMetadata: {
       custom_type: 'MESSAGE_ATTACHMENT',
       attachment_title: 'exclusive-photo.jpg',
@@ -322,7 +330,7 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantImage: 'https://i.pravatar.cc/150?img=36',
       lastMessageText:
         'Critical issue needs immediate attention! Please review the server logs for more details and escalate to the on-call engineer. This system outage is affecting multiple users, and we need to resolve it as soon as possible. Impacted services include messaging, notifications, and real-time updates. All hands are required to investigate and remediate the situation. If you have any questions or need additional resources, contact the incident commander immediately!',
-      lastMessageTime: new Date(Date.now() - 1000 * 60), // 1 minute ago
+      lastMessageTime: minutesAgo(1),
       lastMessageMetadata: { custom_type: 'MESSAGE_URGENT' },
       unreadCount: 3,
     }),
@@ -332,7 +340,7 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantId: 'participant-priority',
       participantImage: 'https://i.pravatar.cc/150?img=37',
       lastMessageText: 'High priority message',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+      lastMessageTime: minutesAgo(5),
       lastMessageMetadata: { is_priority: true },
       unreadCount: 1,
     }),
@@ -342,7 +350,7 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantId: 'participant-vip',
       participantImage: 'https://i.pravatar.cc/150?img=38',
       lastMessageText: 'Thanks for the support!',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 10), // 10 minutes ago
+      lastMessageTime: minutesAgo(10),
       lastMessageMetadata: { is_vip: true },
     }),
     createMockChannel({
@@ -351,7 +359,7 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantId: 'participant-normal',
       participantImage: 'https://i.pravatar.cc/150?img=39',
       lastMessageText: 'Hey, how are you?',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 30), // 30 minutes ago
+      lastMessageTime: minutesAgo(30),
     }),
   ]
 
@@ -379,7 +387,7 @@ SelectedWithUnread.args = {
     participantId: 'participant-9',
     participantImage: 'https://i.pravatar.cc/150?img=8',
     lastMessageText: 'Important update!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 10), // 10 minutes ago
+    lastMessageTime: minutesAgo(10),
     unreadCount: 5,
   }),
   selectedChannel: createMockChannel({
@@ -401,7 +409,7 @@ export const MultipleChannels: StoryFn = () => {
       participantId: 'participant-1',
       participantImage: 'https://i.pravatar.cc/150?img=2',
       lastMessageText: 'Hey! How are you doing?',
-      lastMessageTime: new Date(),
+      lastMessageTime: now(),
       unreadCount: 2,
     }),
     createMockChannel({
@@ -410,7 +418,7 @@ export const MultipleChannels: StoryFn = () => {
       participantId: 'participant-2',
       participantImage: 'https://i.pravatar.cc/150?img=3',
       lastMessageText: 'That sounds great!',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+      lastMessageTime: minutesAgo(5),
     }),
     createMockChannel({
       id: 'channel-3',
@@ -418,7 +426,7 @@ export const MultipleChannels: StoryFn = () => {
       participantId: 'participant-3',
       participantImage: 'https://i.pravatar.cc/150?img=4',
       lastMessageText: 'See you tomorrow',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 60), // 1 hour ago
+      lastMessageTime: hoursAgo(1),
       unreadCount: 15,
     }),
     createMockChannel({
@@ -426,7 +434,7 @@ export const MultipleChannels: StoryFn = () => {
       participantName: 'David Brown',
       participantId: 'participant-4',
       lastMessageText: 'Thanks!',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
+      lastMessageTime: hoursAgo(2),
     }),
   ]
 
@@ -457,7 +465,7 @@ WithUrl.args = {
     participantId: 'participant-url',
     participantImage: 'https://i.pravatar.cc/150?img=10',
     lastMessageText: 'https://example.com/page',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 8), // 8 minutes ago
+    lastMessageTime: minutesAgo(8),
   }),
 }
 
@@ -470,7 +478,7 @@ WithVeryLongUrl.args = {
     participantImage: 'https://i.pravatar.cc/150?img=11',
     lastMessageText:
       'https://example.com/very/long/path/with/many/segments/and/query/parameters?param1=value1&param2=value2&param3=value3&param4=value4&param5=very-long-value-that-makes-the-url-extremely-long',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 20), // 20 minutes ago
+    lastMessageTime: minutesAgo(20),
   }),
 }
 
@@ -483,7 +491,7 @@ JustNow.args = {
     participantId: 'participant-just-now',
     participantImage: 'https://i.pravatar.cc/150?img=12',
     lastMessageText: 'I just sent this!',
-    lastMessageTime: new Date(Date.now() - 1000 * 30), // 30 seconds ago
+    lastMessageTime: secondsAgo(30),
   }),
 }
 
@@ -495,7 +503,7 @@ FiveMinutesAgo.args = {
     participantId: 'participant-5m',
     participantImage: 'https://i.pravatar.cc/150?img=13',
     lastMessageText: 'Be right back',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+    lastMessageTime: minutesAgo(5),
   }),
 }
 
@@ -507,7 +515,7 @@ ThreeHoursAgo.args = {
     participantId: 'participant-3h',
     participantImage: 'https://i.pravatar.cc/150?img=14',
     lastMessageText: 'Got it, thanks!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 3), // 3 hours ago
+    lastMessageTime: hoursAgo(3),
   }),
 }
 
@@ -519,7 +527,7 @@ Yesterday.args = {
     participantId: 'participant-yesterday',
     participantImage: 'https://i.pravatar.cc/150?img=15',
     lastMessageText: 'See you tomorrow',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 30), // 30 hours ago
+    lastMessageTime: hoursAgo(30),
   }),
 }
 
@@ -531,7 +539,7 @@ ThreeDaysAgo.args = {
     participantId: 'participant-3d',
     participantImage: 'https://i.pravatar.cc/150?img=16',
     lastMessageText: 'Have a great weekend!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3), // 3 days ago
+    lastMessageTime: daysAgo(3),
   }),
 }
 
@@ -543,7 +551,7 @@ LastWeek.args = {
     participantId: 'participant-1w',
     participantImage: 'https://i.pravatar.cc/150?img=17',
     lastMessageText: 'Talk to you next week',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7), // 1 week ago
+    lastMessageTime: daysAgo(7),
   }),
 }
 
@@ -555,7 +563,7 @@ TwoWeeksAgo.args = {
     participantId: 'participant-2w',
     participantImage: 'https://i.pravatar.cc/150?img=18',
     lastMessageText: 'Sounds good',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 14), // 2 weeks ago
+    lastMessageTime: daysAgo(14),
   }),
 }
 
@@ -567,7 +575,7 @@ OneMonthAgo.args = {
     participantId: 'participant-1m',
     participantImage: 'https://i.pravatar.cc/150?img=19',
     lastMessageText: 'Happy New Year!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30), // 1 month ago
+    lastMessageTime: daysAgo(30),
   }),
 }
 
@@ -579,7 +587,7 @@ SixMonthsAgo.args = {
     participantId: 'participant-6m',
     participantImage: 'https://i.pravatar.cc/150?img=20',
     lastMessageText: 'Long time no talk!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 180), // 6 months ago
+    lastMessageTime: daysAgo(180),
   }),
 }
 
@@ -592,61 +600,61 @@ export const TimeVariations: StoryFn = () => {
     {
       id: 'time-just-now',
       name: 'Just Now',
-      time: new Date(Date.now() - 1000 * 30), // 30 seconds
+      time: secondsAgo(30),
       message: 'Just sent',
     },
     {
       id: 'time-5m',
       name: '5 Minutes',
-      time: new Date(Date.now() - 1000 * 60 * 5),
+      time: minutesAgo(5),
       message: '5 minutes ago',
     },
     {
       id: 'time-30m',
       name: '30 Minutes',
-      time: new Date(Date.now() - 1000 * 60 * 30),
+      time: minutesAgo(30),
       message: '30 minutes ago',
     },
     {
       id: 'time-3h',
       name: '3 Hours',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 3),
+      time: hoursAgo(3),
       message: '3 hours ago',
     },
     {
       id: 'time-yesterday',
       name: 'Yesterday',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 30),
+      time: hoursAgo(30),
       message: 'Yesterday',
     },
     {
       id: 'time-3d',
       name: '3 Days',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3),
+      time: daysAgo(3),
       message: '3 days ago',
     },
     {
       id: 'time-1w',
       name: '1 Week',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7),
+      time: daysAgo(7),
       message: '1 week ago',
     },
     {
       id: 'time-2w',
       name: '2 Weeks',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 14),
+      time: daysAgo(14),
       message: '2 weeks ago',
     },
     {
       id: 'time-1m',
       name: '1 Month',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30),
+      time: daysAgo(30),
       message: '1 month ago',
     },
     {
       id: 'time-6m',
       name: '6 Months',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 180),
+      time: daysAgo(180),
       message: '6 months ago',
     },
   ]
@@ -690,7 +698,7 @@ WithAttachmentAssetUrl.args = {
     participantId: 'participant-attachment-asset',
     participantImage: 'https://i.pravatar.cc/150?img=30',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 10), // 10 minutes ago
+    lastMessageTime: minutesAgo(10),
     lastMessageAttachments: [
       {
         asset_url: 'https://example.com/document.pdf',
@@ -707,7 +715,7 @@ WithAttachmentImageUrl.args = {
     participantId: 'participant-attachment-image',
     participantImage: 'https://i.pravatar.cc/150?img=31',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
+    lastMessageTime: minutesAgo(15),
     lastMessageAttachments: [
       {
         image_url: 'https://example.com/image.jpg',
@@ -726,7 +734,7 @@ WithAttachmentOgScrapeUrl.args = {
     participantId: 'participant-attachment-og',
     participantImage: 'https://i.pravatar.cc/150?img=32',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 7), // 7 minutes ago
+    lastMessageTime: minutesAgo(7),
     lastMessageAttachments: [
       {
         og_scrape_url: 'https://example.com/article',
@@ -743,7 +751,7 @@ WithAttachmentThumbUrl.args = {
     participantId: 'participant-attachment-thumb',
     participantImage: 'https://i.pravatar.cc/150?img=33',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 12), // 12 minutes ago
+    lastMessageTime: minutesAgo(12),
     lastMessageAttachments: [
       {
         thumb_url: 'https://example.com/thumb.jpg',
@@ -760,7 +768,7 @@ WithLongAttachmentUrl.args = {
     participantId: 'participant-attachment-long',
     participantImage: 'https://i.pravatar.cc/150?img=34',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 20), // 20 minutes ago
+    lastMessageTime: minutesAgo(20),
     lastMessageAttachments: [
       {
         asset_url:

package/src/components/ChannelView.stories.tsx

@@ -9,6 +9,7 @@ import {
 } from 'stream-chat'
 import { Chat } from 'stream-chat-react'
 
+import { hoursAgo, minutesAgo, now } from '../stories/decorators/storyTime'
 import { mockParticipants } from '../stories/mocks'
 
 import { ChannelView } from './ChannelView'
@@ -50,8 +51,8 @@ const createMockChannel = async (
           id: 'msg-1',
           text: 'Hey! How are you doing?',
           type: 'regular' as const,
-          created_at: new Date(Date.now() - 1000 * 60 * 60),
-          updated_at: new Date(Date.now() - 1000 * 60 * 60),
+          created_at: hoursAgo(1),
+          updated_at: hoursAgo(1),
           user: participant,
           html: '<p>Hey! How are you doing?</p>',
           attachments: [],
@@ -68,8 +69,8 @@ const createMockChannel = async (
           id: 'msg-2',
           text: "I'm doing great, thanks! How about you?",
           type: 'regular' as const,
-          created_at: new Date(Date.now() - 1000 * 60 * 50),
-          updated_at: new Date(Date.now() - 1000 * 60 * 50),
+          created_at: minutesAgo(50),
+          updated_at: minutesAgo(50),
           user: mockUser,
           html: "<p>I'm doing great, thanks! How about you?</p>",
           attachments: [],
@@ -86,8 +87,8 @@ const createMockChannel = async (
           id: 'msg-3',
           text: 'Pretty good! Just working on some exciting stuff.',
           type: 'regular' as const,
-          created_at: new Date(Date.now() - 1000 * 60 * 30),
-          updated_at: new Date(Date.now() - 1000 * 60 * 30),
+          created_at: minutesAgo(30),
+          updated_at: minutesAgo(30),
           user: participant,
           html: '<p>Pretty good! Just working on some exciting stuff.</p>',
           attachments: [],
@@ -429,7 +430,7 @@ const WithStarButtonTemplate: StoryFn<ComponentProps> = (args) => {
         const member: ChannelMemberResponse = {
           user: mockUser,
           user_id: mockUser.id,
-          pinned_at: isStarred ? new Date().toISOString() : null,
+          pinned_at: isStarred ? now().toISOString() : null,
         }
 
         client.dispatchEvent({

package/src/components/CloseButton/CloseButton.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { CloseButton } from '.'
+
+type ComponentProps = React.ComponentProps<typeof CloseButton>
+
+const meta: Meta<ComponentProps> = {
+  title: 'CloseButton',
+  component: CloseButton,
+  parameters: { layout: 'centered' },
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => (
+  <div className="p-12">
+    <CloseButton {...args} />
+  </div>
+)
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {}
+
+export const OnDarkSurface: StoryFn<ComponentProps> = () => (
+  <div className="bg-[#121110] p-12">
+    <CloseButton onClick={() => undefined} />
+  </div>
+)