@semiont/react-ui 0.5.28 → 0.5.30

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

package/src/styles/features/exchange.css

@@ -1,374 +0,0 @@
-/**
- * Exchange (Import/Export) Feature Styles
- */
-
-/* Cards layout */
-.semiont-exchange__cards {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-@media (max-width: 768px) {
-  .semiont-exchange__cards {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Form fields */
-.semiont-exchange__field {
-  margin-bottom: 1rem;
-}
-
-.semiont-exchange__label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--semiont-color-gray-700);
-  margin-bottom: 0.375rem;
-}
-
-[data-theme="dark"] .semiont-exchange__label {
-  color: var(--semiont-color-gray-300);
-}
-
-.semiont-exchange__checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--semiont-color-gray-700);
-  cursor: pointer;
-}
-
-[data-theme="dark"] .semiont-exchange__checkbox-label {
-  color: var(--semiont-color-gray-300);
-}
-
-/* Buttons */
-.semiont-exchange__button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.375rem;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition: background-color var(--semiont-duration-fast),
-              border-color var(--semiont-duration-fast);
-}
-
-.semiont-exchange__button:focus-visible {
-  outline: 2px solid var(--semiont-color-primary-500);
-  outline-offset: 2px;
-}
-
-.semiont-exchange__button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.semiont-exchange__button--primary {
-  background-color: var(--semiont-color-blue-600);
-  color: var(--semiont-color-white);
-}
-
-.semiont-exchange__button--primary:focus-visible {
-  outline: 2px solid var(--semiont-color-blue-400);
-  outline-offset: 2px;
-}
-
-.semiont-exchange__button--primary:hover:not(:disabled) {
-  background-color: var(--semiont-color-blue-700);
-}
-
-[data-theme="dark"] .semiont-exchange__button--primary {
-  background-color: var(--semiont-color-blue-500);
-}
-
-[data-theme="dark"] .semiont-exchange__button--primary:focus-visible {
-  outline: 2px solid var(--semiont-color-blue-300);
-  outline-offset: 2px;
-}
-
-[data-theme="dark"] .semiont-exchange__button--primary:hover:not(:disabled) {
-  background-color: var(--semiont-color-blue-400);
-}
-
-.semiont-exchange__button--secondary {
-  background-color: transparent;
-  color: var(--semiont-color-gray-700);
-  border-color: var(--semiont-color-gray-300);
-}
-
-.semiont-exchange__button--secondary:focus-visible {
-  outline: 2px solid var(--semiont-color-primary-500);
-  outline-offset: 2px;
-}
-
-.semiont-exchange__button--secondary:hover:not(:disabled) {
-  background-color: var(--semiont-color-gray-100);
-}
-
-[data-theme="dark"] .semiont-exchange__button--secondary {
-  color: var(--semiont-color-gray-300);
-  border-color: var(--semiont-color-gray-600);
-}
-
-[data-theme="dark"] .semiont-exchange__button--secondary:focus-visible {
-  outline: 2px solid var(--semiont-color-primary-400);
-  outline-offset: 2px;
-}
-
-[data-theme="dark"] .semiont-exchange__button--secondary:hover:not(:disabled) {
-  background-color: var(--semiont-color-gray-800);
-}
-
-/* Actions row */
-.semiont-exchange__actions {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1rem;
-}
-
-/* Dropzone */
-.semiont-exchange__dropzone {
-  border: 2px dashed var(--semiont-color-gray-300);
-  border-radius: 0.5rem;
-  padding: 2rem;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color var(--semiont-duration-fast),
-              background-color var(--semiont-duration-fast);
-  margin-bottom: 1rem;
-}
-
-.semiont-exchange__dropzone:hover {
-  border-color: var(--semiont-color-blue-400);
-  background-color: var(--semiont-color-blue-50);
-}
-
-.semiont-exchange__dropzone--active {
-  border-color: var(--semiont-color-blue-500);
-  background-color: var(--semiont-color-blue-50);
-}
-
-[data-theme="dark"] .semiont-exchange__dropzone {
-  border-color: var(--semiont-color-gray-600);
-}
-
-[data-theme="dark"] .semiont-exchange__dropzone:hover {
-  border-color: var(--semiont-color-blue-500);
-  background-color: rgba(59, 130, 246, 0.1);
-}
-
-[data-theme="dark"] .semiont-exchange__dropzone--active {
-  border-color: var(--semiont-color-blue-400);
-  background-color: rgba(59, 130, 246, 0.1);
-}
-
-.semiont-exchange__dropzone-text {
-  font-size: 0.875rem;
-  color: var(--semiont-color-gray-500);
-}
-
-[data-theme="dark"] .semiont-exchange__dropzone-text {
-  color: var(--semiont-color-gray-400);
-}
-
-.semiont-exchange__file-info {
-  margin-top: 0.5rem;
-  font-size: 0.75rem;
-  color: var(--semiont-color-gray-600);
-  font-family: var(--semiont-font-mono);
-}
-
-[data-theme="dark"] .semiont-exchange__file-info {
-  color: var(--semiont-color-gray-400);
-}
-
-/* Preview */
-.semiont-exchange__preview {
-  background-color: var(--semiont-color-gray-50);
-  border: 1px solid var(--semiont-color-gray-200);
-  border-radius: 0.375rem;
-  padding: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-[data-theme="dark"] .semiont-exchange__preview {
-  background-color: var(--semiont-color-gray-800);
-  border-color: var(--semiont-color-gray-700);
-}
-
-.semiont-exchange__preview-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.25rem 0;
-  font-size: 0.8125rem;
-}
-
-.semiont-exchange__preview-row + .semiont-exchange__preview-row {
-  border-top: 1px solid var(--semiont-color-gray-200);
-}
-
-[data-theme="dark"] .semiont-exchange__preview-row + .semiont-exchange__preview-row {
-  border-color: var(--semiont-color-gray-700);
-}
-
-.semiont-exchange__preview-label {
-  color: var(--semiont-color-gray-500);
-}
-
-[data-theme="dark"] .semiont-exchange__preview-label {
-  color: var(--semiont-color-gray-400);
-}
-
-.semiont-exchange__preview-value {
-  font-weight: 500;
-  color: var(--semiont-color-gray-900);
-}
-
-[data-theme="dark"] .semiont-exchange__preview-value {
-  color: var(--semiont-color-gray-100);
-}
-
-/* Confirmation dialog */
-.semiont-exchange__confirm {
-  background-color: var(--semiont-color-orange-50);
-  border: 1px solid var(--semiont-color-orange-200);
-  border-radius: 0.375rem;
-  padding: 1rem;
-  margin-top: 1rem;
-}
-
-[data-theme="dark"] .semiont-exchange__confirm {
-  background-color: rgba(251, 146, 60, 0.1);
-  border-color: var(--semiont-color-orange-700);
-}
-
-.semiont-exchange__confirm-title {
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: var(--semiont-color-orange-800);
-  margin-bottom: 0.25rem;
-}
-
-[data-theme="dark"] .semiont-exchange__confirm-title {
-  color: var(--semiont-color-orange-300);
-}
-
-.semiont-exchange__confirm-message {
-  font-size: 0.8125rem;
-  color: var(--semiont-color-orange-700);
-  margin-bottom: 0.75rem;
-}
-
-[data-theme="dark"] .semiont-exchange__confirm-message {
-  color: var(--semiont-color-orange-400);
-}
-
-.semiont-exchange__confirm-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/* Progress */
-.semiont-exchange__progress {
-  background-color: var(--semiont-bg-primary);
-  border: 1px solid var(--semiont-color-gray-200);
-  border-radius: 0.5rem;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-[data-theme="dark"] .semiont-exchange__progress {
-  background-color: var(--semiont-bg-secondary);
-  border-color: var(--semiont-color-gray-700);
-}
-
-.semiont-exchange__phase-label {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--semiont-color-blue-600);
-}
-
-[data-theme="dark"] .semiont-exchange__phase-label {
-  color: var(--semiont-color-blue-400);
-}
-
-.semiont-exchange__phase-label--complete {
-  color: var(--semiont-color-green-600);
-}
-
-[data-theme="dark"] .semiont-exchange__phase-label--complete {
-  color: var(--semiont-color-green-400);
-}
-
-.semiont-exchange__phase-label--error {
-  color: var(--semiont-color-red-600);
-}
-
-[data-theme="dark"] .semiont-exchange__phase-label--error {
-  color: var(--semiont-color-red-400);
-}
-
-.semiont-exchange__progress-message {
-  font-size: 0.8125rem;
-  color: var(--semiont-color-gray-600);
-  margin-top: 0.5rem;
-}
-
-[data-theme="dark"] .semiont-exchange__progress-message {
-  color: var(--semiont-color-gray-400);
-}
-
-/* Result stats */
-.semiont-exchange__result {
-  display: flex;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-}
-
-.semiont-exchange__result-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.semiont-exchange__result-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--semiont-color-gray-900);
-}
-
-[data-theme="dark"] .semiont-exchange__result-value {
-  color: var(--semiont-color-white);
-}
-
-.semiont-exchange__result-label {
-  font-size: 0.75rem;
-  color: var(--semiont-color-gray-500);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-[data-theme="dark"] .semiont-exchange__result-label {
-  color: var(--semiont-color-gray-400);
-}
-
-/* Error message */
-.semiont-exchange__error-message {
-  font-size: 0.875rem;
-  color: var(--semiont-color-red-600);
-  margin-top: 0.5rem;
-}
-
-[data-theme="dark"] .semiont-exchange__error-message {
-  color: var(--semiont-color-red-400);
-}