angular-ui-kit

angular-ui-kit - это пресет темы для primeng, а также storybook с демонстрацией и документацией используемых компонентов. Он позволяет быстро и легко строить новые интерфейсы в фирменном стиле CDEK.

Использование

1. Установите пакет @cdek-it/angular-ui-kit

npm install @cdek-it/angular-ui-kit

2. Импортируйте пресет темы в ваш angular-проект

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
<p-inputIcon>
    <input pInputText [(ngModel)]="value" placeholder="Input with clear icon" />
    <i class="ti ti-cross" (click)="onClearClick()"></i>
</p-inputIcon>

// ts
onClearClick() {
  this.value = '';
}

Важно, что бы в story был верный source-код, что бы разработчики могли просто его копировать и с минимальными доработками использовать у себя. 4. Если вариантов решения проблемы через способы выше нет - сообщаем мейнтейнеру. Далее будет подниматься вопрос о необходимости написания своего компонента.

Кастомные компоненты

todo будут разработаны при необходимости