"use client"; import { useId, useState } from "react"; import { FormFieldShell, type FormFieldSize, type FormFieldWidth, type FormLabelOrientation, } from "@/components/registry/blocks/form-field-shell"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { getSourceText } from "@/components/registry/primitives/editables/source-normalizers"; import type { TextSource } from "@/components/registry/primitives/editables/text"; import { cn } from "@/lib/registry/cn"; import type { CmsProps } from "@/lib/registry/sitecore"; /** * Star / NPS rating input. Two variants share the field shell: * * - `Default` — star icons (`max` defaulting to 5), best for * review-style "How would you rate this?" prompts. * - `Nps` — numeric 0–10 buttons in a single row, the canonical * Net Promoter Score input. Anchored with "Not at all likely" * / "Extremely likely" labels at the ends. * * Both submit the picked number as the form value. */ export interface FormRatingFieldFields { Name?: TextSource; Label?: TextSource; Description?: TextSource; HelpText?: TextSource; Max?: number | string; StartLabel?: TextSource; EndLabel?: TextSource; } export interface FormRatingFieldProps extends CmsProps { name?: TextSource; label?: TextSource; description?: TextSource; helpText?: TextSource; /** Highest score. Defaults to 5 for star, 10 for NPS. */ max?: number | string; /** Label rendered under the lowest score (e.g. "Not at all likely"). */ startLabel?: TextSource; /** Label rendered under the highest score (e.g. "Extremely likely"). */ endLabel?: TextSource; required?: string | boolean; width?: FormFieldWidth; size?: FormFieldSize; labelOrientation?: FormLabelOrientation; } function parseN(value: number | string | undefined, fallback: number): number { if (value === undefined || value === "") return fallback; const n = typeof value === "number" ? value : Number(value); return Number.isFinite(n) ? Math.floor(n) : fallback; } function isEnabled(value: string | boolean | undefined): boolean { if (typeof value === "boolean") return value; if (!value) return false; return ["1", "true", "yes", "on", "enabled"].includes( value.trim().toLowerCase(), ); } const SIZE_STAR_CLASSES: Record = { default: "size-7", xs: "size-4", sm: "size-5", md: "size-7", lg: "size-8", xl: "size-10", }; const SIZE_NPS_CELL_CLASSES: Record = { default: "h-10 min-w-10 text-sm", xs: "h-7 min-w-7 text-xs", sm: "h-8 min-w-8 text-sm", md: "h-10 min-w-10 text-sm", lg: "h-12 min-w-12 text-base", xl: "h-14 min-w-14 text-lg", }; /** Star rating. Max defaults to 5 — `max=10` gives a Likert-ish scale. */ export function Default(props: FormRatingFieldProps) { const fieldId = useId(); const { name, label, description, helpText, max, required, width = "full", size = "default", labelOrientation = "stack", styles, id, } = props; const nameText = getSourceText(name) || "rating"; const labelText = getSourceText(label) || "Rating"; const descriptionText = getSourceText(description) || undefined; const helpTextText = getSourceText(helpText) || undefined; const maxN = parseN(max, 5); const isRequired = isEnabled(required); const [value, setValue] = useState(0); const [hover, setHover] = useState(0); return ( {({ inputId, descId, isRequired: req }) => (

{Array.from({ length: maxN }, (_, i) => i + 1).map((n) => { const active = (hover || value) >= n; return ( // biome-ignore lint/a11y/useSemanticElements: visually-styled rating buttons; native would lose the icon + hover preview chrome. ); })}

)} ); } /** NPS variant — 0–10 numeric scale, the survey-research standard. */ export function Nps(props: FormRatingFieldProps) { const fieldId = useId(); const { name, label, description, helpText, max, startLabel, endLabel, required, width = "full", size = "default", labelOrientation = "stack", styles, id, } = props; const nameText = getSourceText(name) || "nps"; const labelText = getSourceText(label) || "How likely are you to recommend us to a friend or colleague?"; const descriptionText = getSourceText(description) || undefined; const helpTextText = getSourceText(helpText) || undefined; const startLabelText = getSourceText(startLabel) || "Not at all likely"; const endLabelText = getSourceText(endLabel) || "Extremely likely"; const maxN = parseN(max, 10); const isRequired = isEnabled(required); const [value, setValue] = useState(null); return ( {({ inputId, descId, isRequired: req }) => (

{Array.from({ length: maxN + 1 }, (_, i) => i).map((n) => { const active = value === n; return ( // biome-ignore lint/a11y/useSemanticElements: visually-styled NPS button row; native radio inputs would lose the numeric tile chrome. ); })}

{startLabelText} {endLabelText}

)} ); } export const FormRatingField = Default; export default Default; export const componentType = "universal";

Form Rating Field

Showcase

Form Rating Field