126 lines
3.6 KiB
JSON
126 lines
3.6 KiB
JSON
{
|
|
"$schema": "../schemas/rule.schema.json",
|
|
"id": "components",
|
|
"version": "1.0.0",
|
|
"name": "Component Usage Rules",
|
|
"description": "Rules for component implementation and usage patterns",
|
|
"category": "components",
|
|
"severity": "error",
|
|
"rules": [
|
|
{
|
|
"id": "use-design-system-components",
|
|
"name": "Use Design System Components",
|
|
"description": "Prefer design system components over custom implementations",
|
|
"severity": "error",
|
|
"components": {
|
|
"required": {
|
|
"Button": {
|
|
"import": "@dss/components",
|
|
"forbiddenAlternatives": ["button", "a.btn", "div[role=button]"]
|
|
},
|
|
"Input": {
|
|
"import": "@dss/components",
|
|
"forbiddenAlternatives": ["input[type=text]", "textarea"]
|
|
},
|
|
"Select": {
|
|
"import": "@dss/components",
|
|
"forbiddenAlternatives": ["select", "div.dropdown"]
|
|
},
|
|
"Card": {
|
|
"import": "@dss/components",
|
|
"forbiddenAlternatives": ["div.card", "article"]
|
|
},
|
|
"Modal": {
|
|
"import": "@dss/components",
|
|
"forbiddenAlternatives": ["div.modal", "dialog"]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "component-prop-validation",
|
|
"name": "Required Component Props",
|
|
"description": "Components must include required accessibility and functionality props",
|
|
"severity": "error",
|
|
"validation": {
|
|
"Button": {
|
|
"requiredProps": ["variant", "size"],
|
|
"conditionalProps": {
|
|
"loading": ["loadingText"],
|
|
"icon": ["aria-label"]
|
|
}
|
|
},
|
|
"Input": {
|
|
"requiredProps": ["label", "name"],
|
|
"conditionalProps": {
|
|
"error": ["errorMessage"]
|
|
}
|
|
},
|
|
"Modal": {
|
|
"requiredProps": ["title", "onClose"],
|
|
"recommendedProps": ["aria-describedby"]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "component-composition",
|
|
"name": "Component Composition Patterns",
|
|
"description": "Follow recommended composition patterns for complex UIs",
|
|
"severity": "info",
|
|
"patterns": {
|
|
"forms": {
|
|
"structure": ["Form", "FormField", "Input/Select", "Button"],
|
|
"guidelines": [
|
|
"Wrap inputs in FormField for consistent labeling",
|
|
"Use Form component for validation handling",
|
|
"Place submit button inside Form"
|
|
]
|
|
},
|
|
"lists": {
|
|
"structure": ["List", "ListItem"],
|
|
"guidelines": [
|
|
"Use semantic list components for accessibility",
|
|
"Implement virtualization for 50+ items"
|
|
]
|
|
},
|
|
"navigation": {
|
|
"structure": ["Nav", "NavItem", "NavLink"],
|
|
"guidelines": [
|
|
"Use Nav component for main navigation",
|
|
"Implement active state handling"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "no-inline-styles",
|
|
"name": "No Inline Styles on Components",
|
|
"description": "Components should use className/variant props, not style attribute",
|
|
"severity": "warning",
|
|
"patterns": {
|
|
"forbidden": [
|
|
"style={{",
|
|
"style={{"
|
|
],
|
|
"exceptions": [
|
|
"dynamic positioning",
|
|
"animations",
|
|
"calculated values"
|
|
]
|
|
}
|
|
}
|
|
],
|
|
"adoption": {
|
|
"thresholds": {
|
|
"minimum": 60,
|
|
"target": 80,
|
|
"excellent": 95
|
|
},
|
|
"metrics": [
|
|
"percentage_using_ds_components",
|
|
"custom_component_count",
|
|
"token_compliance_rate"
|
|
]
|
|
}
|
|
}
|