Bruno Sarlo
4de266de61
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
This reverts commit 72cb7319f5.
269 lines
8.2 KiB
Python
Executable File
269 lines
8.2 KiB
Python
Executable File
#!/usr/bin/env python3
|
|
"""
|
|
DSS Component Checker Hook
|
|
Validates React components for best practices and accessibility.
|
|
Written from scratch for DSS.
|
|
"""
|
|
|
|
import json
|
|
import re
|
|
import sys
|
|
from pathlib import Path
|
|
|
|
# React component patterns to check
|
|
COMPONENT_PATTERNS = [
|
|
# Accessibility checks
|
|
{
|
|
"id": "a11y-img-alt",
|
|
"regex": r"<img\s+(?![^>]*alt=)[^>]*>",
|
|
"category": "accessibility",
|
|
"severity": "high",
|
|
"message": "Missing alt attribute on <img>. Add alt text for accessibility.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
},
|
|
{
|
|
"id": "a11y-button-type",
|
|
"regex": r"<button\s+(?![^>]*type=)[^>]*>",
|
|
"category": "accessibility",
|
|
"severity": "medium",
|
|
"message": "Button missing type attribute. Add type='button' or type='submit'.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
},
|
|
{
|
|
"id": "a11y-anchor-href",
|
|
"regex": r"<a\s+(?![^>]*href=)[^>]*>",
|
|
"category": "accessibility",
|
|
"severity": "high",
|
|
"message": "Anchor tag missing href. Use button for actions without navigation.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
},
|
|
{
|
|
"id": "a11y-click-handler",
|
|
"regex": r"<(?:div|span)\s+[^>]*onClick",
|
|
"category": "accessibility",
|
|
"severity": "medium",
|
|
"message": "Click handler on non-interactive element. Use <button> or add role/tabIndex.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
},
|
|
{
|
|
"id": "a11y-form-label",
|
|
"regex": r"<input\s+(?![^>]*(?:aria-label|id))[^>]*>",
|
|
"category": "accessibility",
|
|
"severity": "medium",
|
|
"message": "Input may be missing label association. Add id with <label> or aria-label.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
},
|
|
# React best practices
|
|
{
|
|
"id": "react-key-index",
|
|
"regex": r"\.map\([^)]*,\s*(?:index|i|idx)\s*\)[^{]*key=\{(?:index|i|idx)\}",
|
|
"category": "react",
|
|
"severity": "medium",
|
|
"message": "Using array index as key. Use unique, stable IDs when possible.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
},
|
|
{
|
|
"id": "react-bind-render",
|
|
"regex": r"onClick=\{[^}]*\.bind\(this",
|
|
"category": "react",
|
|
"severity": "low",
|
|
"message": "Binding in render creates new function each time. Use arrow function or bind in constructor.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
},
|
|
{
|
|
"id": "react-inline-style-object",
|
|
"regex": r"style=\{\{[^}]{100,}\}\}",
|
|
"category": "react",
|
|
"severity": "low",
|
|
"message": "Large inline style object. Consider extracting to a constant or CSS module.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
},
|
|
{
|
|
"id": "react-console-log",
|
|
"regex": r"console\.(log|debug|info)\(",
|
|
"category": "react",
|
|
"severity": "low",
|
|
"message": "Console statement detected. Remove before production.",
|
|
"file_types": [".js", ".jsx", ".ts", ".tsx"]
|
|
},
|
|
# TypeScript checks
|
|
{
|
|
"id": "ts-any-type",
|
|
"regex": r":\s*any\b",
|
|
"category": "typescript",
|
|
"severity": "medium",
|
|
"message": "Using 'any' type loses type safety. Consider using a specific type or 'unknown'.",
|
|
"file_types": [".ts", ".tsx"]
|
|
},
|
|
{
|
|
"id": "ts-type-assertion",
|
|
"regex": r"as\s+any\b",
|
|
"category": "typescript",
|
|
"severity": "medium",
|
|
"message": "Type assertion to 'any'. This bypasses type checking.",
|
|
"file_types": [".ts", ".tsx"]
|
|
},
|
|
# Component structure
|
|
{
|
|
"id": "component-no-export",
|
|
"regex": r"^(?!.*export).*(?:function|const)\s+[A-Z][a-zA-Z]*\s*(?:=|:|\()",
|
|
"category": "structure",
|
|
"severity": "low",
|
|
"message": "Component may not be exported. Ensure it's exported if meant to be reused.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
},
|
|
{
|
|
"id": "component-missing-displayname",
|
|
"regex": r"(?:forwardRef|memo)\s*\([^)]*\)",
|
|
"category": "structure",
|
|
"severity": "low",
|
|
"message": "HOC component may need displayName for debugging.",
|
|
"file_types": [".jsx", ".tsx"]
|
|
}
|
|
]
|
|
|
|
def get_config():
|
|
"""Load hook configuration."""
|
|
config_path = Path.home() / ".dss" / "hooks-config.json"
|
|
default_config = {
|
|
"component_checker": {
|
|
"enabled": True,
|
|
"categories": ["accessibility", "react", "typescript"],
|
|
"min_severity": "low"
|
|
}
|
|
}
|
|
|
|
if config_path.exists():
|
|
try:
|
|
with open(config_path) as f:
|
|
user_config = json.load(f)
|
|
return {**default_config, **user_config}
|
|
except:
|
|
pass
|
|
return default_config
|
|
|
|
def severity_level(severity: str) -> int:
|
|
"""Convert severity to numeric level."""
|
|
levels = {"low": 1, "medium": 2, "high": 3}
|
|
return levels.get(severity, 0)
|
|
|
|
def check_content(content: str, file_path: str, config: dict) -> list:
|
|
"""Check content for component issues."""
|
|
issues = []
|
|
file_ext = Path(file_path).suffix.lower()
|
|
|
|
checker_config = config.get("component_checker", {})
|
|
enabled_categories = checker_config.get("categories", [])
|
|
min_severity = checker_config.get("min_severity", "low")
|
|
min_level = severity_level(min_severity)
|
|
|
|
for pattern_def in COMPONENT_PATTERNS:
|
|
# Skip if file type doesn't match
|
|
if file_ext not in pattern_def.get("file_types", []):
|
|
continue
|
|
|
|
# Skip if category not enabled
|
|
if enabled_categories and pattern_def["category"] not in enabled_categories:
|
|
continue
|
|
|
|
# Skip if below minimum severity
|
|
if severity_level(pattern_def["severity"]) < min_level:
|
|
continue
|
|
|
|
if re.search(pattern_def["regex"], content, re.MULTILINE):
|
|
issues.append({
|
|
"id": pattern_def["id"],
|
|
"category": pattern_def["category"],
|
|
"severity": pattern_def["severity"],
|
|
"message": pattern_def["message"]
|
|
})
|
|
|
|
return issues
|
|
|
|
def format_output(issues: list, file_path: str) -> str:
|
|
"""Format issues for display."""
|
|
if not issues:
|
|
return ""
|
|
|
|
severity_icons = {
|
|
"high": "[HIGH]",
|
|
"medium": "[MED]",
|
|
"low": "[LOW]"
|
|
}
|
|
|
|
category_labels = {
|
|
"accessibility": "A11Y",
|
|
"react": "REACT",
|
|
"typescript": "TS",
|
|
"structure": "STRUCT"
|
|
}
|
|
|
|
lines = [f"\n=== DSS Component Checker: {file_path} ===\n"]
|
|
|
|
# Group by category
|
|
by_category = {}
|
|
for issue in issues:
|
|
cat = issue["category"]
|
|
if cat not in by_category:
|
|
by_category[cat] = []
|
|
by_category[cat].append(issue)
|
|
|
|
for category, cat_issues in by_category.items():
|
|
label = category_labels.get(category, category.upper())
|
|
lines.append(f"[{label}]")
|
|
for issue in cat_issues:
|
|
sev = severity_icons.get(issue["severity"], "[?]")
|
|
lines.append(f" {sev} {issue['message']}")
|
|
lines.append("")
|
|
|
|
lines.append("=" * 50)
|
|
return "\n".join(lines)
|
|
|
|
def main():
|
|
"""Main hook entry point."""
|
|
config = get_config()
|
|
|
|
if not config.get("component_checker", {}).get("enabled", True):
|
|
sys.exit(0)
|
|
|
|
# Read hook input from stdin
|
|
try:
|
|
input_data = json.loads(sys.stdin.read())
|
|
except json.JSONDecodeError:
|
|
sys.exit(0)
|
|
|
|
tool_name = input_data.get("tool_name", "")
|
|
tool_input = input_data.get("tool_input", {})
|
|
|
|
if tool_name not in ["Edit", "Write"]:
|
|
sys.exit(0)
|
|
|
|
file_path = tool_input.get("file_path", "")
|
|
file_ext = Path(file_path).suffix.lower() if file_path else ""
|
|
|
|
# Only check React/TypeScript files
|
|
if file_ext not in [".jsx", ".tsx", ".js", ".ts"]:
|
|
sys.exit(0)
|
|
|
|
# Get content to check
|
|
if tool_name == "Write":
|
|
content = tool_input.get("content", "")
|
|
elif tool_name == "Edit":
|
|
content = tool_input.get("new_string", "")
|
|
else:
|
|
content = ""
|
|
|
|
if not content:
|
|
sys.exit(0)
|
|
|
|
issues = check_content(content, file_path, config)
|
|
|
|
if issues:
|
|
output = format_output(issues, file_path)
|
|
print(output, file=sys.stderr)
|
|
|
|
sys.exit(0)
|
|
|
|
if __name__ == "__main__":
|
|
main()
|