467 lines
16 KiB
TypeScript
Executable File
467 lines
16 KiB
TypeScript
Executable File
'use client';
|
|
|
|
import React, { useState, useCallback, useEffect } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import {
|
|
X, BookOpen, BarChart3, Pencil, Flower2, FileText, PartyPopper,
|
|
Users, ClipboardCheck, GraduationCap, Palette, Leaf,
|
|
TreePine, CalendarDays, MessageSquare, Target,
|
|
Zap, Award, Shield, Notebook, Grid3X3, Calculator,
|
|
CalendarCheck, BookCheck, Briefcase, Clock, Library,
|
|
Settings as SettingsIcon, Ruler, MessageSquareText, Heart,
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
|
|
import { t } from '@/lib/i18n';
|
|
|
|
const ONBOARDING_KEY = 'ct_onboarding_completed';
|
|
const DONT_SHOW_KEY = 'ct_onboarding_dont_show';
|
|
|
|
interface OnboardingStep {
|
|
iconComponent: React.ElementType;
|
|
titleKey: string;
|
|
descKey: string;
|
|
accent: string;
|
|
}
|
|
|
|
const steps: OnboardingStep[] = [
|
|
{
|
|
iconComponent: BookOpen,
|
|
titleKey: 'onboarding.step_1_title',
|
|
descKey: 'onboarding.step_1_desc',
|
|
accent: 'from-emerald-400 to-teal-500',
|
|
},
|
|
{
|
|
iconComponent: BarChart3,
|
|
titleKey: 'onboarding.step_2_title',
|
|
descKey: 'onboarding.step_2_desc',
|
|
accent: 'from-teal-400 to-emerald-500',
|
|
},
|
|
{
|
|
iconComponent: Users,
|
|
titleKey: 'onboarding.step_3_title',
|
|
descKey: 'onboarding.step_3_desc',
|
|
accent: 'from-emerald-400 to-cyan-500',
|
|
},
|
|
{
|
|
iconComponent: Grid3X3,
|
|
titleKey: 'onboarding.step_4_title',
|
|
descKey: 'onboarding.step_4_desc',
|
|
accent: 'from-cyan-400 to-emerald-500',
|
|
},
|
|
{
|
|
iconComponent: Pencil,
|
|
titleKey: 'onboarding.step_5_title',
|
|
descKey: 'onboarding.step_5_desc',
|
|
accent: 'from-amber-400 to-emerald-500',
|
|
},
|
|
{
|
|
iconComponent: Flower2,
|
|
titleKey: 'onboarding.step_6_title',
|
|
descKey: 'onboarding.step_6_desc',
|
|
accent: 'from-rose-400 to-emerald-500',
|
|
},
|
|
{
|
|
iconComponent: Grid3X3,
|
|
titleKey: 'onboarding.step_7_title',
|
|
descKey: 'onboarding.step_7_desc',
|
|
accent: 'from-teal-400 to-cyan-500',
|
|
},
|
|
{
|
|
iconComponent: ClipboardCheck,
|
|
titleKey: 'onboarding.step_8_title',
|
|
descKey: 'onboarding.step_8_desc',
|
|
accent: 'from-amber-400 to-rose-500',
|
|
},
|
|
{
|
|
iconComponent: Calculator,
|
|
titleKey: 'onboarding.step_9_title',
|
|
descKey: 'onboarding.step_9_desc',
|
|
accent: 'from-violet-400 to-emerald-500',
|
|
},
|
|
{
|
|
iconComponent: CalendarCheck,
|
|
titleKey: 'onboarding.step_10_title',
|
|
descKey: 'onboarding.step_10_desc',
|
|
accent: 'from-emerald-400 to-teal-500',
|
|
},
|
|
{
|
|
iconComponent: CalendarDays,
|
|
titleKey: 'onboarding.step_11_title',
|
|
descKey: 'onboarding.step_11_desc',
|
|
accent: 'from-amber-400 to-teal-500',
|
|
},
|
|
{
|
|
iconComponent: CalendarDays,
|
|
titleKey: 'onboarding.step_12_title',
|
|
descKey: 'onboarding.step_12_desc',
|
|
accent: 'from-teal-400 to-amber-500',
|
|
},
|
|
{
|
|
iconComponent: Shield,
|
|
titleKey: 'onboarding.step_13_title',
|
|
descKey: 'onboarding.step_13_desc',
|
|
accent: 'from-rose-400 to-amber-500',
|
|
},
|
|
{
|
|
iconComponent: MessageSquare,
|
|
titleKey: 'onboarding.step_14_title',
|
|
descKey: 'onboarding.step_14_desc',
|
|
accent: 'from-cyan-400 to-emerald-500',
|
|
},
|
|
{
|
|
iconComponent: Ruler,
|
|
titleKey: 'onboarding.step_15_title',
|
|
descKey: 'onboarding.step_15_desc',
|
|
accent: 'from-amber-400 to-teal-500',
|
|
},
|
|
{
|
|
iconComponent: MessageSquareText,
|
|
titleKey: 'onboarding.step_16_title',
|
|
descKey: 'onboarding.step_16_desc',
|
|
accent: 'from-teal-400 to-emerald-500',
|
|
},
|
|
{
|
|
iconComponent: Notebook,
|
|
titleKey: 'onboarding.step_17_title',
|
|
descKey: 'onboarding.step_17_desc',
|
|
accent: 'from-emerald-400 to-teal-500',
|
|
},
|
|
{
|
|
iconComponent: Palette,
|
|
titleKey: 'onboarding.step_18_title',
|
|
descKey: 'onboarding.step_18_desc',
|
|
accent: 'from-rose-400 to-violet-500',
|
|
},
|
|
{
|
|
iconComponent: Briefcase,
|
|
titleKey: 'onboarding.step_19_title',
|
|
descKey: 'onboarding.step_19_desc',
|
|
accent: 'from-violet-400 to-emerald-500',
|
|
},
|
|
{
|
|
iconComponent: BookCheck,
|
|
titleKey: 'onboarding.step_20_title',
|
|
descKey: 'onboarding.step_20_desc',
|
|
accent: 'from-amber-400 to-emerald-500',
|
|
},
|
|
{
|
|
iconComponent: Clock,
|
|
titleKey: 'onboarding.step_21_title',
|
|
descKey: 'onboarding.step_21_desc',
|
|
accent: 'from-teal-400 to-cyan-500',
|
|
},
|
|
{
|
|
iconComponent: Library,
|
|
titleKey: 'onboarding.step_22_title',
|
|
descKey: 'onboarding.step_22_desc',
|
|
accent: 'from-emerald-400 to-amber-500',
|
|
},
|
|
{
|
|
iconComponent: BarChart3,
|
|
titleKey: 'onboarding.step_23_title',
|
|
descKey: 'onboarding.step_23_desc',
|
|
accent: 'from-teal-400 to-violet-500',
|
|
},
|
|
{
|
|
iconComponent: SettingsIcon,
|
|
titleKey: 'onboarding.step_24_title',
|
|
descKey: 'onboarding.step_24_desc',
|
|
accent: 'from-emerald-400 to-teal-500',
|
|
},
|
|
];
|
|
|
|
interface OnboardingTourProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function OnboardingTour({ open, onClose }: OnboardingTourProps) {
|
|
const [currentStep, setCurrentStep] = useState(0);
|
|
const [dontShowAgain, setDontShowAgain] = useState(false);
|
|
const [showCelebration, setShowCelebration] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setCurrentStep(0);
|
|
setShowCelebration(false);
|
|
}
|
|
}, [open]);
|
|
|
|
const handleNext = useCallback(() => {
|
|
if (currentStep < steps.length - 1) {
|
|
setCurrentStep((s) => s + 1);
|
|
} else {
|
|
// Complete onboarding
|
|
try {
|
|
localStorage.setItem(ONBOARDING_KEY, 'true');
|
|
if (dontShowAgain) {
|
|
localStorage.setItem(DONT_SHOW_KEY, 'true');
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
setShowCelebration(true);
|
|
setTimeout(() => {
|
|
onClose();
|
|
}, 2000);
|
|
}
|
|
}, [currentStep, onClose, dontShowAgain]);
|
|
|
|
const handleBack = useCallback(() => {
|
|
if (currentStep > 0) {
|
|
setCurrentStep((s) => s - 1);
|
|
}
|
|
}, [currentStep]);
|
|
|
|
const handleSkip = useCallback(() => {
|
|
try {
|
|
localStorage.setItem(ONBOARDING_KEY, 'true');
|
|
if (dontShowAgain) {
|
|
localStorage.setItem(DONT_SHOW_KEY, 'true');
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
onClose();
|
|
}, [onClose, dontShowAgain]);
|
|
|
|
const step = steps[currentStep];
|
|
const isLastStep = currentStep === steps.length - 1;
|
|
const isFirstStep = currentStep === 0;
|
|
const progress = ((currentStep + 1) / steps.length) * 100;
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) handleSkip(); }}>
|
|
<DialogContent className="max-w-lg p-0 gap-0 overflow-hidden rounded-2xl border-emerald-200/60 dark:border-emerald-900/40 bg-white dark:bg-gray-950 shadow-2xl">
|
|
{/* Hidden title for accessibility */}
|
|
<DialogHeader className="sr-only">
|
|
<VisuallyHidden>
|
|
<DialogTitle>SchulOS Onboarding Tour</DialogTitle>
|
|
</VisuallyHidden>
|
|
</DialogHeader>
|
|
{/* Close button */}
|
|
<button
|
|
onClick={handleSkip}
|
|
className="absolute right-3 top-3 z-10 rounded-full p-1 hover:bg-emerald-100 dark:hover:bg-emerald-900/20 transition-colors text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 min-h-[44px] min-w-[44px] flex items-center justify-center"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
|
|
{/* Progress bar */}
|
|
<div className="h-1 bg-gray-100 dark:bg-gray-800">
|
|
<motion.div
|
|
className="h-full bg-gradient-to-r from-emerald-400 to-teal-500"
|
|
initial={{ width: 0 }}
|
|
animate={{ width: `${progress}%` }}
|
|
transition={{ duration: 0.4, ease: 'easeInOut' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Step content with animation */}
|
|
<div className="relative overflow-hidden" style={{ minHeight: '300px' }}>
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={currentStep}
|
|
initial={{ opacity: 0, x: 60 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -60 }}
|
|
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
|
className="flex flex-col items-center text-center px-8 pt-8 pb-6"
|
|
>
|
|
{/* Icon illustration with animated highlight ring */}
|
|
<div className="relative">
|
|
<motion.div
|
|
className="absolute inset-0 rounded-3xl bg-gradient-to-br opacity-30 tour-highlight-ring"
|
|
style={{ background: `linear-gradient(135deg, var(--tw-gradient-from), var(--tw-gradient-to))` }}
|
|
/>
|
|
<motion.div
|
|
initial={{ scale: 0.5, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay: 0.15, duration: 0.4, type: 'spring', stiffness: 200 }}
|
|
className={`w-20 h-20 rounded-3xl bg-gradient-to-br ${step.accent} flex items-center justify-center shadow-lg mb-5`}
|
|
>
|
|
<step.iconComponent className="w-9 h-9 text-white" />
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Step number badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -5 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1, duration: 0.2 }}
|
|
className="mb-3"
|
|
>
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-[10px] font-bold text-emerald-600 dark:text-emerald-400">
|
|
{t('onboarding.step', { current: String(currentStep + 1), total: String(steps.length) })}
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Title */}
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2, duration: 0.3 }}
|
|
className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2"
|
|
>
|
|
{t(step.titleKey)}
|
|
</motion.h2>
|
|
|
|
{/* Description */}
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3, duration: 0.3 }}
|
|
className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-sm"
|
|
>
|
|
{t(step.descKey)}
|
|
</motion.p>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
|
|
{/* Celebration overlay */}
|
|
<AnimatePresence>
|
|
{showCelebration && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="absolute inset-0 flex flex-col items-center justify-center bg-white/90 dark:bg-gray-950/90 backdrop-blur-sm px-8"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ type: 'spring', stiffness: 300, damping: 15 }}
|
|
>
|
|
<PartyPopper className="w-16 h-16 text-emerald-500" />
|
|
</motion.div>
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-4"
|
|
>
|
|
{t('onboarding.celebration')}
|
|
</motion.h2>
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.5 }}
|
|
className="text-sm text-gray-500 dark:text-gray-400 mt-2"
|
|
>
|
|
{t('onboarding.complete')}
|
|
</motion.p>
|
|
{/* Confetti-like particles */}
|
|
{[...Array(8)].map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="absolute w-2 h-2 rounded-full"
|
|
style={{
|
|
background: ['#10b981', '#14b8a6', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899', '#84cc16'][i],
|
|
left: `${30 + Math.random() * 40}%`,
|
|
top: `${30 + Math.random() * 40}%`,
|
|
}}
|
|
initial={{ scale: 0, opacity: 1 }}
|
|
animate={{
|
|
scale: [0, 1.5, 0],
|
|
opacity: [1, 0.8, 0],
|
|
y: [0, -30 - Math.random() * 40],
|
|
x: [(Math.random() - 0.5) * 60],
|
|
}}
|
|
transition={{ duration: 1.2, delay: i * 0.08, ease: 'easeOut' }}
|
|
/>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Step indicator dots (scrollable for 24 steps) */}
|
|
<div className="flex items-center justify-center gap-1 pb-3 px-4 overflow-x-auto max-w-full">
|
|
{steps.map((_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setCurrentStep(i)}
|
|
className={`rounded-full transition-all duration-300 shrink-0 ${
|
|
i === currentStep
|
|
? 'w-5 h-1.5 bg-gradient-to-r from-emerald-400 to-teal-500'
|
|
: i < currentStep
|
|
? 'w-1.5 h-1.5 bg-emerald-400/60 dark:bg-emerald-500/40'
|
|
: 'w-1.5 h-1.5 bg-gray-200 dark:bg-gray-700'
|
|
}`}
|
|
title={t(steps[i].titleKey)}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Action buttons */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-t border-emerald-100/50 dark:border-emerald-900/30 bg-emerald-50/30 dark:bg-emerald-950/10">
|
|
<div className="flex-1 flex items-center gap-3">
|
|
{!isFirstStep && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleBack}
|
|
className="text-gray-500 dark:text-gray-400 hover:text-emerald-600 dark:hover:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/20 min-h-[44px]"
|
|
>
|
|
{t('onboarding.previous')}
|
|
</Button>
|
|
)}
|
|
{/* Don't show again checkbox */}
|
|
<label className="flex items-center gap-1.5 cursor-pointer select-none">
|
|
<Checkbox
|
|
checked={dontShowAgain}
|
|
onCheckedChange={(checked) => setDontShowAgain(checked === true)}
|
|
className="data-[state=checked]:bg-emerald-500 data-[state=checked]:border-emerald-500"
|
|
/>
|
|
<span className="text-[10px] text-gray-400 dark:text-gray-500 hidden sm:inline">{t('onboarding.dont_show_again')}</span>
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{!isLastStep && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleSkip}
|
|
className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 min-h-[44px]"
|
|
>
|
|
{t('onboarding.skip')}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
onClick={handleNext}
|
|
className={`bg-gradient-to-r ${step.accent} text-white hover:opacity-90 shadow-md shadow-emerald-200/50 dark:shadow-emerald-900/30 px-6 min-h-[44px]`}
|
|
>
|
|
{isLastStep ? t('onboarding.start') : t('onboarding.next')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export function isOnboardingCompleted(): boolean {
|
|
try {
|
|
return localStorage.getItem(ONBOARDING_KEY) === 'true';
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
export function isDontShowAgain(): boolean {
|
|
try {
|
|
return localStorage.getItem(DONT_SHOW_KEY) === 'true';
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|