Change the way we sort imports

.eslintrc.json

@@ -23,28 +23,8 @@
     "ecmaVersion": 2022,
     "sourceType": "module"
   },
-  "plugins": ["react", "simple-import-sort"],
+  "plugins": ["react"],
   "rules": {
-    "react/prop-types": ["off"],
-    "simple-import-sort/imports": [
-      "error",
-      {
-        "groups": [
-          // Packages `react` related packages come first.
-          ["^react", "^@?\\w"],
-          // Internal packages.
-          ["^(@|components)(/.*|$)"],
-          // Side effect imports.
-          ["^\\u0000"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-          // Style imports.
-          ["^.+\\.?(css)$"]
-        ]
-      }
-    ],
-    "simple-import-sort/exports": "error"
+    "react/prop-types": ["off"]
   }
 }

.prettierrc.yml

@@ -0,0 +1,15 @@
+tabWidth: 2
+importOrder:
+  # Packages `react` related packages come first.
+  - "^react"
+  - "^@?\\w"
+  # Relative imports one directory up, excluding styles
+  - "^(\\.\\./)(?!.*\\.css).*"
+  # Relative imports in the same directory, excluding styles
+  - "^(\\.\\/)(?!.*\\.css).*"
+  # Style imports.
+  - "^.*(.css)$"
+importOrderSeparation: true
+importOrderSortSpecifiers: true
+plugins:
+  - "@trivago/prettier-plugin-sort-imports"