npm package: @orsetra/wiki-ui
Description: A React Wiki component
Author: orsetra Team
Latest version: 0.19.10

# @orchestra/wiki-ui

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

[![npm version](https://img.shields.io/npm/v/@orchestra/wiki-ui.svg)](https://www.npmjs.com/package/@orchestra/wiki-ui)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 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

```bash
npm install @orchestra/wiki-ui
```

Ou avec yarn:

```bash
yarn add @orchestra/wiki-ui
```

## Utilisation

### Import du composant

```tsx
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

```typescript
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

```tsx
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 :

```bash
# Cloner le repository
git clone git@gitlab.com: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](./NPM_PUBLISH.md) pour publier sur npm public
- Voir [PUBLISH.md](./PUBLISH.md) pour publier sur AWS CodeArtifact

## Licence

MIT