@wireweave/ux-rules 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -0
- package/dist/index.cjs +1236 -0
- package/dist/index.d.cts +187 -0
- package/dist/index.d.ts +187 -0
- package/dist/index.js +1202 -0
- package/package.json +54 -0
package/README.md
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# @wireweave/ux-rules
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@wireweave/ux-rules)
|
|
4
|
+
[](https://www.npmjs.com/package/@wireweave/ux-rules)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
|
|
7
|
+
UX validation rules for Wireweave DSL. This package provides automated UX best practice validation for wireframe designs.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @wireweave/ux-rules
|
|
13
|
+
# or
|
|
14
|
+
pnpm add @wireweave/ux-rules
|
|
15
|
+
# or
|
|
16
|
+
yarn add @wireweave/ux-rules
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
import { parse } from '@wireweave/core';
|
|
23
|
+
import { validateUX, getUXScore, getUXIssues } from '@wireweave/ux-rules';
|
|
24
|
+
|
|
25
|
+
const doc = parse(`
|
|
26
|
+
page {
|
|
27
|
+
card {
|
|
28
|
+
input placeholder="Email"
|
|
29
|
+
button "Submit" primary
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
`);
|
|
33
|
+
|
|
34
|
+
// Full validation
|
|
35
|
+
const result = validateUX(doc);
|
|
36
|
+
console.log(result.score); // 0-100
|
|
37
|
+
console.log(result.valid); // true if no errors
|
|
38
|
+
console.log(result.issues); // Array of UX issues
|
|
39
|
+
|
|
40
|
+
// Quick helpers
|
|
41
|
+
const score = getUXScore(doc);
|
|
42
|
+
const issues = getUXIssues(doc);
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Rule Categories
|
|
46
|
+
|
|
47
|
+
| Category | Description |
|
|
48
|
+
|----------|-------------|
|
|
49
|
+
| `accessibility` | Screen reader support, labels, alt text |
|
|
50
|
+
| `form` | Form UX patterns, input types, validation |
|
|
51
|
+
| `usability` | General usability (empty containers, CTA, loading states) |
|
|
52
|
+
| `touch-target` | Touch target sizes for mobile |
|
|
53
|
+
| `navigation` | Navigation patterns (item count, active states) |
|
|
54
|
+
| `consistency` | Consistent styling across components |
|
|
55
|
+
|
|
56
|
+
## API
|
|
57
|
+
|
|
58
|
+
### `validateUX(ast, options?)`
|
|
59
|
+
|
|
60
|
+
Full validation with score and issues.
|
|
61
|
+
|
|
62
|
+
**Options:**
|
|
63
|
+
- `categories`: Filter by rule categories
|
|
64
|
+
- `minSeverity`: Minimum severity to report (`'error'` | `'warning'` | `'info'`)
|
|
65
|
+
- `maxIssues`: Maximum issues to collect
|
|
66
|
+
- `customRules`: Add custom rules
|
|
67
|
+
- `disabledRules`: Disable rules by ID
|
|
68
|
+
|
|
69
|
+
### `isUXValid(ast)`
|
|
70
|
+
|
|
71
|
+
Quick check - returns `true` if no errors.
|
|
72
|
+
|
|
73
|
+
### `getUXScore(ast)`
|
|
74
|
+
|
|
75
|
+
Returns UX score from 0 to 100.
|
|
76
|
+
|
|
77
|
+
### `getUXIssues(ast, options?)`
|
|
78
|
+
|
|
79
|
+
Returns array of UX issues.
|
|
80
|
+
|
|
81
|
+
### `formatUXResult(result)`
|
|
82
|
+
|
|
83
|
+
Formats validation result as human-readable string.
|
|
84
|
+
|
|
85
|
+
## Issue Severity
|
|
86
|
+
|
|
87
|
+
| Severity | Impact | Score Penalty |
|
|
88
|
+
|----------|--------|---------------|
|
|
89
|
+
| `error` | Critical UX problem | -10 |
|
|
90
|
+
| `warning` | Should fix | -3 |
|
|
91
|
+
| `info` | Consider improving | -1 |
|
|
92
|
+
|
|
93
|
+
## Related Packages
|
|
94
|
+
|
|
95
|
+
- [@wireweave/core](https://www.npmjs.com/package/@wireweave/core) - Core parser and renderer
|
|
96
|
+
|
|
97
|
+
## License
|
|
98
|
+
|
|
99
|
+
MIT
|