codeforlife 2.7.2 → 2.8.0

package/src/theme/components/_components.ts

@@ -7,6 +7,7 @@ import {
 } from "@mui/material"
 import { type CommonProps } from "@mui/material/OverridableComponent"
 import { type OverridesStyleRules } from "@mui/material/styles/overrides"
+import { type TypographyOptions } from "@mui/material/styles/createTypography"
 
 import {
   getClassNames,
@@ -72,8 +73,9 @@ export function getFontStyleOverrides(props: CommonProps): CSSObject {
   ;["h1", "h2", "h3", "h4", "h5", "h6", "body1", "body2"]
     .filter(className => className in typography)
     .forEach(className => {
-      // @ts-expect-error
-      const typographyClass = typography[className]
+      const typographyClass = typography[
+        className as keyof TypographyOptions
+      ] as CSSObject
 
       if (includesClassNames(classNames, [className])) {
         styleOverrides = { ...styleOverrides, ...typographyClass }

package/src/theme/palette.ts

@@ -1,8 +1,8 @@
 import {
-  createTheme,
   type PaletteColor,
-  type PaletteOptions,
   type PaletteColorOptions,
+  type PaletteOptions,
+  createTheme,
 } from "@mui/material"
 
 import { primary, secondary, tertiary } from "./colors"

package/src/theme/typography.ts

@@ -1,6 +1,6 @@
 import {
-  type TypographyOptions,
   type CSSProperties,
+  type TypographyOptions,
 } from "@mui/material/styles/createTypography"
 
 // Pseudo typography variant for all form text.

package/src/utils/api.tsx

@@ -1,10 +1,10 @@
-import { CircularProgress } from "@mui/material"
 import type {
   FetchBaseQueryError,
+  TypedUseMutationResult,
   TypedUseQueryHookResult,
   TypedUseQueryStateResult,
-  TypedUseMutationResult,
 } from "@reduxjs/toolkit/query/react"
+import { CircularProgress } from "@mui/material"
 import { type ReactNode } from "react"
 
 import { type Optional, type Required, getNestedProperty } from "./general"
@@ -181,6 +181,7 @@ export function buildUrl(
       if (Array.isArray(values)) {
         for (const value of values) searchParams.push([key, String(value)])
       } else {
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string
         searchParams.push([key, String(values)])
       }
     }
@@ -244,7 +245,7 @@ export function tagData<Type extends string, M extends Model<any>>(
   }
 
   function getModelId(result: Result<M, any>) {
-    return getNestedProperty(result, id)
+    return getNestedProperty(result, id) as ModelId
   }
 
   return (result, error, arg) => {
@@ -305,7 +306,8 @@ export function handleResultState<QueryArg, ResultType>(
   children: (data: NonNullable<ResultType>) => ReactNode,
   options?: HandleQueryStateOptions,
 ): ReactNode {
-  const { data, isLoading, isSuccess, error } = result
+  const { data, isLoading, isSuccess } = result
+  const error = result.error as string | undefined
 
   const {
     loading: loadingNode = <CircularProgress />,

package/src/utils/auth.ts

@@ -1,9 +1,9 @@
 import Cookies from "js-cookie"
 
 import {
+  CSRF_COOKIE_NAME,
   SESSION_COOKIE_NAME,
   SESSION_METADATA_COOKIE_NAME,
-  CSRF_COOKIE_NAME,
 } from "../settings"
 import { generateSecureRandomString } from "./general"
 

package/src/utils/form.test.ts

@@ -1,4 +1,4 @@
-import { isDirty, getDirty, getCleanNames } from "./form"
+import { getCleanNames, getDirty, isDirty } from "./form"
 
 const VALUES = {
   name: { first: "Peter", last: "Parker" },

package/src/utils/form.ts

@@ -1,8 +1,8 @@
-import type { TypedMutationTrigger } from "@reduxjs/toolkit/query/react"
 import type { FieldValidator, FormikHelpers } from "formik"
-import { ValidationError, type Schema, type ValidateOptions } from "yup"
+import { type Schema, type ValidateOptions, ValidationError } from "yup"
+import type { TypedMutationTrigger } from "@reduxjs/toolkit/query/react"
 
-import { excludeKeyPaths, getNestedProperty, getKeyPaths } from "./general"
+import { excludeKeyPaths, getKeyPaths, getNestedProperty } from "./general"
 
 export type FormValues = Record<string, any>
 
@@ -92,14 +92,14 @@ export function submitForm<
   initialValues: Values,
   options?: SubmitFormOptions<Values, QueryArg, ResultType>,
 ): SubmitFormHandler<Values> {
-  let {
-    exclude = [],
+  const {
     include,
     onlyDirtyValues = false,
     then,
     catch: _catch,
     finally: _finally,
   } = options || {}
+  let { exclude = [] } = options || {}
 
   return (values, helpers) => {
     let arg =
@@ -118,7 +118,7 @@ export function submitForm<
 
     if (include) exclude = exclude.filter(name => !include.includes(name))
 
-    if (exclude.length) arg = excludeKeyPaths(arg, exclude)
+    if (exclude.length) arg = excludeKeyPaths(arg, exclude) as QueryArg
 
     trigger(arg)
       .unwrap()
@@ -171,8 +171,8 @@ export function isDirty<Values extends FormValues>(
   initialValues: Values,
   name: string,
 ): boolean {
-  const value = getNestedProperty(values, name)
-  const initialValue = getNestedProperty(initialValues, name)
+  const value: unknown = getNestedProperty(values, name)
+  const initialValue: unknown = getNestedProperty(initialValues, name)
 
   return value !== initialValue
 }
@@ -183,6 +183,11 @@ export function getCleanNames<Values extends FormValues>(
   names?: string[],
 ): string[] {
   return Object.entries(getDirty(values, initialValues, names))
-    .filter(([_, isDirty]) => !isDirty)
+    .filter(
+      ([
+        _, // eslint-disable-line @typescript-eslint/no-unused-vars
+        isDirty,
+      ]) => !isDirty,
+    )
     .map(([name]) => name)
 }

package/src/utils/general.test.ts

@@ -1,8 +1,8 @@
 import {
   excludeKeyPaths,
+  getKeyPaths,
   getNestedProperty,
   withKeyPaths,
-  getKeyPaths,
 } from "./general"
 
 // getNestedProperty
@@ -10,19 +10,19 @@ import {
 const PERSON = { father: { father: { name: "John" } } }
 
 test("get a nested property with dot notation", () => {
-  const name = getNestedProperty(PERSON, "father.father.name")
+  const name = getNestedProperty(PERSON, "father.father.name") as string
 
-  expect(name).equal("John")
+  expect(name).toEqual("John")
 })
 
 test("get a nested property with string array", () => {
-  const name = getNestedProperty(PERSON, ["father", "father", "name"])
+  const name = getNestedProperty(PERSON, ["father", "father", "name"]) as string
 
-  expect(name).equal("John")
+  expect(name).toEqual("John")
 })
 
 test("get a nested property that doesn't exist", () => {
-  const name = getNestedProperty(PERSON, "mother.mother.name")
+  const name = getNestedProperty(PERSON, "mother.mother.name") as undefined
 
   expect(name).toBeUndefined()
 })
@@ -49,7 +49,7 @@ test("exclude nested keys by their path", () => {
   const obj = excludeKeyPaths({ a: 1, b: { c: 2, d: { e: 3 } } }, [
     "b.c",
     "b.d.e",
-  ])
+  ]) as object
 
   expect(obj).toMatchObject({ a: 1, b: { d: {} } })
 })

package/src/utils/general.ts

@@ -19,14 +19,14 @@ export function wrap(
 ): (...args: any[]) => any {
   return (...args) => {
     if (newFn.before !== undefined) {
-      newFn.before(...args)
+      newFn.before(...(args as unknown[]))
     }
     let value
     if (fn !== undefined) {
-      value = fn(...args)
+      value = fn(...(args as unknown[])) as unknown
     }
     if (newFn.after !== undefined) {
-      newFn.after(...args)
+      newFn.after(...(args as unknown[]))
     }
     return value
   }
@@ -34,30 +34,28 @@ export function wrap(
 
 export function snakeCaseToCamelCase(obj: Record<string, any>): void {
   Object.entries(obj).forEach(([snakeKey, value]) => {
-    if (typeof value === "object") snakeCaseToCamelCase(value)
+    if (typeof value === "object") snakeCaseToCamelCase(value as object)
 
     const camelKey = snakeKey.replace(/_+[a-z]/g, _char =>
       _char[_char.length - 1].toUpperCase(),
     )
 
-    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete obj[snakeKey]
-    obj[camelKey] = value
+    obj[camelKey] = value as unknown
   })
 }
 
 export function camelCaseToSnakeCase(obj: Record<string, any>): void {
   Object.entries(obj).forEach(([camelKey, value]) => {
-    if (typeof value === "object") camelCaseToSnakeCase(value)
+    if (typeof value === "object") camelCaseToSnakeCase(value as object)
 
     const snakeKey = camelKey.replace(
       /[A-Z]/g,
       char => `_${char.toLowerCase()}`,
     )
 
-    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete obj[camelKey]
-    obj[snakeKey] = value
+    obj[snakeKey] = value as unknown
   })
 }
 
@@ -972,7 +970,7 @@ export function withKeyPaths(obj: object, delimiter: string = "."): object {
         const _path = [...path, key]
 
         if (typeof value === "object" && value !== null)
-          value = _withKeyPaths(value, _path)
+          value = _withKeyPaths(value as object, _path)
 
         return [_path.join(delimiter), value]
       }),
@@ -990,7 +988,7 @@ export function getKeyPaths(obj: object, delimiter: string = "."): string[] {
         const keyPath = _path.join(delimiter)
 
         return typeof value === "object" && value !== null
-          ? [keyPath, ..._getKeyPaths(value, _path)]
+          ? [keyPath, ..._getKeyPaths(value as object, _path)]
           : [keyPath]
       })
       .flat()
@@ -1020,7 +1018,7 @@ export function excludeKeyPaths(
           return exclude.includes(_path.join(delimiter)) ? [] : [key, value]
         })
         .filter(entry => entry.length),
-    )
+    ) as object
   }
 
   return exclude.length ? _excludeKeyPaths(obj, []) : obj

package/src/utils/router.test.ts

@@ -1,4 +1,4 @@
-import { path as p, type Parameters, type Path } from "./router"
+import { type Parameters, type Path, path as p } from "./router"
 
 const m = <SubMatches extends Record<string, Path>>(
   _: string,

package/src/utils/router.ts

@@ -1,7 +1,7 @@
 import {
-  generatePath,
-  type LinkProps as _LinkProps,
   type To,
+  type LinkProps as _LinkProps,
+  generatePath,
 } from "react-router-dom"
 
 import { type PageState } from "../components/page/Page"

package/src/utils/schema.ts

@@ -1,21 +1,21 @@
 import {
-  ValidationError,
   type AnyObject,
+  type BooleanSchema,
+  type DateSchema,
   type DefaultFromShape,
+  type Flags,
   type InferType,
   type MakePartial,
+  type NumberSchema,
   type ObjectSchema,
   type ObjectShape,
   type Schema,
+  type StringSchema,
   type TypeFromShape,
   type ValidateOptions,
-  type StringSchema,
-  type NumberSchema,
-  type Flags,
-  type BooleanSchema,
-  type DateSchema,
-  string as YupString,
+  ValidationError,
   number as YupNumber,
+  string as YupString,
 } from "yup"
 
 export type _<T> = T extends {}
@@ -137,11 +137,11 @@ export function buildUnicodeCharSet(
   description: string,
   options: BuildCharSetOptions = {},
 ) {
-  let { flags = "u", ...otherOptions } = options
+  let { flags = "u" } = options
 
   if (!flags.includes("u")) flags += "u"
 
-  return buildCharSet(charSet, description, { flags, ...otherOptions })
+  return buildCharSet(charSet, description, { ...options, flags })
 }
 
 export function asciiAlphaString(options?: BuildCharSetOptions) {
@@ -282,9 +282,9 @@ export function tryValidateSync<
   const { onError, ...validateOptions } = options || {}
 
   try {
-    return schema.validateSync(value, validateOptions)
+    return schema.validateSync(value, validateOptions) as unknown
   } catch (error) {
     if (!(error instanceof ValidationError)) throw error
-    else if (onError) return onError(error)
+    else if (onError) return onError(error) as unknown
   }
 }

package/src/utils/test.tsx

@@ -1,9 +1,9 @@
 import type { Middleware, Reducer, Store } from "@reduxjs/toolkit"
+import type { PropsWithChildren, ReactElement } from "react"
+import { Provider } from "react-redux"
 import type { RenderOptions } from "@testing-library/react"
 import { render } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import type { PropsWithChildren, ReactElement } from "react"
-import { Provider } from "react-redux"
 
 import { makeStore } from "./store"
 

package/src/utils/theme.tsx

@@ -1,6 +1,6 @@
-import type React from "react"
 import { Divider, type DividerProps, type ThemeOptions } from "@mui/material"
 import { type CommonProps } from "@mui/material/OverridableComponent"
+import { type ReactElement } from "react"
 
 import _components from "../theme/components"
 
@@ -8,9 +8,9 @@ export function insertDividerBetweenElements({
   elements,
   dividerProps,
 }: {
-  elements: React.ReactElement[]
+  elements: ReactElement[]
   dividerProps?: DividerProps
-}): React.ReactElement[] {
+}): ReactElement[] {
   return elements.map((element, index) => (
     <>
       {element}
@@ -38,11 +38,12 @@ export function getStyleOverrides(
     ) {
       const muiClass = (component.styleOverrides as Record<string, any>)[
         muiClassName
-      ]
+      ] as object
 
       switch (typeof muiClass) {
         case "function":
-          return muiClass({ ownerState })
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          return muiClass({ ownerState }) as object
         case "object":
           return muiClass
       }
@@ -78,5 +79,5 @@ export function matchClassNames(
   return classNames
     .map(className => className.match(pattern))
     .filter(match => match !== null)
-    .map(match => match as RegExpMatchArray)
+    .map(match => match)
 }

package/src/utils/window.ts

@@ -1,9 +1,11 @@
 export function configureFreshworksWidget(display: "open" | "hide"): void {
   // @ts-expect-error defined in external script
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   window.FreshworksWidget(display)
 }
 
 export function toggleOneTrustInfoDisplay(): void {
   // @ts-expect-error defined in external script
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
   window.Optanon.ToggleInfoDisplay()
 }

package/tsconfig.app.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../configs/frontend/tsconfig.app.json",
+  "include": ["src"]
+}

package/tsconfig.json

@@ -1,31 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "types": [
-      "vitest/globals",
-      "node"
-    ]
-  },
+  "files": [],
   "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
   ]
-}
+}

package/tsconfig.node.json

@@ -1,11 +1,4 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "vite.config.ts"
-  ]
-}
+  "extends": "../configs/frontend/tsconfig.node.json",
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -1,5 +1,5 @@
-import react from "@vitejs/plugin-react"
 import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
 
 // https://vitejs.dev/config/
 // TODO: https://vite.dev/guide/build.html#library-mode

package/.eslintrc.json

@@ -1,47 +0,0 @@
-{
-  "extends": [
-    "eslint:recommended",
-    "react-app",
-    "plugin:react/jsx-runtime",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": true,
-    "tsconfigRootDir": "./"
-  },
-  "plugins": [
-    "@typescript-eslint"
-  ],
-  "root": true,
-  "ignorePatterns": [
-    "dist",
-    "src/scripts",
-    "**/*.d.ts",
-    "vite.config.*"
-  ],
-  "rules": {
-    "@typescript-eslint/consistent-type-imports": [
-      2,
-      {
-        "fixStyle": "inline-type-imports"
-      }
-    ]
-  },
-  "overrides": [
-    {
-      "files": [
-        "*.{c,m,}{t,j}s",
-        "*.{t,j}sx"
-      ]
-    },
-    {
-      "files": [
-        "*{test,spec}.{t,j}s?(x)"
-      ],
-      "env": {
-        "jest": true
-      }
-    }
-  ]
-}

package/src/vite.config.ts

@@ -1,49 +0,0 @@
-/**
- * Shared Vite configuration for all frontend services.
- *
- * Vite: https://vitest.dev/config/
- * Vitest: https://vitest.dev/config/
- *
- * NOTE: This doesn't belong in codeforlife-workspace/configs/frontend as it's
- * still and a script which needs to be included in a Node.js runtime.
- */
-
-import { defineConfig } from "vitest/config"
-import react from "@vitejs/plugin-react"
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      codeforlife: "codeforlife/src",
-    },
-  },
-  envDir: "env",
-  server: {
-    open: true,
-    host: true,
-  },
-  test: {
-    globals: true,
-    environment: "jsdom",
-    setupFiles: "src/setupTests",
-    mockReset: true,
-    coverage: {
-      enabled: true,
-      provider: "istanbul",
-      reporter: ["html", "cobertura"],
-    },
-  },
-  optimizeDeps: {
-    // TODO: investigate which of these are needed
-    include: [
-      "@mui/x-date-pickers",
-      "@mui/x-date-pickers/AdapterDayjs",
-      "dayjs",
-      "dayjs/locale/en-gb",
-      "@mui/icons-material",
-      "yup",
-      "formik",
-    ],
-  },
-})