torgbox-ui 1.0.7 → 1.0.8

package/dist/src/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/src/Inputs/Button/index.js

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

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ICheckbox } from './Checkbox';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ICheckbox>;
+export declare const CheckboxUnchecked: Story;
+export declare const CheckboxChecked: Story;
+export declare const CheckboxPartialChecked: Story;
+export declare const CheckboxUncheckedDisabled: Story;
+export declare const CheckboxCheckedDisabled: Story;
+export declare const CheckboxPartialCheckedDisabled: Story;

package/dist/src/Inputs/Checkbox/Checkbox.stories.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import { Checkbox } from './Checkbox';
+const meta = {
+    title: 'Inputs/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+};
+export default meta;
+export const CheckboxUnchecked = {
+    args: {
+        label: 'Default'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12655-17694&t=rfir0dAEMEVmjV7l-4',
+        },
+    },
+    render: function Render(args) {
+        const { checked } = args;
+        const [, updateArgs] = useArgs();
+        const onClick = () => {
+            updateArgs({ checked: !checked });
+        };
+        return _jsx(Checkbox, { ...args, onClick: onClick, checked: checked });
+    },
+};
+export const CheckboxChecked = {
+    args: {
+        label: 'Default',
+        checked: true,
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12655-17694&t=rfir0dAEMEVmjV7l-4',
+        },
+    },
+    render: function Render(args) {
+        const { checked } = args;
+        const [, updateArgs] = useArgs();
+        const onClick = () => {
+            updateArgs({ checked: !checked });
+        };
+        return _jsx(Checkbox, { ...args, onClick: onClick, checked: checked });
+    },
+};
+export const CheckboxPartialChecked = {
+    args: {
+        label: 'Default',
+        checked: true,
+        partial: true,
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12655-17694&t=rfir0dAEMEVmjV7l-4',
+        },
+    },
+    render: function Render(args) {
+        const { checked } = args;
+        const [, updateArgs] = useArgs();
+        const onClick = () => {
+            updateArgs({ checked: !checked });
+        };
+        return _jsx(Checkbox, { ...args, onClick: onClick, checked: checked });
+    },
+};
+export const CheckboxUncheckedDisabled = {
+    args: {
+        label: 'Default',
+        disabled: true,
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12655-17694&t=rfir0dAEMEVmjV7l-4',
+        },
+    },
+};
+export const CheckboxCheckedDisabled = {
+    args: {
+        label: 'Default',
+        checked: true,
+        disabled: true,
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12655-17694&t=rfir0dAEMEVmjV7l-4',
+        },
+    },
+};
+export const CheckboxPartialCheckedDisabled = {
+    args: {
+        label: 'Default',
+        checked: true,
+        disabled: true,
+        partial: true
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12655-17694&t=rfir0dAEMEVmjV7l-4',
+        },
+    },
+};

package/dist/src/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/src/Inputs/Checkbox/index.js

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

package/dist/src/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/src/Inputs/EmailField/EmailField.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ITextField } from '../TextField';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ITextField>;
+export declare const EmailFieldInactive: Story;
+export declare const EmailFieldError: Story;
+export declare const EmailFieldWithValue: Story;

package/dist/src/Inputs/EmailField/EmailField.stories.js

@@ -0,0 +1,43 @@
+import { EmailField } from './EmailField';
+const meta = {
+    title: 'Inputs/EmailField',
+    component: EmailField,
+    tags: ['autodocs'],
+    args: {
+        onValidated: () => { },
+        onTextValid: () => { }
+    }
+};
+export default meta;
+export const EmailFieldInactive = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-37420&mode=design&t=MwY0ZkqOcH13bkKn-4',
+        },
+    },
+};
+export const EmailFieldError = {
+    args: {
+        state: 'error',
+        errorMessage: 'Some error'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-37436&mode=design&t=H9AcJSW51fS3aPiW-4',
+        },
+    },
+};
+export const EmailFieldWithValue = {
+    args: {
+        value: 'some@email.com',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-37428&mode=design&t=H9AcJSW51fS3aPiW-4',
+        },
+    },
+};

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

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

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

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

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

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