@semiont/react-ui 0.5.27 → 0.5.28

package/src/components/modals/ResourceSearchModal.tsx

@@ -1,224 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { readyValue } from '@semiont/sdk';
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
-import { map } from 'rxjs/operators';
-import { getResourceId, getPrimaryRepresentation } from '@semiont/core';
-import { createSearchPipeline } from '@semiont/sdk';
-import { useSemiont } from '../../session/SemiontProvider';
-import { useObservable } from '../../hooks/useObservable';
-import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
-
-import type { ResourceDescriptor } from '@semiont/core';
-
-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;
-  onClose: () => void;
-  onSelect: (resourceId: string) => void;
-  searchTerm?: string;
-  translations?: {
-    title?: string;
-    placeholder?: string;
-    searching?: string;
-    noResults?: string;
-    close?: string;
-  };
-}
-
-export function ResourceSearchModal({
-  isOpen,
-  onClose,
-  onSelect,
-  searchTerm = '',
-  translations = {}
-}: ResourceSearchModalProps) {
-  const { announceSearchResults, announceSearching, announceNavigation } = useSearchAnnouncements();
-  const semiont = useObservable(useSemiont().activeSession$)?.client;
-  // Pipeline factory captures `semiont` once via useState; if semiont is
-  // still loading at first render the captured value would be undefined.
-  // Route through a ref so the fetch closure reads the latest client.
-  const semiontRef = useRef(semiont);
-  semiontRef.current = semiont;
-
-  const t = {
-    title: translations.title || 'Search Resources',
-    placeholder: translations.placeholder || 'Search for resources...',
-    searching: translations.searching || 'Searching...',
-    noResults: translations.noResults || 'No documents found',
-    close: translations.close || '✕',
-  };
-
-  // ── Search pipeline ─────────────────────────────────────────────────────
-  const [pipeline] = useState(() =>
-    createSearchPipeline<SearchResult>(
-      (q) =>
-        semiontRef.current!.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
-          map((st) => {
-            const resources = readyValue(st)?.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]);
-
-  const search = useObservable(pipeline.query$) ?? '';
-  const searchState = useObservable(pipeline.state$);
-  const results = searchState?.results ?? [];
-  const loading = searchState?.isSearching ?? false;
-
-  // 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 (isOpen && searchTerm) {
-      pipeline.setQuery(searchTerm);
-    }
-  }, [isOpen, searchTerm, pipeline]);
-
-  // Accessibility announcements for search lifecycle.
-  useEffect(() => {
-    if (!search.trim()) return;
-    if (loading) {
-      announceSearching();
-    } else {
-      announceSearchResults(results.length, search);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loading, results.length]);
-
-  const handleSelect = (resourceId: string, resourceName: string) => {
-    announceNavigation(resourceName, 'resource');
-    onSelect(resourceId);
-    onClose();
-  };
-
-  return (
-    <Transition appear show={isOpen}>
-      <Dialog as="div" className="semiont-search-modal semiont-search-modal--resource" onClose={onClose}>
-        {/* Backdrop */}
-        <TransitionChild
-                   enter="ease-out duration-200"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-150"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="semiont-search-modal__backdrop" />
-        </TransitionChild>
-
-        {/* Modal panel */}
-        <div className="semiont-search-modal__wrapper">
-          <div className="semiont-search-modal__centering semiont-search-modal__centering--center">
-            <TransitionChild
-                           enter="ease-out duration-200"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-150"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
-            >
-              <DialogPanel className="semiont-search-modal__panel semiont-search-modal__panel--with-border">
-                <div className="semiont-search-modal__header">
-                  <DialogTitle className="semiont-search-modal__title">
-                    {t.title}
-                  </DialogTitle>
-                  <button
-                    onClick={onClose}
-                    className="semiont-search-modal__close-button"
-                    aria-label={t.close}
-                  >
-                    {t.close}
-                  </button>
-                </div>
-
-                <div className="semiont-search-modal__search-form">
-                  <input
-                    type="text"
-                    value={search}
-                    onChange={(e) => pipeline.setQuery(e.target.value)}
-                    placeholder={t.placeholder}
-                    className="semiont-search-modal__search-input"
-                    autoFocus
-                  />
-                </div>
-
-                <div className="semiont-search-modal__results">
-                  {loading && (
-                    <div className="semiont-search-modal__empty">
-                      {t.searching}
-                    </div>
-                  )}
-
-                  {!loading && results.length === 0 && search && (
-                    <div className="semiont-search-modal__empty">
-                      {t.noResults}
-                    </div>
-                  )}
-
-                  {!loading && results.length > 0 && (
-                    <div className="semiont-search-modal__resource-list">
-                      {results.map((resource) => {
-                        const isImage = resource.mediaType?.startsWith('image/');
-
-                        return (
-                          <div
-                            key={resource.id}
-                            className="semiont-search-modal__resource-item"
-                            onClick={() => handleSelect(resource.id, resource.name)}
-                          >
-                            <h4 className="semiont-search-modal__resource-name">
-                              {resource.name}
-                            </h4>
-                            {resource.content && !isImage && (
-                              <p className="semiont-search-modal__resource-description">
-                                {resource.content.substring(0, 150)}...
-                              </p>
-                            )}
-                            {isImage && (
-                              <p className="semiont-search-modal__resource-media-type">
-                                {resource.mediaType}
-                              </p>
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  );
-}

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

@@ -1,163 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { asStates } from '../../../__tests__/test-client';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { BehaviorSubject, map } from 'rxjs';
-import { renderWithProviders } from '../../../test-utils';
-import '@testing-library/jest-dom';
-import { ResourceSearchModal } from '../ResourceSearchModal';
-
-// Mock HeadlessUI to avoid jsdom OOM issues
-vi.mock('@headlessui/react', () => ({
-  Dialog: ({ children, onClose, ...props }: any) => <div role="dialog" {...props}>{typeof children === 'function' ? children({ open: true }) : children}</div>,
-  DialogPanel: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  DialogTitle: ({ children, ...props }: any) => <h2 {...props}>{children}</h2>,
-  Transition: ({ show, children }: any) => show ? <>{children}</> : null,
-  TransitionChild: ({ children }: any) => <>{children}</>,
-}));
-
-// Mock the http-transport Observable surface.
-// The session-based useSemiont path: useObservable(useSemiont().activeSession$)?.client
-// We mock useSemiont to return a stable browser whose activeSession$ emits a
-// session-shaped object that carries the mock client.
-const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
-const browseResourcesMock = vi.fn(() => asStates(browseResourcesSubject.asObservable().pipe(
-  // Arrays get the list envelope `resources()` now emits; `undefined`
-  // passes through as the pending state.
-  map((v) => (Array.isArray(v) ? { resources: v, total: v.length, offset: 0, limit: 20, matchKind: 'lexical' } : v)),
-)));
-const stableMockClient = { browse: { resources: browseResourcesMock } };
-const stableMockSession = { client: stableMockClient };
-const stableActiveSession$ = new BehaviorSubject<any>(stableMockSession);
-const stableMockBrowser = { activeSession$: stableActiveSession$ };
-
-vi.mock('../../../session/SemiontProvider', async () => {
-  const actual = await vi.importActual<typeof import('../../../session/SemiontProvider')>(
-    '../../../session/SemiontProvider'
-  );
-  return {
-    ...actual,
-    useSemiont: () => stableMockBrowser,
-  };
-});
-
-// Mock search announcements
-vi.mock('../../../hooks/useSearchAnnouncements', () => ({
-  useSearchAnnouncements: vi.fn(() => ({
-    announceSearchResults: vi.fn(),
-    announceSearching: vi.fn(),
-    announceNavigation: vi.fn(),
-  })),
-}));
-
-function setBrowseResults(resources: any[] | undefined) {
-  browseResourcesSubject.next(resources);
-}
-
-describe('ResourceSearchModal', () => {
-  const defaultProps = {
-    isOpen: true,
-    onClose: vi.fn(),
-    onSelect: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    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', () => {
-    renderWithProviders(<ResourceSearchModal {...defaultProps} />);
-    expect(screen.getByText('Search Resources')).toBeInTheDocument();
-  });
-
-  it('does not render when closed', () => {
-    renderWithProviders(
-      <ResourceSearchModal {...defaultProps} isOpen={false} />
-    );
-    expect(screen.queryByText('Search Resources')).not.toBeInTheDocument();
-  });
-
-  it('renders search input with placeholder', () => {
-    renderWithProviders(<ResourceSearchModal {...defaultProps} />);
-    expect(screen.getByPlaceholderText('Search for resources...')).toBeInTheDocument();
-  });
-
-  it('uses custom translations', () => {
-    renderWithProviders(
-      <ResourceSearchModal
-        {...defaultProps}
-        translations={{ title: 'Find Docs', placeholder: 'Type here...' }}
-      />
-    );
-    expect(screen.getByText('Find Docs')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Type here...')).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 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', 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', async () => {
-    const onSelect = vi.fn();
-    const onClose = vi.fn();
-
-    renderWithProviders(
-      <ResourceSearchModal
-        {...defaultProps}
-        searchTerm="test"
-        onSelect={onSelect}
-        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', 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', () => {
-    const onClose = vi.fn();
-    renderWithProviders(
-      <ResourceSearchModal {...defaultProps} onClose={onClose} />
-    );
-    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 }
-    );
-  });
-});