torgbox-ui 1.0.7 → 1.0.9

package/dist/esm/Inputs/Button/Button.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Spinner } from '../../Utils';
+export 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 (_jsx("button", { type: 'button', onClick: onClick, disabled: state === 'disabled', className: cn(buttonMods, className), tabIndex: tabIndex, children: state === 'loading' ? (_jsx(Spinner, { className: cn(spinnerMods) })) : (_jsxs(_Fragment, { children: [hasIcon && (_jsx("div", { className: cn(iconMods), children: iconComponent })), label && _jsx("div", { className: cn(labelMods), children: label })] })) }));
+};

package/dist/esm/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/esm/Inputs/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button, type IButton, type TButtonState } from './Button';

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

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/esm/Inputs/Checkbox/Checkbox.d.ts

@@ -0,0 +1,11 @@
+type TCheckBoxSize = 'small' | 'medium';
+export interface ICheckbox {
+    label?: string;
+    size?: TCheckBoxSize;
+    disabled?: boolean;
+    checked: boolean;
+    partial?: boolean;
+    onClick: (state: boolean) => void;
+}
+export declare const Checkbox: (props: ICheckbox) => JSX.Element;
+export {};

package/dist/esm/Inputs/Checkbox/Checkbox.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import CheckIcon from '../../assets/img/checked.svg';
+import PartialIcon from '../../assets/img/partial-checked.svg';
+export 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 ? _jsx(PartialIcon, {}) : _jsx(CheckIcon, {}));
+    };
+    return (_jsx("div", { className: 'checkbox', children: _jsxs("label", { className: cn(labelMods), children: [_jsx("input", { type: 'checkbox', disabled: disabled, onChange: () => {
+                        onClick(!checked);
+                    } }), _jsx("span", { className: cn(iconMods), children: icon() }), label] }) }));
+};

package/dist/esm/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/esm/Inputs/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox, type ICheckbox } from './Checkbox';

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

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/dist/esm/Inputs/EmailField/EmailField.d.ts

@@ -0,0 +1,7 @@
+import { type THTMLInput } from '../TextField';
+export interface IEmailField extends THTMLInput {
+    onValidated: (state: boolean) => void;
+    onTextValid: (value: string) => void;
+    checkEmail?: boolean;
+}
+export declare const EmailField: (props: IEmailField) => JSX.Element;

package/dist/esm/Inputs/EmailField/EmailField.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { debounce } from 'lodash/fp';
+import { useCallback, useEffect, useState } from 'react';
+import { emailValidator } from '../../tools/customValidators';
+import { TextField } from '../TextField';
+import { emptyEmailError, notCorrectEmailError, checkEmailError } from './ErrorMessages';
+export const EmailField = (props) => {
+    const { checkEmail = false, onValidated, onTextValid } = props;
+    const [errorMessage, setErrorMessage] = useState('');
+    const [touched, setTouched] = useState(false);
+    const [email, setEmail] = useState('');
+    const [alwaysShowError, setAlwaysShowError] = useState(false);
+    const [emailExist, setEmailExist] = useState(false);
+    const checkEmailExist = useCallback(debounce(500, (email) => {
+        if (email !== 'asd@asd.ru') {
+            setErrorMessage(checkEmailError);
+            setEmailExist(false);
+            setAlwaysShowError(true);
+            return;
+        }
+        setErrorMessage('');
+        setEmailExist(true);
+    }), []);
+    const acceptEmailHandler = useCallback(() => {
+        onValidated(true);
+        onTextValid(email);
+    }, [email, onTextValid, onValidated]);
+    useEffect(() => {
+        if (!touched) {
+            return;
+        }
+        const valid = emailValidator(email);
+        if (!valid) {
+            setAlwaysShowError(false);
+            onValidated(false);
+            onTextValid('');
+            const error = (!email && emptyEmailError) ||
+                (!valid && notCorrectEmailError) ||
+                '';
+            setErrorMessage(error);
+            return;
+        }
+        if (checkEmail) {
+            checkEmailExist(email);
+            return;
+        }
+        setErrorMessage('');
+        acceptEmailHandler();
+    }, [checkEmail, checkEmailExist, acceptEmailHandler, email, onTextValid, onValidated, touched]);
+    useEffect(() => {
+        if (!checkEmail) {
+            return;
+        }
+        if (!emailExist || errorMessage) {
+            onValidated(false);
+            return;
+        }
+        acceptEmailHandler();
+    }, [acceptEmailHandler, checkEmail, emailExist, errorMessage, onValidated]);
+    return (_jsx(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 }));
+};

package/dist/esm/Inputs/EmailField/ErrorMessages.d.ts

@@ -0,0 +1,3 @@
+export declare const emptyEmailError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 email";
+export declare const notCorrectEmailError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u044B\u0439 email";
+export declare const checkEmailError = "\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C \u0441 \u0442\u0430\u043A\u0438\u043C email \u043D\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D";

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

@@ -0,0 +1,3 @@
+export const emptyEmailError = 'Введите email';
+export const notCorrectEmailError = 'Некорректный email';
+export const checkEmailError = 'Пользователь с таким email не зарегистрирован';

package/dist/esm/Inputs/EmailField/index.d.ts

@@ -0,0 +1,2 @@
+export { EmailField } from './EmailField';
+export { emptyEmailError, notCorrectEmailError, checkEmailError } from './ErrorMessages';

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

@@ -0,0 +1,2 @@
+export { EmailField } from './EmailField';
+export { emptyEmailError, notCorrectEmailError, checkEmailError } from './ErrorMessages';

package/dist/esm/Inputs/InnField/ErrorMessages.d.ts

@@ -0,0 +1 @@
+export declare const InnError = "\u0418\u041D\u041D - 10 \u0446\u0438\u0444\u0440 \u0434\u043B\u044F \u042E\u041B \u0438\u043B\u0438 12 \u0434\u043B\u044F \u0424\u041B";

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

@@ -0,0 +1 @@
+export const InnError = 'ИНН - 10 цифр для ЮЛ или 12 для ФЛ';

package/dist/esm/Inputs/InnField/InnField.d.ts

@@ -0,0 +1,6 @@
+import { type THTMLInput } from '../TextField';
+export interface IInnField extends THTMLInput {
+    onValidated: (state: boolean) => void;
+    onTextValid: (value: string) => void;
+}
+export declare const InnField: (props: IInnField) => JSX.Element;

package/dist/esm/Inputs/InnField/InnField.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { innValidator } from '../../tools/customValidators';
+import { TextField } from '../TextField';
+import { InnError } from './ErrorMessages';
+export const InnField = (props) => {
+    const { onValidated, onTextValid } = props;
+    const [errorMessage, setErrorMessage] = useState('');
+    const [touched, setTouched] = useState(false);
+    const [inn, setInn] = useState('');
+    const getInputNumbersValue = (value) => {
+        return value.replace(/\D/g, '');
+    };
+    const onInnInput = (value, e) => {
+        setInn(getInputNumbersValue(value));
+    };
+    useEffect(() => {
+        if (!touched) {
+            return;
+        }
+        const valid = innValidator(inn);
+        if (!valid) {
+            onValidated(false);
+            onTextValid('');
+            setErrorMessage(InnError);
+            return;
+        }
+        onValidated(true);
+        onTextValid(inn);
+        setErrorMessage('');
+    }, [inn, onTextValid, onValidated, touched]);
+    return (_jsx(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 }));
+};

package/dist/esm/Inputs/InnField/index.d.ts

@@ -0,0 +1,2 @@
+export { InnField } from './InnField';
+export { InnError } from './ErrorMessages';

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

@@ -0,0 +1,2 @@
+export { InnField } from './InnField';
+export { InnError } from './ErrorMessages';

package/dist/esm/Inputs/NameField/ErrorMessages.d.ts

@@ -0,0 +1,8 @@
+export declare const emptyFirstNameError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043C\u044F";
+export declare const emptyLastNameError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0444\u0430\u043C\u0438\u043B\u0438\u044E";
+export declare const emptyPatronymicNameError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u0442\u0447\u0435\u0441\u0442\u0432\u043E";
+export declare const emptyFullNameError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0424\u0418\u041E";
+export declare const notCorrectFirstNameError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0435 \u0438\u043C\u044F";
+export declare const notCorrectLastNameError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u0430\u044F \u0444\u0430\u043C\u0438\u043B\u0438\u044F";
+export declare const notCorrectPatronymicNameError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0435 \u043E\u0442\u0447\u0435\u0441\u0442\u0432\u043E";
+export declare const notCorrectFullNameError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0435 \u0424\u0418\u041E";

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

@@ -0,0 +1,8 @@
+export const emptyFirstNameError = 'Введите имя';
+export const emptyLastNameError = 'Введите фамилию';
+export const emptyPatronymicNameError = 'Введите отчество';
+export const emptyFullNameError = 'Введите ФИО';
+export const notCorrectFirstNameError = 'Некорректное имя';
+export const notCorrectLastNameError = 'Некорректная фамилия';
+export const notCorrectPatronymicNameError = 'Некорректное отчество';
+export const notCorrectFullNameError = 'Некорректное ФИО';

package/dist/esm/Inputs/NameField/NameField.d.ts

@@ -0,0 +1,9 @@
+import { type THTMLInput } from '../TextField';
+type TNameType = 'firstName' | 'lastName' | 'patronymic' | 'fullName';
+export interface INameField extends THTMLInput {
+    onValidated: (state: boolean) => void;
+    onTextValid: (value: string) => void;
+    nameType?: TNameType;
+}
+export declare const NameField: (props: INameField) => JSX.Element;
+export {};