Note

Я отказался от Stencil компонентов в пользу готовой библиотеки Franken UI.

Данный репозиторий находится в архиве

@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.