torgbox-ui 1.0.7 → 1.0.8

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

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

package/dist/src/Pages/CreateTeamPage/CreateTeamPage.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { debounce } from 'lodash/fp';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import ChevronLeft from '../../assets/img/chevron-left.svg';
+import { Button, InnField } from '../../Inputs';
+import { Link, Spinner } from '../../Utils';
+export const CreateTeamPage = (props) => {
+    const { email } = props;
+    const [loading, setLoading] = useState(false);
+    const [innValid, setInnValid] = useState(false);
+    const [searchResult, setSearchResult] = useState('');
+    const [startWorkLoading, setStartWorkLoading] = useState(false);
+    const innRef = useRef('');
+    const getOrganization = () => {
+        setLoading(true);
+        setTimeout(() => {
+            setLoading(false);
+            setSearchResult('ООО “Сокращенное наименование”');
+        }, 1000);
+    };
+    const handleInnCheck = useCallback(debounce(500, getOrganization), []);
+    useEffect(() => {
+        if (innValid) {
+            handleInnCheck();
+            return;
+        }
+        handleInnCheck.cancel();
+        setLoading(false);
+        setSearchResult('');
+    }, [handleInnCheck, innValid]);
+    useEffect(() => {
+        if (startWorkLoading) {
+            setTimeout(() => {
+                setStartWorkLoading(false);
+            }, 1000);
+        }
+    }, [startWorkLoading]);
+    const getBtnState = () => {
+        if (startWorkLoading)
+            return 'loading';
+        return innValid ? 'idle' : 'disabled';
+    };
+    return (_jsxs("div", { className: 'create-team-page', children: [startWorkLoading && _jsx("div", { className: 'create-team-page__overlay' }), _jsxs("h1", { className: 'create-team-page__title', children: ["\u0421\u043E\u0437\u0434\u0430\u0442\u044C \u043A\u043E\u043C\u0430\u043D\u0434\u0443 \u0434\u043B\u044F ", _jsx("br", {}), _jsx("span", { className: 'create-team-page__email', children: email })] }), _jsx("p", { className: 'create-team-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." }), _jsxs("form", { className: 'create-team-page__form', children: [_jsx(InnField, { onValidated: setInnValid, onTextValid: (inn) => innRef.current = inn }), loading && _jsx(Spinner, { className: 'create-team-page__spinner' }), searchResult && _jsx("p", { className: 'create-team-page__organization', children: searchResult }), _jsx(Button, { label: '\u041D\u0430\u0447\u0430\u0442\u044C \u0440\u0430\u0431\u043E\u0442\u0443', size: 'large', state: getBtnState(), tabIndex: 1, onClick: () => {
+                            setStartWorkLoading(true);
+                        }, fullWidth: true })] }), _jsx(Link, { label: '\u041D\u0430\u0437\u0430\u0434', iconComponent: _jsx(ChevronLeft, {}) })] }));
+};

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

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

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

@@ -0,0 +1,82 @@
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { InnError } from '../../Inputs/InnField';
+import { CreateTeamPage } from './CreateTeamPage';
+const meta = {
+    component: CreateTeamPage,
+    title: 'Pages/CreateTeamPage',
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        email: 'test@test.com'
+    }
+};
+export default meta;
+export const CreateTeamPageDesktop = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12659-17942&mode=design&t=wnKZYt4uc5mLPiqN-4',
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const innInput = canvasElement.querySelector('.text-field__input');
+        const submitBtn = canvasElement.querySelector('.btn');
+        const delay = 100;
+        const overlaySelector = '.create-team-page__overlay';
+        const btnLoadingSelector = '.btn__filled--loading';
+        const spinnerSelector = '.spinner';
+        const organizationSelector = '.create-team-page__organization';
+        const incorrectInn = '1226542';
+        const correctInn = '1254169852';
+        await step('Проверяем, заблокирована ли кнопка "Войти" при незаполненном поле "ИНН"', async () => {
+            await expect(submitBtn).toBeDisabled();
+        });
+        await step('При пустом значении в поле "ИНН" выпадает ошибка', async () => {
+            await userEvent.click(innInput, { delay });
+            await userEvent.click(canvasElement, { delay });
+            await expect(canvas.getByText(InnError)).toBeInTheDocument();
+        });
+        await step('При некорректном значении в поле "ИНН" выпадает ошибка', async () => {
+            await userEvent.type(innInput, incorrectInn, { delay });
+            await userEvent.click(canvasElement, { delay });
+            await expect(canvas.getByText(InnError)).toBeInTheDocument();
+        });
+        await step('Кнопка "Начать работу" заблокирована при наличии ошибки в поле "ИНН"', async () => {
+            await expect(submitBtn).toBeDisabled();
+        });
+        await step('Кнопка "Начать работу" доступна при корректно заполненном поле "ИНН"', async () => {
+            await userEvent.clear(innInput);
+            await userEvent.type(innInput, correctInn, { delay });
+            await expect(submitBtn).toBeEnabled();
+        });
+        await step('При корректно заполненном поле "ИНН" появляется спиннер и результат поиска', async () => {
+            await waitFor(async () => {
+                await expect(canvasElement.querySelector(spinnerSelector)).toBeInTheDocument();
+            });
+        });
+        await step('При корректно заполненном поле "ИНН" появляется результат поиска', async () => {
+            await waitFor(async () => {
+                await expect(canvasElement.querySelector(organizationSelector)).toBeInTheDocument();
+            });
+            await step('Кнопка "Начать работу" заблокирована при наличии ошибки в поле "ИНН"', async () => {
+                await userEvent.type(innInput, '1', { delay });
+                await expect(submitBtn).toBeDisabled();
+            });
+        });
+        await step('При клике на кнопку "Начать работу" блокируется окно и статус кнопки меняется на loading', async () => {
+            await userEvent.type(innInput, '6', { delay });
+            await userEvent.click(submitBtn, { delay });
+            await expect(canvasElement.querySelector(overlaySelector)).toBeInTheDocument();
+            await expect(canvasElement.querySelector(btnLoadingSelector)).toBeInTheDocument();
+        });
+    },
+};
+export const CreateTeamPageMobile = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile',
+        }
+    },
+};

package/dist/src/Pages/CreateTeamPage/createTeamPage.scss

@@ -0,0 +1,82 @@
+$page-background:  $surface-bright;
+$title:            $neutral-high;
+$text:             $neutral-middle;
+
+.create-team-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;
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-color: $page-background;
+    opacity: 0.6;
+    z-index: 1;
+  }
+
+  &__title {
+    text-align: center;
+    margin-bottom: 32px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $title;
+  }
+
+  &__text-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-bottom: 12px;
+  }
+
+  &__text {
+    color: $text;
+  }
+
+  &__email {
+    color: $title;
+    font-weight: 400;
+  }
+
+  &__form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &>div:first-child {
+      margin-bottom: 38px;
+    }
+  }
+
+  &__spinner {
+    align-self: center;
+    width: 20px;
+    stroke: $text;
+    z-index: 2;
+    margin-bottom: 26px;
+  }
+
+  &__organization {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 24px;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .create-team-page {
+    max-width: 320px;
+    padding: 24px 16px;
+  }
+}

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

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

package/dist/src/Pages/EmailConfirmationPage/EmailConfirmationPage.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import ChevronLeft from '../../assets/img/chevron-left.svg';
+import { useVerifyEmailMutation } from '../../entities/user';
+import { Button, OtpInput, } from '../../Inputs';
+import { otpError } from '../../Inputs/OtpInput';
+import { Spinner, Link } from '../../Utils';
+export const EmailConfirmationPage = (props) => {
+    const { email } = props;
+    const secondsCount = 60;
+    const [errorMessage, setErrorMessage] = useState('');
+    const [secondsLeft, setSecondsLeft] = useState(0);
+    const [verify, { isLoading, isError, isSuccess }] = useVerifyEmailMutation();
+    const handleSendEmail = (pin) => {
+        setErrorMessage('');
+        void verify({ code: pin, email });
+    };
+    useEffect(() => {
+        setErrorMessage(otpError);
+    }, [isError]);
+    const handleResend = () => {
+        setSecondsLeft(secondsCount);
+    };
+    useEffect(() => {
+        let time;
+        if (secondsLeft > 0) {
+            time = setTimeout(setSecondsLeft, 1000, secondsLeft - 1);
+        }
+        return () => {
+            clearTimeout(time);
+        };
+    }, [secondsLeft]);
+    return (_jsxs("div", { className: 'email-confirmation-page', children: [isLoading && _jsx("div", { className: 'email-confirmation-page__overlay' }), _jsxs("h1", { className: 'email-confirmation-page__title', children: ["\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u0435 ", _jsx("br", {}), "\u043F\u043E\u0447\u0442\u044B"] }), _jsxs("div", { className: 'email-confirmation-page__text-wrapper', children: [_jsx("p", { className: 'email-confirmation-page__variant-text', children: "\u041F\u041E \u0421\u0421\u042B\u041B\u041A\u0415" }), _jsx("p", { className: 'email-confirmation-page__main-text', children: "\u041F\u0440\u043E\u0439\u0434\u0438\u0442\u0435 \u043F\u043E \u0441\u0441\u044B\u043B\u043A\u0435, \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u043D\u043E\u0439 \u043D\u0430" }), _jsx("span", { className: 'email-confirmation-page__email', children: email })] }), _jsxs("div", { className: 'email-confirmation-page__text-wrapper', children: [_jsx("p", { className: 'email-confirmation-page__variant-text', children: "\u0418\u041B\u0418 \u041F\u041E \u041A\u041E\u0414\u0423" }), _jsx("p", { className: 'email-confirmation-page__main-text', children: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u043E\u0434 \u0438\u0437 \u0442\u043E\u0433\u043E \u0436\u0435 \u043F\u0438\u0441\u044C\u043C\u0430." })] }), _jsxs("form", { className: 'email-confirmation-page__form', children: [_jsx(OtpInput, { onComplete: handleSendEmail, errorMessage: errorMessage, setErrorMessage: setErrorMessage, responseReceived: isSuccess || isError, loading: isLoading }), isLoading && (_jsx(Spinner, { className: 'email-confirmation-page__spinner' })), !secondsLeft ? (_jsx(Button, { label: '\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E', onClick: handleResend, size: 'medium', variant: 'clear-color' })) : (_jsxs("p", { className: 'email-confirmation-page__resend', children: ["\u041F\u0438\u0441\u044C\u043C\u043E \u043D\u0435 \u043F\u0440\u0438\u0448\u043B\u043E? \u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E ", secondsLeft] }))] }), _jsx(Link, { label: '\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u043F\u043E\u0447\u0442\u0443', iconComponent: _jsx(ChevronLeft, {}) })] }));
+};

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type IEmailConfirmationPage } from './EmailConfirmationPage';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<IEmailConfirmationPage>;
+export declare const DesktopEmailConfirmation: Story;
+export declare const MobileEmailConfirmation: Story;
+export declare const FilledEmailConfirmation: Story;

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

@@ -0,0 +1,86 @@
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { ReduxDecorator } from '../../../.storybook/decorators';
+import { otpError } from '../../Inputs/OtpInput';
+import { EmailConfirmationPage } from './EmailConfirmationPage';
+const meta = {
+    component: EmailConfirmationPage,
+    decorators: [ReduxDecorator],
+    title: 'Pages/Authorization/EmailConfirmationPage',
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        email: 'test@test.com'
+    }
+};
+export default meta;
+export const DesktopEmailConfirmation = {
+    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 input = canvas.getAllByRole('textbox');
+        const button = canvasElement.querySelector('.btn');
+        const resendTextSelector = '.email-confirmation-page__resend';
+        const overlaySelector = '.email-confirmation-page__overlay';
+        const spinnerSelector = '.spinner';
+        const delay = 100;
+        const resendTextContent = 'Письмо не пришло? Отправить повторно ';
+        await step('При клике на любое поле фокус переносится на первое незаполненное поле', async () => {
+            await userEvent.click(input[5]);
+            await expect(input[0]).toHaveFocus();
+            await userEvent.type(input[0], '11', { delay });
+            await userEvent.click(input[3]);
+            await expect(input[2]).toHaveFocus();
+            await userEvent.click(input[0]);
+            await expect(input[2]).toHaveFocus();
+        });
+        await step('При заполнении всех полей блокируется окно и появляется спиннер', async () => {
+            void userEvent.type(input[0], '2222', { delay });
+            await waitFor(() => {
+                void expect(canvasElement.querySelector(overlaySelector)).toBeInTheDocument();
+                void expect(canvasElement.querySelector(spinnerSelector)).toBeInTheDocument();
+            }, { timeout: 2000 });
+        });
+        await step('При некорректном заполненных полях выпадает ошибка', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText(otpError)).toBeInTheDocument();
+            });
+        });
+        await step('Удаляются ли значения с полей', async () => {
+            await userEvent.type(input[0], '01234', { delay });
+            await userEvent.type(input[4], '{backspace}{backspace}');
+            await expect(input[0]).toHaveValue('0');
+            await expect(input[1]).toHaveValue('1');
+            await expect(input[2]).toHaveValue('2');
+            await expect(input[3]).toHaveValue('3');
+            await expect(input[4]).toHaveValue('');
+            await expect(input[5]).toHaveValue('');
+        });
+        await step('При клике на кнопку "Отправить повторно" появляется сообщение', async () => {
+            await userEvent.click(button, { delay });
+            await waitFor(() => {
+                void expect(canvasElement.querySelector(resendTextSelector)).toBeInTheDocument();
+            }, { timeout: 2000 });
+            await expect(canvasElement
+                .querySelector(resendTextSelector)
+                ?.textContent?.replace(/\d/g, '')).toEqual(resendTextContent);
+        });
+    },
+};
+export const MobileEmailConfirmation = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile',
+        }
+    },
+};
+export const FilledEmailConfirmation = {
+    args: {
+        email: 'test@test.ru',
+    },
+};

package/dist/src/Pages/EmailConfirmationPage/emailConfirmationPage.scss

@@ -0,0 +1,92 @@
+$page-background: $surface-bright;
+$title:           $neutral-high;
+$variant-text:    $neutral-low;
+$main-text:       $neutral-middle;
+$link-text:       $primary-high;
+$link-border:     $primary-border-low;
+
+.email-confirmation-page {
+  position: relative;
+  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: 16px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $title;
+    text-align: center;
+  }
+
+  &__text-wrapper {
+    margin-top: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__variant-text {
+    font-size: 12px;
+    line-height: 16px;
+    color: $variant-text;
+  }
+
+  &__main-text {
+    color: $main-text;
+  }
+
+  &__email {
+    font-weight: 700;
+  }
+
+  &__form {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 36px;
+    margin: 16px 0;
+  }
+
+  &__spinner {
+    position: absolute;
+    top: 14px;
+    right: -33px;
+    width: 20px;
+    stroke: $main-text;
+    z-index: 2;
+  }
+
+  &__resend {
+    color: $variant-text;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .email-confirmation-page {
+    max-width: 320px;
+    padding: 24px 16px;
+
+    &__title {
+      font-size: 24px;
+      line-height: 32px;
+    }
+  }
+}

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

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

package/dist/src/Pages/JoinTeamPage/JoinTeamPage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ChevronLeft from '../../assets/img/chevron-left.svg';
+import { Link } from '../../Utils';
+export const JoinTeamPage = () => {
+    return (_jsxs("div", { className: 'join-team-page', children: [_jsx("h1", { className: 'join-team-page__title', children: "\u0412\u0441\u0442\u0443\u043F\u0438\u0442\u044C \u0432 \u043A\u043E\u043C\u0430\u043D\u0434\u0443 " }), _jsxs("div", { className: 'join-team-page__text-wrapper', children: [_jsx("p", { 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." }), _jsxs("p", { children: ["\u041C\u043E\u0436\u043D\u043E \u043F\u0440\u043E\u0441\u0442\u043E ", _jsx("a", { className: 'join-team-page__link', href: '#', children: "\u0437\u0430\u043A\u0440\u044B\u0442\u044C \u044D\u0442\u0443 \u0432\u043A\u043B\u0430\u0434\u043A\u0443" }), " \u0438 \u043F\u043E\u0434\u043E\u0436\u0434\u0430\u0442\u044C \u043F\u0440\u0438\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u044F."] })] }), _jsx(Link, { label: '\u041D\u0430\u0437\u0430\u0434', iconComponent: _jsx(ChevronLeft, {}) })] }));
+};

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

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

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

@@ -0,0 +1,24 @@
+import { JoinTeamPage } from './JoinTeamPage';
+const meta = {
+    component: JoinTeamPage,
+    title: 'Pages/JoinTeamPage',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const JoinTeamPageDesktop = {
+    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 JoinTeamPageMobile = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile',
+        }
+    },
+};

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

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

package/dist/src/Pages/JoinTeamPage/joinTeamPage.scss

@@ -0,0 +1,50 @@
+$page-background:  $surface-bright;
+$text:             $neutral-middle;
+$title:            $neutral-high;
+$link:             $primary-high;
+$underline:        $primary-middle;
+
+.join-team-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-wrapper {
+    color: $text;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-bottom: 12px;
+  }
+
+  &__link {
+    color: $link;
+    text-decoration: none;
+
+    &:hover, &:focus {
+        cursor: pointer;
+        text-decoration: underline $underline;
+    }
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .join-team-page {
+    max-width: 320px;
+    padding: 24px 16px;
+  }
+}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef, } from 'react';
+import { useLoginMutation } from '../../entities/user';
+import { Button, EmailField, PasswordField, Checkbox, } from '../../Inputs';
+import { ErrorBanner, Link } from '../../Utils';
+export const LoginPage = () => {
+    const [emailValid, setEmailValid] = useState(false);
+    const [passwordValid, setPasswordValid] = useState(false);
+    const [remember, setRemember] = useState(false);
+    const [formValid, setFormValid] = useState(false);
+    const [login, { isLoading, isError }] = useLoginMutation();
+    const formRef = useRef({
+        email: '',
+        password: '',
+        remember
+    });
+    const getBtnState = () => {
+        if (isLoading)
+            return 'loading';
+        return formValid ? 'idle' : 'disabled';
+    };
+    const handleSendForm = () => {
+        if (formValid) {
+            const { email, password } = formRef.current;
+            void login({ email, password });
+        }
+    };
+    useEffect(() => {
+        setFormValid([emailValid, passwordValid].every(Boolean));
+    }, [emailValid, passwordValid, isLoading]);
+    return (_jsxs("div", { className: 'login-page', children: [isLoading && _jsx("div", { className: 'login-page__overlay' }), _jsx("h1", { className: 'login-page__title', children: "\u0412\u0445\u043E\u0434 \u0432 \u0430\u043A\u043A\u0430\u0443\u043D\u0442" }), isError && (_jsx(ErrorBanner, { error: '\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 email \u0438\u043B\u0438 \u043F\u0430\u0440\u043E\u043B\u044C' })), _jsxs("form", { className: 'login-page__form', children: [_jsx(EmailField, { onValidated: setEmailValid, onTextValid: (email) => (formRef.current.email = email), tabIndex: 1 }), _jsx(PasswordField, { onValidated: setPasswordValid, onPasswordInput: (password) => (formRef.current.password = password), tabIndex: 2 }), _jsx(Checkbox, { checked: remember, label: '\u0417\u0430\u043F\u043E\u043C\u043D\u0438\u0442\u044C \u043C\u0435\u043D\u044F', onClick: setRemember }), _jsx(Button, { label: '\u0412\u043E\u0439\u0442\u0438', size: 'large', state: getBtnState(), onClick: handleSendForm, fullWidth: true, tabIndex: 3 })] }), _jsxs("div", { className: 'login-page__footer', children: [_jsx("p", { className: 'login-page__text', children: "\u0415\u0449\u0435 \u043D\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u044B?" }), _jsx(Link, { label: '\u0421\u043E\u0437\u0434\u0430\u0442\u044C \u0430\u043A\u043A\u0430\u0443\u043D\u0442' })] })] }));
+};

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

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