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

…iles using new config
wojtekmaj · Jan 29, 2022 · dfcdb42 · dfcdb42
1 parent d4cabd5
commit dfcdb42
Show file tree

Hide file tree

Showing 32 changed files with 1,006 additions and 1,311 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,3 @@
 {
-  "presets": [
-    "@babel/env",
-    "@babel/react"
-  ]
+  "presets": ["@babel/env", "@babel/react"]
 }
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,12 +1,8 @@
 {
-  "extends": "wojtekmaj/react",
-  "parser": "babel-eslint",
+  "extends": "wojtekmaj/react-no-automatic-runtime",
   "overrides": [
     {
-      "files": [
-        "sample/**",
-        "test/**"
-      ],
+      "files": ["sample/**", "test/**"],
       "rules": {
         "import/no-unresolved": "off"
       }

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pretty-quick --staged
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+.cache
+.yarn
+coverage
+dist
+*.yml
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/.vscode/extensions.json b/.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"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,6 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
   "search.exclude": {
     "**/.yarn": true
   }

diff --git a/README.md b/README.md
diff --git a/jest.config.json b/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"
 }
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "copy-styles": "node ./copy-styles.js",
     "jest": "jest",
     "lint": "eslint sample/ src/ test/ --ext .jsx,.js",
+    "postinstall": "husky install",
     "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn jest"
   },
@@ -43,12 +44,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"

diff --git a/sample/.babelrc b/sample/.babelrc
@@ -1,8 +1,11 @@
 {
   "presets": [
-    ["@babel/preset-env", {
-      "modules": false
-    }],
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
     "@babel/react"
   ]
 }
diff --git a/sample/Sample.less b/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;
     }
   }
-}
+}
diff --git a/sample/index.html b/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-daterange-picker sample page</title>
   </head>
   <body>

diff --git a/sample/webpack.config.js b/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'],
       },
     ],
   },

diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx
@@ -56,9 +56,8 @@ export default class DateRangePicker extends PureComponent {
     if (this.wrapper && !this.wrapper.contains(target)) {
       this.closeCalendar();
     }
-  }
+  };
 
-  // eslint-disable-next-line react/destructuring-assignment
   onChange = (value, closeCalendar = this.props.closeCalendar) => {
     const { onChange } = this.props;
 
@@ -69,19 +68,19 @@ export default class DateRangePicker extends PureComponent {
     if (onChange) {
       onChange(value);
     }
-  }
+  };
 
   onChangeFrom = (valueFrom, closeCalendar) => {
     const { value } = this.props;
     const [, valueTo] = [].concat(value);
     this.onChange([valueFrom, valueTo], closeCalendar);
-  }
+  };
 
   onChangeTo = (valueTo, closeCalendar) => {
     const { value } = this.props;
     const [valueFrom] = [].concat(value);
     this.onChange([valueFrom, valueTo], closeCalendar);
-  }
+  };
 
   onFocus = (event) => {
     const { disabled, onFocus, openCalendarOnFocus } = this.props;
@@ -102,17 +101,17 @@ export default class DateRangePicker extends PureComponent {
 
       this.openCalendar();
     }
-  }
+  };
 
   onKeyDown = (event) => {
     if (event.key === 'Escape') {
       this.closeCalendar();
     }
-  }
+  };
 
   openCalendar = () => {
     this.setState({ isOpen: true });
-  }
+  };
 
   closeCalendar = () => {
     this.setState((prevState) => {
@@ -122,11 +121,11 @@ export default class DateRangePicker extends PureComponent {
 
       return { isOpen: false };
     });
-  }
+  };
 
   toggleCalendar = () => {
     this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
-  }
+  };
 
   stopPropagation = (event) => event.stopPropagation();
 
@@ -204,15 +203,14 @@ export default class DateRangePicker extends PureComponent {
       <div className={`${baseClassName}__wrapper`}>
         <DateInput
           {...commonProps}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus={autoFocus}
           name={`${name}_from`}
           onChange={this.onChangeFrom}
           returnValue="start"
           value={valueFrom}
         />
-        <span className={`${baseClassName}__range-divider`}>
-          {rangeDivider}
-        </span>
+        <span className={`${baseClassName}__range-divider`}>{rangeDivider}</span>
         <DateInput
           {...commonProps}
           name={`${name}_to`}
@@ -361,23 +359,14 @@ DateRangePicker.defaultProps = {
   rangeDivider: '–',
 };
 
-const isValue = PropTypes.oneOfType([
-  PropTypes.string,
-  PropTypes.instanceOf(Date),
-]);
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);
 
 DateRangePicker.propTypes = {
   autoFocus: PropTypes.bool,
   calendarAriaLabel: PropTypes.string,
-  calendarClassName: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
+  calendarClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   calendarIcon: PropTypes.node,
-  className: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   clearAriaLabel: PropTypes.string,
   clearIcon: PropTypes.node,
   closeCalendar: PropTypes.bool,
@@ -404,10 +393,7 @@ DateRangePicker.propTypes = {
   required: PropTypes.bool,
   returnValue: PropTypes.oneOf(['start', 'end', 'range']),
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    isValue,
-    PropTypes.arrayOf(isValue),
-  ]),
+  value: PropTypes.oneOfType([isValue, PropTypes.arrayOf(isValue)]),
   yearAriaLabel: PropTypes.string,
   yearPlaceholder: PropTypes.string,
 };
diff --git a/src/DateRangePicker.less b/src/DateRangePicker.less
@@ -2,7 +2,10 @@
   display: inline-flex;
   position: relative;
 
-  &, & *, & *:before, & *:after {
+  &,
+  & *,
+  & *:before,
+  & *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -22,10 +25,10 @@
   }
 
   &__inputGroup {
-    @digit-width: .54em;
-    @dot-width: .217em;
+    @digit-width: 0.54em;
+    @dot-width: 0.217em;
     // own padding + inputs padding + digits width + dots width
-    min-width: calc(~"(4px * 3) + " @digit-width * 8 ~" + " @dot-width * 2);
+    min-width: calc(~'(4px * 3) + ' @digit-width * 8 ~' + ' @dot-width * 2);
     height: 100%;
     flex-grow: 1;
     padding: 0 2px;
@@ -59,7 +62,7 @@
 
       &--hasLeadingZero {
         margin-left: -@digit-width;
-        padding-left: calc(~"1px + " @digit-width);
+        padding-left: calc(~'1px + ' @digit-width);
       }
     }
   }
@@ -72,7 +75,8 @@
     &:enabled {
       cursor: pointer;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         .react-daterange-picker__button__icon {
           stroke: rgb(0, 120, 215);
         }