Code style rules not covered by eslint

  1. Component Sequence:
    Static props (propTypes - defaultProps - contextType - manifest - others) - props - constructor (avoid if possible) - lifecycle - methods - render.

  2. Put isRequired props on top and props without isRequired on bottom inside propTypes.

  3. Prefer specifying defaultProps for all props without isRequired.

  4. Semicolon after "fat arrow methods" and class properties (including static) is required.

  5. Prefer using async functions (with try ... catch if needed) instead of .then().catch() when working with Promises.

  6. super(props) must be followed with empty line (like after const/let).

  7. Imports from React
    (including prop-types, react-intl and others) - imports from libraries
    - empty line -
    imports from folio
    - empty line -
    own components imports - own helpers/utils functions - own constants imports - own other imports
    - empty line -
    styles imports.

    Prefer absolute imports instead of imports with ../ 
    Default imports first.
    And in addition to this sequence imports must be sorted from far (more '/' in path) imports to close (less '/' in path) imports.
    Correct:

    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import {
      get,
      sortBy,
    } from 'lodash';
    
    import { Button } from '@folio/stripes/components';
    
    import PreviewJobs from '../../../components/PreviewsJobs'; // far component
    import { sortCollection } from '../../../../utils/sortCollection'; // far util function
    import sortRunningJobs from './sortRunningJobs'; // close util function
    import { jobPropTypes } from '../../../Job/jobPropTypes'; // far constant
    import { RUNNING } from '../../jobStatuses'; // close constant
    import { DataFetcherContext } from '../../../DataFetcher/DataFetcherContext'; // other import
    
    import css from './Job.css';

    Incorrect:

    import JobsList from '../JobsList'; // close component (close components must be below far components)
    import PreviewJobs from '../../../components/PreviewsJobs'; // far component (far components must be above close components)
    
    // Very incorrect (randomly placed imports):
    import JobsList from '../JobsList'; // close component
    import { DataFetcherContext } from '../../../DataFetcher/DataFetcherContext'; // other import
    import PreviewJobs from '../../../components/PreviewsJobs'; // far component
    import { sortCollection } from '../../../../utils/sortCollection'; // far util function
    import { RUNNING } from '../../jobStatuses'; // close constant
    import sortRunningJobs from './sortRunningJobs'; // close util function
    import { jobPropTypes } from '../../../Job/jobPropTypes'; // far constant
  8. Use arrow func methods instead of binding.

  9. Ternary operator should look like this:

    condition ? statement : statement;
    
    // OR
    condition
    ? statement
    : statement;
    
    // BUTT NOT
    condition ?
    statement :
    statement;
  10. If there is more than one property passed in component than each property must be placed on its own line.

    Correct:

    <FormattedMessage id="ui-data-import.loading" />
    <Icon
      icon="spinner-ellipsis"
      size="small"
    />

    Incorrect:

    <FormattedMessage
      id="ui-data-import.loading"
    />
    <Icon icon="spinner-ellipsis" size="small" />

    NOTE: there is no eslint rule for that.