Primeng CDEK

1. Обзор

Этот проект является клоном проекта PrimeNG версии 17.18.11. Проект PrimeNG содержит исходный код компонентов и их стили, а также сайт с демонстрацией этих компонентов PrimeNG. Он позволяет просматривать компоненты в разных темах, представленных в виде CSS файлов.

В Primeng CDEK добавлен репозиторий primeng-sass-theme 17.18.3, который содержит исходные SASS файлы тем и шаблон для создания собственной темы.

Версия NodeJs 18.20

2. Структура проекта

• primeng-sass-theme/ — исходный код тем CDEK.
• primeng-sass-theme/theme-base — базовые стили компонентов. Все темы наследуются от этих стилей.
• primeng-sass-theme/themes/base — базовые переменные для всех тем.
• primeng-sass-theme/themes/base-dark — базовые переменные для всех тем "dark".
• primeng-sass-theme/themes/base-light — базовые переменные для всех тем "light".
• primeng-sass-theme/themes/ek5/base-primary — базовые переменные ek5 для всех тем "primary".
• primeng-sass-theme/themes/ek5/base-secondary — базовые переменные ek5 для всех тем "secondary".
• primeng-sass-theme/themes/brand/base-primary — базовые переменные brand(для внешних клиентов) для всех тем "primary".
• primeng-sass-theme/themes/brand/base-secondary — базовые переменные brand(для внешних клиентов) для всех тем "secondary".
• primeng-sass-theme/themes/ek5 - темы brand(для внешних клиентов).
• primeng-sass-theme/themes/ek5 — темы ek5. В настоящее время используются 4 темы: ek5-light-primary, ek5-dark-primary, ek5-light-secondary, ek5-dark-secondary. Эти SCSS файлы собирают в себя остальные файлы стилей и отправляются на компиляцию.
• src/app/components — исходный код компонентов PrimeNG.
• src/assets/components/themes — готовые темы в виде CSS файлов.

3. Запуск проекта

1. Установить зависимости: npm install.
2. Запустить проект: npm run start.

4. Как формируется итоговый внешний вид компонентов и тема

Помимо темы, компоненты PrimeNG имеют свои стили. Например, кнопка PrimeNG имеет стили в файле src/app/components/button/button.css. Эти стили собираются командой Prime в файл primeng.css, который подключается в проекте с помощью @import "primeng/resources/primeng.css";. При отладке важно понимать, откуда берутся стили компонентов.

Стили темы накладываются поверх этих базовых стилей. Например, тема ek5-light-primary.scss импортирует базовые переменные цветов, генератор CSS переменных, а затем стили компонентов. Это позволяет создавать стили на основе определенных переменных для тем.

5. Разработка темы

Есть два способа разработки темы:

1. Компиляция SASS в CSS:

   • Запустить проект.
   • Запустить компиляцию конкретной темы командой npm run watch-light-primary или всех тем сразу с помощью npm run watch-themes.
   • Изменить нужный SASS файл темы. Sass отследит изменения и перекомпилирует соответствующий CSS файл.
   • Обновить страницу приложения, чтобы увидеть изменения.

   Недостаток: нужно вручную обновлять страницу для просмотра изменений.

2. Импорт темы в styles.scss:

   • Запустить проект.
   • Импортировать файл темы в src/styles.scss:

     @import '../primeng-sass-theme/themes/ek5/ek5-light-primary';

     или для удобного сравнения компонентов с figma в ДС тему brand для внешних клиентов.

   •   @import '../primeng-sass-theme/themes/brand/brand-light-primary';

   
   - При изменении SASS файла проект автоматически перекомпилируется, и изменения будут отображаться без обновления страницы (HMR).
   
   **Недостаток**: проект по умолчанию импортирует тему через CSS, что может привести к перекрытию стилей.
   
   

6. Компиляция темы для использования в других проектах

Команда npm run build-themes создаст .min.css файлы для использования в проектах. TODO решить как используем файл темы. С эк?