Report Generator Widget

Widget web de génération de rapports, construit avec Stencil sous forme de Web Component autonome.

Ce widget guide l'utilisateur à travers un processus en 3 étapes pour générer un rapport :

1. Chargement des ressources (logo, page de garde, modèle)
2. Plan du rapport (structure et sections)
3. Modifications et validation (prévisualisation et génération finale)

Stack technique

| Outil | Version | |---|---| | Stencil | ^4.27.1 | | TypeScript | via Stencil | | Jest | ^29.7.0 | | Puppeteer | ^24.3.0 (E2E) |

Prérequis

• Node.js >= 18.16.0 (LTS recommandé)
• npm >= 9

Installation

npm install

Si Puppeteer pose problème au téléchargement de Chrome, utiliser :

PUPPETEER_SKIP_DOWNLOAD=true npm install

Commandes

| Commande | Description | |---|---| | npm start | Lance le serveur de dev avec hot-reload (http://localhost:3334) | | npm run build | Build de production (output dans dist/) | | npm test | Lance les tests unitaires et E2E | | npm run test.watch | Lance les tests en mode watch | | npm run generate | Génère un nouveau composant Stencil |

Structure du projet

report-generator-widget/
├── src/
│   ├── components/
│   │   └── my-component/
│   │       └── report-generator/
│   │           ├── report-generator.tsx    # Composant principal
│   │           └── report-generator.css    # Styles (Shadow DOM)
│   └── index.html                          # Page de test
├── stencil.config.ts
└── package.json

Composant : <ali-report-generator>

Web Component autonome utilisable dans n'importe quel framework ou en HTML simple.

Utilisation en HTML

<script type="module" src="dist/report-generator-widget/report-generator-widget.esm.js"></script>

<ali-report-generator></ali-report-generator>

Utilisation dans un framework (React, Vue, Angular...)

import 'report-generator-widget';

// Puis dans le template / JSX :
<ali-report-generator></ali-report-generator>

Features développées

Etape 1 — Chargement des ressources

• Stepper visuel à 3 étapes avec indicateur d'étape active / complétée et lignes de connexion
• Upload de 3 ressources :
  • Logo — formats acceptés : .jpg, .png, .svg
  • Page de garde — formats acceptés : .jpg, .png, .svg
  • Modèle — format accepté : .docx, .pdf
• Barre de progression indiquant le nombre de fichiers chargés (ex : 2/3)
• Pill buttons pour déclencher le sélecteur de fichier natif
• File chips affichant le nom du fichier avec bouton de suppression
• Validation : le bouton "Continuer" n'est actif que lorsque toutes les ressources sont chargées
• UI dark theme avec design glassmorphism (gradient, backdrop-filter, border translucides)

Etape 2 — Plan du rapport

• Placeholder prévu pour l'éditeur de plan (sections, ordre, options)

Etape 3 — Modifications et validation

• Placeholder prévu pour la prévisualisation et le déclenchement de la génération

Licence

ALI, Natural Solutions