@ermis-network/ermis-chat-react 1.0.0 → 1.0.2

package/src/components/UserPicker.tsx

@@ -0,0 +1,377 @@
+import React, { useState, useEffect, useMemo, useCallback, useRef, useTransition } from 'react';
+import { useChatClient } from '../hooks/useChatClient';
+import { Avatar } from './Avatar';
+import { VList, type VListHandle } from 'virtua';
+import type {
+  UserPickerProps,
+  UserPickerItemProps,
+  UserPickerSelectedBoxProps,
+  UserPickerUser,
+} from '../types';
+
+/* ---------- Constants ---------- */
+const DEFAULT_PAGE_SIZE = 30;
+const SEARCH_DEBOUNCE_MS = 500;
+
+/* ---------- Static styles ---------- */
+const LIST_STYLE: React.CSSProperties = { height: '100%' };
+
+/* ==========================================================
+   Default Sub-Components
+   ========================================================== */
+
+/** Check icon for selected state */
+const CheckIcon: React.FC = () => (
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+/** Default user row */
+const DefaultUserItem: React.FC<UserPickerItemProps> = React.memo(({
+  user, selected, disabled, mode, onToggle, AvatarComponent,
+}) => {
+  const handleClick = useCallback(() => {
+    if (!disabled) onToggle(user);
+  }, [disabled, onToggle, user]);
+
+  const inputClass = [
+    'ermis-user-picker__input',
+    mode === 'radio' ? 'ermis-user-picker__input--radio' : 'ermis-user-picker__input--checkbox',
+    selected ? 'ermis-user-picker__input--checked' : '',
+  ].join(' ');
+
+  const itemClass = [
+    'ermis-user-picker__item',
+    selected ? 'ermis-user-picker__item--selected' : '',
+    disabled ? 'ermis-user-picker__item--disabled' : '',
+  ].join(' ');
+
+  const detail = user.email || user.phone || '';
+
+  return (
+    <div className={itemClass} onClick={handleClick} role="option" aria-selected={selected}>
+      <div className={inputClass}>
+        {selected && <CheckIcon />}
+      </div>
+      <AvatarComponent image={user.avatar} name={user.name || user.id} size={36} />
+      <div className="ermis-user-picker__info">
+        <span className="ermis-user-picker__name">{user.name || user.id}</span>
+        {detail && <span className="ermis-user-picker__detail">{detail}</span>}
+      </div>
+    </div>
+  );
+});
+DefaultUserItem.displayName = 'DefaultUserItem';
+
+/** Default search input */
+const DefaultSearchInput: React.FC<{ value: string; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; placeholder: string }> = ({ value, onChange, placeholder }) => (
+  <div className="ermis-user-picker__search">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <input
+      type="text"
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      autoFocus
+    />
+  </div>
+);
+
+/** Default selected users chip box */
+const DefaultSelectedBox: React.FC<UserPickerSelectedBoxProps> = React.memo(({
+  users, onRemove, AvatarComponent, emptyLabel,
+}) => (
+  <div className="ermis-user-picker__selected-box">
+    {users.length === 0 && emptyLabel && (
+      <span className="ermis-user-picker__selected-empty">{emptyLabel}</span>
+    )}
+    {users.map(u => (
+      <div key={u.id} className="ermis-user-picker__chip">
+        <AvatarComponent image={u.avatar} name={u.name || u.id} size={20} />
+        <span className="ermis-user-picker__chip-name">{u.name || u.id}</span>
+        <button
+          className="ermis-user-picker__chip-remove"
+          onClick={() => onRemove(u.id)}
+          aria-label={`Remove ${u.name || u.id}`}
+        >
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+    ))}
+  </div>
+));
+DefaultSelectedBox.displayName = 'DefaultSelectedBox';
+
+/* ==========================================================
+   UserPicker Component
+   ========================================================== */
+
+export const UserPicker: React.FC<UserPickerProps> = ({
+  mode,
+  onSelectionChange,
+  excludeUserIds,
+  initialSelectedUsers,
+  pageSize = DEFAULT_PAGE_SIZE,
+  AvatarComponent = Avatar,
+  UserItemComponent,
+  SelectedBoxComponent,
+  SearchInputComponent,
+  searchPlaceholder = 'Search by name, email or phone...',
+  loadingText = 'Loading users...',
+  emptyText = 'No users found.',
+  loadingMoreText = 'Loading more...',
+  selectedEmptyLabel,
+}) => {
+  const { client } = useChatClient();
+  const currentUserId = client?.userID;
+
+  /* ---------- State ---------- */
+  const [allUsers, setAllUsers] = useState<UserPickerUser[]>([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const [remoteUsers, setRemoteUsers] = useState<UserPickerUser[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [isPendingFilter, startTransition] = useTransition();
+
+  const [selectedMap, setSelectedMap] = useState<Map<string, UserPickerUser>>(() => {
+    const map = new Map<string, UserPickerUser>();
+    initialSelectedUsers?.forEach(u => map.set(u.id, u));
+    return map;
+  });
+
+  const vlistRef = useRef<VListHandle>(null);
+
+  /* ---------- Resolved sub-components ---------- */
+  const UserRow = UserItemComponent || DefaultUserItem;
+  const SearchInput = SearchInputComponent || DefaultSearchInput;
+  const SelectedBox = SelectedBoxComponent || DefaultSelectedBox;
+
+  /* ---------- Excluded IDs set ---------- */
+  const excludeSet = useMemo(() => new Set(excludeUserIds || []), [excludeUserIds]);
+
+  /* ---------- Search handler ---------- */
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setSearchInput(val);
+    startTransition(() => {
+      setSearch(val);
+    });
+  }, [startTransition]);
+
+  /* ---------- 1. Fetch initial page ---------- */
+  useEffect(() => {
+    let active = true;
+    const fetchUsers = async () => {
+      if (!client) return;
+      try {
+        setLoading(true);
+        const response = await client.queryUsers(String(pageSize), 1);
+        if (active && response.data) {
+          setAllUsers(response.data);
+          setHasMore(response.data.length >= pageSize);
+          setPage(1);
+        }
+      } catch (err) {
+        console.error('[UserPicker] Error fetching users:', err);
+      } finally {
+        if (active) setLoading(false);
+      }
+    };
+    fetchUsers();
+    return () => { active = false; };
+  }, [client, pageSize]);
+
+  /* ---------- 2. Load more (infinite scroll) ---------- */
+  const loadMore = useCallback(async () => {
+    if (!client || loadingMore || !hasMore || search.trim()) return;
+    const nextPage = page + 1;
+    setLoadingMore(true);
+    try {
+      const response = await client.queryUsers(String(pageSize), nextPage);
+      if (response.data) {
+        setAllUsers(prev => {
+          const existingIds = new Set(prev.map(u => u.id));
+          const newUsers = response.data.filter((u: UserPickerUser) => !existingIds.has(u.id));
+          return [...prev, ...newUsers];
+        });
+        setHasMore(response.data.length >= pageSize);
+        setPage(nextPage);
+      }
+    } catch (err) {
+      console.error('[UserPicker] Error loading more users:', err);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [client, loadingMore, hasMore, page, pageSize, search]);
+
+  /* ---------- 3. Local filter ---------- */
+  const localFilteredUsers = useMemo(() => {
+    const term = search.toLowerCase().trim();
+    if (!term) return allUsers;
+    return allUsers.filter(u => {
+      const name = (u.name || '').toLowerCase();
+      const email = (u.email || '').toLowerCase();
+      const phone = (u.phone || '').toLowerCase();
+      return name.includes(term) || email.includes(term) || phone.includes(term);
+    });
+  }, [search, allUsers]);
+
+  /* ---------- 4. Remote search fallback ---------- */
+  useEffect(() => {
+    if (!search.trim() || localFilteredUsers.length > 0) {
+      setRemoteUsers([]);
+      setIsSearching(false);
+      return;
+    }
+
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      setIsSearching(true);
+      try {
+        const response = await client.searchUsers(1, 25, search.trim());
+        if (!cancelled && response.data) {
+          setRemoteUsers(response.data);
+        }
+      } catch (err) {
+        console.error('[UserPicker] Error searching remote users:', err);
+      } finally {
+        if (!cancelled) setIsSearching(false);
+      }
+    }, SEARCH_DEBOUNCE_MS);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [search, localFilteredUsers.length, client, excludeSet]);
+
+  /* ---------- 5. Derived display list ---------- */
+  const usersToDisplay = (search.trim() && localFilteredUsers.length === 0)
+    ? remoteUsers
+    : localFilteredUsers;
+  const isListLoading = loading || isSearching || isPendingFilter;
+
+  /* ---------- 6. Selection handlers ---------- */
+  const handleToggle = useCallback((user: UserPickerUser) => {
+    // Don't allow toggling disabled users (current user or excluded)
+    if (user.id === currentUserId || excludeSet.has(user.id)) return;
+
+    setSelectedMap(prev => {
+      const next = new Map(prev);
+      if (mode === 'radio') {
+        // Radio: clear all, set this one (or deselect if same)
+        if (next.has(user.id)) {
+          next.clear();
+        } else {
+          next.clear();
+          next.set(user.id, user);
+        }
+      } else {
+        // Checkbox: toggle
+        if (next.has(user.id)) {
+          next.delete(user.id);
+        } else {
+          next.set(user.id, user);
+        }
+      }
+      return next;
+    });
+  }, [mode, currentUserId, excludeSet]);
+
+  // Notify parent of selection changes
+  useEffect(() => {
+    onSelectionChange?.(Array.from(selectedMap.values()));
+  }, [selectedMap, onSelectionChange]);
+
+  const handleRemoveSelected = useCallback((userId: string) => {
+    setSelectedMap(prev => {
+      const next = new Map(prev);
+      next.delete(userId);
+      return next;
+    });
+  }, []);
+
+  /* ---------- 7. Scroll handler for infinite scroll ---------- */
+  const handleScroll = useCallback((offset: number) => {
+    // VList provides scroll offset. We detect near-bottom using the ref
+    const el = vlistRef.current;
+    if (!el) return;
+    // scrollSize = total scroll height, viewportSize = visible height
+    const scrollSize = (el as any).scrollSize ?? 0;
+    const viewportSize = (el as any).viewportSize ?? 0;
+    if (scrollSize > 0 && offset + viewportSize >= scrollSize - 50) {
+      loadMore();
+    }
+  }, [loadMore]);
+
+  /* ---------- Render ---------- */
+  const selectedArr = useMemo(() => Array.from(selectedMap.values()), [selectedMap]);
+
+  return (
+    <div className="ermis-user-picker" role="listbox" aria-multiselectable={mode === 'checkbox'}>
+      {/* Selected Users Box (checkbox mode only) */}
+      {mode === 'checkbox' && (
+        <SelectedBox
+          users={selectedArr}
+          onRemove={handleRemoveSelected}
+          AvatarComponent={AvatarComponent}
+          emptyLabel={selectedEmptyLabel}
+        />
+      )}
+
+      {/* Search Input */}
+      <SearchInput
+        value={searchInput}
+        onChange={handleSearchChange}
+        placeholder={searchPlaceholder}
+      />
+
+      {/* User List */}
+      <div className="ermis-user-picker__list">
+        {isListLoading ? (
+          <div className="ermis-user-picker__loading">
+            <span className="ermis-user-picker__spinner" />
+            {loadingText}
+          </div>
+        ) : usersToDisplay.length === 0 ? (
+          <div className="ermis-user-picker__empty">{emptyText}</div>
+        ) : (
+          <VList ref={vlistRef} style={LIST_STYLE} onScroll={handleScroll}>
+            {usersToDisplay.map(user => (
+              <UserRow
+                key={user.id}
+                user={user}
+                selected={selectedMap.has(user.id)}
+                disabled={user.id === currentUserId || excludeSet.has(user.id)}
+                mode={mode}
+                onToggle={handleToggle}
+                AvatarComponent={AvatarComponent}
+              />
+            ))}
+            {loadingMore && (
+              <div className="ermis-user-picker__load-more">
+                <span className="ermis-user-picker__spinner" />
+                {loadingMoreText}
+              </div>
+            )}
+          </VList>
+        )}
+      </div>
+    </div>
+  );
+};
+
+UserPicker.displayName = 'UserPicker';

package/src/index.ts

@@ -127,3 +127,14 @@ export type {
   AddMemberUserItemProps,
   AddMemberButtonProps,
 } from './types';
+
+export { UserPicker } from './components/UserPicker';
+export type {
+  UserPickerProps,
+  UserPickerUser,
+  UserPickerItemProps,
+  UserPickerSelectedBoxProps,
+} from './types';
+
+export { CreateChannelModal } from './components/CreateChannelModal';
+export type { CreateChannelModalProps } from './types';

package/src/styles/_create-channel-modal.css

@@ -0,0 +1,183 @@
+/* ============================================================
+   Create Channel Modal
+   BEM: .ermis-create-channel__*
+   ============================================================ */
+
+.ermis-create-channel__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ermis-spacing-md, 0.75rem);
+  padding: var(--ermis-spacing-md, 0.75rem);
+}
+
+.ermis-create-channel__tabs {
+  display: flex;
+  gap: 8px;
+  background-color: var(--ermis-bg-secondary, #111118);
+  padding: 4px;
+  border-radius: var(--ermis-radius-md, 0.5rem);
+  margin-bottom: var(--ermis-spacing-sm, 0.5rem);
+}
+
+.ermis-create-channel__tab {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: var(--ermis-radius-sm, 0.375rem);
+  text-align: center;
+  font-size: var(--ermis-font-size-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--ermis-text-muted, #6b7280);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all var(--ermis-transition, 150ms ease);
+}
+
+.ermis-create-channel__tab:hover {
+  color: var(--ermis-text-primary, #e5e7eb);
+}
+
+.ermis-create-channel__tab--active {
+  background-color: var(--ermis-bg-active, rgba(99, 102, 241, 0.12));
+  color: var(--ermis-text-primary, #e5e7eb);
+}
+
+/* Form Fields */
+.ermis-create-channel__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ermis-spacing-xs, 0.25rem);
+}
+
+.ermis-create-channel__label {
+  font-size: var(--ermis-font-size-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--ermis-text-primary, #e5e7eb);
+}
+
+.ermis-create-channel__input,
+.ermis-create-channel__textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: var(--ermis-radius-md, 0.5rem);
+  border: 1px solid var(--ermis-border, rgba(255, 255, 255, 0.08));
+  background-color: var(--ermis-bg-secondary, #111118);
+  color: var(--ermis-text-primary, #e5e7eb);
+  font-size: var(--ermis-font-size-sm, 0.875rem);
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--ermis-transition, 150ms ease);
+}
+
+.ermis-create-channel__input:focus,
+.ermis-create-channel__textarea:focus {
+  border-color: var(--ermis-accent, #6366f1);
+}
+
+.ermis-create-channel__textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* Public toggle */
+.ermis-create-channel__field--toggle {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ermis-create-channel__toggle {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background-color: var(--ermis-bg-secondary, #111118);
+  border: 1px solid var(--ermis-border, rgba(255, 255, 255, 0.08));
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color var(--ermis-transition, 150ms ease);
+  padding: 0;
+}
+
+.ermis-create-channel__toggle--on {
+  background-color: var(--ermis-accent, #6366f1);
+  border-color: var(--ermis-accent, #6366f1);
+}
+
+.ermis-create-channel__toggle-thumb {
+  position: absolute;
+  top: 1px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background-color: #ffffff;
+  border-radius: 50%;
+  transition: transform var(--ermis-transition, 150ms ease);
+}
+
+.ermis-create-channel__toggle--on .ermis-create-channel__toggle-thumb {
+  transform: translateX(20px);
+}
+
+/* User Picker Wrap */
+.ermis-create-channel__users {
+  margin-top: var(--ermis-spacing-sm, 0.5rem);
+}
+
+.ermis-create-channel__users-title {
+  font-size: var(--ermis-font-size-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--ermis-text-primary, #e5e7eb);
+  margin-bottom: var(--ermis-spacing-xs, 0.25rem);
+}
+
+/* Error */
+.ermis-create-channel__error {
+  display: flex;
+  align-items: center;
+  gap: var(--ermis-spacing-xs, 0.25rem);
+  padding: var(--ermis-spacing-sm, 0.5rem);
+  color: var(--ermis-error, #ef4444);
+  background-color: rgba(239, 68, 68, 0.1);
+  border-radius: var(--ermis-radius-sm, 0.375rem);
+  font-size: var(--ermis-font-size-sm, 0.875rem);
+}
+
+/* Footer Buttons */
+.ermis-create-channel__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ermis-spacing-sm, 0.5rem);
+}
+
+.ermis-create-channel__btn {
+  padding: 8px 16px;
+  border-radius: var(--ermis-radius-md, 0.5rem);
+  font-size: var(--ermis-font-size-sm, 0.875rem);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--ermis-transition, 150ms ease);
+  border: none;
+}
+
+.ermis-create-channel__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ermis-create-channel__btn--cancel {
+  background-color: transparent;
+  color: var(--ermis-text-primary, #e5e7eb);
+}
+
+.ermis-create-channel__btn--cancel:hover:not(:disabled) {
+  background-color: var(--ermis-bg-hover, rgba(255, 255, 255, 0.04));
+}
+
+.ermis-create-channel__btn--create {
+  background-color: var(--ermis-accent, #6366f1);
+  color: #fff;
+}
+
+.ermis-create-channel__btn--create:hover:not(:disabled) {
+  opacity: 0.9;
+}