npm - @osfarm/itineraire-technique - Versions diffs - 1.2.0 → 1.2.1 - Mend

@osfarm/itineraire-technique 1.2.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/.github/copilot-instructions.md +56 -0
package/.github/workflows/publish.yml +34 -0
package/README.md +2 -34
package/css/styles-editor.css +1 -1
package/css/styles-editor.css.map +1 -1
package/editor.html +38 -748
package/js/chart-render.js +16 -11
package/js/editor-interventions.js +315 -189
package/js/editor-loader-default.js +238 -0
package/js/editor-loader-itinera.js +135 -0
package/js/{editor-wiki-editor.js → editor-loader-wiki.js} +99 -11
package/js/editor-main.js +752 -0
package/js/intervention.js +12 -0
package/js/step-model.js +69 -0
package/package.json +6 -59
package/scss/styles-editor.scss +145 -0
package/scss/styles-rendering.scss +184 -0
package/examples/README.md +0 -137
package/examples/nextjs-_document.tsx +0 -66
package/examples/nextjs-api-route.ts +0 -122
package/examples/nextjs-app-router-editor.tsx +0 -304
package/examples/nextjs-app-router-viewer.tsx +0 -90
package/js/editor-attributes.js +0 -99
package/js/editor-crops.js +0 -136
package/js/editor-export.js +0 -118
package/react/QUICKSTART.md +0 -172
package/react/README.md +0 -305
package/react/TikaEditor.jsx +0 -212
package/react/TikaRenderer.jsx +0 -116
package/react/hooks.ts +0 -217
package/react/index.ts +0 -19
package/react/types.ts +0 -152

package/react/README.md DELETED Viewed

@@ -1,305 +0,0 @@
-# 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

package/react/TikaEditor.jsx DELETED Viewed

@@ -1,212 +0,0 @@
-/**
- * TikaEditor - Composant React pour éditer un itinéraire technique
- *
- * @example
- * import TikaEditor from '@osfarm/itineraire-technique/react/TikaEditor';
- *
- * function MyComponent() {
- *   const [data, setData] = useState(initialData);
- *
- *   const handleSave = (newData) => {
- *     console.log('Data saved:', newData);
- *     setData(newData);
- *   };
- *
- *   return <TikaEditor initialData={data} onSave={handleSave} />;
- * }
- */
-import React, { useEffect, useRef, useState } from 'react';
-const TikaEditor = ({
-  initialData = null,
-  onSave = null,
-  onExport = null,
-  className = '',
-  showWikiButtons = false,
-  enableAutoSave = false,
-  autoSaveInterval = 5000
-}) => {
-  const containerRef = useRef(null);
-  const editorInitialized = useRef(false);
-  const autoSaveTimer = useRef(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [currentData, setCurrentData] = useState(initialData);
-  // Fonction pour récupérer les données actuelles de l'éditeur
-  const getCurrentData = () => {
-    if (typeof window === 'undefined' || !window.rotation_data) return null;
-    return JSON.parse(JSON.stringify(window.rotation_data));
-  };
-  // Fonction pour sauvegarder
-  const handleSave = () => {
-    const data = getCurrentData();
-    if (data && onSave) {
-      onSave(data);
-      setCurrentData(data);
-    }
-  };
-  // Fonction pour exporter
-  const handleExport = () => {
-    const data = getCurrentData();
-    if (data && onExport) {
-      onExport(data);
-    } else if (data && window.exportToJsonFile) {
-      // Utiliser la fonction d'export native si pas de callback personnalisé
-      window.exportToJsonFile(data);
-    }
-  };
-  // Auto-save
-  useEffect(() => {
-    if (enableAutoSave && onSave) {
-      autoSaveTimer.current = setInterval(() => {
-        handleSave();
-      }, autoSaveInterval);
-      return () => {
-        if (autoSaveTimer.current) {
-          clearInterval(autoSaveTimer.current);
-        }
-      };
-    }
-  }, [enableAutoSave, autoSaveInterval, onSave]);
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    // Vérifier les dépendances
-    const checkDependencies = () => {
-      const missing = [];
-      if (!window.$) missing.push('jQuery');
-      if (!window.echarts) missing.push('ECharts');
-      if (!window._) missing.push('Underscore');
-      if (!window.RotationRenderer) missing.push('chart-render.js');
-      // Vérifier les fonctions de l'éditeur
-      if (!window.refreshAttributesTable) missing.push('editor-attributes.js');
-      if (!window.refreshStepsButtonList) missing.push('editor-crops.js');
-      if (!window.exportToJsonFile) missing.push('editor-export.js');
-      if (!window.refreshInterventionsList) missing.push('editor-interventions.js');
-      return missing;
-    };
-    const missingDeps = checkDependencies();
-    if (missingDeps.length > 0) {
-      console.error('Missing dependencies for TikaEditor:', missingDeps.join(', '));
-      setIsLoading(false);
-      return;
-    }
-    // Initialiser l'éditeur seulement une fois
-    if (!editorInitialized.current && containerRef.current) {
-      editorInitialized.current = true;
-      // Initialiser la structure globale de données si nécessaire
-      if (!window.rotation_data) {
-        window.rotation_data = initialData || {
-          title: "Nouvel itinéraire",
-          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: []
-        };
-      } else if (initialData) {
-        window.rotation_data = initialData;
-      }
-      // Appeler les fonctions d'initialisation de l'éditeur
-      try {
-        if (window.refreshAttributesTable) window.refreshAttributesTable();
-        if (window.refreshStepsButtonList) window.refreshStepsButtonList();
-        if (window.refreshInterventionsList) window.refreshInterventionsList();
-        // Rendre le graphique initial
-        if (window.renderChart) {
-          window.renderChart();
-        }
-        setIsLoading(false);
-      } catch (error) {
-        console.error('Error initializing editor:', error);
-        setIsLoading(false);
-      }
-    }
-    // Exposer les fonctions de save/export via window pour que le HTML interne puisse les appeler
-    window.reactEditorSave = handleSave;
-    window.reactEditorExport = handleExport;
-  }, [initialData]);
-  // Mettre à jour les données si initialData change
-  useEffect(() => {
-    if (initialData && window.rotation_data) {
-      window.rotation_data = initialData;
-      if (window.refreshAttributesTable) window.refreshAttributesTable();
-      if (window.refreshStepsButtonList) window.refreshStepsButtonList();
-      if (window.refreshInterventionsList) window.refreshInterventionsList();
-      if (window.renderChart) window.renderChart();
-    }
-  }, [initialData]);
-  if (isLoading) {
-    return (
-      <div className={`itineraire-editor-loading ${className}`}>
-        <div className="spinner-border" role="status">
-          <span className="visually-hidden">Chargement...</span>
-        </div>
-      </div>
-    );
-  }
-  return (
-    <div ref={containerRef} className={`itineraire-editor ${className}`}>
-      {/* Boutons de contrôle React */}
-      <div className="react-editor-controls mb-3">
-        <div className="btn-group" role="group">
-          {onSave && (
-            <button
-              type="button"
-              className="btn btn-primary"
-              onClick={handleSave}
-            >
-              <i className="fa fa-save"></i> Enregistrer
-            </button>
-          )}
-          {onExport && (
-            <button
-              type="button"
-              className="btn btn-outline-primary"
-              onClick={handleExport}
-            >
-              <i className="fa fa-download"></i> Exporter JSON
-            </button>
-          )}
-        </div>
-      </div>
-      {/* Le contenu HTML de l'éditeur sera injecté ici via un portail ou iframe */}
-      {/* Pour l'instant, on délègue au HTML existant */}
-      <div id="editor-content-container">
-        {/* L'éditeur HTML existant sera chargé ici */}
-        <iframe
-          src="/editor.html"
-          style={{ width: '100%', height: '800px', border: 'none' }}
-          title="Éditeur d'itinéraire technique"
-        />
-      </div>
-    </div>
-  );
-};
-export default TikaEditor;

package/react/TikaRenderer.jsx DELETED Viewed

@@ -1,116 +0,0 @@
-/**
- * TikaRenderer - Composant React pour visualiser un itinéraire technique
- *
- * @example
- * import TikaRenderer from '@osfarm/itineraire-technique/react/TikaRenderer';
- *
- * function MyComponent() {
- *   const data = { ... }; // Données JSON de l'itinéraire
- *   return <TikaRenderer data={data} />;
- * }
- */
-import React, { useEffect, useRef } from 'react';
-const TikaRenderer = ({
-  data,
-  width = '100%',
-  height = 'auto',
-  className = '',
-  onItemClick = null,
-  onItemHover = null
-}) => {
-  const containerRef = useRef(null);
-  const rendererRef = useRef(null);
-  const divId = useRef(`itk-${Math.random().toString(36).substr(2, 9)}`);
-  useEffect(() => {
-    // Vérifier que les dépendances sont chargées
-    if (typeof window === 'undefined') return;
-    if (!window.RotationRenderer) {
-      console.error('RotationRenderer not loaded. Make sure chart-render.js is included.');
-      return;
-    }
-    if (!window.echarts) {
-      console.error('ECharts not loaded. Make sure ECharts is included.');
-      return;
-    }
-    if (!window.$) {
-      console.error('jQuery not loaded. Make sure jQuery is included.');
-      return;
-    }
-    // Créer le conteneur si nécessaire
-    if (containerRef.current && !containerRef.current.querySelector('.mainITKContainer')) {
-      // Initialiser le renderer
-      try {
-        rendererRef.current = new window.RotationRenderer(divId.current, data);
-        rendererRef.current.render();
-        // Attacher les événements personnalisés si fournis
-        if (onItemClick) {
-          containerRef.current.addEventListener('click', (e) => {
-            const item = e.target.closest('.rotation_item');
-            if (item) {
-              const itemId = item.dataset.id || item.id;
-              onItemClick(itemId, e);
-            }
-          });
-        }
-        if (onItemHover) {
-          containerRef.current.addEventListener('mouseover', (e) => {
-            const item = e.target.closest('.rotation_item');
-            if (item) {
-              const itemId = item.dataset.id || item.id;
-              onItemHover(itemId, e);
-            }
-          });
-        }
-      } catch (error) {
-        console.error('Error initializing RotationRenderer:', error);
-      }
-    }
-    // Cleanup
-    return () => {
-      if (rendererRef.current && rendererRef.current.chart) {
-        try {
-          rendererRef.current.chart.dispose();
-        } catch (error) {
-          console.error('Error disposing chart:', error);
-        }
-      }
-    };
-  }, [data, onItemClick, onItemHover]);
-  // Réagir aux changements de données
-  useEffect(() => {
-    if (rendererRef.current && data) {
-      try {
-        // Recréer le renderer avec les nouvelles données
-        if (rendererRef.current.chart) {
-          rendererRef.current.chart.dispose();
-        }
-        rendererRef.current = new window.RotationRenderer(divId.current, data);
-        rendererRef.current.render();
-      } catch (error) {
-        console.error('Error updating chart data:', error);
-      }
-    }
-  }, [data]);
-  return (
-    <div
-      ref={containerRef}
-      id={divId.current}
-      className={`itineraire-renderer ${className}`}
-      style={{ width, height }}
-    />
-  );
-};
-export default TikaRenderer;