chore: Import sort plugin (#2460)

.eslintrc.js

@@ -17,7 +17,14 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ['unicorn', 'react-hooks', '@cloudscape-design/eslint-plugin', 'no-unsanitized', 'header'],
+  plugins: [
+    'unicorn',
+    'react-hooks',
+    '@cloudscape-design/eslint-plugin',
+    'no-unsanitized',
+    'header',
+    'simple-import-sort',
+  ],
   rules: {
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-namespace': 'off',
@@ -81,6 +88,7 @@ module.exports = {
       [' Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.', ' SPDX-License-Identifier: Apache-2.0'],
     ],
     'no-warning-comments': 'warn',
+    'simple-import-sort/imports': 'warn',
   },
   settings: {
     react: {
@@ -184,6 +192,28 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['src/**', 'pages/**'],
+      rules: {
+        'simple-import-sort/imports': [
+          'warn',
+          {
+            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)$'],
+            ],
+          },
+        ],
+      },
+    },
     {
       files: [
         'src/alert/**',

package.json

@@ -96,6 +96,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unicorn": "^45.0.1",
     "execa": "^4.1.0",
     "fs-extra": "^11.2.0",

pages/alert/permutations.page.tsx

@@ -1,13 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+
 import Alert, { AlertProps } from '~components/alert';
 import Button from '~components/button';
 import ExpandableSection from '~components/expandable-section';
 import Link from '~components/link';
-import ScreenshotArea from '../utils/screenshot-area';
+
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
 
 const longText =
   'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

pages/alert/runtime-action.page.tsx

@@ -2,13 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+
 import Alert, { AlertProps } from '~components/alert';
 import Button from '~components/button';
-import SpaceBetween from '~components/space-between';
 import awsuiPlugins from '~components/internal/plugins';
-import ScreenshotArea from '../utils/screenshot-area';
+import SpaceBetween from '~components/space-between';
+
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
 
 awsuiPlugins.alert.registerAction({
   id: 'awsui/alert-test-action',

pages/alert/simple.page.tsx

@@ -1,15 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState } from 'react';
+
 import Alert, { AlertProps } from '~components/alert';
 import Button from '~components/button';
+import { I18nProvider } from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
 import Link from '~components/link';
-import ScreenshotArea from '../utils/screenshot-area';
 import SpaceBetween from '~components/space-between';
-import styles from './styles.scss';
 
-import { I18nProvider } from '~components/i18n';
-import messages from '~components/i18n/messages/all.en';
+import ScreenshotArea from '../utils/screenshot-area';
+
+import styles from './styles.scss';
 
 export default function AlertScenario() {
   const [visible, setVisible] = useState(true);

pages/anchor-navigation/basic.page.tsx

@@ -1,11 +1,14 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+
 import AnchorNavigation from '~components/anchor-navigation';
-import { TextSample, navigateToItem } from './utils';
-import SpaceBetween from '~components/space-between';
 import Header from '~components/header';
+import SpaceBetween from '~components/space-between';
+
 import ScreenshotArea from '../utils/screenshot-area';
+import { navigateToItem, TextSample } from './utils';
+
 import styles from './styles.scss';
 
 const TextContent = () => {

pages/anchor-navigation/expandable.page.tsx

@@ -1,12 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+
+import { ExpandableSection } from '~components';
 import AnchorNavigation from '~components/anchor-navigation';
-import { TextSample, navigateToItem } from './utils';
 import SpaceBetween from '~components/space-between';
+
 import ScreenshotArea from '../utils/screenshot-area';
+import { navigateToItem, TextSample } from './utils';
+
 import styles from './styles.scss';
-import { ExpandableSection } from '~components';
 
 const TextContent = () => {
   return (

pages/annotation-context/annotation-scroll.page.tsx

@@ -6,11 +6,13 @@ import clsx from 'clsx';
 import AnnotationContext from '~components/annotation-context';
 import Hotspot from '~components/hotspot';
 import properties from '~components/internal/generated/custom-css-properties';
-import styles from './styles.scss';
-import tutorials from '../onboarding/tutorials';
+
 import { annotationContextStrings } from '../onboarding/i18n';
+import tutorials from '../onboarding/tutorials';
 import ScreenshotArea from '../utils/screenshot-area';
 
+import styles from './styles.scss';
+
 const tutorial = tutorials(() => {})[0];
 
 export default function AnnotationScroll() {

pages/annotation-context/with-hotspot-inside-switch.page.tsx

@@ -8,8 +8,9 @@ import Hotspot from '~components/hotspot';
 import RadioGroup from '~components/radio-group';
 import SpaceBetween from '~components/space-between';
 import Toggle from '~components/toggle';
-import tutorials from '../onboarding/tutorials';
+
 import { annotationContextStrings } from '../onboarding/i18n';
+import tutorials from '../onboarding/tutorials';
 
 const tutorial = tutorials(() => {})[0];
 const noop = () => {};

pages/app-layout/all-panels-open.page.tsx

@@ -1,10 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+
 import AppLayout from '~components/app-layout';
 import Header from '~components/header';
+
 import ScreenshotArea from '../utils/screenshot-area';
-import { Containers, Navigation, Tools, Breadcrumbs } from './utils/content-blocks';
+import { Breadcrumbs, Containers, Navigation, Tools } from './utils/content-blocks';
 import labels from './utils/labels';
 
 export default function () {

pages/app-layout/dashboard-content-type.page.tsx

@@ -1,15 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
+
 import AppLayout from '~components/app-layout';
 import Button from '~components/button';
 import Header from '~components/header';
 import SplitPanel from '~components/split-panel';
+
 import ScreenshotArea from '../utils/screenshot-area';
-import { Containers, Navigation, Tools, Breadcrumbs } from './utils/content-blocks';
-import * as toolsContent from './utils/tools-content';
+import { Breadcrumbs, Containers, Navigation, Tools } from './utils/content-blocks';
 import labels from './utils/labels';
 import { discreetSplitPanelI18nStrings } from './utils/strings';
+import * as toolsContent from './utils/tools-content';
 
 export default function () {
   const [splitPanelOpen, setSplitPanelOpen] = useState(false);

pages/app-layout/default.page.tsx

@@ -1,12 +1,14 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+
 import AppLayout from '~components/app-layout';
 import Header from '~components/header';
+
 import ScreenshotArea from '../utils/screenshot-area';
-import { Containers, Navigation, Tools, Breadcrumbs } from './utils/content-blocks';
-import * as toolsContent from './utils/tools-content';
+import { Breadcrumbs, Containers, Navigation, Tools } from './utils/content-blocks';
 import labels from './utils/labels';
+import * as toolsContent from './utils/tools-content';
 
 export default function () {
   return (

pages/app-layout/disable-paddings-breadcrumbs.page.tsx

@@ -1,9 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import clsx from 'clsx';
 import React from 'react';
+import clsx from 'clsx';
+
 import AppLayout from '~components/app-layout';
 import Box from '~components/box';
+
 import ScreenshotArea from '../utils/screenshot-area';
 import labels from './utils/labels';
 

pages/app-layout/disable-paddings-edge-controls.page.tsx

@@ -1,14 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
+
 import AppLayout from '~components/app-layout';
 import Box from '~components/box';
 import Button from '~components/button';
 import SplitPanel from '~components/split-panel';
 
 import ScreenshotArea from '../utils/screenshot-area';
-import { splitPaneli18nStrings } from './utils/strings';
 import labels from './utils/labels';
+import { splitPaneli18nStrings } from './utils/strings';
 
 export default function () {
   const [navigationOpen, setNavigationOpen] = useState(false);

pages/app-layout/disable-paddings-with-split-panel.page.tsx

@@ -1,12 +1,14 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+
 import AppLayout from '~components/app-layout';
-import SplitPanel from '~components/split-panel';
 import Box from '~components/box';
-import { Navigation, Tools, Breadcrumbs } from './utils/content-blocks';
-import * as toolsContent from './utils/tools-content';
+import SplitPanel from '~components/split-panel';
+
+import { Breadcrumbs, Navigation, Tools } from './utils/content-blocks';
 import labels from './utils/labels';
+import * as toolsContent from './utils/tools-content';
 
 export default function () {
   return (

pages/app-layout/disable-paddings.page.tsx

@@ -1,10 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+
 import AppLayout from '~components/app-layout';
 import Box from '~components/box';
+
 import ScreenshotArea from '../utils/screenshot-area';
 import labels from './utils/labels';
+
 import styles from './styles.scss';
 
 export default function () {

pages/app-layout/embedded-view-mode.page.tsx

@@ -1,18 +1,20 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
-import { columnsConfig } from '../table/shared-configs';
-import { generateItems } from '../table/generate-data';
-import { splitPaneli18nStrings } from './utils/strings';
+
 import AppLayout from '~components/app-layout';
 import Box from '~components/box';
 import BreadcrumbGroup from '~components/breadcrumb-group';
 import Button from '~components/button';
 import Header from '~components/header';
-import labels from './utils/labels';
 import SplitPanel from '~components/split-panel';
 import Table from '~components/table';
 
+import { generateItems } from '../table/generate-data';
+import { columnsConfig } from '../table/shared-configs';
+import labels from './utils/labels';
+import { splitPaneli18nStrings } from './utils/strings';
+
 export default function () {
   const [navigationOpen, setNavigationOpen] = useState(false);
   const [toolsOpen, setToolsOpen] = useState(false);

pages/app-layout/fill-content-area.page.tsx

@@ -1,14 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+
+import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
+
 import AppLayout from '~components/app-layout';
+import Box from '~components/box';
 import Header from '~components/header';
+
 import ScreenshotArea from '../utils/screenshot-area';
-import { Navigation, Tools, Breadcrumbs } from './utils/content-blocks';
-import * as toolsContent from './utils/tools-content';
+import { Breadcrumbs, Navigation, Tools } from './utils/content-blocks';
 import labels from './utils/labels';
-import Box from '~components/box';
-import { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
+import * as toolsContent from './utils/tools-content';
 
 export default function () {
   return (

pages/app-layout/full-page-table-with-variable-header-height.page.tsx

@@ -1,13 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+
 import AppLayout from '~components/app-layout';
-import labels from './utils/labels';
+import ExpandableSection from '~components/expandable-section';
+import Header from '~components/header';
 import Table from '~components/table';
+
 import { generateItems, Instance } from '../table/generate-data';
 import { columnsConfig } from '../table/shared-configs';
-import ExpandableSection from '~components/expandable-section';
-import Header from '~components/header';
+import labels from './utils/labels';
 
 const items = generateItems(20);
 

pages/app-layout/global-breadcrumbs.page.tsx

@@ -1,10 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
+
 import AppLayout from '~components/app-layout';
+import BreadcrumbGroup from '~components/breadcrumb-group';
 import SpaceBetween from '~components/space-between';
+
 import labels from './utils/labels';
-import BreadcrumbGroup from '~components/breadcrumb-group';
 
 export default function () {
   const [extraBreadcrumb, setExtraBreadcrumb] = useState(false);