Tradedealer UI Library

Tradedealer UI Library — это библиотека UI-компонентов, созданная на основе Lit для быстрого и гибкого создания интерфейсов. Компоненты разработаны в стиле Material Design с использованием синих и голубых оттенков, поддерживают работу в нативном JavaScript, интеграцию с Twig, Angular и другими фреймворками.

Особенности

Модульность: Каждый компонент поставляется в виде отдельного модуля (например, ui-button, ui-grid, ui-select, ui-tab-view, ui-tab-panel и т.д.).
Кастомизация: Возможность настройки размеров, цвета, состояния (disabled), иконок и прочего.
Поддержка фреймворков: Легко интегрируется в проекты на vanilla JavaScript, Twig, Angular и др.
Поддержка форм: Компоненты работают в формах, поддерживают передачу дополнительных атрибутов (например, type="submit").
Интеграция с Storybook: Все компоненты задокументированы в Storybook.

Установка

Для установки библиотеки через npm используйте:

npm install tradedealer-ui-lib

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

import 'tradedealer-ui-lib';
// Или импортируйте конкретные компоненты:
import 'tradedealer-ui-lib/button';
import 'tradedealer-ui-lib/select';

На данный момент требует отдельного импорта глобальных стилей

<link rel="stylesheet" href="/path/to/global.css">

Запуск в режиме разработки

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

npm run storybook

Если есть желание посмотреть, как библиотека работает на реальном примере, то компонент можно потестировать в index.html

Сборка

Для сборки библиотеки используйте команду:

npm run build

Доп.ссылки

Документация Lit Storybook для веб-компонентов