codeforlife 2.7.2 → 2.8.1

package/src/components/page/Banner.tsx

@@ -1,10 +1,10 @@
 import { Stack, Typography } from "@mui/material"
 
+import Image, { type ImageProps } from "../Image"
 import { LinkButton, type LinkButtonProps } from "../router"
 import { primary, secondary, tertiary } from "../../theme/colors"
-import palette from "../../theme/palette"
-import Image, { type ImageProps } from "../Image"
 import Section from "./Section"
+import palette from "../../theme/palette"
 
 export interface BannerProps<
   Button1State extends Record<string, any> = Record<string, any>,
@@ -32,7 +32,7 @@ const Banner = <
   bgcolor = "primary",
 }: BannerProps<Button1State, Button2State>) => {
   // @ts-expect-error guaranteed to be in palette
-  const contrastText = palette[bgcolor].contrastText
+  const contrastText = palette[bgcolor].contrastText as string
 
   return (
     <Section

package/src/components/page/Notification.tsx

@@ -3,11 +3,11 @@ import {
   ErrorOutline as ErrorOutlineIcon,
   InfoOutlined as InfoOutlinedIcon,
 } from "@mui/icons-material"
+import { type FC, type ReactNode, useEffect, useState } from "react"
 import { IconButton, Stack, Typography } from "@mui/material"
-import { useEffect, useState, type FC, type ReactNode } from "react"
 
-import palette from "../../theme/palette"
 import Section from "./Section"
+import palette from "../../theme/palette"
 
 export interface NotificationProps {
   open?: boolean
@@ -33,7 +33,7 @@ const Notification: FC<NotificationProps> = ({
   if (!_open) return <></>
 
   // @ts-expect-error guaranteed to be in palette
-  const contrastText = palette[bgcolor].contrastText
+  const contrastText = palette[bgcolor].contrastText as string
 
   return (
     <Section

package/src/components/page/Page.tsx

@@ -1,14 +1,14 @@
-import { Children, useEffect } from "react"
-import { useLocation, type Location } from "react-router-dom"
+import { Children, type JSX, useEffect } from "react"
+import { type Location, useLocation } from "react-router-dom"
 
+import Notification, { type NotificationProps } from "./Notification"
 import {
-  useSession,
   type SessionMetadata,
   type UseSessionChildren,
   type UseSessionChildrenFunction,
   type UseSessionOptions,
+  useSession,
 } from "../../hooks/auth"
-import Notification, { type NotificationProps } from "./Notification"
 
 export type PageState = {
   notifications: Array<{
@@ -54,7 +54,7 @@ const Page = <
           const childrenArray = Children.toArray(children)
 
           notifications.forEach((notification, index) => {
-            childrenArray.splice(
+            void childrenArray.splice(
               notification.index ?? index,
               0,
               <Notification {...notification.props} />,

package/src/components/page/Section.tsx

@@ -1,7 +1,7 @@
 import {
   Box,
-  Container,
   type BoxProps,
+  Container,
   type ContainerProps,
 } from "@mui/material"
 import type { FC } from "react"

package/src/components/page/TabBar.tsx

@@ -2,20 +2,20 @@ import {
   ChevronLeft as ChevronLeftIcon,
   ChevronRight as ChevronRightIcon,
 } from "@mui/icons-material"
+import { type FC, type ReactNode, useEffect, useState } from "react"
 import {
   IconButton,
   Tab,
+  type TabScrollButtonProps,
   Tabs,
   Typography,
-  type TabScrollButtonProps,
 } from "@mui/material"
-import { useEffect, useState, type FC, type ReactNode } from "react"
-import { generatePath, useNavigate, useParams } from "react-router-dom"
 import { object as YupObject, string as YupString } from "yup"
+import { generatePath, useNavigate, useParams } from "react-router-dom"
 
+import Section from "./Section"
 import { primary } from "../../theme/colors"
 import { tryValidateSync } from "../../utils/schema"
-import Section from "./Section"
 
 export interface TabBarProps {
   header: string
@@ -79,7 +79,7 @@ const TabBar: FC<TabBarProps> = ({ header, tabs, originalPath, value = 0 }) => {
       >
         <Tabs
           value={_value}
-          onChange={(_, value) => {
+          onChange={(_, value: number) => {
             navigate(
               generatePath(originalPath, {
                 tab: paths[value],

package/src/components/router/Link.tsx

@@ -1,4 +1,5 @@
 import { Link as MuiLink, type LinkProps as MuiLinkProps } from "@mui/material"
+import { type JSX } from "react"
 import { Link as RouterLink } from "react-router-dom"
 
 import { type LinkProps as RouterLinkProps } from "../../utils/router"
@@ -15,7 +16,7 @@ const Link: {
     props: LinkProps<"to", State>,
   ): JSX.Element
 } = (props: LinkProps<"delta"> | LinkProps<"to">) => {
-  // @ts-expect-error
+  // @ts-expect-error props are assignable
   return <MuiLink component={RouterLink} {...props} />
 }
 

package/src/components/router/LinkButton.tsx

@@ -1,4 +1,5 @@
 import { Button, type ButtonProps } from "@mui/material"
+import { type JSX } from "react"
 import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"

package/src/components/router/LinkIconButton.tsx

@@ -1,4 +1,5 @@
 import { IconButton, type IconButtonProps } from "@mui/material"
+import { type JSX } from "react"
 import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"

package/src/components/router/LinkListItem.tsx

@@ -1,4 +1,5 @@
 import { ListItem, type ListItemProps } from "@mui/material"
+import { type JSX } from "react"
 import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"

package/src/components/router/LinkTab.tsx

@@ -1,4 +1,5 @@
 import { Tab, type TabProps } from "@mui/material"
+import { type JSX } from "react"
 import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"

package/src/components/router/Navigate.tsx

@@ -1,7 +1,7 @@
-import { useEffect } from "react"
+import { type JSX, useEffect } from "react"
 import { type To } from "react-router-dom"
 
-import { useNavigate, type NavigateOptions } from "../../hooks"
+import { type NavigateOptions, useNavigate } from "../../hooks"
 
 export type NavigateProps<
   Override extends "delta" | "to",

package/src/components/router/index.tsx

@@ -1,12 +1,9 @@
-export * from "./Link"
-export { default as Link } from "./Link"
-export * from "./LinkButton"
-export { default as LinkButton } from "./LinkButton"
-export * from "./LinkIconButton"
-export { default as LinkIconButton } from "./LinkIconButton"
-export * from "./LinkListItem"
-export { default as LinkListItem } from "./LinkListItem"
-export * from "./LinkTab"
-export { default as LinkTab } from "./LinkTab"
-export * from "./Navigate"
-export { default as Navigate } from "./Navigate"
+export { default as Link, type LinkProps } from "./Link"
+export { default as LinkButton, type LinkButtonProps } from "./LinkButton"
+export {
+  default as LinkIconButton,
+  type LinkIconButtonProps,
+} from "./LinkIconButton"
+export { default as LinkListItem, type LinkListItemProps } from "./LinkListItem"
+export { default as LinkTab, type LinkTabProps } from "./LinkTab"
+export { default as Navigate, type NavigateProps } from "./Navigate"

package/src/components/table/CellStack.tsx

@@ -1,10 +1,10 @@
-import { type FC } from "react"
 import {
   Stack,
+  type StackProps,
   TableCell,
   type TableCellProps,
-  type StackProps,
 } from "@mui/material"
+import { type FC } from "react"
 
 export interface CellStackProps extends StackProps {
   cellProps?: TableCellProps

package/src/components/table/index.tsx

@@ -1,7 +1,5 @@
-export { default as Table } from "./Table"
-export * from "./Table"
-export { default as CellStack } from "./CellStack"
-export * from "./CellStack"
+export { default as Table, type TableProps } from "./Table"
+export { default as CellStack, type CellStackProps } from "./CellStack"
 export {
   TableCell as Cell,
   type TableCellProps as CellProps,

package/src/features/InactiveDialog.tsx

@@ -1,5 +1,5 @@
-import type React from "react"
 import { Button, Dialog, Typography } from "@mui/material"
+import { type FC } from "react"
 
 import { Countdown } from "../components"
 
@@ -8,7 +8,7 @@ export interface InactiveDialogProps {
   onClose: () => void
 }
 
-const InactiveDialog: React.FC<InactiveDialogProps> = ({ open, onClose }) => {
+const InactiveDialog: FC<InactiveDialogProps> = ({ open, onClose }) => {
   return (
     <Dialog open={open} onClose={onClose}>
       <Typography variant="h5" textAlign="center">

package/src/features/ScreenTimeDialog.tsx

@@ -1,18 +1,15 @@
-import type React from "react"
 import { Button, Dialog, Typography } from "@mui/material"
+import { type FC } from "react"
 
+import BrainImage from "../images/svg/brain.svg"
 import { Image } from "../components"
-import BrainImage from "../public/images/brain.svg"
 
 export interface ScreenTimeDialogProps {
   open: boolean
   onClose: () => void
 }
 
-const ScreenTimeDialog: React.FC<ScreenTimeDialogProps> = ({
-  open,
-  onClose,
-}) => {
+const ScreenTimeDialog: FC<ScreenTimeDialogProps> = ({ open, onClose }) => {
   return (
     <Dialog open={open} onClose={onClose} maxWidth="sm">
       <Image src={BrainImage} alt="brain" maxWidth={100} marginY={3} />

package/src/hooks/api.tsx

@@ -1,4 +1,4 @@
-import { useState, type Dispatch, type SetStateAction } from "react"
+import { type Dispatch, type SetStateAction, useState } from "react"
 
 export type Pagination = { page: number; limit: number; offset: number }
 export type SetPagination = Dispatch<
@@ -22,10 +22,12 @@ export function usePagination(
 
   const setPagination: SetPagination = value => {
     _setPagination(({ page: previousPage, limit: previousLimit }) => {
-      let { page, limit } =
+      const pagination =
         typeof value === "function"
           ? value({ page: previousPage, limit: previousLimit })
           : value
+      let page = pagination.page
+      const limit = pagination.limit
 
       if (limit !== previousLimit) page = 0
 

package/src/hooks/auth.tsx

@@ -1,23 +1,24 @@
 import * as yup from "yup"
+import { type ReactNode, useCallback, useEffect, useState } from "react"
 import Cookies from "js-cookie"
-import { useEffect, useState, useCallback, type ReactNode } from "react"
-import { createSearchParams } from "react-router-dom"
 import type { TypedUseMutation } from "@reduxjs/toolkit/query/react"
+import { createSearchParams } from "react-router-dom"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useSelector } from "react-redux"
 
 import { type AuthFactor, type User } from "../api"
-import { generateSecureRandomString } from "../utils/general"
 import {
-  makeOAuth2StorageKey,
-  generateOAuth2CodeChallenge,
-  type OAuth2CodeChallengeLengths,
   type OAuth2CodeChallenge,
-  type OAuth2RequestCodeUrlSearchParams,
+  type OAuth2CodeChallengeLengths,
   type OAuth2ReceiveCodeUrlSearchParams,
+  type OAuth2RequestCodeUrlSearchParams,
+  generateOAuth2CodeChallenge,
+  makeOAuth2StorageKey,
 } from "../utils/auth"
+import { useLocation, useNavigate, useSearchParams } from "./router"
 import { type ExchangeOAuth2CodeArg } from "../api/endpoints/session"
-import { useSearchParams, useLocation, useNavigate } from "./router"
 import { SESSION_METADATA_COOKIE_NAME } from "../settings"
+import { generateSecureRandomString } from "../utils/general"
 import { selectIsLoggedIn } from "../slices/session"
 
 // -----------------------------------------------------------------------------
@@ -232,7 +233,7 @@ interface UseOAuth2KwArgs<SessionMetadata>
 export type OAuth2 = [string, OAuth2RequestCodeUrlSearchParams] | []
 
 // https://datatracker.ietf.org/doc/html/rfc7636
-function _useOAuth2<SessionMetadata>({
+function useOAuth2Internal<SessionMetadata>({
   provider,
   authUri,
   clientId,
@@ -389,7 +390,8 @@ export const useOAuth2: {
     | UseOAuth2KwArgs<_SessionMetadata>
     | BaseUseOAuth2KwArgs<SessionMetadata>,
 ): OAuth2 => {
-  return "useSessionMetadata" in kwargs
-    ? _useOAuth2(kwargs)
-    : _useOAuth2({ ...kwargs, useSessionMetadata })
+  return useOAuth2Internal(
+    // @ts-expect-error value is assignable
+    "useSessionMetadata" in kwargs ? kwargs : { ...kwargs, useSessionMetadata },
+  )
 }

package/src/hooks/{general.ts → general.tsx}

@@ -1,9 +1,9 @@
 import {
-  useEffect,
-  useState,
   type DependencyList,
   type Dispatch,
   type SetStateAction,
+  useEffect,
+  useState,
 } from "react"
 
 export function useExternalScript<EventType extends keyof HTMLElementEventMap>({
@@ -27,7 +27,7 @@ export function useExternalScript<EventType extends keyof HTMLElementEventMap>({
     const script = document.createElement("script")
 
     Object.entries(props).forEach(([key, value]) => {
-      // @ts-expect-error
+      // @ts-expect-error value is assignable
       script[key] = value
     })
 

package/src/hooks/router.tsx

@@ -1,25 +1,25 @@
-import { useEffect, type ReactNode } from "react"
 import {
+  type Location,
+  type Params,
+  type To,
+  type NavigateOptions as _NavigateOptions,
   useLocation as _useLocation,
   useNavigate as _useNavigate,
   useParams as _useParams,
   useSearchParams as _useSearchParams,
-  type Location,
-  type NavigateOptions as _NavigateOptions,
-  type Params,
-  type To,
 } from "react-router-dom"
-import { object as objectSchema, type ObjectShape } from "yup"
+import { type ObjectShape, object as objectSchema } from "yup"
+import { type ReactNode, useEffect } from "react"
 
-import { type PageState } from "../components/page"
-import { type ReadOnly } from "../utils/router"
 import {
-  tryValidateSync,
   type ObjectSchemaFromShape,
   type TryValidateSyncOnErrorRT,
   type TryValidateSyncOptions,
   type TryValidateSyncRT,
+  tryValidateSync,
 } from "../utils/schema"
+import { type PageState } from "../components/page"
+import { type ReadOnly } from "../utils/router"
 
 export type NavigateOptions<
   State extends Record<string, any> = Record<string, any>,

package/src/middlewares/session.ts

@@ -2,15 +2,20 @@ import { type Middleware, isAction } from "@reduxjs/toolkit"
 
 import { logout } from "../utils/auth"
 
-export const logoutMiddleware: Middleware = _ => next => action => {
-  const response = next(action)
+export const logoutMiddleware: Middleware =
+  (
+    _, // eslint-disable-line @typescript-eslint/no-unused-vars
+  ) =>
+  next =>
+  action => {
+    const response = next(action)
 
-  // The backend should delete these cookie upon calling the logout endpoint.
-  // However, as a precaution, we also delete the session cookies in case the
-  // backend fails to delete the cookies.
-  if (isAction(action) && action.type === "session/logout") {
-    logout()
-  }
+    // The backend should delete these cookie upon calling the logout endpoint.
+    // However, as a precaution, we also delete the session cookies in case the
+    // backend fails to delete the cookies.
+    if (isAction(action) && action.type === "session/logout") {
+      logout()
+    }
 
-  return response
-}
+    return response
+  }

package/src/settings/index.ts

@@ -1,10 +1,7 @@
 // Shorthand to access environment variables.
-export default Object.defineProperty(import.meta.env, "vite", {
-  writable: false,
-  value: new Proxy(import.meta.env, {
-    get: (target, name: string) => target[`VITE_${name}`],
-  }),
-}) as ImportMetaEnv & { vite: Record<string, string> }
+export default new Proxy(import.meta.env, {
+  get: (target, name: string) => target[`VITE_${name}`] as string,
+}) as Record<string, string>
 
 export * from "./custom"
 export * from "./vite"

package/src/setupTests.ts

@@ -1 +1,2 @@
+// TODO: investigate if this can be moved to the workspace
 import "@testing-library/jest-dom/vitest"

package/src/theme/ThemedBox.tsx

@@ -1,27 +1,27 @@
-import {
-  Circle as CircleIcon,
-  Hexagon as HexagonIcon,
-} from "@mui/icons-material"
 import {
   Box,
-  ThemeProvider,
-  buttonClasses,
-  createTheme,
-  responsiveFontSizes,
   type BoxProps,
   type CSSObject,
   type PaletteColor,
   type SxProps,
   type ThemeOptions,
+  ThemeProvider,
+  buttonClasses,
+  createTheme,
+  responsiveFontSizes,
 } from "@mui/material"
+import {
+  Circle as CircleIcon,
+  Hexagon as HexagonIcon,
+} from "@mui/icons-material"
 import { type CommonProps } from "@mui/material/OverridableComponent"
 import type React from "react"
 
-import { themeOptions } from "."
 import { getStyleOverrides, includesClassNames } from "../utils/theme"
 import { primary, secondary, tertiary } from "./colors"
 import type Components from "./components/_components"
 import palette from "./palette"
+import { themeOptions } from "."
 
 export interface ThemedBoxProps extends BoxProps {
   options?: ThemeOptions

package/src/theme/components/MuiButton.ts

@@ -1,8 +1,8 @@
 import { buttonClasses } from "@mui/material"
 
+import type Components from "./_components"
 import { includesClassNames } from "../../utils/theme"
 import typography from "../typography"
-import type Components from "./_components"
 
 const MuiButton: Components["MuiButton"] = {
   defaultProps: {

package/src/theme/components/MuiCardActions.tsx

@@ -1,5 +1,5 @@
-import spacing from "../spacing"
 import type Components from "./_components"
+import spacing from "../spacing"
 
 const MuiCardActions: Components["MuiCardActions"] = {
   styleOverrides: {

package/src/theme/components/MuiContainer.ts

@@ -1,6 +1,6 @@
-import spacing from "../spacing"
 import type Components from "./_components"
 import { getFlexStyleOverrides } from "./_components"
+import spacing from "../spacing"
 
 const MuiContainer: Components["MuiContainer"] = {
   defaultProps: {

package/src/theme/components/MuiFormControlLabel.ts

@@ -1,7 +1,7 @@
 import { typographyClasses } from "@mui/material"
 
-import { form } from "../typography"
 import type Components from "./_components"
+import { form } from "../typography"
 
 const MuiFormControlLabel: Components["MuiFormControlLabel"] = {
   styleOverrides: {

package/src/theme/components/MuiFormHelperText.ts

@@ -1,5 +1,5 @@
-import { form } from "../typography"
 import type Components from "./_components"
+import { form } from "../typography"
 
 const MuiFormHelperText: Components["MuiFormHelperText"] = {
   styleOverrides: {

package/src/theme/components/MuiInputBase.ts

@@ -1,5 +1,5 @@
-import typography from "../typography"
 import type Components from "./_components"
+import typography from "../typography"
 
 const MuiInputBase: Components["MuiInputBase"] = {
   styleOverrides: {

package/src/theme/components/MuiLink.ts

@@ -1,6 +1,6 @@
+import type Components from "./_components"
 import { includesClassNames } from "../../utils/theme"
 import typography from "../typography"
-import type Components from "./_components"
 
 const MuiLink: Components["MuiLink"] = {
   defaultProps: {

package/src/theme/components/MuiListItemText.ts

@@ -1,7 +1,7 @@
 import { listItemTextClasses } from "@mui/material"
 
-import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
+import { includesClassNames } from "../../utils/theme"
 
 const MuiListItemText: Components["MuiListItemText"] = {
   styleOverrides: {

package/src/theme/components/MuiMenuItem.ts

@@ -1,5 +1,5 @@
-import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
+import { includesClassNames } from "../../utils/theme"
 
 const MuiMenuItem: Components["MuiMenuItem"] = {
   styleOverrides: {

package/src/theme/components/MuiSelect.ts

@@ -1,11 +1,11 @@
-import { type StyleOverridesWithRoot } from "./_components"
 import type Components from "./_components"
+import { type StyleOverridesWithRoot } from "./_components"
 
 const MuiSelect: Components["MuiSelect"] = {
   defaultProps: {
     color: "black",
   },
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+
   styleOverrides: {
     root: {
       borderRadius: "0px",

package/src/theme/components/MuiTable.ts

@@ -1,8 +1,8 @@
 import { tableCellClasses } from "@mui/material"
 
+import type Components from "./_components"
 import { includesClassNames } from "../../utils/theme"
 import typography from "../typography"
-import type Components from "./_components"
 
 const MuiTable: Components["MuiTable"] = {
   styleOverrides: {

package/src/theme/components/MuiTableBody.ts

@@ -1,5 +1,5 @@
-import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
+import { includesClassNames } from "../../utils/theme"
 
 const MuiTableBody: Components["MuiTableBody"] = {
   styleOverrides: {

package/src/theme/components/MuiTableHead.ts

@@ -1,7 +1,7 @@
-import { typographyClasses, tableCellClasses } from "@mui/material"
+import { tableCellClasses, typographyClasses } from "@mui/material"
 
-import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
+import { includesClassNames } from "../../utils/theme"
 
 const MuiTableHead: Components["MuiTableHead"] = {
   styleOverrides: {

package/src/theme/components/MuiTextField.ts

@@ -8,10 +8,10 @@ import {
   svgIconClasses,
 } from "@mui/material"
 
+import type Components from "./_components"
 import { includesClassNames } from "../../utils/theme"
 import palette from "../palette"
 import typography from "../typography"
-import type Components from "./_components"
 
 const MuiTextField: Components["MuiTextField"] = {
   defaultProps: {
@@ -31,7 +31,7 @@ const MuiTextField: Components["MuiTextField"] = {
               },
               border: "0px !important",
               borderRadius: "0px !important",
-              // @ts-expect-error
+              // @ts-expect-error value is assignable
               backgroundColor: `${palette.info!.main} !important`,
             }
           : {
@@ -41,7 +41,7 @@ const MuiTextField: Components["MuiTextField"] = {
             }),
       },
       [`& > .${inputBaseClasses.root}.${inputBaseClasses.error}`]: {
-        // @ts-expect-error
+        // @ts-expect-error value is assignable
         border: `1px solid ${palette.error!.main} !important`,
       },
       [`& .${outlinedInputClasses.root}.${inputClasses.focused} > fieldset`]: {