Add import sorter

.eslintrc

@@ -10,7 +10,13 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
-  "plugins": ["@typescript-eslint", "import", "react", "prettier"],
+  "plugins": [
+    "@typescript-eslint",
+    "import",
+    "react",
+    "prettier",
+    "simple-import-sort"
+  ],
   "rules": {
     "@typescript-eslint/camelcase": "off",
     "@typescript-eslint/indent": "off",
@@ -35,7 +41,7 @@
     ],
     "import/no-internal-modules": "off",
     "import/no-named-as-default": "off",
-    "import/order": "error",
+    "import/order": "off",
     "import/prefer-default-export": "off",
     "no-nested-ternary": "off",
     "prettier/prettier": ["error"],
@@ -75,7 +81,33 @@
         "aspects": ["invalidHref", "preferButton"]
       }
     ],
-    "no-await-in-loop": "off"
+    "no-await-in-loop": "off",
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          // Side effect imports.
+          ["^\\u0000"],
+          // Packages.
+          // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+          ["^@?\\w"],
+          // Absolute imports and other imports such as Vue-style `@/foo`.
+          // Anything that does not start with a dot.
+          ["^[^. ]"],
+          // ALiases.
+          [
+            "^(@components|@paths|@pages|@utils|@hooks|@types|@app|@locale|@temp|@styles)(/.*|$)"
+          ],
+          // Relative imports.
+          // Anything that starts with a dot.
+          ["^\\."],
+          // Assets.
+          ["^(images|!!raw-loader)"],
+          // Styles
+          ["w*(w*.*css)"]
+        ]
+      }
+    ]
   },
   "settings": {
     "import/resolver": {

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fixed image scaling in gallery and thumbnails - #959 by @MarekChoinski
 - Use only selection attributes in variant picker - #963 by @orzechdev
 - Drop deprecated `ProductVariant.isAvailable` field - #965 by @maarcingebala
+- Add eslint import sort - #979 by @pitorgrundas
 
 ## 2.11.0
 

package.json

@@ -146,6 +146,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.2",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "faker": "^4.1.0",
     "file-loader": "^4.0.0",
     "fork-ts-checker-webpack-plugin": "^6.0.1",

src/@next/components/atoms/AddNewTile/test.tsx

@@ -1,5 +1,6 @@
-import { mount } from "enzyme";
 import "jest-styled-components";
+
+import { mount } from "enzyme";
 import React from "react";
 
 import { AddNewTile } from ".";

src/@next/components/atoms/Address/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { Address } from ".";

src/@next/components/atoms/Attribute/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { Attribute } from ".";

src/@next/components/atoms/Button/styles.ts

@@ -1,4 +1,5 @@
 import { media, styled } from "@styles";
+
 import { Size } from "./types";
 
 const padding = {

src/@next/components/atoms/Button/test.tsx

@@ -1,8 +1,10 @@
-import { defaultTheme } from "@styles";
-import { mount, shallow } from "enzyme";
 import "jest-styled-components";
+
+import { mount, shallow } from "enzyme";
 import React from "react";
 
+import { defaultTheme } from "@styles";
+
 import { Button } from ".";
 import * as S from "./styles";
 

src/@next/components/atoms/ButtonLink/styles.ts

@@ -1,4 +1,5 @@
 import { styled } from "@styles";
+
 import { Color, Size } from "./types";
 
 export const ButtonLink = styled.button<{

src/@next/components/atoms/ButtonLink/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { ButtonLink } from ".";

src/@next/components/atoms/CartCostsSummary/CartCostsSummary.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import { commonMessages } from "@temp/intl";
 
 import { TaxedMoney } from "@components/containers";
+import { commonMessages } from "@temp/intl";
 import { ITaxedMoney } from "@types";
+
 import * as S from "./styles";
 
 export interface CartCostsSummaryProps {

src/@next/components/atoms/CartCostsSummary/fixtures.ts

@@ -1,4 +1,5 @@
 import { ITaxedMoney } from "@types";
+
 import { CartCostsSummaryProps } from "./CartCostsSummary";
 
 const getPrice = (amount: number): ITaxedMoney => ({

src/@next/components/atoms/CartCostsSummary/stories.tsx

@@ -2,7 +2,7 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { CartCostsSummary } from ".";
-import { BASIC_COSTS, ALL_POSSIBLE_COSTS } from "./fixtures";
+import { ALL_POSSIBLE_COSTS, BASIC_COSTS } from "./fixtures";
 
 storiesOf("@components/molecules/CartCostsSummary", module)
   .addParameters({ component: CartCostsSummary })

src/@next/components/atoms/CartCostsSummary/test.tsx

@@ -1,9 +1,10 @@
-import { mount, shallow } from "enzyme";
 import "jest-styled-components";
+
+import { mount, shallow } from "enzyme";
 import React from "react";
 
 import { CartCostsSummary } from ".";
-import { BASIC_COSTS, ALL_POSSIBLE_COSTS } from "./fixtures";
+import { ALL_POSSIBLE_COSTS, BASIC_COSTS } from "./fixtures";
 
 describe("<CartCostsSummary />", () => {
   it("exists", () => {

src/@next/components/atoms/CartFooter/CartFooter.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import { commonMessages } from "@temp/intl";
 
-import { ITaxedMoney } from "@types";
 import { TaxedMoney } from "@components/containers";
+import { commonMessages } from "@temp/intl";
+import { ITaxedMoney } from "@types";
+
 import * as S from "./styles";
 
 export interface CartFooterProps {

src/@next/components/atoms/CartFooter/fixtures.ts

@@ -1,4 +1,5 @@
 import { ITaxedMoney } from "@types";
+
 import { CartFooterProps } from "./CartFooter";
 
 const getPrice = (amount: number): ITaxedMoney => ({

src/@next/components/atoms/CartFooter/stories.tsx

@@ -2,7 +2,7 @@ import { storiesOf } from "@storybook/react";
 import React from "react";
 
 import { CartFooter } from ".";
-import { BASIC_COSTS, ALL_POSSIBLE_COSTS } from "./fixtures";
+import { ALL_POSSIBLE_COSTS, BASIC_COSTS } from "./fixtures";
 
 storiesOf("@components/atoms/CartFooter", module)
   .addParameters({ component: CartFooter })

src/@next/components/atoms/CartFooter/test.tsx

@@ -1,9 +1,10 @@
-import { mount, shallow } from "enzyme";
 import "jest-styled-components";
+
+import { mount, shallow } from "enzyme";
 import React from "react";
 
 import { CartFooter } from ".";
-import { BASIC_COSTS, ALL_POSSIBLE_COSTS } from "./fixtures";
+import { ALL_POSSIBLE_COSTS, BASIC_COSTS } from "./fixtures";
 
 describe("<CartFooter />", () => {
   it("exists", () => {

src/@next/components/atoms/CartHeader/CartHeader.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
+
 import { commonMessages } from "@temp/intl";
 
 import * as S from "./styles";

src/@next/components/atoms/CartHeader/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { CartHeader } from ".";

src/@next/components/atoms/Checkbox/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { Checkbox } from ".";

src/@next/components/atoms/Chip/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { Chip } from ".";

src/@next/components/atoms/CreditCardIcon/CreditCardIcon.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import ReactSVG from "react-svg";
 
+import * as S from "./styles";
+import { IProps } from "./types";
+
 import amexImg from "images/amex.svg";
 import discoverImg from "images/discover.svg";
 import jcbImg from "images/jcb.svg";
 import maestroImg from "images/maestro.svg";
 import mastercardImg from "images/mastercard.svg";
 import visaImg from "images/visa.svg";
 
-import * as S from "./styles";
-import { IProps } from "./types";
-
 const providers = new Map();
 
 providers.set("visa", visaImg);

src/@next/components/atoms/CreditCardIcon/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 import ReactSVG from "react-svg";
 

src/@next/components/atoms/DemoBanner/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { DemoBanner } from ".";

src/@next/components/atoms/DropdownMenu/stories.tsx

@@ -1,10 +1,11 @@
 import { action } from "@storybook/addon-actions";
 import { storiesOf } from "@storybook/react";
-import { styled } from "@styles";
 import React from "react";
 
-import { DropdownMenu } from ".";
+import { styled } from "@styles";
+
 import { IconButton } from "../IconButton";
+import { DropdownMenu } from ".";
 
 const Container = styled.div`
   width: 600px;

src/@next/components/atoms/DropdownMenu/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { DropdownMenu } from ".";

src/@next/components/atoms/DropdownSelect/DropdownSelect.tsx

@@ -3,11 +3,10 @@ import { FormattedMessage } from "react-intl";
 import { components } from "react-select";
 import { ThemeContext } from "styled-components";
 
-import { Label } from "../Label";
-import { Select } from "../Select";
-
 import { useHandlerWhenClickedOutside } from "../../../hooks";
 import { Icon } from "../Icon";
+import { Label } from "../Label";
+import { Select } from "../Select";
 import * as S from "./styles";
 import { IProps } from "./types";
 

src/@next/components/atoms/DropdownSelect/test.tsx

@@ -1,5 +1,6 @@
-import { mount, shallow } from "enzyme";
 import "jest-styled-components";
+
+import { mount, shallow } from "enzyme";
 import React from "react";
 import { components } from "react-select";
 

src/@next/components/atoms/ErrorMessage/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { ErrorMessage } from ".";

src/@next/components/atoms/IconButton/IconButton.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { Icon } from "../Icon";
-
 import * as S from "./styles";
 import { IProps } from "./types";
 

src/@next/components/atoms/Input/Input.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import { getBackgroundColor } from "@utils/styles";
 
 import { InputLabel } from "../InputLabel";
-
 import * as S from "./styles";
 import { IProps } from "./types";
 

src/@next/components/atoms/Input/styles.ts

@@ -1,4 +1,5 @@
 import { DefaultTheme, styled } from "@styles";
+
 import { activeLabelStyles } from "../InputLabel";
 
 type WrapperProps = {

src/@next/components/atoms/InputLabel/styles.ts

@@ -1,4 +1,4 @@
-import { styled, DefaultTheme } from "@styles";
+import { DefaultTheme, styled } from "@styles";
 
 export const activeLabelStyles = (
   theme: DefaultTheme,

src/@next/components/atoms/InputLabel/test.tsx

@@ -1,5 +1,6 @@
-import { mount, shallow } from "enzyme";
 import "jest-styled-components";
+
+import { mount, shallow } from "enzyme";
 import React from "react";
 
 import { InputLabel } from ".";

src/@next/components/atoms/Label/test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from "enzyme";
 import "jest-styled-components";
+
+import { shallow } from "enzyme";
 import React from "react";
 
 import { Label } from ".";

src/@next/components/atoms/Loader/styles.ts

@@ -1,6 +1,6 @@
-import { styled } from "@styles";
 import { keyframes } from "styled-components";
 
+import { styled } from "@styles";
 import { getContentWindowHeight } from "@utils/styles";
 
 const firstItem = keyframes`