style: Auto format code using prettier before commit (#224)

## What does it do?

Adds prettierrc and pre commit hooks to format code automatically. Cleans up eslintrc and switched to react-app lint rules

Author: mrchief

.codeclimate.yml

@@ -1,4 +1,4 @@
-version: "2"         # required to adjust maintainability checks
+version: '2' # required to adjust maintainability checks
 checks:
   argument-count:
     config:
@@ -33,10 +33,11 @@ checks:
 plugins:
   eslint:
     enabled: true
-    channel: "eslint-4"
+    channel: 'eslint-5'
 exclude_patterns:
-- "docs/"
-- "snapshots/"
-- "**/tests/*"
-- "**/node_modules/"
-- "**/*.test.js"
+  - 'docs/'
+  - 'snapshots/'
+  - '**/tests/*'
+  - '**/node_modules/'
+  - '**/*.test.js'
+  - 'postcss.config.js'

.eslintrc.json

@@ -1,75 +1,12 @@
 {
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "parser": "babel-eslint",
-  "extends": "airbnb",
-  "plugins": ["react", "jsx-a11y", "import"],
-  "env": {
-    "browser": true,
-    "node": true,
-    "jest": true,
-    "es6": true
-  },
+  "extends": ["react-app", "plugin:prettier/recommended"],
   "rules": {
-    "arrow-parens": [2, "as-needed"],
-    "comma-dangle": ["warn", "never"],
-    "global-require": 0,
-    "import/no-extraneous-dependencies": [
-      2,
-      {
-        "devDependencies": true
-      }
-    ],
-    "import/no-named-as-default": 0,
-    "import/prefer-default-export": 0,
-    "linebreak-style": 0,
-    "max-len": [
-      1,
-      150,
-      2,
-      {
-        "ignoreComments": true,
-        "ignoreTrailingComments": true,
-        "ignoreTemplateLiterals": true,
-        "ignoreStrings": true
-      }
-    ],
-    "no-nested-ternary": 0,
-    "no-underscore-dangle": 0,
-    "no-console": 2,
-    "no-bitwise": [
-      2,
-      {
-        "allow": ["~"]
-      }
-    ],
-    "no-param-reassign": 0,
-    "no-plusplus": 0,
-    "no-shadow": 0,
-    "no-unused-expressions": [2, { "allowShortCircuit": true }],
-    "object-curly-newline": 0,
-    "react/forbid-prop-types": 0,
-    "react/require-default-props": 0,
+    "prettier/prettier": ["error"],
     "react/jsx-filename-extension": [
       1,
       {
         "extensions": [".js", ".jsx"]
       }
-    ],
-    "react/jsx-wrap-multilines": 0,
-    "react/jsx-closing-tag-location": 0,
-    "react/sort-comp": 0,
-    "semi": [2, "never"],
-    "space-infix-ops": 0,
-    "jsx-a11y/anchor-is-valid": 0,
-    "jsx-a11y/label-has-for": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "jsx-a11y/click-events-have-key-events": 0
-  },
-  "globals": {
-    "document": true
+    ]
   }
 }

.prettierignore

@@ -0,0 +1 @@
+docs/src/stories/utils/prism.js

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "es5"
+}

docs/src/App.js

@@ -25,40 +25,40 @@ const stories = [
   { name: 'Simple Select', component: CodeSandbox('5xzn337wjn') },
   {
     name: 'Custom Select/Unselect All Buttons (HOC)',
-    component: CodeSandbox('n348v2qox0')
+    component: CodeSandbox('n348v2qox0'),
   },
   {
     name: 'Internal Select All Checkbox (HOC)',
-    component: CodeSandbox('rjwqq86p1n')
+    component: CodeSandbox('rjwqq86p1n'),
   },
   {
     name: 'Prevent re-render on parent render (HOC)',
-    component: CodeSandbox('v05klkn56l')
+    component: CodeSandbox('v05klkn56l'),
   },
-  { name: 'Tree Node Paths (HOC)', component: CodeSandbox('l765q6lmrq') }
+  { name: 'Tree Node Paths (HOC)', component: CodeSandbox('l765q6lmrq') },
 ]
 
 const App = () => (
   <ReactStory
     style={{
       display: 'block',
       width: '100%',
-      height: '100%'
+      height: '100%',
     }}
     pathPrefix="story/"
     Story={props => (
       <defaultProps.StoryWrapper
         css={{
           padding: 0,
           display: 'flex',
-          flexDirection: 'column'
+          flexDirection: 'column',
         }}
       >
         <div
           {...props}
           style={{
             flex: '1 0 auto',
-            position: 'relative'
+            position: 'relative',
           }}
         />
       </defaultProps.StoryWrapper>

docs/src/CodeSandbox.js

@@ -12,7 +12,7 @@ export default id => () => (
       width: '100%',
       height: '100%',
       border: 0,
-      overflow: 'hidden'
+      overflow: 'hidden',
     }}
     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
     title="Code Sandbox"

docs/src/stories/DefaultValues/index.js

@@ -20,8 +20,8 @@ const Simple = () => (
   <div>
     <h1>Component with Default Values</h1>
     <p>
-      Default Values get applied when there is no other user based selection. User can select more values and unselect default values as long as there
-      is at least one user-selected value still present.
+      Default Values get applied when there is no other user based selection. User can select more values and unselect
+      default values as long as there is at least one user-selected value still present.
     </p>
     <DropdownTreeSelect data={data} onChange={onChange} onAction={onAction} onNodeToggle={onNodeToggle} />
   </div>

docs/src/stories/Options/Checkbox.js

@@ -6,7 +6,7 @@ class Checkbox extends PureComponent {
     label: PropTypes.string.isRequired,
     value: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
-    checked: PropTypes.bool
+    checked: PropTypes.bool,
   }
 
   state = { isChecked: this.props.checked || false }

docs/src/stories/Options/index.js

@@ -17,7 +17,7 @@ class WithOptions extends PureComponent {
       showPartiallySelected: false,
       disabled: false,
       readOnly: false,
-      hierarchical: false
+      hierarchical: false,
     }
   }
 
@@ -36,7 +36,15 @@ class WithOptions extends PureComponent {
   }
 
   render() {
-    const { clearSearchOnChange, keepTreeOnSearch, simpleSelect, showPartiallySelected, disabled, readOnly, hierarchical } = this.state
+    const {
+      clearSearchOnChange,
+      keepTreeOnSearch,
+      simpleSelect,
+      showPartiallySelected,
+      disabled,
+      readOnly,
+      hierarchical,
+    } = this.state
 
     return (
       <div>
@@ -47,13 +55,28 @@ class WithOptions extends PureComponent {
             border: '1px solid #ccc',
             borderRadius: '4px',
             marginBottom: '20px',
-            padding: 10
+            padding: 10,
           }}
         >
-          <Checkbox label="Clear search on selection" value="clearSearchOnChange" checked={clearSearchOnChange} onChange={this.onOptionsChange} />
-          <Checkbox label="Keep tree on search" value="keepTreeOnSearch" checked={keepTreeOnSearch} onChange={this.onOptionsChange} />
+          <Checkbox
+            label="Clear search on selection"
+            value="clearSearchOnChange"
+            checked={clearSearchOnChange}
+            onChange={this.onOptionsChange}
+          />
+          <Checkbox
+            label="Keep tree on search"
+            value="keepTreeOnSearch"
+            checked={keepTreeOnSearch}
+            onChange={this.onOptionsChange}
+          />
           <Checkbox label="Simple Select" value="simpleSelect" checked={simpleSelect} onChange={this.onOptionsChange} />
-          <Checkbox label="Show Partially Selected" value="showPartiallySelected" checked={showPartiallySelected} onChange={this.onOptionsChange} />
+          <Checkbox
+            label="Show Partially Selected"
+            value="showPartiallySelected"
+            checked={showPartiallySelected}
+            onChange={this.onOptionsChange}
+          />
           <Checkbox label="Disabled" value="disabled" checked={disabled} onChange={this.onOptionsChange} />
           <Checkbox label="Read Only" value="readOnly" checked={readOnly} onChange={this.onOptionsChange} />
           <Checkbox label="Hierarchical" value="hierarchical" checked={hierarchical} onChange={this.onOptionsChange} />

docs/src/stories/Simple/index.js

@@ -23,23 +23,30 @@ const onBlur = () => {
   console.log('onBlur')
 }
 
-
 const Simple = () => (
   <div>
     <h1>Basic component</h1>
     <p>
-      This is a basic example of the component. Note that there are no external styles in this page, not even <code>reset.css</code> or{' '}
-      <code>reboot.css</code> or <code>normalizer.css</code>.
+      This is a basic example of the component. Note that there are no external styles in this page, not even{' '}
+      <code>reset.css</code> or <code>reboot.css</code> or <code>normalizer.css</code>.
     </p>
     <p>
-      The idea is to showcase the component at its barest minimum. Of course, its easy to style it, using popular frameworks such as Bootstrap or
-      Material Design (checkout the examples on left).
+      The idea is to showcase the component at its barest minimum. Of course, its easy to style it, using popular
+      frameworks such as Bootstrap or Material Design (checkout the examples on left).
     </p>
     <p>
-      As a side effect, it also helps rule out issues arising out of using custom frameworks (if something doesn&apos;t look right in your app but
-      looks OK here, you know what is messing things up).
+      As a side effect, it also helps rule out issues arising out of using custom frameworks (if something doesn&apos;t
+      look right in your app but looks OK here, you know what is messing things up).
     </p>
-    <DropdownTreeSelect data={data} onChange={onChange} onAction={onAction} onNodeToggle={onNodeToggle} onFocus={onFocus} onBlur={onBlur} className="demo" />
+    <DropdownTreeSelect
+      data={data}
+      onChange={onChange}
+      onAction={onAction}
+      onNodeToggle={onNodeToggle}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      className="demo"
+    />
   </div>
 )