Install

npm i @wgt3d/fr-ui-kit

Setup

Подключить нужную тему в корневом js файле приложения.

// App.js
import '@wgt3d/fr-ui-kit/lib/themes/base/index.sass';

Библиотека иконок

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

import '@wgt3d/fr-ui-kit/lib/icons/camera-rotation';

либо все сразу

import '@wgt3d/fr-ui-kit/lib/registerIcons';

Если нужно подключить свои иконки, это можно сделать так:

import {addIcon, addIconContext} from '@wgt3d/fr-ui-kit/lib/atoms/Icon/icons';

// по одной
addIcon('my-icon', iconCode);

// сразу всю папку
// webpack 4
addIconContext(require.context("!!raw-loader!path/to/your/icons", false, /\.svg$/));

// webpack 5 
addIconContext(require.context("path/to/your/icons", false, /\.svg$/));
//в webpack 5 также придётся написать правило для этих иконок, что их надо грузить как `type: 'asset/source'` 

Usage

import { Text, Icon } from '@wgt3d/fr-ui-kit/lib/atoms';
import { Modal, Select } from '@wgt3d/fr-ui-kit/lib/molecules';

Tests

У всех компонентов есть свойство data-test-id. В случае с составными компонентами, помимо атрибута для корневого компонента, еще создаются отдельные для ключевых элементов в формате testId:element

    /**
        Например в этом случае будут доступны следующие data-test-id атрибуты:

        my-button
        my-button:icon
        my-button:text
        my-button:loader
    **/

    <Button
        loading 
        icon={'icon'}
        text={'Text'}
        data-test-id={'my-button'} />

Доступные элементы:

• Button: icon text loader
• Checkbox: content label
• Dropdown: drop trigger
• Field: content label
• Focusable: content
• Menu: item placeholder
• Modal: content backdrop
• Range: handle input track
• Select: drop label option trigger value-label
• TextField: clear error icon input label