Improve linting

.eslintrc

@@ -0,0 +1,58 @@
+{
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "import",
+    "prettier",
+    "react",
+    "react-hooks"
+  ],
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react/prop-types": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "no-var": "error",
+    "no-console": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
+    "semi": ["error", "always"],
+    "prefer-const": "error",
+    "prefer-arrow-callback": "error",
+    "@typescript-eslint/array-type": ["error", { "default": "array-simple" }],
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/prefer-interface": "off",
+    "@typescript-eslint/ban-types": "off",
+    "eslint-comments/no-unlimited-disable": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          ["builtin", "external", "internal"],
+          ["parent", "sibling", "index"]
+        ]
+      }
+    ]
+  }
+}

package.json

@@ -20,7 +20,10 @@
   "scripts": {
     "build": "tsdx build --entry src/internals/index.js",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "lint": "eslint ./src --ext .js --config .eslintrc",
+    "lint:fix": "eslint ./src --ext .js --config .eslintrc --fix",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
+    "format:write": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "prepare": "yarn build",
     "release": "np",
     "size": "size-limit",
@@ -29,11 +32,24 @@
   "devDependencies": {
     "@babel/preset-react": "7.14.5",
     "@size-limit/preset-small-lib": "4.10.2",
-    "@types/react": "17.0.14",
     "@types/react-native": "0.64.12",
+    "@types/react": "17.0.14",
+    "@typescript-eslint/eslint-plugin": "4.6.1",
+    "@typescript-eslint/parser": "4.6.1",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-config-standard": "16.0.3",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-promise": "5.1.0",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react": "7.24.0",
+    "eslint-plugin-standard": "5.0.0",
+    "eslint": "7.31.0",
     "husky": "6.0.0",
-    "react": "16.13.1",
+    "prettier": "2.3.2",
     "react-native": "0.64.2",
+    "react": "16.13.1",
     "size-limit": "4.10.2",
     "tsdx": "0.14.1",
     "tslib": "2.2.0",
@@ -45,13 +61,14 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "yarn lint"
     }
   },
   "prettier": {
     "printWidth": 80,
     "semi": true,
     "singleQuote": true,
+    "tabWidth": 2,
     "trailingComma": "es5"
   },
   "np": {

src/index.ts

@@ -3,7 +3,7 @@ import type { CSSPropertiesToTokenScale } from './types/core';
 import type { ReactFactory, StyledInstance } from './types/styled';
 
 // NOTE: this index file is only used by the example Expo app in order to get typings working properly in the app
-export const createCss = (internals.createCss as unknown) as ReactFactory;
+export const createCss = internals.createCss as unknown as ReactFactory;
 export const styled = (internals.styled as unknown) as StyledInstance<{ initial: '' }, {}, {}, CSSPropertiesToTokenScale>; // prettier-ignore
-export const css = (internals.css as unknown) as any; // TODO: add type!
+export const css = internals.css as unknown as any; // TODO: add type!
 export default createCss;

src/types/core.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 // Based on Stitches TS typings
 // https://github.com/modulz/stitches/blob/canary/packages/react/types/core.d.ts
 

src/types/react-native.d.ts

@@ -191,8 +191,7 @@ type ReactNativeComponentProps<
   ? ReactNativeElements[T]
   : {};
 
-export type ReactNativeComponentPropsWithRef<
-  T extends ReactNativeElementType
-> = T extends React.ComponentClass<infer P>
-  ? React.PropsWithoutRef<P> & React.RefAttributes<InstanceType<T>>
-  : React.PropsWithRef<ReactNativeComponentProps<T>>;
+export type ReactNativeComponentPropsWithRef<T extends ReactNativeElementType> =
+  T extends React.ComponentClass<infer P>
+    ? React.PropsWithoutRef<P> & React.RefAttributes<InstanceType<T>>
+    : React.PropsWithRef<ReactNativeComponentProps<T>>;

src/types/styled.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 // Based on Stitches TS typings
 // https://github.com/modulz/stitches/blob/canary/packages/react/types/styled.d.ts