PrimeUIX - Angular + PrimeNG + TailwindCSS

Демо-приложение с кастомной темой PrimeNG на основе дизайн-токенов.

🚀 Технологии

• Angular v21 - Современный фреймворк для веб-приложений
• PrimeNG v21 - Богатая коллекция UI компонентов
• TailwindCSS v3 - Утилитарный CSS фреймворк
• Storybook v10 - Документация и изолированная разработка компонентов
• Design Tokens - Единая система дизайна из PrimeUIX

✨ Возможности

• 🎨 Кастомная тема на основе дизайн-токенов
• 🌓 Переключение между светлой и тёмной темой
• 📚 Storybook с примерами всех компонентов
• 🎯 Примеры страниц с использованием PrimeNG компонентов
• 📱 Адаптивный дизайн
• ♿ Поддержка доступности (A11y)

📦 Установка

npm install

🏃 Запуск

Запуск приложения

npm start

Приложение будет доступно по адресу http://localhost:4200

Запуск Storybook

npm run storybook

Storybook будет доступен по адресу http://localhost:6006

🏗️ Сборка

Сборка приложения

npm run build

Сборка Storybook

npm run build-storybook

📁 Структура проекта

src/
├── app/
│   ├── core/                    # Основные сервисы
│   │   └── services/
│   │       ├── navigation.service.ts
│   │       └── theme.service.ts
│   ├── shared/                  # Переиспользуемые компоненты
│   │   └── components/
│   │       ├── layout/
│   │       └── theme-toggle/
│   ├── features/                # Feature модули
│   │   ├── home/                # Главная страница
│   │   └── examples/            # Примеры компонентов
│   │       ├── buttons/
│   │       ├── inputs/
│   │       ├── cards/
│   │       ├── tables/
│   │       ├── dialogs/
│   │       ├── selects/
│   │       └── forms/
│   └── theme/                   # Кастомная тема
│       └── primeuix.preset.ts
├── stories/                     # Storybook stories
│   ├── Introduction.mdx
│   └── primeuix/
│       ├── Button.stories.ts
│       ├── InputText.stories.ts
│       ├── Card.stories.ts
│       ├── DataTable.stories.ts
│       ├── Dialog.stories.ts
│       ├── Select.stories.ts
│       └── Checkbox.stories.ts
├── tokens/                      # Дизайн-токены
│   ├── primitive-default.json
│   ├── semantic-default.json
│   ├── components-default.json
│   ├── sizing-base.json
│   ├── theme-light.json
│   └── theme-dark.json
└── primefaces-llm/              # Документация компонентов
    └── components/

🎨 Кастомная тема

Тема создана на основе дизайн-токенов из PrimeUIX и включает:

• Primitive токены - базовые цвета и размеры
• Semantic токены - семантические значения
• Component токены - специфичные настройки компонентов
• Theme токены - светлая и тёмная темы
• Sizing токены - размеры компонентов

Тема настроена в файле src/app/theme/primeuix.preset.ts и автоматически применяется ко всем компонентам PrimeNG.

🌓 Переключение темы

Приложение поддерживает переключение между светлой и тёмной темой. Текущая тема сохраняется в localStorage и автоматически применяется при следующем запуске.

📖 Storybook

Storybook содержит примеры использования следующих компонентов:

1. Button - различные стили и варианты кнопок
2. InputText - поля ввода с различными конфигурациями
3. Card - карточки для группировки контента
4. DataTable - таблицы с данными
5. Dialog - модальные окна
6. Select - выпадающие списки
7. Checkbox & Radio - чекбоксы и радиокнопки

Каждый компонент содержит множество примеров использования с интерактивными controls.

🔧 Конфигурация

TailwindCSS

TailwindCSS настроен для работы с дизайн-токенами в файле tailwind.config.js. Цвета и размеры автоматически импортируются из токенов.

PrimeNG Theme

Кастомная тема PrimeNG настроена в src/app/theme/primeuix.preset.ts и подключена в src/app/app.config.ts.

📝 Лицензия

MIT

🤝 Вклад

Вклад приветствуется! Пожалуйста, создайте issue или pull request.

📞 Контакты

Для вопросов и предложений создайте issue в репозитории.