codeforlife 2.7.1 → 2.8.0

package/src/components/form/ApiAutocompleteField.tsx

@@ -1,20 +1,23 @@
-import { Button, CircularProgress, type ChipTypeMap } from "@mui/material"
-import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
+import { Button, type ChipTypeMap, CircularProgress } from "@mui/material"
 import {
   Children,
+  type ElementType,
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+  type JSX,
   forwardRef,
   useEffect,
   useState,
-  type ElementType,
 } from "react"
+import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
 
 import {
   AutocompleteField,
   type AutocompleteFieldProps,
 } from "../../components/form"
-import { usePagination } from "../../hooks/api"
 import type { ListArg, ListResult, ModelId } from "../../utils/api"
 import SyncError from "../SyncError"
+import { usePagination } from "../../hooks/api"
 
 export interface ApiAutocompleteFieldProps<
   SearchKey extends keyof Omit<QueryArg, "limit" | "offset">,
@@ -62,7 +65,7 @@ const ApiAutocompleteField = <
   useLazyListQuery,
   filterOptions,
   getOptionLabel,
-  getOptionKey = result => result.id,
+  getOptionKey = result => result.id as ModelId,
   searchKey,
   ...otherAutocompleteFieldProps
 }: ApiAutocompleteFieldProps<
@@ -88,7 +91,7 @@ const ApiAutocompleteField = <
   useEffect(
     () => {
       const arg = { limit, offset, ...filterOptions } as QueryArg
-      // @ts-expect-error
+      // @ts-expect-error search key can index arg
       if (search) arg[searchKey] = search
 
       trigger(arg, true)
@@ -130,6 +133,44 @@ const ApiAutocompleteField = <
     setPagination(({ page, limit }) => ({ page: page + 1, limit }))
   }
 
+  const ListboxComponent: ForwardRefRenderFunction<
+    unknown,
+    HTMLAttributes<HTMLElement>
+  > = ({ children, ...props }, ref) => {
+    const listItems = Children.toArray(children)
+    if (isLoading) listItems.push(<CircularProgress key="is-loading" />)
+    else {
+      if (isError) listItems.push(<SyncError key="is-error" />)
+      if (hasMore) {
+        listItems.push(
+          <Button key="load-more" onClick={loadNextPage}>
+            Load more
+          </Button>,
+        )
+      }
+    }
+
+    return (
+      <ul
+        {...props}
+        // @ts-expect-error ref is assignable
+        ref={ref}
+        onScroll={event => {
+          // If not already loading and scrolled to bottom
+          if (
+            !isLoading &&
+            event.currentTarget.clientHeight + event.currentTarget.scrollTop >=
+              event.currentTarget.scrollHeight
+          ) {
+            loadNextPage()
+          }
+        }}
+      >
+        {listItems}
+      </ul>
+    )
+  }
+
   return (
     <AutocompleteField
       options={optionKeys}
@@ -137,41 +178,7 @@ const ApiAutocompleteField = <
       onInputChange={(_, value, reason) => {
         setSearch(reason === "input" ? value : "")
       }}
-      ListboxComponent={forwardRef(({ children, ...props }, ref) => {
-        const listItems = Children.toArray(children)
-        if (isLoading) listItems.push(<CircularProgress key="is-loading" />)
-        else {
-          if (isError) listItems.push(<SyncError key="is-error" />)
-          if (hasMore) {
-            listItems.push(
-              <Button key="load-more" onClick={loadNextPage}>
-                Load more
-              </Button>,
-            )
-          }
-        }
-
-        return (
-          <ul
-            {...props}
-            // @ts-expect-error
-            ref={ref}
-            onScroll={event => {
-              // If not already loading and scrolled to bottom
-              if (
-                !isLoading &&
-                event.currentTarget.clientHeight +
-                  event.currentTarget.scrollTop >=
-                  event.currentTarget.scrollHeight
-              ) {
-                loadNextPage()
-              }
-            }}
-          >
-            {listItems}
-          </ul>
-        )
-      })}
+      ListboxComponent={forwardRef(ListboxComponent)}
       {...otherAutocompleteFieldProps}
     />
   )

package/src/components/form/AutocompleteField.tsx

@@ -1,19 +1,19 @@
 import {
   Autocomplete,
-  TextField,
   type AutocompleteProps,
   type ChipTypeMap,
+  TextField,
   type TextFieldProps,
 } from "@mui/material"
+import { type ElementType, type JSX } from "react"
 import { Field, type FieldConfig, type FieldProps } from "formik"
-import { type ElementType } from "react"
 import {
+  type ValidateOptions,
   number as YupNumber,
   string as YupString,
-  type ValidateOptions,
 } from "yup"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export interface AutocompleteFieldProps<
@@ -86,17 +86,28 @@ const AutocompleteField = <
   return (
     <Field {...fieldConfig}>
       {({ form, meta }: FieldProps) => {
-        const value = getNestedProperty(form.values, dotPath)
-        const touched = getNestedProperty(form.touched, dotPath)
-        const error = getNestedProperty(form.errors, dotPath)
+        const value = getNestedProperty(
+          form.values as FormValues,
+          dotPath,
+        ) as string
+        const touched = getNestedProperty(form.touched, dotPath) as boolean
+        const error = getNestedProperty(form.errors, dotPath) as
+          | string
+          | undefined
 
         return (
           <Autocomplete
             options={options}
+            // @ts-expect-error value can be assigned
             defaultValue={
-              meta.initialValue === "" ? undefined : meta.initialValue
+              meta.initialValue === ""
+                ? undefined
+                : (meta.initialValue as string)
             }
-            renderInput={({ id: _, ...otherParams }) => (
+            renderInput={({
+              id: _, // eslint-disable-line @typescript-eslint/no-unused-vars
+              ...otherParams
+            }) => (
               <TextField
                 id={id ?? name}
                 name={name}
@@ -104,13 +115,13 @@ const AutocompleteField = <
                 type="text" // Force to be string to avoid number incrementor/decrementor
                 value={value}
                 error={touched && Boolean(error)}
-                helperText={(touched && error) as false | string}
+                helperText={touched && error}
                 {...otherTextFieldProps}
                 {...otherParams}
               />
             )}
             onChange={(_, value) => {
-              form.setFieldValue(name, value ?? undefined, true)
+              void form.setFieldValue(name, value ?? undefined, true)
             }}
             onBlur={form.handleBlur}
             {...otherAutocompleteProps}

package/src/components/form/CheckboxField.tsx

@@ -1,16 +1,16 @@
 import {
   Checkbox,
+  type CheckboxProps,
   FormControl,
   FormControlLabel,
-  FormHelperText,
-  type CheckboxProps,
   type FormControlLabelProps,
+  FormHelperText,
 } from "@mui/material"
 import { Field, type FieldConfig, type FieldProps } from "formik"
+import { type ValidateOptions, bool as YupBool } from "yup"
 import { type FC } from "react"
-import { bool as YupBool, type ValidateOptions } from "yup"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export interface CheckboxFieldProps
@@ -47,9 +47,14 @@ const CheckboxField: FC<CheckboxFieldProps> = ({
   return (
     <Field {...fieldConfig}>
       {({ form, meta }: FieldProps) => {
-        const touched = getNestedProperty(form.touched, dotPath)
-        const error = getNestedProperty(form.errors, dotPath)
-        const value = getNestedProperty(form.values, dotPath)
+        const touched = getNestedProperty(form.touched, dotPath) as boolean
+        const error = getNestedProperty(form.errors, dotPath) as
+          | string
+          | undefined
+        const value = getNestedProperty(
+          form.values as FormValues,
+          dotPath,
+        ) as boolean
 
         const hasError = touched && Boolean(error)
 
@@ -59,7 +64,7 @@ const CheckboxField: FC<CheckboxFieldProps> = ({
             <FormControlLabel
               control={
                 <Checkbox
-                  defaultChecked={meta.initialValue}
+                  defaultChecked={meta.initialValue as boolean}
                   id={id ?? name}
                   name={name}
                   value={value}
@@ -70,7 +75,7 @@ const CheckboxField: FC<CheckboxFieldProps> = ({
               }
               {...formControlLabelProps}
             />
-            {hasError && <FormHelperText>{error as string}</FormHelperText>}
+            {hasError && <FormHelperText>{error}</FormHelperText>}
           </FormControl>
         )
       }}

package/src/components/form/CountryField.tsx

@@ -1,13 +1,14 @@
+import { type ElementType, type JSX } from "react"
 import { type ChipTypeMap } from "@mui/material"
-import { type ElementType } from "react"
+
+import AutocompleteField, {
+  type AutocompleteFieldProps,
+} from "./AutocompleteField"
 import {
   COUNTRY_ISO_CODES,
   COUNTRY_ISO_CODE_MAPPING,
   type CountryIsoCodes,
 } from "../../utils/general"
-import AutocompleteField, {
-  type AutocompleteFieldProps,
-} from "./AutocompleteField"
 
 export interface CountryFieldProps<
   Multiple extends boolean | undefined = false,

package/src/components/form/DatePickerField.tsx

@@ -1,16 +1,17 @@
+import "dayjs/locale/en-gb"
 import {
   DatePicker,
-  LocalizationProvider,
   type DatePickerProps,
+  LocalizationProvider,
   type PickerValidDate,
 } from "@mui/x-date-pickers"
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
-import dayjs, { type Dayjs } from "dayjs"
-import "dayjs/locale/en-gb"
 import { Field, type FieldConfig, type FieldProps } from "formik"
-import { date as YupDate, type ValidateOptions } from "yup"
+import { type ValidateOptions, date as YupDate } from "yup"
+import dayjs, { type Dayjs } from "dayjs"
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
+import { type JSX } from "react"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export interface DatePickerFieldProps<
@@ -69,14 +70,19 @@ const DatePickerField = <
   return (
     <Field {...fieldConfig}>
       {({ form }: FieldProps) => {
-        const error = getNestedProperty(form.errors, dotPath)
-        const touched = getNestedProperty(form.touched, dotPath)
-        let value = getNestedProperty(form.values, dotPath)
+        const error = getNestedProperty(form.errors, dotPath) as
+          | string
+          | undefined
+        const touched = getNestedProperty(form.touched, dotPath) as boolean
+        let value: Dayjs | null | string = getNestedProperty(
+          form.values as FormValues,
+          dotPath,
+        ) as string
 
         value = value ? dayjs(value) : null
 
         function handleChange(value: Dayjs | null) {
-          form.setFieldValue(
+          void form.setFieldValue(
             name,
             value && value.isValid() ? value.format("YYYY-MM-DD") : null,
             true,
@@ -88,6 +94,7 @@ const DatePickerField = <
             dateAdapter={AdapterDayjs}
             adapterLocale="en-gb"
           >
+            {/* @ts-expect-error value is compatible */}
             <DatePicker
               name={name}
               value={value}
@@ -98,7 +105,7 @@ const DatePickerField = <
                 textField: {
                   id: name,
                   onChange: value => {
-                    // @ts-expect-error
+                    // @ts-expect-error value is compatible
                     handleChange(value as Dayjs | null)
                   },
                   onBlur: form.handleBlur,

package/src/components/form/EmailField.tsx

@@ -1,6 +1,6 @@
 import { EmailOutlined as EmailOutlinedIcon } from "@mui/icons-material"
-import { InputAdornment } from "@mui/material"
 import type { FC } from "react"
+import { InputAdornment } from "@mui/material"
 import { string as YupString } from "yup"
 
 import TextField, { type TextFieldProps } from "./TextField"

package/src/components/form/FirstNameField.tsx

@@ -1,6 +1,6 @@
-import { PersonOutlined as PersonOutlinedIcon } from "@mui/icons-material"
-import { InputAdornment } from "@mui/material"
 import type { FC } from "react"
+import { InputAdornment } from "@mui/material"
+import { PersonOutlined as PersonOutlinedIcon } from "@mui/icons-material"
 
 import TextField, { type TextFieldProps } from "./TextField"
 import { schemas } from "../../api"

package/src/components/form/Form.tsx

@@ -1,26 +1,27 @@
+import {
+  type FC,
+  type JSX,
+  type ReactNode,
+  type RefObject,
+  useEffect,
+  useRef,
+} from "react"
 import { FormHelperText, type FormHelperTextProps } from "@mui/material"
 import {
   Formik,
-  Form as FormikForm,
   type FormikConfig,
   type FormikErrors,
+  Form as FormikForm,
   type FormikProps,
 } from "formik"
-import {
-  type ReactNode,
-  type FC,
-  useRef,
-  useEffect,
-  type RefObject,
-} from "react"
 import type { TypedUseMutation } from "@reduxjs/toolkit/query/react"
 
-import { getKeyPaths } from "../../utils/general"
 import {
-  submitForm,
-  type SubmitFormOptions,
   type FormValues,
+  type SubmitFormOptions,
+  submitForm,
 } from "../../utils/form"
+import { getKeyPaths } from "../../utils/general"
 
 const SCROLL_INTO_VIEW_OPTIONS: ScrollIntoViewOptions = {
   behavior: "smooth",
@@ -67,7 +68,7 @@ const BaseForm = <Values extends FormValues>({
   ...otherFormikProps
 }: BaseFormProps<Values>) => (
   <Formik {...otherFormikProps}>
-    {/* @ts-expect-error */}
+    {/* @ts-expect-error value is assignable */}
     {(formik: _FormikProps<Values>) => {
       const hasErrors = Boolean(Object.keys(formik.errors).length)
       const hasNonFieldErrors =

package/src/components/form/PasswordField.tsx

@@ -1,9 +1,9 @@
+import { type FC, useState } from "react"
+import { IconButton, InputAdornment } from "@mui/material"
 import {
   Visibility as VisibilityIcon,
   VisibilityOff as VisibilityOffIcon,
 } from "@mui/icons-material"
-import { IconButton, InputAdornment } from "@mui/material"
-import { useState, type FC } from "react"
 import { string as YupString } from "yup"
 
 import RepeatField, { type RepeatFieldProps } from "./RepeatField"

package/src/components/form/RepeatField.tsx

@@ -1,15 +1,15 @@
-import { TextField as MuiTextField, type TextFieldProps } from "@mui/material"
-import { Field, type FieldConfig, type FieldProps } from "formik"
 import {
-  useEffect,
-  useState,
   type Dispatch,
   type FC,
   type SetStateAction,
+  useEffect,
+  useState,
 } from "react"
-import { string as YupString, type ValidateOptions } from "yup"
+import { Field, type FieldConfig, type FieldProps } from "formik"
+import { TextField as MuiTextField, type TextFieldProps } from "@mui/material"
+import { type ValidateOptions, string as YupString } from "yup"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export type RepeatFieldProps = Omit<
@@ -47,12 +47,20 @@ const TextField: FC<
   const { form } = fieldProps
 
   const dotPath = name.split(".")
-  const value = getNestedProperty(form.values, dotPath)
+  const value = getNestedProperty(form.values as FormValues, dotPath) as string
 
   const repeatDotPath = repeatName.split(".")
-  const repeatValue = getNestedProperty(form.values, repeatDotPath)
-  const repeatTouched = getNestedProperty(form.touched, repeatDotPath)
-  const repeatError = getNestedProperty(form.errors, repeatDotPath)
+  const repeatValue = getNestedProperty(
+    form.values as FormValues,
+    repeatDotPath,
+  ) as string
+  const repeatTouched = getNestedProperty(
+    form.touched,
+    repeatDotPath,
+  ) as boolean
+  const repeatError = getNestedProperty(form.errors, repeatDotPath) as
+    | string
+    | undefined
 
   useEffect(() => {
     setValue(value)

package/src/components/form/SubmitButton.tsx

@@ -2,6 +2,8 @@ import { Button, type ButtonProps } from "@mui/material"
 import { Field, type FieldProps } from "formik"
 import type { FC } from "react"
 
+import { type FormValues } from "../../utils/form"
+
 export interface SubmitButtonProps
   extends Omit<ButtonProps, "type" | "onClick"> {}
 
@@ -15,7 +17,7 @@ const SubmitButton: FC<SubmitButtonProps> = ({
   ) {
     touched = touched || {}
     for (const key in values) {
-      const value = values[key]
+      const value: unknown = values[key]
       touched[key] =
         value instanceof Object && value.constructor === Object
           ? getTouched(value, touched)
@@ -31,15 +33,17 @@ const SubmitButton: FC<SubmitButtonProps> = ({
         <Button
           type="button"
           onClick={() => {
-            form.setTouched(getTouched(form.values), true).then(errors => {
-              const hasErrors = Boolean(errors && Object.keys(errors).length)
-              // If has errors, set isSubmitting=true so fields in the form are
-              // aware that a submission was attempted. Else, set
-              // isSubmitting=false as it will be set to true when calling
-              // submitForm().
-              form.setSubmitting(hasErrors)
-              if (!hasErrors) form.submitForm()
-            })
+            void form
+              .setTouched(getTouched(form.values as FormValues), true)
+              .then(errors => {
+                const hasErrors = Boolean(errors && Object.keys(errors).length)
+                // If has errors, set isSubmitting=true so fields in the form are
+                // aware that a submission was attempted. Else, set
+                // isSubmitting=false as it will be set to true when calling
+                // submitForm().
+                form.setSubmitting(hasErrors)
+                if (!hasErrors) void form.submitForm()
+              })
           }}
           {...otherButtonProps}
         >

package/src/components/form/TextField.tsx

@@ -1,12 +1,12 @@
+import { type FC, useEffect, useState } from "react"
+import { Field, type FieldConfig, type FieldProps } from "formik"
 import {
   TextField as MuiTextField,
   type TextFieldProps as MuiTextFieldProps,
 } from "@mui/material"
-import { Field, type FieldConfig, type FieldProps } from "formik"
-import { type FC, useState, useEffect } from "react"
 import { type StringSchema, type ValidateOptions, array as YupArray } from "yup"
 
-import { schemaToFieldValidator } from "../../utils/form"
+import { type FormValues, schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
 
 export type TextFieldProps = Omit<
@@ -79,7 +79,7 @@ const TextField: FC<TextFieldProps> = ({
             return (
               new Set(
                 uniqueCaseInsensitive
-                  ? values.map(value => (value as string).toLowerCase())
+                  ? values.map(value => value.toLowerCase())
                   : values,
               ).size === values.length
             )
@@ -104,18 +104,24 @@ const TextField: FC<TextFieldProps> = ({
     validate: schemaToFieldValidator(buildSchema(), validateOptions),
   }
 
-  const _Field: FC<FieldProps> = ({ form }) => {
-    const initialValue = getNestedProperty(form.initialValues, dotPath)
-    const value = getNestedProperty(form.values, dotPath)
-    const error = getNestedProperty(form.errors, dotPath)
-    const touched = getNestedProperty(form.touched, dotPath)
+  const FieldInternal: FC<FieldProps> = ({ form }) => {
+    const initialValue = getNestedProperty(
+      form.initialValues as FormValues,
+      dotPath,
+    ) as string
+    const value = getNestedProperty(
+      form.values as FormValues,
+      dotPath,
+    ) as string
+    const error = getNestedProperty(form.errors, dotPath) as string | undefined
+    const touched = getNestedProperty(form.touched, dotPath) as boolean
 
     useEffect(() => {
       setInitialValue(initialValue)
     }, [initialValue])
 
     useEffect(() => {
-      form.setFieldValue(
+      void form.setFieldValue(
         name,
         split && typeof value === "string" ? value.split(split) : value,
         true,
@@ -138,7 +144,7 @@ const TextField: FC<TextFieldProps> = ({
     )
   }
 
-  return <Field {...fieldConfig}>{_Field}</Field>
+  return <Field {...fieldConfig}>{FieldInternal}</Field>
 }
 
 export default TextField

package/src/components/form/UkCountyField.tsx

@@ -1,9 +1,10 @@
+import { type ElementType, type JSX } from "react"
 import { type ChipTypeMap } from "@mui/material"
-import { type ElementType } from "react"
-import { UK_COUNTIES } from "../../utils/general"
+
 import AutocompleteField, {
   type AutocompleteFieldProps,
 } from "./AutocompleteField"
+import { UK_COUNTIES } from "../../utils/general"
 
 export interface UkCountyFieldProps<
   Multiple extends boolean | undefined = false,

package/src/components/form/index.tsx

@@ -1,28 +1,35 @@
-export * from "./ApiAutocompleteField"
-export { default as ApiAutocompleteField } from "./ApiAutocompleteField"
-export * from "./AutocompleteField"
-export { default as AutocompleteField } from "./AutocompleteField"
-export * from "./CheckboxField"
-export { default as CheckboxField } from "./CheckboxField"
-export * from "./CountryField"
-export { default as CountryField } from "./CountryField"
-export * from "./DatePickerField"
-export { default as DatePickerField } from "./DatePickerField"
-export * from "./EmailField"
-export { default as EmailField } from "./EmailField"
-export * from "./FirstNameField"
-export { default as FirstNameField } from "./FirstNameField"
-export * from "./Form"
-export { default as Form } from "./Form"
-export * from "./OtpField"
-export { default as OtpField } from "./OtpField"
-export * from "./PasswordField"
-export { default as PasswordField } from "./PasswordField"
-export * from "./RepeatField"
-export { default as RepeatField } from "./RepeatField"
-export * from "./SubmitButton"
-export { default as SubmitButton } from "./SubmitButton"
-export * from "./TextField"
-export { default as TextField } from "./TextField"
-export * from "./UkCountyField"
-export { default as UkCountyField } from "./UkCountyField"
+export {
+  default as ApiAutocompleteField,
+  type ApiAutocompleteFieldProps,
+} from "./ApiAutocompleteField"
+export {
+  default as AutocompleteField,
+  type AutocompleteFieldProps,
+} from "./AutocompleteField"
+export {
+  default as CheckboxField,
+  type CheckboxFieldProps,
+} from "./CheckboxField"
+export { default as CountryField, type CountryFieldProps } from "./CountryField"
+export {
+  default as DatePickerField,
+  type DatePickerFieldProps,
+} from "./DatePickerField"
+export { default as EmailField, type EmailFieldProps } from "./EmailField"
+export {
+  default as FirstNameField,
+  type FirstNameFieldProps,
+} from "./FirstNameField"
+export { default as Form, type FormProps, type FormErrors } from "./Form"
+export { default as OtpField, type OtpFieldProps } from "./OtpField"
+export {
+  default as PasswordField,
+  type PasswordFieldProps,
+} from "./PasswordField"
+export { default as RepeatField, type RepeatFieldProps } from "./RepeatField"
+export { default as SubmitButton, type SubmitButtonProps } from "./SubmitButton"
+export { default as TextField, type TextFieldProps } from "./TextField"
+export {
+  default as UkCountyField,
+  type UkCountyFieldProps,
+} from "./UkCountyField"