@via-profit/ui-kit 0.4.0 → 0.6.0

package/esm/ClickOutside/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import getElementRef from '../utils/getElementRef';
+export const mouseEventMap = {
+    onClick: 'click',
+    onMouseDown: 'mousedown',
+    onMouseUp: 'mouseup',
+};
+const ClickOutside = props => {
+    const { children, mouseEvent = 'onMouseDown', onOutsideClick, ignoreElements } = props;
+    const ref = React.useRef(null);
+    // A ref keeps an inline array from resubscribing the listener on every render
+    const ignoreElementsRef = React.useRef(ignoreElements);
+    ignoreElementsRef.current = ignoreElements;
+    React.useEffect(() => {
+        const mouseDownEvent = (event) => {
+            var _a;
+            let parentElem = event.target;
+            let needToClose = true;
+            while (parentElem && 'parentNode' in parentElem) {
+                if (parentElem === ref.current ||
+                    ((_a = ignoreElementsRef.current) === null || _a === void 0 ? void 0 : _a.some(element => element === parentElem))) {
+                    needToClose = false;
+                    break;
+                }
+                parentElem = parentElem.parentNode;
+            }
+            if (needToClose) {
+                onOutsideClick(event);
+            }
+        };
+        if (mouseEvent) {
+            window.document.addEventListener(mouseEventMap[mouseEvent], mouseDownEvent);
+        }
+        return () => {
+            if (mouseEvent) {
+                window.document.removeEventListener(mouseEventMap[mouseEvent], mouseDownEvent);
+            }
+        };
+    }, [onOutsideClick, mouseEvent]);
+    // Keep the child's own ref working alongside ours
+    const childRef = getElementRef(children);
+    const setRef = React.useCallback((el) => {
+        ref.current = el;
+        if (typeof childRef === 'function') {
+            childRef(el);
+        }
+        else if (childRef && typeof childRef === 'object') {
+            childRef.current = el;
+        }
+    }, [childRef]);
+    return (React.createElement(React.Fragment, null, React.cloneElement(children, {
+        ref: setRef,
+    })));
+};
+export default ClickOutside;

package/esm/Color/Color.js

@@ -0,0 +1,324 @@
+import { ColorParser } from './ColorParser';
+import { ColorGenerator } from './ColorGenerator';
+export class Color {
+    get r() {
+        return this._r;
+    }
+    get g() {
+        return this._g;
+    }
+    get b() {
+        return this._b;
+    }
+    get a() {
+        return this._a;
+    }
+    constructor(r, g, b, a = 1) {
+        this._r = this.clamp(r, 0, 255);
+        this._g = this.clamp(g, 0, 255);
+        this._b = this.clamp(b, 0, 255);
+        this._a = this.clamp(a, 0, 1);
+    }
+    /**
+     * Создает цвет из строкового представления
+     */
+    static fromString(value) {
+        const parsed = ColorParser.parse(value);
+        return new Color(parsed.r, parsed.g, parsed.b, parsed.a);
+    }
+    /**
+     * Создает цвет из RGB компонентов
+     */
+    static fromRgb(r, g, b, a = 1) {
+        return new Color(r, g, b, a);
+    }
+    /**
+     * Создает цвет из HEX строки
+     */
+    static fromHex(hex) {
+        return Color.fromString(hex);
+    }
+    /**
+     * Создает цвет из HSL строки
+     */
+    static fromHsl(hsl) {
+        return Color.fromString(hsl);
+    }
+    /**
+     * Создает цвет из UUID (использует генератор)
+     */
+    static fromUuid(uuid, palette) {
+        return ColorGenerator.fromUuid(uuid, palette);
+    }
+    /**
+     * Создает цвет из строки с хешированием
+     */
+    static fromHashString(str) {
+        return ColorGenerator.fromString(str);
+    }
+    /**
+     * Возвращает новый цвет, осветленный на указанное количество единиц
+     */
+    lighten(units) {
+        return new Color(this.clamp(this._r + units, 0, 255), this.clamp(this._g + units, 0, 255), this.clamp(this._b + units, 0, 255), this._a);
+    }
+    /**
+     * Возвращает новый цвет, затемненный на указанное количество единиц
+     */
+    darken(units) {
+        return this.lighten(-units);
+    }
+    /**
+     * Изменяет яркость цвета путем умножения каждого канала на коэффициент
+     * @param lum - Коэффициент изменения яркости (от -1 до 1, где отрицательные значения затемняют, положительные - осветляют)
+     * @returns Новый объект Color с измененной яркостью
+     *
+     * @example
+     * ```ts
+     * const color = Color.fromString('#ff0000');
+     * const lighter = color.luminance(0.2); // на 20% светлее
+     * const darker = color.luminance(-0.2); // на 20% темнее
+     * ```
+     */
+    luminance(lum) {
+        const factor = 1 + lum;
+        return new Color(this.clamp(Math.round(this._r * factor), 0, 255), this.clamp(Math.round(this._g * factor), 0, 255), this.clamp(Math.round(this._b * factor), 0, 255), this._a);
+    }
+    /**
+     * Возвращает новый цвет с измененной яркостью (процентное изменение)
+     */
+    adjustBrightness(percent) {
+        const factor = 1 + percent / 100;
+        return new Color(this.clamp(Math.round(this._r * factor), 0, 255), this.clamp(Math.round(this._g * factor), 0, 255), this.clamp(Math.round(this._b * factor), 0, 255), this._a);
+    }
+    /**
+     * Возвращает новый цвет с измененным альфа-каналом
+     */
+    alpha(value) {
+        return new Color(this._r, this._g, this._b, this.clamp(value, 0, 1));
+    }
+    /**
+     * Возвращает относительную яркость цвета (luminance)
+     */
+    getLuminance() {
+        const RED = 0.2126;
+        const GREEN = 0.7152;
+        const BLUE = 0.0722;
+        const GAMMA = 2.4;
+        const [r, g, b] = [this._r, this._g, this._b].map(v => {
+            v /= 255;
+            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
+        });
+        return r * RED + g * GREEN + b * BLUE;
+    }
+    /**
+     * Возвращает контраст между текущим цветом и переданным
+     */
+    getContrast(other) {
+        const otherColor = other instanceof Color ? other : Color.fromString(other);
+        const lum1 = this.getLuminance();
+        const lum2 = otherColor.getLuminance();
+        const brightest = Math.max(lum1, lum2);
+        const darkest = Math.min(lum1, lum2);
+        return (brightest + 0.05) / (darkest + 0.05);
+    }
+    /**
+     * Проверяет, светлый ли цвет: относительная яркость больше 0.5
+     */
+    isLight() {
+        return this.getLuminance() > 0.5;
+    }
+    /**
+     * Возвращает цвет текста (черный или белый), наиболее контрастный с текущим цветом
+     */
+    getContrastColor() {
+        const black = Color.fromString('#000000');
+        const white = Color.fromString('#FFFFFF');
+        // Compared by the contrast ratio: a luminance threshold picks white text
+        // for mid colors like orange, where black text is several times more readable
+        return this.getContrast(black) >= this.getContrast(white) ? black : white;
+    }
+    /**
+     * Возвращает новый цвет, смешанный с другим цветом
+     */
+    mix(other, weight = 0.5) {
+        const otherColor = other instanceof Color ? other : Color.fromString(other);
+        const w = this.clamp(weight, 0, 1);
+        return new Color(Math.round(this._r * (1 - w) + otherColor.r * w), Math.round(this._g * (1 - w) + otherColor.g * w), Math.round(this._b * (1 - w) + otherColor.b * w), this._a * (1 - w) + otherColor.a * w);
+    }
+    /**
+     * Возвращает цвет в разных форматах
+     */
+    toString(format = 'rgba') {
+        switch (format) {
+            case 'hex':
+                return this.toHexString();
+            case 'rgb':
+                return this.toRgbString(false);
+            case 'rgba':
+                return this.toRgbString(true);
+            case 'hsl':
+            case 'hsla':
+                return this.toHslString(format === 'hsla');
+            default:
+                return this.toRgbString(true);
+        }
+    }
+    toRgbString(includeAlpha = true) {
+        if (includeAlpha) {
+            return `rgba(${this._r}, ${this._g}, ${this._b}, ${this._a})`;
+        }
+        return `rgb(${this._r}, ${this._g}, ${this._b})`;
+    }
+    toHexString(includeAlpha = false) {
+        const toHex = (n) => {
+            const hex = Math.round(n).toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        };
+        let hex = '#' + toHex(this._r) + toHex(this._g) + toHex(this._b);
+        if (includeAlpha && this._a < 1) {
+            hex += toHex(this._a * 255);
+        }
+        return hex;
+    }
+    toHslString(includeAlpha = true) {
+        const [h, s, l] = this.toHsl();
+        if (includeAlpha) {
+            return `hsla(${h}, ${s}%, ${l}%, ${this._a})`;
+        }
+        return `hsl(${h}, ${s}%, ${l}%)`;
+    }
+    /**
+     * Возвращает HSL представление цвета
+     */
+    toHsl() {
+        const r = this._r / 255;
+        const g = this._g / 255;
+        const b = this._b / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0, s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+                default:
+                    // do nothing
+                    break;
+            }
+            h /= 6;
+        }
+        return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+    }
+    clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+    // #region Deprecated methods
+    /**
+     * @deprecated Use {@link Color.toRgbString} instead
+     */
+    rgbString() {
+        return this.toRgbString();
+    }
+    /**
+     * @deprecated Use {@link Color.toHslString} instead
+     */
+    hslString() {
+        return this.toHslString();
+    }
+    /**
+     * @deprecated Use {@link Color.toHexString} instead
+     */
+    hexString() {
+        return this.toHexString();
+    }
+    /**
+     * @deprecated Use getters `color.r`, `color.g`, `color.b`, `color.a` instead.
+     * This method will be removed in future versions.
+     *
+     * @returns {ParsedColor} Object with r, g, b, a properties
+     */
+    rgb() {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('[Color] rgb() is deprecated. Use getters color.r, color.g, color.b, color.a.');
+        }
+        // Возвращаем копию текущих значений для обратной совместимости
+        return {
+            r: this._r,
+            g: this._g,
+            b: this._b,
+            a: this._a,
+        };
+    }
+    /**
+     * @deprecated Use {@Link Color.fromString} or {@Link ColorParser.parse} instead.
+     */
+    static parseColor(value) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('[Color] parseColor() is deprecated. ' +
+                'Use Color.fromString(value) or ' +
+                'ColorParser.parse(value).');
+        }
+        try {
+            return ColorParser.parse(value);
+        }
+        catch (error) {
+            console.error(`Failed to parse color value «${value}»`);
+            return { r: 0, g: 0, b: 0, a: 1 };
+        }
+    }
+    /**
+     * @deprecated Use {@Link Color.fromHsl} or ColorParser.parse() instead.
+     */
+    static hslToRgb(value) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('[Color] hslToRgb() is deprecated. ' +
+                'Use Color.fromHsl(value) or ColorParser.parse(value)');
+        }
+        try {
+            return ColorParser.parse(value);
+        }
+        catch (error) {
+            throw new Error(`[@via-profit/ui-kit] «${value}» Is not a valid hsl color`);
+        }
+    }
+    /**
+     * @deprecated Use {@Link Color.fromString} with named colors instead.
+     */
+    static getHextByWebColor(value) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('[Color] getHextByWebColor() is deprecated. ' +
+                'Use Color.fromString(value).toHexString() instead');
+        }
+        return Color.fromString(value).toHexString();
+    }
+    /**
+     * @deprecated Do not use.
+     */
+    static intToRGB(i) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('[Color] intToRGB() is deprecated. Do not use');
+        }
+        // Сохраняем функциональность для обратной совместимости
+        const r = (i >> 16) & 0xFF;
+        const g = (i >> 8) & 0xFF;
+        const b = i & 0xFF;
+        return `rgb(${r},${g},${b})`;
+    }
+    /**
+     * @deprecated Use {@Link Color.fromUuid}
+     */
+    static uuidToColor(uuid) {
+        return Color.fromUuid(uuid);
+    }
+}

package/esm/Color/ColorGenerator.js

@@ -0,0 +1,137 @@
+import { Color } from './Color';
+export class ColorGenerator {
+    /**
+     * Генерирует цвет на основе UUID
+     */
+    static fromUuid(uuid, palette = 'pastel') {
+        const hash = this.stringToHashCode(uuid);
+        const paletteColors = this.palettes[palette];
+        const index = Math.abs(hash) % paletteColors.length;
+        // Используем публичный фабричный метод вместо конструктора
+        return Color.fromString(paletteColors[index]);
+    }
+    /**
+     * Генерирует цвет на основе строки с использованием хеш-функции
+     */
+    static fromString(str) {
+        const hash = this.stringToHashCode(str);
+        // Генерируем цвет в HSL пространстве для более равномерного распределения
+        const h = Math.abs(hash) % 360;
+        const s = 60 + (Math.abs(hash >> 8) % 40); // 60-100%
+        const l = 40 + (Math.abs(hash >> 16) % 40); // 40-80%
+        // Используем публичный фабричный метод вместо конструктора
+        return Color.fromString(`hsl(${h}, ${s}%, ${l}%)`);
+    }
+    /**
+     * Генерирует набор цветов для заданной строки (например, для градиентов)
+     */
+    static generatePalette(str, count = 5) {
+        const colors = [];
+        const baseHash = this.stringToHashCode(str);
+        for (let i = 0; i < count; i++) {
+            const hash = baseHash + i * 1000;
+            const h = (Math.abs(hash) + i * 30) % 360;
+            const s = 60 + (Math.abs(hash >> 8) % 40);
+            const l = 40 + (Math.abs(hash >> 16) % 40);
+            // Используем публичный фабричный метод
+            colors.push(Color.fromString(`hsl(${h}, ${s}%, ${l}%)`));
+        }
+        return colors;
+    }
+    /**
+     * Возвращает доступные палитры
+     */
+    static getPalettes() {
+        return Object.assign({}, this.palettes);
+    }
+    static stringToHashCode(str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = (hash << 5) - hash + char;
+            hash |= 0; // Преобразуем в 32-битное целое
+        }
+        return hash;
+    }
+}
+ColorGenerator.palettes = {
+    // Пастельная палитра
+    pastel: [
+        '#FFB6C1', // Светло-розовый
+        '#B0E0E6', // Голубой
+        '#C1FFC1', // Мятный
+        '#FFDAB9', // Персиковый
+        '#E6E6FA', // Лавандовый
+        '#FFFACD', // Лимонный
+        '#F0E68C', // Хаки
+        '#DDA0DD', // Сливовый
+        '#FBCEB1', // Абрикосовый
+        '#98FB98', // Бледно-зеленый
+    ],
+    // Яркая палитра
+    vibrant: [
+        '#FF4D4D', // Ярко-красный
+        '#4DFF4D', // Ярко-зеленый
+        '#4D4DFF', // Ярко-синий
+        '#FFFF4D', // Ярко-желтый
+        '#FF4DFF', // Ярко-розовый
+        '#4DFFFF', // Циан
+        '#FFA64D', // Оранжевый
+        '#B84DFF', // Фиолетовый
+        '#FF4DA6', // Розовый
+        '#4DFFB8', // Бирюзовый
+    ],
+    // Приглушенная палитра
+    muted: [
+        '#8B9DC3', // Приглушенный синий
+        '#B2C9AB', // Приглушенный зеленый
+        '#D3B5B5', // Приглушенный розовый
+        '#C9B79C', // Бежевый
+        '#9F9FAD', // Серо-синий
+        '#B8A99A', // Коричневатый
+        '#A7B3A2', // Серо-зеленый
+        '#C5AFA0', // Розовато-коричневый
+        '#9A9B73', // Оливковый
+        '#B79FAD', // Сиреневый
+    ],
+    // Осенняя палитра
+    autumn: [
+        '#D2691E', // Шоколадный
+        '#8B4513', // Коричневый
+        '#B22222', // Кирпичный
+        '#CD853F', // Перу
+        '#DEB887', // Дуб
+        '#F4A460', // Песочный
+        '#DAA520', // Золотой
+        '#B8860B', // Темно-золотой
+        '#A0522D', // Сиена
+        '#8B5A2B', // Темно-коричневый
+    ],
+    // Морская палитра
+    ocean: [
+        '#006994', // Темно-синий
+        '#20B2AA', // Зеленовато-голубой
+        '#87CEEB', // Небесно-голубой
+        '#4682B4', // Сине-серый
+        '#5F9EA0', // Кадетский синий
+        '#00CED1', // Бирюзовый
+        '#40E0D0', // Бирюзовый светлый
+        '#48D1CC', // Средний бирюзовый
+        '#AFEEEE', // Бледно-бирюзовый
+        '#B0E0E6', // Пудрово-голубой
+    ],
+    // Лесная палитра
+    forest: [
+        '#228B22', // Лесной зеленый
+        '#32CD32', // Лаймово-зеленый
+        '#6B8E23', // Оливково-зеленый
+        '#808000', // Оливковый
+        '#556B2F', // Темно-оливковый
+        '#8FBC8F', // Темно-морской зеленый
+        '#2E8B57', // Морской зеленый
+        '#3CB371', // Средний морской зеленый
+        '#66CDAA', // Средний аквамарин
+        '#90EE90', // Светло-зеленый
+    ],
+};
+export default ColorGenerator;