Blog Customizer

Blog Customizer - проект на React, в котором реализована кастомизация страницы статьи через боковую панель настроек. Панель открывается по клику, позволяет менять параметры отображения, а применение изменений происходит только после подтверждения.

Проект фокусируется на работе с состоянием, обработчиками событий, композицией готовых UI-компонентов и применением настроек через CSS-переменные.

---

Links

• Repository: https://github.com/AlliumPro/blog-customizer
• Макет проекта

---

Tech Stack

• React
• TypeScript (если подключён в проекте)
• CSS Variables (настройки темы)
• Storybook (документация части UI-kit)
• ESLint, Prettier
• Stylelint

---

What’s Implemented

Sidebar (панель настроек)

• Открывается по клику на кнопку со стрелкой
• Закрывается:
  • повторным кликом на кнопку
  • кликом вне панели

Изменение параметров

• Изменения в форме не применяются сразу
• Настройки накапливаются во внутреннем состоянии формы до подтверждения

Применение и сброс

• Кнопка «Применить» применяет выбранные настройки к статье
• Кнопка «Сбросить»:
  • возвращает значения формы к начальному состоянию (на момент открытия страницы)
  • сразу применяет эти значения к статье

Механизм кастомизации

• Настройки задаются через CSS-переменные
• Значения по умолчанию уже определены в стилях и установлены в коде приложения

---

Functional Requirements (Checklist-Oriented)

• Панель открывается по клику и закрывается по повторному клику или по клику вне
• Изменения в форме не влияют на статью до нажатия «Применить»
• «Сбросить» возвращает значения к изначальным и применяет их
• Все параметры применяются через CSS Variables на уровне приложения

---

Project Structure (high level)

Ключевой компонент проекта:

• ArticleParamsForm - форма редактирования параметров статьи
  • хранит состояние формы
  • управляет применением и сбросом
  • использует готовые компоненты из UI-kit

Инфраструктура проекта:

• Storybook для просмотра и документации компонентов UI-kit:
  • помогает собирать форму из готовых элементов
  • упрощает тестирование в изоляции

---

Available Scripts

Storybook

npm run storybook

Lint (JS/TS)

npm run lint

Stylelint

npm run stylelint

Formatter

npm run format

---

How It Works (Conceptually)

1. Пользователь открывает панель настроек
2. Меняет параметры в форме (эти изменения живут только в состоянии формы)
3. Нажимает «Применить»
4. Приложение обновляет набор CSS-переменных на уровне App, и стили статьи меняются
5. «Сбросить» возвращает значения к начальному состоянию и применяет их

---

Notes

• Проект специально построен так, чтобы отработать разделение:
  • состояние формы
  • состояние страницы
  • момент применения изменений (commit по кнопке)

Author

• Ivan Murzin (AlliumPro)
• Telegram: https://t.me/alliumpro