Библиотека компонентов группы пет-проектов Insola Tech. Используется в insola-design.ru, Insola Layout, Verni Sotku и многих других

🚅 Начать использовать

npm install insola-tech-ui-kit

🛠 Разработка и контрибьюшен

Если нашли баг или проблему с компонентами – не стесняйтесть создать issue в соответствующем разделе репозитория на github. Хотите добавить функциональность? Открывайте Pull Request со своими изменениями!

Локальный запуск

1. Установи зависимости

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

   cd insola-tech-ui-kit
   npm i

2. Открой исходники и начинай говнокодить

   Посмотри, как организованы компоненты, и делай похожим образом.

3. Проверь, что всё работает

   Запусти сторибук npm run storybook чтобы посмотреть, как компоненты работают в изоляции, что можно с ними делать и какие есть крайние случаи их использования.

   Сторибук запустится по адресу http://localhost:6006

🔎 Как всё устроено?

Компоненты лежат внутри папки /src/components и организованы по упрощённому подобию FSD. Внутри папки компоненты разбиты по файлам:

.
├── index.vue
├── stories.ts
└── types.ts

1. index.vue: Содержит сам компонент, его логику и html-шаблон

2. stories.ts: Здесь определяются истории сторибука и интерактивная документация компонента.

3. types.ts: Сюда кладём типы пропов, эмитов и все типы, которые нужно экспортировать из компонента, например, для типизации сторей сторибука.

Также сюда можно класть всё, что связано непосредственно с компонентом и по какой-то причине не может лежать прямо в файле index.vue. Это могут быть файлы с юнит-тестами либо алгоритмо-ёмкие функции, которые в отдельности от компонента тоже имеют смысл и могут быть протестированы.