Code Quality Maintainability Implementation

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "prettier" // Must be last to override style rules
  ],
  "plugins": ["@typescript-eslint", "react", "react-hooks", "import"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2023,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true },
    "project": "./tsconfig.json"
  },
  "rules": {
    // React
    "react/react-in-jsx-scope": "off",
    "react-hooks/exhaustive-deps": "error",
    "react/prop-types": "off",
    
    // TypeScript
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "warn",
    
    // Imports
    "import/order": ["error", {
      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
      "newlines-between": "always",
      "alphabetize": { "order": "asc" }
    }],
    "import/no-duplicates": "error",
    
    // Code quality
    "no-console": ["warn", { "allow": ["warn", "error"] }],
    "complexity": ["warn", 10],
    "max-lines": ["warn", 300]
  },
  "settings": {
    "react": { "version": "detect" },
    "import/resolver": { "typescript": {} }
  }
}

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "es5",
  "arrowParens": "always",
  "endOfLine": "lf"
}

// package.json
{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx --cache",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
    "type-check": "tsc --noEmit"
  }
}

// package.json
{
  "scripts": {
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "devDependencies": {
    "husky": "^8.0.0",
    "lint-staged": "^15.0.0",
    "@commitlint/cli": "^18.0.0",
    "@commitlint/config-conventional": "^18.0.0"
  }
}

// .lintstagedrc.json
{
  "*.{ts,tsx,js,jsx}": [
    "eslint --fix",
    "prettier --write",
    "jest --bail --findRelatedTests --passWithNoTests"
  ],
  "*.{json,css,md}": ["prettier --write"],
  "*.{ts,tsx}": ["bash -c 'tsc --noEmit'"]
}

// .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "🔍 Running pre-commit checks..."
npx lint-staged

// .husky/commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no -- commitlint --edit $1

// .husky/pre-push
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "🧪 Running pre-push checks..."

# Check for console.log
if git diff origin/main --name-only | xargs grep -n "console.log"; then
  echo "❌ Found console.log in code"
  exit 1
fi

# Run full tests
npm test -- --coverage --watchAll=false

# commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'feat', 'fix', 'docs', 'style', 'refactor', 
      'perf', 'test', 'chore', 'revert', 'ci'
    ]],
    'subject-case': [2, 'always', 'sentence-case'],
    'subject-max-length': [2, 'always', 72],
    'body-max-line-length': [2, 'always', 100]
  }
};

// .github/workflows/sonarqube.yml
name: SonarQube Analysis

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  sonarqube:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Full history for better analysis
      
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      
      - name: Install dependencies
        run: pnpm install
      
      - name: Run tests with coverage
        run: pnpm test -- --coverage --watchAll=false
      
      - name: SonarQube Scan
        uses: SonarSource/sonarqube-scan-action@master
        env:
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
      
      - name: Quality Gate Check
        uses: SonarSource/sonarqube-quality-gate-action@master
        timeout-minutes: 5
        env:
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

// sonar-project.properties
sonar.projectKey=my-frontend-app
sonar.organization=my-org
sonar.sources=src
sonar.tests=src
sonar.test.inclusions=**/*.test.ts,**/*.test.tsx,**/*.spec.ts
sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.coverage.exclusions=**/*.test.ts,**/*.test.tsx,**/*.spec.ts,**/*.stories.tsx
sonar.typescript.tsconfigPath=tsconfig.json
sonar.qualitygate.wait=true

# Quality Gate Thresholds
sonar.qualitygate.coverage=80
sonar.qualitygate.duplications=3
sonar.qualitygate.maintainability_rating=A
sonar.qualitygate.reliability_rating=A
sonar.qualitygate.security_rating=A

// tsconfig.json
{
  "compilerOptions": {
    // Strict Mode - Enable ALL
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    
    // Additional Strictness
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "allowUnusedLabels": false,
    "allowUnreachableCode": false,
    
    // Module Resolution
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    
    // Emit
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "removeComments": true,
    
    // Type Checking
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build"]
}

// Type guards
function isError(value: unknown): value is Error {
  return value instanceof Error;
}

// Discriminated unions
type Result<T> = 
  | { success: true; data: T }
  | { success: false; error: string };

function handleResult(result: Result<User>) {
  if (result.success) {
    console.log(result.data.name); // Type-safe
  } else {
    console.error(result.error);
  }
}

// Const assertions
const CONFIG = {
  API_URL: 'https://api.example.com',
  TIMEOUT: 5000
} as const;
// Type: { readonly API_URL: "https://api.example.com", readonly TIMEOUT: 5000 }

// Branded types for IDs
type UserId = string & { readonly __brand: 'UserId' };
type PostId = string & { readonly __brand: 'PostId' };

function getUser(id: UserId): User { /* ... */ }
// getUser('123' as UserId); // Explicit casting required

// Exhaustive checks
type Status = 'idle' | 'loading' | 'success' | 'error';

function handleStatus(status: Status) {
  switch (status) {
    case 'idle': return 'Idle';
    case 'loading': return 'Loading';
    case 'success': return 'Success';
    case 'error': return 'Error';
    default:
      const exhaustive: never = status;
      throw new Error(`Unhandled status: ${exhaustive}`);
  }
}

// Utility types
type PartialUser = Partial<User>; // All optional
type RequiredUser = Required<User>; // All required
type ReadonlyUser = Readonly<User>; // Immutable
type UserKeys = keyof User; // Union of keys
type UserValues = User[keyof User]; // Union of values

/**
 * Fetches user data from the API with retry logic
 * 
 * @param {string} userId - The unique user identifier
 * @param {Object} options - Configuration options
 * @param {number} [options.maxRetries=3] - Maximum retry attempts
 * @param {number} [options.timeout=5000] - Request timeout in ms
 * @returns {Promise<User>} The user object
 * @throws {NetworkError} When network request fails after retries
 * @throws {ValidationError} When userId is invalid
 * 
 * @example
 * // Fetch user with default options
 * const user = await fetchUser('123');
 * 
 * @example
 * // Fetch with custom options
 * const user = await fetchUser('123', {
 *   maxRetries: 5,
 *   timeout: 10000
 * });
 * 
 * @see {@link https://api.example.com/docs API Documentation}
 * @since 2.0.0
 */
async function fetchUser(
  userId: string,
  options: FetchOptions = {}
): Promise<User> {
  // Implementation
}

/**
 * User profile component with avatar and bio
 * 
 * @component
 * @param {Object} props - Component props
 * @param {User} props.user - User object to display
 * @param {boolean} [props.showBio=true] - Whether to show user bio
 * @param {Function} [props.onEdit] - Callback when edit button clicked
 * @returns {JSX.Element} Rendered component
 * 
 * @example
 * <UserProfile 
 *   user={currentUser} 
 *   showBio={false}
 *   onEdit={handleEdit}
 * />
 */
export function UserProfile({ user, showBio = true, onEdit }: Props) {
  // Component implementation
}

/**
 * Custom hook for managing form state with validation
 * 
 * @template T - Form values type
 * @param {T} initialValues - Initial form values
 * @param {ValidationSchema<T>} schema - Validation schema
 * @returns {FormState<T>} Form state and handlers
 * 
 * @example
 * const { values, errors, handleChange, handleSubmit } = useForm({
 *   email: '',
 *   password: ''
 * }, loginSchema);
 */
function useForm<T>(
  initialValues: T,
  schema: ValidationSchema<T>
): FormState<T> {
  // Hook implementation
}

// typedoc.json
{
  "entryPoints": ["src/index.ts"],
  "out": "docs",
  "name": "My Frontend Library",
  "includeVersion": true,
  "excludePrivate": true,
  "excludeProtected": false,
  "excludeExternals": true,
  "readme": "README.md",
  "plugin": ["typedoc-plugin-markdown"],
  "theme": "default",
  "categorizeByGroup": true,
  "defaultCategory": "Other",
  "categoryOrder": [
    "Components",
    "Hooks",
    "Utilities",
    "Types",
    "*"
  ]
}

// package.json
{
  "scripts": {
    "docs": "typedoc",
    "docs:serve": "typedoc --watch --serve"
  }
}

// .github/workflows/docs.yml
name: Generate Docs
on:
  push:
    branches: [main]
jobs:
  docs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm install
      - run: npm run docs
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs

// renovate.json
{
  "extends": ["config:base"],
  "schedule": ["after 10pm on sunday"],
  "timezone": "America/New_York",
  "labels": ["dependencies"],
  "assignees": ["@team-lead"],
  "semanticCommits": "enabled",
  "rangeStrategy": "bump",
  "packageRules": [
    {
      "matchUpdateTypes": ["patch", "pin", "digest"],
      "automerge": true,
      "automergeType": "branch"
    },
    {
      "matchUpdateTypes": ["minor"],
      "groupName": "minor dependencies",
      "automerge": false
    },
    {
      "matchUpdateTypes": ["major"],
      "groupName": "major dependencies",
      "labels": ["breaking-change"],
      "automerge": false
    },
    {
      "matchPackagePatterns": ["^@types/"],
      "groupName": "type definitions",
      "automerge": true
    },
    {
      "matchPackagePatterns": ["^eslint", "^prettier"],
      "groupName": "linting tools",
      "schedule": ["before 3am on Monday"]
    },
    {
      "matchDepTypes": ["devDependencies"],
      "extends": ["schedule:weekly"]
    }
  ],
  "vulnerabilityAlerts": {
    "enabled": true,
    "labels": ["security"],
    "assignees": ["@security-team"]
  }
}

# .github/dependabot.yml
version: 2
updates:
  # npm dependencies
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
      day: "sunday"
      time: "03:00"
    open-pull-requests-limit: 10
    reviewers:
      - "team-lead"
    assignees:
      - "developer"
    labels:
      - "dependencies"
      - "automated"
    commit-message:
      prefix: "chore"
      prefix-development: "chore"
      include: "scope"
    
    # Group updates
    groups:
      react:
        patterns:
          - "react*"
          - "@types/react*"
      testing:
        patterns:
          - "jest"
          - "@testing-library/*"
          - "vitest"
      build-tools:
        patterns:
          - "vite"
          - "webpack"
          - "babel"
    
    # Ignore specific packages
    ignore:
      - dependency-name: "legacy-package"
        update-types: ["version-update:semver-major"]
  
  # GitHub Actions
  - package-ecosystem: "github-actions"
    directory: "/"
    schedule:
      interval: "monthly"
    labels:
      - "ci"
      - "dependencies"

  # Docker
  - package-ecosystem: "docker"
    directory: "/"
    schedule:
      interval: "weekly"