Add tslint-plugin-prettier and apply code formatting (patternfly#2810)

* Reconfigure TSLint and add tslint-plugin-prettier

* Add prettier-ignore where we need to use @ts-ignore on a long line

* Run `yarn lint:ts --fix` and `yarn prettier` on all existing code

Author: mturley

.prettierignore

@@ -0,0 +1,4 @@
+package.json
+packages/**/dist/**/*.js
+packages/**/.cache/**/*.js
+scripts/generators/**/templates/**/*.js

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false,
+  "printWidth": 120
+}

package.json

@@ -62,6 +62,7 @@
     "minimist": "^1.2.0",
     "mutation-observer": "^1.0.3",
     "plop": "^2.0.0",
+    "prettier": "^1.18.2",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "sass-loader": "^6.0.6",
@@ -71,6 +72,8 @@
     "stylelint-config-standard": "^18.2.0",
     "ts-jest": "24.1.0",
     "tslint": "^5.12.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-plugin-prettier": "^2.0.1",
     "tslint-react": "^3.6.0"
   },
   "scripts": {
@@ -88,6 +91,7 @@
     "lint:style": "stylelint \"**/sass/**/*.scss\" \"!**/dist/**/*.scss\"",
     "lint:ts": "node --max-old-space-size=4096 node_modules/.bin/tslint --project ./tslint.config.json --config tslint.json",
     "lint:versions": "node ./packages/patternfly-4/verifyCoreVersions.js",
+    "prettier": "node node_modules/.bin/prettier --write \"storybook/**/*.{js,ts,tsx}\" \"packages/**/*.{js,ts,tsx}\" \"scripts/**/*.{js,ts,tsx}\"",
     "start": "yarn start:pf3",
     "start:cypress": "lerna run cypress:open",
     "start:demo-app": "lerna run start:demo-app --stream",

packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTile/CatalogTile.js

@@ -42,15 +42,15 @@ class CatalogTile extends React.Component {
     }
 
     this.descFullHeight = ref.clientHeight;
-  }
+  };
 
   handleDescriptionSpanRef = ref => {
     if (!ref) {
       return;
     }
 
     this.descLineHeight = parseInt(window.getComputedStyle(ref).getPropertyValue('line-height'), 10);
-  }
+  };
 
   handleClick = e => {
     const { onClick, href } = this.props;
@@ -61,7 +61,7 @@ class CatalogTile extends React.Component {
     if (onClick) {
       onClick(e);
     }
-  }
+  };
 
   renderBadges = badges => {
     if (!badges || !badges.length) {
@@ -75,7 +75,7 @@ class CatalogTile extends React.Component {
         ))}
       </div>
     );
-  }
+  };
 
   render() {
     const {

packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js

@@ -55,14 +55,14 @@ class CatalogTileViewCategory extends React.Component {
       const rightSpacerWidth = this.categoryContainer.clientWidth % 235;
       this.setState({ numShown, rightSpacerWidth });
     }
-  }
+  };
 
   handleRef = ref => {
     if (!ref) {
       return;
     }
     this.categoryContainer = ref;
-  }
+  };
 
   render() {
     const { children, className, title, totalItems, viewAllText, viewAll, onViewAll, ...props } = this.props;

packages/patternfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockCatalogTileViewExample.js

@@ -17,7 +17,7 @@ class MockCatalogTileViewExample extends React.Component {
 
   onViewAll = id => {
     this.setState({ showAll: id });
-  }
+  };
 
   getBadges = item => {
     const badges = [];
@@ -39,13 +39,13 @@ class MockCatalogTileViewExample extends React.Component {
     }
 
     return badges;
-  }
+  };
 
   renderEmptyState = category => (
     <EmptyState className="blank-slate-content-pf">
       <EmptyState.Info>There are no items in this category.</EmptyState.Info>
     </EmptyState>
-  )
+  );
 
   renderCategory = category => {
     const { showAll } = this.state;
@@ -80,7 +80,7 @@ class MockCatalogTileViewExample extends React.Component {
     }
 
     return null;
-  }
+  };
 
   render() {
     const { showAll } = this.state;

packages/patternfly-3/patternfly-react-extensions/src/components/DiffView/DiffView.js

@@ -34,7 +34,9 @@ const DiffView = ({
     const files = parseDiff(gitDiff);
     const hunk = files[0].hunks;
 
-    if (hunk.length === 0) { return emptyState; }
+    if (hunk.length === 0) {
+      return emptyState;
+    }
     return hunk && <Diff className={classes} hunks={hunk} markEdits={markEdits} viewType={viewType} {...props} />;
   }
 
@@ -53,7 +55,9 @@ const DiffView = ({
     />
   );
 
-  if (patch === '') { return emptyState; }
+  if (patch === '') {
+    return emptyState;
+  }
   return <div>{files.map(renderFile)}</div>;
 };
 

packages/patternfly-3/patternfly-react-extensions/src/components/FilterSidePanel/_mocks_/mockFilterSidePanelExample.js

@@ -52,13 +52,13 @@ class MockFilterSidePanelExample extends React.Component {
     const showAllCategories = { ...this.state.showAllCategories };
     showAllCategories[id] = !showAllCategories[id];
     this.setState({ showAllCategories });
-  }
+  };
 
   onFilterChange = (id, value) => {
     const activeFilters = { ...this.state.activeFilters };
     activeFilters[id] = value;
     this.setState({ activeFilters });
-  }
+  };
 
   getStars = count => {
     const stars = [];
@@ -73,7 +73,7 @@ class MockFilterSidePanelExample extends React.Component {
         {stars}
       </span>
     );
-  }
+  };
 
   render() {
     const { activeFilters, showAllCategories } = this.state;
@@ -259,7 +259,7 @@ class MockFilterSidePanelExample extends React.Component {
             checked={activeFilters.paymentDinersClub}
             onChange={e => this.onFilterChange('paymentDinersClub', e.target.checked)}
           >
-            {'Diner\'s Club'}
+            {"Diner's Club"}
           </FilterSidePanel.CategoryItem>
         </FilterSidePanel.Category>
         <FilterSidePanel.Category
@@ -301,7 +301,9 @@ class MockFilterSidePanelExample extends React.Component {
             count={8}
             checked={activeFilters.mileage10}
             onChange={e => this.onFilterChange('mileage10', e.target.checked)}
-          >{'< 20'}</FilterSidePanel.CategoryItem>
+          >
+            {'< 20'}
+          </FilterSidePanel.CategoryItem>
         </FilterSidePanel.Category>
         <FilterSidePanel.Category
           title="Rating"

packages/patternfly-3/patternfly-react-extensions/src/components/Select/SelectHelper.js

@@ -7,6 +7,8 @@ export const createItemProps = (item, selectedItem, className, onItemClick) => {
     active: selectedItem.id === item.id
   };
 
-  if (item.disabled) { return { ...itemProps, disabled: true }; }
+  if (item.disabled) {
+    return { ...itemProps, disabled: true };
+  }
   return { ...itemProps, onClick: e => onItemClick({ e, id: item.id, name: item.name }) };
 };

packages/patternfly-3/patternfly-react-extensions/src/components/Select/SelectInput.js

@@ -11,7 +11,9 @@ class SelectInput extends React.Component {
   }
 
   componentDidMount() {
-    if (this.props.focus) { this.searchInput.current.focus(); }
+    if (this.props.focus) {
+      this.searchInput.current.focus();
+    }
   }
 
   render() {

packages/patternfly-3/patternfly-react-extensions/src/components/Select/StatefulWrapperSelect.js

@@ -20,10 +20,12 @@ class StatefulWrapperSelect extends Component {
     const { options } = this.state;
     const results = [];
     options.forEach(opt => {
-      if (opt.name.includes(search)) { results.push(opt); }
+      if (opt.name.includes(search)) {
+        results.push(opt);
+      }
     });
     return results;
-  }
+  };
 
   onSearch = e => {
     e.persist();
@@ -43,17 +45,21 @@ class StatefulWrapperSelect extends Component {
           }, 700);
         }
       );
-    } else { this.setState({ isSearching: false, searchValue: '' }); }
-  }
+    } else {
+      this.setState({ isSearching: false, searchValue: '' });
+    }
+  };
 
   onClear = () => this.setState({ searchValue: '', isSearching: false });
 
   onItemClick = host =>
-    this.setState({ selected: { id: host.id, name: host.name }, open: false, isSearching: false, searchValue: '' })
+    this.setState({ selected: { id: host.id, name: host.name }, open: false, isSearching: false, searchValue: '' });
 
   handleClickOutside = () => {
-    if (this.state.open === true) { this.onToggle(); }
-  }
+    if (this.state.open === true) {
+      this.onToggle();
+    }
+  };
 
   render() {
     const { open, isSearching, searchValue, selected, isLoading, options, matched } = this.state;

packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/_mocks_/mockTableGridExample.js

@@ -56,11 +56,11 @@ class MockTableGridExample extends React.Component {
     });
 
     this.setState({ items, sortField: id, isAscending: updateAscending });
-  }
+  };
 
   onSelect = (item, field) => {
     this.setState({ selectedItem: item, selectedField: field });
-  }
+  };
 
   toggleSelection = item => {
     const { selectedItems } = this.state;
@@ -73,12 +73,12 @@ class MockTableGridExample extends React.Component {
       newSelections = [...selectedItems, item];
     }
     this.setState({ selectedItems: newSelections });
-  }
+  };
 
   toggleAllSelections = () => {
     const { items, selectedItems } = this.state;
     this.setState({ selectedItems: selectedItems.length > 0 ? [] : [...items] });
-  }
+  };
 
   renderItemRow = (item, index) => {
     const { selectType } = this.props;
@@ -121,7 +121,7 @@ class MockTableGridExample extends React.Component {
         </TableGrid.Col>
       </TableGrid.Row>
     );
-  }
+  };
 
   render() {
     const { items, selectedItems, sortField, isAscending } = this.state;

packages/patternfly-3/patternfly-react-extensions/src/components/TableGrid/_mocks_/mockVirtualTableGridExample.js

@@ -56,11 +56,11 @@ class MockVirtualTableGridExample extends React.Component {
     });
 
     this.setState({ items, sortField: id, isAscending: updateAscending });
-  }
+  };
 
   onSelect = (item, field) => {
     this.setState({ selectedItem: item, selectedField: field });
-  }
+  };
 
   toggleSelection = item => {
     const { selectedItems } = this.state;
@@ -73,12 +73,12 @@ class MockVirtualTableGridExample extends React.Component {
       newSelections = [...selectedItems, item];
     }
     this.setState({ selectedItems: newSelections });
-  }
+  };
 
   toggleAllSelections = () => {
     const { items, selectedItems } = this.state;
     this.setState({ selectedItems: selectedItems.length > 0 ? [] : [...items] });
-  }
+  };
 
   ItemHeader = tableData => {
     const { numItems, selectType, selectedItems, sortField, isAscending } = tableData;
@@ -134,7 +134,7 @@ class MockVirtualTableGridExample extends React.Component {
         </VirtualTableGrid.ColumnHeader>
       </VirtualTableGrid.Head>
     );
-  }
+  };
 
   ItemRow = rowProps => {
     const { obj, tableData, index } = rowProps;
@@ -177,7 +177,7 @@ class MockVirtualTableGridExample extends React.Component {
         </VirtualTableGrid.Col>
       </VirtualTableGrid.Row>
     );
-  }
+  };
 
   render() {
     const { items, selectedItem, selectedItems, selectedField, sortField, isAscending } = this.state;

packages/patternfly-3/patternfly-react-extensions/src/components/VerticalTabs/_mocks_/mockVerticalTabsExample.js

@@ -9,7 +9,7 @@ class MockVerticalTabsExample extends React.Component {
 
   onActivateTab = id => {
     this.setState({ activeTabId: id });
-  }
+  };
 
   render() {
     const { restrictTabs, wrapStyle } = this.props;

packages/patternfly-3/patternfly-react-wooden-tree/src/components/TreeView/TreeViewExample.js

@@ -69,7 +69,7 @@ class TreeViewExample extends React.Component {
       }
     }
     this.setState({ tree });
-  }
+  };
 
   render() {
     return (

packages/patternfly-3/patternfly-react/src/common/Timer.js

@@ -11,8 +11,12 @@ class Timer {
   // startTimer optionally takes a new func and delay so the timer instance can be reused.
   startTimer(func, delay = -1) {
     this.clearTimer();
-    if (func) { this.execute = func; }
-    if (delay >= 0) { this.delay = delay; }
+    if (func) {
+      this.execute = func;
+    }
+    if (delay >= 0) {
+      this.delay = delay;
+    }
     this.timer = setTimeout(this.execute, this.delay);
   }
   clearTimer() {

packages/patternfly-3/patternfly-react/src/common/closestPolyfill.js

@@ -9,7 +9,9 @@ export function closest(selector) {
   let el = this;
   if (document.documentElement.contains(el)) {
     while (el && el.nodeType === 1) {
-      if (el.matches(selector)) { return el; }
+      if (el.matches(selector)) {
+        return el;
+      }
       el = el.parentElement || el.parentNode;
     }
   }