@devtokiory/uikit (0.0.2)
Installation
@devtokiory:registry=npm install @devtokiory/uikit@0.0.2"@devtokiory/uikit": "0.0.2"About this package
@devtokiory/uikit - библиотека UI-компонентов на Stencil.
Компоненты собираются как Web Components, поэтому их можно подключать в обычный HTML, React, Vue, Angular и другие приложения без привязки к конкретному фреймворку.
Соглашения
- Все компоненты начинаются с префиксом
dt-; - Глобальные стили (шрифт) можно подтянуть из
src/styles/main.css; - Сборка в
dist/, кастомные элементы и loader для подключения в приложениях. - Автогенерируемая документация компонентов через Stencil
docs-readme.
Установка
pnpm add @devtokiory/uikit
Также можно использовать npm или yarn, если проект не использует pnpm.
npm install @devtokiory/uikit
Быстрый старт
Подключите loader один раз в точке входа приложения:
import { defineCustomElements } from '@devtokiory/uikit/loader';
defineCustomElements();
После этого компоненты можно использовать как обычные HTML-теги:
<dt-container>
<dt-title level="1">Панель управления</dt-title>
<dt-text>Базовый пример интерфейса на @devtokiory/uikit.</dt-text>
<dt-card>
<dt-input name="email" type="email" placeholder="Email"></dt-input>
<dt-button type="submit">Отправить</dt-button>
</dt-card>
</dt-container>
Подключение отдельных компонентов
Пакет экспортирует отдельные custom elements. Это удобно, если нужно подключить только часть библиотеки.
import '@devtokiory/uikit/dt-button';
import '@devtokiory/uikit/dt-input';
<dt-input placeholder="Поиск"></dt-input>
<dt-button variant="secondary">Найти</dt-button>
События форм
Некоторые компоненты форм отправляют CustomEvent с текущим значением.
const input = document.querySelector('dt-input');
input?.addEventListener('valueInput', event => {
console.log((event as CustomEvent<string>).detail);
});
Для dt-input доступны valueInput и valueChange, для dt-select - valueChange, для dt-tabs - valueChange.
Разработка
Установите зависимости:
pnpm install
Запустите локальную разработку с dev-сервером Stencil:
pnpm start
Соберите пакет:
pnpm build
Запустите тесты:
pnpm test
Запустите тесты в watch-режиме:
pnpm test:watch
Сгенерируйте новый компонент через Stencil:
pnpm generate
Структура проекта
src/
components/ Компоненты UI kit и их документация
styles/main.css Глобальные стили библиотеки
index.ts Публичные типы пакета
loader/ Loader для регистрации custom elements
stencil.config.ts Конфигурация сборки Stencil
Документация компонентов
Каждый компонент содержит собственный readme.md в src/components/<component>/readme.md.
Таблицы props и events обновляются автоматически при сборке документации Stencil.
Dependencies
Development dependencies
| ID | Version |
|---|---|
| @stencil/core | ^4.27.1 || ^5.0.0-0 |
| @stencil/vitest | ^1.8.3 |
| @types/node | ^22.13.5 |
| @vitest/browser-playwright | ^4.0.0 |
| playwright | ^1.52.0 |
| vitest | ^4.0.0 |