chore: initial monorepo scaffold + WDS Phase 1+2 artifacts
- 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>
This commit is contained in:
74
_bmad/wds/data/design-system/validation-patterns.md
Normal file
74
_bmad/wds/data/design-system/validation-patterns.md
Normal file
@@ -0,0 +1,74 @@
|
||||
# Form Validation Patterns
|
||||
|
||||
**Purpose:** Standard patterns for form validation and error handling.
|
||||
|
||||
**Referenced by:** Input Field, Form component-type instructions
|
||||
|
||||
---
|
||||
|
||||
## Validation Types
|
||||
|
||||
### Client-Side Validation
|
||||
|
||||
**Required Fields:**
|
||||
|
||||
```yaml
|
||||
validation:
|
||||
required: true
|
||||
message: 'This field is required'
|
||||
```
|
||||
|
||||
**Format Validation:**
|
||||
|
||||
```yaml
|
||||
validation:
|
||||
type: email
|
||||
pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
message: 'Please enter a valid email address'
|
||||
```
|
||||
|
||||
**Length Validation:**
|
||||
|
||||
```yaml
|
||||
validation:
|
||||
minLength: 8
|
||||
maxLength: 100
|
||||
message: 'Password must be 8-100 characters'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Error States
|
||||
|
||||
**Visual Indicators:**
|
||||
|
||||
- Red border
|
||||
- Error icon
|
||||
- Error message below field
|
||||
- Error color for label
|
||||
|
||||
**Timing:**
|
||||
|
||||
- Show on blur (after user leaves field)
|
||||
- Show on submit attempt
|
||||
- Clear on valid input
|
||||
|
||||
---
|
||||
|
||||
## Success States
|
||||
|
||||
**Visual Indicators:**
|
||||
|
||||
- Green border (optional)
|
||||
- Success icon (optional)
|
||||
- Success message (optional)
|
||||
|
||||
**When to Show:**
|
||||
|
||||
- After successful validation
|
||||
- For critical fields (password strength)
|
||||
- For async validation (username availability)
|
||||
|
||||
---
|
||||
|
||||
**Reference this when specifying form components.**
|
||||
Reference in New Issue
Block a user