chore: Import sort plugin (#37)

* chore: Import sort plugin

* chore: Replace import sorting pattern for external packages to include everything started optionally with @, but @Cloudscape

* chore: Raise eslint sorting rule to error

* chore: Small eslint rule adjustment

Author: georgylobko

.eslintrc

@@ -15,7 +15,7 @@
       "jsx": true
     }
   },
-  "plugins": ["unicorn", "react-hooks", "no-unsanitized", "header", "import"],
+  "plugins": ["unicorn", "react-hooks", "no-unsanitized", "header", "import", "simple-import-sort"],
   "rules": {
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
@@ -69,14 +69,13 @@
         ]
       }
     ],
-    "sort-imports": ["error", { "ignoreDeclarationSort": true }],
-    "import/order": ["error", { "alphabetize": { "order": "asc" } }],
     "import/no-useless-path-segments": [
       "warn",
       {
         "noUselessIndex": true
       }
-    ]
+    ],
+    "simple-import-sort/imports": "error"
   },
   "settings": {
     "react": {
@@ -98,6 +97,30 @@
       "env": {
         "jest": true
       }
+    },
+    {
+      "files": ["src/**", "pages/**", "test/**", "scripts/**"],
+      "rules": {
+        "simple-import-sort/imports": [
+          "error",
+          {
+            "groups": [
+              // External packages come first.
+              ["^react", "^(?!@cloudscape)@?\\w"],
+              // Cloudscape packages.
+              ["^@cloudscape"],
+              // Things that start with a letter (or digit or underscore), or `~` followed by a letter.
+              ["^~\\w"],
+              // Anything not matched in another group.
+              ["^"],
+              // Styles come last.
+              [
+                "^.+\\.?(css)$","^.+\\.?(css.js)$", "^.+\\.?(scss)$", "^.+\\.?(selectors.js)$"
+              ]
+            ]
+          }
+        ]
+      }
     }
   ]
 }

package-lock.json

@@ -100,6 +100,7 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unicorn": "^45.0.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "execa": "^6.1.0",
     "globby": "^13.1.3",
     "husky": "^8.0.3",

package.json

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { HashRouter, Link, Route, Routes, useLocation } from "react-router-dom";
+
 import { pages } from "../pages";
 import Page from "./page";
 

pages/app/index.tsx

@@ -1,9 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { SpaceBetween, Toggle } from "@cloudscape-design/components";
-import { Density, Mode, applyDensity, applyMode } from "@cloudscape-design/global-styles";
 import { Suspense } from "react";
 import { useEffect, useState } from "react";
+
+import { SpaceBetween, Toggle } from "@cloudscape-design/components";
+import { applyDensity, applyMode, Density, Mode } from "@cloudscape-design/global-styles";
+
 import { pagesMap } from "../pages";
 import PageLayout from "./page-layout";
 

pages/app/page.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Button, SpaceBetween } from "@cloudscape-design/components";
+
 import { CodeView } from "../../lib/components";
 import { ScreenshotArea } from "../screenshot-area";
 export default function CodeViewPage() {

pages/code-view/with-actions-button.page.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Button } from "@cloudscape-design/components";
+
 import { CodeView } from "../../lib/components";
 import javascriptHighlight from "../../lib/components/code-view/highlight/javascript";
 import { ScreenshotArea } from "../screenshot-area";

pages/code-view/with-all-features.page.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SpaceBetween } from "@cloudscape-design/components";
-import { CodeView } from "../../lib/components";
 
+import { CodeView } from "../../lib/components";
 import { ScreenshotArea } from "../screenshot-area";
 export default function CodeViewPage() {
   return (

pages/code-view/with-line-numbers.page.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SpaceBetween } from "@cloudscape-design/components";
+
 import { CodeView } from "../../lib/components";
-import cssHighlight from "../../lib/components/code-view/highlight/css";
 import htmlHighlight from "../../lib/components/code-view/highlight/html";
 import javaHighlight from "../../lib/components/code-view/highlight/java";
 import javascriptHighlight from "../../lib/components/code-view/highlight/javascript";
@@ -15,8 +15,9 @@ import shHighlight from "../../lib/components/code-view/highlight/sh";
 import typescriptHighlight from "../../lib/components/code-view/highlight/typescript";
 import xmlHighlight from "../../lib/components/code-view/highlight/xml";
 import yamlHighlight from "../../lib/components/code-view/highlight/yaml";
-
 import { ScreenshotArea } from "../screenshot-area";
+
+import cssHighlight from "../../lib/components/code-view/highlight/css";
 export default function CodeViewPage() {
   return (
     <ScreenshotArea>

pages/code-view/with-syntax-highlighting.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
-import "@cloudscape-design/global-styles/index.css";
 
 import App from "./app";
 
+import "@cloudscape-design/global-styles/index.css";
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <StrictMode>
     <App />