@osfarm/itineraire-technique 1.1.19 → 1.2.0

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

@@ -0,0 +1,90 @@
+/**
+ * Exemple d'utilisation avec Next.js App Router
+ * Fichier: app/itineraire/page.tsx
+ */
+
+'use client';
+
+import { TikaRenderer } from '@osfarm/itineraire-technique/react';
+import { useEffect, useState } from 'react';
+import type { ItineraireData } from '@osfarm/itineraire-technique/react';
+
+export default function ItinerairePage() {
+  const [data, setData] = useState<ItineraireData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Charger les données depuis votre API ou fichier JSON
+    fetch('/test/test.json')
+      .then(response => {
+        if (!response.ok) throw new Error('Erreur de chargement');
+        return response.json();
+      })
+      .then(data => {
+        setData(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  const handleItemClick = (itemId: string, event: Event) => {
+    console.log('Élément cliqué:', itemId);
+    // Vous pouvez ajouter votre logique ici (modal, navigation, etc.)
+  };
+
+  const handleItemHover = (itemId: string, event: Event) => {
+    console.log('Survol:', itemId);
+  };
+
+  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" role="alert">
+          Erreur: {error}
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="container py-5">
+        <div className="alert alert-info" role="alert">
+          Aucune donnée à afficher
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container-fluid py-5">
+      <div className="row">
+        <div className="col-12">
+          <h1 className="mb-4">{data.title}</h1>
+          <TikaRenderer
+            data={data}
+            width="100%"
+            height="auto"
+            onItemClick={handleItemClick}
+            onItemHover={handleItemHover}
+            className="shadow-sm"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/js/chart-render.js

@@ -117,6 +117,10 @@ class RotationRenderer {
         }
     }
 
+    resize() {
+        this.chart.resize();
+    }
+    
     getElementID(element) {
         return element.classList.values().find(item => item.match(/Intervention_[0-9]+_[0-9]+|Step_[0-9]+/));
     }
@@ -220,7 +224,8 @@ class RotationRenderer {
 
             grid: {
                 height: self.barHeight * 3,
-                right: 6
+                right: 6,
+                left: 6
             },
 
             xAxis: {

package/package.json

@@ -1,16 +1,89 @@
 {
   "name": "@osfarm/itineraire-technique",
-  "version": "1.1.19",
-  "description": "A visualisation tool to show agricultural technical itineraries based on Echarts",
-  "main": "editor.html",
+  "version": "1.2.0",
+  "description": "A visualisation tool to show agricultural technical itineraries based on Echarts - with React/Next.js components",
+  "main": "js/chart-render.js",
+  "types": "react/types.ts",
+  "exports": {
+    ".": {
+      "import": "./js/chart-render.js",
+      "require": "./js/chart-render.js"
+    },
+    "./react": {
+      "import": "./react/index.ts",
+      "require": "./react/index.ts",
+      "types": "./react/types.ts"
+    },
+    "./react/TikaRenderer": {
+      "import": "./react/TikaRenderer.jsx",
+      "require": "./react/TikaRenderer.jsx"
+    },
+    "./react/TikaEditor": {
+      "import": "./react/TikaEditor.jsx",
+      "require": "./react/TikaEditor.jsx"
+    },
+    "./css/*": "./css/*",
+    "./js/*": "./js/*"
+  },
+  "files": [
+    "js",
+    "css",
+    "react",
+    "examples",
+    "test",
+    "images",
+    "*.html",
+    "LICENSE",
+    "README.md"
+  ],
   "scripts": {
     "build:scss": "sass --style=compressed scss/styles-editor.scss css/styles-editor.css && sass --style=compressed scss/styles-rendering.scss css/styles-rendering.css",
     "dev:scss": "sass scss/styles-editor.scss css/styles-editor.css && sass scss/styles-rendering.scss css/styles-rendering.css",
     "watch:scss": "sass --watch scss/styles-editor.scss:css/styles-editor.css scss/styles-rendering.scss:css/styles-rendering.css",
     "build": "npm run build:scss",
-    "start": "npm run watch:scss"
+    "start": "npm run watch:scss",
+    "setup:react": "bash scripts/setup-react.sh || powershell -ExecutionPolicy Bypass -File scripts/setup-react.ps1",
+    "postinstall": "echo '\n✨ Pour utiliser avec React/Next.js, exécutez: npm run setup:react\n'"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "sass": "^1.85.1"
-  }
+    "sass": "^1.85.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/osfarm/itineraire-technique"
+  },
+  "homepage": "https://www.osfarm.org/itineraire-technique/",
+  "bugs": {
+    "url": "https://github.com/osfarm/itineraire-technique/issues"
+  },
+  "license": "MIT",
+  "keywords": [
+    "agriculture",
+    "echarts",
+    "visualization",
+    "farming",
+    "itineraire-technique",
+    "TIKA",
+    "react",
+    "nextjs",
+    "technical-itinerary",
+    "crop-rotation"
+  ]
 }

package/react/QUICKSTART.md

@@ -0,0 +1,172 @@
+# Quick Start - React/Next.js
+
+Guide rapide pour intégrer `@osfarm/itineraire-technique` dans votre projet React ou Next.js.
+
+## Installation (5 minutes)
+
+### Étape 1 : Installer le package
+
+```bash
+npm install @osfarm/itineraire-technique
+# ou
+yarn add @osfarm/itineraire-technique
+# ou
+pnpm add @osfarm/itineraire-technique
+```
+
+### Étape 2 : Copier les fichiers statiques
+
+```bash
+npm run setup:react
+```
+
+Ce script copie automatiquement les fichiers JS, CSS et de test dans votre dossier `public/`.
+
+### Étape 3 : Ajouter les dépendances CDN
+
+**Pour Next.js App Router** : Créez ou modifiez `app/layout.tsx` :
+
+```tsx
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="fr">
+      <head>
+        <script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-umd-min.js"></script>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" />
+        
+        <script src="/js/chart-render.js"></script>
+        <link href="/css/styles-rendering.css" rel="stylesheet" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+**Pour Next.js Pages Router** : Créez ou modifiez `pages/_document.tsx` (voir [exemple complet](../examples/nextjs-_document.tsx))
+
+## Utilisation - Visualiseur Simple
+
+Créez un composant pour afficher un itinéraire :
+
+```tsx
+'use client'; // Pour Next.js App Router uniquement
+
+import { TikaRenderer } from '@osfarm/itineraire-technique/react';
+import { useEffect, useState } from 'react';
+
+export default function MyItineraire() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    // Charger les données de test
+    fetch('/test/test.json')
+      .then(res => res.json())
+      .then(setData);
+  }, []);
+
+  if (!data) return <div>Chargement...</div>;
+
+  return (
+    <div className="container">
+      <h1>{data.title}</h1>
+      <TikaRenderer data={data} />
+    </div>
+  );
+}
+```
+
+## Utilisation - Éditeur Simple
+
+```tsx
+'use client';
+
+import { useItineraire } from '@osfarm/itineraire-technique/react';
+import { TikaRenderer } from '@osfarm/itineraire-technique/react';
+
+export default function MyEditor() {
+  const { data, addStep, exportToJson } = useItineraire({
+    title: "Ma rotation",
+    options: { view: "horizontal", show_transcript: true },
+    steps: []
+  });
+
+  const handleAddCrop = () => {
+    addStep({
+      id: crypto.randomUUID(),
+      name: 'Nouvelle culture',
+      startDate: new Date().toISOString(),
+      endDate: new Date(Date.now() + 90*24*60*60*1000).toISOString(),
+      color: '#4CAF50',
+      interventions: []
+    });
+  };
+
+  return (
+    <div className="container">
+      <button className="btn btn-primary" onClick={handleAddCrop}>
+        Ajouter une culture
+      </button>
+      <button className="btn btn-secondary" onClick={() => console.log(exportToJson())}>
+        Exporter JSON
+      </button>
+      
+      {data && <TikaRenderer data={data} />}
+    </div>
+  );
+}
+```
+
+## TypeScript Support
+
+Types inclus ! Importez-les directement :
+
+```tsx
+import type { ItineraireData, Step, Intervention } from '@osfarm/itineraire-technique/react';
+
+const myRotation: ItineraireData = {
+  title: "Ma rotation bio",
+  options: {
+    view: "horizontal",
+    show_transcript: true
+  },
+  steps: []
+};
+```
+
+## Exemples Complets
+
+Consultez le dossier [`examples/`](../examples/) pour :
+- ✅ Visualiseur Next.js App Router
+- ✅ Éditeur Next.js App Router  
+- ✅ Configuration `_document.tsx`
+- ✅ API Routes pour sauvegarder/charger des données
+
+## Troubleshooting
+
+### "RotationRenderer is not defined"
+
+➡️ Vérifiez que `/js/chart-render.js` est bien chargé dans votre HTML/layout
+➡️ Utilisez le hook `useItineraireDependencies` pour vérifier le chargement
+
+### Les styles ne s'appliquent pas
+
+➡️ Assurez-vous d'avoir chargé `/css/styles-rendering.css`
+➡️ Vérifiez que Bootstrap CSS est aussi chargé
+
+### Erreur "use client" manquant
+
+➡️ Ajoutez `'use client';` en haut de vos composants qui utilisent des hooks React
+
+## Documentation Complète
+
+📚 [Documentation React complète](README.md)
+
+## Besoin d'aide ?
+
+- 🐛 [Signaler un bug](https://github.com/osfarm/itineraire-technique/issues)
+- 💬 [Questions et discussions](https://github.com/osfarm/itineraire-technique/discussions)
+- 📖 [Documentation Triple Performance](https://wiki.tripleperformance.fr/)

package/react/README.md

@@ -0,0 +1,305 @@
+# Utilisation avec React et Next.js
+
+Ce package peut être utilisé dans des applications React et Next.js. Voici comment l'intégrer.
+
+## Installation
+
+```bash
+npm install @osfarm/itineraire-technique
+```
+
+## Dépendances à inclure
+
+Les composants React dépendent de plusieurs bibliothèques externes qui doivent être chargées. Vous avez deux options :
+
+### Option 1 : Via CDN (recommandé pour Next.js)
+
+Dans votre `_document.tsx` ou `_app.tsx` (Next.js) ou dans votre `index.html` (React) :
+
+```tsx
+// pages/_document.tsx (Next.js)
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        {/* ECharts */}
+        <script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.js"></script>
+        
+        {/* jQuery */}
+        <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 */}
+        <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-umd-min.js"></script>
+        
+        {/* Bootstrap (pour l'éditeur) */}
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+        
+        {/* Font Awesome */}
+        <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" />
+        
+        {/* Scripts TIKA */}
+        <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 */}
+        <link href="/styles-rendering.css" rel="stylesheet" />
+        <link href="/styles-editor.css" rel="stylesheet" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+```
+
+### Option 2 : Via NPM
+
+```bash
+npm install echarts jquery jquery-ui underscore bootstrap
+```
+
+Puis importez-les dans votre application.
+
+## Copier les fichiers statiques
+
+Copiez les fichiers JS et CSS depuis `node_modules/@osfarm/itineraire-technique/` vers votre dossier `public/` :
+
+```bash
+# Créer les dossiers
+mkdir -p public/js public/css
+
+# Copier les fichiers JS
+cp node_modules/@osfarm/itineraire-technique/js/*.js public/
+
+# Copier les fichiers CSS
+cp node_modules/@osfarm/itineraire-technique/css/*.css public/
+```
+
+## Utilisation du composant de visualisation
+
+```tsx
+'use client'; // Pour Next.js App Router
+
+import { TikaRenderer } from '@osfarm/itineraire-technique/react';
+import { useEffect, useState } from 'react';
+
+export default function ItinerairePage() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Charger vos données depuis une API ou un fichier
+    fetch('/api/itineraire')
+      .then(res => res.json())
+      .then(data => {
+        setData(data);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) return <div>Chargement...</div>;
+  if (!data) return <div>Aucune donnée</div>;
+
+  return (
+    <div className="container">
+      <h1>Itinéraire Technique</h1>
+      <TikaRenderer 
+        data={data}
+        width="100%"
+        height="600px"
+        onItemClick={(itemId, event) => {
+          console.log('Item clicked:', itemId);
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## Utilisation du composant éditeur
+
+```tsx
+'use client';
+
+import { TikaEditor } from '@osfarm/itineraire-technique/react';
+import { useState } from 'react';
+
+export default function EditorPage() {
+  const [data, setData] = useState({
+    title: "Ma rotation",
+    options: {
+      view: "horizontal",
+      show_transcript: true,
+      title_top_interventions: "Cultures principales",
+      title_bottom_interventions: "Couverts",
+      title_steps: "Rotation",
+      region: "France"
+    },
+    steps: []
+  });
+
+  const handleSave = (newData) => {
+    console.log('Données sauvegardées:', newData);
+    setData(newData);
+    
+    // Envoyer à votre API
+    fetch('/api/itineraire', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(newData)
+    });
+  };
+
+  const handleExport = (data) => {
+    // Télécharger le JSON
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'itineraire.json';
+    a.click();
+  };
+
+  return (
+    <div className="container">
+      <h1>Éditeur d'Itinéraire Technique</h1>
+      <TikaEditor
+        initialData={data}
+        onSave={handleSave}
+        onExport={handleExport}
+        enableAutoSave={true}
+        autoSaveInterval={10000}
+      />
+    </div>
+  );
+}
+```
+
+## Utilisation avec le hook personnalisé
+
+```tsx
+'use client';
+
+import { useItineraire } from '@osfarm/itineraire-technique/react';
+import { TikaRenderer } from '@osfarm/itineraire-technique/react';
+
+export default function MyComponent() {
+  const {
+    data,
+    loading,
+    error,
+    addStep,
+    updateStep,
+    deleteStep,
+    exportToJson
+  } = useItineraire(initialData);
+
+  const handleAddStep = () => {
+    const newStep = {
+      id: crypto.randomUUID(),
+      name: 'Nouvelle culture',
+      startDate: new Date().toISOString(),
+      endDate: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString(),
+      color: '#4CAF50',
+      interventions: []
+    };
+    addStep(newStep);
+  };
+
+  if (loading) return <div>Chargement...</div>;
+  if (error) return <div>Erreur: {error.message}</div>;
+  if (!data) return <div>Aucune donnée</div>;
+
+  return (
+    <div>
+      <button onClick={handleAddStep}>Ajouter une étape</button>
+      <button onClick={() => console.log(exportToJson())}>Exporter JSON</button>
+      <TikaRenderer data={data} />
+    </div>
+  );
+}
+```
+
+## TypeScript
+
+Les types TypeScript sont inclus. Importez-les depuis le package :
+
+```tsx
+import type { 
+  ItineraireData, 
+  Step, 
+  Intervention 
+} from '@osfarm/itineraire-technique/react';
+
+const myData: ItineraireData = {
+  title: "Ma rotation",
+  options: {
+    view: "horizontal",
+    show_transcript: true
+  },
+  steps: []
+};
+```
+
+## Configuration Next.js
+
+Si vous utilisez Next.js 13+ avec App Router, assurez-vous que vos composants sont marqués avec `'use client'` car ils utilisent des hooks React et accèdent au DOM.
+
+### next.config.js
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Permettre les scripts externes
+  experimental: {
+    externalDir: true
+  }
+}
+
+module.exports = nextConfig
+```
+
+## Exemples complets
+
+Consultez le dossier `examples/` pour des exemples complets d'intégration avec :
+- Next.js App Router
+- Next.js Pages Router
+- Create React App
+- Vite + React
+
+## Troubleshooting
+
+### "RotationRenderer is not defined"
+
+Assurez-vous que `chart-render.js` est chargé avant le rendu de votre composant. Utilisez `useItineraireDependencies` pour vérifier :
+
+```tsx
+import { useItineraireDependencies } from '@osfarm/itineraire-technique/react';
+
+function MyComponent() {
+  const { loaded, error } = useItineraireDependencies();
+  
+  if (!loaded) return <div>Chargement des dépendances...</div>;
+  if (error) return <div>Erreur: {error.message}</div>;
+  
+  return <TikaRenderer data={data} />;
+}
+```
+
+### Problèmes de styles
+
+Assurez-vous que les fichiers CSS sont bien importés :
+- `styles-rendering.css` pour le visualiseur
+- `styles-editor.css` pour l'éditeur
+- Bootstrap pour l'interface de l'éditeur