---
paths:
  - "cofee_frontend/src/**/*.ts"
  - "cofee_frontend/src/**/*.tsx"
---

# Frontend FSD Rules

## Import Direction (strict)

`pages → widgets → features → entities → shared` — no upward or cross-slice imports within the same layer. Enforced by `eslint-plugin-boundaries`.

## Component Convention

Generate components with `bun run gc <layer> <Name>`. Each component folder:
- `index.ts` — public re-export only
- `ComponentName.tsx` — implementation
- `ComponentName.module.scss` — scoped styles
- `ComponentName.d.ts` — props interface (`IComponentNameProps`)

## Features are Module-Aware

Features live in domain subfolders (`features/profile/`, `features/project/`), never flat at `src/features/`. Each module has a barrel `index.ts`. Import via barrel: `import { X } from "@features/profile"`.

After `bun run gc feature <Name>`, move the generated folder into the correct domain module.

## API Client Rules

- **In React components**: always use `api.useQuery()` / `api.useMutation()` from `@shared/api` (TanStack Query + openapi-fetch). For polling use `refetchInterval`.
- **Outside React** (utilities, event handlers): use `fetchClient` from `@shared/api`.
- **File uploads**: use `uploadFile()` from `@shared/api/uploadFile`.
- **Never** use raw `fetch()`, `useEffect`-based data fetching, or `axios` for API calls.

## Styling

- SCSS Modules (`.module.scss`) for all component styles.
- SCSS partials (`_variables`, `_breakpoints`, `_typography`, `_mixins`) are auto-injected via `next.config.mjs` — no manual imports needed.
- Class composition: `import cs from "classnames"`.

## Path Aliases

Use `@shared/*`, `@entities/*`, `@features/*`, `@widgets/*`, `@pages/*`, `@app/*` — never relative paths across layers.

## Code Style

- Prettier: tabs (width 2), no semicolons, double quotes, sorted imports.
- `data-testid` on every component root element.
- Explicit return types on functional components.