@semiont/react-ui 0.5.28 → 0.5.30

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

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