@linktr.ee/messaging-react 1.34.0 → 1.35.0-rc-1777516745

package/src/components/LockedAttachment/LockedAttachment.stories.tsx

@@ -20,7 +20,7 @@ const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
 const AUDIO_SOURCE = '/audio-source.mp3'
 
 const meta: Meta = {
-  title: 'Components/LockedAttachment',
+  title: 'LockedAttachment',
   parameters: { layout: 'fullscreen' },
 }
 export default meta
@@ -137,7 +137,10 @@ export const Received: StoryFn = () => {
                     }, 1500)
                   }}
                   onDownloadClick={() => alert('Download clicked')}
-                  onFetchSource={async () => ({ sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl })}
+                  onFetchSource={async () => ({
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  })}
                 />
               </td>
             )
@@ -147,23 +150,34 @@ export const Received: StoryFn = () => {
           <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
             Unlocked
           </td>
-          {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, thumbnailUnlockedUrl, sourceUrl }) => (
-            <td key={mimeType} className="align-top">
-              <LockedAttachment.Visitor
-                title={title}
-                thumbnailUrl={thumbnailUrl}
-                mimeType={mimeType}
-                detail={detail}
-                amountText="AU$9.99"
-                paymentStatus="paid"
-                onUnlockClick={() => alert('Unlock clicked')}
-                onDownloadClick={() => alert('Download clicked')}
-                onFetchSource={async () => ({ sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl })}
-              />
-            </td>
-          ))}
+          {VARIANTS.map(
+            ({
+              title,
+              mimeType,
+              detail,
+              thumbnailUrl,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Visitor
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  amountText="AU$9.99"
+                  paymentStatus="paid"
+                  onUnlockClick={() => alert('Unlock clicked')}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => ({
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  })}
+                />
+              </td>
+            )
+          )}
         </tr>
-
       </tbody>
     </Table>
   )
@@ -194,7 +208,10 @@ export const Sent: StoryFn = () => (
                 detail={detail}
                 onFetchSource={async () => {
                   await new Promise((resolve) => setTimeout(resolve, 1500))
-                  return { sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl }
+                  return {
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  }
                 }}
               />
             </td>
@@ -222,42 +239,66 @@ export const Sent: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sent
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, thumbnailUnlockedUrl, sourceUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Creator
-              title={title}
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              amountText="AU$9.99"
-              onFetchSource={async () => {
-                await new Promise((resolve) => setTimeout(resolve, 1500))
-                return { sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl }
-              }}
-            />
-          </td>
-        ))}
+        {VARIANTS.map(
+          ({
+            title,
+            mimeType,
+            detail,
+            thumbnailUrl,
+            thumbnailUnlockedUrl,
+            sourceUrl,
+          }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Creator
+                title={title}
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                onFetchSource={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1500))
+                  return {
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  }
+                }}
+              />
+            </td>
+          )
+        )}
       </tr>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sold
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, thumbnailUnlockedUrl, sourceUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Creator
-              title={title}
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              amountText="AU$9.99"
-              paymentStatus="paid"
-              onFetchSource={async () => {
-                await new Promise((resolve) => setTimeout(resolve, 1500))
-                return { sourceUrl: sourceUrl, thumbnailUrl: thumbnailUnlockedUrl }
-              }}
-            />
-          </td>
-        ))}
+        {VARIANTS.map(
+          ({
+            title,
+            mimeType,
+            detail,
+            thumbnailUrl,
+            thumbnailUnlockedUrl,
+            sourceUrl,
+          }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Creator
+                title={title}
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                paymentStatus="paid"
+                onFetchSource={async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 1500))
+                  return {
+                    sourceUrl: sourceUrl,
+                    thumbnailUrl: thumbnailUnlockedUrl,
+                  }
+                }}
+              />
+            </td>
+          )
+        )}
       </tr>
     </tbody>
   </Table>

package/src/components/MediaMessage/MediaMessage.stories.tsx

@@ -5,7 +5,7 @@ import type { LocalMessage } from 'stream-chat'
 import { MediaMessage } from '.'
 
 const meta: Meta<typeof MediaMessage> = {
-  title: 'Components/MediaMessage',
+  title: 'MediaMessage',
   component: MediaMessage,
   parameters: {
     layout: 'fullscreen',
@@ -13,15 +13,31 @@ const meta: Meta<typeof MediaMessage> = {
 }
 export default meta
 
-const base = (overrides: Partial<LocalMessage> = {}): LocalMessage => ({
-  id: 'msg-1',
-  text: '',
-  type: 'regular',
-  created_at: new Date(),
-  updated_at: new Date(),
-  attachments: [],
-  ...overrides,
-})
+type MessageAttachment = NonNullable<LocalMessage['attachments']>[number]
+
+const base = (overrides: Partial<LocalMessage> = {}): LocalMessage => {
+  const defaultMessage: LocalMessage = {
+    id: 'msg-1',
+    text: '',
+    type: 'regular',
+    created_at: new Date(),
+    updated_at: new Date(),
+    deleted_at: null,
+    pinned_at: null,
+    status: 'received',
+    attachments: [],
+  }
+
+  return {
+    ...defaultMessage,
+    ...overrides,
+    created_at: overrides.created_at ?? defaultMessage.created_at,
+    updated_at: overrides.updated_at ?? defaultMessage.updated_at,
+    deleted_at: overrides.deleted_at ?? defaultMessage.deleted_at,
+    pinned_at: overrides.pinned_at ?? defaultMessage.pinned_at,
+    status: overrides.status ?? defaultMessage.status,
+  }
+}
 
 const VARIANTS = [
   {
@@ -38,7 +54,8 @@ const VARIANTS = [
     label: 'Audio',
     attachment: {
       type: 'audio',
-      asset_url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+      asset_url:
+        'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
       mime_type: 'audio/mpeg',
       title: 'Morning Meditation',
       file_size: 6_900_000,
@@ -119,12 +136,17 @@ const Table: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   </div>
 )
 
-const TableHead: React.FC<{ variants: readonly { label: string }[] }> = ({ variants }) => (
+const TableHead: React.FC<{ variants: readonly { label: string }[] }> = ({
+  variants,
+}) => (
   <thead>
     <tr>
       <th className="text-left text-xs font-medium text-black/40 pb-2" />
       {variants.map(({ label }) => (
-        <th key={label} className="text-left text-xs font-medium text-black/40 pb-2">
+        <th
+          key={label}
+          className="text-left text-xs font-medium text-black/40 pb-2"
+        >
           {label}
         </th>
       ))}
@@ -144,7 +166,11 @@ export const Attachment: StoryFn = () => (
           <td key={label} className="align-top">
             <MediaMessage
               isMyMessage={false}
-              message={base({ attachments: [attachment as LocalMessage['attachments'][number]] })}
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
             />
           </td>
         ))}
@@ -157,7 +183,11 @@ export const Attachment: StoryFn = () => (
           <td key={label} className="align-top">
             <MediaMessage
               isMyMessage={true}
-              message={base({ attachments: [attachment as LocalMessage['attachments'][number]] })}
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
             />
           </td>
         ))}
@@ -178,7 +208,11 @@ export const Links: StoryFn = () => (
           <td key={label} className="align-top">
             <MediaMessage
               isMyMessage={false}
-              message={base({ attachments: [attachment as LocalMessage['attachments'][number]] })}
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
             />
           </td>
         ))}
@@ -191,7 +225,11 @@ export const Links: StoryFn = () => (
           <td key={label} className="align-top">
             <MediaMessage
               isMyMessage={true}
-              message={base({ attachments: [attachment as LocalMessage['attachments'][number]] })}
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
             />
           </td>
         ))}

package/src/styles.css

@@ -185,10 +185,6 @@
   bottom: 0;
 }
 
-.str-chat__typing-indicator {
-  inset-inline: auto;
-}
-
 /* Channel list load-more button overrides */
 .str-chat__channel-list .str-chat__load-more-button__button {
   background-color: #121110;