torgbox-ui 1.0.6 → 1.0.8

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

@@ -0,0 +1,108 @@
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { ReduxDecorator } from '../../../.storybook/decorators';
+import { emptyEmailError, notCorrectEmailError } from '../../Inputs/EmailField';
+import { emptyPasswordError, notCorrectPasswordError } from '../../Inputs/PasswordField';
+import { LoginPage } from './LoginPage';
+const meta = {
+    component: LoginPage,
+    decorators: [ReduxDecorator],
+    title: 'Pages/Authorization/LoginPage',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const LoginPageDesktop = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12659-15695&mode=design&t=X2OTLYu2aaAWIysR-4',
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const [emailWrapper, passwordWrapper] = Array.from(canvasElement.querySelectorAll('.text-field-wrapper'));
+        const passwordInput = passwordWrapper.querySelector('.text-field__input');
+        const emailInput = emailWrapper.querySelector('.text-field__input');
+        const submitBtn = canvasElement.querySelector('.btn');
+        const eyeIcon = passwordWrapper.querySelector('#eye-icon');
+        const checkboxLabel = canvas.getByText('Запомнить меня');
+        const delay = 100;
+        const checkedSelector = '.checkbox__icon--active';
+        const overlaySelector = '.login-page__overlay';
+        const errorBannerText = 'Неверный email или пароль';
+        const btnLoadingSelector = '.btn__filled--loading';
+        const checkIconId = '#check-icon';
+        const correctEmail = 'some@email.com';
+        const correctPassword = 'qwerty123';
+        const incorrectEmail = 'some-email';
+        const incorrectPassword = '123';
+        await step('Проверяем, заблокирована ли кнопка "Войти" при незаполненных полях формы', async () => {
+            await expect(submitBtn).toBeDisabled();
+        });
+        await step('При пустом значении в поле "Email" выпадает ошибка', async () => {
+            await userEvent.click(emailInput, { delay });
+            await userEvent.click(passwordInput, { delay });
+            await expect(canvas.getByText(emptyEmailError)).toBeInTheDocument();
+        });
+        await step('При пустом значении в поле "Пароль" выпадает ошибка', async () => {
+            await userEvent.click(emailInput, { delay });
+            await expect(canvas.getByText(emptyPasswordError)).toBeInTheDocument();
+        });
+        await step('При некорректном значении в поле "Email" выпадает ошибка', async () => {
+            await userEvent.type(emailInput, incorrectEmail, { delay });
+            await userEvent.click(passwordInput, { delay });
+            await expect(canvas.getByText(notCorrectEmailError)).toBeInTheDocument();
+        });
+        await step('При некорректном значении в поле "Пароль" выпадает ошибка', async () => {
+            await userEvent.type(passwordInput, incorrectPassword, { delay });
+            await userEvent.click(emailInput, { delay });
+            await expect(canvas.getByText(notCorrectPasswordError)).toBeInTheDocument();
+        });
+        await step('Кнопка "Войти в CRM" заблокирована при наличии ошибки в любом из полей', async () => {
+            await expect(submitBtn).toBeDisabled();
+        });
+        await step('Кнопка "Войти в CRM" доступна при корректно заполненных полях', async () => {
+            await userEvent.clear(emailInput);
+            await userEvent.type(emailInput, correctEmail, { delay });
+            await userEvent.clear(passwordInput);
+            await userEvent.type(passwordInput, correctPassword, { delay });
+            await expect(submitBtn).toBeEnabled();
+        });
+        await step('При корректно заполненных полях отображаются галочки', async () => {
+            await expect(emailWrapper.querySelector(checkIconId)).toBeInTheDocument();
+            await expect(passwordWrapper.querySelector(checkIconId)).toBeInTheDocument();
+        });
+        await step('Тип поля "Пароль" изменяется на "text" при клике на иконку-глаз', async () => {
+            await userEvent.click(eyeIcon, { delay });
+            await expect(passwordInput).toHaveAttribute('type', 'text');
+        });
+        await step('Тип поля "Пароль" изменяется на "password" при клике на иконку-глаз', async () => {
+            await userEvent.click(eyeIcon, { delay });
+            await expect(passwordInput).toHaveAttribute('type', 'password');
+        });
+        await step('При клике на "Запомнить меня" внутри чекбокса появляется галочка', async () => {
+            await userEvent.click(checkboxLabel, { delay });
+            await expect(canvasElement.querySelector(checkedSelector)).toBeInTheDocument();
+        });
+        await step('При клике на кнопку "Войти" блокируются все поля и статус кнопки меняется на loading', async () => {
+            void userEvent.click(submitBtn, { delay });
+            await waitFor(() => {
+                void expect(canvasElement.querySelector(overlaySelector)).toBeInTheDocument();
+                void expect(canvasElement.querySelector(btnLoadingSelector)).toBeInTheDocument();
+            }, { timeout: 2000 });
+        });
+        await step('При ошибке авторизации появляется баннер с ошибкой', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText(errorBannerText)).toBeInTheDocument();
+            }, { timeout: 2000 });
+        });
+    },
+};
+export const LoginPageMobile = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile',
+        }
+    },
+};

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

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

package/dist/src/Pages/LoginPage/loginPage.scss

@@ -0,0 +1,80 @@
+$page-background:  $surface-bright;
+$title:            $neutral-high;
+$footer-text:      $neutral-low;
+$link:             $primary-high;
+$error-background: $error-border-low;
+$error-content:    $error-high;
+
+.login-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;
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-color: $page-background;
+    opacity: 0.6;
+    z-index: 1;
+  }
+
+  &__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;
+  }
+
+  &__input-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__text {
+    font-size: 12px;
+    line-height: 16px;
+    color: $footer-text;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .login-page {
+    max-width: 320px;
+    padding: 24px 16px;
+
+    &__title {
+      font-size: 24px;
+      line-height: 32px;
+    }
+    
+    &__footer {
+      width: 100%;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+}

package/dist/src/Pages/RegisterPage/RegisterPage.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef, } from 'react';
+import { useRegisterMutation } from '../../entities/user';
+import { Button, EmailField, NameField, PhoneField, } from '../../Inputs';
+import { ErrorBanner } from '../../Utils';
+export const RegisterPage = () => {
+    const [emailValid, setEmailValid] = useState(false);
+    const [nameValid, setNameValid] = useState(false);
+    const [lastNameValid, setLastNameValid] = useState(false);
+    const [phoneNumberValid, setPhoneNumberValid] = useState(false);
+    const [formValid, setFormValid] = useState(false);
+    const [register, { isError, isLoading }] = useRegisterMutation();
+    const formRef = useRef({
+        email: '',
+        name: '',
+        lastName: '',
+        phoneNumber: ''
+    });
+    const getBtnState = () => {
+        if (isLoading)
+            return 'loading';
+        return formValid ? 'idle' : 'disabled';
+    };
+    useEffect(() => {
+        setFormValid([emailValid, nameValid, lastNameValid, phoneNumberValid].every(Boolean));
+    }, [emailValid, nameValid, lastNameValid, phoneNumberValid]);
+    const handleSendForm = () => {
+        if (formValid) {
+            const { email, name, phoneNumber, lastName } = formRef.current;
+            void register({ email, name, phoneNumber, lastName });
+        }
+    };
+    return (_jsxs("div", { className: 'register-page', children: [isLoading && _jsx("div", { className: 'login-page__overlay' }), _jsx("h1", { className: 'register-page__title', children: "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044F \u0430\u043A\u043A\u0430\u0443\u043D\u0442\u0430" }), isError && (_jsx(ErrorBanner, { error: '\u041E\u0448\u0438\u0431\u043A\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438' })), isError && (_jsx(ErrorBanner, { error: '\u041E\u0448\u0438\u0431\u043A\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438' })), _jsxs("form", { className: 'register-page__form', children: [_jsx(EmailField, { onValidated: setEmailValid, onTextValid: (email) => formRef.current.email = email, tabIndex: 1 }), _jsx(NameField, { onValidated: setNameValid, onTextValid: (name) => formRef.current.name = name, nameType: 'firstName', tabIndex: 2 }), _jsx(NameField, { onValidated: setLastNameValid, onTextValid: (lastName) => formRef.current.lastName = lastName, nameType: 'lastName', tabIndex: 3 }), _jsx(PhoneField, { onValidated: setPhoneNumberValid, onTextValid: (phoneNumber) => formRef.current.phoneNumber = phoneNumber, tabIndex: 4 }), _jsx(Button, { label: '\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C email', size: 'large', state: getBtnState(), fullWidth: true, tabIndex: 5, onClick: handleSendForm })] }), _jsxs("div", { className: 'register-page__footer', children: [_jsx("p", { className: 'register-page__text', children: "\u0423\u0436\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u044B?" }), _jsx("a", { className: 'register-page__link', href: '#', children: "\u0412\u043E\u0439\u0442\u0438 \u0432 \u0430\u043A\u043A\u0430\u0443\u043D\u0442" })] })] }));
+};

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

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

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

@@ -0,0 +1,149 @@
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { ReduxDecorator } from '../../../.storybook/decorators';
+import { emptyEmailError, notCorrectEmailError } from '../../Inputs/EmailField';
+import { emptyFirstNameError, emptyLastNameError, notCorrectFirstNameError, notCorrectLastNameError, } from '../../Inputs/NameField';
+import { emptyPhoneError, notCorrectPhoneError } from '../../Inputs/PhoneField';
+import { RegisterPage } from './RegisterPage';
+const meta = {
+    component: RegisterPage,
+    decorators: [ReduxDecorator],
+    title: 'Pages/Authorization/RegisterPage',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Desktop = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=14738-24663&mode=design&t=IrHRiRVwxfX0SzRe-4',
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const [emailWrapper, firstNameWrapper, lastNameWrapper, phoneWrapper] = Array.from(canvasElement.querySelectorAll('.text-field-wrapper'));
+        const emailInput = emailWrapper.querySelector('.text-field__input');
+        const firstNameInput = firstNameWrapper.querySelector('.text-field__input');
+        const lastNameInput = lastNameWrapper.querySelector('.text-field__input');
+        const phoneInput = phoneWrapper.querySelector('.text-field__input');
+        const submitBtn = canvasElement.querySelector('.btn');
+        const overlaySelector = '.login-page__overlay';
+        const errorBannerText = 'Ошибка регистрации';
+        const btnLoadingSelector = '.btn__filled--loading';
+        const delay = 100;
+        const checkIconId = '#check-icon';
+        const correctEmail = 'some@email.com';
+        const correctFirstName = 'Иван';
+        const correctLastName = 'Иванов';
+        const correctPhone = '9992228811';
+        const incorrectEmail = 'some-email';
+        const incorrectName = '123';
+        const incorrectPhone = '000';
+        await step('Проверяем, заблокирована ли кнопка "Подтвердить email" при незаполненных полях формы', async () => {
+            await expect(submitBtn).toBeDisabled();
+        });
+        await step('При пустом значении в поле "Email" выпадает ошибка', async () => {
+            await userEvent.click(emailInput, { delay });
+            await userEvent.click(firstNameInput, { delay });
+            await expect(canvas.getByText(emptyEmailError)).toBeInTheDocument();
+        });
+        await step('При пустом значении в поле "Имя" выпадает ошибка', async () => {
+            await userEvent.click(lastNameInput, { delay });
+            await expect(canvas.getByText(emptyFirstNameError)).toBeInTheDocument();
+        });
+        await step('При пустом значении в поле "Фамилия" выпадает ошибка', async () => {
+            await userEvent.click(phoneInput, { delay });
+            await expect(canvas.getByText(emptyLastNameError)).toBeInTheDocument();
+        });
+        await step('При пустом значении в поле "Мобильный телефон" выпадает ошибка', async () => {
+            await userEvent.click(emailInput, { delay });
+            await expect(canvas.getByText(emptyPhoneError)).toBeInTheDocument();
+        });
+        await step('При некорректном значении в поле "Email" выпадает ошибка', async () => {
+            await userEvent.type(emailInput, incorrectEmail, { delay });
+            await userEvent.click(firstNameInput, { delay });
+            await expect(canvas.getByText(notCorrectEmailError)).toBeInTheDocument();
+        });
+        await step('При корректном значении в поле "Email" появляется галочка', async () => {
+            await userEvent.clear(emailInput);
+            await userEvent.type(emailInput, correctEmail, { delay });
+            await expect(emailWrapper.querySelector(checkIconId)).toBeInTheDocument();
+        });
+        await step('При некорректном значении в поле "Имя" выпадает ошибка', async () => {
+            await userEvent.type(firstNameInput, incorrectName, { delay });
+            await userEvent.click(lastNameInput, { delay });
+            await expect(canvas.getByText(notCorrectFirstNameError)).toBeInTheDocument();
+        });
+        await step('При корректном значении в поле "Имя" появляется галочка', async () => {
+            await userEvent.clear(firstNameInput);
+            await userEvent.type(firstNameInput, correctFirstName, { delay });
+            await expect(firstNameWrapper.querySelector(checkIconId)).toBeInTheDocument();
+        });
+        await step('При некорректном значении в поле "Фамилия" выпадает ошибка', async () => {
+            await userEvent.type(lastNameInput, incorrectName, { delay });
+            await userEvent.click(phoneInput, { delay });
+            await expect(canvas.getByText(notCorrectLastNameError)).toBeInTheDocument();
+        });
+        await step('При корректном значении в поле "Фамилия" появляется галочка', async () => {
+            await userEvent.clear(lastNameInput);
+            await userEvent.type(lastNameInput, correctLastName, { delay });
+            await expect(lastNameWrapper.querySelector(checkIconId)).toBeInTheDocument();
+        });
+        await step('При некорректном значении в поле "Мобильный телефон" выпадает ошибка', async () => {
+            await userEvent.type(phoneInput, incorrectPhone, { delay });
+            await userEvent.click(emailInput, { delay });
+            await expect(canvas.getByText(notCorrectPhoneError)).toBeInTheDocument();
+        });
+        await step('При корректном значении в поле "Мобильный телефон" появляется галочка', async () => {
+            await userEvent.clear(phoneInput);
+            await userEvent.type(phoneInput, correctPhone, { delay });
+            await expect(phoneWrapper.querySelector(checkIconId)).toBeInTheDocument();
+        });
+        await step('Кнопка "Подтвердить email" доступна при всех корректно заполненных полях', async () => {
+            await expect(submitBtn).toBeEnabled();
+        });
+        await step('Кнопка "Подтвердить email" блокируется при некорректном значении любого поля', async () => {
+            await userEvent.type(emailInput, incorrectEmail, { delay });
+            await expect(submitBtn).toBeDisabled();
+            await userEvent.clear(emailInput);
+            await userEvent.type(emailInput, correctEmail, { delay });
+            await userEvent.type(firstNameInput, incorrectName, { delay });
+            await expect(submitBtn).toBeDisabled();
+            await userEvent.clear(firstNameInput);
+            await userEvent.type(firstNameInput, correctFirstName, { delay });
+            await userEvent.type(lastNameInput, incorrectName, { delay });
+            await expect(submitBtn).toBeDisabled();
+            await userEvent.clear(lastNameInput);
+            await userEvent.type(lastNameInput, correctLastName, { delay });
+            await userEvent.clear(phoneInput);
+            await userEvent.type(phoneInput, incorrectPhone, { delay });
+            await expect(submitBtn).toBeDisabled();
+            await userEvent.clear(phoneInput);
+            await userEvent.type(phoneInput, correctPhone, { delay });
+        });
+        await step('При клике на кнопку "Подтвердить email" блокируются все поля и статус кнопки меняется на loading', async () => {
+            void userEvent.click(submitBtn, { delay });
+            await waitFor(() => {
+                void expect(canvasElement.querySelector(overlaySelector)).toBeInTheDocument();
+                void expect(canvasElement.querySelector(btnLoadingSelector)).toBeInTheDocument();
+            }, { timeout: 2000 });
+        });
+        await step('При ошибке авторизации появляется баннер с ошибкой', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText(errorBannerText)).toBeInTheDocument();
+            }, { timeout: 2000 });
+        });
+    },
+};
+export const Mobile = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile',
+        },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=14897-8078&mode=design&t=IrHRiRVwxfX0SzRe-4',
+        },
+    },
+};

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

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

package/dist/src/Pages/RegisterPage/registerPage.scss

@@ -0,0 +1,72 @@
+.register-page {
+  background-color: $surface-bright;
+
+  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: $neutral-high;
+  }
+
+  &__form {
+    width: 100%;
+    padding-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__text {
+    font-size: 12px;
+    line-height: 16px;
+    color: $neutral-low;
+  }
+
+  &__link {
+    font-size: 14px;
+    line-height: 20px;
+    color: $primary-high;
+
+    &:hover {
+      text-decoration: underline $primary-border-low;
+    }
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .register-page {
+    max-width: 320px;
+    padding: 24px 16px;
+
+    &__title {
+      font-size: 24px;
+      line-height: 32px;
+    }
+    
+    &__footer {
+      width: 100%;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    &__text {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}

package/dist/src/Pages/ResetPasswordPage/ResetPasswordPage.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import ChevronLeft from '../../assets/img/chevron-left.svg';
+import { Button, EmailField } from '../../Inputs';
+import { Link } from '../../Utils';
+export const ResetPasswordPage = () => {
+    const [emailValid, setEmailValid] = useState(false);
+    const emailRef = useRef('');
+    return (_jsxs("div", { className: 'reset-password-page', children: [_jsx("h1", { className: 'reset-password-page__title', children: "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435 \u043F\u0430\u0440\u043E\u043B\u044F" }), _jsx("p", { className: 'reset-password-page__text', children: "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u044B, \u0441 \u043A\u043E\u0442\u043E\u0440\u044B\u043C \u0412\u044B \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B\u0438\u0441\u044C, \u0438 \u043C\u044B \u0432\u044B\u0448\u043B\u0435\u043C \u043D\u0430 \u043D\u0435\u0433\u043E \u0438\u043D\u0441\u0442\u0440\u0443\u043A\u0446\u0438\u044E \u0434\u043B\u044F \u0432\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u044F \u043F\u0430\u0440\u043E\u043B\u044F." }), _jsxs("form", { className: 'reset-password-page__form', children: [_jsx(EmailField, { onTextValid: (email) => emailRef.current = email, onValidated: setEmailValid, tabIndex: 1, checkEmail: true }), _jsx(Button, { label: '\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C', state: emailValid ? 'idle' : 'disabled', size: 'large', tabIndex: 2, fullWidth: true })] }), _jsx(Link, { label: '\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u043E\u043A\u043D\u0443 \u0432\u0445\u043E\u0434\u0430', iconComponent: _jsx(ChevronLeft, {}) })] }));
+};

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

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

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

@@ -0,0 +1,24 @@
+import { ResetPasswordPage } from './ResetPasswordPage';
+const meta = {
+    component: ResetPasswordPage,
+    title: 'Pages/Authorization/ResetPasswordPage',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const ResetPasswordPageDesktop = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12659-18507&mode=design&t=hNpF3IDGWJpyx7qO-4',
+        },
+    },
+};
+export const ResetPasswordPageMobile = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile',
+        }
+    },
+};

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

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

package/dist/src/Pages/ResetPasswordPage/resetPasswordPage.scss

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

package/dist/src/Pages/StartPage/StartPage.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAppDispatch } from '../../app/store';
+import { logout } from '../../entities/user';
+import { Button } from '../../Inputs';
+export const StartPage = (props) => {
+    const { email } = props;
+    const dispatch = useAppDispatch();
+    const [createLoading, setCreateLoading] = useState(false);
+    const [joinLoading, setJoinLoading] = useState(false);
+    useEffect(() => {
+        setTimeout(() => {
+            setCreateLoading(false);
+            setJoinLoading(false);
+        }, 2000);
+    });
+    return (_jsxs("div", { className: 'start-page', children: [(createLoading || joinLoading) && _jsx("div", { className: 'start-page__overlay' }), _jsxs("h1", { className: 'start-page__title', children: ["\u0414\u043E\u0431\u0440\u043E \u043F\u043E\u0436\u0430\u043B\u043E\u0432\u0430\u0442\u044C!", _jsx("br", {}), "\u0427\u0442\u043E \u0436\u0435\u043B\u0430\u0435\u0442\u0435 \u0441\u0434\u0435\u043B\u0430\u0442\u044C?"] }), _jsxs("div", { className: 'start-page__text-wrapper', children: [_jsxs("p", { className: 'start-page__text', children: ["\u0412\u044B \u0432\u043E\u0448\u043B\u0438 \u043A\u0430\u043A ", _jsx("span", { className: 'start-page__email', children: email })] }), _jsx("p", { className: 'start-page__text', children: "\u0420\u044B\u0431\u0430\u0442\u0435\u043A\u0441\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u0438\u0437\u0430\u0439\u043D\u0435\u0440\u0430\u043C\u0438, \u043F\u0440\u043E\u0435\u043A\u0442\u0438\u0440\u043E\u0432\u0449\u0438\u043A\u0430\u043C\u0438 \u0438 \u0444\u0440\u043E\u043D\u0442\u0435\u043D\u0434\u0435\u0440\u0430\u043C\u0438, \u043A\u043E\u0433\u0434\u0430 \u043D\u0443\u0436\u043D\u043E \u0431\u044B\u0441\u0442\u0440\u043E \u0437\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u044C \u043C\u0430\u043A\u0435\u0442\u044B \u0438\u043B\u0438 \u043F\u0440\u043E\u0442\u043E\u0442\u0438\u043F\u044B." })] }), _jsx(Button, { label: '\u0421\u043E\u0437\u0434\u0430\u0442\u044C \u043A\u043E\u043C\u0430\u043D\u0434\u0443', size: 'large', state: createLoading ? 'loading' : 'idle', tabIndex: 1, onClick: () => {
+                    setCreateLoading(true);
+                }, fullWidth: true }), _jsx(Button, { label: '\u0412\u0441\u0442\u0443\u043F\u0438\u0442\u044C \u0432 \u043A\u043E\u043C\u0430\u043D\u0434\u0443', size: 'large', state: joinLoading ? 'loading' : 'idle', variant: 'outlined-color', tabIndex: 2, onClick: () => {
+                    setJoinLoading(true);
+                }, fullWidth: true }), _jsx(Button, { label: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u0441\u0438\u0441\u0442\u0435\u043C\u044B', size: 'large', variant: 'clear-neutral', tabIndex: 3, onClick: () => dispatch(logout()), fullWidth: true })] }));
+};

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

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

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

@@ -0,0 +1,48 @@
+import { expect, userEvent } from '@storybook/test';
+import { ReduxDecorator } from '../../../.storybook/decorators';
+import { StartPage } from './StartPage';
+const meta = {
+    component: StartPage,
+    decorators: [ReduxDecorator],
+    title: 'Pages/StartPage',
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        email: 'test@test.com'
+    }
+};
+export default meta;
+export const StartPageDesktop = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12659-17666&mode=design&t=JjhMuFRzcrbxwTPy-4',
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const delay = 100;
+        const createBtn = canvasElement.querySelector('.btn__filled');
+        const joinBtn = canvasElement.querySelector('.btn__outlined-color');
+        const overlaySelector = '.start-page__overlay';
+        const createBtnLoadingSelector = '.btn__filled--loading';
+        const joinBtnLoadingSelector = '.btn__outlined-color--loading';
+        await step('При клике на кнопку "Создать команду" блокируются все другие кнопки и статус кнопки меняется на loading', async () => {
+            await userEvent.click(createBtn, { delay });
+            await expect(canvasElement.querySelector(overlaySelector)).toBeInTheDocument();
+            await expect(canvasElement.querySelector(createBtnLoadingSelector)).toBeInTheDocument();
+        });
+        await step('При клике на кнопку "Вступить в команду" блокируются все другие кнопки и статус кнопки меняется на loading', async () => {
+            await userEvent.click(joinBtn, { delay });
+            await expect(canvasElement.querySelector(overlaySelector)).toBeInTheDocument();
+            await expect(canvasElement.querySelector(joinBtnLoadingSelector)).toBeInTheDocument();
+        });
+    },
+};
+export const StartPageMobile = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile',
+        }
+    },
+};

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

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