Использование EUI

Что доступно

EUI предоставляет компоненты React UI, сервисы JavaScript и утилиты для написания тестов Jest. Для получения полной информации о доступных возможностях обратитесь к веб-сайту Elastic UI Framework (https://elastic.github.io/eui).

EUI публикуется через NPM (https://www.npmjs.com/package/@elastic/eui) как зависимость. Мы также предоставляем стартовые проекты для:

• GatsbyJS (https://github.com/elastic/gatsby-eui-starter);
• NextJS (https://github.com/elastic/next-eui-starter).

Компоненты

Вы можете импортировать компоненты React из модуля EUI верхнего уровня.

import {
  EuiButton,
  EuiCallOut,
  EuiPanel,
} from '@elastic/eui';

Сервисы

Большинство сервисов публикуются из каталога lib/services. Некоторые публикуются из своих каталогов модулей в этом каталоге.

import { keys } from '@elastic/eui/lib/services';
import { Timer } from '@elastic/eui/lib/services/time';

Тесты

Тестовые утилиты публикуются из каталога lib/test.

import { findTestSubject } from '@elastic/eui/lib/test';

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

EUI ожидает, что вы заполните функции ES2015, например, с помощью babel-polyfill (https://babeljs.io/docs/usage/polyfill/). Без полифилла ES2015 ваше приложение может выдавать ошибки в некоторых браузерах.

У EUI также есть moment и @elastic/datemath в качестве зависимостей. Они уже загружены в большинстве репозиториев Elastic, но обязательно установите их, если начинаете с нуля.

Использование EUI в Kibana

CSS EUI включён в пакет CSS Kibana (https://www.github.com/elastic/kibana). Чтобы использовать код EUI в Kibana, просто импортируйте нужные вам компоненты и сервисы.

Использование EUI в отдельном проекте

Вы можете использовать EUI в отдельных проектах, таких как плагины и прототипы.

Импорт CSS или SCSS

В большинстве случаев вам нужен только CSS, который обеспечивает стиль для компонентов React. В этом случае вы можете использовать Webpack для импорта скомпилированного CSS EUI с загрузчиками style, css и postcss.

import '@elastic/eui/dist/eui_theme_light.css';

Если вы хотите получить доступ к переменным Sass, функциям и миксинам в EUI, вам нужно будет импортировать файлы Sass. Это потребует загрузчиков style, css, postcss и sass. Вы также захотите импортировать файл Sass в один из ваших собственных файлов Sass, чтобы получить доступ к этим переменным, функциям и миксинам.

@import '@elastic/eui/src/theme/eui/eui_colors_light.scss';
@import '@elastic/eui/src/theme/eui/eui_global.scss';

Для тёмной темы импортируйте файл тёмных цветов перед глобальными.

@import '@elastic/eui/src/theme/eui/eui_colors_dark.scss';
@import '@elastic/eui/src/theme/eui/eui_global.scss';

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

@import '@elastic/eui/src/theme/eui_amsterdam/eui_amsterdam_colors_light.scss';
@import '@elastic/eui/src/theme/eui_amsterdam/eui_amsterdam_global.scss';

По умолчанию EUI поставляется со стеком шрифтов, включающим некоторые внешние шрифты с открытым исходным кодом. Если ваша система подключена к интернету, вы можете включить их, добавив следующие импорты в ваши файлы SCSS/CSS, в противном случае вам придётся связать физические шрифты в своей сборке. При их отсутствии EUI перейдёт на системные шрифты (которые вы, возможно, предпочтёте).

// index.scss
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
@import url('https://rsms.me/inter/inter-ui.css');

Повторное использование переменных в JavaScript

Переменные Sass также доступны для использования в виде файлов json. Это позволяет повторно использовать значения в системах css-in-js, таких как styled-components (https://www.styled-components.com). Как показывает следующий пример, это также может сделать последующие компоненты тематическими без особых усилий:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import styled, { ThemeProvider } from 'styled-components';
import * as euiVars from '@elastic/eui/dist/eui_theme_light.json';

const CustomComponent = styled.div`
  color: ${props => **Ошибка «Module build failed» или «Module parse failed: Unexpected token»**

Если при импорте компонента React возникает ошибка, возможно, потребуется настроить Webpack's resolve.mainFields на ['webpack', 'browser', 'main'], чтобы импортировать компоненты из lib вместо src. Подробнее см. в документации Webpack.

**Проблемы с импортом иконок**

Чтобы уменьшить влияние EUI на размер пакета приложения, иконки динамически импортируются по запросу. Это может вызвать проблемы для некоторых сборщиков и/или развёртываний, поэтому существует метод предварительной загрузки определённых иконок, необходимых приложению.

```javascript
import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';

import { icon as EuiIconArrowDown } from '@elastic/eui/es/components/icon/assets/arrow_down';
import { icon as EuiIconArrowLeft } from '@elastic/eui/es/components/icon/assets/arrow_left';

// Один или несколько значков передаются как объект iconKey (строка): IconComponent
appendIconComponentCache({
  arrowDown: EuiIconArrowDown,
  arrowLeft: EuiIconArrowLeft,
});

Настройка с помощью className

Мы не рекомендуем настраивать компоненты EUI, применяя стили непосредственно к классам EUI, например, .euiButton. Все компоненты позволяют передавать пользовательский className непосредственно компоненту, который затем добавит его в список классов. Используя каскадную функцию CSS, вы можете настроить стиль, переопределив стили, если ваши стили импортированы после импорта EUI.

<EuiButton className="myCustomClass__button" />

// Отображается как:

<button class="euiButton myCustomClass__button" />

Использование сборки test-env

EUI предоставляет отдельную сборку commonjs, преобразованную babel и частично смоделированную для тестовых сред в проектах-потребителях. Результат идентичен результату lib/, но содержит преобразованные асинхронные функции и операторы динамического импорта, а также применяет некоторые полезные макеты. Эта сборка в основном предназначена для среды Jest в Kibana, но может быть полезна для тестирования в других проектах.

Сопоставление с каталогом test-env

В конфигурации Jest Kibana параметр moduleNameMapper используется для разрешения стандартных операторов импорта EUI с псевдонимами test-env.

moduleNameMapper: {
  '@elastic/eui$': '<rootDir>/node_modules/@elastic/eui/test-env'
}

Это устраняет необходимость полифиллирования или преобразования сборки EUI для среды, которая в противном случае не нуждается в такой обработке.

Смоделированные файлы компонентов

Помимо преобразований babel, сборка тестовой среды использует смоделированные файлы компонентов типа src//[name].testenv.*. Во время сборки файлы типа src//[name].* будут заменены файлами с пространством имён testenv. Цель этого моделирования — ещё больше снизить влияние времени и зависимости от импорта на рендеринг и упростить вывод среды, такой как тестовые снимки. Информацию о создании файлов смоделированных компонентов можно найти в документации по тестированию.