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

.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.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",

pages/app/index.tsx

@@ -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/page.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/code-view/with-actions-button.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-all-features.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-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 { CodeView } from "../../lib/components";
 import { ScreenshotArea } from "../screenshot-area";
 export default function CodeViewPage() {
  return (

pages/code-view/with-syntax-highlighting.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/main.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 />

scripts/docs.js

@@ -3,6 +3,7 @@
 import path from "node:path";
 
 import { documentComponents, documentTestUtils } from "@cloudscape-design/documenter";
+
 import { dashCase, listPublicDirs, writeSourceFile } from "./utils.js";
 
 const publicDirs = listPublicDirs("src");

scripts/package-json.js

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import fs from "node:fs";
+
 import { writeJSON } from "./utils.js";
 
 const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));

scripts/test-utils.js

@@ -1,10 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { execaSync } from "execa";
+import { globbySync } from "globby";
 import fs from "node:fs";
 import path from "node:path";
+
 import { default as convertToSelectorUtil } from "@cloudscape-design/test-utils-converter";
-import { execaSync } from "execa";
-import { globbySync } from "globby";
+
 import { pascalCase, writeSourceFile } from "./utils.js";
 
 const components = globbySync(["src/test-utils/dom/**/index.ts", "!src/test-utils/dom/index.ts"]).map((fileName) =>

scripts/themeable-source.js

@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { globbySync } from "globby";
 import fs from "node:fs";
 import path from "node:path";
 import process from "node:process";
-import { globbySync } from "globby";
 const cwd = process.cwd();
 
 const targetDir = path.join(cwd, "./lib/components-themeable/internal");

scripts/utils.js

@@ -1,8 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import lodash from "lodash";
 import fs from "node:fs";
 import path from "node:path";
-import lodash from "lodash";
 
 export function pascalCase(text) {
  return capitalize(lodash.camelCase(text));

src/__tests__/base-props-support.test.tsx

@@ -1,8 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { render } from "@testing-library/react";
 import { ReactElement } from "react";
+import { render } from "@testing-library/react";
 import { describe, expect, test } from "vitest";
+
 import * as components from "../../lib/components";
 import { defaultProps } from "./default-props";
 

src/__tests__/documenter.test.ts

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { expect, test } from "vitest";
+
 // @ts-expect-error no types here
 import apiDocs from "../../lib/components/internal/api-docs/components";