@alfalab/core-components 19.11.1 → 20.0.0

package/checkbox-group/cssm/Component.d.ts

@@ -1,50 +0,0 @@
-import { FC, ReactNode, ChangeEvent, MouseEvent } from 'react';
-type Direction = 'horizontal' | 'vertical';
-type CheckboxGroupType = 'checkbox' | 'tag';
-type CheckboxGroupProps = {
-    /**
-     * Заголовок группы
-     */
-    label?: ReactNode;
-    /**
-     * Направление
-     */
-    direction?: Direction;
-    /**
-     * Тип компонента
-     */
-    type?: CheckboxGroupType;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Отображение ошибки
-     */
-    error?: string | boolean;
-    /**
-     * Текст подсказки снизу
-     */
-    hint?: ReactNode;
-    /**
-     * Дочерние элементы. Ожидаются компоненты `Checkbox` или `Tag`
-     */
-    children: ReactNode;
-    /**
-     * Обработчик изменения значения 'checked' одного из дочерних компонентов
-     */
-    onChange?: (event?: ChangeEvent | MouseEvent, payload?: {
-        checked: boolean;
-        name?: string;
-    }) => void;
-    /**
-     * Управление возможностью изменения состояния 'checked' дочерних компонентов CheckBox
-     */
-    disabled?: boolean;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-declare const CheckboxGroup: FC<CheckboxGroupProps>;
-export { Direction, CheckboxGroupType, CheckboxGroupProps, CheckboxGroup };

package/checkbox-group/cssm/Component.js

@@ -1,79 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var styles = require('./index.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var CheckboxGroup = function (_a) {
-    var _b;
-    var children = _a.children, className = _a.className, _c = _a.direction, direction = _c === void 0 ? 'vertical' : _c, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, _d = _a.type, type = _d === void 0 ? 'checkbox' : _d, dataTestId = _a.dataTestId, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
-    var renderCheckbox = function (child) {
-        var _a = child.props, name = _a.name, checked = _a.checked, childClassName = _a.className;
-        var handleChange = function (event) {
-            if (onChange) {
-                onChange(event, { name: name, checked: !checked });
-            }
-        };
-        return React.cloneElement(child, __assign(__assign({ onChange: handleChange, disabled: disabled }, child.props), { className: cn__default['default'](childClassName, styles__default['default'].checkbox) }));
-    };
-    var renderTag = function (child) {
-        var _a = child.props, name = _a.name, checked = _a.checked;
-        var handleChange = function (event) {
-            if (onChange) {
-                onChange(event, { name: name, checked: !checked });
-            }
-        };
-        var clone = React.cloneElement(child, __assign({ onClick: handleChange, disabled: disabled }, child.props));
-        return (
-        // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        React__default['default'].createElement("label", { className: cn__default['default'](styles__default['default'].checkbox, styles__default['default'].tagLabel) },
-            clone,
-            React__default['default'].createElement("input", { type: 'checkbox', autoComplete: 'off', onChange: handleChange, disabled: disabled || child.props.disabled, checked: checked, className: styles__default['default'].hiddenInput })));
-    };
-    var errorMessage = typeof error === 'string' ? error : '';
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][type], styles__default['default'][direction], (_b = {}, _b[styles__default['default'].error] = error, _b), className), "data-test-id": dataTestId },
-        label ? React__default['default'].createElement("span", { className: styles__default['default'].label }, label) : null,
-        children ? (React__default['default'].createElement("div", { className: styles__default['default'].checkboxList }, React.Children.map(children, function (child) {
-            if (React.isValidElement(child)) {
-                return type === 'checkbox' ? renderCheckbox(child) : renderTag(child);
-            }
-            return null;
-        }))) : null,
-        errorMessage && (React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].sub, styles__default['default'].errorMessage) }, errorMessage)),
-        hint && !errorMessage && React__default['default'].createElement("span", { className: cn__default['default'](styles__default['default'].sub, styles__default['default'].hint) }, hint)));
-};
-
-exports.CheckboxGroup = CheckboxGroup;

package/checkbox-group/cssm/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/checkbox-group/cssm/index.js

@@ -1,10 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('./index.module.css');
-
-
-
-exports.CheckboxGroup = Component.CheckboxGroup;

package/checkbox-group/cssm/index.module.css

@@ -1,94 +0,0 @@
-:root {
-    --color-light-text-negative: #d91d0b;
-    --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-xl: 24px;
-    --gap-xs-neg: -8px;
-    --gap-xl-neg: -24px;
-}
-:root {
-    --checkbox-group-error-color: var(--color-light-text-negative);
-    --checkbox-group-hint-color: var(--color-light-text-secondary);
-    --checkbox-group-label-color: var(--color-light-text-primary);
-}
-.component {
-    display: flex;
-    flex-direction: column;
-}
-.error {
-    padding-left: var(--gap-xs);
-    border-left: 1px solid var(--color-light-text-negative);
-}
-.checkboxList {
-    display: flex;
-}
-.vertical .checkboxList {
-    flex-direction: column;
-    align-items: flex-start;
-}
-.vertical .checkbox {
-    margin-bottom: var(--gap-m)
-}
-.vertical .checkbox:last-child {
-        margin-bottom: 0;
-    }
-.horizontal .checkboxList {
-    flex-wrap: wrap;
-    margin-right: var(--gap-xl-neg);
-    margin-bottom: var(--gap-xs-neg);
-}
-.tag.horizontal .checkboxList {
-    margin-right: var(--gap-xs-neg);
-}
-.horizontal .checkbox {
-    margin-right: var(--gap-xl);
-    margin-bottom: var(--gap-xs);
-}
-.horizontal .tagLabel {
-    margin-right: var(--gap-xs);
-}
-.label {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    margin-bottom: var(--gap-s);
-    color: var(--checkbox-group-label-color);
-}
-.sub {
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 400;
-    margin-top: var(--gap-s);
-}
-.errorMessage {
-    color: var(--checkbox-group-error-color);
-}
-.hint {
-    color: var(--checkbox-group-hint-color);
-}
-.hiddenInput {
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    opacity: 0;
-}
-.tagLabel {
-    position: relative;
-}

package/circular-progress-bar/cssm/Component.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-type CircularProgressBarProps = {
-    /**
-     * Уровень прогресса, %
-     */
-    value: number;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Основной текст
-     */
-    title?: string;
-    /**
-     * Дополнительный текст
-     */
-    subtitle?: string;
-    /**
-     * Цвет заполнения
-     */
-    view?: 'positive' | 'negative';
-    /**
-     * Размер (l - 144x144px, m - 120x120px)
-     */
-    size?: 'l' | 'm';
-    /**
-     * Id компонента для тестов
-     */
-    dataTestId?: string;
-};
-/**
- * Компонент круглого прогресс бара.
- */
-declare const CircularProgressBar: React.FC<CircularProgressBarProps>;
-export { CircularProgressBarProps, CircularProgressBar };

package/circular-progress-bar/cssm/Component.js

@@ -1,49 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cn = require('classnames');
-var React = require('react');
-var coreComponentsTypography = require('../../typography/cssm');
-var styles = require('./index.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-/**
- * Компонент круглого прогресс бара.
- */
-var CircularProgressBar = function (_a) {
-    var value = _a.value, _b = _a.view, view = _b === void 0 ? 'positive' : _b, _c = _a.size, size = _c === void 0 ? 'm' : _c, className = _a.className, dataTestId = _a.dataTestId, _d = _a.title, title = _d === void 0 ? value : _d, subtitle = _a.subtitle, children = _a.children;
-    var memorized = React.useMemo(function () {
-        var strokeWidth = 8;
-        var maxProgress = 100;
-        var minProgress = 0;
-        var width = size === 'l' ? 144 : 120;
-        var height = size === 'l' ? 144 : 120;
-        var center = width / 2;
-        var radius = center - strokeWidth / 2;
-        var circumference = Math.PI * radius * 2;
-        var progress = Math.min(Math.max(value, minProgress), maxProgress);
-        var strokeDasharray = circumference.toFixed(3);
-        var strokeDashoffset = (((100 - progress) / 100) * circumference).toFixed(3);
-        return {
-            width: width,
-            height: height,
-            center: center,
-            radius: radius,
-            strokeDasharray: strokeDasharray,
-            strokeDashoffset: strokeDashoffset,
-        };
-    }, [value, size]);
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][size], className), "data-test-id": dataTestId },
-        React__default['default'].createElement("svg", { viewBox: "0 0 " + memorized.width + " " + memorized.height, className: styles__default['default'].svg, xmlns: 'http://www.w3.org/2000/svg' },
-            React__default['default'].createElement("circle", { className: styles__default['default'].backgroundCircle, cx: memorized.center, cy: memorized.center, r: memorized.radius }),
-            React__default['default'].createElement("circle", { className: cn__default['default'](styles__default['default'].progressCircle, styles__default['default'][view]), cx: memorized.center, cy: memorized.center, r: memorized.radius, strokeDasharray: memorized.strokeDasharray, strokeDashoffset: memorized.strokeDashoffset, transform: "rotate(" + -90 + " " + memorized.center + " " + memorized.center + ")" })),
-        React__default['default'].createElement("div", { className: styles__default['default'].label }, children || (React__default['default'].createElement(React__default['default'].Fragment, null,
-            title && (React__default['default'].createElement(coreComponentsTypography.Typography.Title, { className: styles__default['default'].title, color: 'secondary', tag: 'div', view: size === 'l' ? 'small' : 'xsmall' }, title)),
-            subtitle && (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { tag: 'div', className: styles__default['default'].subtitle, color: 'primary', view: 'primary-small' }, subtitle)))))));
-};
-
-exports.CircularProgressBar = CircularProgressBar;

package/circular-progress-bar/cssm/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/circular-progress-bar/cssm/index.js

@@ -1,11 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('classnames');
-require('react');
-require('../../typography/cssm');
-require('./index.module.css');
-var Component = require('./Component.js');
-
-
-
-exports.CircularProgressBar = Component.CircularProgressBar;

package/circular-progress-bar/cssm/index.module.css

@@ -1,96 +0,0 @@
-:root {
-    --color-light-bg-tertiary: #e7e9eb;
-    --color-light-graphic-negative: #f15045;
-    --color-light-graphic-positive: #2fc26e;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-
-:root {
-    /* bg */
-    --circular-progress-bar-bg-color: var(--color-light-bg-tertiary);
-
-    /* positive */
-    --circular-progress-bar-positive-color: var(--color-light-graphic-positive);
-
-    /* negative */
-    --circular-progress-bar-negative-color: var(--color-light-graphic-negative);
-}
-
-.component {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.svg {
-    display: block;
-    width: 100%;
-}
-
-.title,
-.subtitle {
-    overflow: hidden;
-    word-break: break-word;
-}
-
-.subtitle {
-    max-height: 40px;
-}
-
-.l {
-    width: 144px;
-    height: 144px
-}
-
-.l .label {
-        max-width: 120px;
-    }
-
-.l .title {
-        max-height: 32px;
-    }
-
-.m {
-    width: 120px;
-    height: 120px
-}
-
-.m .label {
-        max-width: 96px;
-    }
-
-.m .title {
-        max-height: 24px;
-    }
-
-.label {
-    text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    transform: translate(-50%, -50%);
-}
-
-.backgroundCircle,
-.progressCircle {
-    width: 100%;
-    height: 100%;
-    fill: transparent;
-    stroke-width: 8;
-}
-
-.positive {
-    stroke: var(--circular-progress-bar-positive-color);
-}
-
-.negative {
-    stroke: var(--circular-progress-bar-negative-color);
-}
-
-.backgroundCircle {
-    stroke: var(--circular-progress-bar-bg-color);
-}

package/collapse/cssm/Component.d.ts

@@ -1,41 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-type CollapseProps = {
-    /**
-     * Состояние компонента
-     *
-     */
-    expanded?: boolean;
-    /**
-     * Текст ссылки в `expanded` состоянии
-     *
-     */
-    collapsedLabel?: string;
-    /**
-     * Текст ссылки в `collapsed` состоянии
-     *
-     */
-    expandedLabel?: string;
-    /**
-     * Дочерние элементы `Collapse`
-     */
-    children?: React.ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Идентификатор компонента в DOM
-     */
-    id?: string;
-    /**
-     * Обработчик смены состояний `expanded/collapsed`
-     */
-    onExpandedChange?: (expanded?: boolean) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
-export { CollapseProps, Collapse };