chore: sort imports

Signed-off-by: Mark Phelps <[email protected]>

ui/index.dev.html

@@ -8,6 +8,7 @@
 
     <script type="module">
       import RefreshRuntime from 'http://localhost:5173/@react-refresh';
+
       RefreshRuntime.injectIntoGlobalHook(window);
       window.$RefreshReg$ = () => {};
       window.$RefreshSig$ = () => (type) => type;

ui/package.json

@@ -62,6 +62,7 @@
     "@babel/preset-typescript": "^7.26.0",
     "@playwright/test": "^1.49.1",
     "@tailwindcss/forms": "^0.5.9",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jest": "^29.5.14",
     "@types/loadable__component": "^5.13.9",
     "@types/node": "^18.19.71",

ui/prettier.config.cjs

@@ -1,5 +1,17 @@
 module.exports = {
-  plugins: ['prettier-plugin-tailwindcss'],
+  plugins: [
+    'prettier-plugin-tailwindcss',
+    '@trivago/prettier-plugin-sort-imports'
+  ],
   singleQuote: true,
-  trailingComma: 'none'
+  trailingComma: 'none',
+  importOrder: [
+    '^~/app/(.*)$',
+    '^~/components/(.*)$',
+    '^~/types/(.*)$',
+    '^~/(.*)$',
+    '^[./]'
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true
 };

ui/src/App.tsx

@@ -1,21 +1,24 @@
-import loadable from '@loadable/component';
 import formbricks from '@formbricks/js/website';
+import loadable from '@loadable/component';
 import { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useSelector } from 'react-redux';
+import { RouterProvider, createHashRouter, redirect } from 'react-router';
+
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesApi';
-import { createHashRouter, redirect, RouterProvider } from 'react-router';
+
 import ErrorLayout from './app/ErrorLayout';
-import Flag from './app/flags/Flag';
-import NewFlag from './app/flags/NewFlag';
 import Layout from './app/Layout';
 import NotFoundLayout from './app/NotFoundLayout';
+import Flag from './app/flags/Flag';
+import NewFlag from './app/flags/NewFlag';
 import { selectTheme } from './app/preferences/preferencesSlice';
 import NewSegment from './app/segments/NewSegment';
 import Segment from './app/segments/Segment';
 import SessionProvider from './components/SessionProvider';
-import { Theme } from './types/Preferences';
 import { store } from './store';
+import { Theme } from './types/Preferences';
+
 const Flags = loadable(() => import('./app/flags/Flags'));
 const Segments = loadable(() => import('./app/segments/Segments'));
 const Console = loadable(() => import('./app/console/Console'));

ui/src/app/ErrorLayout.tsx

@@ -1,4 +1,5 @@
 import { Link, useNavigate, useRouteError } from 'react-router';
+
 import logoFlag from '~/assets/logo-flag.png';
 
 export default function ErrorLayout() {

ui/src/app/Layout.tsx

@@ -1,3 +1,4 @@
+import { StarIcon } from '@heroicons/react/20/solid';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
@@ -7,27 +8,30 @@ import {
   useNavigate,
   useParams
 } from 'react-router';
+
+import Banner from '~/components/Banner';
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
 import Loading from '~/components/Loading';
 import { NotificationProvider } from '~/components/NotificationProvider';
+import Sidebar from '~/components/Sidebar';
+import CommandDialog from '~/components/command/CommandDialog';
 import ErrorNotification from '~/components/notifications/ErrorNotification';
 import SuccessNotification from '~/components/notifications/SuccessNotification';
-import Sidebar from '~/components/Sidebar';
+
+import { LoadingStatus } from '~/types/Meta';
+
 import { useSession } from '~/data/hooks/session';
 import { useAppDispatch } from '~/data/hooks/store';
-import { LoadingStatus } from '~/types/Meta';
+
+import { selectCurrentEnvironment } from './environments/environmentsApi';
+import { selectDismissedBanner } from './events/eventSlice';
 import { fetchInfoAsync, selectInfo } from './meta/metaSlice';
 import {
   currentNamespaceChanged,
   selectCurrentNamespace,
   useListNamespacesQuery
 } from './namespaces/namespacesApi';
-import CommandDialog from '~/components/command/CommandDialog';
-import Banner from '~/components/Banner';
-import { selectDismissedBanner } from './events/eventSlice';
-import { StarIcon } from '@heroicons/react/20/solid';
-import { selectCurrentEnvironment } from './environments/environmentsApi';
 
 function InnerLayout() {
   const { session } = useSession();

ui/src/app/NotFoundLayout.tsx

@@ -6,6 +6,7 @@ import {
   UserGroupIcon
 } from '@heroicons/react/24/outline';
 import { Link } from 'react-router';
+
 import logoFlag from '~/assets/logo-flag.png';
 
 const links = [

ui/src/app/Onboarding.tsx

@@ -10,10 +10,14 @@ import {
   UsersIcon
 } from '@heroicons/react/24/outline';
 import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router';
+
 import { Button } from '~/components/Button';
+
 import { Icon } from '~/types/Icon';
+
 import { cls } from '~/utils/helpers';
-import { useNavigate } from 'react-router';
+
 import { onboardingCompleted } from './events/eventSlice';
 
 const gettingStartedTiles = [

ui/src/app/Settings.tsx

@@ -1,4 +1,5 @@
 import { Outlet, useOutletContext } from 'react-router';
+
 import TabBar from '~/components/TabBar';
 
 export default function Settings() {

ui/src/app/Support.tsx

@@ -7,6 +7,7 @@ import {
 } from '@heroicons/react/24/outline';
 import React from 'react';
 import { Link } from 'react-router';
+
 import { Icon } from '~/types/Icon';
 
 const supportItems: SupportItemProps[] = [