@workleap/eslint-configs 0.0.2

package/src/jest.ts

@@ -0,0 +1,53 @@
+import type { Linter } from "eslint";
+import jestPlugin from "eslint-plugin-jest";
+import globals from "globals";
+import type { ConfigWithExtends } from "./types.ts";
+
+export interface JestConfigOptions {
+    rules?: Partial<Linter.RulesRecord>;
+}
+
+export const jestGlobalIgnores = [];
+
+export function jestConfig(options: JestConfigOptions = {}) {
+    const {
+        rules = {}
+    } = options;
+
+    const config: ConfigWithExtends[] = [{
+        name: "@workleap/eslint-configs/jest",
+        files: [
+            "**/*.test.{js,jsx,ts,tsx}",
+            "**/*-test.{js,jsx,ts,tsx}",
+            "**/__tests__/*.{js,jsx,ts,tsx}",
+            "**/test.{js,jsx,ts,tsx}"
+        ],
+        extends: [
+            jestPlugin.configs["flat/recommended"]
+        ],
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.es2024,
+                ...globals.node,
+                ...globals.commonjs,
+                ...globals.jest
+            }
+        },
+        settings: {
+            jest: {
+                version: "detect"
+            }
+        },
+        rules: {
+            // Gives better failure messages for array checks.
+            "jest/prefer-to-contain": "error",
+            // Prefer spies to allow for automatic restoration.
+            "jest/prefer-spy-on": "error",
+            // Positioned last to allow the consumer to override any rules.
+            ...rules
+        }
+    }];
+
+    return config;
+};

package/src/jsxAlly.ts

@@ -0,0 +1,52 @@
+import type { Linter } from "eslint";
+import jsxA11yPlugin from "eslint-plugin-jsx-a11y";
+import type { ConfigWithExtends } from "./types.ts";
+
+export interface JsxAllyConfigOptions {
+    rules?: Partial<Linter.RulesRecord>;
+}
+
+export const jsxAllyGlobalIgnores = [];
+
+export function jsxAllyConfig(options: JsxAllyConfigOptions = {}) {
+    const {
+        rules = {}
+    } = options;
+
+    const config: ConfigWithExtends[] = [{
+        name: "@workleap/eslint-configs/jsx-a11y",
+        files: [
+            "**/*.{js,ts,jsx,tsx,cjs,mjs}"
+        ],
+        extends: [
+            jsxA11yPlugin.flatConfigs.recommended
+        ],
+        languageOptions: {
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true
+                }
+            }
+        },
+        rules: {
+            // This rule ensures that all labels have an associated control that they are labeling.
+            // However, this rule causes a lot of false positive, since our current implementation of our company's design system
+            // does not use the "for" attribute in the label element and automatically add it inside Fields.
+            // Therefore, we are disabling this rule.
+            "jsx-a11y/label-has-associated-control:": "off",
+            // This rule ensures that all media elements have a <track> for captions.
+            // Since we don't use captions, we are disabling this rule.
+            "jsx-a11y/media-has-caption": "off",
+            // There is a really good article that describes the issues with autoFocus and why it should be avoided:
+            // https://brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/
+            // However, this issue is with screen readers and not with keyboard navigation.
+            // In Workleap, we use autoFocus in a lot of places to improve the user experience.
+            // Therefore, we are disabling this rule.
+            "jsx-a11y/no-autofocus": "off",
+            // Positioned last to allow the consumer to override any rules.
+            ...rules
+        }
+    }];
+
+    return config;
+};

package/src/packageJson.ts

@@ -0,0 +1,48 @@
+import type { Linter } from "eslint";
+import packageJsonPlugin from "eslint-plugin-package-json";
+import type { ConfigWithExtends } from "./types.ts";
+
+export interface PackageJsonConfigOptions {
+    rules?: Partial<Linter.RulesRecord>;
+}
+
+export const packageJsonGlobalIgnores = [];
+
+export function packageJsonConfig(options: PackageJsonConfigOptions = {}) {
+    const {
+        rules = {}
+    } = options;
+
+    const config: ConfigWithExtends[] = [{
+        name: "@workleap/eslint-configs/package-json",
+        files: [
+            "**/package.json"
+        ],
+        extends: [
+            packageJsonPlugin.configs.recommended
+        ],
+        rules: {
+            "package-json/order-properties": "off",
+            "package-json/prefer-repository-shorthand": "off",
+            "package-json/sort-collections": [
+                "error",
+                [
+                    // Do not sort "scripts".
+                    "devDependencies",
+                    "dependencies",
+                    "peerDependencies",
+                    "config"
+                ]
+            ],
+            // Doesn't support "workspace:*" at the moment.
+            "package-json/valid-package-def": "off",
+            // I am not sure why, this rule is triggering errors for valid paths.
+            "package-json/valid-repository-directory": "off",
+            "package-json/valid-scripts": "off",
+            // Positioned last to allow the consumer to override any rules.
+            ...rules
+        }
+    }];
+
+    return config;
+};

package/src/plugins/strictCssModulesNames.ts

@@ -0,0 +1,75 @@
+import type { Rule } from "eslint";
+import type ESTree from "estree";
+import { basename, parse, sep } from "path";
+
+export const sanitizePath = (filePath: string) => {
+    return filePath.replace(/\//g, sep).trim();
+};
+
+export const splitPath = (filePath: string) => {
+    return sanitizePath(filePath).split(sep);
+};
+
+export function getFilePath(context: Rule.RuleContext) {
+    return sanitizePath(context.getFilename());
+}
+
+export function getFileName(context: Rule.RuleContext) {
+    return basename(getFilePath(context));
+}
+
+const rule: Rule.RuleModule = {
+    meta: {
+        type: "suggestion",
+        docs: {
+            description: "CSS Modules should have the same name as a component and located in the same folder",
+            category: "Strict",
+            recommended: false,
+            url: "https://github.com/workleap/wl-web-configs/blob/main/packages/eslint-plugin/docs/rules/strict-css-modules-names.md"
+        }
+    },
+    create: function (context) {
+        const parsedPath = parse(getFileName(context));
+
+        const getNodeSource = (node: ESTree.ImportDeclaration) => {
+            return sanitizePath(node.source != null ? node.source.value as string : "");
+        };
+
+        const isCssModule = (source: string) => {
+            return source.endsWith(".module.css");
+        };
+
+        const isStylesheetInSameFolder = (source: string) => {
+            return splitPath(source).length <= 2; // ./myImage.svg
+        };
+
+        return {
+            ImportDeclaration: function (node) {
+                const importSource = getNodeSource(node);
+
+                if (isCssModule(importSource)) {
+                    const validCssFilename = `${parsedPath.name}.module.css`;
+
+                    if (!isStylesheetInSameFolder(importSource)) {
+                        // ./myImage.svg
+                        context.report({
+                            node,
+                            message: `CSS Modules should be associated to one component and located in the same folder ./${validCssFilename}. If the module is already used by another component, create a new one.`
+                        });
+                    } else {
+                        const validCssPath = `.${sep}${validCssFilename}`;
+                        const isNamingValid = importSource === validCssPath;
+                        if (!isNamingValid) {
+                            context.report({
+                                node,
+                                message: `CSS Modules should be associated to one component and should be named ./${validCssFilename}. If the module is already used by another component, create a new one.`
+                            });
+                        }
+                    }
+                }
+            }
+        };
+    }
+};
+
+export { rule as strictCssModulesNamesRule };

package/src/plugins/workleapPlugin.ts

@@ -0,0 +1,7 @@
+import { strictCssModulesNamesRule } from "./strictCssModulesNames.ts";
+
+export const WorkleapPlugin = {
+    rules: {
+        "strict-css-modules-names": strictCssModulesNamesRule
+    }
+};

package/src/react.ts

@@ -0,0 +1,175 @@
+import stylisticPlugin from "@stylistic/eslint-plugin";
+import type { Linter } from "eslint";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import type { ConfigWithExtends } from "./types.ts";
+
+export interface ReactConfigOptions {
+    rules?: Partial<Linter.RulesRecord>;
+}
+
+export const reactGlobalIgnores = [];
+
+export function reactConfig(options: ReactConfigOptions = {}) {
+    const {
+        rules = {}
+    } = options;
+
+    const config: ConfigWithExtends[] = [{
+        name: "@workleap/eslint-configs/react",
+        files: [
+            "**/*.[jt]sx"
+        ],
+        plugins: {
+            "@stylistic": stylisticPlugin
+        },
+        extends: [
+            reactPlugin.configs.flat.recommended,
+            // @ts-expect-error the typings are broken and think there's a ".default" to add.
+            reactHooksPlugin.configs.flat.recommended
+        ],
+        languageOptions: {
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true
+                }
+            }
+        },
+        settings: {
+            react: {
+                version: "detect"
+            }
+        },
+        rules: {
+            // React Recommend rules overrides
+            "react/display-name": "off",
+            "react/jsx-key": "off",
+            "react/jsx-no-duplicate-props": [
+                "warn",
+                {
+                    ignoreCase: true
+                }
+            ],
+            "react/jsx-no-undef": [
+                "warn",
+                {
+                    allowGlobals: true
+                }
+            ],
+            "react/no-unescaped-entities": "off",
+            "react/prop-types": "off",
+            "react/react-in-jsx-scope": "off",
+
+            // React extra rules
+            "react/button-has-type": "warn",
+            "react/default-props-match-prop-types": "warn",
+            "react/destructuring-assignment": [
+                "warn",
+                "always",
+                { ignoreClassFields: true }
+            ],
+            "react/forbid-foreign-prop-types": [
+                "warn",
+                {
+                    allowInPropTypes: true
+                }
+            ],
+            "react/jsx-boolean-value": ["warn", "never"],
+            "react/jsx-filename-extension": [
+                "warn",
+                {
+                    extensions: [".jsx", ".tsx"]
+                }
+            ],
+            "react/jsx-pascal-case": [
+                "warn",
+                {
+                    allowAllCaps: true,
+                    ignore: []
+                }
+            ],
+            "react/no-access-state-in-setstate": "warn",
+            "react/no-array-index-key": "warn",
+            "react/no-typos": "error",
+            "react/no-unused-prop-types": [
+                "warn",
+                {
+                    customValidators: [],
+                    skipShapeProps: true
+                }
+            ],
+            "react/no-unused-state": "warn",
+            "react/style-prop-object": "warn",
+
+            // React rules turned off in favor of @stylistic
+            "react/jsx-closing-bracket-location": "off",
+            "react/jsx-closing-tag-location": "off",
+            "react/jsx-curly-brace-presence": "off",
+            "react/jsx-curly-newline": "off",
+            "react/jsx-curly-spacing": "off",
+            "react/jsx-equals-spacing": "off",
+            "react/jsx-first-prop-new-line": "off",
+            "react/jsx-indent-props": "off",
+            "react/jsx-max-props-per-line": "off",
+            "react/jsx-one-expression-per-line": "off",
+            "react/jsx-tag-spacing": "off",
+            "react/jsx-wrap-multilines": "off",
+
+            // @stylistic rules (cannot use the recommended config" because it would conflict with the "typescript" config rules)
+            "@stylistic/jsx-closing-bracket-location": "warn",
+            "@stylistic/jsx-closing-tag-location": "warn",
+            "@stylistic/jsx-curly-brace-presence": [
+                "warn",
+                {
+                    propElementValues: "always"
+                }
+            ],
+            "@stylistic/jsx-curly-newline": "warn",
+            "@stylistic/jsx-curly-spacing": [
+                "warn",
+                {
+                    children: true,
+                    when: "never"
+                }
+            ],
+            "@stylistic/jsx-equals-spacing": "warn",
+            "@stylistic/jsx-first-prop-new-line": "warn",
+            "@stylistic/jsx-function-call-newline": ["warn", "multiline"],
+            "@stylistic/jsx-max-props-per-line": [
+                "warn",
+                {
+                    maximum: 1,
+                    when: "multiline"
+                }
+            ],
+            "@stylistic/jsx-quotes": ["warn", "prefer-double"],
+            "@stylistic/jsx-tag-spacing": [
+                "warn",
+                {
+                    // afterOpening: "never",
+                    // beforeClosing: "never",
+                    beforeSelfClosing: "always"
+                    // closingSlash: "never"
+                }
+            ],
+            "@stylistic/jsx-wrap-multilines": [
+                "warn",
+                {
+                    arrow: "parens-new-line",
+                    assignment: "parens-new-line",
+                    condition: "parens-new-line",
+                    declaration: "parens-new-line",
+                    logical: "parens-new-line",
+                    prop: "parens-new-line",
+                    propertyValue: "parens-new-line",
+                    return: "parens-new-line"
+                }
+            ],
+
+            // Positioned last to allow the consumer to override any rules.
+            ...rules
+        }
+    }];
+
+    return config;
+};

package/src/storybook.ts

@@ -0,0 +1,53 @@
+import type { Linter } from "eslint";
+import storybookPlugin from "eslint-plugin-storybook";
+import type { ConfigWithExtends } from "./types.ts";
+
+export interface StorybookConfigOptions {
+    storiesRules?: Partial<Linter.RulesRecord>;
+    mainFileRules?: Partial<Linter.RulesRecord>;
+}
+
+export const storybookGlobalIgnores = [
+    "!.storybook",
+    "storybook-static"
+];
+
+export function storybookConfig(options: StorybookConfigOptions = {}) {
+    const {
+        storiesRules = {},
+        mainFileRules = {}
+    } = options;
+
+    const config: ConfigWithExtends[] = [
+        {
+            name: "@workleap/eslint-configs/storybook-stories",
+            files: [
+                "**/*.{stories,storybook,story,chroma}.{js,ts,jsx,tsx}"
+            ],
+            extends: [
+                // @ts-expect-error the typings are broken and think there's a ".default" to add.
+                storybookPlugin.configs["flat/recommended"]
+                // // @ts-expect-error the types are broken and think there's a ".default" to add.
+                // storybookPlugin.configs["flat/csf"],
+                // // @ts-expect-error the types are broken and think there's a ".default" to add.
+                // storybookPlugin.configs["flat/csf-strict"]
+            ],
+            rules: storiesRules
+        },
+        {
+            name: "@workleap/eslint-configs/storybook-main",
+            files: ["**/{.storybook,storybook}/main.@(js|cjs|mjs|ts)"],
+            plugins: {
+                // @ts-expect-error the typings are broken.
+                storybook: storybookPlugin
+            },
+            rules: {
+                "storybook/no-uninstalled-addons": "warn",
+                // Positioned last to allow the consumer to override any rules.
+                ...mainFileRules
+            }
+        }
+    ];
+
+    return config;
+};

package/src/testingLibrary.ts

@@ -0,0 +1,48 @@
+import type { Linter } from "eslint";
+import testingLibraryPlugin from "eslint-plugin-testing-library";
+import type { ConfigWithExtends } from "./types.ts";
+
+export interface TestingLibraryConfigOptions {
+    reactRules?: Partial<Linter.RulesRecord>;
+    jsRules?: Partial<Linter.RulesRecord>;
+}
+
+export const testingLibraryGlobalIgnores = [];
+
+export function testingLibraryConfig(options: TestingLibraryConfigOptions = {}) {
+    const {
+        reactRules = {},
+        jsRules = {}
+    } = options;
+
+    const config: ConfigWithExtends[] = [
+        {
+            name: "@workleap/eslint-configs/testing-library-react",
+            files: [
+                "**/*.test.[jt]sx",
+                "**/*-test.[jt]sx",
+                "**/__tests__/*.[jt]sx",
+                "**/test.[jt]sx"
+            ],
+            extends: [
+                testingLibraryPlugin.configs["flat/react"]
+            ],
+            rules: reactRules
+        },
+        {
+            name: "@workleap/eslint-configs/testing-library-js",
+            files: [
+                "**/*.test.[jt]s",
+                "**/*-test.[jt]s",
+                "**/__tests__/*.[jt]s",
+                "**/test.[jt]s"
+            ],
+            extends: [
+                testingLibraryPlugin.configs["flat/dom"]
+            ],
+            rules: jsRules
+        }
+    ];
+
+    return config;
+};

package/src/types.ts

@@ -0,0 +1,27 @@
+import type { Linter } from "eslint";
+
+// Copied from: https://github.com/eslint/rewrite/blob/main/packages/config-helpers/src/types.ts
+/**
+ * Infinite array type.
+ */
+export type InfiniteArray<T> = T | InfiniteArray<T>[];
+
+// Copied from: https://github.com/eslint/rewrite/blob/main/packages/config-helpers/src/types.ts
+/**
+ * The type of array element in the `extends` property after flattening.
+ */
+export type SimpleExtendsElement = string | Linter.Config;
+
+// Copied from: https://github.com/eslint/rewrite/blob/main/packages/config-helpers/src/types.ts
+/**
+ * The type of array element in the `extends` property before flattening.
+ */
+export type ExtendsElement = SimpleExtendsElement | InfiniteArray<Linter.Config>;
+
+// Copied from: https://github.com/eslint/rewrite/blob/main/packages/config-helpers/src/types.ts
+/**
+ * Config with extends. Valid only inside of `defineConfig()`.
+ */
+export interface ConfigWithExtends extends Linter.Config {
+    extends?: ExtendsElement[];
+}

package/src/typescript.ts

@@ -0,0 +1,133 @@
+import js from "@eslint/js";
+import stylisticPlugin from "@stylistic/eslint-plugin";
+import type { Linter } from "eslint";
+import tseslint from "typescript-eslint";
+import type { ConfigWithExtends } from "./types.ts";
+
+export interface TypescriptConfigOptions {
+    rules?: Partial<Linter.RulesRecord>;
+}
+
+export const typescriptGlobalIgnores = [];
+
+export function typescriptConfig(tsconfigRootDir: string, options: TypescriptConfigOptions = {}) {
+    const {
+        rules = {}
+    } = options;
+
+    const config: ConfigWithExtends[] = [{
+        name: "@workleap/eslint-configs/typescript",
+        files: [
+            "**/*.{ts,tsx}"
+        ],
+        plugins: {
+            "@stylistic": stylisticPlugin
+        },
+        extends: [
+            js.configs.recommended,
+            tseslint.configs.recommendedTypeChecked,
+            tseslint.configs.stylisticTypeCheckedOnly,
+            stylisticPlugin.configs.customize({
+                braceStyle: "1tbs",
+                commaDangle: "never",
+                jsx: false,
+                quotes: "double",
+                semi: true,
+                severity: "warn"
+            })
+        ],
+        languageOptions: {
+            parser: tseslint.parser,
+            parserOptions: {
+                // Rely on TypeScript's project service to automatically discover the "tsconfig.json" file
+                // within the boundaries of "tsconfigRootDir".
+                projectService: true,
+                tsconfigRootDir
+            }
+        },
+        rules: {
+            // ESLint core rules overrides
+            "dot-notation": "off",
+            "indent": "off",
+            "no-dupe-class-members": "off",
+            "no-empty-function": "off",
+            "no-loop-func": "off",
+            "no-shadow": "off",
+            "no-unused-expressions": "off",
+            "no-use-before-define": "off",
+            "no-useless-constructor": "off",
+            "object-curly-spacing": "off",
+            "quotes": "off",
+            "semi": "off",
+
+            // ESlint deprecated core rules
+            "arrow-parens": "off",
+            "comma-dangle": "off",
+
+            // @typescript-eslint recommended rules overrides
+            "@typescript-eslint/dot-notation": "off",
+            "@typescript-eslint/no-base-to-string": "off",
+            "@typescript-eslint/no-empty-function": "off",
+            "@typescript-eslint/no-empty-object-type": [
+                "error",
+                {
+                    allowInterfaces: "with-single-extends",
+                    allowObjectTypes: "never"
+                }
+            ],
+            "@typescript-eslint/no-floating-promises": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/no-unsafe-argument": "off",
+            "@typescript-eslint/no-unsafe-assignment": "off",
+            "@typescript-eslint/no-unsafe-member-access": "off",
+            "@typescript-eslint/only-throw-error": "off",
+            "@typescript-eslint/prefer-nullish-coalescing": "off",
+            "@typescript-eslint/restrict-template-expressions": "off",
+
+            // @stylistic recommend rules overrides
+            "@stylistic/arrow-parens": [
+                "warn",
+                "as-needed",
+                {
+                    requireForBlockBody: false
+                }
+            ],
+            "@stylistic/indent": [
+                "warn",
+                4,
+                {
+                    SwitchCase: 1,
+                    CallExpression: { arguments: "first" }
+                }
+            ],
+            "@stylistic/indent-binary-ops": ["warn", 4],
+            "@stylistic/member-delimiter-style": [
+                "warn",
+                {
+                    multiline: {
+                        delimiter: "semi"
+                    },
+                    singleline: {
+                        delimiter: "semi"
+                    }
+                }
+            ],
+            "@stylistic/multiline-ternary": "off",
+            "@stylistic/no-multiple-empty-lines": [
+                "warn",
+                {
+                    // View https://eslint.style/rules/eol-last.
+                    max: 1
+                }
+            ],
+            "@stylistic/operator-linebreak": "off",
+            // Should be the default but somehow it's not enforced if it's not explicitly specified.
+            "@stylistic/quote-props": "off",
+
+            // Positioned last to allow the consumer to override any rules.
+            ...rules
+        }
+    }];
+
+    return config;
+};