https://github.com/cdek-it/angular-ui-kit
https://github.com/cdek-it/angular-ui-kit
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/cdek-it/angular-ui-kit
- Owner: cdek-it
- Created: 2025-10-10T07:15:29.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2026-04-21T04:52:06.000Z (about 2 months ago)
- Last Synced: 2026-04-21T06:32:10.211Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@cdek-it/angular-ui-kit
- Size: 4.76 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular-ui-kit
angular-ui-kit - это пресет темы для primeng, а также storybook с демонстрацией и документацией используемых компонентов.
Он позволяет быстро и легко строить новые интерфейсы в фирменном стиле CDEK.
## Использование
1. Установите пакет @cdek-it/angular-ui-kit
```shell
npm install @cdek-it/angular-ui-kit
```
2. Импортируйте пресет темы в ваш angular-проект
```ts
import Preset from '@cdek-it/angular-ui-kit/dist/theme.preset.ts';
export const appConfig: ApplicationConfig = {
providers: [
...,
provideAnimations(),
providePrimeNG({
theme: {
preset: Preset,
options: {
darkModeSelector: false,
cssLayer: false
}
}
})
]
};
```
## Используемые технологии и связанные зависимости
---
*используйте в своём проекте*
- Angular 20
- PrimeNG 20
- tailwindcss 3
- @tabler/icons-webfont 3
- Node 20
- ESlint
- Prettier
---
- Storybook 10
## Структура проекта
- `src/app` - базовое angular-приложение. Может использоваться как плейграунд для разработки и отладки.
- `src/stories` - набор story с компонентами для storybook.
- `src/prime-preset` - пресет темы для primeng, а также токены.
## Запуск storybook
1. Установить зависимости
```
npm ci
```
2. Запустить проект
```
npm run storybook
```
3. Открыть в браузере по адресу http://localhost:6006
## Разработка story
1. В директории `src/stories/components` создайте папку с вашим компонентом.
2. Реализуйте story со всеми показанными в figma состояниями компонента. Для референса можно использовать `button`.
3. Убедитесь, что все состояния компонента выглядят верно. Если нет - смотрите раздел "[Правила доработки компонентов](#Правила доработки компонентов)" ниже.
4. Создать pull request в `main`, прикрепить его в задачу. Задачу отдать на ревью разработчикам и дизайнерам.
В случае замечаний ориентируемся на пункт `3` выше.
## Правила доработки компонентов
### Компоненты primeng
Если компонент несоответствует дизайну в figma, то:
1. Проверяем верность токенов. Если есть ошибки - сообщаем мейнтейнеру.
2. Если токены верны, и проблему можно решить кастомизацией css - согласуем доработки с мейнтейнером.
3. Если кастомизации css недостаточно, но можно решить проблему через шаблоны - согласуем доработки с мейнтейнером. Пример ниже.
Например, для `inputtext` нужен крестик с очисткой. Непосредственно такой опции в primeng нет, но можно использовать `p-inputIcon` с иконкой крестика, и следующим `source`-кодом в story:
```
// template
// ts
onClearClick() {
this.value = '';
}
```
Важно, что бы в story был верный `source`-код, что бы разработчики могли просто его копировать и с минимальными доработками использовать у себя.
4. Если вариантов решения проблемы через способы выше нет - сообщаем мейнтейнеру. Далее будет подниматься вопрос о необходимости написания своего компонента.
### Кастомные компоненты
*todo будут разработаны при необходимости*