codeforlife 2.8.2 → 2.9.0

package/src/components/form/AutocompleteField.tsx

@@ -1,135 +0,0 @@
-import {
-  Autocomplete,
-  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 ValidateOptions,
-  number as YupNumber,
-  string as YupString,
-} from "yup"
-
-import { type FormValues, schemaToFieldValidator } from "../../utils/form"
-import { getNestedProperty } from "../../utils/general"
-
-export interface AutocompleteFieldProps<
-  Value extends string | number,
-  Multiple extends boolean | undefined = false,
-  DisableClearable extends boolean | undefined = false,
-  FreeSolo extends boolean | undefined = false,
-  ChipComponent extends ElementType = ChipTypeMap["defaultComponent"],
-> extends Omit<
-    AutocompleteProps<
-      Value,
-      Multiple,
-      DisableClearable,
-      FreeSolo,
-      ChipComponent
-    >,
-    "renderInput" | "defaultValue" | "onChange" | "onBlur" | "value"
-  > {
-  textFieldProps: Omit<
-    TextFieldProps,
-    | "name"
-    | "value"
-    | "onChange"
-    | "onBlur"
-    | "error"
-    | "helperText"
-    | "defaultValue"
-    | "type"
-  > & {
-    name: string
-  }
-  validateOptions?: ValidateOptions
-}
-
-const AutocompleteField = <
-  Value extends string | number,
-  Multiple extends boolean | undefined = false,
-  DisableClearable extends boolean | undefined = false,
-  FreeSolo extends boolean | undefined = false,
-  ChipComponent extends ElementType = ChipTypeMap["defaultComponent"],
->({
-  textFieldProps,
-  options,
-  validateOptions,
-  ...otherAutocompleteProps
-}: AutocompleteFieldProps<
-  Value,
-  Multiple,
-  DisableClearable,
-  FreeSolo,
-  ChipComponent
->): JSX.Element => {
-  const { id, name, required, ...otherTextFieldProps } = textFieldProps
-
-  const dotPath = name.split(".")
-
-  const message = "not a valid option"
-  let schema =
-    typeof options[0] === "string"
-      ? YupString().oneOf(options as readonly string[], message)
-      : YupNumber().oneOf(options as readonly number[], message)
-  if (required) schema = schema.required()
-
-  const fieldConfig: FieldConfig = {
-    name,
-    type: typeof options[0] === "string" ? "text" : "number",
-    validate: schemaToFieldValidator(schema, validateOptions),
-  }
-
-  return (
-    <Field {...fieldConfig}>
-      {({ form, meta }: FieldProps) => {
-        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 as string)
-            }
-            renderInput={({
-              id: _, // eslint-disable-line @typescript-eslint/no-unused-vars
-              ...otherParams
-            }) => (
-              <TextField
-                id={id ?? name}
-                name={name}
-                required={required}
-                type="text" // Force to be string to avoid number incrementor/decrementor
-                value={value}
-                error={touched && Boolean(error)}
-                helperText={touched && error}
-                {...otherTextFieldProps}
-                {...otherParams}
-              />
-            )}
-            onChange={(_, value) => {
-              void form.setFieldValue(name, value ?? undefined, true)
-            }}
-            onBlur={form.handleBlur}
-            {...otherAutocompleteProps}
-          />
-        )
-      }}
-    </Field>
-  )
-}
-
-export default AutocompleteField

package/src/components/form/CheckboxField.tsx

@@ -1,86 +0,0 @@
-import {
-  Checkbox,
-  type CheckboxProps,
-  FormControl,
-  FormControlLabel,
-  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 { type FormValues, schemaToFieldValidator } from "../../utils/form"
-import { getNestedProperty } from "../../utils/general"
-
-export interface CheckboxFieldProps
-  extends Omit<
-    CheckboxProps,
-    "defaultChecked" | "value" | "onChange" | "onBlur"
-  > {
-  name: string
-  formControlLabelProps: Omit<FormControlLabelProps, "control">
-  errorMessage?: string
-  validateOptions?: ValidateOptions
-}
-
-const CheckboxField: FC<CheckboxFieldProps> = ({
-  id,
-  name,
-  formControlLabelProps,
-  required = false,
-  errorMessage = "this is a required field",
-  validateOptions,
-  ...otherCheckboxProps
-}) => {
-  const dotPath = name.split(".")
-
-  let schema = YupBool()
-  if (required) schema = schema.oneOf([true], errorMessage)
-
-  const fieldConfig: FieldConfig = {
-    name,
-    type: "checkbox",
-    validate: schemaToFieldValidator(schema, validateOptions),
-  }
-
-  return (
-    <Field {...fieldConfig}>
-      {({ form, meta }: FieldProps) => {
-        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)
-
-        // https://mui.com/material-ui/react-checkbox/#formgroup
-        return (
-          <FormControl error={hasError} required={required}>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  defaultChecked={meta.initialValue as boolean}
-                  id={id ?? name}
-                  name={name}
-                  value={value}
-                  onChange={form.handleChange}
-                  onBlur={form.handleBlur}
-                  {...otherCheckboxProps}
-                />
-              }
-              {...formControlLabelProps}
-            />
-            {hasError && <FormHelperText>{error}</FormHelperText>}
-          </FormControl>
-        )
-      }}
-    </Field>
-  )
-}
-
-export default CheckboxField

package/src/components/form/CountryField.tsx

@@ -1,75 +0,0 @@
-import { type ElementType, type JSX } from "react"
-import { type ChipTypeMap } from "@mui/material"
-
-import AutocompleteField, {
-  type AutocompleteFieldProps,
-} from "./AutocompleteField"
-import {
-  COUNTRY_ISO_CODES,
-  COUNTRY_ISO_CODE_MAPPING,
-  type CountryIsoCodes,
-} from "../../utils/general"
-
-export interface CountryFieldProps<
-  Multiple extends boolean | undefined = false,
-  DisableClearable extends boolean | undefined = false,
-  FreeSolo extends boolean | undefined = false,
-  ChipComponent extends ElementType = ChipTypeMap["defaultComponent"],
-> extends Omit<
-    AutocompleteFieldProps<
-      string,
-      Multiple,
-      DisableClearable,
-      FreeSolo,
-      ChipComponent
-    >,
-    "options" | "textFieldProps" | "getOptionLabel"
-  > {
-  textFieldProps?: Omit<
-    AutocompleteFieldProps<
-      string,
-      Multiple,
-      DisableClearable,
-      FreeSolo,
-      ChipComponent
-    >["textFieldProps"],
-    "name"
-  > & {
-    name?: string
-  }
-}
-
-const CountryField = <
-  Multiple extends boolean | undefined = false,
-  DisableClearable extends boolean | undefined = false,
-  FreeSolo extends boolean | undefined = false,
-  ChipComponent extends ElementType = ChipTypeMap["defaultComponent"],
->({
-  textFieldProps,
-  ...otherAutocompleteFieldProps
-}: CountryFieldProps<
-  Multiple,
-  DisableClearable,
-  FreeSolo,
-  ChipComponent
->): JSX.Element => {
-  const {
-    name = "country",
-    label = "Country",
-    placeholder = "Select your country",
-    ...otherTextFieldProps
-  } = textFieldProps || {}
-
-  return (
-    <AutocompleteField
-      options={COUNTRY_ISO_CODES}
-      getOptionLabel={isoCode =>
-        COUNTRY_ISO_CODE_MAPPING[isoCode as CountryIsoCodes]
-      }
-      textFieldProps={{ name, label, placeholder, ...otherTextFieldProps }}
-      {...otherAutocompleteFieldProps}
-    />
-  )
-}
-
-export default CountryField

package/src/components/form/DatePickerField.tsx

@@ -1,126 +0,0 @@
-import "dayjs/locale/en-gb"
-import {
-  DatePicker,
-  type DatePickerProps,
-  LocalizationProvider,
-  type PickerValidDate,
-} from "@mui/x-date-pickers"
-import { Field, type FieldConfig, type FieldProps } from "formik"
-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 { type FormValues, schemaToFieldValidator } from "../../utils/form"
-import { getNestedProperty } from "../../utils/general"
-
-export interface DatePickerFieldProps<
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
-> extends Omit<
-    DatePickerProps<TDate, TEnableAccessibleFieldDOMStructure>,
-    "name" | "value" | "onChange" | "slotProps"
-  > {
-  name: string
-  required?: boolean
-  validateOptions?: ValidateOptions
-}
-
-const DatePickerField = <
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
->({
-  name,
-  required,
-  minDate,
-  maxDate,
-  validateOptions,
-  ...otherDatePickerProps
-}: DatePickerFieldProps<
-  TDate,
-  TEnableAccessibleFieldDOMStructure
->): JSX.Element => {
-  const dotPath = name.split(".")
-
-  function dateToString(date: Dayjs) {
-    return date.locale("en-gb").format("L")
-  }
-
-  let schema = YupDate()
-  if (required) schema = schema.required()
-  if (minDate) {
-    schema = schema.min(
-      minDate,
-      `this field must be after or equal to ${dateToString(minDate)}`,
-    )
-  }
-  if (maxDate) {
-    schema = schema.max(
-      maxDate,
-      `this field must be before or equal to ${dateToString(maxDate)}`,
-    )
-  }
-
-  const fieldConfig: FieldConfig = {
-    name,
-    type: "date",
-    validate: schemaToFieldValidator(schema, validateOptions),
-  }
-
-  return (
-    <Field {...fieldConfig}>
-      {({ form }: FieldProps) => {
-        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) {
-          void form.setFieldValue(
-            name,
-            value && value.isValid() ? value.format("YYYY-MM-DD") : null,
-            true,
-          )
-        }
-
-        return (
-          <LocalizationProvider
-            dateAdapter={AdapterDayjs}
-            adapterLocale="en-gb"
-          >
-            {/* @ts-expect-error value is compatible */}
-            <DatePicker
-              name={name}
-              value={value}
-              minDate={minDate}
-              maxDate={maxDate}
-              onChange={handleChange}
-              slotProps={{
-                textField: {
-                  id: name,
-                  onChange: value => {
-                    // @ts-expect-error value is compatible
-                    handleChange(value as Dayjs | null)
-                  },
-                  onBlur: form.handleBlur,
-                  required,
-                  error: touched && Boolean(error),
-                  helperText: (touched && error) as false | string,
-                },
-              }}
-              {...otherDatePickerProps}
-            />
-          </LocalizationProvider>
-        )
-      }}
-    </Field>
-  )
-}
-
-export default DatePickerField

package/src/components/form/EmailField.tsx

@@ -1,38 +0,0 @@
-import { EmailOutlined as EmailOutlinedIcon } from "@mui/icons-material"
-import type { FC } from "react"
-import { InputAdornment } from "@mui/material"
-import { string as YupString } from "yup"
-
-import TextField, { type TextFieldProps } from "./TextField"
-
-export type EmailFieldProps = Omit<TextFieldProps, "type" | "name" | "schema"> &
-  Partial<Pick<TextFieldProps, "name">>
-
-const EmailField: FC<EmailFieldProps> = ({
-  name = "email",
-  label = "Email address",
-  placeholder = "Enter your email address",
-  InputProps = {},
-  ...otherTextFieldProps
-}) => {
-  return (
-    <TextField
-      type="email"
-      schema={YupString().email()}
-      name={name}
-      label={label}
-      placeholder={placeholder}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <EmailOutlinedIcon />
-          </InputAdornment>
-        ),
-        ...InputProps,
-      }}
-      {...otherTextFieldProps}
-    />
-  )
-}
-
-export default EmailField

package/src/components/form/FirstNameField.tsx

@@ -1,40 +0,0 @@
-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"
-
-export type FirstNameFieldProps = Omit<
-  TextFieldProps,
-  "type" | "name" | "schema"
-> &
-  Partial<Pick<TextFieldProps, "name">>
-
-const FirstNameField: FC<FirstNameFieldProps> = ({
-  name = "first_name",
-  label = "First name",
-  placeholder = "Enter your first name",
-  InputProps = {},
-  ...otherTextFieldProps
-}) => {
-  return (
-    <TextField
-      schema={schemas.user.first_name}
-      name={name}
-      label={label}
-      placeholder={placeholder}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <PersonOutlinedIcon />
-          </InputAdornment>
-        ),
-        ...InputProps,
-      }}
-      {...otherTextFieldProps}
-    />
-  )
-}
-
-export default FirstNameField

package/src/components/form/Form.tsx

@@ -1,165 +0,0 @@
-import {
-  type FC,
-  type JSX,
-  type ReactNode,
-  type RefObject,
-  useEffect,
-  useRef,
-} from "react"
-import { FormHelperText, type FormHelperTextProps } from "@mui/material"
-import {
-  Formik,
-  type FormikConfig,
-  type FormikErrors,
-  Form as FormikForm,
-  type FormikProps,
-} from "formik"
-import type { TypedUseMutation } from "@reduxjs/toolkit/query/react"
-
-import {
-  type FormValues,
-  type SubmitFormOptions,
-  submitForm,
-} from "../../utils/form"
-import { getKeyPaths } from "../../utils/general"
-
-const SCROLL_INTO_VIEW_OPTIONS: ScrollIntoViewOptions = {
-  behavior: "smooth",
-  block: "start",
-}
-
-type NonFieldErrorsProps = Omit<FormHelperTextProps, "error" | "ref"> & {
-  scrollIntoViewOptions?: ScrollIntoViewOptions
-}
-
-const NonFieldErrors: FC<NonFieldErrorsProps> = ({
-  scrollIntoViewOptions = SCROLL_INTO_VIEW_OPTIONS,
-  ...formHelperTextProps
-}) => {
-  const pRef = useRef<HTMLParagraphElement>(null)
-
-  useEffect(() => {
-    if (pRef.current) pRef.current.scrollIntoView(scrollIntoViewOptions)
-  }, [scrollIntoViewOptions])
-
-  return <FormHelperText ref={pRef} error {...formHelperTextProps} />
-}
-
-export type FormErrors<Values> = FormikErrors<
-  Omit<Values, "__all__"> & { __all__: string }
->
-
-type _FormikProps<Values> = Omit<FormikProps<Values>, "errors"> & {
-  errors: FormErrors<Values>
-}
-
-type BaseFormProps<Values> = Omit<FormikConfig<Values>, "children"> & {
-  children: ReactNode | ((props: _FormikProps<Values>) => ReactNode)
-  scrollIntoViewOptions?: ScrollIntoViewOptions
-  nonFieldErrorsProps?: Omit<NonFieldErrorsProps, "children">
-  fieldRefs?: Array<{
-    name: string
-    inputRef: RefObject<HTMLInputElement | null>
-  }>
-}
-
-const BaseForm = <Values extends FormValues>({
-  children,
-  scrollIntoViewOptions = SCROLL_INTO_VIEW_OPTIONS,
-  nonFieldErrorsProps,
-  fieldRefs = [],
-  ...otherFormikProps
-}: BaseFormProps<Values>) => (
-  <Formik {...otherFormikProps}>
-    {/* @ts-expect-error value is assignable */}
-    {(formik: _FormikProps<Values>) => {
-      const hasErrors = Boolean(Object.keys(formik.errors).length)
-      const hasNonFieldErrors =
-        hasErrors && typeof formik.errors.__all__ === "string"
-
-      // If a submission was attempted and refs to the fields were provided.
-      if (
-        hasErrors &&
-        !hasNonFieldErrors &&
-        formik.isSubmitting &&
-        fieldRefs.length
-      ) {
-        const errorNames = getKeyPaths(formik.errors)
-
-        const input = fieldRefs.find(({ name }) => errorNames.includes(name))
-          ?.inputRef.current
-
-        if (input) input.scrollIntoView(scrollIntoViewOptions)
-      }
-
-      return (
-        <>
-          {hasNonFieldErrors && (
-            <NonFieldErrors {...nonFieldErrorsProps}>
-              {formik.errors.__all__ as string}
-            </NonFieldErrors>
-          )}
-          <FormikForm>
-            {typeof children === "function" ? children(formik) : children}
-          </FormikForm>
-        </>
-      )
-    }}
-  </Formik>
-)
-
-type SubmitFormProps<
-  Values extends FormValues,
-  QueryArg extends FormValues,
-  ResultType,
-> = Omit<BaseFormProps<Values>, "onSubmit"> & {
-  useMutation: TypedUseMutation<ResultType, QueryArg, any>
-} & (Values extends QueryArg
-    ? { submitOptions?: SubmitFormOptions<Values, QueryArg, ResultType> }
-    : { submitOptions: SubmitFormOptions<Values, QueryArg, ResultType> })
-
-const SubmitForm = <
-  Values extends FormValues,
-  QueryArg extends FormValues,
-  ResultType,
->({
-  useMutation,
-  submitOptions,
-  ...baseFormProps
-}: SubmitFormProps<Values, QueryArg, ResultType>): JSX.Element => {
-  const [trigger] = useMutation()
-
-  return (
-    <BaseForm
-      {...baseFormProps}
-      onSubmit={submitForm<Values, QueryArg, ResultType>(
-        trigger,
-        baseFormProps.initialValues,
-        submitOptions as SubmitFormOptions<Values, QueryArg, ResultType>,
-      )}
-    />
-  )
-}
-
-export type FormProps<
-  Values extends FormValues,
-  QueryArg extends FormValues,
-  ResultType,
-> = BaseFormProps<Values> | SubmitFormProps<Values, QueryArg, ResultType>
-
-const Form: {
-  <Values extends FormValues>(props: BaseFormProps<Values>): JSX.Element
-  <Values extends FormValues, QueryArg extends FormValues, ResultType>(
-    props: SubmitFormProps<Values, QueryArg, ResultType>,
-  ): JSX.Element
-} = <
-  Values extends FormValues = FormValues,
-  QueryArg extends FormValues = FormValues,
-  ResultType = any,
->(
-  props: FormProps<Values, QueryArg, ResultType>,
-): JSX.Element => {
-  return "onSubmit" in props ? <BaseForm {...props} /> : SubmitForm(props)
-}
-
-export default Form

package/src/components/form/OtpField.tsx

@@ -1,28 +0,0 @@
-import { type FC } from "react"
-import { string as YupString } from "yup"
-
-import TextField, { type TextFieldProps } from "./TextField"
-
-export type OtpFieldProps = Omit<
-  TextFieldProps,
-  "name" | "schema" | "required"
-> &
-  Partial<Pick<TextFieldProps, "name">>
-
-const OtpField: FC<OtpFieldProps> = ({
-  name = "otp",
-  label = "OTP",
-  placeholder = "Enter your OTP",
-  ...otherTextFieldProps
-}) => (
-  <TextField
-    name={name}
-    label={label}
-    schema={YupString().matches(/^[0-9]{6}$/, "Must be exactly 6 digits.")}
-    placeholder={placeholder}
-    required
-    {...otherTextFieldProps}
-  />
-)
-
-export default OtpField