[v16] Move import sorting over to prettier

.prettierrc.js

@@ -0,0 +1,39 @@
+const tsConfigBase = require('./tsconfig.json');
+
+const ourPackages = new Set(
+  Object.keys(tsConfigBase.compilerOptions.paths).map(
+    // Remove extra '/*' if present in the package name.
+    packageName => packageName.split('/')[0]
+  )
+);
+const appPackages = ['teleport', 'e-teleport', 'teleterm'].flatMap(pkg => [
+  pkg,
+  `@gravitational/${pkg}`,
+]);
+const libraryPackages = [...ourPackages]
+  .filter(pkg => !appPackages.includes(pkg))
+  .flatMap(pkg => [pkg, `@gravitational/${pkg}`]);
+
+module.exports = {
+  arrowParens: 'avoid',
+  printWidth: 80,
+  bracketSpacing: true,
+  plugins: [require('@ianvs/prettier-plugin-sort-imports')],
+  importOrder: [
+    '<BUILTIN_MODULES>',
+    '',
+    '<THIRD_PARTY_MODULES>',
+    '',
+    `^(${libraryPackages.join('|')})`,
+    '',
+    `^(${appPackages.join('|')})`,
+    '',
+    '^[./]',
+  ],
+  importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
+  importOrderTypeScriptVersion: '5.0.0',
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+};

package.json

@@ -21,7 +21,7 @@
     "eslint": "eslint --quiet '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
     "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc",
     "prettier-check": "prettier --check '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
-    "prettier-write": "prettier --write --loglevel silent '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
+    "prettier-write": "prettier --write --log-level silent '+(e|web)/**/*.{ts,tsx,js,jsx,mts}'",
     "process-icons": "node web/packages/design/src/Icon/script/script.js & pnpm prettier --loglevel silent --write 'web/packages/design/src/Icon/Icons/*.tsx'",
     "nop": "exit 0"
   },

tsconfig.json

@@ -21,6 +21,8 @@
     "target": "esnext",
     "types": ["node", "@emotion/core", "@types/wicg-file-system-access"],
     "paths": {
+      "build/*": ["web/packages/build/src/*"],
+      "build": ["web/packages/build/src/"],
       "shared/*": ["web/packages/shared/*"],
       "design/*": ["web/packages/design/src/*"],
       "design": ["web/packages/design/src/"],
@@ -29,7 +31,7 @@
       "teleterm/*": ["web/packages/teleterm/src/*"],
       "e-teleport/*": ["e/web/teleport/src/*"],
       "gen-proto-js/*": ["gen/proto/js/*"],
-      "gen-proto-ts/*": ["gen/proto/ts/*"],
+      "gen-proto-ts/*": ["gen/proto/ts/*"]
     }
   },
   "include": [

web/.storybook/preview.js

@@ -16,25 +16,29 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
-import { rest, setupWorker } from 'msw';
 import { addParameters } from '@storybook/react';
+import { rest, setupWorker } from 'msw';
+import React from 'react';
+
+import DefaultThemeProvider from '../packages/design/src/ThemeProvider';
+import Box from './../packages/design/src/Box';
 import {
+  bblpTheme,
   darkTheme,
   lightTheme,
-  bblpTheme,
 } from './../packages/design/src/theme';
-import DefaultThemeProvider from '../packages/design/src/ThemeProvider';
-import Box from './../packages/design/src/Box';
+
 import '../packages/teleport/src/lib/polyfillRandomUuid';
+
+import { UserContextProvider } from 'teleport/User';
+
+import { handlersTeleport } from './../packages/teleport/src/mocks/handlers';
+import history from './../packages/teleport/src/services/history/history';
 import { StaticThemeProvider as TeletermThemeProvider } from './../packages/teleterm/src/ui/ThemeProvider';
 import {
   darkTheme as teletermDarkTheme,
   lightTheme as teletermLightTheme,
 } from './../packages/teleterm/src/ui/ThemeProvider/theme';
-import { handlersTeleport } from './../packages/teleport/src/mocks/handlers';
-import history from './../packages/teleport/src/services/history/history';
-import { UserContextProvider } from 'teleport/User';
 
 // Checks we are running non-node environment (browser)
 if (typeof global.process === 'undefined') {

web/@types/styled-components.d.ts

@@ -17,6 +17,7 @@
  */
 
 import 'styled-components';
+
 import { Theme } from 'design/theme/themes/types';
 
 declare module 'styled-components' {