Rating input (#147)

This PR aims to introduce the rating input

Author: Michele-Masciave

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- `RatingInput` component
+
 ## [3.10.2] - 2025-09-23
 
 ### Fixed

cypress/cypress/component/Rating/RatingInput.cy.tsx

@@ -0,0 +1,96 @@
+import { RatingInput, Form } from "react-hook-form-components";
+import { faker } from "@faker-js/faker";
+
+it("rating selection works", () => {
+  const name = faker.random.alpha(10);
+  const selectedRating = faker.datatype.number({ min: 1, max: 5 });
+
+  cy.mount(
+    <Form onSubmit={cy.spy().as("onSubmitSpy")}>
+      <RatingInput name={name} label={name} />
+      <input type="submit" />
+    </Form>,
+  );
+
+  // Click on a specific star
+  cy.get(`input[value="${selectedRating}"]`).click({ force: true });
+
+  cy.get("input[type=submit]").click({ force: true });
+  cy.get("@onSubmitSpy").should("be.calledOnceWith", { [name]: selectedRating });
+});
+
+it("default rating value works", () => {
+  const name = faker.random.alpha(10);
+  const defaultRating = faker.datatype.number({ min: 1, max: 5 });
+
+  cy.mount(
+    <Form defaultValues={{ [name]: defaultRating }} onSubmit={cy.spy().as("onSubmitSpy")}>
+      <RatingInput name={name} label={name} />
+      <input type="submit" />
+    </Form>,
+  );
+
+  // Verify the default rating is selected
+  cy.get(`input[value="${defaultRating}"]`).should("be.checked");
+
+  cy.get("input[type=submit]").click({ force: true });
+  cy.get("@onSubmitSpy").should("be.calledOnceWith", { [name]: defaultRating });
+});
+
+it("disabled rating works", () => {
+  const name = faker.random.alpha(10);
+
+  cy.mount(
+    <Form onSubmit={() => {}}>
+      <RatingInput name={name} label={name} disabled />
+    </Form>,
+  );
+
+  // All radio buttons should be disabled
+  cy.get(`input`).each(($input) => {
+    cy.wrap($input).should("be.disabled");
+  });
+});
+
+it("precision works with half stars", () => {
+  const name = faker.random.alpha(10);
+  const halfStarRating = 3.5;
+
+  cy.mount(
+    <Form defaultValues={{ [name]: halfStarRating }} onSubmit={cy.spy().as("onSubmitSpy")}>
+      <RatingInput name={name} label={name} precision={0.5} />
+      <input type="submit" />
+    </Form>,
+  );
+
+  cy.get("input[type=submit]").click({ force: true });
+  cy.get("@onSubmitSpy").should("be.calledOnceWith", { [name]: halfStarRating });
+});
+
+it("onBlur handler gets called", () => {
+  const name = faker.random.alpha(10);
+
+  cy.mount(
+    <Form onSubmit={() => {}}>
+      <RatingInput name={name} label={name} onBlur={cy.spy().as("onBlurSpy")} />
+    </Form>,
+  );
+
+  cy.get(`input[value="3"]`).focus();
+  cy.get(`input[value="3"]`).blur();
+  cy.get("@onBlurSpy").should("be.called");
+});
+
+it("onChange handler gets called", () => {
+  const name = faker.random.alpha(10);
+  const newRating = 4;
+
+  cy.mount(
+    <Form onSubmit={() => {}}>
+      <RatingInput name={name} label={name} onChange={cy.spy().as("onChangeSpy")} />
+    </Form>,
+  );
+
+  cy.get(`input[value="${newRating}"]`).click({ force: true });
+  cy.get("@onChangeSpy").should("be.calledWithMatch", Cypress.sinon.match.any, newRating);
+});

src/index.ts

@@ -7,6 +7,7 @@ export * from "./lib/types/Typeahead";
 export * from "./lib/types/LabelValueOption";
 export * from "./lib/DatePickerInput";
 export * from "./lib/ColorPickerInput";
+export * from "./lib/RatingInput";
 export * from "./lib/helpers/dateUtils";
 export * from "./lib/helpers/mui";
 export * from "./lib/helpers/typeahead";

src/lib/RatingInput.tsx

@@ -0,0 +1,79 @@
+import Rating, { RatingProps } from "@mui/material/Rating";
+import { Controller, FieldValues } from "react-hook-form";
+import { FormGroupLayout, FormGroupLayoutProps } from "./FormGroupLayout";
+import { useSafeNameId } from "./hooks/useSafeNameId";
+import { useFormContext } from "./context/FormContext";
+
+interface RatingInputProps<T extends FieldValues>
+  extends Omit<RatingProps, "name">,
+    Omit<FormGroupLayoutProps<T, never>, "onBlur" | "onChange" | "onKeyDown" | "layout" | "addonLeft" | "addonRight" | "addonProps"> {}
+
+const RatingInput = <T extends FieldValues>(props: RatingInputProps<T>) => {
+  const {
+    helpText,
+    label,
+    labelToolTip,
+    inputOnly,
+    hideValidationMessage,
+    labelStyle,
+    formGroupId,
+    inputGroupStyle,
+    sx,
+    disabled,
+    readOnly,
+    onBlur,
+    onChange,
+    ...rest
+  } = props;
+  const { name, id } = useSafeNameId(props.name, props.id);
+  const { disabled: formDisabled, control } = useFormContext<T>();
+
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field }) => (
+        <FormGroupLayout
+          name={name}
+          id={id}
+          helpText={helpText}
+          label={label}
+          labelToolTip={labelToolTip}
+          inputOnly={inputOnly}
+          hideValidationMessage={hideValidationMessage}
+          labelStyle={labelStyle}
+          formGroupId={formGroupId}
+          inputGroupStyle={inputGroupStyle}
+        >
+          <Rating
+            {...field}
+            {...rest}
+            sx={{
+              ...sx,
+              label: {
+                // unset the inline-block set by reboot
+                display: "unset",
+              },
+            }}
+            disabled={disabled || formDisabled}
+            readOnly={readOnly || formDisabled}
+            onBlur={(e) => {
+              if (onBlur) {
+                onBlur(e);
+              }
+              field.onBlur();
+            }}
+            onChange={(e, value) => {
+              if (onChange) {
+                onChange(e, value);
+              }
+              field.onChange(value);
+            }}
+          />
+        </FormGroupLayout>
+      )}
+    />
+  );
+};
+
+export { RatingInput, RatingInputProps };