initial commit

frontend/src/features/help/components/WelcomeTour.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { TourGuide } from "./TourGuide";
+import { useHelpStore } from "../lib/help-store";
+import { WELCOME_TOUR_STEPS } from "../lib/tours";
+
+export function WelcomeTour() {
+  const { hasSeenWelcomeTour, autoShowTours, markTourAsSeen } = useHelpStore();
+
+  // Ne pas afficher si déjà vu ou si les tours sont désactivés
+  if (hasSeenWelcomeTour || !autoShowTours) {
+    return null;
+  }
+
+  const handleComplete = () => {
+    markTourAsSeen("welcome");
+  };
+
+  const handleSkip = () => {
+    markTourAsSeen("welcome");
+  };
+
+  return (
+    <TourGuide
+      steps={WELCOME_TOUR_STEPS}
+      open={!hasSeenWelcomeTour && autoShowTours}
+      onOpenChange={(open) => {
+        if (!open) {
+          markTourAsSeen("welcome");
+        }
+      }}
+      onComplete={handleComplete}
+      onSkip={handleSkip}
+      closeOnOutsideClick={false}
+      showProgress={true}
+    />
+  );
+}
+
+export function CorrelationTour() {
+  const { hasSeenCorrelationTour, autoShowTours, markTourAsSeen } = useHelpStore();
+
+  if (hasSeenCorrelationTour || !autoShowTours) {
+    return null;
+  }
+
+  // Ce tour sera déclenché manuellement depuis l'onglet corrélation
+  return null;
+}
+
+export function RegressionTour() {
+  const { hasSeenRegressionTour, autoShowTours, markTourAsSeen } = useHelpStore();
+
+  if (hasSeenRegressionTour || !autoShowTours) {
+    return null;
+  }
+
+  // Ce tour sera déclenché manuellement depuis la config de régression
+  return null;
+}
+
+export function OutlierTour() {
+  const { hasSeenOutlierTour, autoShowTours, markTourAsSeen } = useHelpStore();
+
+  if (hasSeenOutlierTour || !autoShowTours) {
+    return null;
+  }
+
+  // Ce tour sera déclenché manuellement depuis la grille
+  return null;
+}