{
  "$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"
    ]
  }
}