Daniil
56 lines
2.1 KiB
Markdown
56 lines
2.1 KiB
Markdown
# Generate Component (gc)
|
|
|
|
Generate an FSD component using the project's generator script.
|
|
|
|
## Usage
|
|
|
|
```
|
|
/gc <layer> <ComponentName>
|
|
```
|
|
|
|
**Arguments:**
|
|
- `$ARGUMENTS` — expects `<layer> <ComponentName>`, e.g. `shared Button`, `entity ProjectCard`, `feature CreateProjectModal`
|
|
|
|
## Layers
|
|
|
|
| Alias | Path |
|
|
|-------|------|
|
|
| `shared` | `src/shared/ui/` |
|
|
| `entity` / `entities` | `src/entities/` |
|
|
| `feature` / `features` | `src/features/` |
|
|
| `widget` / `widgets` | `src/widgets/` |
|
|
| `page` / `pages` | `src/pages/` |
|
|
|
|
## Instructions
|
|
|
|
1. Parse `$ARGUMENTS` to extract `<layer>` and `<ComponentName>`. If arguments are missing or unclear, ask the user.
|
|
|
|
2. Run the generator:
|
|
```bash
|
|
bun run gc <layer> <ComponentName>
|
|
```
|
|
|
|
3. This creates 4 files:
|
|
- `index.ts` — re-exports the component
|
|
- `<ComponentName>.tsx` — component implementation with `FunctionComponent`, `JSX.Element`, SCSS module import, `data-testid`
|
|
- `<ComponentName>.d.ts` — props interface `I<ComponentName>Props` with `className?: string`
|
|
- `<ComponentName>.module.scss` — empty `.root {}` class
|
|
|
|
4. After generation, report the created files and the full path.
|
|
|
|
5. If the user provides additional context about what the component should do or look like, modify the generated files accordingly:
|
|
- Add props to the `.d.ts` file
|
|
- Implement the component logic in `.tsx`
|
|
- Add styles to `.module.scss`
|
|
- Use existing project patterns: `classnames` as `cs`, typography/mixin includes from auto-injected SCSS partials, Radix UI primitives or Themes where appropriate, `lucide-react` icons
|
|
|
|
## Project Conventions
|
|
|
|
- Props interface: `I<ComponentName>Props` in a `.d.ts` file
|
|
- Import types with `import type { ... }`
|
|
- Import order: types → react/libs → path aliases (`@shared/`, `@entities/`, etc.) → local
|
|
- Use `cs()` from `classnames` for combining classes
|
|
- Root element gets `className={styles.root}` and `data-testid="<ComponentName>"`
|
|
- SCSS auto-injected namespaces: `variables`, `breakpoints`, `typography`, `mixins`
|
|
- Use `"use client"` directive only when component uses hooks or browser APIs
|