chore(*): added linting and formatting to CI

Author: dackers86

.github/workflows/test.yaml

@@ -9,6 +9,27 @@ on:
       - "**"
 
 jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          check-latest: true
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run ESLint on core packages
+        run: pnpm --filter=@firebase-ui/core run lint && pnpm --filter=@firebase-ui/react run lint && pnpm --filter=@firebase-ui/translations run lint && pnpm --filter=@firebase-ui/styles run lint
+      - name: Check Prettier formatting
+        run: pnpm format:check
+
   test:
     runs-on: ubuntu-latest
     steps:

.prettierignore

@@ -13,6 +13,7 @@ releases/
 # Generated files
 *.min.js
 *.min.css
+packages/styles/dist.css
 
 # Logs
 *.log

eslint.config.js

@@ -16,13 +16,30 @@
 
 import js from "@eslint/js";
 import prettier from "eslint-config-prettier";
+import tseslint from "@typescript-eslint/eslint-plugin";
+import tsparser from "@typescript-eslint/parser";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
 
 export default [
   { ignores: ["**/dist/**", "**/node_modules/**", "**/releases/**", "**/.angular/**"] },
   js.configs.recommended,
   prettier,
+  // More lenient rules for examples
   {
-    files: ["**/*.{js,jsx,ts,tsx}"],
+    files: ["examples/**/*.{js,jsx,ts,tsx}"],
+    rules: {
+      "no-unused-vars": "warn",
+      "no-console": "off",
+      "@typescript-eslint/no-unused-vars": "warn",
+      "@typescript-eslint/no-explicit-any": "off",
+      "prefer-destructuring": "warn",
+      "prefer-template": "warn",
+      "prefer-arrow-callback": "warn",
+    },
+  },
+  {
+    files: ["**/*.{js,jsx}"],
     languageOptions: {
       ecmaVersion: 2022,
       sourceType: "module",
@@ -31,6 +48,16 @@ export default [
           jsx: true,
         },
       },
+      globals: {
+        window: "readonly",
+        console: "readonly",
+        document: "readonly",
+        process: "readonly",
+        module: "readonly",
+        require: "readonly",
+        __dirname: "readonly",
+        global: "readonly",
+      },
     },
     rules: {
       // Core JavaScript rules
@@ -59,4 +86,86 @@ export default [
       "no-useless-concat": "error",
     },
   },
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: "module",
+      parser: tsparser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        window: "readonly",
+        console: "readonly",
+        document: "readonly",
+        process: "readonly",
+        module: "readonly",
+        require: "readonly",
+        __dirname: "readonly",
+        global: "readonly",
+        describe: "readonly",
+        it: "readonly",
+        expect: "readonly",
+        beforeEach: "readonly",
+        afterEach: "readonly",
+        beforeAll: "readonly",
+        afterAll: "readonly",
+        vi: "readonly",
+        React: "readonly",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+      react,
+      "react-hooks": reactHooks,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      // Core JavaScript rules
+      "no-unused-vars": "off", // Turn off base rule
+      "no-undef": "off", // Turn off base rule - TypeScript handles this better
+      "no-console": "warn",
+      "prefer-const": "error",
+      "no-var": "error",
+
+      // Security and best practices
+      "no-debugger": "error",
+      "no-eval": "error",
+      "no-implied-eval": "error",
+      "no-new-func": "error",
+      "no-script-url": "error",
+      "no-with": "error",
+
+      // Modern JavaScript preferences
+      "prefer-arrow-callback": "error",
+      "prefer-template": "error",
+      "prefer-destructuring": ["error", { object: true, array: false }],
+
+      // Code quality
+      eqeqeq: ["error", "always"],
+      "no-duplicate-imports": "error",
+      "no-useless-return": "error",
+      "no-useless-concat": "error",
+
+      // TypeScript rules
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { varsIgnorePattern: "^_", argsIgnorePattern: "^_", caughtErrorsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/no-explicit-any": "warn",
+
+      // React rules
+      "react/prop-types": "off",
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-uses-react": "off",
+      "react/jsx-uses-vars": "error",
+    },
+  },
 ];

packages/styles/README.md

@@ -28,7 +28,7 @@ The packages also exports themes which overrides the CSS variables with preset c
 ```css
 @import "tailwindcss";
 @import "@firebase-ui/styles/tailwind";
-@import "@firebase-ui/styles/themes/brualist"
+@import "@firebase-ui/styles/themes/brualist";
 ```
 
 ## Building

packages/styles/src/index.test.ts

@@ -48,14 +48,14 @@ describe("ButtonVariant type", () => {
   it("should accept valid variant values", () => {
     const primaryVariant: ButtonVariant = "primary";
     const secondaryVariant: ButtonVariant = "secondary";
-    
+
     expect(primaryVariant).toBe("primary");
     expect(secondaryVariant).toBe("secondary");
   });
 
   it("should work with buttonVariant function", () => {
     const variants: ButtonVariant[] = ["primary", "secondary"];
-    
+
     variants.forEach((variant) => {
       const result = buttonVariant({ variant });
       expect(typeof result).toBe("string");

packages/styles/src/index.ts

@@ -13,4 +13,4 @@ export const buttonVariant = cva({
   },
 });
 
-export type ButtonVariant = VariantProps<typeof buttonVariant>['variant'];
+export type ButtonVariant = VariantProps<typeof buttonVariant>["variant"];