mimir-ui-kit 1.27.1 → 1.27.3
Sign up to get free protection for your applications and to get access to all the features.
package/README.md
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
# Mimir-ui
|
|
2
|
-
|
|
3
|
-
## Установка и запуск проекта
|
|
4
|
-
|
|
5
|
-
1. Установите зависимости:
|
|
6
|
-
```bash
|
|
7
|
-
npm install
|
|
8
|
-
```
|
|
9
|
-
2. Запуск storybook
|
|
10
|
-
```bash
|
|
11
|
-
npm run storybook
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## Сборка проекта
|
|
15
|
-
|
|
16
|
-
1. Скрипт для сборки
|
|
17
|
-
```bash
|
|
18
|
-
npm run build
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Создание нового компонента
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm run create-component <ComponentName>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Поднятие версии для публикации на npm
|
|
28
|
-
|
|
29
|
-
Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
|
|
30
|
-
|
|
31
|
-
1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
npm version patch
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
|
|
38
|
-
```bash
|
|
39
|
-
npm version minor
|
|
40
|
-
```
|
|
41
|
-
3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
|
|
42
|
-
```bash
|
|
43
|
-
npm version major
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## Публикация на npm
|
|
47
|
-
|
|
48
|
-
1. Скрипт для публикации на npm:
|
|
49
|
-
```bash
|
|
50
|
-
npm publish
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## Ручная Генерация иконок
|
|
54
|
-
|
|
55
|
-
1. Экспортируем с фигмы иконку.
|
|
56
|
-
2. Добавляем ее в папку svgs.
|
|
57
|
-
3. Запускаем скрипт:
|
|
58
|
-
```bash
|
|
59
|
-
npm run icons
|
|
60
|
-
```
|
|
61
|
-
4. Смотрим в папку `icons/components`
|
|
62
|
-
5. Готово.
|
|
1
|
+
# Mimir-ui
|
|
2
|
+
|
|
3
|
+
## Установка и запуск проекта
|
|
4
|
+
|
|
5
|
+
1. Установите зависимости:
|
|
6
|
+
```bash
|
|
7
|
+
npm install
|
|
8
|
+
```
|
|
9
|
+
2. Запуск storybook
|
|
10
|
+
```bash
|
|
11
|
+
npm run storybook
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Сборка проекта
|
|
15
|
+
|
|
16
|
+
1. Скрипт для сборки
|
|
17
|
+
```bash
|
|
18
|
+
npm run build
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Создание нового компонента
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm run create-component <ComponentName>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Поднятие версии для публикации на npm
|
|
28
|
+
|
|
29
|
+
Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
|
|
30
|
+
|
|
31
|
+
1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm version patch
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
|
|
38
|
+
```bash
|
|
39
|
+
npm version minor
|
|
40
|
+
```
|
|
41
|
+
3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
|
|
42
|
+
```bash
|
|
43
|
+
npm version major
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Публикация на npm
|
|
47
|
+
|
|
48
|
+
1. Скрипт для публикации на npm:
|
|
49
|
+
```bash
|
|
50
|
+
npm publish
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Ручная Генерация иконок
|
|
54
|
+
|
|
55
|
+
1. Экспортируем с фигмы иконку.
|
|
56
|
+
2. Добавляем ее в папку svgs.
|
|
57
|
+
3. Запускаем скрипт:
|
|
58
|
+
```bash
|
|
59
|
+
npm run icons
|
|
60
|
+
```
|
|
61
|
+
4. Смотрим в папку `icons/components`
|
|
62
|
+
5. Готово.
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
1
2
|
import { TCommonStepsProps } from './types';
|
|
2
3
|
import { TStepsZone } from './types.ts';
|
|
3
4
|
|
|
4
|
-
export type TProps = TCommonStepsProps & {
|
|
5
|
+
export type TProps = TCommonStepsProps & Omit<ComponentProps<'div'>, 'onClick'> & {
|
|
5
6
|
/**
|
|
6
7
|
* Класс, применяемый к корневому элементу
|
|
7
8
|
*/
|
|
@@ -46,50 +47,28 @@ export type TProps = TCommonStepsProps & {
|
|
|
46
47
|
* Класс для иконки шага
|
|
47
48
|
*/
|
|
48
49
|
classNameIconStep?: string;
|
|
49
|
-
};
|
|
50
|
-
export declare const Steps: import('react').ForwardRefExoticComponent<TCommonStepsProps & {
|
|
51
|
-
/**
|
|
52
|
-
* Класс, применяемый к корневому элементу
|
|
53
|
-
*/
|
|
54
|
-
rootClassName?: string;
|
|
55
|
-
/**
|
|
56
|
-
* Класс, применяемый к шагам
|
|
57
|
-
*/
|
|
58
|
-
stepClassName?: string;
|
|
59
|
-
/**
|
|
60
|
-
* Количество шагов.
|
|
61
|
-
*/
|
|
62
|
-
quantity: number;
|
|
63
|
-
/**
|
|
64
|
-
* Текущий шаг
|
|
65
|
-
*/
|
|
66
|
-
current?: number;
|
|
67
|
-
/**
|
|
68
|
-
* Есть ли возможность переключать шаги по клику
|
|
69
|
-
*/
|
|
70
|
-
editable?: boolean;
|
|
71
50
|
/**
|
|
72
|
-
*
|
|
51
|
+
* Кастомные размеры шагов.
|
|
73
52
|
*/
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
disabled?: boolean;
|
|
53
|
+
customSize?: {
|
|
54
|
+
width?: number;
|
|
55
|
+
height?: number;
|
|
56
|
+
};
|
|
79
57
|
/**
|
|
80
|
-
*
|
|
58
|
+
* Заливать ли элементы цветом той зоны на которую сейчас наведен курсор
|
|
81
59
|
*/
|
|
82
|
-
|
|
60
|
+
fillByActualZone?: boolean;
|
|
83
61
|
/**
|
|
84
|
-
*
|
|
62
|
+
* Коллбек для события наведения на шаг курсором
|
|
85
63
|
*/
|
|
86
|
-
|
|
64
|
+
onStepMouseEnter?: (idx: number) => void;
|
|
87
65
|
/**
|
|
88
|
-
*
|
|
66
|
+
* Коллбэк для события покидания шага курсором
|
|
89
67
|
*/
|
|
90
|
-
|
|
68
|
+
onStepMouseLeave?: () => void;
|
|
91
69
|
/**
|
|
92
|
-
*
|
|
70
|
+
* Передача текущего цвета в родительский компонент
|
|
93
71
|
*/
|
|
94
|
-
|
|
95
|
-
}
|
|
72
|
+
setParentColor?: (color: string) => void;
|
|
73
|
+
};
|
|
74
|
+
export declare const Steps: import('react').ForwardRefExoticComponent<Omit<TProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -35,19 +35,34 @@ const Steps = forwardRef(
|
|
|
35
35
|
editable: editable2 = false,
|
|
36
36
|
size = EStepsSize.M,
|
|
37
37
|
onClick,
|
|
38
|
+
customSize,
|
|
38
39
|
resizable: resizable2,
|
|
39
40
|
disabled = false,
|
|
40
41
|
zones = [{ color: "#ff0000", to: quantity }],
|
|
41
42
|
unselectedColor = "#ffffff",
|
|
42
|
-
|
|
43
|
+
fillByActualZone,
|
|
44
|
+
onStepMouseEnter,
|
|
45
|
+
onStepMouseLeave,
|
|
46
|
+
setParentColor,
|
|
47
|
+
classNameIconStep,
|
|
48
|
+
...otherProps
|
|
43
49
|
} = props;
|
|
44
50
|
const idPrefix = useId();
|
|
45
51
|
const [step2, setStep] = useState(current);
|
|
46
52
|
const [hoveredStep, setHoveredStep] = useState(null);
|
|
47
53
|
const stepWasChangedRef = useRef(null);
|
|
54
|
+
const [currentColor, setCurrentColor] = useState(null);
|
|
48
55
|
useEffect(() => {
|
|
49
56
|
setStep(current);
|
|
50
57
|
}, [current]);
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
if (fillByActualZone) {
|
|
60
|
+
const zone = zones.find((zone2) => zone2.to >= (step2 + 1 || 0));
|
|
61
|
+
if (zone) {
|
|
62
|
+
setCurrentColor(zone.color);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}, []);
|
|
51
66
|
const handleClick = (idx) => {
|
|
52
67
|
const clickedStep = idx + DIFF_BETWEEN_STEP_AND_INDEX;
|
|
53
68
|
stepWasChangedRef.current = true;
|
|
@@ -62,9 +77,25 @@ const Steps = forwardRef(
|
|
|
62
77
|
const handleMouseEnter = (evt) => {
|
|
63
78
|
const hoveredIdx = Number(evt.currentTarget.id.split(ID_SEPARATOR)[1]);
|
|
64
79
|
setHoveredStep(hoveredIdx);
|
|
80
|
+
onStepMouseEnter && onStepMouseEnter(hoveredIdx);
|
|
81
|
+
const zone = zones.find((zone2) => zone2.to >= (hoveredIdx + 1 || 0));
|
|
82
|
+
if (zone) {
|
|
83
|
+
setParentColor && setParentColor(zone.color);
|
|
84
|
+
if (fillByActualZone) {
|
|
85
|
+
setCurrentColor(zone.color);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
65
88
|
};
|
|
66
89
|
const handleMouseLeave = () => {
|
|
67
90
|
setHoveredStep(null);
|
|
91
|
+
onStepMouseLeave && onStepMouseLeave();
|
|
92
|
+
const zone = zones.find((zone2) => zone2.to >= (step2 + 1 || 0));
|
|
93
|
+
if (zone) {
|
|
94
|
+
setParentColor && setParentColor(zone.color);
|
|
95
|
+
if (fillByActualZone) {
|
|
96
|
+
setCurrentColor(zone.color);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
68
99
|
};
|
|
69
100
|
const buttons = Array.from({ length: quantity }, (_, idx) => {
|
|
70
101
|
var _a, _b;
|
|
@@ -72,12 +103,24 @@ const Steps = forwardRef(
|
|
|
72
103
|
while (currentZone < zones.length && zones[currentZone].to <= idx) {
|
|
73
104
|
currentZone++;
|
|
74
105
|
}
|
|
75
|
-
|
|
106
|
+
let color;
|
|
107
|
+
if (fillByActualZone && hoveredStep !== null) {
|
|
108
|
+
color = idx <= hoveredStep ? currentColor : unselectedColor;
|
|
109
|
+
} else {
|
|
110
|
+
if (fillByActualZone) {
|
|
111
|
+
color = step2 > idx ? currentColor : unselectedColor;
|
|
112
|
+
} else {
|
|
113
|
+
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;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
76
116
|
return /* @__PURE__ */ jsx(
|
|
77
117
|
"button",
|
|
78
118
|
{
|
|
79
|
-
|
|
80
|
-
|
|
119
|
+
style: {
|
|
120
|
+
backgroundColor: resizable2 ? color !== null ? color : void 0 : void 0,
|
|
121
|
+
color: color !== null ? color : void 0,
|
|
122
|
+
height: customSize == null ? void 0 : customSize.height
|
|
123
|
+
},
|
|
81
124
|
id: `${idPrefix}${ID_SEPARATOR}${idx}`,
|
|
82
125
|
className: classNames(cls.step, cls[size], stepClassName, {
|
|
83
126
|
[cls.editable]: editable2 && !disabled,
|
|
@@ -102,6 +145,7 @@ const Steps = forwardRef(
|
|
|
102
145
|
return /* @__PURE__ */ jsx(
|
|
103
146
|
"div",
|
|
104
147
|
{
|
|
148
|
+
...otherProps,
|
|
105
149
|
className: classNames(
|
|
106
150
|
cls.container,
|
|
107
151
|
{
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TCommonVoteProps } from './types';
|
|
2
|
-
import { TStepsZone } from '../Steps
|
|
2
|
+
import { TStepsZone } from '../Steps';
|
|
3
3
|
|
|
4
4
|
export type TProps = TCommonVoteProps & {
|
|
5
5
|
/**
|
|
@@ -69,6 +69,17 @@ export type TProps = TCommonVoteProps & {
|
|
|
69
69
|
* Класс для иконки шага
|
|
70
70
|
*/
|
|
71
71
|
classNameIconStep?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Кастомные размеры шагов.
|
|
74
|
+
*/
|
|
75
|
+
customSize?: {
|
|
76
|
+
width?: number;
|
|
77
|
+
height?: number;
|
|
78
|
+
};
|
|
79
|
+
/**
|
|
80
|
+
* Заливать ли элементы цветом той зоны на которую сейчас наведен курсор
|
|
81
|
+
*/
|
|
82
|
+
fillByActualZone?: boolean;
|
|
72
83
|
};
|
|
73
84
|
export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVoteProps & {
|
|
74
85
|
/**
|
|
@@ -138,4 +149,15 @@ export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVote
|
|
|
138
149
|
* Класс для иконки шага
|
|
139
150
|
*/
|
|
140
151
|
classNameIconStep?: string;
|
|
152
|
+
/**
|
|
153
|
+
* Кастомные размеры шагов.
|
|
154
|
+
*/
|
|
155
|
+
customSize?: {
|
|
156
|
+
width?: number;
|
|
157
|
+
height?: number;
|
|
158
|
+
};
|
|
159
|
+
/**
|
|
160
|
+
* Заливать ли элементы цветом той зоны на которую сейчас наведен курсор
|
|
161
|
+
*/
|
|
162
|
+
fillByActualZone?: boolean;
|
|
141
163
|
} & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -3,7 +3,7 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
|
3
3
|
import { forwardRef, useState, useEffect } from "react";
|
|
4
4
|
import { DEFAULT_TITLE, EVoteSize, ZERO_VALUE } from "./constants.js";
|
|
5
5
|
import { Steps } from "../Steps/Steps.js";
|
|
6
|
-
import { ZERO_STEP } from "../Steps/constants.js";
|
|
6
|
+
import { ZERO_STEP, StepSize } from "../Steps/constants.js";
|
|
7
7
|
import '../../assets/Vote.css';const container = "_container_1akd9_2";
|
|
8
8
|
const title = "_title_1akd9_9";
|
|
9
9
|
const score = "_score_1akd9_16";
|
|
@@ -13,7 +13,6 @@ const cls = {
|
|
|
13
13
|
score
|
|
14
14
|
};
|
|
15
15
|
const Vote = forwardRef((props, ref) => {
|
|
16
|
-
var _a;
|
|
17
16
|
const {
|
|
18
17
|
rootClassName,
|
|
19
18
|
titleClassName,
|
|
@@ -27,6 +26,7 @@ const Vote = forwardRef((props, ref) => {
|
|
|
27
26
|
size = EVoteSize.M,
|
|
28
27
|
onClick,
|
|
29
28
|
resizable,
|
|
29
|
+
customSize,
|
|
30
30
|
disabled = false,
|
|
31
31
|
zones = [{ color: "#ff0000", to: quantity }],
|
|
32
32
|
unselectedColor = "#ffffff",
|
|
@@ -34,18 +34,32 @@ const Vote = forwardRef((props, ref) => {
|
|
|
34
34
|
unselected: "#000000",
|
|
35
35
|
selected: "#ffffff"
|
|
36
36
|
},
|
|
37
|
-
classNameIconStep
|
|
37
|
+
classNameIconStep,
|
|
38
|
+
fillByActualZone
|
|
38
39
|
} = props;
|
|
39
40
|
const [score2, setScore] = useState(current);
|
|
41
|
+
const [hoveredScore, setHoveredScore] = useState(null);
|
|
42
|
+
const [currentColor, setCurrentColor] = useState(unselectedColor);
|
|
40
43
|
const isZeroStep = score2 === ZERO_STEP;
|
|
41
44
|
useEffect(() => {
|
|
42
45
|
setScore(current);
|
|
43
46
|
}, [current]);
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
var _a;
|
|
49
|
+
const newColor = isZeroStep ? unselectedColor : ((_a = zones == null ? void 0 : zones.find((zone) => score2 <= zone.to)) == null ? void 0 : _a.color) ?? unselectedColor;
|
|
50
|
+
setCurrentColor(newColor);
|
|
51
|
+
}, [score2, zones, unselectedColor, isZeroStep]);
|
|
44
52
|
const handleStepsClick = (step) => {
|
|
45
53
|
setScore(step);
|
|
46
54
|
onClick && onClick(step);
|
|
47
55
|
};
|
|
48
|
-
const
|
|
56
|
+
const handleHoverStepEnter = (step) => {
|
|
57
|
+
setHoveredScore(step + 1);
|
|
58
|
+
};
|
|
59
|
+
const handleHoverStepLeave = () => {
|
|
60
|
+
setHoveredScore(null);
|
|
61
|
+
};
|
|
62
|
+
const maxContainerWidth = resizable ? quantity * ((customSize == null ? void 0 : customSize.width) ?? StepSize[size].width) : void 0;
|
|
49
63
|
return /* @__PURE__ */ jsxs("div", { className: classNames(cls.container, rootClassName), ref, children: [
|
|
50
64
|
!withoutTitle && /* @__PURE__ */ jsx("p", { className: classNames(cls.title, titleClassName), children: title2 }),
|
|
51
65
|
/* @__PURE__ */ jsx(
|
|
@@ -53,26 +67,34 @@ const Vote = forwardRef((props, ref) => {
|
|
|
53
67
|
{
|
|
54
68
|
className: classNames(cls.score, scoreClassName),
|
|
55
69
|
style: {
|
|
56
|
-
backgroundColor,
|
|
70
|
+
backgroundColor: isZeroStep ? unselectedColor : currentColor,
|
|
57
71
|
color: isZeroStep ? scoreTextColor.unselected : scoreTextColor.selected
|
|
58
72
|
},
|
|
59
|
-
children: isZeroStep ? ZERO_VALUE : score2
|
|
73
|
+
children: isZeroStep ? ZERO_VALUE : hoveredScore || score2
|
|
60
74
|
}
|
|
61
75
|
),
|
|
62
76
|
/* @__PURE__ */ jsx(
|
|
63
77
|
Steps,
|
|
64
78
|
{
|
|
79
|
+
style: {
|
|
80
|
+
maxWidth: maxContainerWidth
|
|
81
|
+
},
|
|
82
|
+
customSize,
|
|
65
83
|
rootClassName: stepsRootClassName,
|
|
66
84
|
stepClassName: stepsStepClassName,
|
|
67
85
|
quantity,
|
|
68
|
-
size,
|
|
86
|
+
size: EVoteSize.L,
|
|
69
87
|
current: score2,
|
|
70
88
|
editable: true,
|
|
71
89
|
resizable,
|
|
72
90
|
disabled,
|
|
73
91
|
onClick: handleStepsClick,
|
|
92
|
+
onStepMouseEnter: handleHoverStepEnter,
|
|
93
|
+
onStepMouseLeave: handleHoverStepLeave,
|
|
94
|
+
setParentColor: setCurrentColor,
|
|
74
95
|
zones,
|
|
75
96
|
unselectedColor,
|
|
97
|
+
fillByActualZone,
|
|
76
98
|
classNameIconStep
|
|
77
99
|
}
|
|
78
100
|
)
|