---
name: create-view-component
description: |
  Создание View-компонента — презентационного React-компонента, отвечающего только за отображение UI. Используй когда нужен изолированный переиспользуемый компонент без бизнес-логики, работающий только через пропсы. Триггеры:
  (1) элемент UI можно выделить в изолированный, самодостаточный компонент,
  (2) компонент будет переиспользоваться в нескольких местах,
  (3) нужно покрыть UI компонентными тестами / скриншот-тестами,
  (4) нет прямой работы со стором или API,
  (5) компонент принимает данные через пропсы от родительского компонента.
---

# Создание View-компонента

## Предварительные требования

- [ ] Дизайн компонента: Figma или техническое описание
- [ ] **Если есть ссылка на Figma** — см. [Анализ макета Figma](../analyze-figma-design/SKILL.md)
- [ ] Понимание интерфейса пропсов: какие данные компонент принимает
- [ ] Иконки добавлены в проектную библиотеку иконок, если используются
- [ ] Понимание, где компонент будет использоваться

---

## Структура директории

```text
view/components/ComponentName/
├── index.tsx                 # Основной файл компонента
├── styles.module.css         # CSS-стили: CSS Modules
├── types.ts                  # Типы, опционально для сложных компонентов
├── i18n/                     # Переводы
│   ├── index.ts
│   └── ru.ts
├── hooks/                    # Хуки, опционально
│   ├── index.ts
│   └── useComponentName.ts
├── Skeleton/                 # Skeleton-заглушка, опционально
│   └── index.tsx
└── ComponentNameChild/       # Подкомпоненты, опционально, максимум 2 уровня
    ├── index.tsx
    └── styles.module.css
````

---

## Пошаговая инструкция

### Шаг 1: Создать директорию компонента

```bash
mkdir -p <service>/view/components/ComponentName/i18n
```

Пример:

```bash
mkdir -p <service>/view/components/MyNewComponent/i18n
```

### Шаг 2: Создать файлы i18n

См. [Скилл интернационализации](../i18n/SKILL.md).

### Шаг 3: Создать файл стилей `styles.module.css`

Пример: см. [references/styles-example.css](mdc:references/styles-example.css).

**Правила именования CSS-классов:**

* используйте `camelCase`: `.buttonPrimary`, `.textContainer`;
* избегайте `kebab-case`: `.button-primary`;
* избегайте BEM-нотации: `.Component__element--modifier`.

### Шаг 4: Создать основной файл компонента `index.tsx`

Пример: см. [references/component-example.tsx](mdc:references/component-example.tsx).

Для текстов используйте переводы — см. [Скилл интернационализации](../i18n/SKILL.md).

---

## Ключевые паттерны

Примеры паттернов: см. [references/patterns.tsx](mdc:references/patterns.tsx).

* **Интерфейс пропсов**: имя интерфейса = `I` + имя компонента + `Props`; всегда добавляйте `className?: string`.
* **Объединение классов**: используйте утилиту для объединения базовых, условных и внешних CSS-классов.
* **Именованный экспорт**: используйте `export { ComponentName }`, не `export default`.
* **Мемоизация**: для часто перерисовываемых компонентов используйте `React.memo`.

---

## Чеклист валидации

После создания компонента убедитесь:

* [ ] **Если был макет Figma** — компонент соответствует макету: размеры, отступы, типографика.
* [ ] Директория создана в `view/components/`.
* [ ] Интерфейс пропсов определён: `IComponentNameProps`.
* [ ] `className?: string` добавлен в пропсы.
* [ ] Используется CSS Modules: `styles.module.css`.
* [ ] Переводы созданы — см. [Скилл интернационализации](../i18n/SKILL.md).
* [ ] Используется именованный экспорт.
* [ ] CSS-классы написаны в `camelCase`.
* [ ] Используется утилита для объединения CSS-классов.
* [ ] Компонент не работает напрямую со стором или API.

---

## Референсы из кодовой базы

Примеры view-компонентов для изучения паттернов:

* `view/components/ExampleEmptyState/` — компонент с иконкой, текстом и кнопкой.
* `view/components/ExampleFormList/` — компонент с несколькими формами отображения текста в переводах.
* `view/components/ExampleCard/` — карточка с подкомпонентами.

---

## Проверка после создания

После создания компонента запустите проверки:

```bash
# Проверка линтером TypeScript-файлов
npx eslint --fix <service>/view/components/ComponentName/index.tsx <service>/view/components/ComponentName/i18n/index.ts <service>/view/components/ComponentName/i18n/ru.ts

# Проверка линтером CSS-файлов
npx stylelint --fix <service>/view/components/ComponentName/styles.module.css
```

---

## Связанные скиллы

* [Интернационализация i18n](../i18n/SKILL.md) — для работы с переводами.
* [Создание React-страницы](../create-react-page/SKILL.md) — для создания страниц, использующих view-компоненты.
* [Создание компонента с логикой](../create-logic-component/SKILL.md) — для компонентов, работающих со стором или API.