@linktr.ee/messaging-react 1.0.2 → 1.1.0-rc-1760927977

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.0.2",
+  "version": "1.1.0-rc-1760927977",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",
@@ -10,7 +10,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./styles.css": "./dist/assets/index.css"
   },
   "license": "UNLICENSED",
   "files": [
@@ -33,7 +34,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "*",
-    "@linktr.ee/messaging-core": "*",
+    "@linktr.ee/messaging-core": "^1.0.1",
     "@phosphor-icons/react": "^2.1.9",
     "stream-chat-react": "^13.9.0"
   },

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import ActionButton from '.'
 import React from 'react'
 
+import ActionButton from '.'
+
 
 type ComponentProps = React.ComponentProps<typeof ActionButton>
 

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

@@ -1,5 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
+
 import { renderWithProviders, screen, userEvent } from '../../test/utils';
+
 import ActionButton from '.';
 
 describe('ActionButton', () => {

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import { Avatar } from './index'
 import React from 'react'
 
+import { Avatar } from './index'
+
 type ComponentProps = React.ComponentProps<typeof Avatar>
 
 const meta: Meta<ComponentProps> = {

package/src/components/Avatar/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
+
 import { getAvatarColors } from './avatarColors';
 
 export interface AvatarProps {

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

@@ -1,8 +1,10 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import { ChannelList } from '.'
+import React from 'react'
+
 import { MockChatProvider } from '../../stories/mocks'
 
-import React from 'react'
+import { ChannelList } from '.'
+
 
 type ComponentProps = React.ComponentProps<typeof ChannelList>
 

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

@@ -1,6 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import CustomChannelPreview from './CustomChannelPreview'
 import React from 'react'
+import { Channel, LocalMessage, StreamChat } from 'stream-chat'
+
+import CustomChannelPreview from './CustomChannelPreview'
 
 type ComponentProps = React.ComponentProps<typeof CustomChannelPreview>
 
@@ -8,13 +10,9 @@ const meta: Meta<ComponentProps> = {
   title: 'ChannelList/CustomChannelPreview',
   component: CustomChannelPreview,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
   },
-  decorators: [
-    (Story) => (
-        <Story />
-    )
-  ]
+  decorators: [(Story) => <Story />],
 }
 export default meta
 
@@ -34,7 +32,7 @@ const createMockChannel = (options: {
   lastMessageText?: string
   lastMessageTime?: Date
   unreadCount?: number
-}): any => {
+}): Channel => {
   const {
     id,
     participantName,
@@ -50,7 +48,7 @@ const createMockChannel = (options: {
     cid: `messaging:${id}`,
     _client: {
       userID: mockUser.id,
-    },
+    } as unknown as StreamChat,
     state: {
       members: {
         [mockUser.id]: {
@@ -66,20 +64,22 @@ const createMockChannel = (options: {
           user_id: participantId,
         },
       },
-      messages: lastMessageText ? [
-        {
-          id: `msg-${id}-1`,
-          text: lastMessageText,
-          created_at: lastMessageTime.toISOString(),
-          user: {
-            id: participantId,
-            name: participantName,
-          },
-        },
-      ] : [],
+      messages: lastMessageText
+        ? ([
+            {
+              id: `msg-${id}-1`,
+              text: lastMessageText,
+              created_at: lastMessageTime.toISOString(),
+              user: {
+                id: participantId,
+                name: participantName,
+              },
+            },
+          ] as unknown as LocalMessage[])
+        : ([] as LocalMessage[]),
       unreadCount,
     },
-  }
+  } as unknown as Channel
 }
 
 const Template: StoryFn<ComponentProps> = (args) => {
@@ -181,7 +181,8 @@ LongMessage.args = {
     participantName: 'Grace Lee',
     participantId: 'participant-7',
     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.',
+    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
   }),
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
@@ -219,7 +220,9 @@ SelectedWithUnread.args = {
 }
 
 export const MultipleChannels: StoryFn = () => {
-  const [selectedChannelId, setSelectedChannelId] = React.useState<string | null>('channel-2')
+  const [selectedChannelId, _setSelectedChannelId] = React.useState<
+    string | null
+  >('channel-2')
 
   const channels = [
     createMockChannel({
@@ -257,11 +260,12 @@ export const MultipleChannels: StoryFn = () => {
     }),
   ]
 
-  const selectedChannel = channels.find(c => c.id === selectedChannelId) || null
+  const selectedChannel =
+    channels.find((c) => c.id === selectedChannelId) || null
 
   return (
     <div className="w-[360px] bg-chalk border border-sand rounded-lg overflow-hidden">
-      {channels.map(channel => (
+      {channels.map((channel) => (
         <CustomChannelPreview
           key={channel.id}
           channel={channel}
@@ -295,9 +299,9 @@ WithVeryLongUrl.args = {
     participantName: 'Julia Martinez',
     participantId: 'participant-long-url',
     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',
+    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
   }),
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
-

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -1,7 +1,8 @@
+import classNames from 'classnames'
 import React from 'react'
-import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 import { Channel } from 'stream-chat'
-import classNames from 'classnames'
+import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
+
 import { Avatar } from '../Avatar'
 
 /**
@@ -9,17 +10,11 @@ import { Avatar } from '../Avatar'
  */
 const CustomChannelPreview: React.FC<
   ChannelPreviewUIComponentProps & {
-    selectedChannel?: Channel
+    selectedChannel?: Channel | null
     onChannelSelect: (channel: Channel) => void
     debug?: boolean
   }
-> = ({
-  channel,
-  selectedChannel,
-  onChannelSelect,
-  debug = false,
-  ...props
-}) => {
+> = ({ channel, selectedChannel, onChannelSelect, debug = false }) => {
   const isSelected = selectedChannel?.id === channel?.id
 
   const handleClick = () => {
@@ -35,7 +30,6 @@ const CustomChannelPreview: React.FC<
   )
   const participantName = participant?.user?.name || 'Conversation'
   const participantImage = participant?.user?.image
-  const participantInitial = participantName.charAt(0).toUpperCase()
 
   // Get last message and format timestamp
   const lastMessage =

package/src/components/ChannelList/index.tsx

@@ -1,13 +1,16 @@
-import React from 'react';
-import { NotePencilIcon } from "@phosphor-icons/react/dist/csr/NotePencil";
+import { NotePencilIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React from 'react'
+import {
+  ChannelList as StreamChannelList,
+  useChatContext,
+} from 'stream-chat-react'
 
-import classNames from 'classnames';
-import { ChannelList as StreamChannelList, useChatContext } from 'stream-chat-react';
-import type { ChannelListProps } from '../../types';
-import { IconButton } from '../IconButton';
-import { useMessagingContext } from '../../providers/MessagingProvider';
-import CustomChannelPreview from './CustomChannelPreview';
+import { useMessagingContext } from '../../providers/MessagingProvider'
+import type { ChannelListProps } from '../../types'
+import { IconButton } from '../IconButton'
 
+import CustomChannelPreview from './CustomChannelPreview'
 
 /**
  * Channel list component with customizable header and actions
@@ -21,52 +24,57 @@ export const ChannelList: React.FC<ChannelListProps> = ({
   className,
 }) => {
   // Track renders
-  const renderCountRef = React.useRef(0);
-  renderCountRef.current++;
+  const renderCountRef = React.useRef(0)
+  renderCountRef.current++
 
   // Get debug flag from context
-  const { debug = false } = useMessagingContext();
+  const { debug = false } = useMessagingContext()
 
   if (debug) {
     console.log('📺 [ChannelList] 🔄 RENDER START', {
       renderCount: renderCountRef.current,
       selectedChannelId: selectedChannel?.id,
       showStartConversation,
-      participantLabel
-    });
+      participantLabel,
+    })
   }
 
-  const { client } = useChatContext();
+  const { client } = useChatContext()
 
   if (debug) {
     console.log('📺 [ChannelList] 📡 CHAT CONTEXT', {
       renderCount: renderCountRef.current,
       hasClient: !!client,
       clientUserId: client?.userID,
-      clientConnected: client?.wsConnection?.isHealthy
-    });
+      clientConnected: client?.wsConnection?.isHealthy,
+    })
   }
 
   // Filter for messaging channels
   const filters = React.useMemo(() => {
-    const userId = client.userID;
+    const userId = client.userID
     const newFilters = userId
       ? { type: 'messaging', members: { $in: [userId] }, hidden: false }
-      : { type: 'messaging' };
-    
+      : { type: 'messaging' }
+
     if (debug) {
       console.log('📺 [ChannelList] 🔍 FILTERS MEMOIZED', {
         renderCount: renderCountRef.current,
         userId,
-        filters: newFilters
-      });
+        filters: newFilters,
+      })
     }
-    
-    return newFilters;
-  }, [client.userID, debug]);
+
+    return newFilters
+  }, [client.userID, debug])
 
   return (
-    <div className={classNames('h-full flex flex-col min-w-0 overflow-hidden', className)}>
+    <div
+      className={classNames(
+        'h-full flex flex-col min-w-0 overflow-hidden',
+        className
+      )}
+    >
       {/* Header */}
       <div className="px-4 py-4 border-b border-sand bg-chalk">
         <div className="flex items-center justify-between gap-3 min-h-10 min-w-0">
@@ -93,10 +101,10 @@ export const ChannelList: React.FC<ChannelListProps> = ({
               renderCount: renderCountRef.current,
               filters,
               hasClient: !!client,
-              clientUserId: client?.userID
-            });
+              clientUserId: client?.userID,
+            })
           }
-          
+
           return (
             <StreamChannelList
               filters={filters}
@@ -107,10 +115,10 @@ export const ChannelList: React.FC<ChannelListProps> = ({
                   console.log('📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER', {
                     channelId: props.channel?.id,
                     selectedChannelId: selectedChannel?.id,
-                    isSelected: selectedChannel?.id === props.channel?.id
-                  });
+                    isSelected: selectedChannel?.id === props.channel?.id,
+                  })
                 }
-                
+
                 return (
                   <CustomChannelPreview
                     {...props}
@@ -118,12 +126,12 @@ export const ChannelList: React.FC<ChannelListProps> = ({
                     onChannelSelect={onChannelSelect}
                     debug={debug}
                   />
-                );
+                )
               }}
             />
-          );
+          )
         })()}
       </div>
     </div>
-  );
-};
+  )
+}