Skip to content

Latest commit

 

History

History
35 lines (28 loc) · 3.06 KB

CONTRIBUTING.md

File metadata and controls

35 lines (28 loc) · 3.06 KB

Разработка

  1. Склонировать репозиторий и перейти в созданную директорию.
  2. Установить зависимости: yarn install.
  3. Поднять локально документацию с лайврелоадом: yarn styleguide.

Документация будет доступна на http://localhost:6060. В ней ведётся вся разработка. Для удобства можно сразу перейти на страницу разрабатываемого компонента (http://localhost:6060/#/UsersStack)

Чеклист для компонента

Организационные моменты

  • Дизайн компонента описан в Figma
  • Компонент находится в своей папке в src/components и не делит её с другими публичными компонентами (один файл — один компонент)
  • У компонента есть понятная документация, описанная в директории компонента в файле Readme.md. Файл подключается в styleguide/config.js
  • Вся стилизация — в соответствующем .css файле. Файл подключается в src/styles/styles.css

Требования к разработке

  • Свойства className и style навешиваются на корневой элемент компонента
  • Свойства, не используемые в коде компонента, навешиваются на главный элемент компонента. По-умолчанию, главным является корневой элемент. Но бывают случаи, например поле ввода, когда главным является именно input, а не обёртка
const { mode, style, className, ...restProps } = props;

return (
  <div className={classNames('Input', `Input--${mode}`, className)} style={style}>
    <input {...restProps} />
  </div>
);
  • Компонент корректно отрисовывается, если не передавать никаких свойств (пользуемся defaultProps)
  • Для цветов используются цветовые токены
  • Для типографии используются компоненты Typography там, где это возможно
  • Добавлен export компонента в src/index.ts
  • Компонент корректно отображается на всех платформах, размерах и цветовых схемах. В styleguide для всех этих параметров есть переключатели
  • Код корректно работает на поддерживаемых нами браузерах