chore: use prettier for the code formatter (#737)

* chore: use prettier for the code formatter

* chore: respect current code-format preferences

* chore: remove an unused prettirerc

Author: koba04

.babelrc.js

@@ -8,4 +8,4 @@ module.exports = {
       presets: [['babel-preset-jason', { modules: false }]],
     },
   },
-}
+};

.eslintrc.yml

@@ -2,6 +2,7 @@ parser: babel-eslint
 extends:
   - jason/react
   - plugin:jsx-a11y/recommended
+  - prettier
 settings:
   react:
     version: detect

.github/ISSUE_TEMPLATE/bug-report.md

@@ -8,6 +8,7 @@ about: Something isn't working as expected.
 <!-- ... -->
 
 > What is the expected behavior?
+
 <!-- If your use case is complicated, please be as descriptive as possible. -->
 
 <!-- ... -->

.prettierignore

@@ -0,0 +1,5 @@
+**/node_modules
+www/.cache/
+www/public/
+lib
+*.md

.storybook/config.js

@@ -1,9 +1,7 @@
 import { configure, addDecorator } from '@storybook/react';
 import React from 'react';
 
-addDecorator(
-  storyFn => <React.StrictMode>{storyFn()}</React.StrictMode>,
-)
+addDecorator((storyFn) => <React.StrictMode>{storyFn()}</React.StrictMode>);
 
 function loadStories() {
   require('../stories');

.storybook/main.js

@@ -3,16 +3,10 @@ const { plugins, rules } = require('webpack-atoms');
 module.exports = {
   webpackFinal: (config) => {
     config.module = {
-      rules: [
-        rules.js(),
-        rules.astroturf(),
-        rules.css({ extract: false }),
-      ],
+      rules: [rules.js(), rules.astroturf(), rules.css({ extract: false })],
     };
 
-    config.plugins.push(
-      plugins.extractCss({ disable: true })
-    )
+    config.plugins.push(plugins.extractCss({ disable: true }));
 
     return config;
   },

.travis.yml

@@ -1,7 +1,7 @@
 sudo: false
 language: node_js
 node_js:
-  - "12.19"
+  - '12.19'
 env:
   - REACT_DIST=16
   - REACT_DIST=17

package.json

@@ -15,7 +15,12 @@
     "build:pick": "cherry-pick --cwd=lib --input-dir=../src --cjs-dir=cjs --esm-dir=esm",
     "build:dist": "cross-env BABEL_ENV=esm rollup -c",
     "bootstrap": "yarn && yarn --cwd www",
-    "lint": "eslint .",
+    "fix": "run-s fix:eslint fix:prettier",
+    "fix:eslint": "yarn lint:eslint --fix",
+    "fix:prettier": "yarn lint:prettier --write",
+    "lint": "run-p lint:*",
+    "lint:eslint": "eslint .",
+    "lint:prettier": "prettier . --check",
     "release": "release",
     "release:next": "release --preid beta --tag next",
     "deploy-docs": "yarn --cwd www run deploy",
@@ -91,7 +96,8 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
     "jest": "^25.3.0",
-    "prettier": "^2.0.4",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "release-script": "^1.0.2",

prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  singleQuote: true,
+};

rollup.config.js

@@ -9,19 +9,19 @@ const input = './src/index.js';
 const name = 'ReactTransitionGroup';
 const globals = {
   react: 'React',
-  'react-dom': 'ReactDOM'
+  'react-dom': 'ReactDOM',
 };
 
 const babelOptions = {
   exclude: /node_modules/,
-  runtimeHelpers: true
-}
+  runtimeHelpers: true,
+};
 
 const commonjsOptions = {
   include: /node_modules/,
   namedExports: {
-    'prop-types': ['object', 'oneOfType', 'element', 'bool', 'func']
-  }
+    'prop-types': ['object', 'oneOfType', 'element', 'bool', 'func'],
+  },
 };
 
 export default [
@@ -31,16 +31,16 @@ export default [
       file: './lib/dist/react-transition-group.js',
       format: 'umd',
       name,
-      globals
+      globals,
     },
     external: Object.keys(globals),
     plugins: [
       nodeResolve(),
       babel(babelOptions),
       commonjs(commonjsOptions),
       replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
-      sizeSnapshot()
-    ]
+      sizeSnapshot(),
+    ],
   },
 
   {
@@ -49,7 +49,7 @@ export default [
       file: './lib/dist/react-transition-group.min.js',
       format: 'umd',
       name,
-      globals
+      globals,
     },
     external: Object.keys(globals),
     plugins: [
@@ -58,7 +58,7 @@ export default [
       commonjs(commonjsOptions),
       replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
       sizeSnapshot(),
-      terser()
-    ]
-  }
+      terser(),
+    ],
+  },
 ];

src/CSSTransition.js

@@ -7,8 +7,10 @@ import React from 'react';
 import Transition from './Transition';
 import { classNamesShape } from './utils/PropTypes';
 
-const addClass = (node, classes) => node && classes && classes.split(' ').forEach(c => addOneClass(node, c));
-const removeClass = (node, classes) => node && classes && classes.split(' ').forEach(c => removeOneClass(node, c));
+const addClass = (node, classes) =>
+  node && classes && classes.split(' ').forEach((c) => addOneClass(node, c));
+const removeClass = (node, classes) =>
+  node && classes && classes.split(' ').forEach((c) => removeOneClass(node, c));
 
 /**
  * A transition component inspired by the excellent
@@ -81,91 +83,90 @@ const removeClass = (node, classes) => node && classes && classes.split(' ').for
  */
 class CSSTransition extends React.Component {
   static defaultProps = {
-    classNames: ''
-  }
+    classNames: '',
+  };
 
   appliedClasses = {
     appear: {},
     enter: {},
     exit: {},
-  }
+  };
 
   onEnter = (maybeNode, maybeAppearing) => {
-    const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing)
+    const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing);
     this.removeClasses(node, 'exit');
     this.addClass(node, appearing ? 'appear' : 'enter', 'base');
 
     if (this.props.onEnter) {
-      this.props.onEnter(maybeNode, maybeAppearing)
+      this.props.onEnter(maybeNode, maybeAppearing);
     }
-  }
+  };
 
   onEntering = (maybeNode, maybeAppearing) => {
-    const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing)
+    const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing);
     const type = appearing ? 'appear' : 'enter';
-    this.addClass(node, type, 'active')
+    this.addClass(node, type, 'active');
 
     if (this.props.onEntering) {
-      this.props.onEntering(maybeNode, maybeAppearing)
+      this.props.onEntering(maybeNode, maybeAppearing);
     }
-  }
+  };
 
   onEntered = (maybeNode, maybeAppearing) => {
-    const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing)
-    const type = appearing ? 'appear' : 'enter'
+    const [node, appearing] = this.resolveArguments(maybeNode, maybeAppearing);
+    const type = appearing ? 'appear' : 'enter';
     this.removeClasses(node, type);
     this.addClass(node, type, 'done');
 
     if (this.props.onEntered) {
-      this.props.onEntered(maybeNode, maybeAppearing)
+      this.props.onEntered(maybeNode, maybeAppearing);
     }
-  }
+  };
 
   onExit = (maybeNode) => {
-    const [node] = this.resolveArguments(maybeNode)
+    const [node] = this.resolveArguments(maybeNode);
     this.removeClasses(node, 'appear');
     this.removeClasses(node, 'enter');
-    this.addClass(node, 'exit', 'base')
+    this.addClass(node, 'exit', 'base');
 
     if (this.props.onExit) {
-      this.props.onExit(maybeNode)
+      this.props.onExit(maybeNode);
     }
-  }
+  };
 
   onExiting = (maybeNode) => {
-    const [node] = this.resolveArguments(maybeNode)
-    this.addClass(node, 'exit', 'active')
+    const [node] = this.resolveArguments(maybeNode);
+    this.addClass(node, 'exit', 'active');
 
     if (this.props.onExiting) {
-      this.props.onExiting(maybeNode)
+      this.props.onExiting(maybeNode);
     }
-  }
+  };
 
   onExited = (maybeNode) => {
-    const [node] = this.resolveArguments(maybeNode)
+    const [node] = this.resolveArguments(maybeNode);
     this.removeClasses(node, 'exit');
     this.addClass(node, 'exit', 'done');
 
     if (this.props.onExited) {
-      this.props.onExited(maybeNode)
+      this.props.onExited(maybeNode);
     }
-  }
+  };
 
   // when prop `nodeRef` is provided `node` is excluded
-  resolveArguments = (maybeNode, maybeAppearing) => this.props.nodeRef
-    ? [this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
-    : [maybeNode, maybeAppearing] // `findDOMNode` was used
+  resolveArguments = (maybeNode, maybeAppearing) =>
+    this.props.nodeRef
+      ? [this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`
+      : [maybeNode, maybeAppearing]; // `findDOMNode` was used
 
   getClassNames = (type) => {
     const { classNames } = this.props;
     const isStringClassNames = typeof classNames === 'string';
-    const prefix = isStringClassNames && classNames
-      ? `${classNames}-`
-      : '';
+    const prefix = isStringClassNames && classNames ? `${classNames}-` : '';
 
     let baseClassName = isStringClassNames
       ? `${prefix}${type}`
-      : classNames[type]
+      : classNames[type];
 
     let activeClassName = isStringClassNames
       ? `${baseClassName}-active`
@@ -178,9 +179,9 @@ class CSSTransition extends React.Component {
     return {
       baseClassName,
       activeClassName,
-      doneClassName
+      doneClassName,
     };
-  }
+  };
 
   addClass(node, type, phase) {
     let className = this.getClassNames(type)[`${phase}ClassName`];
@@ -198,17 +199,17 @@ class CSSTransition extends React.Component {
     }
 
     if (className) {
-      this.appliedClasses[type][phase] = className
-      addClass(node, className)
+      this.appliedClasses[type][phase] = className;
+      addClass(node, className);
     }
   }
 
   removeClasses(node, type) {
     const {
       base: baseClassName,
       active: activeClassName,
-      done: doneClassName
-    } = this.appliedClasses[type]
+      done: doneClassName,
+    } = this.appliedClasses[type];
 
     this.appliedClasses[type] = {};
 
@@ -373,4 +374,4 @@ CSSTransition.propTypes = {
   onExited: PropTypes.func,
 };
 
-export default CSSTransition
+export default CSSTransition;