Разработка компонентов

Информацию о том, как проектировать компоненты, см. в документации по проектированию компонентов.

Прежде чем работать с компонентами EUI или создавать новые, вы можете запустить локальный сервер для сайта документации. Здесь мы демонстрируем, как работают компоненты нашей системы проектирования.

Запуск сервера документации

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

yarn
yarn start

После запуска сервера вы сможете посетить его в браузере по адресу: http://localhost:8030/. Сервер разработки отслеживает изменения в файлах исходного кода и автоматически перекомпилирует компоненты при внесении изменений.

Создание компонентов

Создание нового компонента состоит из четырёх шагов:

1. Создайте SCSS для компонента в src/components.
2. Создайте React-часть компонента.
3. Напишите тесты.
4. Документируйте его с примерами в src-docs.

Вы можете сделать это с помощью Yeoman или вручную, если хотите.

• Руководство по созданию компонентов с помощью Yeoman.
• Руководство по ручному созданию компонентов.

Тестирование компонента

yarn run test-unit запускает модульные тесты Jest один раз.

yarn run test-unit button запустит тесты с «button» в названии спецификации. Вы можете передать другие аргументы CLI Jest, просто добавив их в конец команды, например:

yarn run test-unit -- -u обновит ваши снимки. Чтобы передать флаги или другие параметры, вам нужно будет следовать формату yarn run test-unit -- [arguments]. Примечание: если у вас возникают сбои сборки в Jenkins, связанные со снимками, попробуйте сначала очистить кэш yarn run test-unit -- --clearCache.

yarn run test-unit -- --watch отслеживает изменения и запускает тесты по мере написания кода.

yarn run test-unit -- --coverage генерирует отчёт о покрытии кода, показывающий, насколько полно протестирован код, расположенный в reports/jest-coverage.

См. руководство по тестированию для получения рекомендаций по написанию и разработке тестов.

См. руководство по автоматическому тестированию доступности для дополнительной информации.

Тестирование компонента с Kibana

Обратите внимание, что yarn link в настоящее время не работает с Kibana. Вам нужно будет упаковать и вставить его в Kibana для локального тестирования.

1. В папке eui запустите yarn build, затем npm pack. Это создаст файл .tgz с изменениями в вашем каталоге EUI. На этом этапе вы можете переместить его куда угодно.
2. В Kibana у вас есть два варианта:
   • Укажите свои файлы package.json в Kibana на этот файл: "@elastic/eui": "/path/to/elastic-eui-xx.x.x.tgz" и запустите yarn kbn bootstrap.
   • Или (и часто проще) вы можете сначала запустить yarn kbn bootstrap в Kibana, а затем просто распаковать файл .tgz и вставить его содержимое в пустую папку /kibana/node_modules/@elastic/eui. Этот метод позволяет избежать редактирования всех различных файлов package.json в Kibana, если вам нужно запустить функциональные тесты.
3. Независимо от выбранного метода, запустите Kibana с FORCE_DLL_CREATION=true node scripts/kibana --dev, чтобы убедиться, что он не использует ранее кэшированную версию EUI.

Принципы

Логически сгруппированные компоненты

Если компонент имеет подкомпоненты (<EuiToolBar> и <EuiToolBarSearch>), тесно связанные компоненты (<EuiButton> и <EuiButtonGroup>) или вы просто хотите сгруппировать некоторые связанные компоненты вместе (<EuiTextInput>, <EuiTextArea> и <EuiCheckBox>), то они принадлежат к одной логической группе. В этом случае вы можете создать дополнительные файлы SCSS для этих компонентов в том же каталоге компонентов.

Написание CSS

См. страницу SASS нашего сайта документации для руководства по написанию стилей.

Определения типов TypeScript

Проходные реквизиты

Многие наши компоненты используют... Параметры rest и оператор spread используются для передачи props в базовый элемент DOM. В таких случаях определение компонента TypeScript должно корректно включать props целевого элемента DOM.

Компонент Foo, который передаёт ...rest в элемент button, будет иметь интерфейс props:

// передает дополнительные props кнопке
interface FooProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  title: string
}

Некоторые элементы DOM (например, div, span) не имеют атрибутов помимо базовых, предоставляемых всеми элементами HTML. В этих случаях нет конкретного интерфейса *HTMLAttributes, и следует использовать HTMLAttributes.

// передаёт дополнительные props div
interface FooProps extends HTMLAttributes<HTMLDivElement> {
  title: string
}

Если компонент перенаправляет ref в базовый элемент, интерфейс дополнительно расширяется с помощью DetailedHTMLProps.

// передаёт дополнительные props и перенаправляет ссылку на кнопку
interface FooProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
  title: string