Updating import ordering (#1539)

* Updating eslint, prettier, and ts for imports

 - DID NOT RUN A `lint:fix`
 - Enforcing the use of absolute paths
   - added new plugin `eslint-plugin-no-relative-import-paths`
 - Using `import type` where appropriate
 - ordering config

 - DID NOT RUN A `format:fix`
 - Now handles sorting import statements
   - added new plugin `@ianvs/prettier-plugin-sort-imports`

 - Set the `baseUrl` back to default
 - Ran script to add `src/` to all internal imports
 - Manually fixed ones that were missed
 - Update the `lazy` `import` calls for the `Routes`

* Need to make settings a CJS

* Running a `format:fix` for initial import sorting

* Running a `lint:fix` to enforce absolute path and `import type` use

* Running a `format:fix` now that `lint` forced all the `import type`

Author: travjenkins

.eslintrc.cjs

@@ -1,22 +1,15 @@
 module.exports = {
     extends: [
-        'eslint-config-kentcdodds',
+        'eslint-config-kentcdodds/import',
         'eslint-config-kentcdodds/jsx-a11y',
         'eslint-config-kentcdodds/react',
     ],
     ignorePatterns: ['vite.config.ts', '__mocks__', 'playwright-tests/'],
+    plugins: ['formatjs', 'unused-imports', 'no-relative-import-paths'],
     parserOptions: {
         project: './tsconfig.json',
-        tsconfigRootDir: __dirname,
     },
-    plugins: ['formatjs', 'unused-imports', 'import'],
     rules: {
-        // Want to make sure imports and exports are always formatted correctly
-        'unused-imports/no-unused-imports': 'error',
-        'import/first': 'error',
-        'import/newline-after-import': 'error',
-        'import/no-duplicates': 'error',
-
         // Only turning off right now to see more actual issues
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-unsafe-argument': 'off',
@@ -26,6 +19,9 @@ module.exports = {
         '@typescript-eslint/no-unsafe-call': 'off',
         '@typescript-eslint/no-unsafe-member-access': 'off',
 
+        // These really help with managing circular deps that don't matter
+        '@typescript-eslint/consistent-type-imports': 'error',
+
         // Helpful for dev... maybe make different settings for "final code"?
         'no-console': 'off',
 
@@ -49,6 +45,7 @@ module.exports = {
         // We should never have these unless commented and explained
         'react-hooks/exhaustive-deps': 'error',
 
+        // --------------------------IMPORTS --------------------------
         // Original LoadingButton can cause issues with Google Translate
         //  https://github.com/mui/material-ui/issues/27853
         //  https://github.com/facebook/react/issues/11538
@@ -69,5 +66,16 @@ module.exports = {
                 message: 'Please use @supabase/postgrest-js',
             },
         ],
+
+        // Absolute paths just makes moving files so much easier
+        'no-relative-import-paths/no-relative-import-paths': [
+            'error',
+            { allowSameFolder: false },
+        ],
+
+        'unused-imports/no-unused-imports': 'error',
+        'import/first': 'error',
+        'import/newline-after-import': 'error',
+        'import/no-duplicates': 'error',
     },
-};
+};

.prettierrc

@@ -0,0 +1,36 @@
+module.exports = {
+    plugins: ['@ianvs/prettier-plugin-sort-imports'],
+    arrowParens: 'always',
+    bracketSameLine: false,
+    bracketSpacing: true,
+    embeddedLanguageFormatting: 'auto',
+    insertPragma: false,
+    jsxSingleQuote: false,
+    printWidth: 80,
+    proseWrap: 'preserve',
+    quoteProps: 'consistent',
+    requirePragma: false,
+    semi: true,
+    singleQuote: true,
+    tabWidth: 4,
+    trailingComma: 'es5',
+    useTabs: false,
+    importOrderTypeScriptVersion: '4.9.4',
+    importOrder: [
+        '<TYPES>',
+        '',
+        '^(react/(.*)$)|^(react$)',
+        '^(use-*|react-use/(.*)$)',
+        '',
+        '^(@mui/(.*)$)|^(@mui)',
+        '',
+        '^(@jsonforms/(.*)$)|^(@jsonforms)',
+        '^(zustand/(.*)$)|^(zustand)',
+        '',
+        '<THIRD_PARTY_MODULES>',
+        '',
+        '^(src/(.*)$)|^(src)',
+        '',
+        '.(png|svg|css)$',
+    ],
+};

.prettierrc.cjs

@@ -1,6 +1,7 @@
-import { act } from '@testing-library/react';
 import * as zustand from 'zustand';
 
+import { act } from '@testing-library/react';
+
 const { create: actualCreate, createStore: actualCreateStore } =
     await vi.importActual<typeof zustand>('zustand');