[React] The best order of imports

[furdzik]

• Create the best order of imports

[furdzik]

[PROPOSITION]

The best order I come up with:

external:

• frequent external imports (react, react-dom, prop-types, react-redux, react-intl, uuid /{enter}, lodash, formik, yup/) {enter}
• external StyledComponents {enter}
• external @material-ui {enter}
• external Link component {enter}
• external Icon component and icons {enter}
• other external imports (other packages) {enter}

configuration, types and constants:

• @config (API config, environment, lang etc.) {enter}
• @types / @interfaces {enter}
• @constants {enter}

main parts:

• @routes (navigation, index) {enter}

data and API:

• @data (JSON files) {enter}*
• @api {enter}

utils, hooks:

• @utils {enter}
• @hooks (useBrakepoint or other styles hooks can be without enter if next is @style/brakepoint) {enter}

app general styles and assets:

• @styles {enter}
• @assets {enter}

app general langs:

• @lang {enter}

components and containers (also @contexts):

• @context - alphabetically {enter}
• @components/ui - alphabetically {enter}*
• @components - alphabetically {enter}*
• @containers - alphabetically

component internal utils and stuff:

• {component}/utils (with index.js to export functions) {enter}
• {component}/{subcomponents} {enter}
• {component}.reducer.js
• {component}.selector.js {enter}
• {component}.styles.js (every styledComponent in new line)
• {component}.messages.js

* - is optional

[furdzik]

TODO: Additionally, formating!

[furdzik]

In case of import uses of hooks is import as { useState } etc. React.createElement and React.Fragment use form React.

[furdzik]

TODO: Compose all imports in one file and correct order

[furdzik]

EXAMPLES:

import { fetchSome, fetchSomeDictionary, updateSome } from '@api';

import { getLanguageType } from '@utils/getLanguageType';

import { openAlert } from '@containers/LayoutContainer/LayoutContainer.reducer';

import { prepereSomeToSend } from './utils';

import messages from './SomeSection.messages';

const initialState = {
 ...
};

const actionTypes = {
  ...
};

import React, { useContext } from 'react';
import PropTypes from 'prop-types';

import { IMAGES_SIZES } from '@config/constants';

import { eventsShape } from '@shapes/EventsSection.shape';

import { useBreakpoint } from '@utils/hooks/useBreakpoint';
import { getCdnResizeParams } from '@utils/getCdnResizeParams';

import { EmergencyModeContext } from '@utils/contexts/emergencyModeContext';
import { checkIfEventHasEndedAlready } from '@utils/checkIfEventHasEndedAlready';

import { breakpoints } from '@styles/basic';

import Section from '@components/ui/Section';
import ShadowBox from '@components/ui/ShadowBox';
import PersonalInfo from '@components/ui/PersonalInfo';
import Avatar from '@components/Avatar';
import LiveIndicator from '@components/LiveIndicator';
import SaveEventSeat from '@components/SaveEventSeat';
import EventsScheduleHeader from '@components/EventsScheduleHeader';