@linktr.ee/messaging-react 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",
@@ -61,7 +61,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 +75,4 @@
     "stream-chat": "^9.22.1",
     "stream-chat-react": "^13.9.0"
   }
-}
+}

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/ChannelList/CustomChannelPreview.tsx

@@ -1,48 +1,55 @@
-import React from 'react';
-import { ChannelPreviewUIComponentProps } from 'stream-chat-react';
-import { Channel } from 'stream-chat';
-import classNames from 'classnames';
-import { Avatar } from '../Avatar';
+import React from 'react'
+import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
+import { Channel } from 'stream-chat'
+import classNames from 'classnames'
+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
+    onChannelSelect: (channel: Channel) => void
+    debug?: boolean
   }
-> = ({ channel, selectedChannel, onChannelSelect, debug = false, ...props }) => {
-  const isSelected = selectedChannel?.id === channel?.id;
+> = ({
+  channel,
+  selectedChannel,
+  onChannelSelect,
+  debug = false,
+  ...props
+}) => {
+  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
+  const participantInitial = participantName.charAt(0).toUpperCase()
 
   // 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 +58,7 @@ const CustomChannelPreview: React.FC<
       participantName,
       unread,
       hasTimestamp: !!lastMessageTime,
-    });
+    })
   }
 
   return (
@@ -61,7 +68,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 +115,7 @@ const CustomChannelPreview: React.FC<
         </div>
       </div>
     </button>
-  );
-};
+  )
+}
 
-export default CustomChannelPreview;
+export default CustomChannelPreview

package/src/components/MessagingShell/EmptyState.tsx

@@ -1,22 +1,20 @@
-import React from 'react';
+import React from 'react'
 
 /**
  * Empty state component shown when no channel is selected
  */
 export const EmptyState: React.FC<{
-  hasChannels: boolean;
-  onStartConversation?: () => void;
-  participantLabel: string;
+  hasChannels: boolean
+  onStartConversation?: () => void
+  participantLabel: string
 }> = ({ hasChannels, onStartConversation, participantLabel }) => (
   <div className="flex items-center justify-center h-full p-8 text-balance">
     <div className="text-center max-w-sm">
-      <div className="w-24 h-24 bg-primary-alt bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6">
+      <div className="w-24 h-24 bg-primary-alt/10 rounded-full flex items-center justify-center mx-auto mb-6">
         <span className="text-4xl">💬</span>
       </div>
 
-      <h2 className="font-semibold text-charcoal">
-        Welcome to Messages
-      </h2>
+      <h2 className="font-semibold text-charcoal">Welcome to Messages</h2>
 
       <p className="text-stone text-sm mb-6">
         {hasChannels ? (
@@ -31,25 +29,30 @@ export const EmptyState: React.FC<{
         ) : (
           onStartConversation && (
             <>
-            <TextButton onClick={onStartConversation}>
-              Start a new conversation with one of your {participantLabel}
-            </TextButton>{' '}
-            to begin messaging.
-              </>
+              <TextButton onClick={onStartConversation}>
+                Start a new conversation with one of your {participantLabel}
+              </TextButton>{' '}
+              to begin messaging.
+            </>
           )
         )}
       </p>
     </div>
   </div>
-);
-
+)
 
-const TextButton = ({ onClick, children }: { onClick: () => void, children: React.ReactNode }) => (
+const TextButton = ({
+  onClick,
+  children,
+}: {
+  onClick: () => void
+  children: React.ReactNode
+}) => (
   <button
-  type="button"
-  onClick={onClick}
-  className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary-alt focus:outline-none focus:ring-2 focus:ring-primary"
+    type="button"
+    onClick={onClick}
+    className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary-alt focus:outline-none focus:ring-2 focus:ring-primary"
   >
     {children}
   </button>
-)
+)