Sort imports

.eslintrc.json

@@ -18,6 +18,12 @@
     "dist"
   ],
   "rules": {
+    "sort-imports": [
+      "error",
+      {
+        "allowSeparatedGroups": true
+      }
+    ],
     "@typescript-eslint/consistent-type-imports": [
       2,
       {
@@ -65,4 +71,4 @@
       }
     }
   ]
-}
+}

src/App.tsx

@@ -1,8 +1,8 @@
 import { CssBaseline, ThemeProvider } from "@mui/material"
 import type { FC } from "react"
 
-import theme from "./app/theme"
 import Router from "./router"
+import theme from "./app/theme"
 
 const App: FC = () => {
   return (

src/api/authFactor.ts

@@ -1,15 +1,15 @@
 import {
+  type AuthFactor,
   getReadAuthFactorEndpoints,
   urls,
-  type AuthFactor,
 } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type CreateArg,
   type CreateResult,
   type DestroyArg,
   type DestroyResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
 
 import api from "."

src/api/klass.ts

@@ -1,13 +1,13 @@
-import { getReadClassEndpoints, urls, type Class } from "codeforlife/api"
+import { type Class, getReadClassEndpoints, urls } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type CreateArg,
   type CreateResult,
   type DestroyArg,
   type DestroyResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
 
 import api from "."

src/api/school.ts

@@ -1,12 +1,12 @@
-import { getReadSchoolEndpoints, urls, type School } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type CreateArg,
   type CreateResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
+import { type School, getReadSchoolEndpoints, urls } from "codeforlife/api"
 
 import api from "."
 

src/api/schoolTeacherInvitation.ts

@@ -1,7 +1,4 @@
-import { type User } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type Arg,
   type CreateArg,
   type CreateResult,
@@ -14,7 +11,10 @@ import {
   type RetrieveResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
+import { type User } from "codeforlife/api"
 
 import api from "."
 

src/api/sso.ts

@@ -6,8 +6,8 @@ import {
   type Student,
   type User,
 } from "codeforlife/api"
-import { type SessionMetadata } from "codeforlife/hooks"
 import { type Arg } from "codeforlife/utils/api"
+import { type SessionMetadata } from "codeforlife/hooks"
 
 import api from "."
 

src/api/student.ts

@@ -1,14 +1,14 @@
-import { urls, type Student, type User } from "codeforlife/api"
 import {
-  tagData,
   type Arg,
   type BulkCreateArg,
   type BulkCreateResult,
   type BulkDestroyArg,
   type BulkDestroyResult,
   type BulkUpdateArg,
   type BulkUpdateResult,
+  tagData,
 } from "codeforlife/utils/api"
+import { type Student, type User, urls } from "codeforlife/api"
 
 import api from "."
 

src/api/teacher.ts

@@ -1,14 +1,14 @@
-import { urls, type Teacher, type User } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type Arg,
   type CreateResult,
   type DestroyArg,
   type DestroyResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
+import { type Teacher, type User, urls } from "codeforlife/api"
 
 import api from "."
 

src/api/user.ts

@@ -1,15 +1,15 @@
-import { getReadUserEndpoints, urls, type User } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type Arg,
   type CreateArg,
   type CreateResult,
   type DestroyArg,
   type DestroyResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
+import { type User, getReadUserEndpoints, urls } from "codeforlife/api"
 
 import api from "."
 

src/app/hooks.ts

@@ -5,6 +5,7 @@
 // for importing and re-exporting the typed versions of hooks.
 /* eslint-disable @typescript-eslint/no-restricted-imports */
 import { useDispatch, useSelector } from "react-redux"
+
 import type { AppDispatch, RootState } from "./store"
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`

src/app/schemas.ts

@@ -1,5 +1,5 @@
+import { type Schema, type StringSchema, string as YupString } from "yup"
 import CryptoJS from "crypto-js"
-import { string as YupString, type Schema, type StringSchema } from "yup"
 
 type Options<S extends Schema, Extras = {}> = Partial<{ schema: S } & Extras>
 

src/app/store.ts

@@ -1,6 +1,5 @@
 import type { Action, ThunkAction } from "@reduxjs/toolkit"
 import { combineSlices } from "@reduxjs/toolkit"
-
 import { makeStore } from "codeforlife/utils/store"
 
 import api from "../api"

src/app/theme.ts

@@ -1,9 +1,8 @@
 import {
+  type ThemeOptions,
   createTheme,
   responsiveFontSizes,
-  type ThemeOptions,
 } from "@mui/material"
-
 import { themeOptions as cflThemeOptions } from "codeforlife/theme"
 
 // Unpack the base options to extend the theme

src/components/OpenInEmailButtons.tsx

@@ -1,8 +1,7 @@
-import { MailOutline as MailOutlineIcon } from "@mui/icons-material"
-import { Stack } from "@mui/material"
 import { type FC } from "react"
-
 import { LinkButton } from "codeforlife/components/router"
+import { MailOutline as MailOutlineIcon } from "@mui/icons-material"
+import { Stack } from "@mui/material"
 
 export interface OpenInEmailButtonsProps {
   gmailFilters: string

src/components/form/LastNameField.tsx

@@ -1,8 +1,7 @@
+import { TextField, type TextFieldProps } from "codeforlife/components/form"
 import { type FC } from "react"
 import { string as YupString } from "yup"
 
-import { TextField, type TextFieldProps } from "codeforlife/components/form"
-
 export type LastNameFieldProps = Omit<
   TextFieldProps,
   "type" | "name" | "schema"

src/main.tsx

@@ -1,6 +1,6 @@
+import { Provider } from "react-redux"
 import React from "react"
 import { createRoot } from "react-dom/client"
-import { Provider } from "react-redux"
 
 import App from "./App"
 import store from "./app/store"

src/pages/emailVerification/EmailVerification.tsx

@@ -1,16 +1,15 @@
+import * as page from "codeforlife/components/page"
+import * as yup from "yup"
+import { type FC, useEffect } from "react"
 import {
   Send as SendIcon,
   SentimentVeryDissatisfied as SentimentVeryDissatisfiedIcon,
 } from "@mui/icons-material"
-import { type SvgIconProps } from "@mui/material"
-import { type FC, useEffect } from "react"
-import * as yup from "yup"
-
-import * as page from "codeforlife/components/page"
 import { useNavigate, useParams, useSearchParams } from "codeforlife/hooks"
+import { type SvgIconProps } from "@mui/material"
 
-import { paths } from "../../router"
 import Status from "./Status"
+import { paths } from "../../router"
 
 export interface EmailVerificationProps {}
 

src/pages/emailVerification/Status.tsx

@@ -1,15 +1,14 @@
-import { Stack, Typography } from "@mui/material"
 import { type FC, type ReactElement } from "react"
-
-import { Link } from "codeforlife/components/router"
+import { Stack, Typography } from "@mui/material"
 import { ThemedBox, type ThemedBoxProps } from "codeforlife/theme"
+import { Link } from "codeforlife/components/router"
 
-import { themeOptions } from "../../app/theme"
 import {
   OpenInEmailButtons,
   type OpenInEmailButtonsProps,
 } from "../../components"
 import { paths } from "../../router"
+import { themeOptions } from "../../app/theme"
 
 export interface StatusProps {
   userType: ThemedBoxProps["userType"]

src/pages/home/AboutUs.tsx

@@ -1,14 +1,13 @@
-import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
 import { Unstable_Grid2 as Grid, Stack, Typography } from "@mui/material"
+import { Link, LinkButton } from "codeforlife/components/router"
+import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
 import { type FC } from "react"
-
 import { Image } from "codeforlife/components"
-import { Link, LinkButton } from "codeforlife/components/router"
 
 import ControllerIcon from "../../images/icon_controller.png"
-import TicketIcon from "../../images/icon_free.png"
 import GlobeIcon from "../../images/icon_globe.png"
 import PieChartIcon from "../../images/icon_piechart.png"
+import TicketIcon from "../../images/icon_free.png"
 import { paths } from "../../router"
 
 const Column: FC<{

src/pages/home/CodingClubs.tsx

@@ -1,7 +1,6 @@
-import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
 import { Stack, Typography } from "@mui/material"
+import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
 import { type FC } from "react"
-
 import { LinkButton } from "codeforlife/components/router"
 
 import { paths } from "../../router"

src/pages/home/Home.tsx

@@ -1,8 +1,7 @@
-import { useTheme } from "@mui/material"
-import { type FC } from "react"
-
 import * as page from "codeforlife/components/page"
+import { type FC } from "react"
 import { useLocation } from "codeforlife/hooks"
+import { useTheme } from "@mui/material"
 
 import AboutUs from "./AboutUs"
 import CodingClubs from "./CodingClubs"

src/pages/home/Quotes.tsx

@@ -1,7 +1,6 @@
 import { Unstable_Grid2 as Grid, Stack, Typography } from "@mui/material"
-import { type FC } from "react"
-
 import { Image, type ImageProps } from "codeforlife/components"
+import { type FC } from "react"
 import { Link } from "codeforlife/components/router"
 
 import ReubenPhoto from "../../images/reuben.png"

src/pages/home/TargetAudience.tsx

@@ -1,9 +1,8 @@
-import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
-import { Stack, type SxProps, Typography, useTheme } from "@mui/material"
-import { type FC } from "react"
-
 import { Image, type ImageProps, OrderedGrid } from "codeforlife/components"
 import { LinkButton, type LinkButtonProps } from "codeforlife/components/router"
+import { Stack, type SxProps, Typography, useTheme } from "@mui/material"
+import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
+import { type FC } from "react"
 
 import EducateImage from "../../images/dashboard_educate.png"
 import PlayImage from "../../images/dashboard_play.png"

src/pages/login/BaseForm.tsx

@@ -1,8 +1,7 @@
-import { Stack, Typography, useTheme } from "@mui/material"
-import { type FormikValues } from "formik"
-
 import { Form, type FormProps } from "codeforlife/components/form"
+import { Stack, Typography, useTheme } from "@mui/material"
 import { ThemedBox, type ThemedBoxProps } from "codeforlife/theme"
+import { type FormikValues } from "formik"
 
 import { themeOptions } from "../../app/theme"
 

src/pages/login/IndyForm.tsx

@@ -1,14 +1,13 @@
+import * as form from "codeforlife/components/form"
 import { Stack, Typography } from "@mui/material"
 import type { FC } from "react"
-
-import * as form from "codeforlife/components/form"
 import { Link } from "codeforlife/components/router"
-import { useNavigate } from "codeforlife/hooks"
 import { submitForm } from "codeforlife/utils/form"
+import { useNavigate } from "codeforlife/hooks"
 
-import { useLoginWithEmailMutation } from "../../api/sso"
-import { paths } from "../../router"
 import BaseForm from "./BaseForm"
+import { paths } from "../../router"
+import { useLoginWithEmailMutation } from "../../api/sso"
 
 export interface IndyFormProps {}
 

src/pages/login/Login.tsx

@@ -1,17 +1,16 @@
-import { useEffect, type FC } from "react"
-import * as yup from "yup"
-
 import * as page from "codeforlife/components/page"
+import * as yup from "yup"
+import { type FC, useEffect } from "react"
 import {
   useNavigate,
   useSearchParams,
   useSessionMetadata,
 } from "codeforlife/hooks"
 
-import { paths } from "../../router"
-import IndyForm from "./IndyForm"
 import * as studentForms from "./studentForms"
 import * as teacherForms from "./teacherForms"
+import IndyForm from "./IndyForm"
+import { paths } from "../../router"
 
 export interface LoginProps {
   form: