@typeform/eslint-config 6.1.0 → 6.2.0-beta.1

package/.github/workflows/deploy.yml

@@ -15,12 +15,12 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v5
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Set GitHub packages registry
         run: |
@@ -38,10 +38,13 @@ jobs:
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn install --frozen-lockfile
 
+      - name: Build
+        run: yarn build
+
       - name: Run linting
         run: yarn lint
 
-      - name: Release main
+      - name: Release
         run: yarn semantic-release
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}

package/.github/workflows/tests.yml

@@ -11,18 +11,30 @@ on:
 jobs:
   tests:
     runs-on: [ubuntu-latest]
+    strategy:
+      matrix:
+        node-version: [20, 22]
+      fail-fast: false
 
     steps:
       - name: Check Out Source Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: ${{ matrix.node-version }}
+
       - name: Set up
         run: yarn
 
       - name: Lint
         run: yarn lint
 
+      - name: Build
+        run: yarn build
+
       - name: Test
         run: yarn test

package/.husky/pre-commit

@@ -0,0 +1,12 @@
+#!/usr/bin/env sh
+
+# Try to use node from PATH first
+if ! command -v node >/dev/null 2>&1; then
+  # If node is not found, try to load nvm
+  if [ -f ~/.nvm/nvm.sh ]; then
+    . ~/.nvm/nvm.sh
+    nvm use 22 >/dev/null 2>&1 || nvm use default >/dev/null 2>&1
+  fi
+fi
+
+yarn lint-staged

package/README.md

@@ -11,12 +11,27 @@ yarn add eslint @typeform/eslint-config --dev
 
 ## Usage
 
-If you want to use the default configuration, you can simply create a `.eslintrc.js` file (or [alternatives](https://eslint.org/docs/user-guide/configuring#configuration-file-formats)) with the following content:
+This package uses ESLint's flat config format. Create an `eslint.config.js` file with the following content:
 
 ```js
-module.exports = {
-  extends: ['@typeform/eslint-config'],
-}
+import typeformConfig from '@typeform/eslint-config'
+
+export default typeformConfig
+```
+
+Or extend it with your own rules:
+
+```js
+import typeformConfig from '@typeform/eslint-config'
+
+export default [
+  ...typeformConfig,
+  {
+    rules: {
+      // Your custom rules
+    }
+  }
+]
 ```
 
 And run with:
@@ -25,18 +40,22 @@ And run with:
 yarn eslint . --fix
 ```
 
-## Using with prettier
+## Development
 
-If your codebase uses prettier for styles formatting, you can override default `standard` rules updating your `eslint` config:
+This package is written in TypeScript and requires building before use:
 
-```js
-module.exports = {
-  extends: ['@typeform/eslint-config', 'prettier', 'prettier/react', 'plugin:prettier/recommended'],
-}
-```
+```sh
+# Install dependencies
+yarn install
 
-and installing `eslint-plugin-prettier`:
+# Build TypeScript
+yarn build
 
-```sh
-yarn add --dev eslint-plugin-prettier
+# Run tests
+yarn test
+
+# Lint
+yarn lint
 ```
+
+The `prepare` script automatically builds the package after `yarn install`.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any[];
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";AAUA,wBAiKC"}

package/dist/index.js

@@ -0,0 +1,153 @@
+import tseslint from 'typescript-eslint';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import jestPlugin from 'eslint-plugin-jest';
+import importPlugin from 'eslint-plugin-import';
+import prettierConfig from 'eslint-config-prettier';
+import globals from 'globals';
+export default [
+    // Ignore test-cases directory (these files intentionally have errors for testing)
+    // Ignore dist directory (generated TypeScript output)
+    {
+        ignores: ['dist/**', 'test-cases/**'],
+    },
+    // Base recommended configs (only jsx-a11y and prettier, not eslint:recommended to match original behavior)
+    jsxA11yPlugin.flatConfigs.recommended,
+    prettierConfig,
+    // JavaScript/JSX configuration
+    {
+        files: ['**/*.{js,mjs,cjs,jsx}'],
+        plugins: {
+            'react': reactPlugin,
+            'react-hooks': reactHooksPlugin,
+            'jest': jestPlugin,
+            'import': importPlugin,
+        },
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                    generators: true,
+                },
+            },
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.commonjs,
+                ...globals.es2021,
+                ...globals.jest,
+            },
+        },
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+        rules: {
+            'no-var': 'warn',
+            'curly': 'warn',
+            'prefer-destructuring': 'warn',
+            'import/order': [
+                'warn',
+                {
+                    'newlines-between': 'always',
+                },
+            ],
+            'import/export': 'warn',
+            'jest/no-focused-tests': 'error',
+            'no-console': 'warn',
+            'no-debugger': 'error',
+            'prefer-template': 'warn',
+            'react/prop-types': 'error',
+            'react-hooks/exhaustive-deps': 'error',
+            'react/jsx-key': ['warn', { checkFragmentShorthand: true }],
+            'no-restricted-imports': [
+                'warn',
+                {
+                    patterns: [
+                        {
+                            group: ['@typeform/kitt/lib/*'],
+                            message: "🙈 The lib notation is deprecated. Refer to the Kitt's doc, and ping the FEAR team if you have a doubt",
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    // TypeScript configuration
+    {
+        files: ['**/*.{ts,tsx}'],
+        plugins: {
+            '@typescript-eslint': tseslint.plugin,
+            'react': reactPlugin,
+            'react-hooks': reactHooksPlugin,
+            'jest': jestPlugin,
+            'import': importPlugin,
+        },
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: tseslint.parser,
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                    generators: true,
+                },
+            },
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.commonjs,
+                ...globals.es2021,
+                ...globals.jest,
+            },
+        },
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+        rules: {
+            'no-var': 'warn',
+            'curly': 'warn',
+            'prefer-destructuring': 'warn',
+            '@typescript-eslint/no-extra-semi': 'off',
+            'import/order': [
+                'warn',
+                {
+                    'newlines-between': 'always',
+                },
+            ],
+            'import/export': 'warn',
+            'jest/no-focused-tests': 'error',
+            'no-console': 'warn',
+            'no-debugger': 'error',
+            'prefer-template': 'warn',
+            'react/prop-types': 'error',
+            'react-hooks/exhaustive-deps': 'error',
+            'react/jsx-key': ['warn', { checkFragmentShorthand: true }],
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/consistent-type-imports': [
+                'warn',
+                {
+                    prefer: 'type-imports',
+                    fixStyle: 'inline-type-imports',
+                },
+            ],
+            'no-restricted-imports': [
+                'warn',
+                {
+                    patterns: [
+                        {
+                            group: ['@typeform/kitt/lib/*'],
+                            message: "🙈 The lib notation is deprecated. Refer to the Kitt's doc, and ping the FEAR team if you have a doubt",
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+];

package/eslint.config.js

@@ -0,0 +1 @@
+export { default } from './dist/index.js'

package/index.test.js

@@ -1,11 +1,11 @@
-const child_process = require('child_process')
+import { execSync } from 'child_process'
 
 describe('eslint config', () => {
   // #region Pass
   it('should pass if there are no errors', () => {
-    const output = child_process
-      .execSync('yarn eslint -f "json" --no-ignore test-cases/pass.js')
-      .toString()
+    const output = execSync(
+      'yarn eslint -f "json" --no-ignore test-cases/pass.js',
+    ).toString()
     expect(output.includes('"errorCount":0')).toBeTruthy()
     expect(output.includes('"fatalErrorCount":0')).toBeTruthy()
     expect(output.includes('"warningCount":0')).toBeTruthy()
@@ -16,11 +16,9 @@ describe('eslint config', () => {
 
   // #region Warn
   it('should warn if console is used', () => {
-    const output = child_process
-      .execSync(
-        'yarn eslint -f "json" --no-ignore test-cases/warn-no-console.js'
-      )
-      .toString()
+    const output = execSync(
+      'yarn eslint -f "json" --no-ignore test-cases/warn-no-console.js',
+    ).toString()
 
     expect(output.includes('"ruleId":"no-console"')).toBeTruthy()
     expect(output.includes('"errorCount":0')).toBeTruthy()
@@ -28,9 +26,9 @@ describe('eslint config', () => {
   })
 
   it('should warn if var is used', () => {
-    const output = child_process
-      .execSync('yarn eslint -f "json" --no-ignore test-cases/warn-no-var.js')
-      .toString()
+    const output = execSync(
+      'yarn eslint -f "json" --no-ignore test-cases/warn-no-var.js',
+    ).toString()
 
     expect(output.includes('"ruleId":"no-var"')).toBeTruthy()
     expect(output.includes('"errorCount":0')).toBeTruthy()
@@ -38,9 +36,9 @@ describe('eslint config', () => {
   })
 
   it('should warn if braces are not used', () => {
-    const output = child_process
-      .execSync('yarn eslint -f "json" --no-ignore test-cases/warn-curly.js')
-      .toString()
+    const output = execSync(
+      'yarn eslint -f "json" --no-ignore test-cases/warn-curly.js',
+    ).toString()
 
     expect(output.includes('"ruleId":"curly"')).toBeTruthy()
     expect(output.includes('"errorCount":0')).toBeTruthy()
@@ -48,11 +46,9 @@ describe('eslint config', () => {
   })
 
   it('should warn if destructuring is not used', () => {
-    const output = child_process
-      .execSync(
-        'yarn eslint -f "json" --no-ignore test-cases/warn-prefer-destructuring.js'
-      )
-      .toString()
+    const output = execSync(
+      'yarn eslint -f "json" --no-ignore test-cases/warn-prefer-destructuring.js',
+    ).toString()
 
     expect(output.includes('"ruleId":"prefer-destructuring"')).toBeTruthy()
     expect(output.includes('"errorCount":0')).toBeTruthy()
@@ -63,8 +59,8 @@ describe('eslint config', () => {
   // #region Fail
   it('should fail if debugger is used', () => {
     const call = () =>
-      child_process.execSync(
-        'yarn eslint -f "json" --no-ignore test-cases/error-no-debugger.js'
+      execSync(
+        'yarn eslint -f "json" --no-ignore test-cases/error-no-debugger.js',
       )
 
     expect(call).toThrow()

package/index.ts

@@ -0,0 +1,172 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y'
+import jestPlugin from 'eslint-plugin-jest'
+import importPlugin from 'eslint-plugin-import'
+import prettierConfig from 'eslint-config-prettier'
+import globals from 'globals'
+
+export default [
+  // Ignore test-cases directory (these files intentionally have errors for testing)
+  // Ignore dist directory (generated TypeScript output)
+  {
+    ignores: ['dist/**', 'test-cases/**'],
+  },
+
+  // Base recommended configs (only jsx-a11y and prettier, not eslint:recommended to match original behavior)
+  jsxA11yPlugin.flatConfigs.recommended,
+  prettierConfig,
+
+  // JavaScript/JSX configuration
+  {
+    files: ['**/*.{js,mjs,cjs,jsx}'],
+
+    plugins: {
+      'react': reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      'jest': jestPlugin,
+      'import': importPlugin,
+    },
+
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+          generators: true,
+        },
+      },
+
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.commonjs,
+        ...globals.es2021,
+        ...globals.jest,
+      },
+    },
+
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+
+    rules: {
+      'no-var': 'warn',
+      'curly': 'warn',
+      'prefer-destructuring': 'warn',
+      'import/order': [
+        'warn',
+        {
+          'newlines-between': 'always',
+        },
+      ],
+      'import/export': 'warn',
+      'jest/no-focused-tests': 'error',
+      'no-console': 'warn',
+      'no-debugger': 'error',
+      'prefer-template': 'warn',
+      'react/prop-types': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+      'react/jsx-key': ['warn', { checkFragmentShorthand: true }],
+      'no-restricted-imports': [
+        'warn',
+        {
+          patterns: [
+            {
+              group: ['@typeform/kitt/lib/*'],
+              message:
+                "🙈 The lib notation is deprecated. Refer to the Kitt's doc, and ping the FEAR team if you have a doubt",
+            },
+          ],
+        },
+      ],
+    },
+  },
+
+  // TypeScript configuration
+  {
+    files: ['**/*.{ts,tsx}'],
+
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      'react': reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      'jest': jestPlugin,
+      'import': importPlugin,
+    },
+
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parser: tseslint.parser,
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+          generators: true,
+        },
+      },
+
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.commonjs,
+        ...globals.es2021,
+        ...globals.jest,
+      },
+    },
+
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+
+    rules: {
+      'no-var': 'warn',
+      'curly': 'warn',
+      'prefer-destructuring': 'warn',
+      '@typescript-eslint/no-extra-semi': 'off',
+      'import/order': [
+        'warn',
+        {
+          'newlines-between': 'always',
+        },
+      ],
+      'import/export': 'warn',
+      'jest/no-focused-tests': 'error',
+      'no-console': 'warn',
+      'no-debugger': 'error',
+      'prefer-template': 'warn',
+      'react/prop-types': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+      'react/jsx-key': ['warn', { checkFragmentShorthand: true }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/consistent-type-imports': [
+        'warn',
+        {
+          prefer: 'type-imports',
+          fixStyle: 'inline-type-imports',
+        },
+      ],
+      'no-restricted-imports': [
+        'warn',
+        {
+          patterns: [
+            {
+              group: ['@typeform/kitt/lib/*'],
+              message:
+                "🙈 The lib notation is deprecated. Refer to the Kitt's doc, and ping the FEAR team if you have a doubt",
+            },
+          ],
+        },
+      ],
+    },
+  },
+]

package/jest.config.js

@@ -1 +1,4 @@
-module.exports = {}
+export default {
+  testEnvironment: 'node',
+  transform: {},
+}

package/package.json

@@ -1,66 +1,67 @@
 {
   "name": "@typeform/eslint-config",
-  "version": "6.1.0",
+  "version": "6.2.0-beta.1",
   "description": "ESLint configuration for Typeform front-end projects",
-  "main": "index.js",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
   "repository": "git@github.com:Typeform/eslint-config-typeform.git",
   "license": "LGPL-3.0-only",
   "private": false,
   "engines": {
-    "node": ">=10"
+    "node": ">=20"
   },
   "scripts": {
-    "test": "jest",
+    "build": "tsc",
+    "prepare": "husky && yarn build",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "eslint": "eslint",
     "lint": "yarn run eslint .",
-    "publish:npm": "npm config set @typeform:registry https://registry.npmjs.org/ && npm config set '//registry.npmjs.org/:_authToken' $NPM_TOKEN && npm publish"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "publish:npm": "yarn build && npm config set @typeform:registry https://registry.npmjs.org/ && npm config set '//registry.npmjs.org/:_authToken' $NPM_TOKEN && npm publish"
   },
   "lint-staged": {
-    "*.js": "yarn run eslint --fix",
-    "*.{js,css,md}": "prettier --write"
+    "*.{js,ts}": "yarn run eslint --fix",
+    "*.{js,ts,css,md}": "prettier --write"
   },
   "publishConfig": {
     "access": "public"
   },
-  "prettier": "./prettier",
+  "prettier": "./prettier/index.cjs",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
-    "babel-eslint": "^10.1.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-config-standard-jsx": "^11.0.0",
-    "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.5",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "@eslint/js": "^9.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-n": "^17.14.0",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.13.0",
+    "typescript-eslint": "^8.18.1",
+    "yarn": "^1.22.22"
   },
   "peerDependencies": {
-    "@babel/core": "7.x",
-    "eslint": ">=7.27.x",
-    "typescript": ">=4"
+    "eslint": ">=9.0.0",
+    "typescript": ">=5"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
     "@semantic-release/exec": "^6.0.3",
-    "eslint": "^7.27.0",
-    "husky": "^8.0.2",
-    "jest": "^29.3.1",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
-    "semantic-release": "^19.0.5",
-    "typescript": "^4.7.2"
+    "eslint": "^9.16.0",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.11",
+    "prettier": "^3.4.2",
+    "semantic-release": "^24.2.0",
+    "typescript": "^5.7.2"
   },
   "release": {
     "branches": [

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false
+  },
+  "include": [
+    "index.ts",
+    "prettier/index.js",
+    "types.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "test-cases",
+    "**/*.test.js"
+  ]
+}

package/types.d.ts

@@ -0,0 +1,2 @@
+declare module 'eslint-plugin-jsx-a11y'
+declare module 'eslint-config-prettier'

package/.eslintignore

@@ -1 +0,0 @@
-/test-cases/**

package/.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": "./index.js"
-}

package/index.js

@@ -1,62 +0,0 @@
-module.exports = {
-  extends: ['react-app', 'plugin:jsx-a11y/recommended', 'prettier'],
-  plugins: ['jest'],
-  env: {
-    'browser': true,
-    'commonjs': true,
-    'es6': true,
-    'jest': true,
-    'node': true,
-    'jest/globals': true,
-  },
-  parserOptions: {
-    ecmaFeatures: {
-      generators: true,
-    },
-  },
-  rules: {
-    'no-var': 'warn',
-    'curly': 'warn',
-    'prefer-destructuring': 'warn',
-    '@typescript-eslint/no-extra-semi': 'off',
-    'import/order': [
-      'warn',
-      {
-        'newlines-between': 'always',
-      },
-    ],
-    'import/export': 'warn',
-    'jest/no-focused-tests': 'error',
-    'no-console': 'warn',
-    'no-debugger': 'error',
-    'prefer-template': 'warn',
-    'react/prop-types': 'error',
-    'react-hooks/exhaustive-deps': 'error',
-    'react/jsx-key': ['warn', { checkFragmentShorthand: true }],
-    '@typescript-eslint/no-explicit-any': 'warn',
-    '@typescript-eslint/consistent-type-imports': [
-      'warn',
-      {
-        prefer: 'type-imports',
-        fixStyle: 'inline-type-imports',
-      },
-    ],
-    'no-restricted-imports': [
-      'warn',
-      {
-        patterns: [
-          {
-            group: ['@typeform/kitt/lib/*'],
-            message:
-              "🙈 The lib notation is deprecated. Refer to the Kitt's doc, and ping the FEAR team if you have a doubt",
-          },
-        ],
-      },
-    ],
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-}