@semiont/react-ui 0.4.16 → 0.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.4.16",
+  "version": "0.4.18",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/components/modals/ResourceSearchModal.tsx

@@ -1,9 +1,38 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
-import { useResources } from '../../lib/api-hooks';
+import { map } from 'rxjs/operators';
+import type { components } from '@semiont/core';
+import { getResourceId, getPrimaryRepresentation } from '@semiont/api-client';
+import { useApiClient } from '../../contexts/ApiClientContext';
+import { useObservable } from '../../hooks/useObservable';
 import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
+import { createSearchPipeline } from '../../lib/search-pipeline';
+
+type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
+
+type SearchResult = {
+  id: string;
+  name: string;
+  content?: string;
+  mediaType?: string;
+};
+
+const SEARCH_DEBOUNCE_MS = 300;
+const SEARCH_LIMIT = 50;
+
+function toSearchResult(resource: ResourceDescriptor & { content?: string }): SearchResult | null {
+  const id = getResourceId(resource);
+  if (!id) return null;
+  const primary = getPrimaryRepresentation(resource);
+  return {
+    id,
+    name: resource.name,
+    content: resource.content,
+    mediaType: primary?.mediaType,
+  };
+}
 
 interface ResourceSearchModalProps {
   isOpen: boolean;
@@ -27,8 +56,7 @@ export function ResourceSearchModal({
   translations = {}
 }: ResourceSearchModalProps) {
   const { announceSearchResults, announceSearching, announceNavigation } = useSearchAnnouncements();
-  const [search, setSearch] = useState(searchTerm);
-  const [debouncedSearch, setDebouncedSearch] = useState(searchTerm);
+  const semiont = useApiClient();
 
   const t = {
     title: translations.title || 'Search Resources',
@@ -38,63 +66,47 @@ export function ResourceSearchModal({
     close: translations.close || '✕',
   };
 
-  // Debounce search
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedSearch(search);
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [search]);
-
-  // Use React Query for search
-  const resources = useResources();
-  const { data: searchData, isFetching: loading } = resources.search.useQuery(
-    debouncedSearch,
-    50 // Limit to 50 results
+  // ── Search pipeline ─────────────────────────────────────────────────────
+  const [pipeline] = useState(() =>
+    createSearchPipeline<SearchResult>(
+      (q) =>
+        semiont.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
+          map((resources) => {
+            if (resources === undefined) return undefined;
+            return resources
+              .map(toSearchResult)
+              .filter((r): r is SearchResult => r !== null);
+          }),
+        ),
+      { debounceMs: SEARCH_DEBOUNCE_MS, initialQuery: searchTerm },
+    ),
   );
+  useEffect(() => () => pipeline.dispose(), [pipeline]);
 
-  // Extract results from search data
-  const results = searchData?.resources?.map((resource: any) => {
-    // Get mediaType from primary representation
-    const reps = resource.representations;
-    const mediaType = Array.isArray(reps) && reps.length > 0 && reps[0]
-      ? reps[0].mediaType
-      : undefined;
-
-    return {
-      id: resource['@id'],
-      name: resource.name,
-      content: resource.content,
-      mediaType
-    };
-  }) || [];
-
-  // Announce search results
-  useEffect(() => {
-    if (!loading && debouncedSearch) {
-      announceSearchResults(results.length, debouncedSearch);
-    }
-  }, [loading, results.length, debouncedSearch]);
+  const search = useObservable(pipeline.query$) ?? '';
+  const searchState = useObservable(pipeline.state$);
+  const results = searchState?.results ?? [];
+  const loading = searchState?.isSearching ?? false;
 
-  // Announce when searching
+  // Re-seed when modal re-opens with a different searchTerm prop. The
+  // initialQuery option only applies to the first construction; subsequent
+  // prop changes need an explicit setQuery.
   useEffect(() => {
-    if (loading && debouncedSearch) {
-      announceSearching();
+    if (isOpen && searchTerm) {
+      pipeline.setQuery(searchTerm);
     }
-  }, [loading, debouncedSearch]);
+  }, [isOpen, searchTerm, pipeline]);
 
-  // Update search term when modal opens
+  // Accessibility announcements for search lifecycle.
   useEffect(() => {
-    if (isOpen && searchTerm) {
-      setSearch(searchTerm);
-      setDebouncedSearch(searchTerm);
+    if (!search.trim()) return;
+    if (loading) {
+      announceSearching();
+    } else {
+      announceSearchResults(results.length, search);
     }
-  }, [isOpen, searchTerm]);
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Search is handled by React Query hook
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loading, results.length]);
 
   const handleSelect = (resourceId: string, resourceName: string) => {
     announceNavigation(resourceName, 'resource');
@@ -142,16 +154,16 @@ export function ResourceSearchModal({
                   </button>
                 </div>
 
-                <form onSubmit={handleSearch} className="semiont-search-modal__search-form">
+                <div className="semiont-search-modal__search-form">
                   <input
                     type="text"
                     value={search}
-                    onChange={(e) => setSearch(e.target.value)}
+                    onChange={(e) => pipeline.setQuery(e.target.value)}
                     placeholder={t.placeholder}
                     className="semiont-search-modal__search-input"
                     autoFocus
                   />
-                </form>
+                </div>
 
                 <div className="semiont-search-modal__results">
                   {loading && (
@@ -168,7 +180,7 @@ export function ResourceSearchModal({
 
                   {!loading && results.length > 0 && (
                     <div className="semiont-search-modal__resource-list">
-                      {results.map((resource: any) => {
+                      {results.map((resource) => {
                         const isImage = resource.mediaType?.startsWith('image/');
 
                         return (

package/src/components/modals/SearchModal.tsx

@@ -2,11 +2,17 @@
 
 import React, { useState, useEffect } from 'react';
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
-// import { useResources } from '../../hooks/useResources';
-import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
+import { map } from 'rxjs/operators';
 import { getResourceId } from '@semiont/api-client';
+import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
+import { useApiClient } from '../../contexts/ApiClientContext';
+import { useObservable } from '../../hooks/useObservable';
+import { createSearchPipeline } from '../../lib/search-pipeline';
 import './SearchModal.css';
 
+const SEARCH_DEBOUNCE_MS = 300;
+const SEARCH_LIMIT = 5;
+
 interface SearchModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -39,9 +45,7 @@ export function SearchModal({
   translations = {}
 }: SearchModalProps) {
   const { announceSearchResults, announceSearching } = useSearchAnnouncements();
-  const [query, setQuery] = useState('');
-  const [debouncedQuery, setDebouncedQuery] = useState('');
-  const [results, setResults] = useState<SearchResult[]>([]);
+  const semiont = useApiClient();
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const t = {
@@ -56,63 +60,62 @@ export function SearchModal({
     esc: translations.esc || 'ESC',
   };
 
-  // Debounce query
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedQuery(query);
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [query]);
-
-  // Use React Query for search
-  // const resources = useResources();
-  // const { data: searchData, isFetching: loading } = resources.search.useQuery(
-  //   debouncedQuery,
-  //   5
-  // );
+  // ── Search pipeline ─────────────────────────────────────────────────────
+  // The fetch closure maps ResourceDescriptor → SearchResult inside the
+  // map operator. The helper handles debounce, switchMap, and loading state.
+  const [pipeline] = useState(() =>
+    createSearchPipeline<SearchResult>(
+      (q) =>
+        semiont.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
+          map((resources) => {
+            if (resources === undefined) return undefined;
+            return resources
+              .map((resource): SearchResult | null => {
+                const id = getResourceId(resource);
+                if (!id) return null;
+                return {
+                  type: 'resource',
+                  id,
+                  name: resource.name,
+                  content: (resource as { content?: string }).content?.substring(0, 150),
+                };
+              })
+              .filter((r): r is SearchResult => r !== null);
+          }),
+        ),
+      { debounceMs: SEARCH_DEBOUNCE_MS },
+    ),
+  );
+  useEffect(() => () => pipeline.dispose(), [pipeline]);
 
-  // TODO: This should come from props or context
-  const searchData = { resources: [], entities: [] };
-  const loading = false;
+  const query = useObservable(pipeline.query$) ?? '';
+  const searchState = useObservable(pipeline.state$);
+  const results = searchState?.results ?? [];
+  const loading = searchState?.isSearching ?? false;
 
-  // Reset state when modal opens/closes
+  // Reset query and selection when modal opens.
   useEffect(() => {
     if (isOpen) {
-      setQuery('');
-      setDebouncedQuery('');
-      setResults([]);
+      pipeline.setQuery('');
       setSelectedIndex(0);
     }
-  }, [isOpen]);
+  }, [isOpen, pipeline]);
 
-  // Update results when search data changes
+  // Reset selection cursor when results change.
   useEffect(() => {
-    if (!debouncedQuery.trim()) {
-      setResults([]);
-      return;
-    }
+    setSelectedIndex(0);
+  }, [results.length]);
 
+  // Accessibility announcements for search lifecycle.
+  useEffect(() => {
+    if (!query.trim()) return;
     if (loading) {
       announceSearching();
-    } else if (searchData) {
-      const resourceResults: SearchResult[] = (searchData.resources || [])
-        .filter((resource: any) => getResourceId(resource) !== undefined)
-        .map((resource: any) => ({
-          type: 'resource' as const,
-          id: getResourceId(resource)!,
-          name: resource.name,
-          content: resource.content?.substring(0, 150)
-        }));
-
-      // TODO: Add entities search when API is ready
-      const entityResults: SearchResult[] = [];
-
-      const allResults = [...resourceResults, ...entityResults];
-      setResults(allResults);
-      setSelectedIndex(0);
-      announceSearchResults(allResults.length, debouncedQuery);
+    } else {
+      announceSearchResults(results.length, query);
     }
-  }, [searchData, loading, debouncedQuery]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loading, results.length]);
 
   // Handle keyboard navigation
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -170,7 +173,7 @@ export function SearchModal({
                   <input
                     type="text"
                     value={query}
-                    onChange={(e) => setQuery(e.target.value)}
+                    onChange={(e) => pipeline.setQuery(e.target.value)}
                     onKeyDown={handleKeyDown}
                     placeholder={t.placeholder}
                     className="semiont-search-modal__input"

package/src/components/modals/__tests__/ResourceSearchModal.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import React from 'react';
-import { screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { BehaviorSubject } from 'rxjs';
 import { renderWithProviders } from '../../../test-utils';
 import '@testing-library/jest-dom';
 import { ResourceSearchModal } from '../ResourceSearchModal';
@@ -14,19 +15,24 @@ vi.mock('@headlessui/react', () => ({
   TransitionChild: ({ children }: any) => <>{children}</>,
 }));
 
-// Mock api-hooks
-const mockUseQuery = vi.fn(() => ({
-  data: null,
-  isFetching: false,
-}));
-
-vi.mock('../../../lib/api-hooks', () => ({
-  useResources: vi.fn(() => ({
-    search: {
-      useQuery: mockUseQuery,
-    },
-  })),
-}));
+// Mock the api-client Observable surface.
+// Note: useApiClient is called on every render. The real ApiClientProvider
+// holds a single instance — the mock must do the same, otherwise useMemo deps
+// invalidate on every render and RxJS pipelines restart from their initial
+// value on each keystroke.
+const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
+const browseResourcesMock = vi.fn(() => browseResourcesSubject.asObservable());
+const stableMockClient = { browse: { resources: browseResourcesMock } };
+
+vi.mock('../../../contexts/ApiClientContext', async () => {
+  const actual = await vi.importActual<typeof import('../../../contexts/ApiClientContext')>(
+    '../../../contexts/ApiClientContext'
+  );
+  return {
+    ...actual,
+    useApiClient: () => stableMockClient,
+  };
+});
 
 // Mock search announcements
 vi.mock('../../../hooks/useSearchAnnouncements', () => ({
@@ -37,6 +43,10 @@ vi.mock('../../../hooks/useSearchAnnouncements', () => ({
   })),
 }));
 
+function setBrowseResults(resources: any[] | undefined) {
+  browseResourcesSubject.next(resources);
+}
+
 describe('ResourceSearchModal', () => {
   const defaultProps = {
     isOpen: true,
@@ -46,7 +56,15 @@ describe('ResourceSearchModal', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    mockUseQuery.mockReturnValue({ data: null, isFetching: false });
+    browseResourcesSubject.next(undefined);
+  });
+
+  const buildResource = (id: string, name: string, mediaType = 'text/plain', content?: string) => ({
+    '@context': 'https://www.w3.org/ns/anno.jsonld',
+    '@id': id,
+    name,
+    content,
+    representations: [{ mediaType, isPrimary: true }],
   });
 
   it('renders modal with title when open', () => {
@@ -77,63 +95,27 @@ describe('ResourceSearchModal', () => {
     expect(screen.getByPlaceholderText('Type here...')).toBeInTheDocument();
   });
 
-  it('shows loading state when fetching', () => {
-    mockUseQuery.mockReturnValue({ data: null, isFetching: true });
-    renderWithProviders(<ResourceSearchModal {...defaultProps} />);
-    expect(screen.getByText('Searching...')).toBeInTheDocument();
+  it('shows loading state while the Observable has not emitted', async () => {
+    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="something" />);
+    await waitFor(() => expect(screen.getByText('Searching...')).toBeInTheDocument(), { timeout: 1000 });
   });
 
-  it('shows no results message when search has no matches', () => {
-    mockUseQuery.mockReturnValue({
-      data: { resources: [] },
-      isFetching: false,
-    });
-
-    renderWithProviders(
-      <ResourceSearchModal {...defaultProps} searchTerm="xyz" />
-    );
-    expect(screen.getByText('No documents found')).toBeInTheDocument();
+  it('shows no results message when search returns an empty array', async () => {
+    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="xyz" />);
+    setBrowseResults([]);
+    await waitFor(() => expect(screen.getByText('No documents found')).toBeInTheDocument(), { timeout: 1000 });
   });
 
-  it('renders search results', () => {
-    mockUseQuery.mockReturnValue({
-      data: {
-        resources: [
-          {
-            '@id': 'res-1',
-            name: 'Test Document',
-            content: 'Some content here',
-            representations: [{ mediaType: 'text/plain' }],
-          },
-        ],
-      },
-      isFetching: false,
-    });
-
-    renderWithProviders(
-      <ResourceSearchModal {...defaultProps} searchTerm="test" />
-    );
-    expect(screen.getByText('Test Document')).toBeInTheDocument();
+  it('renders search results', async () => {
+    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="test" />);
+    setBrowseResults([buildResource('res-1', 'Test Document', 'text/plain', 'Some content here')]);
+    await waitFor(() => expect(screen.getByText('Test Document')).toBeInTheDocument(), { timeout: 1000 });
   });
 
-  it('calls onSelect and onClose when a result is clicked', () => {
+  it('calls onSelect and onClose when a result is clicked', async () => {
     const onSelect = vi.fn();
     const onClose = vi.fn();
 
-    mockUseQuery.mockReturnValue({
-      data: {
-        resources: [
-          {
-            '@id': 'res-1',
-            name: 'Test Document',
-            content: 'Some content',
-            representations: [{ mediaType: 'text/plain' }],
-          },
-        ],
-      },
-      isFetching: false,
-    });
-
     renderWithProviders(
       <ResourceSearchModal
         {...defaultProps}
@@ -142,31 +124,18 @@ describe('ResourceSearchModal', () => {
         onClose={onClose}
       />
     );
+    setBrowseResults([buildResource('res-1', 'Test Document', 'text/plain', 'Some content')]);
+    await waitFor(() => expect(screen.getByText('Test Document')).toBeInTheDocument(), { timeout: 1000 });
 
     fireEvent.click(screen.getByText('Test Document'));
     expect(onSelect).toHaveBeenCalledWith('res-1');
     expect(onClose).toHaveBeenCalled();
   });
 
-  it('shows media type for image results', () => {
-    mockUseQuery.mockReturnValue({
-      data: {
-        resources: [
-          {
-            '@id': 'res-img',
-            name: 'Photo',
-            content: 'image data',
-            representations: [{ mediaType: 'image/png' }],
-          },
-        ],
-      },
-      isFetching: false,
-    });
-
-    renderWithProviders(
-      <ResourceSearchModal {...defaultProps} searchTerm="photo" />
-    );
-    expect(screen.getByText('image/png')).toBeInTheDocument();
+  it('shows media type for image results', async () => {
+    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="photo" />);
+    setBrowseResults([buildResource('res-img', 'Photo', 'image/png')]);
+    await waitFor(() => expect(screen.getByText('image/png')).toBeInTheDocument(), { timeout: 1000 });
   });
 
   it('calls onClose when close button is clicked', () => {
@@ -177,4 +146,12 @@ describe('ResourceSearchModal', () => {
     fireEvent.click(screen.getByLabelText('✕'));
     expect(onClose).toHaveBeenCalled();
   });
+
+  it('passes the search term through to browse.resources', async () => {
+    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="hello" />);
+    await waitFor(
+      () => expect(browseResourcesMock).toHaveBeenCalledWith({ search: 'hello', limit: 50 }),
+      { timeout: 1000 }
+    );
+  });
 });