Merge pull request #1221 from international-labour-organization/refac…

…tor/configs

Monorepo Maintance

.changeset/lazy-sheep-pay.md

@@ -0,0 +1,7 @@
+---
+"@ilo-org/prettier-config": major
+---
+
+### Prettier 3 Upgrade
+
+We've upgraded to Prettier 3. This is a breaking change because Prettier 3 introduces several updates and deprecations that might impact your current formatting setup.

.changeset/tidy-kiwis-mate.md

@@ -0,0 +1,5 @@
+---
+"@ilo-org/typescript-config": major
+---
+
+Typescript package no longer exports lib with `["dom", "dom.iterable"]`, so it's more generic and can be used in more projects. This is a breaking change because it might impact your current TypeScript setup.

.changeset/wicked-ads-worry.md

@@ -0,0 +1,19 @@
+---
+"@ilo-org/eslint-config": major
+---
+
+### ESLint 9 Upgrade
+
+We've upgraded to ESLint 9! 🚀 This is a breaking change because ESLint 9 introduces several updates and deprecations that might impact your current linting setup.
+
+The `@ilo-org/eslint-config` package now uses ESLint 9 and exports only flat configuration objects.
+
+Here are the available configs:
+
+| Config Name | Description                      | Internal Extends |
+| ----------- | -------------------------------- | ---------------- |
+| js          | Base JavaScript config           | ⛔               |
+| recommended | Recommended one with `js` + `ts` | `js`             |
+| react       | React config                     | `ts` -> `js`     |
+
+Make sure to check out the [ESLint 9 migration guide](https://eslint.org/docs/latest/use/migrate-to-9.0.0) for details on updating your configuration.

.husky/install.js

@@ -0,0 +1,16 @@
+/**
+ * This optionally loads husky except in CI environments
+ * like Github Actions where the lint-staged pre-commit hook
+ * seems to break. CI is always set to true in Github Actions
+ * so there's no need to set it manually.
+ */
+
+if (process.env.CI === "true") {
+  process.stdout.write("CI detected, skipping husky install \n");
+  process.exit(0);
+}
+
+const husky = await import("husky");
+process.stdout.write("husky - Installing Git hooks \n");
+
+husky.default.install();

config/eslint-config/README.md

@@ -10,42 +10,59 @@ npm install -D @ilo-org/eslint-config
 
 ## Usage
 
-You can use `@ilo-org/eslint-config` in your project by extending it in your
-`eslint` configuration. For example, if we had an `.eslintrc` file:
+`@ilo-org/eslint-config` provides a list of ESLint flat configurations:
 
-```json
-{
-  "extends": ["@ilo-org/eslint-config"]
-}
+| Config Name | Description                           | Internal Extends |
+| ----------- | ------------------------------------- | ---------------- |
+| js          | Base JavaScript config                | ⛔               |
+| recommended | Recommended configuration `js` + `ts` | `js`             |
+| react       | React Typescript config               | `ts` -> `js`     |
+
+You can use any configuration you like by simply including it inside your eslint config
+
+Just export it
+
+```js
+import configs from "@ilo-org/eslint-config";
+
+export default configs.recommended;
 ```
 
-## TypeScript
-
-To use this configuration in a project with Typescript, you can add an `overrides` property to your `.eslintrc`. Here's an example:
-
-```cjs
-// .eslintrc.cjs
-
-module.exports = {
-  extends: ["@ilo-org/eslint-config"],
-  ignorePatterns: ["node_modules/"],
-  overrides: [
-    /* =================== */
-    /* TypeScript Settings */
-    /* =================== */
-    {
-      // Which files the override will apply to relative to the package root
-      files: ["**/*.{ts,tsx}"],
-      extends: ["@ilo-org/eslint-config/typescript"],
-      // Your typescript parser options
-      parserOptions: {
-        project: ["./tsconfig.json"],
-      },
+or extend and add your own
+
+```js
+import configs from "@ilo-org/eslint-config";
+
+export default [
+  ...configs.recommended,
+  {
+    rules: {
+      "no-console": "warn",
     },
-  ],
-};
+  },
+];
 ```
 
+## Opinionated rules
+
+🚨 - Displayed as an error
+🚧 - Displayed as a warning
+✅ - Allowed
+
+| Rule                                              | Severity | Description                                                     |
+| ------------------------------------------------- | -------- | --------------------------------------------------------------- |
+| "prettier/prettier"                               | 🚨       | Is strong about formatting                                      |
+| "no-console"                                      | 🚧       | Prevents the use of `console.log` but allows `warn` and `error` |
+| "no-duplicate-imports"                            | 🚧       | Prevents duplicate imports                                      |
+| "no-await-in-loop"                                | 🚧       | Prevents `await` inside loops                                   |
+| "no-unused-vars"                                  | 🚧       | Prevents unused variables but allows `_` to be ignored          |
+| "@typescript-eslint/class-literal-property-style" | 🚧       | Normalizes class literal properties                             |
+| "@typescript-eslint/no-duplicate-enum-values"     | 🚧       |                                                                 |
+| "@typescript-eslint/prefer-for-of"                | 🚧       | Enforces the use of `for-of`                                    |
+| "@typescript-eslint/consistent-type-definitions"  | 🚧       | `interface` is preferred                                        |
+| "@typescript-eslint/ban-ts-comments"              | ✅       |                                                                 |
+| "@typescript-eslint/ban-ts-ignores"               | ✅       |                                                                 |
+
 ## 📝 License
 
 Licensed under the [Apache 2.0 License](/LICENSE).

config/eslint-config/index.js

@@ -1,5 +1,11 @@
-"use strict";
+import js from "./variants/base-js.config.js";
+import ts from "./variants/base-ts.config.js";
+import react from "./variants/react.config.js";
 
-module.exports = {
-  extends: [require.resolve("./base")],
+const configs = {
+  js,
+  recommended: ts,
+  react,
 };
+
+export default configs;

config/eslint-config/package.json

@@ -11,6 +11,7 @@
   "files": [
     "*.{js,ts,json}"
   ],
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -25,16 +26,17 @@
   },
   "homepage": "https://github.com/international-labour-organization/designsystem#readme",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12"
+    "@types/eslint__js": "^8.42.3",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-turbo": "^2.1.1",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.36.0",
+    "eslint-plugin-react-hooks": "5.1.0-rc-d6cb4e77-20240911",
+    "globals": "^15.9.0",
+    "typescript-eslint": "^8.5.0"
   },
   "peerDependencies": {
-    "eslint": ">= 8"
+    "eslint": "9.x"
   }
 }

config/eslint-config/variants/base-js.config.js

@@ -0,0 +1,30 @@
+import js from "@eslint/js";
+import prettier from "eslint-plugin-prettier/recommended";
+import globals from "globals";
+import { IgnoreConfig } from "./ignores.config.js";
+
+/** @type {import("eslint").Linter.Config} */
+const BaseJSConfig = {
+  languageOptions: {
+    globals: {
+      ...globals.browser,
+      ...globals.node,
+    },
+  },
+  rules: {
+    "no-console": ["warn", { allow: ["warn", "error"] }],
+    "prettier/prettier": "error",
+    "no-duplicate-imports": "warn",
+    "no-await-in-loop": "warn",
+    "no-unused-vars": [
+      "warn",
+      {
+        ignoreRestSiblings: true,
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+      },
+    ],
+  },
+};
+
+export default [js.configs.recommended, prettier, BaseJSConfig, IgnoreConfig];