https://github.com/profcomff/ui-kit
Viribus Unitis UI kit
https://github.com/profcomff/ui-kit
Last synced: 14 days ago
JSON representation
Viribus Unitis UI kit
- Host: GitHub
- URL: https://github.com/profcomff/ui-kit
- Owner: profcomff
- License: bsd-3-clause
- Created: 2025-10-24T09:24:16.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-12-18T18:52:48.000Z (about 2 months ago)
- Last Synced: 2025-12-21T04:48:13.616Z (about 2 months ago)
- Language: TypeScript
- Size: 276 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Viribus Unitis UI kit
Здесь мы разрабатываем компоненты, общие для интерфейсов
Твой ФФ и всех
миниприложений. База компонентов и стилей
берется из Vuetify, а дизайн-система
описана в нашей
[Фигме](https://www.figma.com/design/gfvuDN9x7I7sFCJQ7b1bIz/%D0%A2%D0%B2%D0%BE%D0%B9-%D0%A4%D0%A4--%7C-Viribus?node-id=5399-18531&t=gqJoSlE0UHgEkayo-0).
_Большая часть команд и инструкций написаны для операционных систем Linux и MacOS._
## Использование
TODO: Библиотека можно будет установить из npm под скоупом @profcomff. Она будет устанавливаться как плагин, и внедрять в глобальный скоуп приложения все компоненты -- по аналогии с vuetify. Все наши компоненты будут иметь приставку `Vu` (Viribus Unitis): `VuButton`, `VuTag` и т.д.
TODO: Для референса нужно будет захостить собранный сторибук.
## Зависимости
- Node.js >= v18 – среда исполнения на языке JavaScript/TypeScript
- NPM – консольный менеджер пакетов для установки библиотек (идет в поставке с Node.js)
- Vue.js – фреймворк для разработки фронтенда
- Vite – консольный менеджер и инструмент сборки для удобства работы с Vue.js
- Storybook – фреймворк для разраобтки и документации компонентов и экранов.
## Разработка
Для удобства разработки в VS Code создан [workspace](../frontend.code-workspace) с преднастроенными
командами и рекомендованными расширениями для работы.
### Начало работы
Перед началом работы нужно установить зависимости командой
```
pnpm install
```
Если используешь VS Code, то следует настроить автоформатирование:
1. Открыть файл с расширением `.vue`.
2. Открыть палитру команд (Help > Show All Commands или `Ctrl+Shift+P`)
3. Ввести и выбрать `Format document with`.
4. Выбрать `Configure Default Formatter`.
5. Выбрать `Prettier`.
Теперь можно форматировать файлы с помощью `Shift+Alt+F`. Еще можно настроить автоформатирование при сохранении файла (File > Preferences > Settings, Format on save).
### Работа со Storybook
Для локального запуска Storybook необходимо выполнить команду
```
pnpm sb
```
На localhost порте 6006 откроется storybook. Он поддерживает перезагрузку при изменении кода (hot module replacement), но иногда может что-то кешировать -- тогда лучше перезапустить.
В левой вкладке будут перечислены все истории -- это могут быть компоненты, наборы компонентов или целые экраны. При нажатии на них можно посмотреть на то, как компонент выглядит, попробовать поменять какие-то его параметры и посмотреть, как он реагирует на события (например, нажатие).
Создание компонента:
1. В папке `/src/components/` создай папку с названием компонента (например, `button`).
2. Создай в этой папке файл `Vu{НазваниеКомпонента}.vue` и в нем описываем шаблон компонента.
3. Стилизуй компонент с помощью классов vuetify.
4. Опиши модели и пропы, которые может принимать компонент. С помощью /\*\* \*/ опиши пропы и модели (так автоматически генерируется документация).
5. Чтобы отразить псевдо-состяния (hover, active и т.д.), напиши в истории:
```ts
parameters: {
pseudo: {
hover: true,
}
}
```
или посмотри [доку](https://storybook.js.org/addons/storybook-addon-pseudo-states) аддона.
6. В этой же папке создай `Vu{НазваниеКомпонента}.stories.ts`.
7. В этом файле опиши meta, а потом истории -- различные состояния и опции компонента. Подробнее смотри в туториале Storybook или в уже написанных компонентах.
### Пулл-реквест
- Перед отправкой проверь стили: `pnpm check`
- _Опционально_: более строгая проверка `pnpm check:hard`.
- Заполни шаблон пулл-реквеста: что, как и зачем сделал
- Запроси ревью
### Запуск приложения (опционально)
Для локального запуска приложения (чтобы проверять компоненты вне сторибука) необходимо выполнить команду
```
pnpm dev
```
Для локального запуска Storybook необходимо выполнить команду
```
pnpm sb
```
## Инструкции
### Получение кода на свой компьютер
1. Открой приложение "Командная строка" или "Терминал", в зависимости от операционной системы.
2. Прейди в папку, где хочешь создать папку проекта, командой `cd /путь/к/папке`.
- Если ты пользователь windows и хотите создать папку на рабочем столе, то команда будет
выглядеть так: `cd %userprofile%/Desktop`
- Если ты пользователь linux или MacOS и хочещб создать папку на рабочем столе, то команда
будет выглядеть сделующим образом: `cd ~/Desktop/`
3. Склонируй код репозитория к себе на ПК командой
`git clone https://github.com/profcomff/ui-kit.git myapp` (вместо `myapp` подставь название папки, которая будет создана).
4. Открой код в удобной среде разработки. Рекомендуем использовать VSCode, который можно открыть
из терминала командой `code .`
### Сборка библиотеки
TODO: Здесь будет описание сборки и публикации библиотеки на npm.
### Автосборка
TODO: Настроить на релиз.
Коммит в main запускает автоматическую сборку проекта средствами GitHub Actions. Настройки автосборки находятся в
файле [.github/workflows/build_and_publish.yml](.github/workflows/build_and_publish.yml).
### Тесты на Pull Request
При создании запроса на слияние, автоматически создаются проверки кода юниттестами и на стили.
Следующие тесты будут запущены:
- Проверки стилей `eslint`, `prettier`, `stylelint` на код в папке `frontend`
Настройки автотестов находятся в файле[.github/workflows/checks.yml](.github/workflows/checks.yml).