ESLint warnings.

Author: nosferatu500

.eslintrc.json

@@ -6,46 +6,90 @@
     "es2020": true
   },
   "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "airbnb/hooks",
+    // "plugin:@typescript-eslint/recommended",
+    // "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "prettier",
-    "plugin:prettier/recommended",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:array-func/all",
     "plugin:sonarjs/recommended",
+    "plugin:prettier/recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
     "plugin:react-hooks/recommended",
-    "plugin:promise/recommended"
+    "plugin:promise/recommended",
+    "plugin:unicorn/recommended"
   ],
   "plugins": [
     "@typescript-eslint",
     "react",
     "prettier",
     "import",
     "sonarjs",
-    "array-func",
-    "promise"
+    "promise",
+    "unicorn"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module",
+    "project": "./tsconfig.json",
     "ecmaFeatures": {
       "jsx": true
     }
   },
   "rules": {
+    "no-continue": "off",
+    "no-plusplus": "off",
+    "no-case-declarations": "off",
+    // Too restrictive, writing ugly code to defend against a very unlikely scenario: https://eslint.org/docs/rules/no-prototype-builtins
+    "no-prototype-builtins": "off",
+    // https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
+    "import/prefer-default-export": "off",
+    "import/no-default-export": "off",
+    // Too restrictive: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md
+    "react/destructuring-assignment": "off",
+    "react/require-default-props": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/no-unstable-nested-components": ["warn", { "allowAsProps": true }],
+    // No jsx extension: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904
+    "react/jsx-filename-extension": "off",
+    // Use function hoisting to improve code readability
+    "no-use-before-define": [
+      "error",
+      { "functions": false, "classes": true, "variables": true }
+    ],
+    "@typescript-eslint/no-unused-vars": "off",
+    // Allow most functions to rely on type inference. If the function is exported, then `@typescript-eslint/explicit-module-boundary-types` will ensure it's typed.
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-use-before-define": [
+      "error",
+      { "functions": false, "classes": true, "variables": true, "typedefs": true }
+    ],
+    // Common abbreviations are known and readable
+    "unicorn/prevent-abbreviations": "off",
+    "unicorn/filename-case": "off",
+    // Disable for simplify type checking for TS
+    "unicorn/no-useless-undefined": "off",
+    "unicorn/prefer-node-protocol": "off",
+    // Temporary turn it off.
+    "no-restricted-syntax": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "import/no-extraneous-dependencies": "off",
+    "require-atomic-updates": "warn",
     "curly": ["warn", "multi-line", "consistent"],
     "no-console": "off",
+    "import/named": "off",
+    "import/no-named-as-default": "off",
     "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
     "import/export": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
     "@typescript-eslint/no-duplicate-imports": ["error"],
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
-    ],
-    "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/no-explicit-any": "off",
@@ -75,6 +119,7 @@
     ],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
+    "react/no-arrow-function-lifecycle": "warn",
     "sort-imports": [
       "error",
       {
@@ -94,6 +139,10 @@
       "node": {
         "extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
         "paths": ["src"]
+      },
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
       }
     }
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nosferatu500/react-sortable-tree",
-  "version": "4.0.0-beta.12",
+  "version": "4.0.0",
   "description": "Drag-and-drop sortable component for nested data and hierarchies",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -23,7 +23,7 @@
     "build:storybook": "build-storybook -o build",
     "clean": "rimraf dist",
     "clean:storybook": "rimraf build",
-    "lint": "eslint --fix '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
+    "lint": "eslint '*.{js,json}' '{src,tests}/**/*.{ts,tsx}'",
     "prepublishOnly": "yarn build",
     "release": "standard-version",
     "storybook": "start-storybook -p ${PORT:-3001} -h 0.0.0.0",
@@ -68,11 +68,11 @@
     "lodash.isequal": "^4.5.0",
     "react-dnd": "^14.0.4",
     "react-dnd-html5-backend": "^14.0.2",
-    "react-virtuoso": "^2.2.6"
+    "react-virtuoso": "^2.2.7"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
     "@babel/helper-module-imports": "^7.16.0",
     "@babel/plugin-transform-react-jsx": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
@@ -88,20 +88,24 @@
     "@types/lodash.isequal": "^4.5.5",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
     "acorn-jsx": "^5.3.2",
     "babel-plugin-macros": "^3.1.0",
-    "esbuild": "^0.13.12",
+    "esbuild": "^0.13.13",
     "eslint": "^8.2.0",
+    "eslint-config-airbnb": "^19.0.0",
+    "eslint-config-airbnb-typescript": "^15.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-array-func": "^3.1.7",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^5.1.1",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-sonarjs": "^0.10.0",
+    "eslint-plugin-unicorn": "^38.0.1",
     "json": "^11.0.0",
     "postcss": "^8.3.11",
     "prettier": "^2.4.1",
@@ -110,7 +114,7 @@
     "react-dnd-touch-backend": "^14.1.1",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.59.0",
+    "rollup": "^2.60.0",
     "rollup-plugin-esbuild": "^4.6.0",
     "rollup-plugin-postcss": "^4.0.1",
     "shx": "^0.3.3",
@@ -126,7 +130,7 @@
     "production": [
       ">0.2%",
       "not dead",
-      "not ie",
+      "not ie <= 11",
       "not op_mini all"
     ],
     "development": [

src/index.ts

@@ -1,12 +1,8 @@
-import SortableTree, {
-  SortableTreeWithoutDndContext,
-} from './react-sortable-tree'
-
 export * from './utils/default-handlers'
 export * from './utils/tree-data-utils'
-export default SortableTree
 
 // Export the tree component without the react-dnd DragDropContext,
 // for when component is used with other components using react-dnd.
 // see: https://github.com/gaearon/react-dnd/issues/186
-export { SortableTreeWithoutDndContext }
+
+export { default, SortableTreeWithoutDndContext } from './react-sortable-tree'

src/node-renderer-default.tsx

@@ -30,7 +30,7 @@ export interface NodeRendererProps {
   isSearchFocus: boolean
   canDrag: boolean
   scaffoldBlockPxWidth: number
-  toggleChildrenVisibility?(data: NodeData): void | undefined | null
+  toggleChildrenVisibility?(data: NodeData): void | undefined
   buttons?: JSX.Element[] | undefined
   className?: string | undefined
   style?: React.CSSProperties | undefined
@@ -57,7 +57,7 @@ export interface NodeRendererProps {
   canDrop?: boolean | undefined
 }
 
-const NodeRendererDefault: React.FC<NodeRendererProps> = (props) => {
+const NodeRendererDefault: React.FC<NodeRendererProps> = function (props) {
   props = { ...defaultProps, ...props }
 
   const {
@@ -88,17 +88,15 @@ const NodeRendererDefault: React.FC<NodeRendererProps> = (props) => {
   } = props
   const nodeTitle = title || node.title
   const nodeSubtitle = subtitle || node.subtitle
-  const rowDirectionClass = rowDirection === 'rtl' ? 'rst__rtl' : null
+  const rowDirectionClass = rowDirection === 'rtl' ? 'rst__rtl' : undefined
 
   let handle
   if (canDrag) {
-    if (typeof node.children === 'function' && node.expanded) {
-      // Show a loading symbol on the handle when the children are expanded
-      //  and yet still defined by a function (a callback to fetch the children)
-      handle = (
+    handle =
+      typeof node.children === 'function' && node.expanded ? (
         <div className="rst__loadingHandle">
           <div className="rst__loadingCircle">
-            {Array.from(new Array(12), (_, index) => (
+            {[...Array.from({ length: 12 })].map((_, index) => (
               <div
                 // eslint-disable-next-line react/no-array-index-key
                 key={index}
@@ -110,13 +108,11 @@ const NodeRendererDefault: React.FC<NodeRendererProps> = (props) => {
             ))}
           </div>
         </div>
+      ) : (
+        connectDragSource(<div className="rst__moveHandle" />, {
+          dropEffect: 'copy',
+        })
       )
-    } else {
-      // Show the handle used to initiate a drag-and-drop
-      handle = connectDragSource(<div className="rst__moveHandle" />, {
-        dropEffect: 'copy',
-      })
-    }
   }
 
   const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node)

src/placeholder-renderer-default.tsx

@@ -14,21 +14,20 @@ const defaultProps = {
   canDrop: false,
 }
 
-const PlaceholderRendererDefault: React.FC<PlaceholderRendererProps> = (
-  props
-) => {
-  props = { ...defaultProps, ...props }
-  const { canDrop, isOver } = props
+const PlaceholderRendererDefault: React.FC<PlaceholderRendererProps> =
+  function (props) {
+    props = { ...defaultProps, ...props }
+    const { canDrop, isOver } = props
 
-  return (
-    <div
-      className={classnames(
-        'rst__placeholder',
-        canDrop ? 'rst__placeholderLandingPad' : '',
-        canDrop && !isOver ? 'rst__placeholderCancelPad' : ''
-      )}
-    />
-  )
-}
+    return (
+      <div
+        className={classnames(
+          'rst__placeholder',
+          canDrop ? 'rst__placeholderLandingPad' : '',
+          canDrop && !isOver ? 'rst__placeholderCancelPad' : ''
+        )}
+      />
+    )
+  }
 
 export default PlaceholderRendererDefault