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

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

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

npm run storybook

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

npm run stylelint

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

npm run lint

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

npm run format

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

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

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

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

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