"use client" import * as React from "react" import Image from "next/image" import { CheckIcon, ExternalLinkIcon } from "lucide-react" import { AnimatePresence, motion, useAnimation, type PanInfo, } from "motion/react" import { cn } from "@/lib/utils" import { AspectRatio } from "@/components/ui/aspect-ratio" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, } from "@/components/ui/drawer" import { Progress } from "@/components/ui/progress" function useMediaQuery(query: string) { const [matches, setMatches] = React.useState(null) React.useEffect(() => { const media = window.matchMedia(query) setMatches(media.matches) const listener = (e: MediaQueryListEvent) => setMatches(e.matches) media.addEventListener("change", listener) return () => media.removeEventListener("change", listener) }, [query]) return matches ?? false } function useFeatureVisibility( featureId: string, variant: "desktop" | "mobile" ) { const storageKey = `feature_${featureId}_${variant}` const [isVisible, setIsVisible] = React.useState(null) React.useEffect(() => { const storedValue = localStorage.getItem(storageKey) setIsVisible(storedValue ? JSON.parse(storedValue) : true) }, [storageKey]) const hideFeature = () => { localStorage.setItem(storageKey, JSON.stringify(false)) setIsVisible(false) } return { isVisible: isVisible === null ? false : isVisible, hideFeature } } function useSwipe(onSwipe: (direction: "left" | "right") => void) { const handleDragEnd = ( event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => { if (info.offset.x > 100) { onSwipe("right") } else if (info.offset.x < -100) { onSwipe("left") } } return { handleDragEnd } } const fadeInScale = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, transition: { duration: 0.2, ease: [0.23, 1, 0.32, 1] as const }, } const slideInOut = (direction: 1 | -1) => ({ initial: { opacity: 0, x: 20 * direction }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -20 * direction }, transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1] as const }, }) const hoverScale = { whileHover: { scale: 1.01 }, whileTap: { scale: 0.95 }, transition: { duration: 0.2 }, } function StepPreview({ step, direction }: { step: Step; direction: 1 | -1 }) { const controls = useAnimation() React.useEffect(() => { controls.start({ opacity: 1, y: 0, transition: { delay: 0.2, duration: 0.3 }, }) }, [controls, step]) return ( {step.media ? (

{step.media.type === "image" ? ( {step.media.alt

) : (

{step.title}

{step.full_description}

) : (

{step.title}

{step.full_description}

)} ) } interface StepTabProps { step: Step isActive: boolean onClick: () => void isCompleted: boolean } function StepTab({ step, isActive, onClick, isCompleted }: StepTabProps) { return (

{step.title}

{step.short_description}

{isCompleted && (

)} ) } interface Step { title: string short_description: string full_description: string action?: { label: string onClick?: () => void href?: string } media?: { type: "image" | "video" src: string alt?: string } } interface FeatureDisclosureProps { steps: Step[] featureId: string onComplete?: () => void onSkip?: () => void showProgressBar?: boolean open: boolean setOpen: (open: boolean) => void forceVariant?: "mobile" | "desktop" } interface StepContentProps { steps: Step[] currentStep: number onSkip: () => void onNext: () => void onPrevious: () => void hideFeature: () => void completedSteps: number[] onStepSelect: (index: number) => void direction: 1 | -1 isDesktop: boolean } function StepContent({ steps, currentStep, onSkip, onNext, onPrevious, hideFeature, completedSteps, onStepSelect, direction, isDesktop, stepRef, }: StepContentProps & { stepRef: React.RefObject }) { const [skipNextTime, setSkipNextTime] = React.useState(false) const renderActionButton = (action: Step["action"]) => { if (!action) return null if (action.href) { return ( ) } return ( ) } return (

{isDesktop && (

{steps.map((step, index) => ( onStepSelect(index)} isCompleted={completedSteps.includes(index)} /> ))}

)} {!isDesktop && steps[currentStep]?.media && ( {steps[currentStep]?.media?.type === "image" ? ( {steps[currentStep]?.media?.alt

) : (

)} {steps[currentStep]?.action ? (

{renderActionButton(steps[currentStep]?.action)}

) : (

)} {/* Navigation buttons */}

{currentStep > 0 && ( )}

{/* Don't show again checkbox */}

setSkipNextTime(checked as boolean)} /> Don't show this again

) } export function IntroDisclosure({ steps, open, setOpen, featureId, onComplete, onSkip, showProgressBar = true, forceVariant, }: FeatureDisclosureProps) { const [currentStep, setCurrentStep] = React.useState(0) const [completedSteps, setCompletedSteps] = React.useState([0]) const [direction, setDirection] = React.useState<1 | -1>(1) const isDesktopQuery = useMediaQuery("(min-width: 768px)") const isDesktop = forceVariant ? forceVariant === "desktop" : isDesktopQuery const variant = isDesktop ? "desktop" : "mobile" const { isVisible, hideFeature } = useFeatureVisibility(featureId, variant) const stepRef = React.useRef(null) // Close the dialog if feature is hidden React.useEffect(() => { if (!isVisible) { setOpen(false) } }, [isVisible, setOpen]) // Focus management React.useEffect(() => { if (open && stepRef.current) { stepRef.current.focus() } }, [open, currentStep]) // Early return if feature should be hidden if (!isVisible || !open) { return null } const handleNext = () => { setDirection(1) setCompletedSteps((prev) => prev.includes(currentStep) ? prev : [...prev, currentStep] ) if (currentStep < steps.length - 1) { setCurrentStep(currentStep + 1) } else { setOpen(false) onComplete?.() } } const handlePrevious = () => { setDirection(-1) if (currentStep > 0) { setCurrentStep(currentStep - 1) } } const handleSkip = () => { setOpen(false) onSkip?.() } const handleStepSelect = (index: number) => { setDirection(index > currentStep ? 1 : -1) // Mark all steps up to and including the selected step as completed setCompletedSteps((prev) => { const newCompletedSteps = new Set(prev) // If moving forward, mark all steps up to the selected one as completed if (index > currentStep) { for (let i = currentStep; i <= index; i++) { newCompletedSteps.add(i) } } return Array.from(newCompletedSteps) }) setCurrentStep(index) } const handleSwipe = (swipeDirection: "left" | "right") => { if (swipeDirection === "left") { handleNext() } else { handlePrevious() } } const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === "ArrowRight" || event.key === "ArrowDown") { handleNext() } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") { handlePrevious() } } const { handleDragEnd } = useSwipe(handleSwipe) if (isDesktop) { return ( ) } return ( {showProgressBar && ( )} {steps[currentStep]?.title}

{/* Step tabs */}

{steps.map((step, index) => ( handleStepSelect(index)} isCompleted={completedSteps.includes(index)} /> ))}

{/* Preview */}

{/* Step content */}

{steps[currentStep]?.short_description}

{steps[currentStep]?.action && ( )} )}

{/* Fixed bottom navigation */}

{currentStep > 0 && ( )}

{ hideFeature() }} /> Don't show this again

) } export default IntroDisclosure

Intro Disclosure

Instalação

Dependências

Registry dependencies