Boris Cherepanov
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/` (один файл без папки) — наследие; **новые** компоненты добавляйте только по структуре выше.
|