current stand

.eslintrc.json

@@ -17,8 +17,46 @@
     "ecmaVersion": 13,
     "sourceType": "module"
   },
-  "plugins": ["react", "@typescript-eslint"],
+  "plugins": ["ordered-imports", "react", "@typescript-eslint"],
   "rules": {
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "ordered-imports/ordered-imports": [
+      "error",
+      {
+        "symbols-first": true,
+        "declaration-ordering": ["type", {
+          "ordering": ["namespace", "destructured", "default", "side-effect"],
+          "secondaryOrdering": ["name", "lowercase-last"]
+        }],
+        "specifier-ordering": "lowercase-last",
+        "group-ordering": [
+          {
+            "name": "third-party named",
+            "match": "^@",
+            "order": 20
+          },
+          {
+            "name": "project",
+            "match": "^\\~",
+            "order": 30
+          },
+          {
+            "name": "parent directories",
+            "match": "^\\.\\.",
+            "order": 40
+          },
+          {
+            "name": "current directory",
+            "match": "^\\.",
+            "order": 50
+          },
+          {
+            "name": "third-party",
+            "match": ".*",
+            "order": 10
+          }
+        ]
+      }
+    ]
   }
 }

package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
     "@mui/lab": "^5.0.0-alpha.103",
     "@mui/material": "^5.10.9",
     "@tanstack/react-query": "^4.12.0",
@@ -39,6 +41,7 @@
     "eslint": "8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-compat": "^4.0.2",
+    "eslint-plugin-ordered-imports": "^0.6.0",
     "eslint-plugin-react": "^7.31.10",
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",

src/App.tsx

@@ -1,24 +1,24 @@
-import {createBrowserRouter, RouterProvider} from "react-router-dom";
-import RootRoute from "~/routes/Root";
-import React, {ReactElement} from "react";
-import {QueryClientProvider} from "@tanstack/react-query";
-import {queryClient} from "~/constants/react-query";
+import {RouterProvider, createBrowserRouter} from "react-router-dom"
+import React, {ReactElement} from "react"
+
+import {QueryClientProvider} from "@tanstack/react-query"
+
+import {queryClient} from "~/constants/react-query"
+import RootRoute from "~/routes/Root"
 
 const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <RootRoute />,
-    },
-]);
-
+	{
+		path: "/",
+		element: <RootRoute />,
+	},
+])
 
 export default function App(): ReactElement {
-    return (
-        <React.StrictMode>
-            <QueryClientProvider client={queryClient}>
-                <RouterProvider router={router} />
-            </QueryClientProvider>
-        </React.StrictMode>
-    )
+	return (
+		<React.StrictMode>
+			<QueryClientProvider client={queryClient}>
+				<RouterProvider router={router} />
+			</QueryClientProvider>
+		</React.StrictMode>
+	)
 }
-

src/LoadingScreen.tsx

@@ -1,11 +1,15 @@
-import {Typography} from "@mui/material";
-import {ReactElement} from "react";
-import {SingleElementWrapper} from "~/components";
+import React, {ReactElement} from "react"
+
+import {Typography} from "@mui/material"
+
+import {SingleElementWrapper} from "~/components"
 
 export default function LoadingScreen(): ReactElement {
-    return (
-        <SingleElementWrapper>
-            <Typography variant="h1" component="h1">Loading...</Typography>
-        </SingleElementWrapper>
-    )
+	return (
+		<SingleElementWrapper>
+			<Typography variant="caption" component="p">
+				Loading...
+			</Typography>
+		</SingleElementWrapper>
+	)
 }

src/apis/get-server-settings.ts

@@ -1,5 +1,6 @@
 import axios from "axios"
-import {ServerSettings} from "~/types";
+
+import {ServerSettings} from "~/types"
 
 export default async function getServerSettings(): Promise<ServerSettings> {
 	return (

src/apis/validate-token.ts

@@ -1,6 +1,7 @@
-import {AuthenticationDetails} from "~/types"
 import axios from "axios"
 
+import {AuthenticationDetails} from "~/types"
+
 export interface ValidateTokenData {
 	email: string
 	token: string

src/components/MultiStepForm.tsx

@@ -1,5 +1,13 @@
-import React, {forwardRef, ReactElement, useEffect, useRef, useState} from "react"
+import React, {
+	ReactElement,
+	forwardRef,
+	useEffect,
+	useRef,
+	useState,
+} from "react"
+
 import {Paper} from "@mui/material"
+
 import {whenElementHasBounds} from "~/utils"
 
 export interface MultiStepFormProps {

src/components/MultiStepFormElement.tsx

@@ -1,6 +1,7 @@
-import {Box, Container} from "@mui/material"
 import React, {ReactElement} from "react"
 
+import {Box, Container} from "@mui/material"
+
 export interface MultiStepFormElementProps {
 	children: ReactElement
 }

src/components/OpenMailButton.tsx

@@ -1,8 +1,10 @@
-import {ReactElement} from "react"
-import UAParser from "ua-parser-js"
-import {Button} from "@mui/material"
-import {APP_LINK_MAP} from "~/utils"
 import {IoMdMailOpen} from "react-icons/io"
+import React, {ReactElement} from "react"
+import UAParser from "ua-parser-js"
+
+import {Button} from "@mui/material"
+
+import {APP_LINK_MAP} from "~/utils"
 
 export interface OpenMailButtonProps {
 	domain: string

src/components/PasswordField.tsx

@@ -1,11 +1,12 @@
+import {MdVisibility, MdVisibilityOff} from "react-icons/md"
+import React, {ReactElement, useState} from "react"
+
 import {
 	IconButton,
 	InputAdornment,
 	TextField,
 	TextFieldProps,
 } from "@mui/material"
-import {ReactElement, useState} from "react"
-import {MdVisibility, MdVisibilityOff} from "react-icons/md"
 
 export interface PasswordFieldProps extends Omit<TextFieldProps, "type"> {}
 

src/components/SimpleForm.tsx

@@ -1,3 +1,7 @@
+import {MdChevronRight} from "react-icons/md"
+import {TiCancel} from "react-icons/ti"
+import React, {ReactElement, useEffect, useState} from "react"
+
 import {
 	Alert,
 	Button,
@@ -6,11 +10,8 @@ import {
 	Typography,
 	TypographyProps,
 } from "@mui/material"
-import {ReactElement, useEffect, useState} from "react"
 import {LoadingButton} from "@mui/lab"
-import {MdChevronRight} from "react-icons/md"
 import {OverrideProps} from "@mui/types"
-import {TiCancel} from "react-icons/ti"
 
 export interface SimpleFormProps {
 	title: string

src/components/SingleElementWrapper.tsx

@@ -1,4 +1,5 @@
-import {ReactElement} from "react"
+import React, {ReactElement} from "react"
+
 import {Box} from "@mui/material"
 
 export interface SingleElementWrapperProps {

src/constants/development.ts

@@ -0,0 +1 @@
+export const isDev = true

src/constants/react-query.ts

@@ -1 +1,3 @@
+import {QueryClient} from "@tanstack/react-query"
+
 export const queryClient = new QueryClient()

src/main.tsx

@@ -1,17 +1,8 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import {createBrowserRouter, RouterProvider,} from "react-router-dom";
-import RootRoute from "~/routes/Root";
+import React from "react"
+import ReactDOM from "react-dom/client"
 
-const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <RootRoute />,
-    },
-]);
+import App from "~/App"
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLDivElement).render(
-    <React.StrictMode>
-        <RouterProvider router={router} />
-    </React.StrictMode>
-);
+	<App />,
+)

src/route-widgets/root/EmailForm/DetectEmailAutofillService.tsx

@@ -1,7 +1,23 @@
-import {ReactElement, useCallback, useEffect, useRef, useState} from "react"
-import {Alert, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Grid,} from "@mui/material"
 import {MdCheck} from "react-icons/md"
 import {useSessionStorage} from "react-use"
+import React, {
+	ReactElement,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	Alert,
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	Grid,
+} from "@mui/material"
 
 export interface DetectEmailAutofillServiceProps {
 	domains: string[]

src/route-widgets/root/EmailForm/EmailForm.tsx

@@ -1,13 +1,16 @@
-import {ReactElement} from "react"
 import {useFormik} from "formik"
-import useSchema, {Form} from "./use-schema"
-import {signup} from "~/apis"
 import {MdEmail} from "react-icons/md"
+import React, {ReactElement} from "react"
+
 import {InputAdornment, TextField} from "@mui/material"
-import DetectEmailAutofillService from "./DetectEmailAutofillService"
-import {handleErrors} from "~/utils"
+
 import {MultiStepFormElement, SimpleForm} from "~/components"
-import {ServerSettings} from "~/types";
+import {ServerSettings} from "~/types"
+import {signup} from "~/apis"
+import {handleErrors} from "~/utils"
+
+import DetectEmailAutofillService from "./DetectEmailAutofillService"
+import useSchema, {Form} from "./use-schema"
 
 interface EmailFormProps {
 	serverSettings: ServerSettings

src/route-widgets/root/EmailForm/index.ts

@@ -0,0 +1 @@
+export {default as EmailForm} from "./EmailForm"

src/route-widgets/root/EmailForm/use-schema.ts

@@ -1,6 +1,7 @@
 import * as yup from "yup"
+
 import {checkIsDomainDisposable} from "~/apis"
-import {ServerSettings} from "~/types";
+import {ServerSettings} from "~/types"
 
 export interface Form {
 	email: string

src/route-widgets/root/GenerateEmailReportsForm.tsx

@@ -1,7 +1,8 @@
-import {ReactElement} from "react"
-import {Box, Button, Grid, Typography} from "@mui/material"
 import {FaLongArrowAltRight} from "react-icons/fa"
 import {TiCancel} from "react-icons/ti"
+import React, {ReactElement} from "react"
+
+import {Box, Button, Grid, Typography} from "@mui/material"
 
 export interface GenerateEmailReportsFormProps {
 	onYes: () => void

src/route-widgets/root/PasswordForm.tsx

@@ -1,12 +1,15 @@
-import {ReactElement, useMemo} from "react"
 import * as yup from "yup"
 import {useFormik} from "formik"
-import {Box, Grid, InputAdornment, Typography} from "@mui/material"
 import {MdCheckCircle, MdChevronRight, MdLock} from "react-icons/md"
-import {LoadingButton} from "@mui/lab"
-import {PasswordField} from "components"
-import {encryptString, handleErrors} from "~/utils"
 import {generateKey} from "openpgp"
+import React, {ReactElement, useMemo} from "react"
+
+import {LoadingButton} from "@mui/lab"
+import {Box, Grid, InputAdornment, Typography} from "@mui/material"
+
+import {PasswordField} from "~/components"
+import {encryptString, handleErrors} from "~/utils"
+import {isDev} from "~/constants/development"
 
 export interface PasswordFormProps {
 	email: string

src/route-widgets/root/YouGotMail.tsx

@@ -1,5 +1,7 @@
-import {ReactElement} from "react"
+import React, {ReactElement} from "react"
+
 import {Grid, Typography} from "@mui/material"
+
 import {MultiStepFormElement, OpenMailButton} from "~/components"
 
 export interface YouGotMailProps {

src/routes/Root.tsx

@@ -1,29 +1,24 @@
-import {ReactElement} from "react";
-import SingleElementWrapper from "~/components/SingleElementWrapper";
-import MultiStepForm from "~/components/MultiStepForm";
-import EmailForm from "~/route-widgets/root/EmailForm";
-import YouGotMail from "~/route-widgets/root/YouGotMail";
-import LoadingScreen from "~/LoadingScreen";
+import React, {ReactElement} from "react"
+
+import {MultiStepForm, SingleElementWrapper} from "~/components"
+import EmailForm from "~/route-widgets/root/EmailForm/EmailForm"
+import LoadingScreen from "~/LoadingScreen"
+import YouGotMail from "~/route-widgets/root/YouGotMail"
 
 export default function RootRoute(): ReactElement {
-    return (
-        <LoadingScreen />
-    )
+	return <LoadingScreen />
 
-    return (
-        <SingleElementWrapper>
-            <MultiStepForm
-                steps={[
-                    () => (
-                        <EmailForm
-                            serverSettings={{}}
-                            onSignUp={() => null}
-                        />
-                    ),
-                    () => <YouGotMail domain={""} />,
-                ]}
-                index={0}
-            />
-        </SingleElementWrapper>
-    );
+	return (
+		<SingleElementWrapper>
+			<MultiStepForm
+				steps={[
+					() => (
+						<EmailForm serverSettings={{}} onSignUp={() => null} />
+					),
+					() => <YouGotMail domain={""} />,
+				]}
+				index={0}
+			/>
+		</SingleElementWrapper>
+	)
 }

vite.config.ts

@@ -1,13 +1,14 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import * as path from "path";
+import * as path from "path"
+import {defineConfig} from "vite"
+
+import react from "@vitejs/plugin-react"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "~": path.resolve(__dirname, "src"),
-    }
-  }
+	plugins: [react()],
+	resolve: {
+		alias: {
+			"~": path.resolve(__dirname, "src"),
+		},
+	},
 })