Viribus Unitis UI kit

Здесь мы разрабатываем компоненты, общие для интерфейсов Твой ФФ и всех миниприложений. База компонентов и стилей берется из Vuetify, а дизайн-система описана в нашей Фигме.

Большая часть команд и инструкций написаны для операционных систем 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 с преднастроенными командами и рекомендованными расширениями для работы.

Начало работы

Перед началом работы нужно установить зависимости командой

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 и т.д.), напиши в истории:

   parameters: {
   	pseudo: {
   		hover: true,
   	}
   }

   или посмотри доку аддона.
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.

Тесты на Pull Request

При создании запроса на слияние, автоматически создаются проверки кода юниттестами и на стили. Следующие тесты будут запущены:

• Проверки стилей eslint, prettier, stylelint на код в папке frontend

Настройки автотестов находятся в файле.github/workflows/checks.yml.