@chesapeake/stack 0.1.0

package/components/ux/UserSearch.tsx

@@ -0,0 +1,324 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/** @jsxImportSource react */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Input } from "../ui/input.tsx";
+import { Button } from "../ui/button.tsx";
+import { Label } from "../ui/label.tsx";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.tsx";
+import type { BaseUser } from "../../types/user.ts";
+
+/**
+ * Props for the UserSearch component
+ */
+export interface UserSearchProps {
+  /** Callback when a user is selected from search results */
+  onUserSelect: (user: BaseUser) => void;
+  /** Array of user IDs to exclude from search results */
+  excludeUserIds?: string[];
+  /** Current user's ID (excluded from results) */
+  currentUserId?: string;
+  /** API endpoint for searching users. Should accept a 'q' query parameter */
+  searchEndpoint?: string;
+  /** Placeholder text for the search input */
+  placeholder?: string;
+  /** Minimum characters required before searching. @default 2 */
+  minQueryLength?: number;
+  /** Debounce delay in milliseconds. @default 300 */
+  debounceMs?: number;
+  /** Label displayed above the search input */
+  label?: string;
+  /** Whether to show an "Add" button next to results */
+  showAddButton?: boolean;
+  /** Function to check if a user is already selected */
+  isSelected?: (userId: string) => boolean;
+  /** Label displayed for selected users. @default "Selected" */
+  selectedLabel?: string;
+}
+
+/**
+ * A searchable input component for finding and selecting users.
+ *
+ * This component provides a search interface with debounced API calls,
+ * displaying results in a dropdown. Supports excluding users, marking
+ * selected users, and customizable appearance.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <UserSearch
+ *   onUserSelect={(user) => console.log("Selected:", user)}
+ *   searchEndpoint="/api/users/search"
+ *   placeholder="Search users..."
+ * />
+ *
+ * // With exclusions and selected state
+ * <UserSearch
+ *   onUserSelect={handleSelect}
+ *   searchEndpoint="/api/users/search"
+ *   currentUserId="123"
+ *   excludeUserIds={["456", "789"]}
+ *   isSelected={(id) => selectedIds.includes(id)}
+ *   showAddButton
+ * />
+ *
+ * // In a form with label
+ * <UserSearch
+ *   label="Add Team Member"
+ *   onUserSelect={addMember}
+ *   searchEndpoint="/api/users/search"
+ *   minQueryLength={3}
+ *   debounceMs={500}
+ * />
+ * ```
+ *
+ * @sideeffect
+ * - Makes fetch requests to searchEndpoint
+ * - Adds/removes document event listeners for click-outside handling
+ * - Uses setTimeout for debouncing
+ */
+export function UserSearch({
+  onUserSelect,
+  excludeUserIds,
+  currentUserId,
+  searchEndpoint,
+  placeholder,
+  minQueryLength,
+  debounceMs,
+  label,
+  showAddButton,
+  isSelected,
+  selectedLabel,
+}: UserSearchProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<BaseUser[]>([]);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const searchRef = useRef<HTMLDivElement>(null);
+  const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
+
+  const performSearch = useCallback(
+    async (query: string) => {
+      const minLen = minQueryLength ?? 2;
+      if (query.length < minLen) {
+        setSearchResults([]);
+        return;
+      }
+
+      const endpoint = searchEndpoint;
+      if (!endpoint) {
+        setSearchResults([]);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const url = new URL(endpoint, globalThis.location.origin);
+        url.searchParams.set("q", query);
+
+        const headers: HeadersInit = {};
+        if (currentUserId) {
+          headers["X-User-ID"] = currentUserId;
+        }
+
+        const response = await fetch(url.toString(), {
+          headers,
+          credentials: "include", // Include cookies for authentication
+        });
+        if (!response.ok) {
+          throw new Error("Failed to search users");
+        }
+
+        const data = (await response.json()) as { value?: BaseUser[] };
+        const users = data.value ?? [];
+
+        // Filter out excluded users
+        const excludeIds = excludeUserIds ?? [];
+        const filtered = users.filter(
+          (u) => u.id !== currentUserId && !excludeIds.includes(u.id)
+        );
+
+        setSearchResults(filtered);
+      } catch (error) {
+        console.error("Error searching users:", error);
+        setSearchResults([]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [searchEndpoint, currentUserId, excludeUserIds, minQueryLength]
+  );
+
+  const handleSearch = useCallback(
+    (query: string) => {
+      setSearchQuery(query);
+      setIsSearchOpen(true);
+
+      // Clear previous timeout
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+
+      // Set new timeout for debounced search
+      debounceTimeoutRef.current = setTimeout(() => {
+        void performSearch(query);
+      }, debounceMs);
+    },
+    [performSearch, debounceMs]
+  );
+
+  const handleUserClick = useCallback(
+    (user: BaseUser) => {
+      onUserSelect(user);
+      setSearchQuery("");
+      setSearchResults([]);
+      setIsSearchOpen(false);
+    },
+    [onUserSelect]
+  );
+
+  // Close search when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        searchRef.current &&
+        !searchRef.current.contains(event.target as Node)
+      ) {
+        setTimeout(() => {
+          setSearchQuery("");
+          setSearchResults([]);
+          setIsSearchOpen(false);
+        }, 200);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const userIsSelected = (userId: string) => {
+    return isSelected ? isSelected(userId) : false;
+  };
+
+  return (
+    <div className="relative" ref={searchRef}>
+      {label && <Label htmlFor="user-search">{label}</Label>}
+      <div className="relative">
+        <Input
+          id="user-search"
+          value={searchQuery}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            handleSearch(e.currentTarget.value);
+          }}
+          placeholder={placeholder}
+          autoComplete="off"
+          onFocus={() => {
+            setIsSearchOpen(true);
+            const minLen = minQueryLength ?? 2;
+            if (searchQuery.length >= minLen) {
+              void performSearch(searchQuery);
+            }
+          }}
+        />
+        {isSearchOpen && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="absolute right-2 top-1/2 -translate-y-1/2"
+            onClick={() => {
+              setSearchQuery("");
+              setSearchResults([]);
+              setIsSearchOpen(false);
+            }}
+          >
+            ✕
+          </Button>
+        )}
+      </div>
+
+      {isSearchOpen && (
+        <div className="absolute z-10 w-full mt-1 bg-background border rounded-lg shadow-lg max-h-96 overflow-y-auto">
+          {isLoading ? (
+            <div className="p-4 text-center text-muted-foreground">
+              Searching...
+            </div>
+          ) : searchResults.length > 0 ? (
+            searchResults.map((user) => (
+              <div
+                key={user.id}
+                className="flex items-center justify-between p-2 border-b last:border-b-0 hover:bg-muted/50 cursor-pointer"
+                onClick={() => {
+                  handleUserClick(user);
+                }}
+              >
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  {user.profilePicture && (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <img
+                          src={user.profilePicture}
+                          alt={user.displayName}
+                          className="w-8 h-8 rounded-full object-cover"
+                        />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{user.displayName}</p>
+                        {user.email && (
+                          <p className="text-xs text-muted-foreground">
+                            {user.email}
+                          </p>
+                        )}
+                      </TooltipContent>
+                    </Tooltip>
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium truncate">
+                      {user.displayName}
+                    </div>
+                    {user.email && (
+                      <div className="text-sm text-muted-foreground truncate">
+                        {user.email}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                {userIsSelected(user.id) ? (
+                  <div className="px-3 py-1 text-sm text-primary bg-primary/10 rounded-full flex-shrink-0">
+                    {selectedLabel}
+                  </div>
+                ) : showAddButton ? (
+                  <Button
+                    type="button"
+                    variant="default"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleUserClick(user);
+                    }}
+                    className="flex-shrink-0"
+                  >
+                    Add
+                  </Button>
+                ) : null}
+              </div>
+            ))
+          ) : searchQuery.length >= (minQueryLength ?? 2) ? (
+            <div className="p-4 text-center text-muted-foreground">
+              No users found
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/ux/UserSelector.tsx

@@ -0,0 +1,116 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/** @jsxImportSource react */
+import { useCallback, useState } from "react";
+import { UserSearch } from "./UserSearch.tsx";
+import { type SelectedUser, SelectedUsersList } from "./SelectedUsersList.tsx";
+import type { BaseUser } from "../../types/user.ts";
+
+export interface UserSelectorProps {
+  selectedUsers: BaseUser[];
+  onUsersChange: (users: BaseUser[]) => void;
+  excludeUserIds?: string[];
+  currentUserId?: string;
+  searchEndpoint?: string;
+  placeholder?: string;
+  minQueryLength?: number;
+  debounceMs?: number;
+  showStatus?: boolean;
+  maxHeight?: string;
+  emptyMessage?: string;
+  searchLabel?: string;
+  listTitle?: string;
+  selectedLabel?: string;
+}
+
+export function UserSelector({
+  selectedUsers,
+  onUsersChange,
+  excludeUserIds,
+  currentUserId,
+  searchEndpoint,
+  placeholder,
+  minQueryLength,
+  debounceMs,
+  showStatus,
+  maxHeight,
+  emptyMessage,
+  searchLabel,
+  listTitle,
+  selectedLabel,
+}: UserSelectorProps) {
+  const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(
+    new Set(selectedUsers.map((u) => u.id))
+  );
+
+  const handleUserSelect = useCallback(
+    (user: BaseUser) => {
+      if (selectedUserIds.has(user.id)) {
+        return; // Already selected
+      }
+
+      const newUsers = [...selectedUsers, user];
+      const newIds = new Set(selectedUserIds);
+      newIds.add(user.id);
+      setSelectedUserIds(newIds);
+      onUsersChange(newUsers);
+    },
+    [selectedUsers, selectedUserIds, onUsersChange]
+  );
+
+  const handleRemove = useCallback(
+    (userId: string) => {
+      const newUsers = selectedUsers.filter((u) => u.id !== userId);
+      const newIds = new Set(selectedUserIds);
+      newIds.delete(userId);
+      setSelectedUserIds(newIds);
+      onUsersChange(newUsers);
+    },
+    [selectedUsers, selectedUserIds, onUsersChange]
+  );
+
+  const isSelected = useCallback(
+    (userId: string) => selectedUserIds.has(userId),
+    [selectedUserIds]
+  );
+
+  // Convert BaseUser to SelectedUser format
+  const selectedUsersList: SelectedUser[] = selectedUsers.map((u) => ({
+    userId: u.id,
+    displayName: u.displayName,
+    email: u.email,
+    profilePicture: u.profilePicture,
+  }));
+
+  // Combine excludeUserIds with selected user IDs
+  const allExcludedIds = [
+    ...(excludeUserIds ?? []),
+    ...Array.from(selectedUserIds),
+  ];
+
+  return (
+    <div className="space-y-4">
+      <UserSearch
+        onUserSelect={handleUserSelect}
+        excludeUserIds={allExcludedIds}
+        currentUserId={currentUserId}
+        searchEndpoint={searchEndpoint}
+        placeholder={placeholder}
+        minQueryLength={minQueryLength}
+        debounceMs={debounceMs}
+        label={searchLabel}
+        isSelected={isSelected}
+        selectedLabel={selectedLabel}
+      />
+      <SelectedUsersList
+        users={selectedUsersList}
+        onRemove={handleRemove}
+        showStatus={showStatus}
+        maxHeight={maxHeight}
+        emptyMessage={emptyMessage}
+        title={listTitle}
+      />
+    </div>
+  );
+}

package/components/ux/auth/AuthSelector.tsx

@@ -0,0 +1,154 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/** @jsxImportSource react */
+import React from "react";
+import { Button } from "../../ui/button";
+import { useAuth } from "./useAuth.ts";
+import type { AuthUser } from "./context.ts";
+
+export interface AuthSelectorProps {
+  /** Enable Google OAuth provider */
+  enableGoogle?: boolean;
+  /** Enable GitHub OAuth provider */
+  enableGithub?: boolean;
+  /** Custom styling/className */
+  className?: string;
+  /** Callback when user successfully authenticates */
+  onAuthSuccess?: (user: AuthUser, provider: "google" | "github") => void;
+  /** Custom button components (optional) */
+  googleButton?: React.ReactNode;
+  githubButton?: React.ReactNode;
+}
+
+/**
+ * AuthSelector component for choosing authentication provider
+ * Renders buttons for enabled providers and disables them when authenticated
+ */
+export function AuthSelector({
+  enableGoogle,
+  enableGithub,
+  className,
+  onAuthSuccess,
+  googleButton,
+  githubButton,
+}: AuthSelectorProps) {
+  const {
+    user,
+    loading,
+    provider,
+    signInWithGoogle,
+    signInWithGitHub,
+    signOut,
+  } = useAuth();
+
+  // Validate that user is actually a valid user object, not just truthy
+  const isAuthenticated = !!(
+    user &&
+    typeof user === "object" &&
+    Object.keys(user).length > 0
+  );
+  const hasMultipleProviders = enableGoogle && enableGithub;
+
+  // Call onAuthSuccess when user becomes authenticated
+  React.useEffect(() => {
+    if (user && provider && onAuthSuccess) {
+      onAuthSuccess(user, provider);
+    }
+  }, [user, provider, onAuthSuccess]);
+
+  if (loading) {
+    return (
+      <div className={`flex items-center justify-center ${className ?? ""}`}>
+        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (isAuthenticated) {
+    return (
+      <div className={`flex flex-col gap-2 ${className ?? ""}`}>
+        <div className="text-sm text-muted-foreground">
+          Signed in with {provider === "google" ? "Google" : "GitHub"}
+        </div>
+        <Button onClick={signOut} variant="outline" size="sm">
+          Sign Out
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col gap-2 ${className ?? ""}`}>
+      {hasMultipleProviders && (
+        <p className="text-sm text-muted-foreground mb-2">
+          Choose an authentication provider:
+        </p>
+      )}
+      <div className="flex flex-col gap-2">
+        {enableGoogle &&
+          (googleButton ?? (
+            <Button
+              onClick={signInWithGoogle}
+              disabled={isAuthenticated}
+              variant="outline"
+              className="w-full"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                className="mr-2"
+              >
+                <path
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  fill="#4285F4"
+                />
+                <path
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  fill="#34A853"
+                />
+                <path
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  fill="#FBBC05"
+                />
+                <path
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  fill="#EA4335"
+                />
+              </svg>
+              Sign in with Google
+            </Button>
+          ))}
+        {enableGithub &&
+          (githubButton ?? (
+            <Button
+              onClick={signInWithGitHub}
+              disabled={isAuthenticated}
+              variant="outline"
+              className="w-full"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="mr-2"
+              >
+                <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+                <path d="M9 18c-4.51 2-5-2-7-2" />
+              </svg>
+              Sign in with GitHub
+            </Button>
+          ))}
+      </div>
+    </div>
+  );
+}