ДЗ 20 — Полный перевод проекта на Taiga UI

Цель

Полностью перевести проект на компоненты Taiga UI 5.x, заменив все стандартные HTML элементы на соответствующие компоненты библиотеки.

В проекте уже выполнена базовая интеграция Taiga UI — настроены необходимые провайдеры. Задача — максимально использовать возможности библиотеки во всех компонентах приложения.

---

Срок

До следующего семинара — до 13.04.2026 в 23:00

---

Требования

1. Навигация (AppHeader)

Перевести навигацию в хедере на компоненты Taiga UI.

2. Форма поиска (BrowserSearchForm)

Все поля ввода и кнопки формы поиска должны использовать компоненты Taiga UI.

3. Список результатов (BrowserSearchData)

Карточки результатов поиска оформить через компоненты Taiga UI.

4. Страница настроек (UserSettings)

Переключатели темы и языка реализовать через компоненты Taiga UI.

5. Состояния и индикация (BrowserSearch)

Загрузку, ошибки и пустые состояния отображать компонентами Taiga UI.

---

Критерии оценки — 10 баллов

№	Задача	Баллы
1	Навигация в хедере (AppHeader)	2
2	Форма поиска (BrowserSearchForm)	3
3	Список результатов (BrowserSearchData)	2
4	Страница настроек (UserSettings)	2
5	Индикация состояний (BrowserSearch)	1

Как получить баллы:

• Полный перевод — все элементы компонента используют Taiga UI
• Частичный перевод — некоторые элементы остались на стандартных HTML тегах (0.5 балла)
• Без перевода — компонент не использует Taiga UI (0 баллов)

---

Общие требования

Код

• Весь код типизирован
• Сервисы отделены от компонентов
• Используется OnPush change detection где возможно
• Код без "мусора" и закомментированных блоков

Стили

• Использовать CSS переменные Taiga UI для темизации
• Не переопределять стили компонентов напрямую там, где это можно сделать через API
• Применять tuiAppearance для кастомизации

Доступность

• Сохранить ARIA атрибуты
• Обеспечить навигацию с клавиатуры
• Проверить контрастность цветов

Структура

• Аккуратная структура папок (страницы в pages/, компоненты в components/)
• Компоненты переиспользуемые и следуют единому стилю

---

Пример успешной реализации

• Все кнопки в проекте — TuiButton с соответствующим appearance
• Все инпуты — TuiInput и его вариации
• Навигация выполнена через TuiTabs или аналог
• Списки и карточки используют TuiCard, TuiList
• Состояния (загрузка, ошибка, пусто) показаны через TuiLoader, TuiNotification, TuiEmptyState
• Переключатели — TuiSegmented, TuiSwitch, TuiSelect
• Все цвета и стили согласованы с темой Taiga UI
• Корректная работа в светлой и тёмной теме

---

Полезные ссылки

• Taiga UI Documentation
• Taiga UI Components
• Taiga UI Icons
• Taiga UI Layout
• Angular Integration Guide