mimir-ui-kit 1.27.2 → 1.27.4

package/README.md

@@ -1,62 +1,62 @@
-# Mimir-ui
-
-## Установка и запуск проекта
-
-1. Установите зависимости:
-   ```bash
-   npm install
-   ```
-2. Запуск storybook
-   ```bash
-   npm run storybook
-   ```
-
-## Сборка проекта
-
-1. Скрипт для сборки
-   ```bash
-   npm run build
-   ```
-
-## Создание нового компонента
-
-```bash
-npm run create-component <ComponentName>
-```
-
-## Поднятие версии для публикации на npm
-
-Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
-
-1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
-
-```bash
-npm version patch
-```
-
-2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
-   ```bash
-   npm version minor
-   ```
-3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
-   ```bash
-   npm version major
-   ```
-
-## Публикация на npm
-
-1. Скрипт для публикации на npm:
-   ```bash
-   npm publish
-   ```
-
-## Ручная Генерация иконок
-
-1. Экспортируем с фигмы иконку.
-2. Добавляем ее в папку svgs.
-3. Запускаем скрипт:
-   ```bash
-   npm run icons
-   ```
-4. Смотрим в папку `icons/components`
-5. Готово.
+# Mimir-ui
+
+## Установка и запуск проекта
+
+1. Установите зависимости:
+   ```bash
+   npm install
+   ```
+2. Запуск storybook
+   ```bash
+   npm run storybook
+   ```
+
+## Сборка проекта
+
+1. Скрипт для сборки
+   ```bash
+   npm run build
+   ```
+
+## Создание нового компонента
+
+```bash
+npm run create-component <ComponentName>
+```
+
+## Поднятие версии для публикации на npm
+
+Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
+
+1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
+
+```bash
+npm version patch
+```
+
+2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
+   ```bash
+   npm version minor
+   ```
+3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
+   ```bash
+   npm version major
+   ```
+
+## Публикация на npm
+
+1. Скрипт для публикации на npm:
+   ```bash
+   npm publish
+   ```
+
+## Ручная Генерация иконок
+
+1. Экспортируем с фигмы иконку.
+2. Добавляем ее в папку svgs.
+3. Запускаем скрипт:
+   ```bash
+   npm run icons
+   ```
+4. Смотрим в папку `icons/components`
+5. Готово.

package/dist/components/Steps/Steps.d.ts

@@ -54,5 +54,21 @@ export type TProps = TCommonStepsProps & Omit<ComponentProps<'div'>, 'onClick'>
         width?: number;
         height?: number;
     };
+    /**
+     * Заливать ли элементы цветом той зоны на которую сейчас наведен курсор
+     */
+    fillByActualZone?: boolean;
+    /**
+     * Коллбек для события наведения на шаг курсором
+     */
+    onStepMouseEnter?: (idx: number) => void;
+    /**
+     * Коллбэк для события покидания шага курсором
+     */
+    onStepMouseLeave?: () => void;
+    /**
+     * Передача текущего цвета в родительский компонент
+     */
+    setParentColor?: (color: string) => void;
 };
 export declare const Steps: import('react').ForwardRefExoticComponent<Omit<TProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Steps/Steps.js

@@ -40,6 +40,10 @@ const Steps = forwardRef(
       disabled = false,
       zones = [{ color: "#ff0000", to: quantity }],
       unselectedColor = "#ffffff",
+      fillByActualZone,
+      onStepMouseEnter,
+      onStepMouseLeave,
+      setParentColor,
       classNameIconStep,
       ...otherProps
     } = props;
@@ -47,9 +51,18 @@ const Steps = forwardRef(
     const [step2, setStep] = useState(current);
     const [hoveredStep, setHoveredStep] = useState(null);
     const stepWasChangedRef = useRef(null);
+    const [currentColor, setCurrentColor] = useState(null);
     useEffect(() => {
       setStep(current);
     }, [current]);
+    useEffect(() => {
+      if (fillByActualZone) {
+        const zone = zones.find((zone2) => zone2.to >= (step2 + 1 || 0));
+        if (zone) {
+          setCurrentColor(zone.color);
+        }
+      }
+    }, []);
     const handleClick = (idx) => {
       const clickedStep = idx + DIFF_BETWEEN_STEP_AND_INDEX;
       stepWasChangedRef.current = true;
@@ -64,9 +77,25 @@ const Steps = forwardRef(
     const handleMouseEnter = (evt) => {
       const hoveredIdx = Number(evt.currentTarget.id.split(ID_SEPARATOR)[1]);
       setHoveredStep(hoveredIdx);
+      onStepMouseEnter && onStepMouseEnter(hoveredIdx);
+      const zone = zones.find((zone2) => zone2.to >= (hoveredIdx + 1 || 0));
+      if (zone) {
+        setParentColor && setParentColor(zone.color);
+        if (fillByActualZone) {
+          setCurrentColor(zone.color);
+        }
+      }
     };
     const handleMouseLeave = () => {
       setHoveredStep(null);
+      onStepMouseLeave && onStepMouseLeave();
+      const zone = zones.find((zone2) => zone2.to >= (step2 || 0));
+      if (zone) {
+        setParentColor && setParentColor(zone.color);
+        if (fillByActualZone) {
+          setCurrentColor(zone.color);
+        }
+      }
     };
     const buttons = Array.from({ length: quantity }, (_, idx) => {
       var _a, _b;
@@ -74,14 +103,22 @@ const Steps = forwardRef(
       while (currentZone < zones.length && zones[currentZone].to <= idx) {
         currentZone++;
       }
-      const color = hoveredStep !== null && idx <= hoveredStep ? (_a = zones[currentZone]) == null ? void 0 : _a.color : step2 > idx && hoveredStep === null ? (_b = zones[currentZone]) == null ? void 0 : _b.color : unselectedColor;
+      let color;
+      if (fillByActualZone && hoveredStep !== null) {
+        color = idx <= hoveredStep ? currentColor : unselectedColor;
+      } else {
+        if (fillByActualZone) {
+          color = step2 > idx ? currentColor : unselectedColor;
+        } else {
+          color = hoveredStep !== null && idx <= hoveredStep ? (_a = zones[currentZone]) == null ? void 0 : _a.color : step2 > idx && hoveredStep === null ? (_b = zones[currentZone]) == null ? void 0 : _b.color : unselectedColor;
+        }
+      }
       return /* @__PURE__ */ jsx(
         "button",
         {
-          type: "button",
           style: {
-            backgroundColor: resizable2 ? color : void 0,
-            color,
+            backgroundColor: resizable2 ? color !== null ? color : void 0 : void 0,
+            color: color !== null ? color : void 0,
             height: customSize == null ? void 0 : customSize.height
           },
           id: `${idPrefix}${ID_SEPARATOR}${idx}`,

package/dist/components/TextArea/types.d.ts

@@ -1,3 +1,3 @@
 import { TextareaHTMLAttributes } from 'react';
 
-export type TTextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly' | 'size' | 'placeholder'>;
+export type TTextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly' | 'size'>;

package/dist/components/Vote/Vote.d.ts

@@ -1,5 +1,5 @@
 import { TCommonVoteProps } from './types';
-import { TStepsZone } from '../Steps/types.ts';
+import { TStepsZone } from '../Steps';
 
 export type TProps = TCommonVoteProps & {
     /**
@@ -76,6 +76,10 @@ export type TProps = TCommonVoteProps & {
         width?: number;
         height?: number;
     };
+    /**
+     * Заливать ли элементы цветом той зоны на которую сейчас наведен курсор
+     */
+    fillByActualZone?: boolean;
 };
 export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVoteProps & {
     /**
@@ -152,4 +156,8 @@ export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVote
         width?: number;
         height?: number;
     };
+    /**
+     * Заливать ли элементы цветом той зоны на которую сейчас наведен курсор
+     */
+    fillByActualZone?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Vote/Vote.js

@@ -13,7 +13,6 @@ const cls = {
   score
 };
 const Vote = forwardRef((props, ref) => {
-  var _a;
   const {
     rootClassName,
     titleClassName,
@@ -35,19 +34,44 @@ const Vote = forwardRef((props, ref) => {
       unselected: "#000000",
       selected: "#ffffff"
     },
-    classNameIconStep
+    classNameIconStep,
+    fillByActualZone
   } = props;
   const [score2, setScore] = useState(current);
+  const [hoveredScore, setHoveredScore] = useState(null);
+  const [currentColor, setCurrentColor] = useState(unselectedColor);
   const isZeroStep = score2 === ZERO_STEP;
   useEffect(() => {
     setScore(current);
   }, [current]);
+  useEffect(() => {
+    var _a;
+    const newColor = isZeroStep ? unselectedColor : ((_a = zones == null ? void 0 : zones.find((zone) => score2 <= zone.to)) == null ? void 0 : _a.color) ?? unselectedColor;
+    setCurrentColor(newColor);
+  }, [score2, zones, unselectedColor, isZeroStep]);
   const handleStepsClick = (step) => {
     setScore(step);
     onClick && onClick(step);
   };
-  const backgroundColor = isZeroStep ? unselectedColor : ((_a = zones == null ? void 0 : zones.find((zone) => score2 <= zone.to)) == null ? void 0 : _a.color) ?? unselectedColor;
+  const handleHoverStepEnter = (step) => {
+    setHoveredScore(step + 1);
+  };
+  const handleHoverStepLeave = () => {
+    setHoveredScore(null);
+  };
   const maxContainerWidth = resizable ? quantity * ((customSize == null ? void 0 : customSize.width) ?? StepSize[size].width) : void 0;
+  let showingScore;
+  let showingScoreBackground;
+  let showingScoreColor;
+  if (hoveredScore) {
+    showingScore = hoveredScore;
+    showingScoreBackground = currentColor;
+    showingScoreColor = scoreTextColor.selected;
+  } else {
+    showingScore = isZeroStep ? ZERO_VALUE : score2;
+    showingScoreBackground = isZeroStep ? unselectedColor : currentColor;
+    showingScoreColor = isZeroStep ? scoreTextColor.unselected : scoreTextColor.selected;
+  }
   return /* @__PURE__ */ jsxs("div", { className: classNames(cls.container, rootClassName), ref, children: [
     !withoutTitle && /* @__PURE__ */ jsx("p", { className: classNames(cls.title, titleClassName), children: title2 }),
     /* @__PURE__ */ jsx(
@@ -55,10 +79,10 @@ const Vote = forwardRef((props, ref) => {
       {
         className: classNames(cls.score, scoreClassName),
         style: {
-          backgroundColor,
-          color: isZeroStep ? scoreTextColor.unselected : scoreTextColor.selected
+          backgroundColor: showingScoreBackground,
+          color: showingScoreColor
         },
-        children: isZeroStep ? ZERO_VALUE : score2
+        children: showingScore
       }
     ),
     /* @__PURE__ */ jsx(
@@ -77,8 +101,12 @@ const Vote = forwardRef((props, ref) => {
         resizable,
         disabled,
         onClick: handleStepsClick,
+        onStepMouseEnter: handleHoverStepEnter,
+        onStepMouseLeave: handleHoverStepLeave,
+        setParentColor: setCurrentColor,
         zones,
         unselectedColor,
+        fillByActualZone,
         classNameIconStep
       }
     )

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.27.2",
+  "version": "1.27.4",
   "type": "module",
   "exports": {
     ".": {