Update ESLint, update ESLint config, configure Prettier, format all f…

…iles using new config

.babelrc

@@ -1,6 +1,3 @@
 {
-  "presets": [
-    "@babel/env",
-    "@babel/react"
-  ]
+  "presets": ["@babel/env", "@babel/react"]
 }

.eslintrc.json

@@ -1,15 +1,8 @@
 {
-  "extends": "wojtekmaj/react",
-  "parser": "babel-eslint",
-  "rules": {
-    "no-restricted-globals": "off"
-  },
+  "extends": "wojtekmaj/react-no-automatic-runtime",
   "overrides": [
     {
-      "files": [
-        "sample/**",
-        "test/**"
-      ],
+      "files": ["sample/**", "test/**"],
       "rules": {
         "import/no-unresolved": "off"
       }

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pretty-quick --staged

.prettierignore

@@ -0,0 +1,5 @@
+.cache
+.yarn
+coverage
+dist
+*.yml

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.vscode/extensions.json

@@ -1,9 +1,4 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "eamodio.gitlens"
-  ],
-  "unwantedRecommendations": [
-    "dbaeumer.jshint"
-  ]
+  "recommendations": ["dbaeumer.vscode-eslint", "eamodio.gitlens", "esbenp.prettier-vscode"],
+  "unwantedRecommendations": ["dbaeumer.jshint"]
 }

.vscode/settings.json

@@ -1,4 +1,6 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
   "search.exclude": {
     "**/.yarn": true
   }

entry.nostyle.d.ts

@@ -1,4 +1,4 @@
-declare module "react-date-picker/dist/entry.nostyle" {
-    import * as picker from "react-date-picker";
-    export = picker;
+declare module 'react-date-picker/dist/entry.nostyle' {
+  import * as picker from 'react-date-picker';
+  export = picker;
 }

index.d.ts

@@ -1,6 +1,6 @@
-import { CalendarProps } from "react-calendar";
+import { CalendarProps } from 'react-calendar';
 
-declare module "react-date-picker" {
+declare module 'react-date-picker' {
   export default function DatePicker(props: DatePickerProps): JSX.Element;
 
   export interface DatePickerProps extends CalendarProps {
@@ -27,7 +27,7 @@ declare module "react-date-picker" {
     openCalendarOnFocus?: boolean;
     required?: boolean;
     showLeadingZeros?: boolean;
-    yearAriaLabel?: string
+    yearAriaLabel?: string;
     yearPlaceholder?: string;
   }
 }

jest.config.json

@@ -1,11 +1,5 @@
 {
-  "collectCoverageFrom": [
-    "**/src/**.{js,jsx}",
-    "!**/src/entry.js",
-    "!**/src/entry.nostyle.js"
-  ],
-  "setupFiles": [
-    "<rootDir>/jest.setup.js"
-  ],
+  "collectCoverageFrom": ["**/src/**.{js,jsx}", "!**/src/entry.js", "!**/src/entry.nostyle.js"],
+  "setupFiles": ["<rootDir>/jest.setup.js"],
   "testEnvironment": "jsdom"
 }

package.json

@@ -14,6 +14,7 @@
     "copy-types": "node ./copy-types.js",
     "jest": "jest",
     "lint": "eslint sample/ src/ test/ --ext .jsx,.js",
+    "postinstall": "husky install",
     "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn jest"
   },
@@ -79,12 +80,14 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
-    "babel-eslint": "^10.0.0",
     "enzyme": "^3.10.0",
-    "eslint": "~7.19.0",
-    "eslint-config-wojtekmaj": "^0.5.0",
+    "eslint": "^8.5.0",
+    "eslint-config-wojtekmaj": "^0.6.5",
+    "husky": "^7.0.0",
     "jest": "^27.0.0",
     "less": "^4.0.0",
+    "prettier": "^2.5.0",
+    "pretty-quick": "^3.1.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "rimraf": "^3.0.0"

sample/.babelrc

@@ -1,8 +1,11 @@
 {
   "presets": [
-    ["@babel/preset-env", {
-      "modules": false
-    }],
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
     "@babel/react"
   ]
 }

sample/Sample.less

@@ -1,6 +1,6 @@
 html,
 body {
-    height: 100%;
+  height: 100%;
 }
 
 body {
@@ -9,13 +9,14 @@ body {
 }
 
 .Sample {
-  input, button {
+  input,
+  button {
     font: inherit;
   }
 
   header {
     background-color: rgb(50, 54, 57);
-    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
     padding: 20px;
     color: white;
 
@@ -48,4 +49,4 @@ body {
       align-items: stretch;
     }
   }
-}
+}

sample/index.html

@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>react-date-picker sample page</title>
   </head>
   <body>

sample/webpack.config.js

@@ -21,24 +21,15 @@ module.exports = {
     rules: [
       {
         test: /\.jsx?$/,
-        use: [
-          'babel-loader',
-        ],
+        use: ['babel-loader'],
       },
       {
         test: /\.less$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'less-loader',
-        ],
+        use: ['style-loader', 'css-loader', 'less-loader'],
       },
       {
         test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader',
-        ],
+        use: ['style-loader', 'css-loader'],
       },
     ],
   },