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

…iles using new config
wojtekmaj · Jan 29, 2022 · 97d9d1b · 97d9d1b
1 parent 53a0cbd
commit 97d9d1b
Show file tree

Hide file tree

Showing 30 changed files with 870 additions and 1,161 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"
   },
@@ -49,12 +50,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.jsx b/sample/Sample.jsx
@@ -17,10 +17,7 @@ export default function Sample() {
       </header>
       <div className="Sample__container">
         <main className="Sample__container__content">
-          <DateTimeRangePicker
-            onChange={onChange}
-            value={value}
-          />
+          <DateTimeRangePicker onChange={onChange} value={value} />
         </main>
       </div>
     </div>

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-datetimerange-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/DateTimeRangePicker.jsx b/src/DateTimeRangePicker.jsx
@@ -39,12 +39,7 @@ export default class DateTimeRangePicker extends PureComponent {
 
   componentDidUpdate(prevProps, prevState) {
     const { isCalendarOpen, isClockOpen } = this.state;
-    const {
-      onCalendarClose,
-      onCalendarOpen,
-      onClockClose,
-      onClockOpen,
-    } = this.props;
+    const { onCalendarClose, onCalendarOpen, onClockClose, onClockOpen } = this.props;
 
     const isWidgetOpen = isCalendarOpen || isClockOpen;
     const prevIsWidgetOpen = prevState.isCalendarOpen || prevState.isClockOpen;
@@ -78,7 +73,7 @@ export default class DateTimeRangePicker extends PureComponent {
     if (this.wrapper && !this.wrapper.contains(target)) {
       this.closeWidgets();
     }
-  }
+  };
 
   onDateChange = ([valueFrom, valueTo], closeWidgets = true) => {
     const { value } = this.props;
@@ -117,7 +112,7 @@ export default class DateTimeRangePicker extends PureComponent {
     })();
 
     this.onChange([nextValueFrom, nextValueTo], closeWidgets);
-  }
+  };
 
   // eslint-disable-next-line react/destructuring-assignment
   onChange = (value, closeWidgets = this.props.closeWidgets) => {
@@ -130,26 +125,22 @@ export default class DateTimeRangePicker extends PureComponent {
     if (onChange) {
       onChange(value);
     }
-  }
+  };
 
   onChangeFrom = (valueFrom, closeWidgets) => {
     const { value } = this.props;
     const [, valueTo] = [].concat(value);
     this.onChange([valueFrom, valueTo], closeWidgets);
-  }
+  };
 
   onChangeTo = (valueTo, closeWidgets) => {
     const { value } = this.props;
     const [valueFrom] = [].concat(value);
     this.onChange([valueFrom, valueTo], closeWidgets);
-  }
+  };
 
   onFocus = (event) => {
-    const {
-      disabled,
-      onFocus,
-      openWidgetsOnFocus,
-    } = this.props;
+    const { disabled, onFocus, openWidgetsOnFocus } = this.props;
 
     if (onFocus) {
       onFocus(event);
@@ -180,34 +171,34 @@ export default class DateTimeRangePicker extends PureComponent {
         default:
       }
     }
-  }
+  };
 
   onKeyDown = (event) => {
     if (event.key === 'Escape') {
       this.closeWidgets();
     }
-  }
+  };
 
   openClock = () => {
     this.setState({
       isCalendarOpen: false,
       isClockOpen: true,
     });
-  }
+  };
 
   openCalendar = () => {
     this.setState({
       isCalendarOpen: true,
       isClockOpen: false,
     });
-  }
+  };
 
   toggleCalendar = () => {
     this.setState((prevState) => ({
       isCalendarOpen: !prevState.isCalendarOpen,
       isClockOpen: false,
     }));
-  }
+  };
 
   closeWidgets = () => {
     this.setState((prevState) => {
@@ -220,7 +211,7 @@ export default class DateTimeRangePicker extends PureComponent {
         isClockOpen: false,
       };
     });
-  }
+  };
 
   stopPropagation = (event) => event.stopPropagation();
 
@@ -230,7 +221,8 @@ export default class DateTimeRangePicker extends PureComponent {
     const { isCalendarOpen, isClockOpen } = this.state;
     const isWidgetOpen = isCalendarOpen || isClockOpen;
 
-    const shouldListenWithFallback = typeof shouldListen !== 'undefined' ? shouldListen : isWidgetOpen;
+    const shouldListenWithFallback =
+      typeof shouldListen !== 'undefined' ? shouldListen : isWidgetOpen;
     const fnName = shouldListenWithFallback ? 'addEventListener' : 'removeEventListener';
     outsideActionEvents.forEach((eventName) => document[fnName](eventName, this.onOutsideAction));
     document[fnName]('keydown', this.onKeyDown);
@@ -314,15 +306,14 @@ export default class DateTimeRangePicker extends PureComponent {
       <div className={`${baseClassName}__wrapper`}>
         <DateTimeInput
           {...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>
         <DateTimeInput
           {...commonProps}
           name={`${name}_to`}
@@ -386,7 +377,10 @@ export default class DateTimeRangePicker extends PureComponent {
               ref.removeAttribute('style');
             }
           }}
-          className={mergeClassNames(className, `${className}--${isCalendarOpen ? 'open' : 'closed'}`)}
+          className={mergeClassNames(
+            className,
+            `${className}--${isCalendarOpen ? 'open' : 'closed'}`,
+          )}
         >
           <Calendar
             className={calendarClassName}
@@ -519,30 +513,18 @@ DateTimeRangePicker.defaultProps = {
   rangeDivider: '–',
 };
 
-const isValue = PropTypes.oneOfType([
-  PropTypes.string,
-  PropTypes.instanceOf(Date),
-]);
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);
 
 DateTimeRangePicker.propTypes = {
   amPmAriaLabel: PropTypes.string,
   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,
-  clockClassName: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
+  clockClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   closeWidgets: PropTypes.bool,
   dayAriaLabel: PropTypes.string,
   dayPlaceholder: PropTypes.string,
@@ -576,10 +558,7 @@ DateTimeRangePicker.propTypes = {
   secondAriaLabel: PropTypes.string,
   secondPlaceholder: PropTypes.string,
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    isValue,
-    PropTypes.arrayOf(isValue),
-  ]),
+  value: PropTypes.oneOfType([isValue, PropTypes.arrayOf(isValue)]),
   yearAriaLabel: PropTypes.string,
   yearPlaceholder: PropTypes.string,
 };