@cloud-ru/ds-rating 1.0.0

package/src/components/Rating/Rating.tsx

@@ -0,0 +1,110 @@
+import { extractSupportProps, useUncontrolledProp, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { KeyboardEventHandler, useState } from 'react';
+
+import { APPEARANCE, DEFAULT_RATING_VALUE, DEFAULT_STAR_COUNT, SIZE, TEST_IDS } from '../../constants';
+import { RatingStar, Value } from '../../helperComponents';
+import { Appearance, Size } from '../../types';
+import { getRatingStarValue, getStarValue } from '../../utils';
+import styles from './styles.module.scss';
+
+export type RatingProps = WithSupportProps<{
+  /** Размер */
+  size?: Size;
+  /** Внешний вид (цветовая схема) */
+  appearance?: Appearance;
+  /** Общее количество звезд */
+  count: number;
+  /** Значение количества звезд в случае необходимости управления */
+  value?: number;
+  /** Количество звезд, заполненных по умолчанию */
+  defaultValue?: number;
+  /** Показывать или нет рейтинг в виде половины звезды */
+  allowHalf: boolean;
+  /** Разрещает сброс рейтинга при повторном нажатии на звезду */
+  allowClear: boolean;
+  /** Является ли поле доступным на изменение */
+  readonly: boolean;
+  /** Колбек, вызываемый на смену состояния */
+  onChange?(value: number): void;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/**
+ * Компонент Rating
+ */
+
+export function Rating({
+  count = DEFAULT_STAR_COUNT,
+  value,
+  defaultValue = DEFAULT_RATING_VALUE,
+  allowHalf = false,
+  allowClear = false,
+  readonly = false,
+  appearance = APPEARANCE.Yellow,
+  size = SIZE.S,
+  className,
+  onChange,
+  ...rest
+}: RatingProps) {
+  const [hoverRating, setHoverRating] = useState<null | number>(null);
+  const [rating, setRating] = useUncontrolledProp(value, defaultValue, onChange);
+
+  function getRating(updatedValue: number): number {
+    return rating === updatedValue && allowClear ? 0 : updatedValue;
+  }
+
+  const handleMouseEnter = (starIndex: number) => (value: Value) => {
+    if (readonly) {
+      return;
+    }
+    setHoverRating(getStarValue(starIndex, value, allowHalf));
+  };
+
+  const handleMouseLeave = () => {
+    if (readonly) {
+      return;
+    }
+    setHoverRating(null);
+  };
+
+  const handleClick = (starIndex: number) => (value: Value) => {
+    if (readonly) {
+      return;
+    }
+
+    setRating(getRating(getStarValue(starIndex, value, allowHalf)));
+  };
+
+  const handleKeyDown: (index: number) => KeyboardEventHandler<HTMLDivElement> = (starIndex: number) => e => {
+    if (e.code === 'Enter' || e.code === 'Space') {
+      e.stopPropagation();
+      setRating(getRating(starIndex));
+    }
+  };
+
+  return (
+    <div className={cn(styles.rating, className)} {...extractSupportProps(rest)}>
+      {[...Array(count)].map((_, index) => {
+        const starIndex = index + 1;
+        const value = getRatingStarValue(starIndex, hoverRating ?? rating, allowHalf);
+
+        return (
+          <RatingStar
+            key={index}
+            value={value}
+            size={size}
+            readonly={readonly}
+            appearance={appearance}
+            handleMouseEnter={handleMouseEnter(starIndex)}
+            handleMouseLeave={handleMouseLeave}
+            handleKeyDown={handleKeyDown(starIndex)}
+            handleClick={handleClick(starIndex)}
+            data-test-id={`${TEST_IDS.star}-${starIndex}`}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/Rating/index.ts

@@ -0,0 +1 @@
+export * from './Rating';

package/src/components/Rating/styles.module.scss

@@ -0,0 +1,4 @@
+.rating {
+  display: inline-flex;
+  align-items: center;
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Rating';

package/src/constants.ts

@@ -0,0 +1,27 @@
+export const APPEARANCE = {
+  Primary: 'primary',
+  Neutral: 'neutral',
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink',
+} as const;
+
+export const SIZE = {
+  Xs: 'xs',
+  S: 's',
+} as const;
+
+export const TEST_IDS = {
+  root: 'rating',
+  star: 'rating__star',
+  starHalfLeft: 'rating__star-half-left',
+  starHalfRight: 'rating__star-half-right',
+} as const;
+
+export const DEFAULT_STAR_COUNT = 5;
+export const DEFAULT_RATING_VALUE = 0;
+export const HALF_STAR_VALUE = 0.5;

package/src/helperComponents/RatingStar/RatingStar.tsx

@@ -0,0 +1,86 @@
+import { StarFilledSVG } from '@cloud-ru/ds-icons/interface/system';
+import cn from 'classnames';
+import { KeyboardEventHandler } from 'react';
+
+import { APPEARANCE, SIZE, TEST_IDS } from '../../constants';
+import { Appearance, Size } from '../../types';
+import { VALUE } from './constants';
+import styles from './styles.module.scss';
+import { Value } from './types';
+
+export type RatingStarProps = {
+  /** Значение */
+  value?: Value;
+  /** Размер */
+  size?: Size;
+  /** Внешний вид (цветовая схема) */
+  appearance?: Appearance;
+  /** Является ли поле доступным на изменение */
+  readonly?: boolean;
+  /** CSS-класс */
+  className?: string;
+  /** Действие при наведении мыши */
+  handleMouseEnter?(value: Value): void;
+  /** Действие при уведении мыши */
+  handleMouseLeave?(): void;
+  /** Действие при нажатии на клавишу клавиатуры */
+  handleKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+  /** Действие при клике части звезды мышью */
+  handleClick?(value: Value): void;
+  /** Стабильный идентификатор для e2e */
+  'data-test-id'?: string;
+};
+
+/**
+ * Компонент RatingStar
+ */
+
+export function RatingStar({
+  value = VALUE.Zero,
+  appearance = APPEARANCE.Yellow,
+  size = SIZE.S,
+  className,
+  readonly = false,
+  handleMouseEnter,
+  handleMouseLeave,
+  handleKeyDown,
+  handleClick,
+  'data-test-id': dataTestId,
+}: RatingStarProps) {
+  return (
+    <div
+      className={cn(styles.ratingStar, className)}
+      onKeyDown={handleKeyDown}
+      tabIndex={readonly ? undefined : 0}
+      data-value={value}
+      data-size={size}
+      data-appearance={appearance}
+      aria-checked={value !== VALUE.Zero}
+      role={readonly ? undefined : 'radio'}
+      data-test-id={dataTestId}
+    >
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- click-handler на обёртке нужен,
+          чтобы клик по любому месту половинки (включая SVG-иконку с её pointer-events) вызывал onClick.
+          Сама звезда (родитель) имеет role='radio' и tabIndex — это публичный интерактив. */}
+      <div
+        className={styles.firstStarContainer}
+        data-test-id={dataTestId ? TEST_IDS.starHalfLeft : undefined}
+        onMouseEnter={handleMouseEnter ? () => handleMouseEnter(VALUE.Half) : undefined}
+        onMouseLeave={handleMouseLeave || undefined}
+        onClick={handleClick ? () => handleClick(VALUE.Half) : undefined}
+      >
+        <StarFilledSVG className={styles.icon} />
+      </div>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        className={styles.secondStarContainer}
+        data-test-id={dataTestId ? TEST_IDS.starHalfRight : undefined}
+        onMouseEnter={handleMouseEnter ? () => handleMouseEnter(VALUE.Full) : undefined}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleClick ? () => handleClick(VALUE.Full) : undefined}
+      >
+        <StarFilledSVG className={styles.icon} />
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/RatingStar/constants.ts

@@ -0,0 +1,5 @@
+export const VALUE = {
+  Zero: '0%',
+  Half: '50%',
+  Full: '100%',
+} as const;

package/src/helperComponents/RatingStar/index.ts

@@ -0,0 +1,3 @@
+export * from './RatingStar';
+export type { Value } from './types';
+export { VALUE } from './constants';

package/src/helperComponents/RatingStar/styles.module.scss

@@ -0,0 +1,83 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/rating.module' as rating;
+
+$sizes: 'xs', 's';
+$appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue', 'violet', 'pink';
+
+@mixin star-color-value($firstHalfColor, $secondHalfColor) {
+  .firstStarContainer {
+    color: $firstHalfColor;
+  }
+
+  .secondStarContainer {
+    color: $secondHalfColor;
+  }
+}
+
+.firstStarContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+
+  width: 50%;
+}
+
+.ratingStar {
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+
+  // Инлайновый svg садится на базовую линию и при `xs` съезжает вниз на 1px.
+  svg {
+    display: block;
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      $width: base.simple-var(rating.$rating, 'anatomy', 'size', $size, 'container', 'min-width');
+      $height: base.simple-var(rating.$rating, 'anatomy', 'size', $size, 'container', 'min-height');
+
+      @include base.composite-var(rating.$rating, 'anatomy', 'size', $size, 'container');
+
+      svg {
+        width: $width !important;
+        height: $height !important;
+      }
+
+      .firstStarContainer,
+      .secondStarContainer {
+        height: base.simple-var(rating.$rating, 'anatomy', 'size', $size, 'container', 'min-height') !important;
+      }
+    }
+  }
+
+  // TODO: в макете focus-радиус привязан к `bgSurface-cornerRadius` (ошибка дизайна) —
+  // после фикса заменить `dimension-2` на корректный radius-токен.
+  &:focus-visible {
+    border-radius: base.$sn-primitive-dimension-2;
+    outline: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-available-complementary;
+    outline-offset: calc(-1 * #{base.$sn-primitive-strokeWeight-strokeSemiBold});
+  }
+
+  @each $appearance in $appearances {
+    &[data-appearance='#{$appearance}'] {
+      $emptyColor: base.$sn-theme-color-neutral-decor;
+      $filledColor: base.simple-var(base.$sn-theme, 'color', $appearance, 'accent');
+
+      &[data-value='0%'] {
+        @include star-color-value($emptyColor, $emptyColor);
+      }
+
+      &[data-value='50%'] {
+        @include star-color-value($filledColor, $emptyColor);
+      }
+
+      &[data-value='100%'] {
+        @include star-color-value($filledColor, $filledColor);
+      }
+    }
+  }
+}

package/src/helperComponents/RatingStar/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import { VALUE } from './constants';
+
+export type Value = ValueOf<typeof VALUE>;

package/src/helperComponents/index.ts

@@ -0,0 +1 @@
+export * from './RatingStar';

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './constants';
+export * from './types';

package/src/types.ts

@@ -0,0 +1,7 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import { APPEARANCE, SIZE } from './constants';
+
+export type Appearance = ValueOf<typeof APPEARANCE>;
+
+export type Size = ValueOf<typeof SIZE>;

package/src/utils.ts

@@ -0,0 +1,20 @@
+import { HALF_STAR_VALUE } from './constants';
+import { VALUE, Value } from './helperComponents';
+
+export function getRatingStarValue(starIndex: number, rating: number, allowHalf: boolean): Value {
+  const diff = rating - starIndex;
+
+  if (diff >= 0) {
+    return VALUE.Full;
+  }
+
+  if (allowHalf && diff === HALF_STAR_VALUE * -1) {
+    return VALUE.Half;
+  }
+
+  return VALUE.Zero;
+}
+
+export function getStarValue(starIndex: number, value: Value, allowHalf: boolean): number {
+  return allowHalf && value === VALUE.Half ? starIndex - HALF_STAR_VALUE : starIndex;
+}