Rating
Notation par etoiles en ligne pour un retour leger des apprenants. Installez Rating depuis le registre VLLNT UI avec la CLI shadcn.
Notation par etoiles en ligne pour un retour leger des apprenants. Fait partie de la famille learning dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Rating a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/rating.jsonSource
"use client";
import { useMemo, useState } from "react";
import { Star } from "lucide-react";
import type { ReactNode } from "react";
import { cn } from "../../lib/utils";
const sizeClasses = {
lg: "size-6",
md: "size-5",
sm: "size-4",
};
export type RatingProps = {
allowClear?: boolean;
className?: string;
defaultValue?: number;
label?: string;
max?: number;
onValueChange?: (value: number) => void;
readOnly?: boolean;
showValue?: boolean;
size?: keyof typeof sizeClasses;
value?: number;
};
type RatingStarsProps = {
activeValue: number;
hoveredValue: number;
label: string;
max: number;
onHoverChange: (value: number) => void;
onSelect: (value: number) => void;
readOnly: boolean;
size: keyof typeof sizeClasses;
};
function RatingStars({
activeValue,
hoveredValue,
label,
max,
onHoverChange,
onSelect,
readOnly,
size,
}: RatingStarsProps): ReactNode {
const stars = useMemo(
() => Array.from({ length: max }, (_, index) => index + 1),
[max],
);
const displayValue = hoveredValue || activeValue;
return (
<div
aria-label={label}
className="inline-flex items-center gap-1"
role="radiogroup"
>
{stars.map((starValue) => {
const isFilled = starValue <= displayValue;
return (
<button
aria-checked={activeValue === starValue}
aria-label={`${starValue} ${starValue === 1 ? "star" : "stars"}`}
className={cn(
"rounded-sm text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
!readOnly && "hover:text-amber-500",
isFilled && "text-amber-500",
)}
disabled={readOnly}
key={starValue}
onBlur={() => {
onHoverChange(0);
}}
onClick={() => {
onSelect(starValue);
}}
onMouseEnter={() => {
if (!readOnly) {
onHoverChange(starValue);
}
}}
onMouseLeave={() => {
onHoverChange(0);
}}
role="radio"
type="button"
>
<Star
className={cn(sizeClasses[size], isFilled && "fill-current")}
strokeWidth={1.75}
/>
</button>
);
})}
</div>
);
}
export function Rating({
allowClear = false,
className,
defaultValue = 0,
label = "Rating",
max = 5,
onValueChange,
readOnly = false,
showValue = false,
size = "md",
value,
}: RatingProps): ReactNode {
const isControlled = value !== undefined;
const [internalValue, setInternalValue] = useState(defaultValue);
const [hoveredValue, setHoveredValue] = useState(0);
const activeValue = isControlled ? (value ?? 0) : internalValue;
const handleSelect = (nextValue: number): void => {
const resolvedValue =
allowClear && activeValue === nextValue ? 0 : nextValue;
if (!isControlled) {
setInternalValue(resolvedValue);
}
onValueChange?.(resolvedValue);
};
return (
<div className={cn("inline-flex flex-col gap-2", className)}>
<div className="inline-flex items-center gap-3">
<RatingStars
activeValue={activeValue}
hoveredValue={hoveredValue}
label={label}
max={max}
onHoverChange={setHoveredValue}
onSelect={handleSelect}
readOnly={readOnly}
size={size}
/>
{showValue ? (
<span className="text-sm text-muted-foreground">
{activeValue}/{max}
</span>
) : null}
</div>
</div>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.