50 lines
2.1 KiB
Plaintext
50 lines
2.1 KiB
Plaintext
|
---
|
||
|
|
description: Новые React-компоненты — папка kebab-case, TSX + CSS module, index.ts (furumi-node-player/client/src)
|
||
|
|
globs: furumi-node-player/client/src/**/*
|
||
|
|
alwaysApply: false
|
||
|
|
---
|
||
|
|
|
||
|
|
# Структура новых компонентов (furumi-node-player/client)
|
||
|
|
|
||
|
|
**Область:** при добавлении **нового** компонента в `furumi-node-player/client/src/` используйте расположение и файлы ниже.
|
||
|
|
|
||
|
|
## Расположение
|
||
|
|
|
||
|
|
- Базовая папка: `furumi-node-player/client/src/components/`
|
||
|
|
- Для каждого компонента — **отдельная подпапка** с именем в **kebab-case** (например `play-button`, `search-dropdown`).
|
||
|
|
|
||
|
|
## Файлы внутри папки компонента
|
||
|
|
|
||
|
|
1. **Компонент:** `components/<имя-kebab>/<имя-kebab>.tsx` — реализация компонента; к нему подключён CSS-модуль (`import styles from './<имя-kebab>.module.css'`).
|
||
|
|
2. **Стили:** `components/<имя-kebab>/<имя-kebab>.module.css` — модульные стили для этого компонента.
|
||
|
|
3. **Баррель:** `components/<имя-kebab>/index.ts` — **реэкспорт всего** из файла компонента: `export * from './<имя-kebab>'`.
|
||
|
|
|
||
|
|
Импорт снаружи: `import { MyWidget } from './components/my-widget'` (относительный путь к папке), без указания `index.ts`.
|
||
|
|
|
||
|
|
## Пример (`my-widget`)
|
||
|
|
|
||
|
|
```
|
||
|
|
components/my-widget/
|
||
|
|
my-widget.tsx
|
||
|
|
my-widget.module.css
|
||
|
|
index.ts
|
||
|
|
```
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// my-widget.tsx
|
||
|
|
import styles from './my-widget.module.css'
|
||
|
|
|
||
|
|
export function MyWidget() {
|
||
|
|
return <div className={styles.root}>…</div>
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// index.ts
|
||
|
|
export * from './my-widget'
|
||
|
|
```
|
||
|
|
|
||
|
|
## Примечание
|
||
|
|
|
||
|
|
Существующие файлы-компоненты в корне `components/` (один файл без папки) — наследие; **новые** компоненты добавляйте только по структуре выше.
|