torgbox-ui 1.0.7 → 1.0.8

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

@@ -0,0 +1,101 @@
+import { TextField } from './TextField';
+const meta = {
+    title: 'Inputs/TextField',
+    component: TextField,
+    tags: ['autodocs'],
+    args: {
+        label: 'Label text',
+        required: true,
+        placeholder: 'placeholder',
+        size: 'large',
+        state: 'idle',
+        description: 'Description',
+        clearIcon: true,
+        checkIcon: true,
+        eyeIcon: true,
+        searchIcon: true,
+    },
+    argTypes: {
+        value: {
+            control: 'text',
+        }
+    }
+};
+export default meta;
+export const TextFieldDefault = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-32657&mode=dev',
+        },
+    },
+};
+export const TextFieldHovered = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-32663&mode=dev',
+        },
+        pseudo: { hover: true },
+    },
+};
+export const TextFieldActive = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-32687&mode=dev',
+        },
+    },
+};
+export const TextFieldDisabled = {
+    args: {
+        state: 'disabled',
+        checkIcon: false
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-32678&mode=dev',
+        },
+    },
+};
+export const TextFieldError = {
+    args: {
+        state: 'error',
+        checkIcon: false,
+        eyeIcon: false,
+        errorMessage: 'ErrorMessage'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-32669&mode=dev',
+        },
+    },
+};
+export const TextFieldWithValue = {
+    args: {
+        value: 'Value'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-32723&mode=dev',
+        },
+    },
+};
+export const TextFieldHiddenValue = {
+    args: {
+        value: 'Value',
+        type: 'password'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-32723&mode=dev',
+        },
+    },
+};

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

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

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

@@ -0,0 +1,157 @@
+@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/src/Inputs/TextField/textField.scss

@@ -0,0 +1,156 @@
+@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/src/Inputs/index.js

@@ -0,0 +1,11 @@
+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/src/Inputs/index.scss

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

package/dist/src/Pages/ContentPage/ContentPage.js

@@ -0,0 +1,22 @@
+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/src/Pages/ContentPage/ContentPage.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from '@storybook/react/*';
+import { ContentPage } from './ContentPage';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof ContentPage>;
+export declare const StartPageDesktop: Story;

package/dist/src/Pages/ContentPage/ContentPage.stories.js

@@ -0,0 +1,17 @@
+import { ContentPage } from './ContentPage';
+const meta = {
+    component: ContentPage,
+    title: 'Pages/ContentPage',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const StartPageDesktop = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12660-13159&t=cU5Jc8aB7DMhCJMx-4',
+        },
+    },
+};

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

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

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

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

package/dist/src/Pages/CreatePasswordPage/CreatePasswordPage.js

@@ -0,0 +1,47 @@
+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 })] })] }));
+};

package/dist/src/Pages/CreatePasswordPage/CreatePasswordPage.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CreatePasswordPage } from './CreatePasswordPage';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof CreatePasswordPage>;
+export declare const CreatePasswordDesktop: Story;
+export declare const CreatePasswordMobile: Story;

package/dist/src/Pages/CreatePasswordPage/CreatePasswordPage.stories.js

@@ -0,0 +1,96 @@
+import { expect, userEvent, within } from '@storybook/test';
+import { ReduxDecorator, RouterDecorator } from '../../../.storybook/decorators';
+import { emptyPasswordError, notCorrectPasswordError } from '../../Inputs/PasswordField';
+import { emptyRepeatPasswordError, notCorrectRepeatPasswordError } from '../../Inputs/RepeatPasswordField';
+import { CreatePasswordPage } from './CreatePasswordPage';
+const meta = {
+    component: CreatePasswordPage,
+    decorators: [ReduxDecorator, RouterDecorator],
+    title: 'Pages/Authorization/CreatePasswordPage',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const CreatePasswordDesktop = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=14740-25384&mode=design&t=mI94vejMFxk5S920-4',
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const [passwordWrapper, repeatPasswordWrapper] = Array.from(canvasElement.querySelectorAll('.text-field-wrapper'));
+        const passwordInput = passwordWrapper.querySelector('.text-field__input');
+        const repeatPasswordInput = repeatPasswordWrapper.querySelector('.text-field__input');
+        const submitBtn = canvasElement.querySelector('.btn');
+        const eyeIcon = passwordWrapper.querySelector('#eye-icon');
+        const repeatEyeIcon = repeatPasswordWrapper.querySelector('#eye-icon');
+        const delay = 100;
+        const checkIconId = '#check-icon';
+        const correctPassword = 'qwerty123';
+        const incorrectPassword = '123';
+        await step('Проверяем, заблокирована ли кнопка "Войти в CRM" при незаполненных полях формы', async () => {
+            await expect(submitBtn).toBeDisabled();
+        });
+        await step('При пустом значении в поле "Пароль" выпадает ошибка', async () => {
+            await userEvent.click(passwordInput, { delay });
+            await userEvent.click(repeatPasswordInput, { delay });
+            await expect(canvas.getByText(emptyPasswordError)).toBeInTheDocument();
+        });
+        await step('При пустом значении в поле "Повторите пароль" выпадает ошибка', async () => {
+            await userEvent.click(passwordInput, { delay });
+            await expect(canvas.getByText(emptyRepeatPasswordError)).toBeInTheDocument();
+        });
+        await step('При некорректном значении в поле "Пароль" выпадает ошибка', async () => {
+            await userEvent.type(passwordInput, incorrectPassword, { delay });
+            await userEvent.click(repeatPasswordInput, { delay });
+            await expect(canvas.getByText(notCorrectPasswordError)).toBeInTheDocument();
+        });
+        await step('При разных значения "Пароль" и "Повторите пароль" выпадает ошибка', async () => {
+            await userEvent.type(repeatPasswordInput, correctPassword, { delay });
+            await userEvent.click(passwordInput, { delay });
+            await expect(canvas.getByText(notCorrectRepeatPasswordError)).toBeInTheDocument();
+        });
+        await step('Кнопка "Войти в CRM" заблокирована при наличии ошибки в любом из полей', async () => {
+            await expect(submitBtn).toBeDisabled();
+        });
+        await step('Кнопка "Войти в CRM" доступна при корректно заполненных полях', async () => {
+            await userEvent.clear(passwordInput);
+            await userEvent.type(passwordInput, correctPassword, { delay });
+            await userEvent.clear(repeatPasswordInput);
+            await userEvent.type(repeatPasswordInput, correctPassword, { delay });
+            await expect(submitBtn).toBeEnabled();
+        });
+        await step('При корректно заполненных полях отображаются галочки', async () => {
+            await expect(passwordWrapper.querySelector(checkIconId)).toBeInTheDocument();
+            await expect(repeatPasswordWrapper.querySelector(checkIconId)).toBeInTheDocument();
+        });
+        await step('Кнопка "Войти в CRM" доступна при корректном заполнении формы начиная с "Повторите пароль"', async () => {
+            await userEvent.clear(passwordInput);
+            await userEvent.clear(repeatPasswordInput);
+            await userEvent.type(repeatPasswordInput, correctPassword, { delay });
+            await userEvent.type(passwordInput, correctPassword, { delay });
+            await expect(submitBtn).toBeEnabled();
+        });
+        await step('Тип поля изменяется на "text" при клике на иконку-глаз', async () => {
+            await userEvent.click(repeatEyeIcon, { delay });
+            await expect(passwordInput).toHaveAttribute('type', 'text');
+        });
+        await step('Кнопка "Войти в CRM" доступна при отображении 1 поля', async () => {
+            await expect(submitBtn).toBeEnabled();
+        });
+        await step('Тип поля изменяется на "password" при клике на иконку-глаз', async () => {
+            await userEvent.click(eyeIcon, { delay });
+            await expect(passwordInput).toHaveAttribute('type', 'password');
+        });
+    },
+};
+export const CreatePasswordMobile = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile',
+        }
+    },
+};

package/dist/src/Pages/CreatePasswordPage/createPasswordPage.scss

@@ -0,0 +1,42 @@
+$page-background: $surface-bright;
+$title:           $neutral-high;
+
+.create-password-page {
+  background-color: $page-background;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  box-sizing: border-box;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 24px 40px;
+
+  &__title {
+    margin-bottom: 32px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $title;
+  }
+
+  &__form {
+    width: 100%;
+    padding-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .register-page {
+    max-width: 320px;
+    padding: 24px 16px;
+
+    &__title {
+      font-size: 24px;
+      line-height: 32px;
+    }
+  }
+}