Cсылка на задеплоиный проект .
Все команды запускать в папке проекта
Выполнить yarn
- Выполнить
yarn watch
- Открыть http://localhost:9991/
- Выполнить
yarn storybook
- Открыть http://localhost:6006/
Для WebStorm/PhpStorm идем в Настройки
-> Langiages & Frameworks
-> Code Quality Tools
-> ESLint
И включаем там пункты Automatic ESLing configuration
и Run eslint --fix on save
- Создать проект в Sentry
- В файле
.gitlab-ci.yml
заменитьREPLACE_WITH_REAL_SENTRY_DSN
на верный dsn и раскомментировать строку
Для примера возмьем компонент UpperMenu
.
Каждый компонент должен быть расположен в отдельной одноименной папке UpperMenu
В этой папке должны быть следующие файлы
UpperMenu.scss
- файл со стилями для этого компонентаUpperMenu.story.js
- storybook для компонентаUpperMenu.tsx
- сосбственно сам компонентindex.ts
- файл, экспортирующий данный компонент - для того чтобы в других компонентах при импортеUpperMenu
не нужно было писать путь включающий папкуUpperMenu
В проекте мы используем такие виды компонентов:
-
Страница - компонент, который представляет из себя отдельную страницу сайта (например главная страница, страница контактов и др.)
Название компонентов такого типа всегда оканчивается на "Page", например "IndexPage", "DemoPage", ... Такие компоненты располагаются в
src/routes
. -
Отдельные view-компоненты - блоки, на которые разбивается страница. Такие блоки используются только в родительском компоненте и нигде более. Например, на странице "ContactsPage" может потребоваться для упрощения кода вынести блок с телефонами в отдельный компонент "PhoneNumbers"
Такие компоненты располагаются в подпапке
views
родительского компонента. Напримерsrc/routes/ContactsPage/views/PhoneNumbers
-
Общие компоненты - используются в различных родительских компонентах. Например, компонент "SideMenu" может использоваться на нескольких страницах.
Такие компоненты располагаются в
src/shared
, напримерsrc/shared/SideMenu
Вёрстка по БЭМ предполагает компонентный подход.
В нашем случае это означает что для каждого компонента создается отдельный файл стилей. Например, для компонента
"UpperMenu" должен быть создан файл UpperMenu.scss
, в котором должен быть определен блок css-классо UpperMenu,
и все правила стилей должны задаваться для этого блока, его элементов и/или модификаторов.
Для каждого компонента должен быть создан storybook-файл *.story.js
В нем необходимо представить компонент в различных вариантах, чтобы можно было в едином месте просмотреть все возможные виды компонента с разными настройками.
Например, если компонент - кнопка, то нужно в storybook-файле показать кнопку обычную, в нажатом виде, с наведением курсора, и пр.