feat(lint): sort imports

.eslintrc

@@ -9,12 +9,14 @@
     }
   },
   "plugins": [
+    "@typescript-eslint",
     "babel",
-    "react",
     "jest",
     "json",
-    "sort-imports-es6-autofix",
-    "@typescript-eslint"
+    "react",
+    "simple-import-sort",
+    "sort-destructure-keys",
+    "typescript-sort-keys"
   ],
   "overrides": [
     {
@@ -23,10 +25,7 @@
       "parserOptions": {
         "project": "./tsconfig.json"
       },
-      "plugins": ["typescript-sort-keys"],
       "rules": {
-        "typescript-sort-keys/interface": 2,
-        "typescript-sort-keys/string-enum": 2,
         "@typescript-eslint/no-unused-vars": 2,
         "@typescript-eslint/switch-exhaustiveness-check": 2
       }
@@ -96,12 +95,24 @@
     "react/sort-comp": 2,
     "require-yield": 2,
     "space-before-function-paren": 2,
-    "sort-imports-es6-autofix/sort-imports-es6": [
+    "simple-import-sort/exports": "error",
+    "simple-import-sort/imports": [
       "error",
       {
-        "ignoreCase": true
+        "groups": [
+          // Packages. `react` related packages come first.
+          // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+          ["^react", "^@?\\w"],
+          // Absolute imports and Relative imports.
+          ["^(core|components|data|layouts|providers|services|utils)(/.*|$)", "^\\."],
+          // for scss imports.
+          ["^[^.]"]
+        ]
       }
     ],
+    "sort-destructure-keys/sort-destructure-keys": "error",
+    "typescript-sort-keys/interface": "error",
+    "typescript-sort-keys/string-enum": "error",
     "strict": 0
   }
-}
+}

package.json

@@ -159,9 +159,11 @@
     "eslint-plugin-json": "1.4.0",
     "eslint-plugin-node": "9.0.1",
     "eslint-plugin-react": "7.13.0",
+    "eslint-plugin-simple-import-sort": "7.0.0",
+    "eslint-plugin-sort-destructure-keys": "1.3.5",
     "eslint-plugin-sort-imports-es6-autofix": "0.5.0",
     "eslint-plugin-standard": "4.0.0",
-    "eslint-plugin-typescript-sort-keys": "0.5.0",
+    "eslint-plugin-typescript-sort-keys": "1.5.0",
     "express": "4.17.1",
     "favicons-webpack-plugin": "3.0.1",
     "file-loader": "6.0.0",

packages/blockchain-info-components/src/Badges/Badge.js

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types'
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { Image } from '../Images'
 import { Link } from '../Links'

packages/blockchain-info-components/src/Badges/Badge.spec.js

@@ -1,5 +1,5 @@
-import { render } from 'enzyme'
 import React from 'react'
+import { render } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import Badge from './Badge'

packages/blockchain-info-components/src/Banners/Banner.js

@@ -1,6 +1,6 @@
+import React from 'react'
 import { transparentize } from 'polished'
 import PropTypes from 'prop-types'
-import React from 'react'
 import styled from 'styled-components'
 
 import { Icon } from '../Icons'
@@ -56,9 +56,9 @@ const selectStyle = type => {
 }
 
 const Banner = props => {
-  const { type, children, inline, label, size, width } = props
+  const { children, inline, label, size, type, width } = props
   const style = selectStyle(type)
-  const { color, uppercase, icon } = style
+  const { color, icon, uppercase } = style
 
   return (
     <Container

packages/blockchain-info-components/src/Banners/Banner.spec.js

@@ -1,5 +1,5 @@
-import { shallow } from 'enzyme'
 import React from 'react'
+import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import Banner from './Banner'

packages/blockchain-info-components/src/Buttons/Button.js

@@ -1,5 +1,5 @@
-import { darken } from 'polished'
 import React from 'react'
+import { darken } from 'polished'
 import styled from 'styled-components'
 
 const BaseButton = styled.button.attrs(props => ({
@@ -196,8 +196,8 @@ const selectColor = (nature, small) => {
 }
 
 const Button = props => {
-  const { children, nature, disabled, small, ...rest } = props
-  const { color, backgroundColor, borderColor, hoverBorderColor } = selectColor(
+  const { children, disabled, nature, small, ...rest } = props
+  const { backgroundColor, borderColor, color, hoverBorderColor } = selectColor(
     nature,
     small
   )

packages/blockchain-info-components/src/Buttons/Button.spec.js

@@ -1,5 +1,5 @@
-import { shallow } from 'enzyme'
 import React from 'react'
+import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import Button from './Button'

packages/blockchain-info-components/src/Buttons/ButtonGroup.spec.js

@@ -1,5 +1,5 @@
-import { shallow } from 'enzyme'
 import React from 'react'
+import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import ButtonGroup from './ButtonGroup'

packages/blockchain-info-components/src/Buttons/IconButton.js

@@ -36,7 +36,7 @@ const selectColor = (nature, disabled) => {
 }
 
 const IconButton = props => {
-  const { name, children, nature, ...rest } = props
+  const { children, name, nature, ...rest } = props
   const color = selectColor(nature)
 
   return (

packages/blockchain-info-components/src/Buttons/IconButton.spec.js

@@ -1,5 +1,5 @@
-import { shallow } from 'enzyme'
 import React from 'react'
+import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import IconButton from './IconButton'

packages/blockchain-info-components/src/Carousels/Carousel/Carousel.spec.js

@@ -1,5 +1,5 @@
-import { shallow } from 'enzyme'
 import React from 'react'
+import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import Carousel from './template'

packages/blockchain-info-components/src/Carousels/Carousel/index.js

@@ -1,6 +1,7 @@
-import CarouselTemplate from './template.js'
-import PropTypes from 'prop-types'
 import React from 'react'
+import PropTypes from 'prop-types'
+
+import CarouselTemplate from './template.js'
 
 class Carousel extends React.PureComponent {
   constructor (props) {

packages/blockchain-info-components/src/Carousels/Carousel/template.js

@@ -1,7 +1,7 @@
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { range } from 'ramda'
 import PropTypes from 'prop-types'
-import React from 'react'
+import { range } from 'ramda'
 import styled from 'styled-components'
 
 import { Button } from '../../Buttons'
@@ -91,16 +91,16 @@ const FooterWrapper = styled.div`
 
 const Carousel = props => {
   const {
-    index,
-    total,
-    height,
     arrows,
-    chips,
     children,
+    chips,
     handleClick,
-    handlePrevious,
     handleNext,
-    nextButton
+    handlePrevious,
+    height,
+    index,
+    nextButton,
+    total
   } = props
 
   return (

packages/blockchain-info-components/src/Colors/Complement.ts

@@ -1,6 +1,7 @@
 import { complement } from 'polished'
-import { DefaultTheme } from 'styled-components'
 import { mapObjIndexed } from 'ramda'
+import { DefaultTheme } from 'styled-components'
+
 import Default from './Default'
 
 const Complement: DefaultTheme = mapObjIndexed(num => complement(num), Default)

packages/blockchain-info-components/src/Colors/DarkMode.ts

@@ -1,5 +1,5 @@
-import { DefaultTheme } from 'styled-components'
 import { lighten } from 'polished'
+import { DefaultTheme } from 'styled-components'
 
 const DarkTheme: DefaultTheme = {
   // USE THESE \\

packages/blockchain-info-components/src/Colors/Grayscale.ts

@@ -1,6 +1,7 @@
-import { DefaultTheme } from 'styled-components'
 import { grayscale } from 'polished'
 import { mapObjIndexed } from 'ramda'
+import { DefaultTheme } from 'styled-components'
+
 import Default from './Default'
 
 const Grayscale: DefaultTheme = mapObjIndexed(num => grayscale(num), Default)

packages/blockchain-info-components/src/Colors/Invert.ts

@@ -1,6 +1,7 @@
-import { DefaultTheme } from 'styled-components'
 import { invert } from 'polished'
 import { mapObjIndexed } from 'ramda'
+import { DefaultTheme } from 'styled-components'
+
 import Default from './Default'
 
 const Invert: DefaultTheme = mapObjIndexed(num => invert(num), Default)

packages/blockchain-info-components/src/Colors/index.ts

@@ -1,4 +1,5 @@
 import { DefaultTheme } from 'styled-components'
+
 import Complement from './Complement'
 import DarkMode from './DarkMode'
 import Default from './Default'

packages/blockchain-info-components/src/Dropdowns/ComponentDropdown/ComponentDropdown.spec.js

@@ -1,5 +1,5 @@
-import { shallow } from 'enzyme'
 import React from 'react'
+import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import ComponentDropdown from './template'

packages/blockchain-info-components/src/Dropdowns/ComponentDropdown/index.js

@@ -1,5 +1,5 @@
-import onClickOutside from 'react-onclickoutside'
 import React from 'react'
+import onClickOutside from 'react-onclickoutside'
 
 import Dropdown from './template'
 

packages/blockchain-info-components/src/Dropdowns/ComponentDropdown/template.js

@@ -1,10 +1,10 @@
-import PropTypes from 'prop-types'
 import React from 'react'
+import PropTypes from 'prop-types'
+import { keysIn } from 'ramda'
 import styled from 'styled-components'
 
-import { Icon } from '../../Icons'
-import { keysIn } from 'ramda'
 import { Palette } from '../../Colors/index.ts'
+import { Icon } from '../../Icons'
 
 const Wrapper = styled.div`
   display: inline-flex;

packages/blockchain-info-components/src/Dropdowns/SimpleDropdown/SimpleDropdown.spec.js

@@ -1,5 +1,5 @@
-import { shallow } from 'enzyme'
 import React from 'react'
+import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
 import SimpleDropdown from './template'

packages/blockchain-info-components/src/Dropdowns/SimpleDropdown/index.js

@@ -1,6 +1,6 @@
+import React from 'react'
 import onClickOutside from 'react-onclickoutside'
 import PropTypes from 'prop-types'
-import React from 'react'
 
 import Dropdown from './template'
 

packages/blockchain-info-components/src/Dropdowns/SimpleDropdown/template.js

@@ -1,10 +1,10 @@
-import PropTypes from 'prop-types'
 import React from 'react'
+import PropTypes from 'prop-types'
+import { keysIn } from 'ramda'
 import styled from 'styled-components'
 
-import { Icon } from '../../Icons'
-import { keysIn } from 'ramda'
 import { Palette } from '../../Colors/index.ts'
+import { Icon } from '../../Icons'
 
 const Wrapper = styled.div`
   display: inline-flex;
@@ -83,13 +83,13 @@ const Dropdown = props => {
   const {
     color,
     down,
-    uppercase,
-    toggled,
-    selectedItem,
-    items,
-    handleClick,
     handleCallback,
-    size
+    handleClick,
+    items,
+    selectedItem,
+    size,
+    toggled,
+    uppercase
   } = props
 
   return (

packages/blockchain-info-components/src/Fonts/Inter/index.js

@@ -1,9 +1,9 @@
 import { createGlobalStyle } from 'styled-components'
 
-import InterBlackItalicOtf from './fonts/Inter-BlackItalic.otf'
-import InterBlackItalicTtf from './fonts/Inter-BlackItalic.ttf'
 import InterBlackOtf from './fonts/Inter-Black.otf'
 import InterBlackTtf from './fonts/Inter-Black.ttf'
+import InterBlackItalicOtf from './fonts/Inter-BlackItalic.otf'
+import InterBlackItalicTtf from './fonts/Inter-BlackItalic.ttf'
 import InterBoldOtf from './fonts/Inter-Bold.otf'
 import InterBoldTtf from './fonts/Inter-Bold.ttf'
 import InterExtraBoldOtf from './fonts/Inter-ExtraBold.otf'

packages/blockchain-info-components/src/Footer/index.js

@@ -1,13 +1,13 @@
-import { IntlProvider } from 'react-intl'
-import Cookies from 'universal-cookie'
 import React, { PureComponent } from 'react'
+import { IntlProvider } from 'react-intl'
 import styled, { createGlobalStyle } from 'styled-components'
+import Cookies from 'universal-cookie'
 
 import { Color } from '../Colors/index.ts'
 import { Image } from '../Images'
-import { Select } from './Select'
 import Link from '../Navigation/Link'
 import Normalize8 from '../Normalize.js'
+import { Select } from './Select'
 
 const GlobalStyles = createGlobalStyle`
   :root {

packages/blockchain-info-components/src/Form/AutosizeTextInput.js

@@ -1,6 +1,6 @@
+import React from 'react'
 import AutosizeInput from 'react-input-autosize'
 import PropTypes from 'prop-types'
-import React from 'react'
 import styled from 'styled-components'
 
 import { selectBorderColor, selectFocusBorderColor } from './helper'
@@ -73,14 +73,14 @@ class TextInput extends React.Component {
 
   render () {
     const {
-      errorState,
-      disabled,
-      noLastPass,
+      active,
       borderColor,
-      focusedBorderColor,
       borderRightNone,
+      disabled,
+      errorState,
+      focusedBorderColor,
       minHeight,
-      active,
+      noLastPass,
       ...rest
     } = this.props
     return (

packages/blockchain-info-components/src/Form/CheckBoxInput.js

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types'
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 const Wrapper = styled.div`
@@ -65,7 +65,7 @@ const Label = styled.label`
 `
 
 const CheckBoxInput = props => {
-  const { name, children, checked, disabled, ...rest } = props
+  const { checked, children, disabled, name, ...rest } = props
 
   return (
     <Wrapper>