kamotive_ui 1.2.0 → 1.2.2

package/dist/components/Button/Button.module.css

@@ -0,0 +1,343 @@
+.story--wrapper-btn {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+  width: 900px;
+}
+
+.button {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16.5px;
+  border-radius: 10px;
+  padding: 5px 10px;
+  cursor: pointer;
+  padding: 0.5em 1.5em;
+  width: fit-content;
+ 
+}
+
+/* Стили для дефолтных кнопок */
+/* синяя */
+.button--fill-default {
+  background-color: var(--blue-main);
+  color: var(--white);
+  border: none;
+}
+.button--fill-default:hover {
+  background-color: var(--blue-secondary);
+  color: var(--white);
+  border: none;
+}
+.button--fill-default:active {
+  background-color: var(--blue-dark);
+  color: var(--white);
+  border: none;
+}
+.button--fill-default:disabled {
+  background-color: var(--blue-disabled);
+  color: var(--white);
+  border: none;
+  cursor: not-allowed;
+}
+/* ошибка */
+.button--fill-error {
+  background-color: var(--error-main);
+  color: var(--white);
+  border: none;
+}
+.button--fill-error:hover {
+  background-color: var(--error-secondary);
+  color: var(--white);
+  border: none;
+}
+.button--fill-error:active {
+  background-color: var(--error-dark);
+  color: var(--white);
+  border: none;
+}
+.button--fill-error:disabled {
+  background-color: var(--error-disabled);
+  color: var(--white);
+  border: none;
+  cursor: not-allowed;
+}
+/* success */
+.button--fill-success {
+  background-color: var(--success-main);
+  color: var(--white);
+  border: none;
+}
+.button--fill-success:hover {
+  background-color: var(--success-secondary);
+  color: var(--white);
+  border: none;
+}
+.button--fill-success:active {
+  background-color: var(--success-dark);
+  color: var(--white);
+  border: none;
+}
+.button--fill-success:disabled {
+  background-color: var(--success-disabled);
+  color: var(--white);
+  border: none;
+  cursor: not-allowed;
+}
+/* warning */
+.button--fill-warning {
+  background-color: var(--warning-main);
+  color: var(--white);
+  border: none;
+}
+.button--fill-warning:hover {
+  background-color: var(--warning-secondary);
+  color: var(--white);
+  border: none;
+}
+.button--fill-warning:active {
+  background-color: var(--warning-dark);
+  color: var(--white);
+  border: none;
+}
+.button--fill-warning:disabled {
+  background-color: var(--warning-disabled);
+  color: var(--white);
+  border: none;
+  cursor: not-allowed;
+}
+/* info */
+.button--fill-info {
+  background-color: var(--info-main);
+  color: var(--text-btn);
+  border: none;
+}
+.button--fill-info:hover {
+  background-color: var(--info-secondary);
+  color: var(--text-btn);
+  border: none;
+}
+.button--fill-info:active {
+  background-color: var(--info-dark);
+  color: var(--text-btn);
+  border: none;
+}
+.button--fill-info:disabled {
+  background-color: var(--info-main);
+  color: var(--text-btn-light);
+  border: none;
+  cursor: not-allowed;
+}
+
+/* Стили для outline кнопок */
+/* синяя */
+.button--outline-default {
+  background-color: transparent;
+  color: var(--blue-main);
+  border: 1px solid var(--blue-main);
+}
+.button--outline-default:hover {
+  background-color: rgba(13, 153, 255, 0.07);
+  color: var(--blue-main);
+  border: 1px solid var(--blue-main);
+}
+.button--outline-default:active {
+  background-color: rgba(13, 153, 255, 0.15);
+  color: var(--blue-main);
+  border: 1px solid var(--blue-main);
+}
+.button--outline-default:disabled {
+  background-color: transparent;
+  color: var(--blue-disabled);
+  border: 1px solid var(--blue-disabled);
+  cursor: not-allowed;
+}
+/* ошибка */
+.button--outline-error {
+  background-color: transparent;
+  color: var(--error-main);
+  border: 1px solid var(--error-main);
+}
+.button--outline-error:hover {
+  background-color: rgba(255, 59, 48, 0.07);
+  color: var(--error-main);
+  border: 1px solid var(--error-main);
+}
+.button--outline-error:active {
+  background-color: rgba(255, 59, 48, 0.15);
+  color: var(--error-main);
+  border: 1px solid var(--error-main);
+}
+.button--outline-error:disabled {
+  background-color: transparent;
+  color: var(--error-disabled);
+  border: 1px solid var(--error-disabled);
+  cursor: not-allowed;
+}
+/* success */
+.button--outline-success {
+  background-color: transparent;
+  color: var(--success-main);
+  border: 1px solid var(--success-main);
+}
+.button--outline-success:hover {
+  background-color: rgba(52, 199, 89, 0.07);
+  color: var(--success-secondary);
+  border: 1px solid var(--success-secondary);
+}
+.button--outline-success:active {
+  background-color: rgba(52, 199, 89, 0.15);
+  color: var(--success-dark);
+  border: 1px solid var(--success-dark);
+}
+.button--outline-success:disabled {
+  background-color: transparent;
+  color: var(--success-disabled);
+  border: 1px solid var(--success-disabled);
+  cursor: not-allowed;
+}
+/* warning */
+.button--outline-warning {
+  background-color: transparent;
+  color: var(--warning-main);
+  border: 1px solid var(--warning-main);
+}
+.button--outline-warning:hover {
+  background-color: rgba(255, 149, 0, 0.07);
+  color: var(--warning-secondary);
+  border: 1px solid var(--warning-secondary);
+}
+.button--outline-warning:active {
+  background-color: rgba(255, 149, 0, 0.15);
+  color: var(--warning-dark);
+  border: 1px solid var(--warning-dark);
+}
+.button--outline-warning:disabled {
+  background-color: transparent;
+  color: var(--warning-disabled);
+  border: 1px solid var(--warning-disabled);
+  cursor: not-allowed;
+}
+/* info */
+.button--outline-info {
+  background-color: transparent;
+  color: var(--text-btn);
+  border: 1px solid var(--text-btn);
+}
+.button--outline-info:hover {
+  background-color: rgba(111, 111, 111, 0.07);
+  color: var(--text-btn);
+  border: 1px solid var(--text-btn);
+}
+.button--outline-info:active {
+  background-color: rgba(111, 111, 111, 0.15);
+  color: var(--text-btn);
+  border: 1px solid var(--text-btn);
+}
+.button--outline-info:disabled {
+  background-color: transparent;
+  color: var(--text-btn-light);
+  border: 1px solid var(--text-btn-light);
+  cursor: not-allowed;
+}
+
+/* Стили для текстовых/ссылок  */
+.button--link-default {
+  color: var(--blue-main);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+}
+.button--link-default:hover {
+  text-decoration: underline;
+}
+.button--link-default:disabled {
+  color: var(--blue-disabled);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+  cursor: not-allowed;
+}
+.button--link-error {
+  color: var(--error-main);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+}
+.button--link-error:hover {
+  text-decoration: underline;
+}
+.button--link-error:disabled {
+  color: var(--error-disabled);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+  cursor: not-allowed;
+}
+.button--link-success {
+  color: var(--success-main);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+}
+.button--link-success:hover {
+  text-decoration: underline;
+}
+.button--link-success:disabled {
+  color: var(--success-disabled);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+  cursor: not-allowed;
+}
+.button--link-warning {
+  color: var(--warning-main);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+}
+.button--link-warning:hover {
+  text-decoration: underline;
+}
+.button--link-warning:disabled {
+  color: var(--warning-disabled);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+  cursor: not-allowed;
+}
+.button--link-info {
+  color: var(--text-btn);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+}
+.button--link-info:hover {
+  text-decoration: underline;
+}
+.button--link-info:disabled {
+  color: var(--text-btn-light);
+  border: none;
+  background-color: rgba(255, 255, 255, 0);
+  cursor: not-allowed;
+}
+
+/* Размеры кнопок */
+.button--sm {
+  /* font-size: 0.8rem; */
+  font-size: 12px;
+}
+.button--md {
+  /* font-size: 1rem; */
+  font-size: 14px;
+}
+.button--lg {
+  /* font-size: 1.2rem; */
+  font-size: 16px;
+}
+
+/* Стили кнопок иконка/без иконки/ссылка */
+.button--default {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0.5em 1em 0.5em 0.7em;
+}
+.button--text {
+  padding: 0.5em 1em;
+}
+.button--icon {
+  padding: 0.5em 0.7em;
+}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { CheckboxProps } from 'kamotive_ui';
+export declare const Checkbox: FC<CheckboxProps>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Checkbox.module.css';
+import classNames from 'classnames';
+export const Checkbox = ({ checked, onChange, disabled = false, size = 'sm', label }) => {
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (React.createElement("label", { className: styles["checkbox"] },
+        React.createElement("input", { type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled, className: classNames('input', size) }),
+        label));
+};

package/dist/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,78 @@
+.story--wrapper-checkbox {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  gap: 5px;
+
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--text-dark);
+}
+
+.checkbox.sm {
+  width: 12px;
+  height: 12px;
+}
+
+.checkbox.md {
+  width: 16px;
+  height: 16px;
+}
+
+.input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-block;
+  padding: 6px;
+
+  border: 1px solid var(--icons-active);
+  border-radius: 3px;
+  background-color: var(--white);
+  background-clip: content-box;
+  position: relative;
+  cursor: pointer;
+
+}
+
+.input[type="checkbox"]:hover,
+.input[type="checkbox"]:checked:hover,
+.input[type="checkbox"]:checked:hover::after {
+  border-color: var(--blue-main);
+}
+
+.input[type="checkbox"]:checked {
+  border-color: var(--icons-medium);
+}
+
+.input[type="checkbox"]:checked::after {
+  /* Стрелка*/
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -60%) rotate(45deg);
+  width: 40%;
+  height: 75%;
+
+  border: solid var(--icons-medium);
+  border-width: 0 2px 2px 0;
+  background-color: none;
+}
+
+.input[type="checkbox"]:disabled,
+.input[type="checkbox"]:disabled:checked,
+.input[type="checkbox"]:disabled:checked:after {
+  background-color: var(--white);
+  border-color: var(--icons-light);
+  cursor: not-allowed;
+  box-shadow: none;
+}

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ColorPickerProps } from 'kamotive_ui';
+/**
+ * Компонент ColorPicker представляет собой элемент управления для выбора цвета.
+ */
+export declare const ColorPicker: FC<ColorPickerProps>;
+export default ColorPicker;

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,115 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './ColorPicker.module.css';
+import classNames from 'classnames';
+import { Chrome } from '@uiw/react-color';
+import EditableInput from '@uiw/react-color-editable-input';
+import { GithubPlacement } from '@uiw/react-color-github';
+import { IconColorPicker10 } from '../../Icons';
+/**
+ * Компонент ColorPicker представляет собой элемент управления для выбора цвета.
+ */
+export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsHovered, width = 10, height = 10, autoOpen = false, onChange, }) => {
+    const [colorValue, setColorValue] = useState(mainColor);
+    const [selectedColor, setSelectedColor] = useState(color);
+    const [isColorChanged, setIsColorChanged] = useState(false);
+    const [isOpen, setIsOpen] = useState(autoOpen);
+    const [popoverPosition, setPopoverPosition] = useState('bottom');
+    const circleRef = useRef(null);
+    const popoverRef = useRef(null);
+    useEffect(() => {
+        // Обработчик клика вне компонента развертывания выбора цвета
+        const handleClickOutside = (event) => {
+            if (isOpen &&
+                popoverRef.current &&
+                circleRef.current &&
+                !popoverRef.current.contains(event.target) &&
+                !circleRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen && circleRef.current && popoverRef.current) {
+            const circle = circleRef.current.getBoundingClientRect();
+            const popover = popoverRef.current.getBoundingClientRect();
+            const viewport = {
+                top: 0,
+                bottom: window.innerHeight
+            };
+            // Проверяем, достаточно ли места снизу
+            const bottomSpace = viewport.bottom - circle.bottom;
+            const topSpace = circle.top - viewport.top;
+            // Если снизу недостаточно места и сверху места больше, размещаем сверху
+            if (bottomSpace < popover.height && topSpace > bottomSpace) {
+                setPopoverPosition('top');
+            }
+            else {
+                setPopoverPosition('bottom');
+            }
+        }
+        !autoOpen && document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            !autoOpen && document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const mainColorClasses = classNames(styles['circle'], {
+        'mainColor': mainColor,
+    });
+    const colorCircleDefaultClasses = classNames(styles['circle'], {
+        'colorCircleDefault': color === '#ffffff' && !isColorChanged || isColorChanged && selectedColor !== colorValue
+    });
+    const popoverClassess = classNames(styles['popover'], {
+        [`popover--${popoverPosition}`]: true,
+    });
+    // Функция для преобразования HEXA в HEX
+    const hexaToHex = (hexa = 'fff') => {
+        const cleanHex = hexa.replace('#', '');
+        if (cleanHex.length >= 8) {
+            return `#${cleanHex.slice(0, 6)}`;
+        }
+        if (cleanHex.length === 6) {
+            return `#${cleanHex}`;
+        }
+        if (cleanHex.length === 3) {
+            return `#${cleanHex[0]}${cleanHex[0]}${cleanHex[1]}${cleanHex[1]}${cleanHex[2]}${cleanHex[2]}`;
+        }
+        if (cleanHex.length < 6) {
+            return `#${cleanHex + '0'.repeat(6 - cleanHex.length)}`;
+        }
+        return '#ffffff';
+    };
+    const colorChangeHandler = (color) => {
+        const newColor = typeof color === 'string' ? color : color.hexa;
+        setIsColorChanged(true);
+        setColorValue(newColor);
+        setSelectedColor(newColor);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newColor);
+    };
+    useEffect(() => {
+        setSelectedColor(color);
+    }, [color]);
+    return (React.createElement("div", { className: (mainColor || recentColors) ? 'colorPickerWrapper' : '', onMouseLeave: () => setIsHovered && setIsHovered(false) },
+        mainColor && React.createElement("div", { className: mainColorClasses, style: {
+                width: `${width}px`,
+                height: `${height}px`,
+                backgroundColor: (colorValue === null || colorValue === void 0 ? void 0 : colorValue.startsWith('#')) ? colorValue : `var(--${colorValue})`,
+            }, onClick: () => setIsHovered && setIsHovered(false) }),
+        recentColors && recentColors.map((color, index) => (React.createElement("div", { key: index, className: "circle", style: {
+                width: `${width}px`,
+                height: `${height}px`,
+                backgroundColor: color.startsWith('#') ? color : `var(--${color})`,
+            }, onClick: () => colorChangeHandler(color) }))),
+        React.createElement("div", { className: "colorPicker" },
+            React.createElement("div", { ref: circleRef, className: colorCircleDefaultClasses, onClick: () => setIsOpen(!isOpen), style: {
+                    width: `${width}px`,
+                    height: `${height}px`,
+                    backgroundColor: selectedColor.startsWith('#') ? selectedColor : `var(--${selectedColor})`,
+                } }),
+            isOpen && (React.createElement("div", { ref: popoverRef, className: popoverClassess },
+                isOpen && React.createElement(IconColorPicker10, { className: "colorPickerIcon", htmlColor: 'var(--white)' }),
+                React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: "customChrome", showEyeDropper: false }),
+                React.createElement("div", { className: "hex", style: { padding: '0 10px 0 20px' } },
+                    React.createElement(EditableInput, { value: hexaToHex(selectedColor), style: { width: 68, alignItems: 'flex-start' }, onChange: (e, color) => {
+                            const formattedColor = hexaToHex(color.toString());
+                            colorChangeHandler(formattedColor);
+                        } })))))));
+};
+export default ColorPicker;