torgbox-ui 1.0.7 → 1.0.9

package/dist/cjs/Inputs/Button/Button.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const Utils_1 = require("../../Utils");
+const Button = (props) => {
+    const { label = '', size = 'medium', variant = 'filled', state = 'idle', iconPosition = 'left', fullWidth = false, iconComponent, onClick, className, tabIndex, } = props;
+    const hasIcon = iconComponent !== null && iconComponent !== undefined;
+    const buttonMods = [
+        'btn',
+        `btn--${size}`,
+        `btn__${variant}`,
+        `btn__${variant}--${state}`,
+        {
+            'btn--reverse': iconPosition === 'right',
+            'btn--fullWidth': fullWidth,
+            'btn--with-icon': label && hasIcon,
+            'btn--only-icon': !label && hasIcon
+        }
+    ];
+    const iconMods = [
+        'btn__icon',
+        `btn__icon--${size}`,
+        { [`btn__icon--${size}--${iconPosition}`]: !!label },
+    ];
+    const labelMods = `btn__label--${size}`;
+    const spinnerMods = [
+        `btn__spinner--${size}`,
+        `btn__spinner--${variant}`
+    ];
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: onClick, disabled: state === 'disabled', className: (0, classnames_1.default)(buttonMods, className), tabIndex: tabIndex, children: state === 'loading' ? ((0, jsx_runtime_1.jsx)(Utils_1.Spinner, { className: (0, classnames_1.default)(spinnerMods) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasIcon && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(iconMods), children: iconComponent })), label && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(labelMods), children: label })] })) }));
+};
+exports.Button = Button;

package/dist/cjs/Inputs/Button/button.scss

@@ -0,0 +1,358 @@
+// Filled
+$filled:               $primary-high;
+$filled-text:          $inverse;
+$filled-hover:         $primary-A92;
+$filled-focus:         $primary-A88;
+$filled-active:        $primary-A88;
+
+$filled-disabled:      $neutral-A12;
+$filled-disabled-text: $neutral-A48;
+
+
+// Outlined-color
+$outlined-color:                 transparent;
+$outlined-color-text:            $primary-high;
+$outlined-color-border:          $primary-border-low;
+$outlined-color-hover:           $primary-A8;
+$outlined-color-focus:           $primary-A12;
+$outlined-color-active:          $primary-A12;
+
+$outlined-color-disabled-border: $neutral-A12;
+$outlined-color-disabled-text:   $neutral-A48;
+
+
+// Outlined-neutral
+$outlined-neutral:                transparent;
+$outlined-neutral-text:           $neutral-middle;
+$outlined-neutral-border:         $neutral-border-low;
+$outlined-neutral-hover:          $neutral-A8;
+$outlined-neutral-focus:          $neutral-A12;
+$outlined-neutral-active:         $neutral-A12;
+
+$outlined-neutral-disable-border: $neutral-border-low;
+$outlined-neutral-disable-text:   $neutral-A48;
+
+
+// Clear-color
+$clear-color:              transparent;
+$clear-color-text:         $primary-high;
+$clear-color-hover:        $primary-A8;
+$clear-color-focus:        $primary-A12;
+$clear-color-active:       $primary-A12;
+
+$clear-color-disable-text: $neutral-A48;
+
+
+// Clear-neutral
+$clear-neutral:              transparent;
+$clear-neutral-text:         $neutral-middle;
+$clear-neutral-hover:        $neutral-A8;;
+$clear-neutral-focus:        $neutral-A12;
+$clear-neutral-active:       $neutral-A12;
+
+$clear-neutral-disable-text: $neutral-A48;
+
+.btn {
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 96px;
+  
+  font-family: 'Roboto Medium', sans-serif;
+
+  border: 1px solid transparent;
+  border-radius: 4px;
+
+  &--large {
+    padding: 9px;
+  }
+
+  &--medium {
+    padding: 7px;
+  }
+
+  &--small {
+    padding: 3px;
+  }
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &--with-icon {
+    min-width: 120px;
+  }
+
+  &--only-icon {
+    min-width: unset;
+  }
+
+  &__label {
+    &--large {
+      padding: 0 10px;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    &--medium {
+      padding: 0 8px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    &--small {
+      padding: 0 8px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  &__icon {
+    display: flex;
+    
+    &--large {
+      width: 24px;
+
+      &--left {
+        padding-right: 2px;
+        padding-left: 6px;
+      }
+
+      &--right {
+        padding-right: 6px;
+        padding-left: 2px;
+      }
+    }
+
+    &--medium {
+      width: 20px;
+
+      &--left {
+        padding-left: 4px;
+      }
+
+      &--right {
+        padding-right: 4px;
+      }
+    }
+
+    &--small {
+      width: 20px;
+
+      &--left {
+        margin-right: -4px;
+        padding-left: 4px;
+      }
+
+      &--right {
+        margin-left: -4px;
+        padding-right: 4px;
+      }
+    }
+  }
+
+  &__spinner {
+    &--small {
+      width: 16px;
+      padding: 2px;
+    }
+  
+    &--medium {
+      width: 20px;
+    }
+  
+    &--large {
+      width: 24px;
+    }  
+
+      &--filled {
+      stroke: $filled-text;
+    }
+
+    &--outlined-color {
+      stroke: $outlined-color-text
+    }
+
+    &--outlined-neutral {
+      stroke: $outlined-neutral-text;
+    }
+
+    &--clear-color {
+      stroke: $clear-color-text
+    }
+
+    &--clear-neutral {
+      stroke: $clear-neutral-text;
+    }
+  }
+
+  &--fullWidth {
+    width: 100%;
+  }
+
+  &__filled {
+    color: $filled-text;
+    background-color: $filled;
+    fill: $filled-text;
+
+    &--idle {
+      &:hover {
+        background-color: $filled-hover;
+      }
+
+      &:focus {
+        background-color: $filled-focus;
+      }
+
+      &:active {
+        background-color: $filled-active;
+      }
+    }
+
+    &--loading {
+      cursor: default;
+      z-index: 2;
+    }
+
+    &--disabled {
+      cursor: default;
+      color: $filled-disabled-text;
+      background-color: $filled-disabled;
+      fill: $filled-disabled-text;
+    }
+  }
+
+  &__outlined-color {
+    color: $outlined-color-text;
+    background-color: $outlined-color;
+    border: 1px solid $outlined-color-border;
+    fill: $outlined-color-text;
+
+    &--idle {
+      &:hover {
+        background-color: $outlined-color-hover;
+      }
+
+      &:focus {
+        background-color: $outlined-color-focus;
+      }
+
+      &:active {
+        background-color: $outlined-color-active;
+      }
+    }
+
+    &--loading {
+      cursor: default;
+      z-index: 2;
+    }
+
+    &--disabled {
+      cursor: default;
+
+      color: $outlined-color-disabled-text;
+
+      border: 1px solid $outlined-color-disabled-border;
+
+      fill: $outlined-color-disabled-text;
+    }
+  }
+
+  &__outlined-neutral {
+    color: $outlined-neutral-text;
+    background-color: $outlined-neutral;
+    border: 1px solid $outlined-neutral-border;
+    fill: $outlined-neutral-text;
+
+    &--idle {
+      &:hover {
+        background-color: $outlined-neutral-hover;
+      }
+
+      &:focus {
+        background-color: $outlined-neutral-focus;
+      }
+
+      &:active {
+        background-color: $outlined-neutral-active;
+      }
+    }
+
+    &--loading {
+      cursor: default;
+    }
+
+    &--disabled {
+      cursor: default;
+
+      color: $outlined-neutral-disable-text;
+
+      border: 1px solid $outlined-neutral-disable-border;
+
+      fill: $outlined-neutral-disable-text;
+    }
+  }
+
+  &__clear-color {
+    color: $clear-color-text;
+    background-color: $clear-color;
+    fill: $clear-color-text;
+
+    &--idle {
+      &:hover {
+        background-color: $clear-color-hover;
+      }
+
+      &:focus {
+        background-color: $clear-color-focus;
+      }
+
+      &:active {
+        background-color: $clear-color-active;
+      }
+    }
+
+    &--loading {
+      cursor: default;
+    }
+
+    &--disabled {
+      cursor: default;
+      color: $clear-color-disable-text;
+      fill: $clear-color-disable-text;
+    }
+  }
+
+  &__clear-neutral {
+    color: $clear-neutral-text;
+    background-color: $clear-neutral;
+    fill: $clear-neutral-text;
+
+    &--idle {
+      &:hover {
+        background-color: $clear-neutral-hover;
+      }
+
+      &:focus {
+        background-color: $clear-neutral-focus;
+      }
+
+      &:active {
+        background-color: $clear-neutral-active;
+      }
+    }
+
+    &--loading {
+      cursor: default;
+    }
+
+    &--disabled {
+      cursor: default;
+      color: $clear-neutral-disable-text;
+      fill: $clear-neutral-disable-text;
+    }
+  }
+}

package/dist/cjs/Inputs/Button/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });

package/dist/cjs/Inputs/Checkbox/Checkbox.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const checked_svg_1 = __importDefault(require("../../assets/img/checked.svg"));
+const partial_checked_svg_1 = __importDefault(require("../../assets/img/partial-checked.svg"));
+const Checkbox = (props) => {
+    const { label = '', disabled = false, partial = false, size = 'medium', checked, onClick } = props;
+    const iconMods = [
+        'checkbox__icon',
+        `checkbox__icon--${size}`,
+        {
+            'checkbox__icon--active': checked,
+            'checkbox__icon--disable': disabled
+        }
+    ];
+    const labelMods = [
+        'checkbox__label',
+        `checkbox__label--${size}`,
+        { 'checkbox__label--disable': disabled }
+    ];
+    const icon = () => {
+        if (!checked) {
+            return;
+        }
+        return (partial ? (0, jsx_runtime_1.jsx)(partial_checked_svg_1.default, {}) : (0, jsx_runtime_1.jsx)(checked_svg_1.default, {}));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'checkbox', children: (0, jsx_runtime_1.jsxs)("label", { className: (0, classnames_1.default)(labelMods), children: [(0, jsx_runtime_1.jsx)("input", { type: 'checkbox', disabled: disabled, onChange: () => {
+                        onClick(!checked);
+                    } }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(iconMods), children: icon() }), label] }) }));
+};
+exports.Checkbox = Checkbox;

package/dist/cjs/Inputs/Checkbox/checkbox.scss

@@ -0,0 +1,63 @@
+$border:       $neutral-low;
+$border-hover: $neutral-middle;
+$text:         $neutral-high;
+$icon-active:  $primary-high;
+$disable:      $neutral-A48;
+
+.checkbox {
+  user-select: none;
+
+  &__label {
+    color: $text;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+
+    &--small {
+      font-size: 12px;
+      line-height: 16px;
+    }
+
+    &--disable {
+      color: $disable;
+      cursor: default;
+    }
+  }
+
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  &__icon {
+    box-sizing: border-box;
+    overflow: hidden;
+    border: 1.75px solid $border;
+    border-radius: 2px;
+    width: 15px;
+    height: 15px;
+
+    &:hover {
+      border-color: $border-hover;
+    }
+
+    &--active {
+      border: none;
+      fill: $primary-high;
+    }
+
+    &--disable {
+      border-color: $disable;
+      fill: $disable;
+
+      &:hover {
+        border-color: $disable;
+      }
+    }
+
+    &--small {
+      width: 12px;
+      height: 12px;
+    }
+  }
+}

package/dist/cjs/Inputs/Checkbox/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var Checkbox_1 = require("./Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });

package/dist/cjs/Inputs/EmailField/EmailField.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmailField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const fp_1 = require("lodash/fp");
+const react_1 = require("react");
+const customValidators_1 = require("../../tools/customValidators");
+const TextField_1 = require("../TextField");
+const ErrorMessages_1 = require("./ErrorMessages");
+const EmailField = (props) => {
+    const { checkEmail = false, onValidated, onTextValid } = props;
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
+    const [touched, setTouched] = (0, react_1.useState)(false);
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [alwaysShowError, setAlwaysShowError] = (0, react_1.useState)(false);
+    const [emailExist, setEmailExist] = (0, react_1.useState)(false);
+    const checkEmailExist = (0, react_1.useCallback)((0, fp_1.debounce)(500, (email) => {
+        if (email !== 'asd@asd.ru') {
+            setErrorMessage(ErrorMessages_1.checkEmailError);
+            setEmailExist(false);
+            setAlwaysShowError(true);
+            return;
+        }
+        setErrorMessage('');
+        setEmailExist(true);
+    }), []);
+    const acceptEmailHandler = (0, react_1.useCallback)(() => {
+        onValidated(true);
+        onTextValid(email);
+    }, [email, onTextValid, onValidated]);
+    (0, react_1.useEffect)(() => {
+        if (!touched) {
+            return;
+        }
+        const valid = (0, customValidators_1.emailValidator)(email);
+        if (!valid) {
+            setAlwaysShowError(false);
+            onValidated(false);
+            onTextValid('');
+            const error = (!email && ErrorMessages_1.emptyEmailError) ||
+                (!valid && ErrorMessages_1.notCorrectEmailError) ||
+                '';
+            setErrorMessage(error);
+            return;
+        }
+        if (checkEmail) {
+            checkEmailExist(email);
+            return;
+        }
+        setErrorMessage('');
+        acceptEmailHandler();
+    }, [checkEmail, checkEmailExist, acceptEmailHandler, email, onTextValid, onValidated, touched]);
+    (0, react_1.useEffect)(() => {
+        if (!checkEmail) {
+            return;
+        }
+        if (!emailExist || errorMessage) {
+            onValidated(false);
+            return;
+        }
+        acceptEmailHandler();
+    }, [acceptEmailHandler, checkEmail, emailExist, errorMessage, onValidated]);
+    return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { onChange: setEmail, onTouched: setTouched, state: touched && errorMessage ? 'error' : 'idle', errorMessage: errorMessage, label: 'Email', type: 'email', value: email, alwaysShowError: alwaysShowError, required: true, checkIcon: true, ...props }));
+};
+exports.EmailField = EmailField;

package/dist/cjs/Inputs/EmailField/ErrorMessages.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkEmailError = exports.notCorrectEmailError = exports.emptyEmailError = void 0;
+exports.emptyEmailError = 'Введите email';
+exports.notCorrectEmailError = 'Некорректный email';
+exports.checkEmailError = 'Пользователь с таким email не зарегистрирован';

package/dist/cjs/Inputs/EmailField/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkEmailError = exports.notCorrectEmailError = exports.emptyEmailError = exports.EmailField = void 0;
+var EmailField_1 = require("./EmailField");
+Object.defineProperty(exports, "EmailField", { enumerable: true, get: function () { return EmailField_1.EmailField; } });
+var ErrorMessages_1 = require("./ErrorMessages");
+Object.defineProperty(exports, "emptyEmailError", { enumerable: true, get: function () { return ErrorMessages_1.emptyEmailError; } });
+Object.defineProperty(exports, "notCorrectEmailError", { enumerable: true, get: function () { return ErrorMessages_1.notCorrectEmailError; } });
+Object.defineProperty(exports, "checkEmailError", { enumerable: true, get: function () { return ErrorMessages_1.checkEmailError; } });

package/dist/cjs/Inputs/InnField/ErrorMessages.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InnError = void 0;
+exports.InnError = 'ИНН - 10 цифр для ЮЛ или 12 для ФЛ';

package/dist/cjs/Inputs/InnField/InnField.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InnField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const customValidators_1 = require("../../tools/customValidators");
+const TextField_1 = require("../TextField");
+const ErrorMessages_1 = require("./ErrorMessages");
+const InnField = (props) => {
+    const { onValidated, onTextValid } = props;
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
+    const [touched, setTouched] = (0, react_1.useState)(false);
+    const [inn, setInn] = (0, react_1.useState)('');
+    const getInputNumbersValue = (value) => {
+        return value.replace(/\D/g, '');
+    };
+    const onInnInput = (value, e) => {
+        setInn(getInputNumbersValue(value));
+    };
+    (0, react_1.useEffect)(() => {
+        if (!touched) {
+            return;
+        }
+        const valid = (0, customValidators_1.innValidator)(inn);
+        if (!valid) {
+            onValidated(false);
+            onTextValid('');
+            setErrorMessage(ErrorMessages_1.InnError);
+            return;
+        }
+        onValidated(true);
+        onTextValid(inn);
+        setErrorMessage('');
+    }, [inn, onTextValid, onValidated, touched]);
+    return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { onChange: onInnInput, onTouched: setTouched, state: touched && errorMessage ? 'error' : 'idle', errorMessage: errorMessage, label: '\u0418\u041D\u041D', type: 'text', description: '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 10 \u0446\u0438\u0444\u0440 \u0434\u043B\u044F \u042E\u041B \u0438\u043B\u0438 12 \u0434\u043B\u044F \u0424\u041B', value: inn, maxLength: 12, required: true, searchIcon: true, ...props }));
+};
+exports.InnField = InnField;

package/dist/cjs/Inputs/InnField/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InnError = exports.InnField = void 0;
+var InnField_1 = require("./InnField");
+Object.defineProperty(exports, "InnField", { enumerable: true, get: function () { return InnField_1.InnField; } });
+var ErrorMessages_1 = require("./ErrorMessages");
+Object.defineProperty(exports, "InnError", { enumerable: true, get: function () { return ErrorMessages_1.InnError; } });

package/dist/cjs/Inputs/NameField/ErrorMessages.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notCorrectFullNameError = exports.notCorrectPatronymicNameError = exports.notCorrectLastNameError = exports.notCorrectFirstNameError = exports.emptyFullNameError = exports.emptyPatronymicNameError = exports.emptyLastNameError = exports.emptyFirstNameError = void 0;
+exports.emptyFirstNameError = 'Введите имя';
+exports.emptyLastNameError = 'Введите фамилию';
+exports.emptyPatronymicNameError = 'Введите отчество';
+exports.emptyFullNameError = 'Введите ФИО';
+exports.notCorrectFirstNameError = 'Некорректное имя';
+exports.notCorrectLastNameError = 'Некорректная фамилия';
+exports.notCorrectPatronymicNameError = 'Некорректное отчество';
+exports.notCorrectFullNameError = 'Некорректное ФИО';