Adjutant UI

UI-kit для сайтов экосистемы adjutant.ru — единая библиотека Vue-компонентов, дизайн-токенов и стилей для продуктов PONI.

• Песочница (Storybook)
• Пакет на npm
• Лицензия: Apache-2.0

О проекте

Adjutant UI (@poni/adjutant-ui) — публикуемая npm-библиотека компонентов на Vue 3 с TypeScript. Компоненты используются в веб-приложениях adjutant.ru и доступны для подключения в любой Vue 3 проект.

Библиотека поставляется в нескольких точках входа:

| Точка входа | Назначение | |---|---| | @poni/adjutant-ui | Vue-плагин и утилиты | | @poni/adjutant-ui/components | Именованный импорт компонентов | | @poni/adjutant-ui/types | TypeScript-интерфейсы | | @poni/adjutant-ui/styles.css | Скомпилированные стили | | @poni/adjutant-ui/vars | SCSS-переменные и токены |

Стек

• Vue 3 (Composition API, <script setup>)
• TypeScript
• Vite (сборка в library mode)
• Storybook 10 (документация и песочница)
• SCSS (дизайн-токены, миксины)
• @vueuse/core (peer dependency)

Компоненты

Всего 39 компонентов с префиксом Adj*. Каждый компонент сопровождается Storybook-историей (.stories.ts) и мок-данными (.mock.ts).

Кнопки и действия: AdjButton, AdjButtonCheckbox, AdjIconButton, AdjIconButtonText, AdjImageButton, AdjSliderButton, AdjSelectButton

Формы и ввод: AdjInput, AdjInputModern, AdjInputNumber, AdjCheckbox, AdjCheckboxAlt, AdjRadio, AdjSelect, AdjSelectModern, AdjSelectImage, AdjUploadFile

Навигация и раскладка: AdjTabs, AdjTabsMaterial, AdjExpansionPanel, AdjModal, AdjScroll, AdjSwiper

Фильтры: AdjFiltersDesktop, AdjFiltersMobile, AdjFilterCheckbox, AdjFilterSelect

Обратная связь: AdjHint, AdjHintDesktop, AdjPreloader, AdjSkeleton, AdjSkeletonItem

Иконки и SVG: AdjIcon, AdjSvgActive, AdjSvgEdit, AdjSvgFly, AdjSvgYoutube

Ссылки: AdjDownloadLink, AdjDropdownLink

Дизайн-система

• CSS-переменные (:root) для цветов: --alternative, --contrast-*, --back-*, --stroke-* и др.
• SCSS-переменные в vars.scss — доступны через @use '@poni/adjutant-ui/vars'
• Шрифты: Roboto, Lato, Montserrat, Eurostile, Icomoon (иконочный шрифт)
• Общие варианты оформления (TDesign): primary, alternative, alternative-light, alternative-dark, alternative-active, transparent
• CSS-классы анимаций: adj-fade-*, adj-popup-left-*, adj-popup-bottom-*

Структура репозитория

src/
├── assets/          # Глобальные стили (main.scss)
├── components/      # Vue-компоненты (Adj*/)
├── misc/            # Утилиты и общие типы
├── pages/           # MDX-страницы Storybook (цвета, типографика, иконки…)
├── plugin/          # Точки входа библиотеки (index, components, types)
└── types/           # TypeScript-интерфейсы компонентов
public/
└── vars.scss        # SCSS-токены (копируются в dist при сборке)
.storybook/          # Конфигурация Storybook

Установка

Требования

• Node.js >= 24
• npm >= 11
• Vue >= 3
• @vueuse/core >= 12

NPM

npm i @poni/adjutant-ui

Vue — отдельный компонент

import { AdjButton } from '@poni/adjutant-ui/components'

<template>
  <AdjButton name="Отправить" design="primary" @click="onSubmit" />
</template>

Vue — плагин

import { createApp } from 'vue'
import { AdjutantUiPlugin } from '@poni/adjutant-ui'

const app = createApp(App)
app.use(AdjutantUiPlugin)

Плагин регистрирует provide('getModelImagesArray', …) — утилиту для формирования массива URL кадров вращающихся 3D-моделей.

Подключение стилей

Стили обязательно подключать при использовании компонентов:

// main.ts
import '@poni/adjutant-ui/styles.css'

Подключение SCSS-констант

// main.scss
@use '@poni/adjutant-ui/vars' as *;

Или через Vite:

// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use '@poni/adjutant-ui/vars' as *;`,
      },
    },
  },
})

TypeScript-типы

import type { IAdjTabsItem, IAdjFiltersItem } from '@poni/adjutant-ui/types'

Разработка

Запуск Storybook

npm install
npm run dev

Storybook доступен на http://localhost:5555.

Скрипты

| Команда | Описание | |---|---| | npm run dev | Storybook в режиме разработки (порт 5555) | | npm run build | Сборка библиотеки в dist/ | | npm run build-sb | Сборка Storybook в storybook-static/ | | npm run pub | Сборка и публикация в npm | | npm run check | Форматирование, линтинг и проверка типов | | npm run format | Prettier | | npm run lint | ESLint | | npm run type-check | vue-tsc |

Сборка библиотеки

Vite собирает три entry-point из src/plugin/:

• index.js — плагин и утилиты
• components.js — все компоненты
• types.js — TypeScript-интерфейсы

Vue и @vueuse/core объявлены как external и не включаются в бандл.

CI/CD

При пуше в master Bitbucket Pipeline собирает Storybook и деплоит его на ui.adjutant.ru.