refactor(core): change value prop to rating in Rating

.changeset/plenty-news-smoke.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Rename `value` to `rating` for Rating component, remove unused props.

core/app/[locale]/(default)/(faceted)/_components/facets.tsx

@@ -213,7 +213,7 @@ export const Facets = ({ facets, pageType }: Props) => {
                       'text-primary': rating.isSelected,
                     })}
                   >
-                    <Rating value={parseInt(rating.value, 10)} />
+                    <Rating rating={parseInt(rating.value, 10)} />
                   </div>
                   <span className="ps-2">
                     <span className="sr-only">{t('rating', { currentRating: rating.value })}</span>

core/app/[locale]/(default)/compare/page.tsx

@@ -267,7 +267,7 @@ export default async function Compare({
                           ? `${product.name} has no rating specified`
                           : `${product.name} rating is ${product.reviewSummary.averageRating} out of 5 stars`
                       }
-                      value={product.reviewSummary.averageRating}
+                      rating={product.reviewSummary.averageRating}
                     />
                   </p>
                 </td>

core/app/[locale]/(default)/product/[slug]/_components/review-summary.tsx

@@ -34,7 +34,7 @@ export const ReviewSummary = async ({ data }: Props) => {
         aria-describedby={summaryId}
         className={cn('flex flex-nowrap text-primary', hasNoReviews && 'text-gray-400')}
       >
-        <Rating value={averageRating} />
+        <Rating rating={averageRating} />
       </p>
 
       <div className="font-semibold" id={summaryId}>

core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx

@@ -81,7 +81,7 @@ export const Reviews = async ({ productId }: Props) => {
             return (
               <li key={review.entityId}>
                 <p className="mb-3 flex flex-nowrap text-primary">
-                  <Rating value={review.rating} />
+                  <Rating rating={review.rating} />
                   <span className="sr-only">{t('reviewRating', { rating: review.rating })}</span>
                 </p>
                 <h4 className="text-base font-semibold">{review.title}</h4>

core/components/product-sheet/product-sheet-content.tsx

@@ -118,7 +118,7 @@ export const ProductSheetContent = () => {
                 product.reviewSummary.numberOfReviews === 0 && 'text-gray-400',
               )}
             >
-              <Rating size={16} value={product.reviewSummary.averageRating || 0} />
+              <Rating rating={product.reviewSummary.averageRating || 0} size={16} />
             </p>
 
             <div className="text-xs font-normal text-gray-500" id={summaryId}>

core/components/ui/rating/rating.tsx

@@ -1,5 +1,4 @@
-import { LucideIcon } from 'lucide-react';
-import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
 
 import { cn } from '~/lib/utils';
 
@@ -12,45 +11,27 @@ const roundHalf = (num: number) => {
   return Math.round(num * 2) / 2;
 };
 
-type StarIconType = FC<ComponentPropsWithoutRef<'svg'>> | LucideIcon;
-
 interface Props extends ComponentPropsWithoutRef<'span'> {
+  rating: number;
   size?: number;
-  starEmptyIcon?: StarIconType;
-  starFilledIcon?: StarIconType;
-  starHalfIcon?: StarIconType;
-  strokeColor?: string;
-  value: number;
 }
 
-const Rating = ({
-  className,
-  size = 24,
-  starEmptyIcon,
-  starFilledIcon,
-  starHalfIcon,
-  value,
-  ...props
-}: Props) => {
+const Rating = ({ className, rating, size = 24 }: Props) => {
   const stars: ReactElement[] = [];
-  const rating = roundHalf(value);
-
-  const StarHalf = starHalfIcon || StarHalfIcon;
-  const StarEmpty = starEmptyIcon || StarEmptyIcon;
-  const StarFilled = starFilledIcon || StarFilledIcon;
+  const roundedRating = roundHalf(rating);
 
   for (let i = 1; i <= MAX_RATING; i += 1) {
-    if (rating - i >= 0) {
-      stars.push(<StarFilled height={size} key={i} width={size} />);
-    } else if (rating - i > -1) {
-      stars.push(<StarHalf height={size} key={i} width={size} />);
+    if (roundedRating - i >= 0) {
+      stars.push(<StarFilledIcon height={size} key={i} width={size} />);
+    } else if (roundedRating - i > -1) {
+      stars.push(<StarHalfIcon height={size} key={i} width={size} />);
     } else {
-      stars.push(<StarEmpty height={size} key={i} width={size} />);
+      stars.push(<StarEmptyIcon height={size} key={i} width={size} />);
     }
   }
 
   return (
-    <span className={cn('inline-flex fill-current', className)} role="img" {...props}>
+    <span className={cn('inline-flex fill-current', className)} role="img">
       {stars}
     </span>
   );