chore: update @typescript-eslint and typescript

chore: fix eslint errors after @typescript-eslint update chore: update dedent dep chore: include internal as a config into eslint and rise typescript ver chore: remove errors and warnings docs(eslint-plugin): update README.md Update packages/orbit-components/cypress/integration/index.tsx Co-authored-by: Daniel Sil <[email protected]> chore: add allowImportingTsExtensions to tsconfig chore(InputSelect): rewrite type to interface chore(Stack): remove spaceAfter from Tablet story
kiwicom · Oct 25, 2023 · e01468f · e01468f
1 parent 744c368
commit e01468f
Show file tree

Hide file tree

Showing 56 changed files with 670 additions and 413 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -5,6 +5,7 @@ const CONFIGS = [
   "plugin:react-hooks/recommended",
   "plugin:prettier/recommended",
   "plugin:tailwindcss/recommended",
+  "plugin:orbit-components/internal",
 ];
 
 module.exports = {
@@ -48,6 +49,8 @@ module.exports = {
     "no-await-in-loop": "off",
     "tailwindcss/classnames-order": "off",
     "tailwindcss/no-custom-classname": [1, { whitelist: ["(orbit\\-).*", "chromatic-ignore"] }],
+    // to improve performance locally
+    // https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#my-linting-feels-really-slow
     ...(!process.env.CI
       ? {
           "import/no-named-as-default": "off",
@@ -72,9 +75,12 @@ module.exports = {
         "plugin:@typescript-eslint/recommended",
         "prettier",
       ],
+      plugins: ["@typescript-eslint"],
+      parser: "@typescript-eslint/parser",
       parserOptions: {
         extraFileExtensions: [".mts"],
         tsconfigRootDir: __dirname,
+        // https://typescript-eslint.io/linting/typed-linting/
         project: [
           "./tsconfig.scripts.json",
           "./tsconfig.json",
@@ -98,7 +104,13 @@ module.exports = {
         "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
         "@typescript-eslint/no-empty-interface": "off",
         "@typescript-eslint/prefer-readonly-parameter-types": "off",
+        "@typescript-eslint/no-unsafe-argument": "warn",
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-duplicate-enum-values": "warn",
         "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-floating-promises": "off",
+        "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
         "no-unused-vars": "off",
         "@typescript-eslint/no-unused-vars": [
           "error",

diff --git a/docs/lib.es5.d.ts b/docs/lib.es5.d.ts
@@ -21,5 +21,5 @@ interface Array<T> {
    * @param predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
    * @param thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
    */
-  filter<S extends T>(predicate: BooleanConstructor, thisArg?: any): Exclude<S, Falsy>[];
+  filter<S extends T>(predicate: BooleanConstructor, thisArg?: unknown): Exclude<S, Falsy>[];
 }
diff --git a/docs/src/components/Navbar/index.tsx b/docs/src/components/Navbar/index.tsx
@@ -223,7 +223,6 @@ const Navbar = ({ location, docNavigation }: Props) => {
                                     role="tab"
                                     aria-selected={activeTab === "navigation"}
                                     aria-controls="navbar-tabpanel-navigation"
-                                    id="navbar-tab-navigation"
                                     type="button"
                                     onClick={() => setActiveTab("navigation")}
                                   >
@@ -233,7 +232,6 @@ const Navbar = ({ location, docNavigation }: Props) => {
                                     role="tab"
                                     aria-selected={activeTab === "bookmarks"}
                                     aria-controls="navbar-tabpanel-bookmarks"
-                                    id="navbar-tab-bookmarks"
                                     type="button"
                                     onClick={() => setActiveTab("bookmarks")}
                                   >
@@ -276,7 +274,6 @@ const Navbar = ({ location, docNavigation }: Props) => {
                             <div
                               tabIndex={0}
                               role="tabpanel"
-                              id="navbar-tabpanel-navigation"
                               aria-labelledby="navbar-tab-navigation"
                             >
                               {docNavigation}

diff --git a/package.json b/package.json
@@ -75,19 +75,20 @@
     "@types/jest": "^29.5.5",
     "@types/lodash": "^4.14.194",
     "@types/prettier": "^2.7.2",
+    "@types/pngjs": "^6.0.2",
     "@types/react": ">=17.0.26",
     "@types/react-dom": ">=17.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
     "babel-jest": "^28.1.3",
     "browserslist": "^4.16.6",
     "chromatic": "^7.2.3",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.2",
-    "dedent": "^0.7.0",
+    "dedent": "^1.5.1",
     "del-cli": "^5.0.0",
     "dotenv-safe": "^8.2.0",
-    "eslint": "^8.37.0",
+    "eslint": "^8.47.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -144,7 +145,7 @@
     "ts-node": "^10.9.1",
     "tsc-files": "^1.1.3",
     "tsup": "^6.7.0",
-    "typescript": "^4.8.3",
+    "typescript": "^5.0.0",
     "zx": "^7.0.7"
   }
 }
diff --git a/packages/eslint-plugin-orbit-components/.eslintrc.cjs b/packages/eslint-plugin-orbit-components/.eslintrc.cjs
@@ -1,17 +1,6 @@
-const { DEV_DEPENDENCIES } = require("../../utils/eslint");
-
 module.exports = {
   extends: ["../../.eslintrc.cjs"],
   overrides: [
-    {
-      files: DEV_DEPENDENCIES,
-      rules: {
-        "import/no-extraneous-dependencies": [
-          "error",
-          { packageDir: [__dirname, `${__dirname}/../..`] },
-        ],
-      },
-    },
     {
       files: ["src/**"],
       rules: {
@@ -20,5 +9,11 @@ module.exports = {
         "@typescript-eslint/explicit-module-boundary-types": "off",
       },
     },
+    {
+      files: ["src/**/__tests__/**", "src/ruleTester.ts"],
+      rules: {
+        "import/no-extraneous-dependencies": "off",
+      },
+    },
   ],
 };
diff --git a/packages/eslint-plugin-orbit-components/README.md b/packages/eslint-plugin-orbit-components/README.md
@@ -1,4 +1,4 @@
-# eslint-plugin-orbit-components
+# @kiwicom/eslint-plugin-orbit-components
 
 Collection of ESLint rules to enforce the best usage practices of [`@kiwicom/orbit-components`](https://github.com/kiwicom/orbit-components/).
 
@@ -8,10 +8,10 @@ Assuming you already have ESLint installed, run:
 
 ```sh
 # npm
-npm install eslint-plugin-orbit-components --save-dev
+npm install @kiwicom/eslint-plugin-orbit-components --save-dev
 
 # yarn
-yarn add eslint-plugin-orbit-components --dev
+yarn add @kiwicom/eslint-plugin-orbit-components --dev
 ```
 
 Then add it to your ESLint configuration:
@@ -20,12 +20,12 @@ Then add it to your ESLint configuration:
 {
   "plugins": [
     // ...
-    "orbit-components"
+    "@kiwicom/eslint-plugin-orbit-components"
   ],
   "rules": {
     // ...
-    "orbit-components/button-has-title": "error",
-    "orbit-components/unnecessary-text": "error",
+    "@kiwicom/orbit-components/button-has-title": "error",
+    "@kiwicom/orbit-components/unnecessary-text": "error",
   }
 }
 ```
@@ -42,8 +42,20 @@ or via extending our recommended config:
 
 ## Supported Rules
 
-- [button-has-title](https://github.com/kiwicom/eslint-plugin-orbit-components/blob/master/docs/rules/button-has-title.md): Enforces that `Button` and `ButtonLink` do have either `children` or `title` property.
-- [unnecessary-text](https://github.com/kiwicom/eslint-plugin-orbit-components/blob/master/docs/rules/unnecessary-text.md): Enforces that children of `Button` or `Heading` are not wrapped in `Text` component.
+- [button-has-title](https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/docs/rules/button-has-title.md): Enforces that `Button` and `ButtonLink` do have either `children` or `title` property.
+- [unnecessary-text](https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/docs/rules/unnecessary-text.md): Enforces that children of `Button` or `Heading` are not wrapped in `Text` component.
+- [default-theme](https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/docs/rules/default-theme.md):
+  This rule aims to prevent the wrong usage of the defaultTheme object from @kiwicom/orbit-components
+- [no-custom-colors](https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/docs/rules/no-custom-colors.md):
+  Prevents inconsistencies between Orbit and custom colors
+- [no-custom-typography](https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/docs/rules/no-custom-typography.md): This rule aims to prevent the usage of custom values for font-size, font-family and line-height CSS properties. Only some of the design tokens from @kiwicom/orbit-design-tokens should be used as a value.
+- [prefer-single-destructure](https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/docs/rules/prefer-single-destructure.md): Using too many arrow functions in interpolations can harm performance - because they have to be evaluated with execution context. This is done internally by wrapping all functions into the css helper from styled-components
+- [rtl-utils](https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/docs/rules/rtl-utils.md):
+  Prevents bad theme.rtl patterns. Users often make the same mistake, they tend to use `theme.rtl` to apply RTL styles like right/left position, margins, and paddings. This rule should prevent such cases and enforce the usage of our RTL utility functions.
+- [unique-id](https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/docs/rules/unique-id.md):
+  Rule prevents namespace collisions of the `id` HTML attribute. It often happens, that some elements can have the same ids. To prevent it in our codebase, it's better to use `randomID` utility function.
+- [use-rtl](https://github.com/kiwicom/orbit/blob/master/packages/eslint-plugin-orbit-components/docs/rules/use-rtl.md):
+  This rule aims to prevent RTL mistakes. A user can forget about RTL and use only static values, this rule should help to avoid that.
 
 ## License
 

diff --git a/packages/eslint-plugin-orbit-components/jest.config.cjs b/packages/eslint-plugin-orbit-components/jest.config.cjs
@@ -1,7 +1,8 @@
 module.exports = {
-  displayName: "eslint-plugin-orbit-components",
+  displayName: "@kiwicom/eslint-plugin-orbit-components",
   testEnvironment: "node",
   transform: {
     "\\.[jt]sx?$": ["babel-jest", { root: __dirname }],
   },
+  extensionsToTreatAsEsm: [".ts", ".tsx"],
 };
diff --git a/packages/eslint-plugin-orbit-components/package.json b/packages/eslint-plugin-orbit-components/package.json
@@ -21,6 +21,9 @@
     "url": "https://github.com/kiwicom/orbit.git",
     "directory": "packages/eslint-plugin-orbit-components"
   },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "gitHead": "5e7d8f283e39532de0393f7f42cea2f7d33f6ac7",
   "files": [
     "dist",
@@ -44,10 +47,11 @@
     "eslint": ">=8"
   },
   "devDependencies": {
+    "@typescript-eslint/rule-tester": "^6.5.0",
     "del-cli": "^5.0.0",
     "tsup": "^6.1.0"
   },
   "dependencies": {
-    "@babel/types": "=7.12.10"
+    "@typescript-eslint/utils": "^6.5.0"
   }
 }
diff --git a/packages/eslint-plugin-orbit-components/src/__tests__/buttonHasTitle.test.ts b/packages/eslint-plugin-orbit-components/src/__tests__/buttonHasTitle.test.ts
@@ -2,7 +2,6 @@ import ruleTester from "../ruleTester";
 import buttonHasTitle from "../rules/buttonHasTitle";
 
 describe("Button has title", () => {
-  // @ts-expect-error TODO
   ruleTester.run("button-has-title", buttonHasTitle, {
     valid: [
       {
@@ -48,30 +47,22 @@ describe("Button has title", () => {
       {
         code: `import Button from "@kiwicom/orbit-components/lib/Button";\
                const App = () => <Button iconLeft="something" />`,
-        errors: [
-          "Button doesn't have children. Please provide title property to add aria-label, so it's accessible for screen readers.",
-        ],
+        errors: [{ messageId: "error" }],
       },
       {
         code: `import { Button as OrbitButton } from "@kiwicom/orbit-components/";\
                const App = () => <OrbitButton fullWidth />`,
-        errors: [
-          "OrbitButton doesn't have children. Please provide title property to add aria-label, so it's accessible for screen readers.",
-        ],
+        errors: [{ messageId: "error" }],
       },
       {
         code: `import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";\
                const App = () => <ButtonLink iconLeft="something" />`,
-        errors: [
-          "ButtonLink doesn't have children. Please provide title property to add aria-label, so it's accessible for screen readers.",
-        ],
+        errors: [{ messageId: "error" }],
       },
       {
         code: `import { ButtonLink as OrbitButtonLink } from "@kiwicom/orbit-components/";\
                const App = () => <OrbitButtonLink fullWidth />`,
-        errors: [
-          "OrbitButtonLink doesn't have children. Please provide title property to add aria-label, so it's accessible for screen readers.",
-        ],
+        errors: [{ messageId: "error" }],
       },
       {
         code: `import Button from "@kiwicom/orbit-components/lib/Button";
@@ -81,9 +72,7 @@ describe("Button has title", () => {
                const App = () => {\
                   return <Button {...rest} />
                }`,
-        errors: [
-          "Button doesn't have children. Please provide title property to add aria-label, so it's accessible for screen readers.",
-        ],
+        errors: [{ messageId: "error" }],
       },
       {
         code: `import Button from "@kiwicom/orbit-components/lib/Button";
@@ -93,9 +82,7 @@ describe("Button has title", () => {
                   }
                   return <Button {...rest} />
                }`,
-        errors: [
-          "Button doesn't have children. Please provide title property to add aria-label, so it's accessible for screen readers.",
-        ],
+        errors: [{ messageId: "error" }],
       },
     ],
   });

diff --git a/packages/eslint-plugin-orbit-components/src/__tests__/defaultTheme.test.ts b/packages/eslint-plugin-orbit-components/src/__tests__/defaultTheme.test.ts
@@ -1,5 +1,5 @@
 import ruleTester from "../ruleTester";
-import defaultTheme, { ERRORS } from "../rules/defaultTheme";
+import defaultTheme from "../rules/defaultTheme";
 
 describe("defaultTheme", () => {
   ruleTester.run("defaultTheme", defaultTheme, {
@@ -58,7 +58,11 @@ describe("defaultTheme", () => {
             content: getContentPerStatus(activeStatus, true),
           }
         `,
-        errors: [ERRORS.variableDeclaration],
+        errors: [
+          {
+            messageId: "variableDeclaration",
+          },
+        ],
       },
       {
         code: `
@@ -68,11 +72,19 @@ describe("defaultTheme", () => {
             color: $\{defaultTheme.orbit.paletteProductNormal};
           \`
         `,
-        errors: [ERRORS.styled],
+        errors: [
+          {
+            messageId: "styled",
+          },
+        ],
       },
       {
         code: `import theme from "@kiwicom/orbit-components/lib/defaultTheme";`,
-        errors: [ERRORS.import],
+        errors: [
+          {
+            messageId: "import",
+          },
+        ],
       },
       {
         code: `
@@ -86,7 +98,11 @@ describe("defaultTheme", () => {
             spaceMedium,
           } = defaultTheme.orbit;
         `,
-        errors: [ERRORS.destructured],
+        errors: [
+          {
+            messageId: "destructured",
+          },
+        ],
       },
     ],
   });

diff --git a/packages/eslint-plugin-orbit-components/src/__tests__/isUniqueId.test.ts b/packages/eslint-plugin-orbit-components/src/__tests__/isUniqueId.test.ts
@@ -24,8 +24,12 @@ describe("unique id", () => {
           </svg>
         )`,
         errors: [
-          `id="1", do not use literal value as ID, you should use randomID utility function`,
-          `id="2", do not use literal value as ID, you should use randomID utility function`,
+          {
+            messageId: "error",
+          },
+          {
+            messageId: "error",
+          },
         ],
       },
     ],

diff --git a/packages/eslint-plugin-orbit-components/src/__tests__/noCustomColors.test.ts b/packages/eslint-plugin-orbit-components/src/__tests__/noCustomColors.test.ts
@@ -2,7 +2,6 @@ import ruleTester from "../ruleTester";
 import noCustomColors from "../rules/noCustomColors";
 
 describe("no-custom-colors", () => {
-  // @ts-expect-error TODO
   ruleTester.run("no-custom-colors", noCustomColors, {
     valid: [
       {
@@ -22,10 +21,7 @@ describe("no-custom-colors", () => {
               background: #808080;
               \`
           `,
-        errors: [
-          "color should be replaced with Orbit design token",
-          "background should be replaced with Orbit design token",
-        ],
+        errors: [{ messageId: "replace" }, { messageId: "replace" }],
       },
     ],
   });