На основе шаблона https://github.com/ProCharity-Practicum/react-vite-router требуется выполнить разработку небольшого приложения, в котором вы отработаете:
— реализацию вариантов у компонента
— проброс контекста для разрешения зависимостей окружения
— распределение ответственности по уровням иерархии
Приложение должно иметь в составе следующие компоненты:
# Pages:
MainPage:
— Layout
—— Section
——— Button#login -> Modal(LoginForm)
——— Button#register -> Modal(RegisterForm)
LoginPage:
— Layout
—— Section
——— Card -> LoginForm
RegisterPage:
— Layout
—— Section
——— Card > RegisterForm
-----------------------
# Screens:
LoginForm:
— Form
—— Field > InputEmail
—— Field > InputPassword
RegisterForm:
— Form
—— Field > InputText
—— Field > InputEmail
—— Field > InputPassword
—— Field > InputPassword
-----------------------
# Containers
Layout:
— Header
— {children}
— Footer
Section:
— {children}
Card:
— {children}
Header:
— Logo
— Menu
— {children}
Footer:
— Logo
— Menu[]
Form:
— {children}
Field:
— {children}
Modal:
— {children}
------------------------
# Components
— Anchor
— Typography {Title, Text}
— Input {InputText, InputEmail, InputPassword}
— Action {Button, Link}
Комментарии к деталям реализации компонент:
— Typography компонент используют внутри хук useTranslation и выводят текст из языковых файлов по идентификатору переданному в пропсе value
— Form и Anchor используют собственный контекст, через который можно выбрать тег реализующий их, это позволит в сторибуке выводить просто form и a, но в окружении роутера заменить на Fetcher и Link
— Компоненты с вариантами (в скобках {варианты через запятую}) сделать через HOC
— Menu использует Anchor для вывода ссылок
— Logo по примеру иконок рекомендую вынести в компонент, чтобы поддерживать вариативность в будущем
— Компоненты в разделе Pages разделите на Роут и Экран, посмотрите в шаблоне .templates/page. А используемые в лоадерах и экшенах каждого роута апи вынесети в отдельные функции в /src/api/
— Обратите внимание что корневой маршрут без пути в App.jsx это коннектор лейата, у него тоже есть лоадер получающий пользователя, если его нет тогда показывает кнопки регистрация и авторизация.
Стили и размеры можно подсмотреть в макете ProCharity, но не увлекайтесь, это задание именно на правильную композицию, а не верстку. Постарайтесь подумать над каждым компонентом и сделать их максимально простыми и эффективными.
Как выполнять задание
- Создайте из шаблона публичный репозиторий в своем GitHub и ведите разработку в ветке develop
- Первым коммитом занесите базовые стили и переменные
- Вторым коммитом сгенерируйте структуру и продумайте типы
- Последующими коммитами реализуйте компонент за компонентом. Но, попробуйте делать с первого раза и не изменять компонент после коммита (за исключением именно ошибок, не меняйте дизайн компонента). Нужно учиться работать с принятыми решениями. Все пожелания по исправлению первой итерации выпишите в README.md
- Когда готовы компоненты аналогично отдельными коммитами реализуйте сборку страниц, в один коммит можно включить страницу и ее апи. Из апи функции просто через Promise.resolve возвращаем моковые данные.
- Посмотрите на свой код, подумайте что можно было бы улучшить и впишите в README.md
- Добавьте ссылку на PR в своем репозитории в комментарий к этой задаче. Вам нужно будет выдать доступы тимлиду или наставнику кто придет проверять вашу работу.
На основе шаблона https://github.com/ProCharity-Practicum/react-vite-router требуется выполнить разработку небольшого приложения, в котором вы отработаете:
— реализацию вариантов у компонента
— проброс контекста для разрешения зависимостей окружения
— распределение ответственности по уровням иерархии
Приложение должно иметь в составе следующие компоненты:
Комментарии к деталям реализации компонент:
— Typography компонент используют внутри хук useTranslation и выводят текст из языковых файлов по идентификатору переданному в пропсе value
— Form и Anchor используют собственный контекст, через который можно выбрать тег реализующий их, это позволит в сторибуке выводить просто
formиa, но в окружении роутера заменить наFetcherиLink— Компоненты с вариантами (в скобках {варианты через запятую}) сделать через HOC
— Menu использует Anchor для вывода ссылок
— Logo по примеру иконок рекомендую вынести в компонент, чтобы поддерживать вариативность в будущем
— Компоненты в разделе Pages разделите на Роут и Экран, посмотрите в шаблоне .templates/page. А используемые в лоадерах и экшенах каждого роута апи вынесети в отдельные функции в /src/api/
— Обратите внимание что корневой маршрут без пути в App.jsx это коннектор лейата, у него тоже есть лоадер получающий пользователя, если его нет тогда показывает кнопки регистрация и авторизация.
Стили и размеры можно подсмотреть в макете ProCharity, но не увлекайтесь, это задание именно на правильную композицию, а не верстку. Постарайтесь подумать над каждым компонентом и сделать их максимально простыми и эффективными.
Как выполнять задание