@semiont/react-ui 0.5.27 → 0.5.29

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 }
-    );
-  });
-});

package/src/features/admin-exchange/__tests__/AdminExchangePage.test.tsx

@@ -1,137 +0,0 @@
-/**
- * Tests for AdminExchangePage component
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { AdminExchangePage } from '../components/AdminExchangePage';
-import type { AdminExchangePageProps } from '../components/AdminExchangePage';
-
-const createProps = (overrides?: Partial<AdminExchangePageProps>): AdminExchangePageProps => ({
-  onExport: vi.fn(),
-  isExporting: false,
-  onFileSelected: vi.fn(),
-  onImport: vi.fn(),
-  onCancelImport: vi.fn(),
-  selectedFile: null,
-  preview: null,
-  isImporting: false,
-  importPhase: null,
-  theme: 'light',
-  activePanel: null,
-  translations: {
-    title: 'Backup & Restore',
-    subtitle: 'Back up and restore your knowledge base',
-    export: {
-      title: 'Backup',
-      description: 'Create a lossless backup',
-      exportButton: 'Create Backup',
-      exporting: 'Creating backup…',
-    },
-    import: {
-      title: 'Restore',
-      description: 'Restore from a backup',
-      dropzoneLabel: 'Drop a file here',
-      dropzoneActive: 'Drop to upload',
-      detectedFormat: 'Format',
-      statsPreview: 'Preview',
-      importButton: 'Restore',
-      importing: 'Restoring…',
-      importConfirmTitle: 'Confirm',
-      importConfirmMessage: 'Cannot undo.',
-      confirmImport: 'Proceed',
-      cancelImport: 'Cancel',
-    },
-    progress: {
-      phaseStarted: 'Starting…',
-      phaseComplete: 'Complete',
-      phaseError: 'Failed',
-      statsEventsReplayed: 'Events replayed',
-      statsResourcesCreated: 'Resources created',
-      statsAnnotationsCreated: 'Annotations created',
-      statsEntityTypesAdded: 'Entity types added',
-    },
-  },
-  ToolbarPanels: () => <div data-testid="toolbar-panels" />,
-  Toolbar: () => <div data-testid="toolbar" />,
-  ...overrides,
-});
-
-describe('AdminExchangePage', () => {
-  it('renders page title and subtitle', () => {
-    render(<AdminExchangePage {...createProps()} />);
-    expect(screen.getByText('Backup & Restore')).toBeInTheDocument();
-    expect(screen.getByText('Back up and restore your knowledge base')).toBeInTheDocument();
-  });
-
-  it('renders ExportCard', () => {
-    render(<AdminExchangePage {...createProps()} />);
-    expect(screen.getByRole('heading', { name: 'Backup' })).toBeInTheDocument();
-    expect(screen.getByText('Create a lossless backup')).toBeInTheDocument();
-  });
-
-  it('renders ImportCard', () => {
-    render(<AdminExchangePage {...createProps()} />);
-    expect(screen.getByRole('heading', { name: 'Restore' })).toBeInTheDocument();
-    expect(screen.getByText('Restore from a backup')).toBeInTheDocument();
-  });
-
-  it('renders toolbar components', () => {
-    render(<AdminExchangePage {...createProps()} />);
-    expect(screen.getByTestId('toolbar-panels')).toBeInTheDocument();
-    expect(screen.getByTestId('toolbar')).toBeInTheDocument();
-  });
-
-  it('does not render ImportProgress when importPhase is null', () => {
-    const { container } = render(<AdminExchangePage {...createProps()} />);
-    expect(container.querySelector('.semiont-exchange__progress')).not.toBeInTheDocument();
-  });
-
-  it('renders ImportProgress when importPhase is set', () => {
-    render(<AdminExchangePage {...createProps({ importPhase: 'started' })} />);
-    expect(screen.getByText('Starting…')).toBeInTheDocument();
-  });
-
-  it('renders ImportProgress with backup result on completion', () => {
-    render(<AdminExchangePage {...createProps({
-      importPhase: 'complete',
-      importResult: { stats: { eventsReplayed: 42, resourcesCreated: 5, annotationsCreated: 12, entityTypesAdded: 3 } },
-    })} />);
-    expect(screen.getByText('Complete')).toBeInTheDocument();
-    expect(screen.getByText('42')).toBeInTheDocument();
-    expect(screen.getByText('Events replayed')).toBeInTheDocument();
-  });
-
-  it('applies panel-open class when common panel is active', () => {
-    const { container } = render(<AdminExchangePage {...createProps({ activePanel: 'user' })} />);
-    expect(container.querySelector('.semiont-page--panel-open')).toBeInTheDocument();
-  });
-
-  it('does not apply panel-open class when no panel is active', () => {
-    const { container } = render(<AdminExchangePage {...createProps({ activePanel: null })} />);
-    expect(container.querySelector('.semiont-page--panel-open')).not.toBeInTheDocument();
-  });
-
-  it('passes theme to ToolbarPanels', () => {
-    const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
-    render(<AdminExchangePage {...createProps({ theme: 'dark', ToolbarPanels })} />);
-    expect(ToolbarPanels).toHaveBeenCalledWith(
-      expect.objectContaining({ theme: 'dark' }),
-      undefined,
-    );
-  });
-
-  it('passes context to Toolbar', () => {
-    const Toolbar = vi.fn(() => <div data-testid="toolbar" />);
-    render(<AdminExchangePage {...createProps({ Toolbar })} />);
-    expect(Toolbar).toHaveBeenCalledWith(
-      expect.objectContaining({ context: 'simple' }),
-      undefined,
-    );
-  });
-
-  it('renders cards in grid layout', () => {
-    const { container } = render(<AdminExchangePage {...createProps()} />);
-    expect(container.querySelector('.semiont-exchange__cards')).toBeInTheDocument();
-  });
-});

package/src/features/admin-exchange/__tests__/ExportCard.test.tsx

@@ -1,41 +0,0 @@
-/**
- * Tests for ExportCard component
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ExportCard } from '../components/ExportCard';
-import type { ExportCardProps } from '../components/ExportCard';
-
-const createProps = (overrides?: Partial<ExportCardProps>): ExportCardProps => ({
-  onExport: vi.fn(),
-  isExporting: false,
-  translations: {
-    title: 'Backup',
-    description: 'Create a lossless backup',
-    exportButton: 'Create Backup',
-    exporting: 'Creating backup…',
-  },
-  ...overrides,
-});
-
-describe('ExportCard', () => {
-  it('renders title and description', () => {
-    render(<ExportCard {...createProps()} />);
-    expect(screen.getByRole('heading', { name: 'Backup' })).toBeInTheDocument();
-    expect(screen.getByText('Create a lossless backup')).toBeInTheDocument();
-  });
-
-  it('calls onExport when button is clicked', () => {
-    const onExport = vi.fn();
-    render(<ExportCard {...createProps({ onExport })} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Create Backup' }));
-    expect(onExport).toHaveBeenCalled();
-  });
-
-  it('disables button and shows exporting text when isExporting', () => {
-    render(<ExportCard {...createProps({ isExporting: true })} />);
-    const button = screen.getByRole('button', { name: 'Creating backup…' });
-    expect(button).toBeDisabled();
-  });
-});