add SfRating

Author: gioboa

packages/storefront-ui/src/components/SfRating/SfRating.tsx

@@ -0,0 +1,68 @@
+import { component$ } from '@builder.io/qwik';
+import { SfRatingSize } from '../../shared/SfRating';
+import { SfIconStar, SfIconStarFilled, SfIconStarHalf } from '../SfIcons';
+import { SfRatingProps } from './types';
+
+const sizeClasses = {
+  [SfRatingSize.xs]: 'text-xs',
+  [SfRatingSize.sm]: 'text-sm',
+  [SfRatingSize.base]: 'text-base',
+  [SfRatingSize.lg]: 'text-lg',
+  [SfRatingSize.xl]: 'text-xl',
+};
+
+export const SfRating = component$<SfRatingProps>(
+  ({
+    size = SfRatingSize.base,
+    max = 5,
+    value = 0,
+    halfIncrement,
+    ariaLabel,
+    class: _class,
+    ...attributes
+  }) => {
+    const clamp = (value: number, min: number, max: number) => {
+      return Math.min(Math.max(value, min), max);
+    };
+
+    const roundToNearest = (value: number, step: number) => {
+      return Math.round(value / step) * step;
+    };
+
+    const precision = halfIncrement ? 0.5 : 1;
+    const ratingValue = clamp(roundToNearest(value, precision), 0, max);
+    const partiallyFilled = Number(!Number.isInteger(ratingValue)); // 0 or 1
+    const filled = Math.ceil(ratingValue - partiallyFilled);
+    const empty = max - filled - partiallyFilled;
+    const label = ariaLabel ?? `${value} out of ${max}`;
+
+    return (
+      <div
+        role="img"
+        aria-label={label}
+        title={label}
+        class={`inline-flex items-center text-warning-500 ${sizeClasses[size]} ${_class}`}
+        data-testid="rating"
+        {...attributes}
+      >
+        {[...Array(filled).keys()].map((key) => (
+          <SfIconStarFilled
+            aria-hidden="true"
+            class="w-[1.5em] h-[1.5em]"
+            key={key}
+          />
+        ))}
+        {Boolean(partiallyFilled) && (
+          <SfIconStarHalf aria-hidden="true" class="w-[1.5em] h-[1.5em]" />
+        )}
+        {[...Array(empty).keys()].map((key) => (
+          <SfIconStar
+            aria-hidden="true"
+            class="text-disabled-500 w-[1.5em] h-[1.5em]"
+            key={key}
+          />
+        ))}
+      </div>
+    );
+  }
+);

packages/storefront-ui/src/components/SfRating/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+
+export { SfRating } from './SfRating';

packages/storefront-ui/src/components/SfRating/types.ts

@@ -0,0 +1,10 @@
+import { SfRatingSize } from '../../shared/SfRating';
+
+export type SfRatingProps = {
+  class?: string;
+  value?: number;
+  max?: number;
+  size?: `${SfRatingSize}`;
+  halfIncrement?: boolean;
+  ariaLabel?: string;
+};