@orchestra/wiki-ui

Une solution UI de wiki légère en React avec support Markdown, inspirée du design IBM Carbon.

Fonctionnalités

Visualisation

• Sidebar avec liste des pages (Home + pages personnalisées)
• Rendu Markdown avec support GFM (GitHub Flavored Markdown)
• Cache intelligent via Zustand + sessionStorage
• Navigation fluide entre les pages

Édition

• Éditeur Markdown intégré
• Mode édition/visualisation avec basculement facile
• Sauvegarde avec confirmation
• Discard pour annuler les modifications

Gestion des pages

• Création de nouvelles pages via modal
• Suppression avec confirmation (sauf page Home)
• Affichage automatique de l'index après suppression de la page active

Installation

npm install @orchestra/wiki-ui

Ou avec yarn:

yarn add @orchestra/wiki-ui

Utilisation

Import du composant

import { Wiki } from '@orchestra/wiki-ui';
import '@orchestra/wiki-ui/dist/wiki.css';

const config = {
  index: 'index.md',
  pages: ['page1.md', 'page2.md']
};

const loadPage = async (pageName: string): Promise<string> => {
  // Votre logique de chargement
  return await fetch(`/api/pages/${pageName}`).then(r => r.text());
};

const savePage = async (pageName: string, content: string): Promise<void> => {
  // Votre logique de sauvegarde
  await fetch(`/api/pages/${pageName}`, {
    method: 'POST',
    body: content
  });
};

const deletePage = async (pageName: string): Promise<void> => {
  // Votre logique de suppression
  await fetch(`/api/pages/${pageName}`, { method: 'DELETE' });
};

<Wiki
  config={config}
  onLoadPage={loadPage}
  onSavePage={savePage}
  onDeletePage={deletePage}
/>

API

Props du composant Wiki

| Prop | Type | Description | |------|------|-------------| | config | WikiConfig | Configuration avec index, liste des pages et largeur du sidebar | | onLoadPage | (pageName: string) => Promise<string> | Fonction de chargement d'une page | | onSavePage | (pageName: string, content: string) => Promise<void> | Fonction de sauvegarde | | onDeletePage | (pageName: string) => Promise<void> | Fonction de suppression |

WikiConfig

interface WikiConfig {
  index: string;           // Page d'accueil (ex: 'index.md')
  pages: string[];         // Liste des pages
  sidebarWidth?: number;   // Largeur du sidebar en pixels (défaut: 256)
}

Composants exportés

• Wiki - Composant principal
• Sidebar - Barre latérale
• MarkdownEditor - Éditeur Markdown
• MarkdownViewer - Visualiseur Markdown
• Modal - Composant modal
• useWikiStore - Hook Zustand pour le state management

Structure du projet

src/
├── components/
│   ├── Wiki.tsx              # Composant principal
│   ├── Sidebar.tsx           # Barre latérale avec liste des pages
│   ├── MarkdownViewer.tsx    # Visualiseur Markdown
│   ├── MarkdownEditor.tsx    # Éditeur Markdown
│   └── Modal.tsx             # Composant modal réutilisable
├── store/
│   └── wikiStore.ts          # Store Zustand avec cache
├── styles/
│   └── wiki.css              # Styles IBM Carbon
├── types.ts                  # Définitions TypeScript
├── App.tsx                   # Application exemple
└── main.tsx                  # Point d'entrée

Fonctionnalités avancées

Sidebar personnalisable

const config = {
  index: 'index.md',
  pages: ['page1.md', 'page2.md'],
  sidebarWidth: 320, // Largeur personnalisée
};

Double-clic pour éditer

Double-cliquez sur le contenu en mode lecture pour passer en mode édition.

Retour à la ligne automatique

L'éditeur supporte le word wrap automatique sans scroll horizontal.

Cache intelligent

Le contenu des pages est mis en cache automatiquement pour une navigation fluide.

Technologies

• React 18 - Framework UI
• TypeScript - Typage statique
• Zustand - Gestion d'état avec persistence
• React Markdown - Rendu Markdown avec support GFM
• @uiw/react-markdown-editor - Éditeur Markdown basé sur CodeMirror
• Carbon Icons - Icônes IBM Carbon
• Vite - Build tool

Style

Le design s'inspire du système IBM Carbon avec :

• Palette de couleurs épurée
• Typographie IBM Plex
• Animations fluides (70ms cubic-bezier)
• Espacement cohérent
• Interface minimaliste et professionnelle

Développement

Pour contribuer au développement :

# Cloner le repository
git clone [email protected]:intergrations/orchestra/ui/wiki.git
cd wiki

# Installer les dépendances
npm install

# Démarrer en mode développement
npm run dev

# Build de la bibliothèque
npm run build:lib

Publication

• Voir NPM_PUBLISH.md pour publier sur npm public
• Voir PUBLISH.md pour publier sur AWS CodeArtifact

Licence

MIT