@semiont/react-ui 0.5.28 → 0.5.30

package/src/features/admin-exchange/components/ImportCard.tsx

@@ -1,183 +0,0 @@
-/**
- * ImportCard — File drop zone, preview, and import trigger
- *
- * Pure React component. All state and handlers passed as props.
- */
-
-import React, { useRef, useState, useCallback } from 'react';
-import type { ImportPreview } from '../state/exchange-state-unit';
-export type { ImportPreview };
-
-export interface ImportCardTranslations {
-  title: string;
-  description: string;
-  dropzoneLabel: string;
-  dropzoneActive: string;
-  detectedFormat: string;
-  statsPreview: string;
-  importButton: string;
-  importing: string;
-  importConfirmTitle: string;
-  importConfirmMessage: string;
-  confirmImport: string;
-  cancelImport: string;
-}
-
-export interface ImportCardProps {
-  onFileSelected: (file: File) => void;
-  onImport: () => void;
-  onCancel: () => void;
-  selectedFile: File | null;
-  preview: ImportPreview | null;
-  isImporting: boolean;
-  translations: ImportCardTranslations;
-}
-
-export function ImportCard({
-  onFileSelected,
-  onImport,
-  onCancel,
-  selectedFile,
-  preview,
-  isImporting,
-  translations: t,
-}: ImportCardProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isDragActive, setIsDragActive] = useState(false);
-  const [showConfirm, setShowConfirm] = useState(false);
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragActive(true);
-  }, []);
-
-  const handleDragLeave = useCallback(() => {
-    setIsDragActive(false);
-  }, []);
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragActive(false);
-    setShowConfirm(false);
-    const file = e.dataTransfer.files[0];
-    if (file) onFileSelected(file);
-  }, [onFileSelected]);
-
-  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setShowConfirm(false);
-    const file = e.target.files?.[0];
-    if (file) onFileSelected(file);
-  }, [onFileSelected]);
-
-  const handleImportClick = () => {
-    setShowConfirm(true);
-  };
-
-  const handleConfirm = () => {
-    setShowConfirm(false);
-    onImport();
-  };
-
-  const handleCancelConfirm = () => {
-    setShowConfirm(false);
-  };
-
-  return (
-    <div className="semiont-admin__card">
-      <h2 className="semiont-admin__section-title">{t.title}</h2>
-      <p className="semiont-admin__section-description">{t.description}</p>
-
-      <div
-        className={`semiont-exchange__dropzone${isDragActive ? ' semiont-exchange__dropzone--active' : ''}`}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        onClick={() => fileInputRef.current?.click()}
-      >
-        <p className="semiont-exchange__dropzone-text">
-          {isDragActive ? t.dropzoneActive : t.dropzoneLabel}
-        </p>
-        {selectedFile && (
-          <p className="semiont-exchange__file-info">
-            {selectedFile.name} ({(selectedFile.size / 1024).toFixed(1)} KB)
-          </p>
-        )}
-      </div>
-
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept=".tar.gz,.jsonl,.gz"
-        onChange={handleFileChange}
-        style={{ display: 'none' }}
-      />
-
-      {preview && (
-        <div className="semiont-exchange__preview">
-          <div className="semiont-exchange__preview-row">
-            <span className="semiont-exchange__preview-label">{t.detectedFormat}</span>
-            <span className="semiont-exchange__preview-value">
-              {preview.format} v{preview.version}
-            </span>
-          </div>
-          {preview.sourceUrl && (
-            <div className="semiont-exchange__preview-row">
-              <span className="semiont-exchange__preview-label">Source</span>
-              <span className="semiont-exchange__preview-value">{preview.sourceUrl}</span>
-            </div>
-          )}
-          {Object.keys(preview.stats).length > 0 && (
-            <div className="semiont-exchange__preview-row">
-              <span className="semiont-exchange__preview-label">{t.statsPreview}</span>
-              <span className="semiont-exchange__preview-value">
-                {Object.entries(preview.stats).map(([k, v]) => `${v} ${k}`).join(', ')}
-              </span>
-            </div>
-          )}
-        </div>
-      )}
-
-      {showConfirm && (
-        <div className="semiont-exchange__confirm">
-          <p className="semiont-exchange__confirm-title">{t.importConfirmTitle}</p>
-          <p className="semiont-exchange__confirm-message">{t.importConfirmMessage}</p>
-          <div className="semiont-exchange__confirm-actions">
-            <button
-              className="semiont-exchange__button semiont-exchange__button--primary"
-              onClick={handleConfirm}
-            >
-              {t.confirmImport}
-            </button>
-            <button
-              className="semiont-exchange__button semiont-exchange__button--secondary"
-              onClick={handleCancelConfirm}
-            >
-              {t.cancelImport}
-            </button>
-          </div>
-        </div>
-      )}
-
-      {!showConfirm && (
-        <div className="semiont-exchange__actions">
-          <button
-            className="semiont-exchange__button semiont-exchange__button--primary"
-            onClick={handleImportClick}
-            disabled={!preview || isImporting}
-          >
-            {isImporting ? t.importing : t.importButton}
-          </button>
-          {selectedFile && (
-            <button
-              className="semiont-exchange__button semiont-exchange__button--secondary"
-              onClick={onCancel}
-              disabled={isImporting}
-            >
-              {t.cancelImport}
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/features/admin-exchange/components/ImportProgress.tsx

@@ -1,80 +0,0 @@
-/**
- * ImportProgress — Shows SSE-driven progress during restore
- *
- * Pure React component. All state passed as props.
- */
-
-export interface ImportProgressTranslations {
-  phaseStarted: string;
-  phaseComplete: string;
-  phaseError: string;
-  statsEventsReplayed: string;
-  statsResourcesCreated: string;
-  statsAnnotationsCreated: string;
-  statsEntityTypesAdded: string;
-}
-
-export interface ImportProgressProps {
-  phase: string;
-  message?: string;
-  result?: Record<string, unknown>;
-  translations: ImportProgressTranslations;
-}
-
-const PHASE_LABELS: Record<string, keyof ImportProgressTranslations> = {
-  started: 'phaseStarted',
-  complete: 'phaseComplete',
-  error: 'phaseError',
-};
-
-const STAT_LABELS: Record<string, keyof ImportProgressTranslations> = {
-  eventsReplayed: 'statsEventsReplayed',
-  resourcesCreated: 'statsResourcesCreated',
-  annotationsCreated: 'statsAnnotationsCreated',
-  entityTypesAdded: 'statsEntityTypesAdded',
-};
-
-export function ImportProgress({ phase, message, result, translations: t }: ImportProgressProps) {
-  const labelKey = PHASE_LABELS[phase];
-  const phaseLabel = labelKey ? t[labelKey] : phase;
-
-  const isComplete = phase === 'complete';
-  const isError = phase === 'error';
-
-  const stats = result?.stats != null && typeof result.stats === 'object'
-    ? (result.stats as Record<string, unknown>)
-    : undefined;
-  const statEntries = stats
-    ? Object.entries(stats).filter((entry): entry is [string, number] => typeof entry[1] === 'number')
-    : [];
-
-  return (
-    <div className="semiont-exchange__progress">
-      <div className={`semiont-exchange__phase-label${isError ? ' semiont-exchange__phase-label--error' : isComplete ? ' semiont-exchange__phase-label--complete' : ''}`}>
-        {phaseLabel}
-      </div>
-
-      {message && !isComplete && !isError && (
-        <p className="semiont-exchange__progress-message">{message}</p>
-      )}
-
-      {isComplete && statEntries.length > 0 && (
-        <div className="semiont-exchange__result">
-          {statEntries.map(([key, value]) => {
-            const statKey = STAT_LABELS[key];
-            return (
-              <div key={key} className="semiont-exchange__result-stat">
-                <span className="semiont-exchange__result-value">{value}</span>
-                <span className="semiont-exchange__result-label">{statKey ? t[statKey] : key}</span>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {isError && message && (
-        <p className="semiont-exchange__error-message">{message}</p>
-      )}
-    </div>
-  );
-}

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