julian
17c08e6392
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24) - apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004) - apps/web: React 19 + Vite 8 (ESM) - libs/shared/api-interface: Zod contract base - Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit - WDS artifacts: - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs) - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact) - Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md - AGENTS.md + README.md como entrada para devs/agentes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
94 lines
1.7 KiB
Markdown
94 lines
1.7 KiB
Markdown
# Component State Management
|
|
|
|
**Purpose:** Guidelines for defining and managing component states.
|
|
|
|
**Referenced by:** Component-type instructions (Button, Input, etc.)
|
|
|
|
---
|
|
|
|
## Standard States
|
|
|
|
### Interactive Components (Buttons, Links)
|
|
|
|
**Required:**
|
|
|
|
- `default` - Normal, ready for interaction
|
|
- `hover` - Mouse over component
|
|
- `active` - Being clicked/pressed
|
|
- `disabled` - Cannot interact
|
|
|
|
**Optional:**
|
|
|
|
- `loading` - Processing action
|
|
- `focus` - Keyboard focus
|
|
|
|
### Form Components (Inputs, Selects)
|
|
|
|
**Required:**
|
|
|
|
- `default` - Empty, ready for input
|
|
- `focus` - Active input
|
|
- `filled` - Has content
|
|
- `disabled` - Cannot edit
|
|
|
|
**Optional:**
|
|
|
|
- `error` - Validation failed
|
|
- `success` - Validation passed
|
|
- `loading` - Fetching data
|
|
|
|
### Feedback Components (Alerts, Toasts)
|
|
|
|
**Required:**
|
|
|
|
- `default` - Neutral information
|
|
- `success` - Positive feedback
|
|
- `error` - Error feedback
|
|
- `warning` - Caution feedback
|
|
|
|
---
|
|
|
|
## State Naming
|
|
|
|
**Use standard names:**
|
|
|
|
- ✅ `hover` not `mouseover`
|
|
- ✅ `disabled` not `inactive`
|
|
- ✅ `loading` not `processing`
|
|
|
|
**Be consistent across components.**
|
|
|
|
---
|
|
|
|
## State Transitions
|
|
|
|
**Define how states change:**
|
|
|
|
```yaml
|
|
Button States: default → hover (mouse enters)
|
|
hover → active (mouse down)
|
|
active → hover (mouse up)
|
|
hover → default (mouse leaves)
|
|
any → disabled (programmatically)
|
|
any → loading (action triggered)
|
|
```
|
|
|
|
---
|
|
|
|
## Visual Indicators
|
|
|
|
**Each state should be visually distinct:**
|
|
|
|
```yaml
|
|
Button:
|
|
default: blue background
|
|
hover: darker blue + scale 1.02
|
|
active: darkest blue + scale 0.98
|
|
disabled: gray + opacity 0.6
|
|
loading: disabled + spinner
|
|
```
|
|
|
|
---
|
|
|
|
**Reference this when specifying component states.**
|