/blog-customizer

Project template

Primary LanguageTypeScript

Проектная работа: Вёрстка проекта

Шаг первый. Изучаем имеющиеся компоненты

Макет проекта

Для запуска Storybook выполните:

npm run storybook

Для запуска линтера для стилей выполните:

npm run stylelint

Для запуска линтера выполните:

npm run lint

Для запуска форматтера выполните:

npm run format

Функциональные требования

  • При нажатии на «стрелку» открывается сайдбар с настройками, при повторном нажатии или клике вне сайдбар закрывается.
  • При изменении настроек в сайдбаре они не применяются сразу.
  • После нажатия на «применить» стили применяются к статье.
  • При нажатии «сбросить» настройки в форме сбрасываются на начальные, которые были при открытии страницы, и стили применяются к статье.
  • Настройки устанавливаются через CSS-переменные, которые уже есть в стилях и установлены в коде в дефолтные значения.

Шаг второй. Реализация формы

Продумайте следующие моменты, прежде чем приступать к коду:

  • как будет организована композиция,
  • где вы будете хранить состояние,
  • как передавать данные между формой и страницей.

Затем реализуйте механику открытия-закрытия панели с формой, после этого можно будет временно зафиксировать ее пропсом для удобства реализации.

После этого реализуйте форму из имеющихся компонент согласно макету.

Шаг третий. Обеспечьте передачу данных между формой и страницей

Реализуйте по отдельности сохранение состояния страницы и состояние формы. Обеспечьте применение нового состояния после нажатия на «применить».