Add tutorial
This commit is contained in:
Arthur Belleville
parent
2e28565b2a
commit
97c50a964c
2 changed files with 328 additions and 1 deletions
244
ui/src/components/TabloTutorial.tsx
Normal file
244
ui/src/components/TabloTutorial.tsx
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
import React, { useState } from "react";
|
||||
import { Button } from "@ui/ui-library/button";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { X, ArrowRight, ArrowLeft, HelpCircle } from "lucide-react";
|
||||
|
||||
interface TutorialStep {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
target?: string;
|
||||
position?: "top" | "bottom" | "left" | "right";
|
||||
action?: () => void;
|
||||
}
|
||||
|
||||
interface TabloTutorialProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onCreateTablo: () => void;
|
||||
}
|
||||
|
||||
const tutorialSteps: TutorialStep[] = [
|
||||
{
|
||||
id: "welcome",
|
||||
title: "Bienvenue sur XTablo ! 🎉",
|
||||
description:
|
||||
"Découvrez comment XTablo peut révolutionner votre façon de gérer vos projets, équipes et collaborations.",
|
||||
},
|
||||
{
|
||||
id: "what-is-tablo",
|
||||
title: "Qu'est-ce qu'un Tablo ?",
|
||||
description:
|
||||
"Un Tablo est un espace de travail collaboratif qui regroupe toutes les fonctionnalités dont vous avez besoin : conversations, planning, documents et plus encore.",
|
||||
},
|
||||
|
||||
{
|
||||
id: "tablo-features",
|
||||
title: "Fonctionnalités des Tablos",
|
||||
description:
|
||||
"Chaque Tablo vous donne accès à :\n• 💬 Conversations en temps réel\n• 📅 Planning partagé\n• 📝 Notes et documents\n• 👥 Gestion d'équipe",
|
||||
},
|
||||
{
|
||||
id: "tablo-status",
|
||||
title: "Gérer le statut des Tablos",
|
||||
description:
|
||||
"Organisez vos projets avec les statuts :\n• 📋 À faire : Projets en attente\n• 🔄 En cours : Projets actifs\n• ✅ Terminé : Projets complétés",
|
||||
},
|
||||
{
|
||||
id: "collaboration",
|
||||
title: "Collaboration d'équipe",
|
||||
description:
|
||||
"Invitez vos collègues dans vos Tablos. Vous serez Admin du Tablo que vous créez, et pourrez inviter d'autres membres en tant qu'invités.",
|
||||
},
|
||||
{
|
||||
id: "navigation",
|
||||
title: "Navigation rapide",
|
||||
description:
|
||||
"Utilisez le clic droit sur un Tablo pour accéder rapidement aux conversations et au planning. Filtrez vos Tablos par statut pour une meilleure organisation.",
|
||||
},
|
||||
{
|
||||
id: "create-first-tablo",
|
||||
title: "Créer votre premier Tablo",
|
||||
description:
|
||||
"Vous êtes maintenant prêt à utiliser XTablo ! Créez votre premier Tablo pour démarrer votre projet.",
|
||||
target: "create-tablo-button",
|
||||
position: "bottom",
|
||||
action: () => {}, // Will be set by the parent component
|
||||
},
|
||||
];
|
||||
|
||||
export const TabloTutorial: React.FC<TabloTutorialProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCreateTablo,
|
||||
}) => {
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
|
||||
const currentStepData = tutorialSteps[currentStep];
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentStep < tutorialSteps.length - 1) {
|
||||
setCurrentStep(currentStep + 1);
|
||||
} else {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrevious = () => {
|
||||
if (currentStep > 0) {
|
||||
setCurrentStep(currentStep - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setCurrentStep(0);
|
||||
localStorage.setItem("xtablo-tutorial-completed", "true");
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleCreateTabloAction = () => {
|
||||
if (currentStepData.id === "create-first-tablo") {
|
||||
onCreateTablo();
|
||||
handleNext();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSkip = () => {
|
||||
setCurrentStep(tutorialSteps.length - 1);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
|
||||
<div
|
||||
className={twMerge(
|
||||
"bg-white dark:bg-gray-800 rounded-xl shadow-2xl",
|
||||
"max-w-2xl w-full mx-4 p-6",
|
||||
"border border-gray-200 dark:border-gray-700"
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
|
||||
<HelpCircle className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
Guide de démarrage
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Étape {currentStep + 1} sur {tutorialSteps.length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-6">
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${((currentStep + 1) / tutorialSteps.length) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{currentStepData.title}
|
||||
</h3>
|
||||
<div className="text-gray-600 dark:text-gray-300 text-lg leading-relaxed whitespace-pre-line">
|
||||
{currentStepData.description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{currentStep > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onPress={handlePrevious}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Précédent
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{currentStep < tutorialSteps.length - 1 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onPress={handleSkip}
|
||||
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
Passer
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{currentStepData.id === "create-first-tablo" ? (
|
||||
<Button
|
||||
onPress={handleCreateTabloAction}
|
||||
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
Créer mon premier Tablo
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onPress={
|
||||
currentStep === tutorialSteps.length - 1
|
||||
? handleClose
|
||||
: handleNext
|
||||
}
|
||||
className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
{currentStep === tutorialSteps.length - 1
|
||||
? "Commencer"
|
||||
: "Suivant"}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Completion Message */}
|
||||
{currentStep === tutorialSteps.length - 1 && (
|
||||
<div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
|
||||
<svg
|
||||
className="w-3 h-3 text-white"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-green-800 dark:text-green-200 font-medium">
|
||||
Félicitations ! Vous êtes prêt à utiliser XTablo.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -2,6 +2,7 @@ import { SignOutButton } from "@ui/components/SignOutButton";
|
|||
import { CreateTabloModal } from "@ui/components/CreateTabloModal";
|
||||
import { TabloModal } from "@ui/components/TabloModal";
|
||||
import { DeleteTabloModal } from "@ui/components/DeleteTabloModal";
|
||||
import { TabloTutorial } from "@ui/components/TabloTutorial";
|
||||
import {
|
||||
Select,
|
||||
SelectButton,
|
||||
|
|
@ -9,7 +10,7 @@ import {
|
|||
SelectListBox,
|
||||
SelectListItem,
|
||||
} from "@ui/ui-library/select";
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
useTablosList,
|
||||
useCreateTablo,
|
||||
|
|
@ -19,6 +20,7 @@ import {
|
|||
import { LoadingSpinner } from "@ui/components/LoadingSpinner";
|
||||
import { TabloInsert, TabloUpdate, UserTablo } from "@ui/types/tablos.types";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { HelpCircle } from "lucide-react";
|
||||
|
||||
type FilterOption = {
|
||||
id: "all" | "todo" | "in_progress" | "done";
|
||||
|
|
@ -45,6 +47,9 @@ export const TabloPage = () => {
|
|||
const [filterType, setFilterType] = useState<
|
||||
"all" | "todo" | "in_progress" | "done"
|
||||
>("all");
|
||||
const [isTutorialOpen, setIsTutorialOpen] = useState(false);
|
||||
const [hasInteractedWithTutorial, setHasInteractedWithTutorial] =
|
||||
useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { data: tablos, isLoading, error } = useTablosList();
|
||||
|
|
@ -52,6 +57,22 @@ export const TabloPage = () => {
|
|||
const { mutateAsync: updateTablo } = useUpdateTablo();
|
||||
const { mutateAsync: deleteTablo } = useDeleteTablo();
|
||||
|
||||
// Check if tutorial should be shown
|
||||
useEffect(() => {
|
||||
const tutorialCompleted = localStorage.getItem("xtablo-tutorial-completed");
|
||||
const tutorialInteracted = localStorage.getItem(
|
||||
"xtablo-tutorial-interacted"
|
||||
);
|
||||
|
||||
// Show tutorial if user hasn't completed it and has no tablos
|
||||
if (!tutorialCompleted && !isLoading && tablos && tablos.length === 0) {
|
||||
setIsTutorialOpen(true);
|
||||
}
|
||||
|
||||
// Check if user has interacted with tutorial before
|
||||
setHasInteractedWithTutorial(!!tutorialInteracted);
|
||||
}, [tablos, isLoading]);
|
||||
|
||||
// Filter tablos based on status
|
||||
const filteredTablos = tablos?.filter((tablo) => {
|
||||
if (filterType === "todo") {
|
||||
|
|
@ -183,6 +204,20 @@ export const TabloPage = () => {
|
|||
setIsDeleting(false);
|
||||
};
|
||||
|
||||
const handleCloseTutorial = () => {
|
||||
setIsTutorialOpen(false);
|
||||
};
|
||||
|
||||
const handleOpenTutorial = () => {
|
||||
setIsTutorialOpen(true);
|
||||
setHasInteractedWithTutorial(true);
|
||||
localStorage.setItem("xtablo-tutorial-interacted", "true");
|
||||
};
|
||||
|
||||
const handleTutorialCreateTablo = () => {
|
||||
setIsCreateModalOpen(true);
|
||||
};
|
||||
|
||||
const getUserRole = (tablo: UserTablo) => {
|
||||
return tablo.is_admin ? "Admin" : "Invité";
|
||||
};
|
||||
|
|
@ -544,6 +579,46 @@ export const TabloPage = () => {
|
|||
Tablos
|
||||
</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
{!hasInteractedWithTutorial && (
|
||||
<div className="flex items-center gap-1 px-3 py-1 bg-blue-50 dark:bg-blue-950 rounded-full border border-blue-200 dark:border-blue-800 animate-pulse shadow-lg shadow-blue-200/50 dark:shadow-blue-800/50">
|
||||
<span className="text-sm font-medium text-blue-700 dark:text-blue-300">
|
||||
Avant de commencer
|
||||
</span>
|
||||
<svg
|
||||
className="w-4 h-4 text-blue-600 dark:text-blue-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
className={`p-2 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors ${
|
||||
!hasInteractedWithTutorial
|
||||
? "animate-pulse bg-blue-50 dark:bg-blue-950 rounded-lg shadow-lg ring-2 ring-blue-200 dark:ring-blue-800 ring-opacity-50"
|
||||
: ""
|
||||
}`}
|
||||
onClick={handleOpenTutorial}
|
||||
title="Aide - Revoir le guide"
|
||||
>
|
||||
<HelpCircle
|
||||
className={`w-5 h-5 ${
|
||||
!hasInteractedWithTutorial
|
||||
? "text-blue-600 dark:text-blue-400"
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filter Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Select
|
||||
|
|
@ -568,6 +643,7 @@ export const TabloPage = () => {
|
|||
</div>
|
||||
|
||||
<button
|
||||
id="create-tablo-button"
|
||||
type="button"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
|
||||
onClick={openCreateModal}
|
||||
|
|
@ -671,6 +747,13 @@ export const TabloPage = () => {
|
|||
isDeleting={isDeleting}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Tutorial */}
|
||||
<TabloTutorial
|
||||
isOpen={isTutorialOpen}
|
||||
onClose={handleCloseTutorial}
|
||||
onCreateTablo={handleTutorialCreateTablo}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue