React-components-dasha-test NPM

Информация для пользователей библиотеки

Как установить и использовать

Эта информация требует уточнения после публикации пакета в npm

npm run install react-components
yarn add react-components

import React from "react";
import { Button, ButtonSize } from "react-components";

const App = () => (
  <div className="app-container">
    <h1>Hello I'm consuming the component library</h1>
    <Button size={ButtonSize.S} />
  </div>
);

export default App;

Какие есть компоненты

А сюда добавить описание компонентов

Button

...

Table

...

Spinner

...

Использование SASS переменных

Мы экспортируем некоторые переменные, чтобы вы могли пользоваться стилями без дублирования кода. Например, вы можете воспользоваться цветами и типографикой:

@import '~react-components/build/typography';
@import '~react-components/build/variables';

.example-container {
    @include heading;

    color: $react-components-white;
}

По-хорошему тут бы описать эти переменные, что про что.

Информация для разработчиков библиотеки

Как добавлять новые компоненты

Чтобы добавить новый компонент, не нужно руками создавать папки и файлы. Нужно запустить команду

npm run new:component ComponentName
yarn new:component ComponentName

В папке src будет автоматически создана подпапка со всеми необходимыми файлами:

index.ts для экспорта компонента
ComponentName.tsx с шаблоном компонента
ComponentName.stories.tsx с шаблоном историй для Storybook
ComponentName.spec.tsx с шаблоном автотестов
ComponentName.scss с шаблоном стилей компонента

Дальше вам остается только работать с созданными файлами :smile:

Не забудьте добавить экспорт нового компонента в файл /src/index.ts

Сборка пакета

Чтобы запустить сборку пакета, используйте команду

npm run build
yarn build

Автотестирование

Jest: https://jestjs.io/ru/docs/tutorial-react

Testing Library: https://testing-library.com/docs/react-testing-library/intro/

Для тестирования компонентов библиотеки используются Jest и Testing Library. Каждый компонент "из коробки" имеет файл ComponentName.spec.tsx, в таких файлах следует писать автотесты.

Автотесты автоматически запускаются по команде git push, но вы можете запустить их самостоятельно. Для этого используйте команду

npm run test
yarn test

Если вы хотите автоматически тестировать код компонентов или даже самих тестов, пока его меняете, используйте команду

npm run test:watch
yarn test:watch

Jest запустит автотестирование и будет "слушать" ваши изменения. На каждое сохранение тесты будут перезапускаться.

Storybook

Сайт: https://storybook.js.org/

Гитхаб репозиторий: https://github.com/storybookjs/storybook

Storybook - это удобный инструмент, который позволяет просматривать компоненты в разных состояниях изолированно от внешнего окружения.

Каждый компонент "из коробки" имеет файл ComponentName.stories.tsx, в котором вы можете описывать различные состояния компонентов в качестве историй. Эти истории будут рендериться при запуске Storybook.

Чтобы запустить Storybook локально, используйте команду

npm run storybook
yarn storybook

После этого вы можете изменять код компонентов или истории, Storybook будет обновляться после сохранения изменений.

Если вы хотите экспортировать Storybook в виде статических файлов (ну мало ли), используйте команду

npm run storybook:export
yarn storybook:export

Typechecking

https://www.typescriptlang.org/tsconfig

В проекте настроена автоматическая проверка типов Typescript при коммите и пуше изменений. При коммите проверка типов выполняется только для измененных файлов. При пуше - для всего проекта. Если вы хотите запустить проверку типов локально, используйте команду

npm run typecheck
yarn typecheck

Форматирование кода - Prettier

Сайт: https://prettier.io/

Гитхаб репозиторий: https://github.com/prettier/prettier

В проекте настроено автоматическое форматирование изменяемого кода при коммите с помощью Prettier. При пуше изменений также выполняется валидация форматирования всего проекта в соответствии с заданными правилами. Если вы хотите запустить проверку форматирования локально, используйте команду

npm run prettier:check
yarn prettier:check

Если вы хотите запустить автоматическое форматирование локально, используйте команду

npm run prettier
yarn prettier

ESLint

Сайт: https://eslint.org/

Гитхаб репозиторий: https://github.com/eslint/eslint

В проекте настроен линтер ESLint. В конфигурации используются все рекомендуемые настройки, а также специальные настройки для TypeScript. При коммите изменений линтер запускается только для изменяемых файлов. Он попытается исправить все ошибки, которые сможет. При пуше изменений линтер запустится для всего проекта в режиме валидации. Если вы хотите запустить линтер локально для валидации, используйте команду

npm run eslint:check
yarn eslint:check

Если вы хотите запустить линтер для исправления ошибок локально, используйте команду

npm run eslint
yarn eslint

Stylelint

Сайт: https://stylelint.io/

Гитхаб репозиторий: https://github.com/stylelint/stylelint

В проекте настроен линтер Stylelint для валдиации CSS. При коммите изменений линтер запускается только для изменяемых файлов. Он попытается исправить все ошибки, которые сможет. При пуше изменений линтер запустится для всего проекта в режиме валидации. Если вы хотите запустить линтер локально для валидации, используйте команду

npm run stylelint:check
yarn stylelint:check

Если вы хотите запустить линтер для исправления ошибок локально, используйте команду

npm run stylelint
yarn stylelint

Commit

В проекте настроена валидация коммитов по стандарту Conventional Commits. Подробнее ознакомиться можно по ссылке: https://www.conventionalcommits.org/en/v1.0.0/

Полезно придерживаться этого стандарта, тк он облегчает работу с репозиторием, а также полезен при публикации новых версий пакета (см. спецификацию семантического версионирования https://semver.org/)

Если при коммите вы используете команду git commit, то вам нужно будет самостоятельно составить сообщение коммита валидным образом, иначе коммит не пройдет. Если вы не хотите париться на этот счет, используйте команду