В проекте используется yarn workspaces
.
Ознакомиться можно по ссылке Workspaces | Yarn.
- Склонировать репозиторий и перейти в созданную директорию.
- Включить corepack:
corepack enable
- Установить зависимости:
yarn install
. - Поднять локально документацию с лайврелоадом:
yarn docs:styleguide
. Свойства и методы компонента в режиме разработки по умолчанию не генерируются; если они вам нужны, используйте командуyarn docs:styleguide:props
.
Документация будет доступна на http://localhost:6060
. В ней ведётся вся разработка. Для удобства можно сразу перейти на страницу разрабатываемого компонента (http://localhost:6060/#/UsersStack
)
Добавить файл .git-blame-ignore-revs
в свой git-конфиг:
git config blame.ignoreRevsFile .git-blame-ignore-revs
Это поможет игнорировать коммиты, связанные с изменениями стиля кода. git blame
будет чище.
- Один PR — одна фича/багфикс (рефакторинги выносим в отдельный PR)
- Дизайн компонента описан в Figma
- Компонент находится в своей папке в
src/components
и не делит её с другими публичными компонентами (один файл — один компонент) - У компонента есть понятная документация, описанная в директории компонента в файле
Readme.md
. Файл подключается вstyleguide/config.js
- Вся документация и предупреждения в коде компонента (
warnOnce
) написаны на русском языке
-
В проекте используется CSS Modules (примеры можно увидить ниже).
⚠️ CompositionНе используем композицию, т.к. в ней нет необходимости, а также в будущем она может усложнить переход на другое решение.
-
CSS-классы названы по БЭМ:
.Component__element-name--modificator
. Гайд по написанию стилей -
Свойства
className
иstyle
навешиваются на корневой элемент компонента -
Свойства, не используемые в коде компонента, навешиваются на главный элемент компонента. По умолчанию главным является корневой элемент:
const Component = (props) => <div {...props} className={styles.Component} />;
Бывают случаи, например, поле ввода, когда главным является именно
input
, а не обёртка:import styles from './Input.module.css'; const Input = ({ mode, style, className, ...restProps }) => { return ( <div className={classNames( className, styles.Input, mode === 'default' && styles['Input--mode-default'], )} style={style} > <input {...restProps} /> </div> ); };
-
Компонент корректно отрисовывается, если не передавать никаких свойств. Вместо
defaultProps
, deprecated для функциональных компонентов, используем спред:import styles from './Component.module.css'; const Component = ({ mode = 'default', className, ...restProps }) => ( <div className={classNames( className, styles.Component, mode === 'default' && styles['Component--mode-default'], )} {...restProps} /> );
-
Для цветов, скруглений, размеров, отступов и теней используются css-переменные из vkui-tokens
-
Для типографии используются компоненты Typography там, где это возможно
-
Добавлен
export
компонента и его свойств вpackages/vkui/src/index.ts
-
Компонент покрыт юнит- и скриншотными тестами. Гайд по тестированию
-
Компонент корректно отображается на всех платформах, размерах и цветовых схемах. В styleguide для всех этих параметров есть переключатели
-
Код корректно работает на поддерживаемых нами браузерах
-
Для поддержки адаптивности следует придерживаться гайда по написанию адаптивных компонентов
-
a11y
(см. пример хорошего PR с внедрением доступности, на который можно равняться #3337):-
Компонент соответствует требованиям
a11y
-
Написаны юнит-тесты на кейсы связанные с
a11y
-
В документации компонента есть раздел про
a11y
(если необходимо) -
Анимации, которые могут вызвать утомляемость у людей с нарушением вестибулярного аппарата, учитывают запрос
@media (prefers-reduced-motion: reduce)
. Зачастую это анимации появления/исчезновения. В них передвижения, по типуtransform: translate()
, и/или изменения размера, по типуtransform: scale()
, должны быть приведены к анимации через прозрачность, например, как сделано вAlert
. Есть исключение, когда пользователь сам изменяет объект, например, swipe-back в компонентеView
, или анимация совсем незначительная, например, как вSwitch
или в<Cell mode="removable" />
(в iOS).В PR #6979 можно посмотреть больше примеров таких упрощений.
-