vue-lib-ebp

UI-Kit (Test)

Описание

Проект содержит в себе библиотеку UI компонентов.

Как установить пакет в проект?! (Свободный доступ)

yarn

yarn add -D vue-lib-ebp

npm

npm nstall vue-lib-ebp --save-dev

Тестирование и отладка

Тесты основаны на Vitest и запускаются с помощью команды yarn test и yarn test-ui для отладки из браузера

Документация

• VueTestUtils
• Vitest

Иконки и Генерация

Иконки хранятся в папке src/assets/svg-icons в формате SVG. Все иконки из UI Kit Figma. Если вам нужно добавить новые иконки в проект, необходимо изначально пропускать их через SVGO, а затем через скрипт-генератор создать файл с путями иконок. Для этого вам достаточно разместить иконки в соответствующей папке и в командной строке прописать yarn gen-icon. После этого в папке src/components/icons будет обновлен файл index.js.

Пример структуры папок

Названия генерируются автоматически согласно структуре папок.

icons
├── ol
│   ├── search.svg
│   └── twitter.svg
└── arrow
    ├── left.svg
    └── right.svg

В итоге будут сгенерированы Vue компоненты как SVG иконки со следующими названиями:

• IconsOlSearch
• IconsOlTwitter
• IconsArrowLeft
• IconsArrowRight

Примечание

• ol - outlined
• fill - filled

Storybook

Правила описания историй

• Все истории хранятся в папке вместе с компонентами.
• Необходимо, чтобы props было описано максимально с помощью tsdoc.
• В аргументах необходимы параметры, чтобы пользователь мог максимально понять, как ему работать с вашим компонентом.