@linktr.ee/messaging-react 1.0.1 → 1.1.0-ks-migrate-styles-1760927135

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.0.1",
+  "version": "1.1.0-ks-migrate-styles-1760927135",
   "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"
   },
@@ -61,7 +62,7 @@
     "react-dom": "^18.3.1",
     "storybook": "^8.5.0",
     "stream-chat": "^9.22.1",
-    "tailwindcss": "3.2.7",
+    "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.9.2",
     "vite": "^6.0.7",
@@ -75,4 +76,4 @@
     "stream-chat": "^9.22.1",
     "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/avatarColors.ts

@@ -3,34 +3,33 @@
  * Uses the ID to deterministically select from design system colors
  */
 export function getAvatarColors(id: string): {
-  bgColor: string;
-  textColor: string;
+  bgColor: string
+  textColor: string
 } {
   // Map of color combinations from Linktree design system
   // Selected for good contrast at 20% opacity
   const colorPairs = [
-    { bgColor: "bg-primary bg-opacity-20", textColor: "text-primary" }, // #8129D9 - purple
-    { bgColor: "bg-forest bg-opacity-20", textColor: "text-forest" }, // #254f1a - dark green
-    { bgColor: "bg-iris bg-opacity-20", textColor: "text-iris" }, // #061492 - dark blue
-    { bgColor: "bg-shade bg-opacity-20", textColor: "text-shade" }, // #1e2330 - dark blue-gray
-    { bgColor: "bg-dahlia bg-opacity-20", textColor: "text-dahlia" }, // #502274 - dark purple
-    { bgColor: "bg-orchid bg-opacity-20", textColor: "text-orchid" }, // #d717e7 - magenta
-    { bgColor: "bg-currant bg-opacity-20", textColor: "text-currant" }, // #780016 - dark red
-    { bgColor: "bg-apple bg-opacity-20", textColor: "text-apple" }, // #c41500 - red
-    { bgColor: "bg-rose bg-opacity-20", textColor: "text-rose" }, // #fc3e4b - pink
-    { bgColor: "bg-root bg-opacity-20", textColor: "text-root" }, // #4c2e05 - brown
-    { bgColor: "bg-poppy bg-opacity-20", textColor: "text-poppy" }, // #ff6c02 - orange
-    { bgColor: "bg-moss bg-opacity-20", textColor: "text-moss" }, // #70764d - olive green
-  ];
+    { bgColor: 'bg-primary/20', textColor: 'text-primary' }, // #8129D9 - purple
+    { bgColor: 'bg-forest/20', textColor: 'text-forest' }, // #254f1a - dark green
+    { bgColor: 'bg-iris/20', textColor: 'text-iris' }, // #061492 - dark blue
+    { bgColor: 'bg-shade/20', textColor: 'text-shade' }, // #1e2330 - dark blue-gray
+    { bgColor: 'bg-dahlia/20', textColor: 'text-dahlia' }, // #502274 - dark purple
+    { bgColor: 'bg-orchid/20', textColor: 'text-orchid' }, // #d717e7 - magenta
+    { bgColor: 'bg-currant/20', textColor: 'text-currant' }, // #780016 - dark red
+    { bgColor: 'bg-apple/20', textColor: 'text-apple' }, // #c41500 - red
+    { bgColor: 'bg-rose/20', textColor: 'text-rose' }, // #fc3e4b - pink
+    { bgColor: 'bg-root/20', textColor: 'text-root' }, // #4c2e05 - brown
+    { bgColor: 'bg-poppy/20', textColor: 'text-poppy' }, // #ff6c02 - orange
+    { bgColor: 'bg-moss/20', textColor: 'text-moss' }, // #70764d - olive green
+  ]
 
   // Simple hash function to get consistent index
-  let hash = 0;
+  let hash = 0
   for (let i = 0; i < id.length; i++) {
-    hash = ((hash << 5) - hash) + id.charCodeAt(i);
-    hash = hash & hash; // Convert to 32bit integer
+    hash = (hash << 5) - hash + id.charCodeAt(i)
+    hash = hash & hash // Convert to 32bit integer
   }
-  
-  const index = Math.abs(hash) % colorPairs.length;
-  return colorPairs[index];
-}
 
+  const index = Math.abs(hash) % colorPairs.length
+  return colorPairs[index]
+}

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,48 +1,49 @@
-import React from 'react';
-import { ChannelPreviewUIComponentProps } from 'stream-chat-react';
-import { Channel } from 'stream-chat';
-import classNames from 'classnames';
-import { Avatar } from '../Avatar';
+import classNames from 'classnames'
+import React from 'react'
+import { Channel } from 'stream-chat'
+import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
+
+import { Avatar } from '../Avatar'
 
 /**
  * Custom channel preview that handles selection
  */
 const CustomChannelPreview: React.FC<
   ChannelPreviewUIComponentProps & {
-    selectedChannel?: Channel;
-    onChannelSelect: (channel: Channel) => void;
-    debug?: boolean;
+    selectedChannel?: Channel | null
+    onChannelSelect: (channel: Channel) => void
+    debug?: boolean
   }
-> = ({ channel, selectedChannel, onChannelSelect, debug = false, ...props }) => {
-  const isSelected = selectedChannel?.id === channel?.id;
+> = ({ channel, selectedChannel, onChannelSelect, debug = false }) => {
+  const isSelected = selectedChannel?.id === channel?.id
 
   const handleClick = () => {
     if (channel) {
-      onChannelSelect(channel);
+      onChannelSelect(channel)
     }
-  };
+  }
 
   // Get participant info
-  const members = Object.values(channel?.state?.members || {});
-  const participant = members.find(member => 
-    member.user?.id && member.user.id !== channel?._client?.userID
-  );
-  const participantName = participant?.user?.name || 'Conversation';
-  const participantImage = participant?.user?.image;
-  const participantInitial = participantName.charAt(0).toUpperCase();
+  const members = Object.values(channel?.state?.members || {})
+  const participant = members.find(
+    (member) => member.user?.id && member.user.id !== channel?._client?.userID
+  )
+  const participantName = participant?.user?.name || 'Conversation'
+  const participantImage = participant?.user?.image
 
   // Get last message and format timestamp
-  const lastMessage = channel?.state?.messages?.[channel.state.messages.length - 1];
-  const lastMessageText = lastMessage?.text || 'No messages yet';
+  const lastMessage =
+    channel?.state?.messages?.[channel.state.messages.length - 1]
+  const lastMessageText = lastMessage?.text || 'No messages yet'
   const lastMessageTime = lastMessage?.created_at
     ? new Date(lastMessage.created_at).toLocaleTimeString([], {
         hour: '2-digit',
         minute: '2-digit',
       })
-    : '';
+    : ''
 
   // Get unread count from channel state
-  const unread = channel?.state?.unreadCount || 0;
+  const unread = channel?.state?.unreadCount || 0
 
   if (debug) {
     console.log('📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER', {
@@ -51,7 +52,7 @@ const CustomChannelPreview: React.FC<
       participantName,
       unread,
       hasTimestamp: !!lastMessageTime,
-    });
+    })
   }
 
   return (
@@ -61,7 +62,7 @@ const CustomChannelPreview: React.FC<
       className={classNames(
         'w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring',
         {
-          'bg-primary-alt bg-opacity-10 border-l-4 border-l-primary': isSelected,
+          'bg-primary-alt/10 border-l-4 border-l-primary': isSelected,
           'hover:bg-sand': !isSelected,
         }
       )}
@@ -108,7 +109,7 @@ const CustomChannelPreview: React.FC<
         </div>
       </div>
     </button>
-  );
-};
+  )
+}
 
-export default CustomChannelPreview;
+export default CustomChannelPreview

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>
-  );
-};
+  )
+}