Success

"use client" import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ComponentProps, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type PropsWithChildren, type ReactNode, } from "react" import { useControllableState } from "@radix-ui/react-use-controllable-state" import { cva } from "class-variance-authority" import { BarChart3Icon, CheckIcon, Vote } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "@/components/ui/popover" // ============================================================================ // Types // ============================================================================ export interface PollOption { /** Unique identifier for the option */ id: string /** Display label for the option */ label: string /** Optional description */ description?: string /** Optional icon */ icon?: ReactNode } export type PollWidgetMode = "inline" | "popover" | "dialog" export type PollWidgetAnimationPhase = "idle" | "voting" | "results" | "success" export interface PollWidgetRootProps extends Omit { /** Poll question text */ question: string /** Optional description for the poll */ description?: string /** Available options to vote on */ options: PollOption[] /** Currently selected option(s) - controlled */ value?: string | string[] /** Default selected option(s) - uncontrolled */ defaultValue?: string | string[] /** Callback when selection changes */ onValueChange?: (value: string | string[]) => void /** Whether multiple selections are allowed */ multiple?: boolean /** Whether the poll is disabled */ disabled?: boolean /** Vote counts per option */ votes?: Record /** Whether user has submitted their vote */ hasVoted?: boolean /** Callback when vote is submitted */ onVote?: (selectedIds: string[]) => void /** Render mode */ mode?: PollWidgetMode /** Controlled open state (for popover/dialog modes) */ open?: boolean /** Callback when open state changes */ onOpenChange?: (open: boolean) => void /** Duration to show results before collapsing (ms). Set to 0 to disable auto-collapse. */ autoCollapseDelay?: number /** Duration to show success message (ms) */ successDuration?: number /** Custom success title */ successTitle?: string /** Custom success description */ successDescription?: string /** Children components */ children: ReactNode } // ============================================================================ // Context // ============================================================================ interface PollWidgetContextValue { question: string description?: string options: PollOption[] selected: string[] multiple: boolean disabled: boolean showResults: boolean votes: Record totalVotes: number hasVoted: boolean mode: PollWidgetMode open: boolean setOpen: (open: boolean) => void select: (optionId: string) => void isSelected: (optionId: string) => boolean getPercentage: (optionId: string) => number submitVote: () => void canSubmit: boolean // Animation state animationPhase: PollWidgetAnimationPhase successTitle: string successDescription: string } const PollWidgetContext = createContext(null) /** * Hook to access the PollWidget context * @throws Error if used outside of PollWidget.Root */ export function usePollWidget() { const context = useContext(PollWidgetContext) if (!context) { throw new Error("PollWidget components must be used within PollWidget.Root") } return context } interface PollWidgetOptionContextValue { optionId: string disabled: boolean isSelected: boolean percentage: number } const PollWidgetOptionContext = createContext(null) function usePollWidgetOptionContext() { const context = useContext(PollWidgetOptionContext) if (!context) { throw new Error( "PollWidget.Option sub-components must be used within PollWidget.Option" ) } return context } // ============================================================================ // Variants // ============================================================================ const optionVariants = cva( [ "group relative flex w-full cursor-pointer items-center gap-3 rounded-lg border p-3 text-left", "transition-all duration-200 ease-out", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", ], { variants: { state: { idle: [ "border-border bg-background hover:border-primary/50 hover:bg-accent/50", ], selected: [ "border-primary bg-primary/5 shadow-sm", "hover:border-primary hover:bg-primary/10", ], voted: ["cursor-default border-border bg-muted/30"], }, }, defaultVariants: { state: "idle", }, } ) const indicatorVariants = cva( [ "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2", "transition-all duration-200 ease-out", ], { variants: { state: { idle: "border-muted-foreground/30 bg-background", selected: "border-primary bg-primary text-primary-foreground", voted: "border-muted-foreground/30 bg-muted", }, multiple: { true: "rounded-sm", false: "rounded-full", }, }, defaultVariants: { state: "idle", multiple: false, }, } ) const progressVariants = cva( [ "absolute inset-y-0 left-0 rounded-l-lg", "transition-all duration-500 ease-out", ], { variants: { state: { idle: "bg-transparent", selected: "bg-primary/10", voted: "bg-muted/50", }, }, defaultVariants: { state: "idle", }, } ) // ============================================================================ // Root Component // ============================================================================ /** * Root component for PollWidget. Provides context for all child components. * Supports three rendering modes: inline, popover, and dialog. */ export function PollWidgetRoot({ question, description, options, value: controlledValue, defaultValue, onValueChange, multiple = false, disabled = false, votes = {}, hasVoted = false, onVote, mode = "inline", open: controlledOpen, onOpenChange, autoCollapseDelay = 2500, successDuration = 1500, successTitle = "Thanks for voting!", successDescription = "Your vote has been recorded", children, }: PollWidgetRootProps) { const normalizeValue = (val: string | string[] | undefined): string[] => { if (!val) { return [] } return Array.isArray(val) ? val : [val] } const [selectedArray, setSelectedArray] = useControllableState({ prop: controlledValue ? normalizeValue(controlledValue) : undefined, defaultProp: normalizeValue(defaultValue), onChange: (arr) => { if (onValueChange) { onValueChange(multiple ? arr : (arr[0] ?? "")) } }, }) const [open, setOpen] = useControllableState({ prop: controlledOpen, defaultProp: false, onChange: onOpenChange, }) // Animation state const [animationPhase, setAnimationPhase] = useState("idle") const selected = selectedArray ?? [] const totalVotes = useMemo( () => Object.values(votes).reduce((sum, count) => sum + count, 0), [votes] ) const select = useCallback( (optionId: string) => { if (disabled || hasVoted || animationPhase !== "idle") { return } setSelectedArray((prev) => { const current = prev ?? [] const isCurrentlySelected = current.includes(optionId) if (multiple) { if (isCurrentlySelected) { return current.filter((id) => id !== optionId) } return [...current, optionId] } if (isCurrentlySelected) { return [] } return [optionId] }) }, [disabled, hasVoted, multiple, setSelectedArray, animationPhase] ) const isSelected = useCallback( (optionId: string) => selected.includes(optionId), [selected] ) const getPercentage = useCallback( (optionId: string) => { if (totalVotes === 0) { return 0 } return Math.round(((votes[optionId] ?? 0) / totalVotes) * 100) }, [votes, totalVotes] ) const submitVote = useCallback(() => { if (selected.length > 0 && onVote && animationPhase === "idle") { // Start animation sequence setAnimationPhase("voting") // Brief delay before showing results setTimeout(() => { onVote(selected) setAnimationPhase("results") // Show success after results setTimeout(() => { setAnimationPhase("success") // Auto-collapse after success (for popover/dialog modes) if (autoCollapseDelay > 0 && mode !== "inline") { setTimeout(() => { setOpen(false) // Reset animation phase after close setTimeout(() => setAnimationPhase("idle"), 300) }, successDuration) } else if (autoCollapseDelay > 0 && mode === "inline") { // For inline mode, just go back to idle after showing success setTimeout(() => setAnimationPhase("idle"), successDuration) } }, autoCollapseDelay) }, 400) } }, [ selected, onVote, animationPhase, autoCollapseDelay, successDuration, mode, setOpen, ]) // Reset animation phase when opening useEffect(() => { if (open && !hasVoted) { setAnimationPhase("idle") } }, [open, hasVoted]) // Update animation phase when hasVoted changes externally useEffect(() => { if (hasVoted && animationPhase === "idle") { setAnimationPhase("results") } }, [hasVoted, animationPhase]) const canSubmit = selected.length > 0 && !hasVoted && !disabled && animationPhase === "idle" const contextValue = useMemo( () => ({ question, description, options, selected, multiple, disabled, showResults: hasVoted || animationPhase === "results", votes, totalVotes, hasVoted, mode, open: open ?? false, setOpen: (value: boolean) => setOpen(value), select, isSelected, getPercentage, submitVote, canSubmit, animationPhase, successTitle, successDescription, }), [ question, description, options, selected, multiple, disabled, hasVoted, votes, totalVotes, mode, open, setOpen, select, isSelected, getPercentage, submitVote, canSubmit, animationPhase, successTitle, successDescription, ] ) // Render based on mode if (mode === "popover") { return ( {children} ) } if (mode === "dialog") { return ( ) } // Inline mode - just render children with context return (

{children}

) } // ============================================================================ // Trigger Component // ============================================================================ export type PollWidgetTriggerProps = ComponentProps & { /** Custom label for the trigger button */ label?: ReactNode } /** * Button that opens the poll popover/dialog. * Only rendered in popover or dialog modes. */ export function PollWidgetTrigger({ className, label, children, ...props }: PollWidgetTriggerProps) { const { mode, hasVoted, totalVotes } = usePollWidget() if (mode === "inline") { return null } const content = children ?? ( <> {label ?? "Poll"} {totalVotes > 0 && ( {totalVotes} )} ) const button = ( ) if (mode === "dialog") { return {button} } return {button} } // ============================================================================ // Content Component // ============================================================================ export type PollWidgetContentProps = HTMLAttributes /** * Container for the poll content. Adapts to the current mode. * Includes animation transitions between voting states. */ export function PollWidgetContent({ className, children, ...props }: PollWidgetContentProps) { const { mode, animationPhase } = usePollWidget() const innerContent = ( {animationPhase === "success" ? ( ) : ( {children} )} ) if (mode === "popover") { return ( {innerContent} ) } if (mode === "dialog") { return ( {innerContent} ) } // Inline mode return (

{innerContent}

) } // ============================================================================ // Success Component // ============================================================================ export type PollWidgetSuccessProps = HTMLAttributes & { /** Custom title override */ title?: string /** Custom description override */ description?: string } /** * Success state shown after voting with animated checkmark. */ export function PollWidgetSuccess({ title, description, className, ...props }: PollWidgetSuccessProps) { const { successTitle, successDescription, totalVotes, selected, options } = usePollWidget() const displayTitle = title ?? successTitle const displayDescription = description ?? successDescription // Get voted option labels const votedOptions = selected .map((id) => options.find((o) => o.id === id)?.label) .filter(Boolean) return (

{displayTitle}

{displayDescription}

{votedOptions.length > 0 && (

You voted for:{" "} {votedOptions.join(", ")}

)}

{totalVotes.toLocaleString()} total{" "} {totalVotes === 1 ? "vote" : "votes"}

) } // ============================================================================ // Question Component // ============================================================================ export type PollWidgetQuestionProps = HTMLAttributes /** * Displays the poll question and optional description. */ export function PollWidgetQuestion({ className, children, ...props }: PollWidgetQuestionProps) { const { question, description, mode } = usePollWidget() if (mode === "popover") { return ( {children ?? question} {description && {description}} ) } if (mode === "dialog") { return ( {children ?? question} {description && {description}} ) } // Inline mode return (

{children ?? question}

{description && (

{description}

)}

) } // ============================================================================ // Options Component // ============================================================================ export type PollWidgetOptionsProps = HTMLAttributes /** * Container for poll options with keyboard navigation. */ export function PollWidgetOptions({ className, children, ...props }: PollWidgetOptionsProps) { const containerRef = useRef(null) const handleKeyDown = useCallback((event: KeyboardEvent) => { const container = containerRef.current if (!container) { return } const options = Array.from( container.querySelectorAll( '[data-slot="poll-widget-option"]:not([disabled])' ) ) const currentIndex = options.indexOf( document.activeElement as HTMLButtonElement ) let nextIndex = currentIndex switch (event.key) { case "ArrowDown": case "ArrowRight": event.preventDefault() nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0 break case "ArrowUp": case "ArrowLeft": event.preventDefault() nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1 break case "Home": event.preventDefault() nextIndex = 0 break case "End": event.preventDefault() nextIndex = options.length - 1 break default: break } options[nextIndex]?.focus() }, []) return ( ) } // ============================================================================ // Option Component // ============================================================================ export type PollWidgetOptionProps = Omit, "value"> & { /** Unique identifier for this option */ value: string /** Whether this specific option is disabled */ disabled?: boolean } /** * Individual poll option with indicator, label, and progress bar. */ export function PollWidgetOption({ value, disabled: optionDisabled = false, children, className, onClick, ...props }: PollWidgetOptionProps) { const { options, disabled: rootDisabled, hasVoted, showResults, isSelected, select, getPercentage, } = usePollWidget() const option = options.find((o) => o.id === value) const disabled = rootDisabled || optionDisabled const selected = isSelected(value) const percentage = getPercentage(value) const getState = (): "idle" | "selected" | "voted" => { if (hasVoted) { return "voted" } if (selected) { return "selected" } return "idle" } const state = getState() const handleClick = useCallback( (event: MouseEvent) => { onClick?.(event) if (!(event.defaultPrevented || disabled)) { select(value) } }, [onClick, disabled, select, value] ) const optionContextValue = useMemo( () => ({ optionId: value, disabled, isSelected: selected, percentage, }), [value, disabled, selected, percentage] ) return ( ) } // ============================================================================ // Indicator Component // ============================================================================ export type PollWidgetIndicatorProps = HTMLAttributes /** * Selection indicator (checkbox/radio visual) for an option. */ export function PollWidgetIndicator({ className, children, ...props }: PollWidgetIndicatorProps) { const { multiple, hasVoted } = usePollWidget() const { isSelected } = usePollWidgetOptionContext() const getState = (): "idle" | "selected" | "voted" => { if (hasVoted) { return "voted" } if (isSelected) { return "selected" } return "idle" } const state = getState() return ( ) } // ============================================================================ // Label Component // ============================================================================ export type PollWidgetLabelProps = HTMLAttributes /** * Label text for a poll option. */ export function PollWidgetLabel({ className, ...props }: PollWidgetLabelProps) { return ( ) } // ============================================================================ // Percentage Component // ============================================================================ export type PollWidgetPercentageProps = HTMLAttributes /** * Displays the vote percentage for an option (only visible after voting). */ export function PollWidgetPercentage({ children, className, ...props }: PollWidgetPercentageProps) { const { showResults } = usePollWidget() const { percentage } = usePollWidgetOptionContext() if (!showResults) { return null } return ( {children ?? `${percentage}%`} ) } // ============================================================================ // Results Component // ============================================================================ export type PollWidgetResultsProps = HTMLAttributes /** * Displays voting results summary (total votes, user vote status). */ export function PollWidgetResults({ children, className, ...props }: PollWidgetResultsProps) { const { totalVotes, hasVoted } = usePollWidget() return (

{children ?? ( <> {totalVotes.toLocaleString()} {totalVotes === 1 ? "vote" : "votes"} {hasVoted && ( You voted )} )}

) } // ============================================================================ // Submit Component // ============================================================================ export type PollWidgetSubmitProps = ComponentProps & { /** Text to show while submitting */ loadingText?: string } /** * Submit button for the poll. Disabled when no option is selected or already voted. * Shows loading state during vote submission animation. */ export function PollWidgetSubmit({ className, children, onClick, loadingText = "Submitting...", ...props }: PollWidgetSubmitProps) { const { canSubmit, submitVote, hasVoted, mode, animationPhase } = usePollWidget() const isSubmitting = animationPhase === "voting" const handleClick: NonNullable = ( event ) => { onClick?.(event) if (!event.defaultPrevented) { submitVote() } } if ( hasVoted || animationPhase === "results" || animationPhase === "success" ) { return null } const buttonContent = ( {isSubmitting ? ( <> {loadingText} ) : ( (children ?? "Submit Vote") )} ) // For dialog mode, wrap in DialogFooter if (mode === "dialog") { return ( ) } return ( ) } // ============================================================================ // Dialog Component (for dialog mode wrapper) // ============================================================================ export type PollWidgetDialogProps = ComponentProps /** * Dialog wrapper component. Use when mode="dialog" to wrap PollWidget.Content. * This is an alternative to PollWidget.Content for more control over dialog rendering. */ export function PollWidgetDialog({ className, children, ...props }: PollWidgetDialogProps) { return ( {children} ) } // ============================================================================ // Compound Export // ============================================================================ export const PollWidget = Object.assign(PollWidgetRoot, { Trigger: PollWidgetTrigger, Content: PollWidgetContent, Question: PollWidgetQuestion, Options: PollWidgetOptions, Option: PollWidgetOption, Indicator: PollWidgetIndicator, Label: PollWidgetLabel, Percentage: PollWidgetPercentage, Results: PollWidgetResults, Submit: PollWidgetSubmit, Success: PollWidgetSuccess, Dialog: PollWidgetDialog, })

Poll Widget

Instalação

Dependências