upgrade to @folio/eslint-config-stripes

.eslintrc

@@ -1,24 +1,4 @@
 {
-  parser: "babel-eslint",
-  "extends": "airbnb",
-  settings: {
-    'import/resolver': {
-      webpack: {}
-    }
-  },
-  env: {
-    browser: true
-  },
-  "rules": {
-    "react/jsx-filename-extension":"off",
-    "import/extensions": [ 1, "never" ],
-    "no-console": "off",
-    "react/forbid-prop-types": [ 1, { 'forbid' : [ 'any', 'array' ] } ],
-    "no-unused-vars": [ 1, { argsIgnorePattern: "^_" } ],
-    "max-len": "off",
-    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-    "curly": "off",
-    "no-nested-ternary": "off",
-    "no-plusplus": "off"
-  }
+  "parser": "babel-eslint",
+  "extends": "@folio/eslint-config-stripes"
 }

LoanActionsHistory.js

@@ -104,7 +104,7 @@ class LoanActionsHistory extends React.Component {
 
     return (
       <Paneset isRoot>
-        <Pane id="pane-loandetails" defaultWidth="100%" dismissible onClose={onCancel} paneTitle={'Loan Details'}>
+        <Pane id="pane-loandetails" defaultWidth="100%" dismissible onClose={onCancel} paneTitle="Loan Details">
           <Row>
             <Col xs={4} >
               <KeyValue label="Title" value={_.get(loan, ['item', 'title'], '')} />

LoansHistory.js

@@ -19,7 +19,6 @@ import ClosedLoans from './lib/ClosedLoans';
  * the loan's item-record.
  */
 class LoansHistory extends React.Component {
-
   static propTypes = {
     stripes: PropTypes.shape({
       locale: PropTypes.string.isRequired,

UserForm.js

@@ -66,7 +66,6 @@ function asyncValidate(values, dispatch, props, blurredField) {
 }
 
 class UserForm extends React.Component {
-
   static propTypes = {
     stripes: PropTypes.shape({
       connect: PropTypes.func,

ViewUser.js

@@ -32,7 +32,6 @@ import {
 } from './lib/ViewSections';
 
 class ViewUser extends React.Component {
-
   static propTypes = {
     stripes: PropTypes.shape({
       hasPerm: PropTypes.func.isRequired,
@@ -310,7 +309,8 @@ class ViewUser extends React.Component {
         icon="comment"
         id="clickable-show-notes"
         style={{ visibility: !user ? 'hidden' : 'visible' }}
-        onClick={this.props.notesToggle} title="Show Notes"
+        onClick={this.props.notesToggle}
+        title="Show Notes"
       />
       <IfPermission perm="users.item.put">
         <IconButton
@@ -324,11 +324,13 @@ class ViewUser extends React.Component {
       </IfPermission>
     </PaneMenu>);
 
-    if (!user) return (
-      <Pane id="pane-userdetails" defaultWidth={this.props.paneWidth} paneTitle="User Details" lastMenu={detailMenu} dismissible onClose={this.props.onClose}>
-        <div style={{ paddingTop: '1rem' }}><Icon icon="spinner-ellipsis" width="100px" /></div>
-      </Pane>
-    );
+    if (!user) {
+      return (
+        <Pane id="pane-userdetails" defaultWidth={this.props.paneWidth} paneTitle="User Details" lastMenu={detailMenu} dismissible onClose={this.props.onClose}>
+          <div style={{ paddingTop: '1rem' }}><Icon icon="spinner-ellipsis" width="100px" /></div>
+        </Pane>
+      );
+    }
 
     const patronGroupId = get(user, ['patronGroup'], '');
     const patronGroup = patronGroups.find(g => g.id === patronGroupId) || { group: '' };

lib/EditSections/EditContactInfo/EditContactInfo.js

@@ -15,8 +15,7 @@ import Autocomplete from '../../../lib/Autocomplete';
 
 const EditContactInfo = ({ expanded, onToggle, accordionId, parentResources, initialValues }) => {
   const addressTypes = (parentResources.addressTypes || {}).records || [];
-  const contactTypeOptions = (contactTypes || []).map(g => ({
-    label: g.desc, value: g.id, selected: initialValues.preferredContactTypeId === g.id }));
+  const contactTypeOptions = (contactTypes || []).map(g => ({ label: g.desc, value: g.id, selected: initialValues.preferredContactTypeId === g.id }));
   const addressFields = {
     country: { component: Autocomplete, props: { dataOptions: countriesOptions } },
     addressType: { component: Select, props: { dataOptions: toAddressTypeOptions(addressTypes), fullWidth: true, placeholder: 'Select address type' } },

lib/EditSections/EditExtendedInfo/EditExtendedInfo.js

@@ -10,7 +10,6 @@ import { Field } from 'redux-form';
 import css from './EditExtendedInfo.css';
 
 class EditExtendedInfo extends React.Component {
-
   constructor() {
     super();
     this.state = { showPassword: false };
@@ -49,7 +48,8 @@ class EditExtendedInfo extends React.Component {
                   label="External system ID"
                   name="externalSystemId"
                   id="adduser_externalsystemid"
-                  component={TextField} fullWidth
+                  component={TextField}
+                  fullWidth
                 />
               </Col>
               <Col xs={3}>

lib/EditSections/EditUserInfo/EditUserInfo.js

@@ -9,8 +9,7 @@ import { Accordion } from '@folio/stripes-components/lib/Accordion';
 
 const EditUserInfo = ({ parentResources, initialValues, expanded, onToggle, accordionId }) => {
   const patronGroups = (parentResources.patronGroups || {}).records || [];
-  const patronGroupOptions = (patronGroups || []).map(g => ({
-    label: `${g.group} (${g.desc})`, value: g.id, selected: initialValues.patronGroup === g.id }));
+  const patronGroupOptions = (patronGroups || []).map(g => ({ label: `${g.group} (${g.desc})`, value: g.id, selected: initialValues.patronGroup === g.id }));
   const statusOptions = [
     { label: 'Active', value: true },
     { label: 'Inactive', value: false },

lib/EditablePermissions/EditablePermissions.js

@@ -84,11 +84,10 @@ class EditablePermissions extends React.Component {
       return false;
     }
 
-    if (!perm.visible && !this.props.stripes.config.listInvisiblePerms)
-      return false;
+    if (!perm.visible && !this.props.stripes.config.listInvisiblePerms) { return false; }
 
     return _.includes(perm.displayName || perm.permissionName,
-                      this.state.searchTerm.toLowerCase());
+      this.state.searchTerm.toLowerCase());
   }
 
   renderList({ fields }) {
@@ -135,8 +134,7 @@ class EditablePermissions extends React.Component {
     const { accordionId, expanded, onToggle, initialValues } = this.props;
     const permissions = (initialValues || {}).permissions || [];
 
-    if (!this.props.stripes.hasPerm(this.props.permToRead))
-      return null;
+    if (!this.props.stripes.hasPerm(this.props.permToRead)) { return null; }
 
     const permissionsDD = (
       <PermissionList
@@ -162,7 +160,8 @@ class EditablePermissions extends React.Component {
             width="40em"
             aria-label="available permissions"
             onToggle={this.onToggleAddPermDD}
-          >{permissionsDD}</DropdownMenu>
+          >{permissionsDD}
+          </DropdownMenu>
         </Dropdown>
       </IfPermission>
     );

lib/OpenLoans/OpenLoans.js

@@ -23,7 +23,6 @@ const sortMap = {
 };
 
 class OpenLoans extends React.Component {
-
   static propTypes = {
     mutator: PropTypes.shape({
       loanId: PropTypes.shape({

lib/ProxyGroup/ProxyEditItem/ProxyEditItem.js

@@ -15,14 +15,10 @@ const proxySponsorValues = ['Sponsor', 'Proxy'];
 const yesNoValues = ['Yes', 'No'];
 
 const ProxyEditItem = ({ name, record, onDelete }) => {
-  const relationStatusOptions = relationStatusValues.map(val => ({
-    label: val, value: val, selected: record.meta && record.meta.status === val }));
-  const requestForSponsorOptions = yesNoValues.map(val => ({
-    label: val, value: val, selected: record.meta && record.meta.requestForSponsor === val }));
-  const notificationsToOptions = proxySponsorValues.map(val => ({
-    label: val, value: val, selected: record.meta && record.meta.notificationsTo === val }));
-  const accrueToOptions = proxySponsorValues.map(val => ({
-    label: val, value: val, selected: record.meta && record.meta.accrueTo === val }));
+  const relationStatusOptions = relationStatusValues.map(val => ({ label: val, value: val, selected: record.meta && record.meta.status === val }));
+  const requestForSponsorOptions = yesNoValues.map(val => ({ label: val, value: val, selected: record.meta && record.meta.requestForSponsor === val }));
+  const notificationsToOptions = proxySponsorValues.map(val => ({ label: val, value: val, selected: record.meta && record.meta.notificationsTo === val }));
+  const accrueToOptions = proxySponsorValues.map(val => ({ label: val, value: val, selected: record.meta && record.meta.accrueTo === val }));
 
   const proxyLink = (
     <div>

lib/RenderPatronGroup/RenderPatronGroupLastUpdated.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 class RenderPatronGroupLastUpdated extends React.Component {
-
   static propTypes = {
     item: PropTypes.object.isRequired,
     users: PropTypes.object.isRequired,

lib/RenderPatronGroup/RenderPatronGroupNumberOfUsers.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 class RenderPatronGroupNumberOfUsers extends React.Component {
-
   static propTypes = {
     item: PropTypes.object.isRequired,
     gloss: PropTypes.string.isRequired,
@@ -39,7 +38,6 @@ class RenderPatronGroupNumberOfUsers extends React.Component {
     const value = this.getNumberOfPatrons();
     return (<div key={this.props.gloss} title={value}>{value}</div>);
   }
-
 }
 
 export default RenderPatronGroupNumberOfUsers;

lib/RenderPermissions/RenderPermissions.js

@@ -49,8 +49,7 @@ class RenderPermissions extends React.Component {
   render() {
     const { accordionId, expanded, onToggle, listedPermissions } = this.props;
 
-    if (!this.props.stripes.hasPerm(this.props.permToRead))
-      return null;
+    if (!this.props.stripes.hasPerm(this.props.permToRead)) { return null; }
 
     return (
       <Accordion

lib/ViewSections/UserInfo/UserInfo.js

@@ -9,7 +9,6 @@ import MetaSection from '@folio/stripes-components/lib/MetaSection';
 import { formatDate, getFullName } from '../../../util';
 
 class UserInfo extends React.Component {
-
   static manifest = Object.freeze({
     createdBy: {
       type: 'okapi',

package.json

@@ -203,13 +203,8 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "babel-register": "^6.18.0",
-    "eslint": "^3.8.0",
-    "eslint-config-airbnb": "^13.0.0",
-    "eslint-import-resolver-webpack": "^0.8.1",
-    "eslint-plugin-babel": "^3.3.0",
-    "eslint-plugin-import": "^2.0.1",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.4.1"
+    "eslint": "^4.8.0",
+    "@folio/eslint-config-stripes": "^1.1.0"
   },
   "dependencies": {
     "@folio/stripes-components": "^2.0.0",

settings/PatronGroupsSettings.js

@@ -9,7 +9,6 @@ import EditableList from '@folio/stripes-components/lib/structures/EditableList'
 import { RenderPatronGroupLastUpdated, RenderPatronGroupNumberOfUsers } from '../lib/RenderPatronGroup';
 
 class PatronGroupsSettings extends React.Component {
-
   static propTypes = {
     // The stripes prop will probably get used eventually, so
     // it's probably best to leave it there.

settings/permissions/PermissionSetForm.js

@@ -16,7 +16,6 @@ import { Field } from 'redux-form';
 import ContainedPermissions from './ContainedPermissions';
 
 class PermissionSetForm extends React.Component {
-
   static propTypes = {
     stripes: PropTypes.shape({
       hasPerm: PropTypes.func.isRequired,
@@ -86,7 +85,8 @@ class PermissionSetForm extends React.Component {
           type="submit"
           title="Save and close"
           disabled={(pristine || submitting)}
-        >Save and close</Button>
+        >Save and close
+        </Button>
       </PaneMenu>
     );
   }