"use client" import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ComponentProps, type KeyboardEvent, type MouseEvent, } from "react" import { useControllableState } from "@radix-ui/react-use-controllable-state" import { cva } from "class-variance-authority" import { Check } from "lucide-react" import { cn } from "@/lib/utils" /* ----------------------------------------------------------------------------- * Types * -------------------------------------------------------------------------- */ export interface ChoicePollRootProps extends Omit, "defaultValue"> { /** 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 /** Whether poll results should be visible after voting */ showResults?: boolean /** Vote counts per option (for showing results) */ votes?: Record /** Whether user has submitted their vote */ hasVoted?: boolean } export interface ChoicePollOptionProps extends ComponentProps<"button"> { /** Unique identifier for this option */ value: string /** Whether this specific option is disabled */ disabled?: boolean } export type ChoicePollHeaderProps = ComponentProps<"div"> export type ChoicePollTitleProps = ComponentProps<"h3"> export type ChoicePollDescriptionProps = ComponentProps<"p"> export type ChoicePollOptionsProps = ComponentProps<"div"> export type ChoicePollLabelProps = ComponentProps<"span"> export type ChoicePollIndicatorProps = ComponentProps<"span"> export type ChoicePollProgressProps = ComponentProps<"div"> export type ChoicePollPercentageProps = ComponentProps<"span"> export interface ChoicePollFooterProps extends ComponentProps<"div"> { /** Total number of votes */ totalVotes?: number } /* ----------------------------------------------------------------------------- * Context * -------------------------------------------------------------------------- */ interface ChoicePollContextValue { selected: string[] multiple: boolean disabled: boolean showResults: boolean votes: Record totalVotes: number hasVoted: boolean select: (optionId: string) => void isSelected: (optionId: string) => boolean getPercentage: (optionId: string) => number } const ChoicePollContext = createContext(null) function useChoicePollContext() { const context = useContext(ChoicePollContext) if (!context) { throw new Error("ChoicePoll components must be used within ChoicePoll.Root") } return context } interface ChoicePollOptionContextValue { optionId: string disabled: boolean isSelected: boolean percentage: number } const ChoicePollOptionContext = createContext(null) function useChoicePollOptionContext() { const context = useContext(ChoicePollOptionContext) if (!context) { throw new Error( "ChoicePoll.Option sub-components must be used within ChoicePoll.Option" ) } return context } function useAnimatedPercentage(percentage: number, shouldShowResults: boolean) { const [animatedPercentage, setAnimatedPercentage] = useState( shouldShowResults ? percentage : 0 ) useEffect(() => { if (!shouldShowResults) { setAnimatedPercentage(0) return } const frame = requestAnimationFrame(() => { setAnimatedPercentage(percentage) }) return () => cancelAnimationFrame(frame) }, [percentage, shouldShowResults]) return animatedPercentage } /* ----------------------------------------------------------------------------- * Variants * -------------------------------------------------------------------------- */ const optionVariants = cva( [ "group relative flex w-full cursor-pointer items-center gap-3 rounded-xl border p-4 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-5 w-5 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-md", false: "rounded-full", }, }, defaultVariants: { state: "idle", multiple: false, }, } ) const progressVariants = cva( [ "absolute inset-y-0 left-0 rounded-l-xl", "transition-all duration-500 ease-out", ], { variants: { state: { idle: "bg-transparent", selected: "bg-primary/15", voted: "bg-primary/10", }, }, defaultVariants: { state: "idle", }, } ) /* ----------------------------------------------------------------------------- * Root * -------------------------------------------------------------------------- */ function ChoicePollRoot({ value: controlledValue, defaultValue, onValueChange, multiple = false, disabled = false, showResults = false, votes = {}, hasVoted = false, children, className, ...props }: ChoicePollRootProps) { 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 selected = selectedArray ?? [] const totalVotes = useMemo( () => Object.values(votes).reduce((sum, count) => sum + count, 0), [votes] ) const select = useCallback( (optionId: string) => { if (disabled || hasVoted) { 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] ) 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 contextValue = useMemo( () => ({ selected, multiple, disabled, showResults: showResults && hasVoted, votes, totalVotes, hasVoted, select, isSelected, getPercentage, }), [ selected, multiple, disabled, showResults, hasVoted, votes, totalVotes, select, isSelected, getPercentage, ] ) return (

{children}

) } /* ----------------------------------------------------------------------------- * Header * -------------------------------------------------------------------------- */ function ChoicePollHeader({ children, className, ...props }: ChoicePollHeaderProps) { return (

{children}

) } /* ----------------------------------------------------------------------------- * Title * -------------------------------------------------------------------------- */ function ChoicePollTitle({ children, className, ...props }: ChoicePollTitleProps) { return (

{children}

) } /* ----------------------------------------------------------------------------- * Description * -------------------------------------------------------------------------- */ function ChoicePollDescription({ children, className, ...props }: ChoicePollDescriptionProps) { return (

{children}

) } /* ----------------------------------------------------------------------------- * Options Container * -------------------------------------------------------------------------- */ function ChoicePollOptions({ children, className, ...props }: ChoicePollOptionsProps) { const containerRef = useRef(null) const handleKeyDown = useCallback((event: KeyboardEvent) => { const container = containerRef.current if (!container) { return } const options = Array.from( container.querySelectorAll( '[data-slot="choice-poll-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 * -------------------------------------------------------------------------- */ function ChoicePollOption({ value, disabled: optionDisabled = false, children, className, onClick, ...props }: ChoicePollOptionProps) { const { disabled: rootDisabled, hasVoted, showResults, isSelected, select, getPercentage, } = useChoicePollContext() const disabled = rootDisabled || optionDisabled const selected = isSelected(value) const percentage = getPercentage(value) const animatedPercentage = useAnimatedPercentage(percentage, showResults) 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 (checkbox/radio visual) * -------------------------------------------------------------------------- */ function ChoicePollIndicator({ children, className, ...props }: ChoicePollIndicatorProps) { const { multiple, hasVoted } = useChoicePollContext() const { isSelected } = useChoicePollOptionContext() const getState = (): "idle" | "selected" | "voted" => { if (hasVoted) { return "voted" } if (isSelected) { return "selected" } return "idle" } const state = getState() return ( ) } /* ----------------------------------------------------------------------------- * Label * -------------------------------------------------------------------------- */ function ChoicePollLabel({ children, className, ...props }: ChoicePollLabelProps) { return ( {children} ) } /* ----------------------------------------------------------------------------- * Progress (inline progress bar) * -------------------------------------------------------------------------- */ function ChoicePollProgress({ className, ...props }: ChoicePollProgressProps) { const { showResults } = useChoicePollContext() const { percentage, isSelected } = useChoicePollOptionContext() const animatedPercentage = useAnimatedPercentage(percentage, showResults) if (!showResults) { return null } return ( ) } /* ----------------------------------------------------------------------------- * Percentage * -------------------------------------------------------------------------- */ function ChoicePollPercentage({ children, className, ...props }: ChoicePollPercentageProps) { const { showResults } = useChoicePollContext() const { percentage } = useChoicePollOptionContext() const animatedPercentage = useAnimatedPercentage(percentage, showResults) if (!showResults) { return null } return ( {children ?? `${Math.round(animatedPercentage)}%`} ) } /* ----------------------------------------------------------------------------- * Footer * -------------------------------------------------------------------------- */ function ChoicePollFooter({ children, className, totalVotes, ...props }: ChoicePollFooterProps) { const { totalVotes: contextTotalVotes, hasVoted, showResults, } = useChoicePollContext() const votes = totalVotes ?? contextTotalVotes if (!showResults && !children) { return null } return (

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

) } /* ----------------------------------------------------------------------------- * Hook for external access * -------------------------------------------------------------------------- */ export function useChoicePoll() { return useChoicePollContext() } /* ----------------------------------------------------------------------------- * Export * -------------------------------------------------------------------------- */ export const ChoicePoll = { Root: ChoicePollRoot, Header: ChoicePollHeader, Title: ChoicePollTitle, Description: ChoicePollDescription, Options: ChoicePollOptions, Option: ChoicePollOption, Indicator: ChoicePollIndicator, Label: ChoicePollLabel, Progress: ChoicePollProgress, Percentage: ChoicePollPercentage, Footer: ChoicePollFooter, } export { ChoicePollRoot, ChoicePollHeader, ChoicePollTitle, ChoicePollDescription, ChoicePollOptions, ChoicePollOption, ChoicePollIndicator, ChoicePollLabel, ChoicePollProgress, ChoicePollPercentage, ChoicePollFooter, }

Choice Poll

Instalação

Dependências