chore: implement consistent code quality tools across monorepo

[jmartinn]

Description

Implement standardized code formatting and linting across all packages to ensure code quality, maintainability, and consistent style, with specific emphasis on import ordering and framework-specific best practices.

Current State

The codebase lacks consistent code formatting and linting tools across packages. Different packages follow different coding styles, and there's no automated way to enforce code quality standards. This leads to:

• Inconsistent code formatting across files and packages
• No standardized code quality checks
• Inconsistent import ordering
• No enforced best practices for framework-specific code

Proposed Changes

Base Configuration

ESLint configuration for web-based packages:

{
  "$schema": "https://json.schemastore.org/eslintrc.json",
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended",
    "plugin:tailwindcss/recommended"
  ],
  "plugins": ["import", "tailwindcss"],
  "settings": {
    "tailwindcss": {
      "callees": ["cn", "cva"],
      "config": "tailwind.config.ts"
    }
  },
  "rules": {
    "@next/next/no-html-link-for-pages": "off",
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
        "pathGroups": [{ "pattern": "react", "group": "external", "position": "before" }],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }
    ],
    "tailwindcss/classnames-order": "error",
    "tailwindcss/no-custom-classname": "off"
  }
}

For non web-based packages, configuration will:

• Remove Next.js and Tailwind specific rules
• Add TypeScript recommended configurations
• Maintain the same import ordering rules
• Include package-specific plugins as needed

Implementation Steps

1. Root Configuration

   • Create root ESLint configuration
   • Set up root Prettier configuration
   • Configure husky for pre-commit hooks
   • Set up lint-staged

2. Package-specific Configurations

   • Frontend packages: Use web-based configuration
   • Backend/SDK packages: Use modified configuration without web-specific rules
   • Add necessary dev dependencies to each package

3. CI Integration

   • Add linting checks to CI pipeline
   • Configure automated formatting verification

Success Criteria

• ESLint and Prettier configured and working across all packages
• Consistent import ordering across all files
• Framework-specific best practices enforced where applicable
• Pre-commit hooks successfully formatting code
• CI pipeline enforcing code style
• All existing code formatted according to new standards
• Documentation updated with code style guidelines

Required Dependencies

{
  "eslint": "^8.x",
  "prettier": "^3.x",
  "husky": "^8.x",
  "lint-staged": "^15.x",
  "@typescript-eslint/parser": "^6.x",
  "@typescript-eslint/eslint-plugin": "^6.x",
  "eslint-config-prettier": "^9.x",
  "eslint-plugin-prettier": "^5.x",
  "eslint-plugin-import": "^2.x",
  "eslint-plugin-tailwindcss": "^3.x"
}

Additional Notes

• Configuration prioritizes consistent import ordering and maintainable code structure
• Special attention given to framework-specific best practices
• Custom utility function calls (cn, cva) properly configured
• Implementation will require one-time bulk reformatting of codebase

[wheval]

Can i work on this? I have experience with eslint.

[TheRanomial]

May i work one this one. ETA - 24 hours.

[chiscookeke11]

Can I take this issue?

[Elite-tch]

Mind if I take this issue?

[Verifieddanny]

Could I be assigned to this?