torgbox-ui 1.0.11 → 1.0.13

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

@@ -1,3 +0,0 @@
-export { Option, } from './Option/Option';
-export { Collapse } from './Collapse';
-export { Dropdown } from './Dropdown';

package/dist/esm/Inputs/Selector/selector.scss

@@ -1,101 +0,0 @@
-$title-bg:        transparent;
-$title-bg-hover:  $neutral-A8;
-$title-bg-active: $neutral-A12;
-$title-text:      $neutral-high;
-$title-icon:      $neutral-high;
-$title-border:    $neutral-border-low;
-$options-bg:      $color-neutral-gray;
-
-.selector {
-  @keyframes slide-down {
-    from {
-      transform: translateY(-5%);
-      opacity: 0;
-    }
-
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slide-up {
-    from {
-      transform: translateY(5%);
-      opacity: 0;
-    }
-
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  width: 200px;
-
-  .title {
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    padding: 8px 12px;
-
-    color: $title-text;
-
-    background: $title-bg;
-    border-radius: 4px;    
-
-    transition: background-color 0.2s;
-
-    &:hover {
-      background: $title-bg-hover;
-    }
-
-    &--active {
-      background: $title-bg-active;
-      border-bottom: 1px solid $title-border;
-      border-radius: 4px 4px 0 0;
-      &:hover {
-        background: $title-bg-active;
-      }
-    }
-
-    &__label {
-      display: flex;
-    }
-  
-    &__icon {
-      display: flex;
-      width: 20px;
-      padding-right: 8px;
-      fill: $title-icon;
-    }
-
-    &__chevron {
-      display: flex;
-      align-items: center;
-      fill: $title-icon;
-      transition: all 200ms;
-  
-      &--rotate {
-        transform: rotate(180deg);
-      }
-    }
-  }    
-
-  &__options {
-    overflow: auto;
-    background: $options-bg;
-    border-radius: 0 0 4px 4px;
-
-    &--slide-up {
-      animation: slide-up 0.2s forwards;
-    }
-
-    &--slide-down {
-      animation: slide-down 0.2s forwards;
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-import { type InputHTMLAttributes } from 'react';
-export type THTMLInput = Pick<InputHTMLAttributes<HTMLInputElement>, 'className' | 'placeholder' | 'tabIndex' | 'maxLength' | 'required'>;
-export type TTextFieldType = 'text' | 'password' | 'tel' | 'email';
-export type TTextFieldSize = 'medium' | 'large';
-export type TTextFieldState = 'idle' | 'error' | 'disabled';
-export interface ITextField extends THTMLInput {
-    label?: string;
-    value: string;
-    description?: string;
-    errorMessage?: string;
-    type?: TTextFieldType;
-    size?: TTextFieldSize;
-    state?: TTextFieldState;
-    onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
-    onClear?: () => void;
-    onVisibilityToggle?: () => void;
-    onTouched?: (state: boolean) => void;
-    autoFocus?: boolean;
-    checkIcon?: boolean;
-    clearIcon?: boolean;
-    eyeIcon?: boolean;
-    searchIcon?: boolean;
-    alwaysShowError?: boolean;
-}
-export declare const TextField: (props: ITextField) => JSX.Element;

package/dist/esm/Inputs/TextField/TextField.js

@@ -1,85 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-import _ from 'lodash/fp';
-import { useEffect, useRef, useState, } from 'react';
-import CheckIcon from '../../assets/img/check.svg';
-import CrossIcon from '../../assets/img/cross.svg';
-import EyeCloseIcon from '../../assets/img/eye-close.svg';
-import EyeOpenIcon from '../../assets/img/eye-open.svg';
-import SearchIcon from '../../assets/img/search.svg';
-import styles from './textField.module.scss';
-export const TextField = (props) => {
-    const { label, value, description, className, placeholder, type = 'text', size = 'large', state = 'idle', tabIndex, maxLength, errorMessage, onChange = _.noop, onClear = _.noop, onVisibilityToggle = _.noop, onTouched = _.noop, required = false, autoFocus = false, checkIcon = false, clearIcon = false, eyeIcon = false, searchIcon = false, alwaysShowError = false, } = props;
-    const ref = useRef(null);
-    const [focused, setFocused] = useState(false);
-    const [inputType, setInputType] = useState(type);
-    useEffect(() => {
-        setInputType(type);
-    }, [type]);
-    useEffect(() => {
-        if (autoFocus) {
-            setFocused(true);
-            ref.current?.focus();
-        }
-    }, [autoFocus]);
-    const onChangeHandler = (e) => {
-        onChange(e.target.value, e);
-    };
-    const toggleVisibility = () => {
-        const newType = inputType === 'password' ? 'text' : 'password';
-        setInputType(newType);
-        onVisibilityToggle();
-    };
-    const onBlur = () => {
-        setFocused(false);
-    };
-    const onFocus = () => {
-        setFocused(true);
-        onTouched(true);
-    };
-    const disabledState = state === 'disabled';
-    const wrapperSizeClassBySize = {
-        medium: styles.textFieldWrapperMedium,
-        large: styles.textFieldWrapperLarge,
-    };
-    const labelSizeClassBySize = {
-        medium: styles.textFieldWrapperLabelMedium,
-        large: styles.textFieldWrapperLabelLarge,
-    };
-    const inputSizeClassBySize = {
-        medium: styles.textFieldInputMedium,
-        large: styles.textFieldInputLarge,
-    };
-    const iconsSizeClassBySize = {
-        medium: styles.textFieldIconsMedium,
-        large: styles.textFieldIconsLarge,
-    };
-    const fieldSizeClassBySize = {
-        medium: styles.textFieldMedium,
-        large: styles.textFieldLarge,
-    };
-    const stateClassByState = {
-        idle: styles.textFieldIdle,
-        error: styles.textFieldError,
-        disabled: styles.textFieldDisabled,
-    };
-    const textFieldWrapperClassName = cn(styles.textFieldWrapper, wrapperSizeClassBySize[size]);
-    const textFieldClassName = cn(styles.textField, fieldSizeClassBySize[size], stateClassByState[state], {
-        [styles.textFieldFocused]: !alwaysShowError ? focused : state !== 'error',
-    }, className);
-    const inputClassName = cn(styles.textFieldInput, inputSizeClassBySize[size]);
-    const iconsClassName = cn(styles.textFieldIcons, iconsSizeClassBySize[size]);
-    const labelClassName = cn(styles.textFieldWrapperLabel, labelSizeClassBySize[size], { [styles.textFieldWrapperLabelDisabled]: disabledState });
-    const bottomText = () => {
-        const showError = !!errorMessage && (alwaysShowError || !focused);
-        if (!showError && !description) {
-            return;
-        }
-        return (_jsx("span", { className: cn(styles.textFieldWrapperBottomText, {
-                [styles.textFieldWrapperBottomTextDescription]: !!description,
-                [styles.textFieldWrapperBottomTextError]: showError,
-            }), children: showError ? errorMessage : description }));
-    };
-    const input = (_jsxs("div", { className: textFieldClassName, children: [searchIcon && (_jsx("div", { className: iconsClassName, children: _jsx(SearchIcon, {}) })), _jsx("input", { ref: ref, type: inputType, value: value, onChange: onChangeHandler, className: inputClassName, onFocus: onFocus, onBlur: onBlur, placeholder: disabledState ? '' : placeholder, disabled: disabledState, onClick: onFocus, tabIndex: tabIndex, maxLength: maxLength }), (checkIcon && value && !errorMessage && !disabledState) && (_jsx("div", { id: 'check-icon', className: iconsClassName, children: _jsx(CheckIcon, {}) })), clearIcon && value && !disabledState && (_jsx("div", { className: [iconsClassName, 'cursor-pointer'].join(' '), onClick: onClear, children: _jsx(CrossIcon, {}) })), eyeIcon && !disabledState && (_jsx("div", { id: 'eye-icon', className: [iconsClassName, 'cursor-pointer'].join(' '), onClick: toggleVisibility, children: inputType === 'password' ? _jsx(EyeOpenIcon, {}) : _jsx(EyeCloseIcon, {}) }))] }));
-    return (_jsxs("div", { className: textFieldWrapperClassName, children: [label && (_jsxs("div", { className: labelClassName, children: [label, required && (_jsx("span", { className: 'text-field-wrapper__label--required', children: "*" }))] })), input, bottomText()] }));
-};

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

@@ -1 +0,0 @@
-export { TextField, type ITextField, type THTMLInput, type TTextFieldType } from './TextField';

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

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

package/dist/esm/Inputs/TextField/textField.module.scss

@@ -1,157 +0,0 @@
-@use 'sass:color';
-@use '@/assets/scss' as *;
-
-$border-inactive:    $neutral-border-low;
-$border-hover:       $neutral-border-middle;
-$border-focus:       $primary-border-high;
-$border-disabled:    $neutral-border-low;
-$border-error:       $error-border-high;
-$border-error-hover: $error-border-middle;
-
-$label:              $neutral-middle;
-$label-disabled:     $neutral-A48;
-$label-required:     $primary-high;
-
-$placeholder:        $neutral-low;
-$value:              $neutral-high;
-$value-disabled:     $neutral-A48;
-
-$icons:              $neutral-middle;
-
-$description:        $neutral-middle;
-$description-error:  $error-high;
-
-.text-field-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-family: 'Roboto Regular', sans-serif;
-
-  &__label {
-    line-height: 20px;
-    color: $label;
-
-    &--medium {
-      font-size: 12px;
-    }
-
-    &--large {
-      font-size: 14px;
-    }
-
-    &--required {
-      padding-left: 4px;
-      color: $label-required;
-    }
-
-    &--disabled {
-      color: $label-disabled;
-    }
-  }
-
-  &__bottom-text {
-    position: absolute;
-    bottom: -16px;
-    left: 0;
-    font-size: 12px;
-    line-height: 16px;
-    
-
-    &--description {
-      color: $description;
-    }
-
-    &--error {
-      color: $description-error;
-    }
-  }
-}
-
-.text-field {
-  display: flex;
-  align-items: center;
-
-  max-width: 400px;
-  padding: 0 12px;
-
-  border: 1px solid $border-inactive;
-  border-radius: 4px;
-
-  &--medium {
-    height: 36px;
-  }
-
-  &--large {
-    height: 44px;
-  }
-
-  &--idle {
-    &:hover {
-      border: 1px solid $border-hover;
-    }
-  }
-
-  &--error {
-    border: 1px solid $border-error;
-
-    &:hover {
-      border: 1px solid $border-error-hover;
-    }
-  }
-
-  &--disabled {
-    border: 1px solid $border-disabled;
-  }
-
-  &--focused {
-    border: 1px solid $border-focus;
-
-    &:hover {
-      border: 1px solid $border-focus;
-    }
-  }
-
-  &__input {
-    width: 100%;
-    height: 100%;
-    padding: 0 4px;
-
-    font-weight: 400;
-
-    background: none;
-    border: none;
-    outline: none;
-
-    &::placeholder {
-      color: $placeholder;
-    }
-
-    &--medium {
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    &--large {
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    &:disabled {
-      color: $value-disabled;
-    }
-  }
-
-  &__icons {
-    display: flex;
-    align-items: center;
-    fill: $icons;
-
-    &--medium {
-      width: 20px;
-    }
-
-    &--large {
-      width: 24px;
-    }
-  }
-}

package/dist/esm/Inputs/TextField/textField.scss

@@ -1,156 +0,0 @@
-@use 'sass:color';
-
-$border-inactive:    $neutral-border-low;
-$border-hover:       $neutral-border-middle;
-$border-focus:       $primary-border-high;
-$border-disabled:    $neutral-border-low;
-$border-error:       $error-border-high;
-$border-error-hover: $error-border-middle;
-
-$label:              $neutral-middle;
-$label-disabled:     $neutral-A48;
-$label-required:     $primary-high;
-
-$placeholder:        $neutral-low;
-$value:              $neutral-high;
-$value-disabled:     $neutral-A48;
-
-$icons:              $neutral-middle;
-
-$description:        $neutral-middle;
-$description-error:  $error-high;
-
-.text-field-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-family: 'Roboto Regular', sans-serif;
-
-  &__label {
-    line-height: 20px;
-    color: $label;
-
-    &--medium {
-      font-size: 12px;
-    }
-
-    &--large {
-      font-size: 14px;
-    }
-
-    &--required {
-      padding-left: 4px;
-      color: $label-required;
-    }
-
-    &--disabled {
-      color: $label-disabled;
-    }
-  }
-
-  &__bottom-text {
-    position: absolute;
-    bottom: -16px;
-    left: 0;
-    font-size: 12px;
-    line-height: 16px;
-    
-
-    &--description {
-      color: $description;
-    }
-
-    &--error {
-      color: $description-error;
-    }
-  }
-}
-
-.text-field {
-  display: flex;
-  align-items: center;
-
-  max-width: 400px;
-  padding: 0 12px;
-
-  border: 1px solid $border-inactive;
-  border-radius: 4px;
-
-  &--medium {
-    height: 36px;
-  }
-
-  &--large {
-    height: 44px;
-  }
-
-  &--idle {
-    &:hover {
-      border: 1px solid $border-hover;
-    }
-  }
-
-  &--error {
-    border: 1px solid $border-error;
-
-    &:hover {
-      border: 1px solid $border-error-hover;
-    }
-  }
-
-  &--disabled {
-    border: 1px solid $border-disabled;
-  }
-
-  &--focused {
-    border: 1px solid $border-focus;
-
-    &:hover {
-      border: 1px solid $border-focus;
-    }
-  }
-
-  &__input {
-    width: 100%;
-    height: 100%;
-    padding: 0 4px;
-
-    font-weight: 400;
-
-    background: none;
-    border: none;
-    outline: none;
-
-    &::placeholder {
-      color: $placeholder;
-    }
-
-    &--medium {
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    &--large {
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    &:disabled {
-      color: $value-disabled;
-    }
-  }
-
-  &__icons {
-    display: flex;
-    align-items: center;
-    fill: $icons;
-
-    &--medium {
-      width: 20px;
-    }
-
-    &--large {
-      width: 24px;
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-export { Button, type IButton, type TButtonState } from './Button';
-export { TextField, type ITextField } from './TextField';
-export { Dropdown, Collapse, Option } from './Selector';
-export { EmailField } from './EmailField';
-export { NameField } from './NameField';
-export { PhoneField } from './PhoneField';
-export { PasswordField } from './PasswordField';
-export { RepeatPasswordField } from './RepeatPasswordField';
-export { OtpInput } from './OtpInput';
-export { Checkbox } from './Checkbox';
-export { InnField } from './InnField';

package/dist/esm/Inputs/index.js

@@ -1,11 +0,0 @@
-export { Button } from './Button';
-export { TextField } from './TextField';
-export { Dropdown, Collapse, Option } from './Selector';
-export { EmailField } from './EmailField';
-export { NameField } from './NameField';
-export { PhoneField } from './PhoneField';
-export { PasswordField } from './PasswordField';
-export { RepeatPasswordField } from './RepeatPasswordField';
-export { OtpInput } from './OtpInput';
-export { Checkbox } from './Checkbox';
-export { InnField } from './InnField';

package/dist/esm/Inputs/index.scss

@@ -1,6 +0,0 @@
-@import './Button/button';
-@import './TextField/textField';
-@import './Selector/selector';
-@import './Selector/Option/option';
-@import './OtpInput/otpInput';
-@import './Checkbox/checkbox';

package/dist/esm/Pages/ContentPage/ContentPage.d.ts

@@ -1,6 +0,0 @@
-import { type ReactNode } from 'react';
-interface ContentPageProps {
-    children?: ReactNode;
-}
-export declare const ContentPage: ({ children }: ContentPageProps) => JSX.Element;
-export {};

package/dist/esm/Pages/ContentPage/ContentPage.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { SectionPlaceholder } from '../../Utils';
-import { Header, Sidebar } from '../../Widgets';
-export const ContentPage = ({ children }) => {
-    const [sidebarOpened, setSidebarOpened] = useState(false);
-    const [sidebarPinned, setSidebarPinned] = useState(false);
-    const onShowSidebar = () => {
-        setSidebarOpened(true);
-    };
-    const onCloseSidebar = useCallback(() => {
-        setSidebarOpened(false);
-    }, []);
-    const onPinSidebar = () => {
-        setSidebarPinned(true);
-    };
-    const onUnpinSidebar = () => {
-        setSidebarPinned(false);
-        onCloseSidebar();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Header, { onShowSidebar: onShowSidebar, onCloseSidebar: onCloseSidebar, sidebarOpened: sidebarOpened, sidebarPinned: sidebarPinned }), _jsxs("div", { className: 'content-page__content', children: [sidebarOpened && (_jsx(Sidebar, { pinned: sidebarPinned, onPinSidebar: onPinSidebar, onUnpinSidebar: onUnpinSidebar })), _jsx("main", { className: 'content-page__main', children: children || _jsx(SectionPlaceholder, {}) })] })] }));
-};

package/dist/esm/Pages/ContentPage/contentPage.scss

@@ -1,10 +0,0 @@
-.content-page {
-  &__content {
-    display: flex;
-    overflow: hidden;
-  }
-
-  &__main {
-    width: 100%;
-  }
-}

package/dist/esm/Pages/ContentPage/index.d.ts

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

package/dist/esm/Pages/ContentPage/index.js

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

package/dist/esm/Pages/CreatePasswordPage/CreatePasswordPage.d.ts

@@ -1 +0,0 @@
-export declare const CreatePasswordPage: () => JSX.Element;

package/dist/esm/Pages/CreatePasswordPage/CreatePasswordPage.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAppSelector } from '../../app/store';
-import { useCreatePasswordMutation, selectEmail } from '../../entities/user';
-import { Button, RepeatPasswordField, PasswordField, } from '../../Inputs';
-import { ErrorBanner } from '../../Utils';
-export const CreatePasswordPage = () => {
-    const [password, setPassword] = useState('');
-    const [passwordValid, setPasswordValid] = useState(false);
-    const [passwordEqual, setPasswordEqual] = useState(false);
-    const [formValid, setFormValid] = useState(false);
-    const [hidePassword, setHidePassword] = useState(true);
-    const [createPassword, { isSuccess, isError, isLoading }] = useCreatePasswordMutation();
-    const navigate = useNavigate();
-    const email = useAppSelector(selectEmail);
-    useEffect(() => {
-        if (!hidePassword) {
-            setFormValid(passwordValid);
-            return;
-        }
-        setFormValid([passwordValid, passwordEqual].every(Boolean));
-    }, [passwordValid, passwordEqual, hidePassword]);
-    useEffect(() => {
-        if (isSuccess) {
-            void navigate('/');
-        }
-    }, [isSuccess, navigate]);
-    const getBtnState = () => {
-        if (isLoading)
-            return 'loading';
-        return formValid ? 'idle' : 'disabled';
-    };
-    const handleSendPassword = () => {
-        if (formValid && email) {
-            void createPassword({ email, password });
-        }
-    };
-    return (_jsxs("div", { className: 'create-password-page', children: [isLoading && _jsx("div", { className: 'email-confirmation-page__overlay' }), _jsx("h1", { className: 'create-password-page__title', children: "\u0421\u043E\u0437\u0434\u0430\u043D\u0438\u0435 \u043F\u0430\u0440\u043E\u043B\u044F" }), isError && (_jsx(ErrorBanner, { error: '\u041E\u0448\u0438\u0431\u043A\u0430 \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u043F\u0430\u0440\u043E\u043B\u044F' })), _jsxs("form", { className: 'create-password-page__form', children: [_jsx(PasswordField, { onValidated: setPasswordValid, onPasswordInput: (password) => {
-                            setPassword(password);
-                        }, hidePassword: hidePassword, tabIndex: 1, onVisibilityToggle: () => {
-                            setHidePassword(!hidePassword);
-                        } }), hidePassword &&
-                        _jsx(RepeatPasswordField, { comparedValue: password, equalHandler: setPasswordEqual, tabIndex: 2, onVisibilityToggle: () => {
-                                setHidePassword(!hidePassword);
-                            } }), _jsx(Button, { label: '\u0412\u043E\u0439\u0442\u0438 \u0432 CRM', size: 'large', state: getBtnState(), tabIndex: 3, fullWidth: true, onClick: handleSendPassword })] })] }));
-};