@osfarm/itineraire-technique 1.1.20 → 1.2.0

package/README.md

@@ -24,10 +24,42 @@ Le visualisateur est fourni avec un éditeur qui permet de créer son propre iti
 Ce visualisateur est avant tout conçu pour être utilisé sur [Triple Performance](https://wiki.tripleperformance.fr/). Vous y trouverez de [nombreux](https://wiki.tripleperformance.fr/wiki/Retours_d%27exp%C3%A9rience) [retours d'expérience](https://wiki.tripleperformance.fr/wiki/Ferme_de_Longueil) documentés avec des données technico-économiques ainsi que les itinéraires techniques associés. Les itinéraires peuvent être créés alors directement dans [Google Spreadsheet](https://wiki.tripleperformance.fr/wiki/Aide:Ins%C3%A9rer_des_graphiques_dans_une_page) grâce à l'[add-on](https://workspace.google.com/marketplace/app/triple_performance/427792115089) spécifiquement conçu pour Google Workspace.
 
 ## Utilisation dans un autre contexte / logiciel
+
 Il est possible d'utiliser cette librairie très facilement dans n'importe quel outil. Le visualisateur a été conçu pour être très facile à intégrer dans une page HTML, il ne dépend que de briques Javascript (Apache Echarts, JQuery et Bootstrap). N'hésitez pas à nous contacter si vous décidez de l'utiliser et à contribuer si vous faites des évolutions !
- 
 
-Pour utiliser le package, le plus simple est d'utiliser npm :
+### 🆕 Composants React/Next.js
+
+**Nouveauté version 1.2.0** : Le projet inclut désormais des composants React/Next.js prêts à l'emploi !
+
+```bash
+npm i @osfarm/itineraire-technique
+```
+
+**Utilisation rapide avec React/Next.js :**
+
+```tsx
+import { TikaRenderer } from '@osfarm/itineraire-technique/react';
+
+function MyComponent() {
+  const data = { /* vos données JSON */ };
+  return <TikaRenderer data={data} />;
+}
+```
+
+**📚 [Documentation complète React/Next.js](react/README.md)**
+
+Consultez le guide complet avec :
+- Composants `TikaRenderer` et `TikaEditor`
+- Hooks personnalisés (`useItineraire`, etc.)
+- Types TypeScript
+- Exemples Next.js App Router et Pages Router
+- Configuration et intégration
+
+**🔗 [Exemples d'intégration](examples/)**
+
+### Utilisation vanilla JS/HTML
+ 
+Pour utiliser le package en JavaScript vanilla, le plus simple est d'utiliser npm :
 
 ```
 npm i @osfarm/itineraire-technique

package/examples/README.md

@@ -0,0 +1,137 @@
+# Exemples d'utilisation
+
+Ce dossier contient des exemples d'intégration du visualisateur d'itinéraires techniques TIKA dans différents contextes.
+
+## Fichiers disponibles
+
+### Next.js
+
+- **`nextjs-app-router-viewer.tsx`** - Exemple de page de visualisation avec Next.js App Router (13+)
+  - Affichage d'un itinéraire technique
+  - Gestion du chargement des données
+  - Événements de clic et survol
+
+- **`nextjs-app-router-editor.tsx`** - Exemple d'éditeur complet avec Next.js App Router
+  - Interface complète d'édition
+  - Ajout/modification/suppression d'étapes
+  - Gestion des interventions
+  - Sauvegarde et export
+
+- **`nextjs-_document.tsx`** - Configuration du document Next.js
+  - Chargement des dépendances CDN
+  - Configuration des scripts et styles
+  - Compatible Pages Router
+
+- **`nextjs-api-route.ts`** - Exemple d'API Routes
+  - Sauvegarde et chargement d'itinéraires
+  - CRUD complet
+  - Gestion des fichiers JSON
+
+## Utilisation
+
+### 1. Copier les exemples
+
+Copiez les fichiers dans votre projet Next.js :
+
+```bash
+# Pour le visualiseur
+cp examples/nextjs-app-router-viewer.tsx app/itineraire/page.tsx
+
+# Pour l'éditeur
+cp examples/nextjs-app-router-editor.tsx app/editor/page.tsx
+
+# Pour la configuration
+cp examples/nextjs-_document.tsx pages/_document.tsx  # Pages Router
+# ou adaptez pour app/layout.tsx (App Router)
+
+# Pour l'API
+cp examples/nextjs-api-route.ts app/api/itineraire/route.ts  # App Router
+# ou pages/api/itineraire.ts (Pages Router)
+```
+
+### 2. Installer les dépendances
+
+```bash
+npm install @osfarm/itineraire-technique
+npm run setup:react
+```
+
+### 3. Adapter à votre projet
+
+Les exemples sont commentés et peuvent être adaptés à vos besoins spécifiques :
+
+- Personnalisez les styles
+- Ajoutez votre logique métier
+- Intégrez avec votre base de données
+- Ajoutez l'authentification
+
+## Structure d'un projet Next.js complet
+
+```
+my-app/
+├── app/                          # App Router (Next.js 13+)
+│   ├── layout.tsx                # Layout principal avec scripts CDN
+│   ├── itineraire/
+│   │   └── page.tsx              # Page de visualisation
+│   ├── editor/
+│   │   └── page.tsx              # Page d'édition
+│   └── api/
+│       └── itineraire/
+│           └── route.ts          # API Routes
+├── public/                       # Fichiers statiques
+│   ├── js/
+│   │   ├── chart-render.js
+│   │   └── editor-*.js
+│   ├── css/
+│   │   ├── styles-rendering.css
+│   │   └── styles-editor.css
+│   └── test/
+│       └── test.json
+├── package.json
+└── tsconfig.json
+```
+
+## Frameworks alternatifs
+
+Bien que ces exemples soient pour Next.js, les composants React sont compatibles avec :
+
+- **Create React App** - Ajoutez les scripts CDN dans `public/index.html`
+- **Vite** - Ajoutez les scripts CDN dans `index.html`
+- **Remix** - Ajoutez les scripts dans `root.tsx`
+- **Gatsby** - Utilisez `gatsby-ssr.js` pour ajouter les scripts
+
+## Support TypeScript
+
+Tous les exemples sont fournis en TypeScript avec les types complets. Si vous utilisez JavaScript, supprimez simplement les annotations de type.
+
+## Personnalisation
+
+### Thème et styles
+
+Vous pouvez personnaliser les styles en :
+
+1. Surchargeant les classes CSS existantes
+2. Modifiant les fichiers SCSS sources
+3. Utilisant la prop `className` des composants
+
+### Événements
+
+Les composants exposent des callbacks pour interagir avec eux :
+
+```tsx
+<TikaRenderer
+  data={data}
+  onItemClick={(id, event) => {
+    // Votre logique
+  }}
+  onItemHover={(id, event) => {
+    // Votre logique
+  }}
+/>
+```
+
+## Besoin d'aide ?
+
+- Consultez la [documentation React](../react/README.md)
+- Consultez le [Quick Start](../react/QUICKSTART.md)
+- Ouvrez une [issue sur GitHub](https://github.com/osfarm/itineraire-technique/issues)

package/examples/nextjs-_document.tsx

@@ -0,0 +1,66 @@
+/**
+ * Exemple de _document.tsx pour Next.js Pages Router
+ * Fichier: pages/_document.tsx
+ */
+
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="fr">
+      <Head>
+        {/* ECharts - Bibliothèque de graphiques */}
+        <script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.js"></script>
+        
+        {/* jQuery et jQuery UI */}
+        <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.14.1/dist/jquery-ui.min.js"></script>
+        <link 
+          rel="stylesheet" 
+          href="https://cdn.jsdelivr.net/npm/jquery-ui@1.14.1/themes/base/jquery-ui.css" 
+        />
+        
+        {/* Underscore.js */}
+        <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-umd-min.js"></script>
+        
+        {/* Bootstrap */}
+        <script 
+          src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
+          integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
+          crossOrigin="anonymous"
+        ></script>
+        <link 
+          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" 
+          rel="stylesheet"
+          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
+          crossOrigin="anonymous"
+        />
+        
+        {/* Font Awesome */}
+        <link 
+          href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" 
+          rel="stylesheet" 
+        />
+        
+        {/* 
+          Scripts TIKA - À copier dans le dossier public/
+          Voir instructions dans react/README.md 
+        */}
+        <script src="/chart-render.js"></script>
+        <script src="/editor-attributes.js"></script>
+        <script src="/editor-interventions.js"></script>
+        <script src="/editor-crops.js"></script>
+        <script src="/editor-export.js"></script>
+        <script src="/editor-wiki-editor.js"></script>
+        
+        {/* Styles TIKA - À copier dans le dossier public/ */}
+        <link href="/styles-rendering.css" rel="stylesheet" />
+        <link href="/styles-editor.css" rel="stylesheet" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

package/examples/nextjs-api-route.ts

@@ -0,0 +1,122 @@
+/**
+ * Exemple d'API route pour sauvegarder/charger des itinéraires
+ * Fichier: app/api/itineraire/route.ts (Next.js App Router)
+ * ou pages/api/itineraire.ts (Next.js Pages Router)
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+// Dossier de stockage des itinéraires
+const ITINERAIRES_DIR = path.join(process.cwd(), 'data', 'itineraires');
+
+// Créer le dossier s'il n'existe pas
+async function ensureDir() {
+  try {
+    await fs.access(ITINERAIRES_DIR);
+  } catch {
+    await fs.mkdir(ITINERAIRES_DIR, { recursive: true });
+  }
+}
+
+// GET - Récupérer un itinéraire
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const id = searchParams.get('id');
+
+  if (!id) {
+    return NextResponse.json({ error: 'ID manquant' }, { status: 400 });
+  }
+
+  try {
+    await ensureDir();
+    const filePath = path.join(ITINERAIRES_DIR, `${id}.json`);
+    const data = await fs.readFile(filePath, 'utf-8');
+    return NextResponse.json(JSON.parse(data));
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Itinéraire non trouvé' },
+      { status: 404 }
+    );
+  }
+}
+
+// POST - Sauvegarder un itinéraire
+export async function POST(request: NextRequest) {
+  try {
+    const data = await request.json();
+    
+    // Validation basique
+    if (!data.title || !data.options || !data.steps) {
+      return NextResponse.json(
+        { error: 'Données invalides' },
+        { status: 400 }
+      );
+    }
+
+    await ensureDir();
+
+    // Générer un ID si nécessaire
+    const id = data.id || `itk-${Date.now()}`;
+    const filePath = path.join(ITINERAIRES_DIR, `${id}.json`);
+
+    // Sauvegarder
+    await fs.writeFile(filePath, JSON.stringify(data, null, 2), 'utf-8');
+
+    return NextResponse.json({ success: true, id });
+  } catch (error) {
+    console.error('Erreur de sauvegarde:', error);
+    return NextResponse.json(
+      { error: 'Erreur de sauvegarde' },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Supprimer un itinéraire
+export async function DELETE(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const id = searchParams.get('id');
+
+  if (!id) {
+    return NextResponse.json({ error: 'ID manquant' }, { status: 400 });
+  }
+
+  try {
+    const filePath = path.join(ITINERAIRES_DIR, `${id}.json`);
+    await fs.unlink(filePath);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Erreur de suppression' },
+      { status: 500 }
+    );
+  }
+}
+
+// Liste de tous les itinéraires (pour Pages Router)
+// Fichier: pages/api/itineraires/list.ts
+export async function listItineraires() {
+  await ensureDir();
+  const files = await fs.readdir(ITINERAIRES_DIR);
+  const jsonFiles = files.filter(f => f.endsWith('.json'));
+  
+  const itineraires = await Promise.all(
+    jsonFiles.map(async (file) => {
+      const content = await fs.readFile(
+        path.join(ITINERAIRES_DIR, file),
+        'utf-8'
+      );
+      const data = JSON.parse(content);
+      return {
+        id: file.replace('.json', ''),
+        title: data.title,
+        stepsCount: data.steps?.length || 0,
+        updatedAt: (await fs.stat(path.join(ITINERAIRES_DIR, file))).mtime
+      };
+    })
+  );
+
+  return itineraires;
+}

package/examples/nextjs-app-router-editor.tsx

@@ -0,0 +1,304 @@
+/**
+ * Exemple d'utilisation de l'éditeur avec Next.js App Router
+ * Fichier: app/editor/page.tsx
+ */
+
+'use client';
+
+import { useItineraire, useItineraireDependencies } from '@osfarm/itineraire-technique/react';
+import { TikaRenderer } from '@osfarm/itineraire-technique/react';
+import { useState } from 'react';
+import type { ItineraireData, Step, Intervention } from '@osfarm/itineraire-technique/react';
+
+export default function EditorPage() {
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveMessage, setSaveMessage] = useState<string | null>(null);
+  
+  // Vérifier que les dépendances sont chargées
+  const { loaded: depsLoaded, error: depsError } = useItineraireDependencies();
+
+  // Données initiales
+  const initialData: ItineraireData = {
+    title: "Nouvelle rotation",
+    options: {
+      view: "horizontal",
+      show_transcript: true,
+      title_top_interventions: "Cultures principales",
+      title_bottom_interventions: "Couverts et CIVE",
+      title_steps: "Rotation",
+      region: "France",
+      show_climate_diagram: false
+    },
+    steps: []
+  };
+
+  const {
+    data,
+    loading,
+    error,
+    addStep,
+    updateStep,
+    deleteStep,
+    addIntervention,
+    deleteIntervention,
+    exportToJson,
+    importFromJson
+  } = useItineraire(initialData);
+
+  // Sauvegarder vers une API
+  const handleSave = async () => {
+    if (!data) return;
+
+    setIsSaving(true);
+    setSaveMessage(null);
+
+    try {
+      const response = await fetch('/api/itineraire', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) throw new Error('Erreur de sauvegarde');
+
+      setSaveMessage('Sauvegarde réussie !');
+      setTimeout(() => setSaveMessage(null), 3000);
+    } catch (err) {
+      setSaveMessage(`Erreur: ${err instanceof Error ? err.message : 'Erreur inconnue'}`);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Exporter en JSON
+  const handleExport = () => {
+    const json = exportToJson();
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `itineraire-${Date.now()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  // Importer depuis JSON
+  const handleImport = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'application/json';
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const content = e.target?.result as string;
+          try {
+            importFromJson(content);
+            setSaveMessage('Import réussi !');
+            setTimeout(() => setSaveMessage(null), 3000);
+          } catch (err) {
+            setSaveMessage(`Erreur d'import: ${err instanceof Error ? err.message : 'Fichier invalide'}`);
+          }
+        };
+        reader.readAsText(file);
+      }
+    };
+    input.click();
+  };
+
+  // Ajouter une nouvelle étape
+  const handleAddStep = () => {
+    const now = new Date();
+    const endDate = new Date(now);
+    endDate.setMonth(endDate.getMonth() + 3);
+
+    const newStep: Step = {
+      id: crypto.randomUUID(),
+      name: `Nouvelle culture ${data?.steps.length ? data.steps.length + 1 : 1}`,
+      startDate: now.toISOString(),
+      endDate: endDate.toISOString(),
+      color: `#${Math.floor(Math.random()*16777215).toString(16)}`,
+      description: '',
+      interventions: []
+    };
+
+    addStep(newStep);
+  };
+
+  // Ajouter une intervention à une étape
+  const handleAddIntervention = (stepId: string) => {
+    const newIntervention: Intervention = {
+      id: crypto.randomUUID(),
+      day: '0',
+      name: 'Nouvelle intervention',
+      type: 'intervention_top',
+      description: ''
+    };
+
+    addIntervention(stepId, newIntervention);
+  };
+
+  if (!depsLoaded) {
+    return (
+      <div className="container py-5 text-center">
+        <div className="spinner-border" role="status">
+          <span className="visually-hidden">Chargement des dépendances...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (depsError) {
+    return (
+      <div className="container py-5">
+        <div className="alert alert-danger">
+          Erreur de chargement: {depsError.message}
+          <br />
+          <small>Assurez-vous que les scripts sont bien chargés dans _document.tsx</small>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="container py-5 text-center">
+        <div className="spinner-border" role="status">
+          <span className="visually-hidden">Chargement...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container py-5">
+        <div className="alert alert-danger">
+          Erreur: {error.message}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container-fluid py-4">
+      {/* En-tête avec boutons d'action */}
+      <div className="row mb-4">
+        <div className="col-12">
+          <div className="d-flex justify-content-between align-items-center">
+            <h1>Éditeur d'Itinéraire Technique</h1>
+            
+            <div className="btn-group" role="group">
+              <button 
+                className="btn btn-primary" 
+                onClick={handleSave}
+                disabled={isSaving}
+              >
+                <i className="fa fa-save"></i> 
+                {isSaving ? ' Sauvegarde...' : ' Sauvegarder'}
+              </button>
+              <button 
+                className="btn btn-outline-secondary" 
+                onClick={handleExport}
+              >
+                <i className="fa fa-download"></i> Exporter JSON
+              </button>
+              <button 
+                className="btn btn-outline-secondary" 
+                onClick={handleImport}
+              >
+                <i className="fa fa-upload"></i> Importer JSON
+              </button>
+            </div>
+          </div>
+
+          {saveMessage && (
+            <div className={`alert mt-3 ${saveMessage.includes('Erreur') ? 'alert-danger' : 'alert-success'}`}>
+              {saveMessage}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Zone d'édition */}
+      <div className="row">
+        <div className="col-lg-3">
+          <div className="card">
+            <div className="card-header d-flex justify-content-between align-items-center">
+              <h5 className="mb-0">Étapes</h5>
+              <button 
+                className="btn btn-sm btn-success" 
+                onClick={handleAddStep}
+              >
+                <i className="fa fa-plus"></i>
+              </button>
+            </div>
+            <div className="card-body">
+              {data?.steps.length === 0 ? (
+                <p className="text-muted text-center">Aucune étape</p>
+              ) : (
+                <div className="list-group">
+                  {data?.steps.map((step) => (
+                    <div key={step.id} className="list-group-item">
+                      <div className="d-flex justify-content-between align-items-center mb-2">
+                        <strong>{step.name}</strong>
+                        <div className="btn-group btn-group-sm">
+                          <button
+                            className="btn btn-outline-primary"
+                            onClick={() => handleAddIntervention(step.id)}
+                            title="Ajouter intervention"
+                          >
+                            <i className="fa fa-plus"></i>
+                          </button>
+                          <button
+                            className="btn btn-outline-danger"
+                            onClick={() => deleteStep(step.id)}
+                            title="Supprimer"
+                          >
+                            <i className="fa fa-trash"></i>
+                          </button>
+                        </div>
+                      </div>
+                      <small className="text-muted">
+                        {new Date(step.startDate).toLocaleDateString()} - 
+                        {new Date(step.endDate).toLocaleDateString()}
+                      </small>
+                      {step.interventions && step.interventions.length > 0 && (
+                        <div className="mt-2">
+                          <small>{step.interventions.length} intervention(s)</small>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="col-lg-9">
+          <div className="card">
+            <div className="card-header">
+              <h5 className="mb-0">Aperçu</h5>
+            </div>
+            <div className="card-body">
+              {data && data.steps.length > 0 ? (
+                <TikaRenderer data={data} width="100%" height="auto" />
+              ) : (
+                <div className="text-center text-muted py-5">
+                  <i className="fa fa-info-circle fa-3x mb-3"></i>
+                  <p>Ajoutez des étapes pour voir l'aperçu</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}