The bem-react-smarthome from haritonasty

git clone https://github.com/haritonasty/bem-react-smarthome
cd bem-react-smarthome 
npm i
npm run start

Необходимо переверстать интерфейс проекта Умный дом на React с использованием пакетов classname, core и di библиотеки bem-react. Достаточно сверстать одну любую страницу, но необходимо осмысленно применить все три пакета.
На что обратить внимание:

Логичность разделения интерфейса на блоки/элементы/модификаторы
Универсальность компонентов: базовые контролы должны быть готовы к повторному использования (например, стили про позиционирование применяются с помощью миксов с элементами родителя, а не захардкоджены в самих блоках)
Оптимальность разделения интерфейса по платформам (весь общий код вынесен на common, частный — разбит по платформам)

На более высокую оценку: Использование дополнительных инструментов из мира БЭМ (например, bem-tools-create)

сверстана страница Видеонаблюдение
Все className сгенерированы с помощью @bem-react/classname
Переключение активного пункта меню в блоке Header сделано с помощью динамического добавления микса функцией withBemMod() из пакета @bem-react/core
@bem-react/di используется для определения mobile or desktop (изменения в блоке Header - в мобильной версии вместо открытой навигации - бургер(без реализации, просто бургер, внутри пусто))
Стили написаны с помощью scss, т.к. все домашка была до этого написана на них (поначалу использовала глобальные стили, например для fluid typography, но убрала, т.к. решила, что таким образом немного нарушается БЕМ)
Использовала bem-tools-create для генерации блоков, стилей для них, и некоторых сопутсвующих файлов. Команда в консоли, которой я пользовалась bem create src/components/Name.{scss,tsx}

haritonasty / bem-react-smarthome Goto Github PK