Implement import sorting with Prettier

.prettierrc.json

@@ -1,3 +1,7 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "importOrder": ["^@(.*)$", "^\\w(.*)$", "^(../)(.*)$", "^(./)(.*)$"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
 }

package.json

@@ -68,8 +68,9 @@
     "@angular-eslint/template-parser": "16.1.2",
     "@angular/cli": "16.2.2",
     "@angular/compiler-cli": "16.2.5",
-    "@skyux-sdk/prettier-schematics": "9.1.1",
-    "@skyux-sdk/testing": "9.1.1",
+    "@skyux-sdk/prettier-schematics": "9.2.1",
+    "@skyux-sdk/testing": "9.2.1",
+    "@trivago/prettier-plugin-sort-imports": "4.2.0",
     "@types/jasmine": "4.3.6",
     "@types/lodash.orderby": "4.6.6",
     "@types/marked": "4.0.3",

projects/docs-tools-showcase/src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component, Renderer2 } from '@angular/core';
-
 import {
   SkyAppStyleLoader,
   SkyTheme,

projects/docs-tools-showcase/src/app/home/home.component.ts

@@ -13,8 +13,8 @@ import {
   SkyDatepickerCustomDate,
   SkyFuzzyDate,
 } from '@skyux/datetime';
-import { SkyDocsDemoControlPanelChange, SkyDocsToolsOptions } from 'docs-tools';
 
+import { SkyDocsDemoControlPanelChange, SkyDocsToolsOptions } from 'docs-tools';
 import { Observable, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 

projects/docs-tools-showcase/src/app/home/home.module.ts

@@ -1,8 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-
+import { SkyIdModule } from '@skyux/core';
 import { SkyDatepickerModule } from '@skyux/datetime';
+import { SkyInputBoxModule } from '@skyux/forms';
 
 import {
   SkyDocsSourceCodeProvider,
@@ -15,8 +16,6 @@ import { HomeRoutingModule } from './home-routing.module';
 import { HomeComponent } from './home.component';
 import { LocalDocsService } from './local-docs.service';
 import documentationJson from './mock-documentation.json';
-import { SkyIdModule } from '@skyux/core';
-import { SkyInputBoxModule } from '@skyux/forms';
 
 @NgModule({
   declarations: [HomeComponent],

projects/docs-tools-showcase/src/app/home/local-docs.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 
-import { Observable, of } from 'rxjs';
-
 import { SkyDocsComponentInfo } from 'projects/docs-tools/src/public-api';
+import { Observable, of } from 'rxjs';
 
 const componentList = {
   components: [

projects/docs-tools/src/docs-tools.module.ts

@@ -1,15 +1,10 @@
 import { NgModule } from '@angular/core';
-
 import { SkyAuthHttpClientModule } from '@skyux/http';
 
 import { SkyDocsAnatomyModule } from './modules/anatomy/anatomy.module';
-
 import { SkyDocsCodeExamplesModule } from './modules/code-examples/code-examples.module';
-
-import { SkyDocsDemoModule } from './modules/demo/demo.module';
-
 import { SkyDocsDemoPageModule } from './modules/demo-page/demo-page.module';
-
+import { SkyDocsDemoModule } from './modules/demo/demo.module';
 import { SkyDocsDesignGuidelinesModule } from './modules/design-guidelines/design-guidelines.module';
 
 /**

projects/docs-tools/src/modules/anatomy/anatomy.module.ts

@@ -1,16 +1,13 @@
 import { CommonModule } from '@angular/common';
-
 import { NgModule } from '@angular/core';
-
 import { SkyImageModule } from '@blackbaud/skyux-lib-media';
-
 import { SkyFluidGridModule } from '@skyux/layout';
 
-import { SkyDocsAnatomyComponent } from './anatomy.component';
+import { SkyDocsThumbnailModule } from '../thumbnail/thumbnail.module';
 
 import { SkyDocsAnatomyItemComponent } from './anatomy-item.component';
-import { SkyDocsThumbnailModule } from '../thumbnail/thumbnail.module';
 import { SkyDocsAnatomyThumbnailComponent } from './anatomy-thumbnail.component';
+import { SkyDocsAnatomyComponent } from './anatomy.component';
 
 @NgModule({
   imports: [

projects/docs-tools/src/modules/code-examples/code-example.component.spec.ts

@@ -1,7 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { expect } from '@skyux-sdk/testing';
-
 import {
   SkyTheme,
   SkyThemeMode,
@@ -10,15 +8,11 @@ import {
 } from '@skyux/theme';
 
 import { SkyDocsCodeExampleTheme } from './code-example-theme';
-
+import { SkyDocsCodeExampleComponent } from './code-example.component';
 import { CodeExampleFixtureComponent } from './fixtures/code-example-fixture.component';
-
 import { CodeExampleFixturesModule } from './fixtures/code-example-fixtures.module';
-
 import { CodeExampleWithThemeServiceFixtureComponent } from './fixtures/code-example-with-theme-service-fixture.component';
 
-import { SkyDocsCodeExampleComponent } from './code-example.component';
-
 describe('Code example component', () => {
   let fixture: ComponentFixture<CodeExampleFixtureComponent>;
   let component: CodeExampleFixtureComponent;

projects/docs-tools/src/modules/code-examples/code-example.component.ts

@@ -5,11 +5,9 @@ import {
   OnDestroy,
   Optional,
 } from '@angular/core';
-
 import { SkyThemeService } from '@skyux/theme';
 
 import { Subject } from 'rxjs';
-
 import { takeUntil } from 'rxjs/operators';
 
 import { SkyDocsCodeExampleTheme } from './code-example-theme';

projects/docs-tools/src/modules/code-examples/code-example.ts

@@ -1,7 +1,6 @@
 import { SkyDocsSourceCodeFile } from '../source-code/source-code-file';
 
 import { SkyDocsCodeExampleModuleDependencies } from './code-example-module-dependencies';
-
 import { SkyDocsCodeExampleTheme } from './code-example-theme';
 
 /**

projects/docs-tools/src/modules/code-examples/code-examples-editor.service.spec.ts

@@ -1,12 +1,9 @@
 import { expect } from '@skyux-sdk/testing';
-
 import StackBlitzSDK from '@stackblitz/sdk';
 
 import { SkyDocsCodeExample } from './code-example';
-
-import { SkyDocsCodeExamplesEditorService } from './code-examples-editor.service';
-
 import { SkyDocsCodeExampleTheme } from './code-example-theme';
+import { SkyDocsCodeExamplesEditorService } from './code-examples-editor.service';
 
 //#region helpers
 const sampleModuleContents: string = `

projects/docs-tools/src/modules/code-examples/code-examples-editor.service.ts

@@ -1,20 +1,16 @@
 import { Injectable } from '@angular/core';
-
 import StackBlitzSDK from '@stackblitz/sdk';
-
 import {
   OpenOptions as StackBlitzOpenOptions,
   Project as StackBlitzProject,
 } from '@stackblitz/sdk';
 
 import { SkyDocsSourceCodeFile } from '../source-code/source-code-file';
 
+import { SkyDocsCodeExample } from './code-example';
 import { SkyDocsCodeExampleModuleDependencies } from './code-example-module-dependencies';
-
 import { SkyDocsCodeExampleTheme } from './code-example-theme';
 
-import { SkyDocsCodeExample } from './code-example';
-
 /**
  * @internal
  */

projects/docs-tools/src/modules/code-examples/code-examples.component.spec.ts

@@ -1,12 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SkyDocsSourceCodeService } from '../source-code/source-code.service';
 import { SkyDocsSourceCodeFile } from '../source-code/source-code-file';
+import { SkyDocsSourceCodeService } from '../source-code/source-code.service';
 
-import { CodeExamplesFixtureComponent } from './fixtures/code-examples-fixture.component';
-import { CodeExampleFixturesModule } from './fixtures/code-example-fixtures.module';
-import { SkyDocsCodeExamplesEditorService } from './code-examples-editor.service';
 import { SkyDocsCodeExampleTheme } from './code-example-theme';
+import { SkyDocsCodeExamplesEditorService } from './code-examples-editor.service';
+import { CodeExampleFixturesModule } from './fixtures/code-example-fixtures.module';
+import { CodeExamplesFixtureComponent } from './fixtures/code-examples-fixture.component';
 
 const MOCK_SOURCE_CODE = [
   {

projects/docs-tools/src/modules/code-examples/code-examples.component.ts

@@ -9,13 +9,10 @@ import {
 
 import { SkyDocsSourceCodeService } from '../source-code/source-code.service';
 
-import { SkyDocsCodeExamplesEditorService } from './code-examples-editor.service';
-
-import { SkyDocsCodeExampleComponent } from './code-example.component';
-
-import { SkyDocsCodeExampleModuleDependencies } from './code-example-module-dependencies';
-
 import { SkyDocsCodeExample } from './code-example';
+import { SkyDocsCodeExampleModuleDependencies } from './code-example-module-dependencies';
+import { SkyDocsCodeExampleComponent } from './code-example.component';
+import { SkyDocsCodeExamplesEditorService } from './code-examples-editor.service';
 
 /**
  * Wraps all code examples and handles their configuration and styles.

projects/docs-tools/src/modules/code-examples/code-examples.module.ts

@@ -1,19 +1,13 @@
 import { CommonModule } from '@angular/common';
-
 import { NgModule } from '@angular/core';
-
 import { SkyCodeBlockModule } from '@blackbaud/skyux-lib-code-block';
-
 import { SkyIconModule } from '@skyux/indicators';
-
 import { SkyRepeaterModule } from '@skyux/lists';
-
 import { SkyVerticalTabsetModule } from '@skyux/tabs';
 
 import { SkyDocsToolsResourcesModule } from '../shared/sky-docs-tools-resources.module';
 
 import { SkyDocsCodeExampleComponent } from './code-example.component';
-
 import { SkyDocsCodeExamplesComponent } from './code-examples.component';
 
 @NgModule({