@semiont/react-ui 0.2.45 → 0.3.0

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

@@ -0,0 +1,148 @@
+/**
+ * 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

@@ -0,0 +1,106 @@
+/**
+ * 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…',
+  phaseEntityTypes: 'Adding entity types…',
+  phaseResources: 'Creating resources…',
+  phaseAnnotations: 'Creating annotations…',
+  phaseComplete: 'Restore complete',
+  phaseError: 'Restore failed',
+  hashChainValid: 'Hash chain valid',
+  hashChainInvalid: 'Hash chain invalid',
+  streams: 'Event streams',
+  events: 'Events',
+  blobs: 'Content blobs',
+};
+
+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="resources" message="Processing resource 3/10" translations={translations} />);
+    expect(screen.getByText('Processing resource 3/10')).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 result stats', () => {
+    render(<ImportProgress
+      phase="complete"
+      result={{ stats: { streams: 5, events: 42, blobs: 3 } }}
+      translations={translations}
+    />);
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('Event streams')).toBeInTheDocument();
+    expect(screen.getByText('42')).toBeInTheDocument();
+    expect(screen.getByText('Events')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('Content blobs')).toBeInTheDocument();
+  });
+
+  it('renders valid hash chain badge', () => {
+    const { container } = render(<ImportProgress
+      phase="complete"
+      result={{ hashChainValid: true }}
+      translations={translations}
+    />);
+    expect(screen.getByText('Hash chain valid')).toBeInTheDocument();
+    expect(container.querySelector('.semiont-exchange__hash-badge--valid')).toBeInTheDocument();
+  });
+
+  it('renders invalid hash chain badge', () => {
+    const { container } = render(<ImportProgress
+      phase="complete"
+      result={{ hashChainValid: false }}
+      translations={translations}
+    />);
+    expect(screen.getByText('Hash chain invalid')).toBeInTheDocument();
+    expect(container.querySelector('.semiont-exchange__hash-badge--invalid')).toBeInTheDocument();
+  });
+
+  it('does not render result section during non-complete phases', () => {
+    const { container } = render(<ImportProgress
+      phase="resources"
+      result={{ stats: { streams: 1, events: 5, blobs: 0 } }}
+      translations={translations}
+    />);
+    expect(container.querySelector('.semiont-exchange__result')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,120 @@
+/**
+ * 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 '../../../hooks/usePanelBrowse';
+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';
+  showLineNumbers: boolean;
+  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,
+  showLineNumbers,
+  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}
+          showLineNumbers={showLineNumbers}
+        />
+        <Toolbar
+          context="simple"
+          activePanel={activePanel}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+/**
+ * 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

@@ -0,0 +1,188 @@
+/**
+ * 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';
+
+export interface ImportPreview {
+  format: string;
+  version: number;
+  sourceUrl: string;
+  stats: Record<string, number>;
+}
+
+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

@@ -0,0 +1,86 @@
+/**
+ * ImportProgress — Shows SSE-driven progress during restore
+ *
+ * Pure React component. All state passed as props.
+ */
+
+export interface ImportProgressTranslations {
+  phaseStarted: string;
+  phaseEntityTypes: string;
+  phaseResources: string;
+  phaseAnnotations: string;
+  phaseComplete: string;
+  phaseError: string;
+  hashChainValid: string;
+  hashChainInvalid: string;
+  streams: string;
+  events: string;
+  blobs: string;
+}
+
+export interface ImportProgressProps {
+  phase: string;
+  message?: string;
+  result?: Record<string, unknown>;
+  translations: ImportProgressTranslations;
+}
+
+const PHASE_LABELS: Record<string, keyof ImportProgressTranslations> = {
+  started: 'phaseStarted',
+  'entity-types': 'phaseEntityTypes',
+  resources: 'phaseResources',
+  annotations: 'phaseAnnotations',
+  complete: 'phaseComplete',
+  error: 'phaseError',
+};
+
+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';
+
+  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 && result && (
+        <div className="semiont-exchange__result">
+          {result.stats != null && typeof result.stats === 'object' && (
+            <>
+              {Object.entries(result.stats as Record<string, number>).map(([key, value]) => {
+                const label = key === 'streams' ? t.streams
+                  : key === 'events' ? t.events
+                  : key === 'blobs' ? t.blobs
+                  : key;
+                return (
+                  <div key={key} className="semiont-exchange__result-stat">
+                    <span className="semiont-exchange__result-value">{value}</span>
+                    <span className="semiont-exchange__result-label">{label}</span>
+                  </div>
+                );
+              })}
+            </>
+          )}
+
+          {result.hashChainValid !== undefined && (
+            <div className={`semiont-exchange__hash-badge${result.hashChainValid ? ' semiont-exchange__hash-badge--valid' : ' semiont-exchange__hash-badge--invalid'}`}>
+              {result.hashChainValid ? t.hashChainValid : t.hashChainInvalid}
+            </div>
+          )}
+        </div>
+      )}
+
+      {isError && message && (
+        <p className="semiont-exchange__error-message">{message}</p>
+      )}
+    </div>
+  );
+}