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

package/src/components/ParticipantPicker/ParticipantPicker.tsx

@@ -1,13 +1,14 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { ChatCircleDotsIcon } from "@phosphor-icons/react/dist/csr/ChatCircleDots";
-import classNames from 'classnames';
+import { ChatCircleDotsIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useCallback, useEffect, useState, useRef } from 'react'
 
-import type { ParticipantPickerProps, Participant } from '../../types';
-import { CloseButton } from '../CloseButton';
-import { SearchInput } from '../SearchInput';
-import Loading from '../Loading';
-import { ParticipantItem } from './ParticipantItem';
-import { useMessagingContext } from '../../providers/MessagingProvider';
+import { useMessagingContext } from '../../providers/MessagingProvider'
+import type { ParticipantPickerProps, Participant } from '../../types'
+import { CloseButton } from '../CloseButton'
+import Loading from '../Loading'
+import { SearchInput } from '../SearchInput'
+
+import { ParticipantItem } from './ParticipantItem'
 
 /**
  * Generic participant picker component for starting conversations
@@ -21,91 +22,105 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
   searchPlaceholder = 'Search participants...',
   className,
 }) => {
-  const { debug } = useMessagingContext();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [participants, setParticipants] = useState<Participant[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [startingChatWithId, setStartingChatWithId] = useState<string | null>(null);
+  const { debug } = useMessagingContext()
+  const [searchQuery, setSearchQuery] = useState('')
+  const [participants, setParticipants] = useState<Participant[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [startingChatWithId, setStartingChatWithId] = useState<string | null>(
+    null
+  )
 
   // Track if we've already loaded participants to prevent repeated loading
-  const loadedRef = useRef(false);
-  
+  const loadedRef = useRef(false)
+
   // Load participants initially - wait for participantSource to finish loading first
   useEffect(() => {
     // Wait for the participantSource to finish loading before we try to load participants
     if (participantSource.loading) {
       if (debug) {
-        console.log('[ParticipantPicker] Waiting for participant source to finish loading...');
+        console.log(
+          '[ParticipantPicker] Waiting for participant source to finish loading...'
+        )
       }
-      return;
+      return
     }
-    
-    if (loadedRef.current) return; // Prevent multiple loads
-    
+
+    if (loadedRef.current) return // Prevent multiple loads
+
     const loadInitialParticipants = async () => {
       if (debug) {
-        console.log('[ParticipantPicker] Loading initial participants...');
+        console.log('[ParticipantPicker] Loading initial participants...')
       }
-      setLoading(true);
-      setError(null);
-      
+      setLoading(true)
+      setError(null)
+
       try {
-        const result = await participantSource.loadParticipants({ 
+        const result = await participantSource.loadParticipants({
           search: '', // Load all participants initially
-          limit: 100 
-        });
-        setParticipants(result.participants);
-        loadedRef.current = true; // Mark as loaded
+          limit: 100,
+        })
+        setParticipants(result.participants)
+        loadedRef.current = true // Mark as loaded
         if (debug) {
-          console.log('[ParticipantPicker] Participants loaded successfully:', result.participants.length);
+          console.log(
+            '[ParticipantPicker] Participants loaded successfully:',
+            result.participants.length
+          )
         }
       } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Failed to load participants';
-        setError(errorMessage);
-        console.error('[ParticipantPicker] Failed to load participants:', err);
+        const errorMessage =
+          err instanceof Error ? err.message : 'Failed to load participants'
+        setError(errorMessage)
+        console.error('[ParticipantPicker] Failed to load participants:', err)
         // Don't mark as loaded on error, allow retry
       } finally {
-        setLoading(false);
+        setLoading(false)
       }
-    };
+    }
 
-    loadInitialParticipants();
-  }, [participantSource.loading, debug]); // Re-run when loading state changes
+    loadInitialParticipants()
+  }, [participantSource, debug]) // Re-run when participantSource or debug changes
 
   // Filter participants by search query and existing participants
   const availableParticipants = participants
-    .filter(participant => !existingParticipantIds.has(participant.id))
-    .filter(participant => {
-      if (!searchQuery) return true;
-      const searchLower = searchQuery.toLowerCase();
+    .filter((participant) => !existingParticipantIds.has(participant.id))
+    .filter((participant) => {
+      if (!searchQuery) return true
+      const searchLower = searchQuery.toLowerCase()
       return (
         participant.name.toLowerCase().includes(searchLower) ||
         participant.email?.toLowerCase().includes(searchLower) ||
         false
-      );
-    });
-
-  const handleSelectParticipant = useCallback(async (participant: Participant) => {
-    if (startingChatWithId) return; // Prevent multiple clicks
-    
-    setStartingChatWithId(participant.id);
-    try {
-      await onSelectParticipant(participant);
-    } catch (error) {
-      console.error('[ParticipantPicker] Failed to start chat:', error);
-      // Reset the loading state on error
-      setStartingChatWithId(null);
-    }
-    // Note: Don't reset startingChatWithId on success because the dialog will close
-  }, [onSelectParticipant, startingChatWithId]);
+      )
+    })
 
-  const handleKeyDown = (event: React.KeyboardEvent, participant: Participant) => {
+  const handleSelectParticipant = useCallback(
+    async (participant: Participant) => {
+      if (startingChatWithId) return // Prevent multiple clicks
+
+      setStartingChatWithId(participant.id)
+      try {
+        await onSelectParticipant(participant)
+      } catch (error) {
+        console.error('[ParticipantPicker] Failed to start chat:', error)
+        // Reset the loading state on error
+        setStartingChatWithId(null)
+      }
+      // Note: Don't reset startingChatWithId on success because the dialog will close
+    },
+    [onSelectParticipant, startingChatWithId]
+  )
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent,
+    participant: Participant
+  ) => {
     if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleSelectParticipant(participant);
+      event.preventDefault()
+      handleSelectParticipant(participant)
     }
-  };
+  }
 
   return (
     <div className={classNames('flex flex-col h-full', className)}>
@@ -117,10 +132,12 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
           </h2>
           <CloseButton onClick={onClose} />
         </div>
-        
+
         <p className="text-xs text-stone mb-3">
-          Select a {participantLabel.slice(0, -1)} to start messaging ({availableParticipants.length} available)
-          {participantSource.totalCount !== undefined && ` • ${participantSource.totalCount} ${participantLabel} total`}
+          Select a {participantLabel.slice(0, -1)} to start messaging (
+          {availableParticipants.length} available)
+          {participantSource.totalCount !== undefined &&
+            ` • ${participantSource.totalCount} ${participantLabel} total`}
         </p>
 
         <SearchInput
@@ -143,7 +160,9 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
           <div className="h-32 flex items-center justify-center">
             <div className="flex items-center space-x-2">
               <div className="w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
-              <span className="text-sm text-stone">Loading {participantLabel}...</span>
+              <span className="text-sm text-stone">
+                Loading {participantLabel}...
+              </span>
             </div>
           </div>
         ) : availableParticipants.length === 0 ? (
@@ -169,19 +188,30 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
         ) : (
           <ul className="space-y-0">
             {availableParticipants.map((participant) => {
-              const displayName = participant.name || participant.email || participant.id;
-              const displaySecondary = participant.email && participant.name ? participant.email : participant.phone;
+              const displayName =
+                participant.name || participant.email || participant.id
+              const displaySecondary =
+                participant.email && participant.name
+                  ? participant.email
+                  : participant.phone
 
               return (
-                <ParticipantItem key={participant.id} participant={participant} handleSelectParticipant={handleSelectParticipant} handleKeyDown={handleKeyDown} displayName={displayName} displaySecondary={displaySecondary} />
-              );
+                <ParticipantItem
+                  key={participant.id}
+                  participant={participant}
+                  handleSelectParticipant={handleSelectParticipant}
+                  handleKeyDown={handleKeyDown}
+                  displayName={displayName}
+                  displaySecondary={displaySecondary}
+                />
+              )
             })}
 
             {/* Loading indicator */}
             {loading && (
               <li className="p-4 flex justify-center">
                 <div className="flex items-center space-x-2">
-                  <Loading className='w-6 h-6' />
+                  <Loading className="w-6 h-6" />
                   <span className="text-sm text-stone">Loading more...</span>
                 </div>
               </li>
@@ -190,7 +220,5 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
         )}
       </div>
     </div>
-  );
-};
-
-
+  )
+}

package/src/components/ParticipantPicker/index.tsx

@@ -1,13 +1,12 @@
-import React, { useCallback, useEffect, useState, useRef } from 'react';
-import { ChatCircleDotsIcon } from "@phosphor-icons/react/dist/csr/ChatCircleDots";
-import { SpinnerGapIcon } from "@phosphor-icons/react/dist/csr/SpinnerGap";
-import classNames from 'classnames';
+import { ChatCircleDotsIcon, SpinnerGapIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useCallback, useEffect, useState, useRef } from 'react'
 
-import type { ParticipantPickerProps, Participant } from '../../types';
-import { CloseButton } from '../CloseButton';
-import { SearchInput } from '../SearchInput';
-import { useMessagingContext } from '../../providers/MessagingProvider';
-import { Avatar } from '../Avatar';
+import { useMessagingContext } from '../../providers/MessagingProvider'
+import type { ParticipantPickerProps, Participant } from '../../types'
+import { Avatar } from '../Avatar'
+import { CloseButton } from '../CloseButton'
+import { SearchInput } from '../SearchInput'
 
 /**
  * Generic participant picker component for starting conversations
@@ -21,91 +20,105 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
   searchPlaceholder = 'Search participants...',
   className,
 }) => {
-  const { debug } = useMessagingContext();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [participants, setParticipants] = useState<Participant[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [startingChatWithId, setStartingChatWithId] = useState<string | null>(null);
+  const { debug } = useMessagingContext()
+  const [searchQuery, setSearchQuery] = useState('')
+  const [participants, setParticipants] = useState<Participant[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [startingChatWithId, setStartingChatWithId] = useState<string | null>(
+    null
+  )
 
   // Track if we've already loaded participants to prevent repeated loading
-  const loadedRef = useRef(false);
-  
+  const loadedRef = useRef(false)
+
   // Load participants initially - wait for participantSource to finish loading first
   useEffect(() => {
     // Wait for the participantSource to finish loading before we try to load participants
     if (participantSource.loading) {
       if (debug) {
-        console.log('[ParticipantPicker] Waiting for participant source to finish loading...');
+        console.log(
+          '[ParticipantPicker] Waiting for participant source to finish loading...'
+        )
       }
-      return;
+      return
     }
-    
-    if (loadedRef.current) return; // Prevent multiple loads
-    
+
+    if (loadedRef.current) return // Prevent multiple loads
+
     const loadInitialParticipants = async () => {
       if (debug) {
-        console.log('[ParticipantPicker] Loading initial participants...');
+        console.log('[ParticipantPicker] Loading initial participants...')
       }
-      setLoading(true);
-      setError(null);
-      
+      setLoading(true)
+      setError(null)
+
       try {
-        const result = await participantSource.loadParticipants({ 
+        const result = await participantSource.loadParticipants({
           search: '', // Load all participants initially
-          limit: 100 
-        });
-        setParticipants(result.participants);
-        loadedRef.current = true; // Mark as loaded
+          limit: 100,
+        })
+        setParticipants(result.participants)
+        loadedRef.current = true // Mark as loaded
         if (debug) {
-          console.log('[ParticipantPicker] Participants loaded successfully:', result.participants.length);
+          console.log(
+            '[ParticipantPicker] Participants loaded successfully:',
+            result.participants.length
+          )
         }
       } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Failed to load participants';
-        setError(errorMessage);
-        console.error('[ParticipantPicker] Failed to load participants:', err);
+        const errorMessage =
+          err instanceof Error ? err.message : 'Failed to load participants'
+        setError(errorMessage)
+        console.error('[ParticipantPicker] Failed to load participants:', err)
         // Don't mark as loaded on error, allow retry
       } finally {
-        setLoading(false);
+        setLoading(false)
       }
-    };
+    }
 
-    loadInitialParticipants();
-  }, [participantSource.loading, debug]); // Re-run when loading state changes
+    loadInitialParticipants()
+  }, [participantSource.loading, debug]) // Re-run when loading state changes
 
   // Filter participants by search query and existing participants
   const availableParticipants = participants
-    .filter(participant => !existingParticipantIds.has(participant.id))
-    .filter(participant => {
-      if (!searchQuery) return true;
-      const searchLower = searchQuery.toLowerCase();
+    .filter((participant) => !existingParticipantIds.has(participant.id))
+    .filter((participant) => {
+      if (!searchQuery) return true
+      const searchLower = searchQuery.toLowerCase()
       return (
         participant.name.toLowerCase().includes(searchLower) ||
         participant.email?.toLowerCase().includes(searchLower) ||
         false
-      );
-    });
-
-  const handleSelectParticipant = useCallback(async (participant: Participant) => {
-    if (startingChatWithId) return; // Prevent multiple clicks
-    
-    setStartingChatWithId(participant.id);
-    try {
-      await onSelectParticipant(participant);
-    } catch (error) {
-      console.error('[ParticipantPicker] Failed to start chat:', error);
-      // Reset the loading state on error
-      setStartingChatWithId(null);
-    }
-    // Note: Don't reset startingChatWithId on success because the dialog will close
-  }, [onSelectParticipant, startingChatWithId]);
+      )
+    })
 
-  const handleKeyDown = (event: React.KeyboardEvent, participant: Participant) => {
+  const handleSelectParticipant = useCallback(
+    async (participant: Participant) => {
+      if (startingChatWithId) return // Prevent multiple clicks
+
+      setStartingChatWithId(participant.id)
+      try {
+        await onSelectParticipant(participant)
+      } catch (error) {
+        console.error('[ParticipantPicker] Failed to start chat:', error)
+        // Reset the loading state on error
+        setStartingChatWithId(null)
+      }
+      // Note: Don't reset startingChatWithId on success because the dialog will close
+    },
+    [onSelectParticipant, startingChatWithId]
+  )
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent,
+    participant: Participant
+  ) => {
     if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleSelectParticipant(participant);
+      event.preventDefault()
+      handleSelectParticipant(participant)
     }
-  };
+  }
 
   return (
     <div className={classNames('flex flex-col h-full', className)}>
@@ -117,10 +130,12 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
           </h2>
           <CloseButton onClick={onClose} />
         </div>
-        
+
         <p className="text-xs text-stone mb-3">
-          Select a {participantLabel.slice(0, -1)} to start messaging ({availableParticipants.length} available)
-          {participantSource.totalCount !== undefined && ` • ${participantSource.totalCount} ${participantLabel} total`}
+          Select a {participantLabel.slice(0, -1)} to start messaging (
+          {availableParticipants.length} available)
+          {participantSource.totalCount !== undefined &&
+            ` • ${participantSource.totalCount} ${participantLabel} total`}
         </p>
 
         <SearchInput
@@ -143,7 +158,9 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
           <div className="h-32 flex items-center justify-center">
             <div className="flex items-center space-x-2">
               <div className="w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
-              <span className="text-sm text-stone">Loading {participantLabel}...</span>
+              <span className="text-sm text-stone">
+                Loading {participantLabel}...
+              </span>
             </div>
           </div>
         ) : availableParticipants.length === 0 ? (
@@ -169,8 +186,12 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
         ) : (
           <ul className="space-y-0">
             {availableParticipants.map((participant) => {
-              const displayName = participant.name || participant.email || participant.id;
-              const displaySecondary = participant.email && participant.name ? participant.email : participant.phone;
+              const displayName =
+                participant.name || participant.email || participant.id
+              const displaySecondary =
+                participant.email && participant.name
+                  ? participant.email
+                  : participant.phone
 
               return (
                 <li key={participant.id}>
@@ -214,7 +235,7 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
                     </div>
                   </button>
                 </li>
-              );
+              )
             })}
 
             {/* Loading indicator */}
@@ -230,5 +251,5 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
         )}
       </div>
     </div>
-  );
-};
+  )
+}

package/src/components/SearchInput/SearchInput.stories.tsx

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

package/src/components/SearchInput/SearchInput.test.tsx

@@ -1,5 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
+
 import { renderWithProviders, screen, userEvent } from '../../test/utils';
+
 import { SearchInput } from './index';
 
 describe('SearchInput', () => {
@@ -54,7 +56,7 @@ describe('SearchInput', () => {
         <SearchInput searchQuery="test" setSearchQuery={vi.fn()} placeholder="Search" />
       );
       
-      const clearButton = screen.getByLabelText(/clear/i);
+      const clearButton = screen.getByRole('button', { name: /clear/i });
       expect(clearButton).toBeInTheDocument();
     });
 
@@ -75,7 +77,7 @@ describe('SearchInput', () => {
         <SearchInput searchQuery="test" setSearchQuery={handleChange} placeholder="Search" />
       );
 
-      const clearButton = screen.getByLabelText(/clear/i);
+      const clearButton = screen.getByRole('button', { name: /clear/i });
       await user.click(clearButton);
 
       expect(handleChange).toHaveBeenCalledWith('');

package/src/components/SearchInput/index.tsx

@@ -1,12 +1,12 @@
-import React, { useRef } from 'react';
-import { IconButton } from '../IconButton';
-import { MagnifyingGlassIcon } from "@phosphor-icons/react/dist/csr/MagnifyingGlass";
-import { XIcon } from "@phosphor-icons/react/dist/csr/X";
+import { MagnifyingGlassIcon, XIcon } from '@phosphor-icons/react'
+import { useRef } from 'react'
+
+import { IconButton } from '../IconButton'
 
 interface SearchInputProps {
-  searchQuery: string;
-  setSearchQuery: (value: string) => void;
-  placeholder: string;
+  searchQuery: string
+  setSearchQuery: (value: string) => void
+  placeholder: string
 }
 
 export function SearchInput({
@@ -14,7 +14,7 @@ export function SearchInput({
   setSearchQuery,
   placeholder,
 }: SearchInputProps) {
-  const searchInputRef = useRef<HTMLInputElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null)
 
   return (
     <div className="relative">
@@ -22,7 +22,7 @@ export function SearchInput({
         className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone"
         weight="bold"
       />
-      
+
       <input
         ref={searchInputRef}
         type="text"
@@ -31,20 +31,19 @@ export function SearchInput({
         onChange={(e) => setSearchQuery(e.target.value)}
         className="w-full pl-10 pr-10 py-3 text-sm border border-sand rounded-xl focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent"
       />
-      
+
       {searchQuery && (
         <IconButton
           label="Clear search"
           onClick={() => {
-            setSearchQuery('');
-            searchInputRef.current?.focus();
+            setSearchQuery('')
+            searchInputRef.current?.focus()
           }}
           className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-stone hover:text-charcoal"
         >
-            <XIcon className="h-4 w-4" weight="bold" />
+          <XIcon className="h-4 w-4" weight="bold" />
         </IconButton>
       )}
     </div>
-  );
+  )
 }
-

package/src/hooks/useParticipants.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
+
 import type { ParticipantSource, Participant } from '../types';
 
 /**

package/src/index.ts

@@ -1,3 +1,6 @@
+// Import styles so they're bundled with the package
+import './styles.css'
+
 // Components
 export { MessagingShell } from './components/MessagingShell';
 export { ChannelList } from './components/ChannelList';