@semiont/react-ui 0.5.27 → 0.5.29

package/src/features/admin-exchange/state/__tests__/exchange-state-unit.test.ts

@@ -1,185 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { firstValueFrom, of, throwError } from 'rxjs';
-import type { ShellStateUnit } from '../../../../state/shell-state-unit';
-import { createExchangeStateUnit } from '../exchange-state-unit';
-import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing/axioms';
-
-function mockBrowse(): ShellStateUnit {
-  return { dispose: vi.fn() } as unknown as ShellStateUnit;
-}
-
-function makeMockFile(name: string): File {
-  return new File(['content'], name, { type: 'application/gzip' });
-}
-
-describe('createExchangeStateUnit', () => {
-  it('initializes with null/empty state', async () => {
-    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), vi.fn());
-
-    expect(await firstValueFrom(stateUnit.selectedFile$)).toBeNull();
-    expect(await firstValueFrom(stateUnit.preview$)).toBeNull();
-    expect(await firstValueFrom(stateUnit.importPhase$)).toBeNull();
-    expect(await firstValueFrom(stateUnit.isExporting$)).toBe(false);
-    expect(await firstValueFrom(stateUnit.isImporting$)).toBe(false);
-
-    stateUnit.dispose();
-  });
-
-  it('selectFile sets file and generates preview', async () => {
-    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), vi.fn());
-
-    stateUnit.selectFile(makeMockFile('backup.tar.gz'));
-
-    const file = await firstValueFrom(stateUnit.selectedFile$);
-    expect(file?.name).toBe('backup.tar.gz');
-
-    const preview = await firstValueFrom(stateUnit.preview$);
-    expect(preview?.format).toBe('semiont-linked-data');
-
-    stateUnit.dispose();
-  });
-
-  it('selectFile detects unknown format', async () => {
-    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), vi.fn());
-
-    stateUnit.selectFile(makeMockFile('data.json'));
-
-    const preview = await firstValueFrom(stateUnit.preview$);
-    expect(preview?.format).toBe('unknown');
-
-    stateUnit.dispose();
-  });
-
-  it('cancelImport resets all state', async () => {
-    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), vi.fn());
-
-    stateUnit.selectFile(makeMockFile('backup.tar.gz'));
-    stateUnit.cancelImport();
-
-    expect(await firstValueFrom(stateUnit.selectedFile$)).toBeNull();
-    expect(await firstValueFrom(stateUnit.preview$)).toBeNull();
-    expect(await firstValueFrom(stateUnit.importPhase$)).toBeNull();
-
-    stateUnit.dispose();
-  });
-
-  // jsdom doesn't implement `Blob.prototype.stream()` portably, so build
-  // the stream literal — same shape, no environment dependency.
-  function streamOf(text: string): ReadableStream<Uint8Array> {
-    return new ReadableStream<Uint8Array>({
-      start(controller) {
-        controller.enqueue(new TextEncoder().encode(text));
-        controller.close();
-      },
-    });
-  }
-
-  it('doExport calls exportFn and returns blob + filename from BackendDownload', async () => {
-    // exportFn now returns a BackendDownload — a transport-neutral
-    // { stream, contentType, filename? } object. The state unit converts the
-    // stream to a Blob and threads filename through.
-    const exportFn = vi.fn().mockResolvedValue({
-      stream: streamOf('data'),
-      contentType: 'application/x-tar',
-      filename: 'export.tar.gz',
-    });
-
-    const stateUnit = createExchangeStateUnit(mockBrowse(), exportFn, vi.fn());
-
-    const result = await stateUnit.doExport();
-    expect(result.filename).toBe('export.tar.gz');
-    expect(await result.blob.text()).toBe('data');
-
-    expect(await firstValueFrom(stateUnit.isExporting$)).toBe(false);
-
-    stateUnit.dispose();
-  });
-
-  it('doExport falls back to a synthesized filename when the download omits one', async () => {
-    const exportFn = vi.fn().mockResolvedValue({
-      stream: streamOf('data'),
-      contentType: 'application/x-tar',
-      // no filename
-    });
-
-    const stateUnit = createExchangeStateUnit(mockBrowse(), exportFn, vi.fn());
-
-    const result = await stateUnit.doExport();
-    expect(result.filename).toMatch(/^semiont-export-\d+\.tar\.gz$/);
-
-    stateUnit.dispose();
-  });
-
-  it('doExport propagates errors from exportFn and clears isExporting$', async () => {
-    // The state unit no longer inspects HTTP status — non-OK responses are the
-    // transport's concern (ky throws on non-OK by default). The state unit just
-    // propagates whatever the exportFn rejects with and resets state.
-    const exportFn = vi.fn().mockRejectedValue(new Error('transport boom'));
-
-    const stateUnit = createExchangeStateUnit(mockBrowse(), exportFn, vi.fn());
-
-    await expect(stateUnit.doExport()).rejects.toThrow('transport boom');
-    expect(await firstValueFrom(stateUnit.isExporting$)).toBe(false);
-
-    stateUnit.dispose();
-  });
-
-  it('doImport subscribes to importFn Observable and mirrors each progress event', async () => {
-    // importFn now returns Observable<ProgressEvent>. The state unit subscribes,
-    // mirrors each emit into its state subjects, and resolves when the
-    // observable completes.
-    const importFn = vi.fn().mockReturnValue(
-      of(
-        { phase: 'uploading', message: '50%' },
-        { phase: 'complete', result: { resources: 10 } },
-      ),
-    );
-
-    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), importFn);
-    stateUnit.selectFile(makeMockFile('import.tar.gz'));
-
-    await stateUnit.doImport();
-
-    expect(importFn).toHaveBeenCalledOnce();
-    expect(await firstValueFrom(stateUnit.importResult$)).toEqual({ resources: 10 });
-    expect(await firstValueFrom(stateUnit.importPhase$)).toBe('complete');
-    expect(await firstValueFrom(stateUnit.isImporting$)).toBe(false);
-
-    stateUnit.dispose();
-  });
-
-  it('doImport propagates errors from the importFn Observable and clears isImporting$', async () => {
-    const importFn = vi.fn().mockReturnValue(throwError(() => new Error('import boom')));
-
-    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), importFn);
-    stateUnit.selectFile(makeMockFile('import.tar.gz'));
-
-    await expect(stateUnit.doImport()).rejects.toThrow('import boom');
-    expect(await firstValueFrom(stateUnit.isImporting$)).toBe(false);
-
-    stateUnit.dispose();
-  });
-
-  it('doImport is no-op without selected file', async () => {
-    const importFn = vi.fn();
-    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), importFn);
-
-    await stateUnit.doImport();
-    expect(importFn).not.toHaveBeenCalled();
-
-    stateUnit.dispose();
-  });
-});
-
-describe('ExchangeStateUnit — StateUnit axioms', () => {
-  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
-    assertStateUnitAxioms({
-      setup: () => {
-        const browse = disposeProbe();
-        return { unit: createExchangeStateUnit(browse as unknown as ShellStateUnit, vi.fn(), vi.fn()), passedIn: [browse] };
-      },
-      surfaces: (u) => [u.selectedFile$, u.preview$, u.importPhase$, u.importMessage$, u.importResult$, u.isExporting$, u.isImporting$],
-      invocations: (u) => [() => u.cancelImport(), () => u.doImport()],
-    });
-  });
-});

package/src/features/admin-exchange/state/exchange-state-unit.ts

@@ -1,133 +0,0 @@
-import { BehaviorSubject, lastValueFrom, type Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/core';
-import type { ShellStateUnit } from '../../../state/shell-state-unit';
-import type { BackendDownload, ProgressEvent } from '@semiont/core';
-
-export interface ImportPreview {
-  format: string;
-  version: number;
-  sourceUrl: string;
-  stats: Record<string, number>;
-}
-
-export interface ExchangeStateUnit extends StateUnit {
-  browse: ShellStateUnit;
-  selectedFile$: Observable<File | null>;
-  preview$: Observable<ImportPreview | null>;
-  importPhase$: Observable<string | null>;
-  importMessage$: Observable<string | undefined>;
-  importResult$: Observable<Record<string, unknown> | undefined>;
-  isExporting$: Observable<boolean>;
-  isImporting$: Observable<boolean>;
-  selectFile(file: File): void;
-  cancelImport(): void;
-  doExport(): Promise<{ blob: Blob; filename: string }>;
-  doImport(): Promise<void>;
-}
-
-export function createExchangeStateUnit(
-  browse: ShellStateUnit,
-  exportFn: (params?: { includeArchived?: boolean }) => Promise<BackendDownload>,
-  importFn: (file: File) => Observable<ProgressEvent>,
-): ExchangeStateUnit {
-  const disposer = createDisposer();
-  // `browse` (ShellStateUnit) is a *passed-in* dependency owned by the caller
-  // (`useShellStateUnit`), not this unit — do NOT add it to the disposer (it's the
-  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
-
-  const selectedFile$ = new BehaviorSubject<File | null>(null);
-  const preview$ = new BehaviorSubject<ImportPreview | null>(null);
-  const importPhase$ = new BehaviorSubject<string | null>(null);
-  const importMessage$ = new BehaviorSubject<string | undefined>(undefined);
-  const importResult$ = new BehaviorSubject<Record<string, unknown> | undefined>(undefined);
-  const isExporting$ = new BehaviorSubject<boolean>(false);
-  const isImporting$ = new BehaviorSubject<boolean>(false);
-
-  const selectFile = (file: File): void => {
-    selectedFile$.next(file);
-    importPhase$.next(null);
-    importMessage$.next(undefined);
-    importResult$.next(undefined);
-    preview$.next({
-      format: file.name.endsWith('.tar.gz') || file.name.endsWith('.gz') ? 'semiont-linked-data' : 'unknown',
-      version: 1,
-      sourceUrl: '',
-      stats: {} as Record<string, number>,
-    });
-  };
-
-  const cancelImport = (): void => {
-    selectedFile$.next(null);
-    preview$.next(null);
-    importPhase$.next(null);
-    importMessage$.next(undefined);
-    importResult$.next(undefined);
-  };
-
-  const doExport = async (): Promise<{ blob: Blob; filename: string }> => {
-    isExporting$.next(true);
-    try {
-      const download = await exportFn();
-      // Wrap the stream in a Response purely as a Blob-collection helper —
-      // BackendDownload itself carries no fetch dependency.
-      const blob = await new Response(download.stream).blob();
-      const filename = download.filename ?? `semiont-export-${Date.now()}.tar.gz`;
-      return { blob, filename };
-    } finally {
-      isExporting$.next(false);
-    }
-  };
-
-  const doImport = async (): Promise<void> => {
-    const file = selectedFile$.getValue();
-    if (!file) return;
-    isImporting$.next(true);
-    importPhase$.next('started');
-    importMessage$.next(undefined);
-    importResult$.next(undefined);
-    try {
-      // The importFn is `Observable<ProgressEvent>` — every emit is a
-      // progress event; the final emit before complete is the outcome.
-      // `tap` mirrors each event into our state subjects; `lastValueFrom`
-      // awaits the last value (so callers can `await vm.doImport()`).
-      await lastValueFrom(
-        importFn(file).pipe(
-          tap((event) => {
-            importPhase$.next(event.phase);
-            importMessage$.next(event.message);
-            if (event.result) importResult$.next(event.result);
-          }),
-        ),
-      );
-    } finally {
-      isImporting$.next(false);
-    }
-  };
-
-  return {
-    browse,
-    selectedFile$: selectedFile$.asObservable(),
-    preview$: preview$.asObservable(),
-    importPhase$: importPhase$.asObservable(),
-    importMessage$: importMessage$.asObservable(),
-    importResult$: importResult$.asObservable(),
-    isExporting$: isExporting$.asObservable(),
-    isImporting$: isImporting$.asObservable(),
-    selectFile,
-    cancelImport,
-    doExport,
-    doImport,
-    dispose: () => {
-      selectedFile$.complete();
-      preview$.complete();
-      importPhase$.complete();
-      importMessage$.complete();
-      importResult$.complete();
-      isExporting$.complete();
-      isImporting$.complete();
-      disposer.dispose();
-    },
-  };
-}

package/src/features/moderation-linked-data/__tests__/LinkedDataPage.test.tsx

@@ -1,118 +0,0 @@
-/**
- * Tests for LinkedDataPage component
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { LinkedDataPage } from '../components/LinkedDataPage';
-import type { LinkedDataPageProps } from '../components/LinkedDataPage';
-
-const createProps = (overrides?: Partial<LinkedDataPageProps>): LinkedDataPageProps => ({
-  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: 'Export & Import',
-    subtitle: 'Exchange knowledge as JSON-LD Linked Data',
-    export: {
-      title: 'Export',
-      description: 'Export your knowledge base as JSON-LD',
-      exportButton: 'Export as JSON-LD',
-      exporting: 'Exporting…',
-    },
-    import: {
-      title: 'Import',
-      description: 'Import from JSON-LD',
-      dropzoneLabel: 'Drop a file here',
-      dropzoneActive: 'Drop to upload',
-      detectedFormat: 'Format',
-      statsPreview: 'Preview',
-      importButton: 'Import',
-      importing: 'Importing…',
-      importConfirmTitle: 'Confirm',
-      importConfirmMessage: 'This will create new resources.',
-      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('LinkedDataPage', () => {
-  it('renders page title and subtitle', () => {
-    render(<LinkedDataPage {...createProps()} />);
-    expect(screen.getByText('Export & Import')).toBeInTheDocument();
-    expect(screen.getByText('Exchange knowledge as JSON-LD Linked Data')).toBeInTheDocument();
-  });
-
-  it('renders ExportCard', () => {
-    render(<LinkedDataPage {...createProps()} />);
-    expect(screen.getByRole('heading', { name: 'Export' })).toBeInTheDocument();
-    expect(screen.getByText('Export as JSON-LD')).toBeInTheDocument();
-  });
-
-  it('renders ImportCard', () => {
-    render(<LinkedDataPage {...createProps()} />);
-    expect(screen.getByRole('heading', { name: 'Import' })).toBeInTheDocument();
-    expect(screen.getByText('Import from JSON-LD')).toBeInTheDocument();
-  });
-
-  it('renders toolbar components', () => {
-    render(<LinkedDataPage {...createProps()} />);
-    expect(screen.getByTestId('toolbar-panels')).toBeInTheDocument();
-    expect(screen.getByTestId('toolbar')).toBeInTheDocument();
-  });
-
-  it('does not render ImportProgress when importPhase is null', () => {
-    const { container } = render(<LinkedDataPage {...createProps()} />);
-    expect(container.querySelector('.semiont-exchange__progress')).not.toBeInTheDocument();
-  });
-
-  it('renders ImportProgress when importPhase is set', () => {
-    render(<LinkedDataPage {...createProps({ importPhase: 'started' })} />);
-    expect(screen.getByText('Starting…')).toBeInTheDocument();
-  });
-
-  it('renders ImportProgress with result on completion', () => {
-    render(<LinkedDataPage {...createProps({
-      importPhase: 'complete',
-      importResult: { stats: { resourcesCreated: 5, annotationsCreated: 12, entityTypesAdded: 3 } },
-    })} />);
-    expect(screen.getByText('Complete')).toBeInTheDocument();
-    expect(screen.getByText('5')).toBeInTheDocument();
-    expect(screen.getByText('Resources created')).toBeInTheDocument();
-    expect(screen.getByText('12')).toBeInTheDocument();
-    expect(screen.getByText('Annotations created')).toBeInTheDocument();
-    expect(screen.getByText('3')).toBeInTheDocument();
-    expect(screen.getByText('Entity types added')).toBeInTheDocument();
-  });
-
-  it('applies panel-open class when common panel is active', () => {
-    const { container } = render(<LinkedDataPage {...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(<LinkedDataPage {...createProps({ activePanel: null })} />);
-    expect(container.querySelector('.semiont-page--panel-open')).not.toBeInTheDocument();
-  });
-});

package/src/features/moderation-linked-data/components/LinkedDataPage.tsx

@@ -1,118 +0,0 @@
-/**
- * LinkedDataPage — JSON-LD Export/Import moderation page
- *
- * Pure React component. All state and handlers passed as props.
- * Reuses ExportCard, ImportCard, and ImportProgress from admin-exchange.
- */
-
-import React from 'react';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
-import { ExportCard, type ExportCardTranslations } from '../../admin-exchange/components/ExportCard';
-import { ImportCard, type ImportCardProps, type ImportCardTranslations } from '../../admin-exchange/components/ImportCard';
-import { ImportProgress, type ImportProgressTranslations } from '../../admin-exchange/components/ImportProgress';
-
-export interface LinkedDataPageTranslations {
-  title: string;
-  subtitle: string;
-  export: ExportCardTranslations;
-  import: ImportCardTranslations;
-  progress: ImportProgressTranslations;
-}
-
-export interface LinkedDataPageProps {
-  // Export
-  onExport: () => void;
-  isExporting: boolean;
-
-  // Import
-  onFileSelected: (file: File) => void;
-  onImport: () => void;
-  onCancelImport: () => void;
-  selectedFile: File | null;
-  preview: ImportCardProps['preview'];
-  isImporting: boolean;
-
-  // Progress
-  importPhase: string | null;
-  importMessage?: string | undefined;
-  importResult?: Record<string, unknown> | undefined;
-
-  // UI state
-  theme: 'light' | 'dark' | 'system';
-  activePanel: string | null;
-
-  // Translations
-  translations: LinkedDataPageTranslations;
-
-  // Component dependencies
-  ToolbarPanels: React.ComponentType<any>;
-  Toolbar: React.ComponentType<any>;
-}
-
-export function LinkedDataPage({
-  onExport,
-  isExporting,
-  onFileSelected,
-  onImport,
-  onCancelImport,
-  selectedFile,
-  preview,
-  isImporting,
-  importPhase,
-  importMessage,
-  importResult,
-  theme,
-  activePanel,
-  translations: t,
-  ToolbarPanels,
-  Toolbar,
-}: LinkedDataPageProps) {
-  return (
-    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
-      <div className="semiont-page__content">
-        <div className="semiont-page__header">
-          <h1 className="semiont-page__title">{t.title}</h1>
-          <p className="semiont-page__subtitle">{t.subtitle}</p>
-        </div>
-
-        <div className="semiont-exchange__cards">
-          <ExportCard
-            onExport={onExport}
-            isExporting={isExporting}
-            translations={t.export}
-          />
-
-          <ImportCard
-            onFileSelected={onFileSelected}
-            onImport={onImport}
-            onCancel={onCancelImport}
-            selectedFile={selectedFile}
-            preview={preview}
-            isImporting={isImporting}
-            translations={t.import}
-          />
-        </div>
-
-        {importPhase && (
-          <ImportProgress
-            phase={importPhase}
-            message={importMessage}
-            result={importResult}
-            translations={t.progress}
-          />
-        )}
-      </div>
-
-      <div className="semiont-page__sidebar">
-        <ToolbarPanels
-          activePanel={activePanel}
-          theme={theme}
-        />
-        <Toolbar
-          context="simple"
-          activePanel={activePanel}
-        />
-      </div>
-    </div>
-  );
-}