@semiont/react-ui 0.5.27 → 0.5.29

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

@@ -1,148 +0,0 @@
-/**
- * Tests for ImportCard component
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ImportCard } from '../components/ImportCard';
-import type { ImportCardProps } from '../components/ImportCard';
-
-const createProps = (overrides?: Partial<ImportCardProps>): ImportCardProps => ({
-  onFileSelected: vi.fn(),
-  onImport: vi.fn(),
-  onCancel: vi.fn(),
-  selectedFile: null,
-  preview: null,
-  isImporting: false,
-  translations: {
-    title: 'Import',
-    description: 'Restore from a file',
-    dropzoneLabel: 'Drop a file here',
-    dropzoneActive: 'Drop to upload',
-    detectedFormat: 'Format',
-    statsPreview: 'Preview',
-    importButton: 'Import',
-    importing: 'Importing…',
-    importConfirmTitle: 'Confirm Import',
-    importConfirmMessage: 'This cannot be undone.',
-    confirmImport: 'Proceed',
-    cancelImport: 'Cancel',
-  },
-  ...overrides,
-});
-
-describe('ImportCard', () => {
-  it('renders title and description', () => {
-    render(<ImportCard {...createProps()} />);
-    expect(screen.getByRole('heading', { name: 'Import' })).toBeInTheDocument();
-    expect(screen.getByText('Restore from a file')).toBeInTheDocument();
-  });
-
-  it('renders dropzone with label', () => {
-    render(<ImportCard {...createProps()} />);
-    expect(screen.getByText('Drop a file here')).toBeInTheDocument();
-  });
-
-  it('disables import button when no preview', () => {
-    render(<ImportCard {...createProps()} />);
-    expect(screen.getByRole('button', { name: 'Import' })).toBeDisabled();
-  });
-
-  it('enables import button when preview is available', () => {
-    render(<ImportCard {...createProps({
-      selectedFile: new File([''], 'test.jsonl'),
-      preview: { format: 'semiont-backup', version: 1, sourceUrl: '', stats: {} },
-    })} />);
-    expect(screen.getByRole('button', { name: 'Import' })).not.toBeDisabled();
-  });
-
-  it('shows file info when a file is selected', () => {
-    const file = new File(['test'], 'backup.tar.gz');
-    render(<ImportCard {...createProps({ selectedFile: file })} />);
-    expect(screen.getByText(/backup\.tar\.gz/)).toBeInTheDocument();
-  });
-
-  it('shows preview details', () => {
-    render(<ImportCard {...createProps({
-      selectedFile: new File([''], 'test.jsonl'),
-      preview: {
-        format: 'semiont-backup',
-        version: 1,
-        sourceUrl: 'http://example.com',
-        stats: { streams: 5 },
-      },
-    })} />);
-    expect(screen.getByText('semiont-backup v1')).toBeInTheDocument();
-    expect(screen.getByText('http://example.com')).toBeInTheDocument();
-    expect(screen.getByText('5 streams')).toBeInTheDocument();
-  });
-
-  it('shows confirmation dialog on import click', () => {
-    render(<ImportCard {...createProps({
-      selectedFile: new File([''], 'test.jsonl'),
-      preview: { format: 'semiont-backup', version: 1, sourceUrl: '', stats: {} },
-    })} />);
-
-    fireEvent.click(screen.getByRole('button', { name: 'Import' }));
-    expect(screen.getByText('Confirm Import')).toBeInTheDocument();
-    expect(screen.getByText('This cannot be undone.')).toBeInTheDocument();
-  });
-
-  it('calls onImport when confirmation is confirmed', () => {
-    const onImport = vi.fn();
-    render(<ImportCard {...createProps({
-      onImport,
-      selectedFile: new File([''], 'test.jsonl'),
-      preview: { format: 'semiont-backup', version: 1, sourceUrl: '', stats: {} },
-    })} />);
-
-    fireEvent.click(screen.getByRole('button', { name: 'Import' }));
-    fireEvent.click(screen.getByRole('button', { name: 'Proceed' }));
-    expect(onImport).toHaveBeenCalled();
-  });
-
-  it('hides confirmation when cancel is clicked in confirm dialog', () => {
-    render(<ImportCard {...createProps({
-      selectedFile: new File([''], 'test.jsonl'),
-      preview: { format: 'semiont-backup', version: 1, sourceUrl: '', stats: {} },
-    })} />);
-
-    fireEvent.click(screen.getByRole('button', { name: 'Import' }));
-    expect(screen.getByText('Confirm Import')).toBeInTheDocument();
-
-    // In confirm dialog, the Cancel button
-    const cancelButtons = screen.getAllByRole('button', { name: 'Cancel' });
-    fireEvent.click(cancelButtons[0]);
-    expect(screen.queryByText('Confirm Import')).not.toBeInTheDocument();
-  });
-
-  it('shows cancel button when file is selected', () => {
-    render(<ImportCard {...createProps({
-      selectedFile: new File([''], 'test.jsonl'),
-    })} />);
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-  });
-
-  it('disables import button when importing', () => {
-    render(<ImportCard {...createProps({
-      isImporting: true,
-      selectedFile: new File([''], 'test.jsonl'),
-      preview: { format: 'semiont-backup', version: 1, sourceUrl: '', stats: {} },
-    })} />);
-    expect(screen.getByRole('button', { name: 'Importing…' })).toBeDisabled();
-  });
-
-  it('handles file drop', () => {
-    const onFileSelected = vi.fn();
-    render(<ImportCard {...createProps({ onFileSelected })} />);
-
-    const dropzone = screen.getByText('Drop a file here').closest('.semiont-exchange__dropzone')!;
-    const file = new File(['content'], 'test.tar.gz');
-
-    fireEvent.drop(dropzone, {
-      dataTransfer: { files: [file] },
-    });
-
-    expect(onFileSelected).toHaveBeenCalledWith(file);
-  });
-});

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

@@ -1,117 +0,0 @@
-/**
- * Tests for ImportProgress component
- */
-
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ImportProgress } from '../components/ImportProgress';
-import type { ImportProgressProps } from '../components/ImportProgress';
-
-const translations: ImportProgressProps['translations'] = {
-  phaseStarted: 'Starting restore…',
-  phaseComplete: 'Restore complete',
-  phaseError: 'Restore failed',
-  statsEventsReplayed: 'Events replayed',
-  statsResourcesCreated: 'Resources created',
-  statsAnnotationsCreated: 'Annotations created',
-  statsEntityTypesAdded: 'Entity types added',
-};
-
-describe('ImportProgress', () => {
-  it('renders phase label for known phases', () => {
-    render(<ImportProgress phase="started" translations={translations} />);
-    expect(screen.getByText('Starting restore…')).toBeInTheDocument();
-  });
-
-  it('renders raw phase string for unknown phases', () => {
-    render(<ImportProgress phase="custom-phase" translations={translations} />);
-    expect(screen.getByText('custom-phase')).toBeInTheDocument();
-  });
-
-  it('renders message during active phases', () => {
-    render(<ImportProgress phase="started" message="Restoring backup..." translations={translations} />);
-    expect(screen.getByText('Restoring backup...')).toBeInTheDocument();
-  });
-
-  it('does not render message during complete phase', () => {
-    render(<ImportProgress phase="complete" message="some message" translations={translations} />);
-    expect(screen.queryByText('some message')).not.toBeInTheDocument();
-  });
-
-  it('renders complete phase with correct class', () => {
-    const { container } = render(<ImportProgress phase="complete" translations={translations} />);
-    const label = container.querySelector('.semiont-exchange__phase-label--complete');
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveTextContent('Restore complete');
-  });
-
-  it('renders error phase with correct class', () => {
-    const { container } = render(<ImportProgress phase="error" translations={translations} />);
-    const label = container.querySelector('.semiont-exchange__phase-label--error');
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveTextContent('Restore failed');
-  });
-
-  it('renders error message', () => {
-    render(<ImportProgress phase="error" message="Connection failed" translations={translations} />);
-    expect(screen.getByText('Connection failed')).toBeInTheDocument();
-  });
-
-  it('renders backup restore stats nested under result.stats', () => {
-    render(<ImportProgress
-      phase="complete"
-      result={{ stats: { eventsReplayed: 42, resourcesCreated: 5, annotationsCreated: 12, entityTypesAdded: 3 } }}
-      translations={translations}
-    />);
-    expect(screen.getByText('42')).toBeInTheDocument();
-    expect(screen.getByText('Events replayed')).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('renders linked-data import stats nested under result.stats', () => {
-    render(<ImportProgress
-      phase="complete"
-      result={{ stats: { resourcesCreated: 5, annotationsCreated: 12, entityTypesAdded: 3 } }}
-      translations={translations}
-    />);
-    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('does not render result section when result lacks a stats object', () => {
-    const { container } = render(<ImportProgress
-      phase="complete"
-      result={{ resourcesCreated: 5 }}
-      translations={translations}
-    />);
-    expect(container.querySelector('.semiont-exchange__result')).not.toBeInTheDocument();
-  });
-
-  it('renders raw key for unknown stats', () => {
-    render(<ImportProgress
-      phase="complete"
-      result={{ stats: { somethingNew: 7 } }}
-      translations={translations}
-    />);
-    expect(screen.getByText('7')).toBeInTheDocument();
-    expect(screen.getByText('somethingNew')).toBeInTheDocument();
-  });
-
-  it('does not render result section during non-complete phases', () => {
-    const { container } = render(<ImportProgress
-      phase="started"
-      result={{ stats: { eventsReplayed: 42, resourcesCreated: 5, annotationsCreated: 12, entityTypesAdded: 3 } }}
-      translations={translations}
-    />);
-    expect(container.querySelector('.semiont-exchange__result')).not.toBeInTheDocument();
-  });
-});

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

@@ -1,117 +0,0 @@
-/**
- * AdminExchangePage — Backup/Restore admin page
- *
- * Pure React component. All state and handlers passed as props.
- */
-
-import React from 'react';
-import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
-import { ExportCard, type ExportCardTranslations } from './ExportCard';
-import { ImportCard, type ImportCardProps, type ImportCardTranslations } from './ImportCard';
-import { ImportProgress, type ImportProgressTranslations } from './ImportProgress';
-
-export interface AdminExchangePageTranslations {
-  title: string;
-  subtitle: string;
-  export: ExportCardTranslations;
-  import: ImportCardTranslations;
-  progress: ImportProgressTranslations;
-}
-
-export interface AdminExchangePageProps {
-  // Backup
-  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: AdminExchangePageTranslations;
-
-  // Component dependencies
-  ToolbarPanels: React.ComponentType<any>;
-  Toolbar: React.ComponentType<any>;
-}
-
-export function AdminExchangePage({
-  onExport,
-  isExporting,
-  onFileSelected,
-  onImport,
-  onCancelImport,
-  selectedFile,
-  preview,
-  isImporting,
-  importPhase,
-  importMessage,
-  importResult,
-  theme,
-  activePanel,
-  translations: t,
-  ToolbarPanels,
-  Toolbar,
-}: AdminExchangePageProps) {
-  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>
-  );
-}

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

@@ -1,35 +0,0 @@
-/**
- * ExportCard — Backup trigger
- *
- * Pure React component. All state and handlers passed as props.
- */
-
-export interface ExportCardTranslations {
-  title: string;
-  description: string;
-  exportButton: string;
-  exporting: string;
-}
-
-export interface ExportCardProps {
-  onExport: () => void;
-  isExporting: boolean;
-  translations: ExportCardTranslations;
-}
-
-export function ExportCard({ onExport, isExporting, translations: t }: ExportCardProps) {
-  return (
-    <div className="semiont-admin__card">
-      <h2 className="semiont-admin__section-title">{t.title}</h2>
-      <p className="semiont-admin__section-description">{t.description}</p>
-
-      <button
-        className="semiont-exchange__button semiont-exchange__button--primary"
-        onClick={onExport}
-        disabled={isExporting}
-      >
-        {isExporting ? t.exporting : t.exportButton}
-      </button>
-    </div>
-  );
-}

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