feat: conform new linting configuration (#1296)

Author: xobotyi

.eslintignore

@@ -0,0 +1,9 @@
+.idea
+node_modules
+esm
+cjs
+coverage
+storybook-build
+CHANGELOG.md
+!.eslintrc.js
+!.prettierrc.js

.eslintrc.js

@@ -1,58 +1,65 @@
 module.exports = {
   root: true,
 
-  ignorePatterns: [
-    'node_modules',
-    'coverage',
-    'storybook-build',
-    'dist',
-    '.github/workflows',
-    '.husky',
-    'CHANGELOG.md',
-  ],
-
   parserOptions: {
     project: './tsconfig.eslint.json',
-    tsconfigRootDir: __dirname,
-    extraFileExtensions: ['.md'],
+    extraFileExtensions: ['.md', '.mdx'],
   },
 
   overrides: [
     {
-      files: ['*.js', '*.ts', '*.jsx', '*.tsx'],
-      extends: ['@react-hookz/eslint-config/react'],
-      rules: {
-        'react/button-has-type': 'off',
-        'unicorn/prefer-node-protocol': 'off',
-        'unicorn/prefer-top-level-await': 'off',
-      },
+      files: ['*.js'],
+      extends: ['@react-hookz/eslint-config/base.cjs'],
     },
     {
-      files: [
-        '**/__tests__/**/*.js',
-        '**/__tests__/**/*.ts',
-        '**/__tests__/**/*.jsx',
-        '**/__tests__/**/*.tsx',
+      files: ['*.jsx'],
+      extends: ['@react-hookz/eslint-config/base.cjs', '@react-hookz/eslint-config/react.cjs'],
+    },
+    {
+      files: ['*.ts'],
+      extends: ['@react-hookz/eslint-config/typescript.cjs'],
+    },
+    {
+      files: ['*.tsx'],
+      extends: [
+        '@react-hookz/eslint-config/typescript.cjs',
+        '@react-hookz/eslint-config/react.cjs',
       ],
-      extends: ['@react-hookz/eslint-config/react', '@react-hookz/eslint-config/jest'],
     },
     {
-      files: ['**/__docs__/**', '**/__tests__/**'],
-      rules: {
-        '@typescript-eslint/no-floating-promises': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/no-unsafe-assignment': 'off',
-        '@typescript-eslint/no-unsafe-member-access': 'off',
-        '@typescript-eslint/no-unsafe-call': 'off',
-        '@typescript-eslint/no-unsafe-argument': 'off',
-        '@typescript-eslint/no-unsafe-return': 'off',
-        'unicorn/consistent-function-scoping': 'off',
-        'unicorn/no-this-assignment': 'off',
-      },
+      files: ['**/__tests__/**/*.js'],
+      extends: ['@react-hookz/eslint-config/base.cjs', '@react-hookz/eslint-config/jest.cjs'],
+    },
+    {
+      files: ['**/__tests__/**/*.jsx'],
+      extends: [
+        '@react-hookz/eslint-config/base.cjs',
+        '@react-hookz/eslint-config/react.cjs',
+        '@react-hookz/eslint-config/jest.cjs',
+      ],
+    },
+    {
+      files: ['**/__tests__/**/*.ts'],
+      extends: [
+        '@react-hookz/eslint-config/typescript-unsafe.cjs',
+        '@react-hookz/eslint-config/jest.cjs',
+      ],
+    },
+    {
+      files: ['**/__tests__/**/*.tsx'],
+      extends: [
+        '@react-hookz/eslint-config/typescript-unsafe.cjs',
+        '@react-hookz/eslint-config/react.cjs',
+        '@react-hookz/eslint-config/jest.cjs',
+      ],
     },
     {
       files: ['*.md'],
-      extends: ['@react-hookz/eslint-config/mdx'],
+      extends: ['@react-hookz/eslint-config/md.cjs'],
+    },
+    {
+      files: ['*.mdx'],
+      extends: ['@react-hookz/eslint-config/mdx.cjs'],
     },
   ],
 };

.prettierrc.js

@@ -1,3 +1,3 @@
-const config = require("@react-hookz/eslint-config/.prettierrc.js");
+const config = require('@react-hookz/eslint-config/.prettierrc.cjs');
 
 module.exports = config;

.storybook/main.js

@@ -17,10 +17,9 @@ module.exports = {
     fastRefresh: true,
   },
   staticDirs: ['./public'],
-  managerWebpack: (config, options) => {
-    // ToDo: maybe enable cache mack when storybook is fixed
-    options.cache.set = () => Promise.resolve(); // eslint-disable-line @typescript-eslint/no-unsafe-member-access
+  managerWebpack(config, options) {
+    options.cache.set = () => Promise.resolve();
 
-    return config; // eslint-disable-line @typescript-eslint/no-unsafe-return
+    return config;
   },
 };

jest.config.ts

@@ -21,7 +21,7 @@ const cfg: Config = {
       testMatch: ['<rootDir>/src/**/__tests__/ssr.[jt]s?(x)'],
     },
 
-    // needed for output bundle testing
+    // Needed for output bundle testing
     {
       displayName: 'dom-package',
       transformIgnorePatterns: [],
@@ -41,5 +41,4 @@ const cfg: Config = {
   collectCoverageFrom: ['./src/**/*.{ts,js,tsx,jsx}', '!**/__tests__/**', '!**/__docs__/**'],
 };
 
-// eslint-disable-next-line import/no-default-export
 export default cfg;

package.json

@@ -38,7 +38,7 @@
     "new-hook": "node ./utility/add-new-hook.js",
     "test": "jest --selectProjects dom ssr",
     "test:coverage": "yarn test --coverage",
-    "lint": "eslint ./ ./.storybook --ext ts,js,tsx,jsx,md",
+    "lint": "eslint ./ ./.storybook --ext ts,js,tsx,jsx,md,mdx",
     "lint:fix": "yarn lint --fix",
     "storybook:watch": "start-storybook -p 6006 --docs --no-manager-cache",
     "storybook:build": "build-storybook --docs -o ./storybook-build",
@@ -77,15 +77,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
-    "@commitlint/cli": "^17.6.0",
+    "@commitlint/cli": "^17.6.6",
     "@commitlint/config-conventional": "^17.6.6",
     "@commitlint/cz-commitlint": "^17.5.0",
     "@jamesacarr/jest-reporter-github-actions": "^0.0.4",
-    "@react-hookz/eslint-config": "^1.7.6",
+    "@react-hookz/eslint-config": "^2.0.0",
     "@react-hookz/eslint-formatter-gha": "^1.0.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^8.1.0",
+    "@semantic-release/github": "^9.0.3",
     "@storybook/addon-docs": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
@@ -101,8 +101,8 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.2",
     "@types/js-cookie": "^3.0.3",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "babel-loader": "^9.1.2",
     "commitizen": "^4.3.0",
     "commitlint": "^17.6.6",

src/__docs__/ImportPath.tsx

@@ -1,27 +1,27 @@
 import { DocsContext, Source } from '@storybook/addon-docs';
-import React, { FC, useContext } from 'react';
+import React, { type FC, useContext } from 'react';
 
-export interface ImportPathProps {
-  root?: boolean;
-  direct?: boolean;
-}
+export type ImportPathProps = {
+  isRoot?: boolean;
+  isDirect?: boolean;
+};
 
-export const ImportPath: FC<ImportPathProps> = ({ root = true, direct = true }) => {
+export function ImportPath({ isRoot = true, isDirect = true }: ImportPathProps) {
   const context = useContext(DocsContext);
-  // eslint-disable-next-line react/destructuring-assignment
+
   const componentName = context.title?.split('/')[1] || 'UnknownComponent';
 
   const imports: string[] = [];
 
-  if (root) {
+  if (isRoot) {
     imports.push(`// root import\nimport { ${componentName} } from '@react-hookz/web';`);
   }
 
-  if (direct) {
+  if (isDirect) {
     imports.push(
       `// direct import\nimport { ${componentName} } from '@react-hookz/web/esm/${componentName}';`
     );
   }
 
   return <Source language="js" code={imports.join('\n')} />;
-};
+}

src/__docs__/Introduction.story.mdx

@@ -1,4 +1,4 @@
-import {Meta} from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Home" />
 
@@ -42,7 +42,7 @@ transpile your `node-modules` in order to run in IE.
 ## Usage
 
 > This package distributed with ESNext language level and both, CJS and ES imports.  
-> It means that depending on your browser target  you might need to transpile it. Every major
+> It means that depending on your browser target you might need to transpile it. Every major
 > bundler provides a way to transpile `node_modules` fully or partially.
 > Address your bundler documentation for more details.
 
@@ -62,7 +62,7 @@ In case, for some reason, you are not able to use ES imports - you should direct
 
 ## Migrating from react-use
 
-`@react-hookz/web` was built as a [spiritual successor](https://github.com/streamich/react-use/issues/1974) 
+`@react-hookz/web` was built as a [spiritual successor](https://github.com/streamich/react-use/issues/1974)
 of `react-use` by one of its former maintainers.
 
 Coming from `react-use`? Check out our

src/__tests__/navigator.vibrate.ts

@@ -1,3 +1,3 @@
-export const NavigatorVibrateSetup = () => {
+export const setupNavigatorVibrate = () => {
   navigator.vibrate = (() => true) as typeof navigator.vibrate;
 };

src/__tests__/setup.ts

@@ -2,6 +2,6 @@
  * Here goes any setup code that should be performed before actual tests and/or code imports.
  */
 
-import { NavigatorVibrateSetup } from './navigator.vibrate';
+import { setupNavigatorVibrate } from './navigator.vibrate';
 
-NavigatorVibrateSetup();
+setupNavigatorVibrate();

src/index.ts

@@ -70,9 +70,9 @@ export * from './useClickOutside';
 export * from './useEventListener';
 export * from './useWindowSize';
 
-// utils
+// Utils
 export { isStrictEqual, truthyAndArrayPredicate, truthyOrArrayPredicate } from './util/const';
-export { EffectCallback, EffectHook } from './util/misc';
+export type { EffectCallback, EffectHook } from './util/misc';
 export { resolveHookState } from './util/resolveHookState';
 
 // Types

src/types.ts

@@ -1,15 +1,13 @@
-import { DependencyList } from 'react';
+import { type DependencyList } from 'react';
 
 export type DependenciesComparator<Deps extends DependencyList = DependencyList> = (
   a: Deps,
   b: Deps
 ) => boolean;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Predicate = (prev: any, next: any) => boolean;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type ConditionsList = ReadonlyArray<any>;
+export type ConditionsList = readonly any[];
 
 export type ConditionsPredicate<Cond extends ConditionsList = ConditionsList> = (
   conditions: Cond

src/useAsync/__docs__/example.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useAsync, useMountEffect } from '../..';
 
-export const Example: React.FC = () => {
+export function Example() {
   const [state, actions] = useAsync(
     () =>
       new Promise<string>((resolve) => {
@@ -25,6 +25,7 @@ export const Example: React.FC = () => {
       <br />
       <div>
         <button
+          type="button"
           onClick={() => {
             actions.reset();
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -33,6 +34,7 @@ export const Example: React.FC = () => {
           reset
         </button>{' '}
         <button
+          type="button"
           onClick={() => {
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             actions.execute();
@@ -42,4 +44,4 @@ export const Example: React.FC = () => {
       </div>
     </div>
   );
-};
+}

src/useAsync/__docs__/story.mdx

@@ -1,6 +1,6 @@
-import {Canvas, Meta, Story} from '@storybook/addon-docs';
-import {Example} from './example.stories';
-import {ImportPath} from '../../__docs__/ImportPath';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Example } from './example.stories';
+import { ImportPath } from '../../__docs__/ImportPath';
 
 <Meta title="Side-effect/useAsync" component={Example} />
 
@@ -52,7 +52,7 @@ export function useAsync<Result, Args extends unknown[] = unknown[]>(
    - **reset** _`() => void`_- Reset state to initial.
    - **execute** _`(...args: Args) => Promise<Result>`_- Execute the async function manually.
 
-2. **meta**
+3. **meta**
 
    - **promise** _`Promise<Result> | undefined`_- Latest promise returned from the async function.
    - **lastArgs** _`Args | undefined`_ - List of arguments applied to the latest async function

src/useAsync/__tests__/dom.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/require-await */
 import { act, renderHook } from '@testing-library/react-hooks/dom';
 import { useAsync } from '../..';
 
@@ -56,7 +55,7 @@ describe('useAsync', () => {
 
   it('should have `not-executed` status initially', async () => {
     await act(async () => {
-      const [spy, resolve] = getControllableAsync<undefined | null, []>();
+      const [spy, resolve] = getControllableAsync<void, []>();
       const { result } = renderHook(() => useAsync(spy));
 
       expect(result.current[0]).toStrictEqual({
@@ -66,13 +65,13 @@ describe('useAsync', () => {
       });
 
       if (resolve.current) {
-        resolve.current(null);
+        resolve.current();
       }
     });
   });
 
   it('should have `loading` status while promise invoked but not resolved', async () => {
-    const [spy, resolve] = getControllableAsync<undefined | null, []>();
+    const [spy, resolve] = getControllableAsync<void, []>();
     const { result } = renderHook(() => useAsync(spy));
 
     expect(result.current[0]).toStrictEqual({
@@ -94,7 +93,7 @@ describe('useAsync', () => {
 
     await act(async () => {
       if (resolve.current) {
-        resolve.current(null);
+        resolve.current();
       }
     });
   });