codeforlife 2.6.1

package/src/components/form/CountryField.tsx

@@ -0,0 +1,68 @@
+import { type ChipTypeMap } from "@mui/material"
+import { type ElementType } from "react"
+import { COUNTRY_ISO_CODES } from "../../utils/general"
+import AutocompleteField, {
+  type AutocompleteFieldProps,
+} from "./AutocompleteField"
+
+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 => isoCode} // TODO: return country name
+      textFieldProps={{ name, label, placeholder, ...otherTextFieldProps }}
+      {...otherAutocompleteFieldProps}
+    />
+  )
+}
+
+export default CountryField

package/src/components/form/DatePickerField.tsx

@@ -0,0 +1,119 @@
+import {
+  DatePicker,
+  LocalizationProvider,
+  type DatePickerProps,
+  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 { 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)
+        const touched = getNestedProperty(form.touched, dotPath)
+        let value = getNestedProperty(form.values, dotPath)
+
+        value = value ? dayjs(value) : null
+
+        function handleChange(value: Dayjs | null) {
+          form.setFieldValue(
+            name,
+            value && value.isValid() ? value.format("YYYY-MM-DD") : null,
+            true,
+          )
+        }
+
+        return (
+          <LocalizationProvider
+            dateAdapter={AdapterDayjs}
+            adapterLocale="en-gb"
+          >
+            <DatePicker
+              name={name}
+              value={value}
+              minDate={minDate}
+              maxDate={maxDate}
+              onChange={handleChange}
+              slotProps={{
+                textField: {
+                  id: name,
+                  onChange: value => {
+                    // @ts-expect-error
+                    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

@@ -0,0 +1,38 @@
+import { EmailOutlined as EmailOutlinedIcon } from "@mui/icons-material"
+import { InputAdornment } from "@mui/material"
+import type { FC } from "react"
+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

@@ -0,0 +1,40 @@
+import { PersonOutlined as PersonOutlinedIcon } from "@mui/icons-material"
+import { InputAdornment } from "@mui/material"
+import type { FC } from "react"
+
+import TextField, { type TextFieldProps } from "./TextField"
+import { firstNameSchema } from "../../schemas/user"
+
+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={firstNameSchema}
+      name={name}
+      label={label}
+      placeholder={placeholder}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <PersonOutlinedIcon />
+          </InputAdornment>
+        ),
+        ...InputProps,
+      }}
+      {...otherTextFieldProps}
+    />
+  )
+}
+
+export default FirstNameField

package/src/components/form/Form.tsx

@@ -0,0 +1,82 @@
+import {
+  Formik,
+  Form as FormikForm,
+  type FormikConfig,
+  type FormikErrors,
+} from "formik"
+import type { TypedUseMutation } from "@reduxjs/toolkit/query/react"
+
+import {
+  submitForm,
+  type SubmitFormOptions,
+  type FormValues,
+} from "../../utils/form"
+
+const _ = <Values extends FormValues>({
+  children,
+  ...otherFormikProps
+}: FormikConfig<Values>) => (
+  <Formik {...otherFormikProps}>
+    {formik => (
+      <FormikForm>
+        {typeof children === "function" ? children(formik) : children}
+      </FormikForm>
+    )}
+  </Formik>
+)
+
+type SubmitFormProps<
+  Values extends FormValues,
+  QueryArg extends FormValues,
+  ResultType,
+> = Omit<FormikConfig<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,
+  ...formikProps
+}: SubmitFormProps<Values, QueryArg, ResultType>): JSX.Element => {
+  const [trigger] = useMutation()
+
+  return (
+    <_
+      {...formikProps}
+      onSubmit={submitForm<Values, QueryArg, ResultType>(
+        trigger,
+        submitOptions as SubmitFormOptions<Values, QueryArg, ResultType>,
+      )}
+    />
+  )
+}
+
+export type FormProps<
+  Values extends FormValues,
+  QueryArg extends FormValues,
+  ResultType,
+> = FormikConfig<Values> | SubmitFormProps<Values, QueryArg, ResultType>
+
+const Form: {
+  <Values extends FormValues>(props: FormikConfig<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 ? <_ {...props} /> : SubmitForm(props)
+}
+
+export default Form
+export { type FormikErrors as FormErrors }

package/src/components/form/OtpField.tsx

@@ -0,0 +1,28 @@
+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

package/src/components/form/PasswordField.tsx

@@ -0,0 +1,71 @@
+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"
+import TextField, { type TextFieldProps } from "./TextField"
+
+export type PasswordFieldProps = Omit<
+  TextFieldProps,
+  "type" | "name" | "schema" | "autoComplete"
+> &
+  Partial<Pick<TextFieldProps, "name" | "schema">> & {
+    withRepeatField?: boolean
+    repeatFieldProps?: Omit<RepeatFieldProps, "name" | "type">
+  }
+
+const PasswordField: FC<PasswordFieldProps> = ({
+  name = "password",
+  label = "Password",
+  placeholder = "Enter your password",
+  schema = YupString(),
+  InputProps = {},
+  withRepeatField = false,
+  repeatFieldProps = {},
+  ...otherTextFieldProps
+}) => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const type = isVisible ? "text" : "password"
+  const endAdornment = (
+    <InputAdornment position="end">
+      <IconButton
+        onClick={() => {
+          setIsVisible(previousIsVisible => !previousIsVisible)
+        }}
+        edge="end"
+      >
+        {isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
+      </IconButton>
+    </InputAdornment>
+  )
+
+  return (
+    <>
+      <TextField
+        autoComplete="off"
+        type={type}
+        name={name}
+        label={label}
+        schema={schema}
+        placeholder={placeholder}
+        InputProps={{ endAdornment, ...InputProps }}
+        {...otherTextFieldProps}
+      />
+      {withRepeatField && (
+        <RepeatField
+          name={name}
+          type={type}
+          {...repeatFieldProps}
+          InputProps={{ endAdornment, ...repeatFieldProps.InputProps }}
+        />
+      )}
+    </>
+  )
+}
+
+export default PasswordField

package/src/components/form/RepeatField.tsx

@@ -0,0 +1,115 @@
+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,
+} from "react"
+import { string as YupString, type ValidateOptions } from "yup"
+
+import { schemaToFieldValidator } from "../../utils/form"
+import { getNestedProperty } from "../../utils/general"
+
+export type RepeatFieldProps = Omit<
+  TextFieldProps,
+  | "name"
+  | "value"
+  | "onChange"
+  | "onBlur"
+  | "error"
+  | "helperText"
+  | "defaultValue"
+  | "required"
+> & {
+  name: string
+  validateOptions?: ValidateOptions
+}
+
+const TextField: FC<
+  RepeatFieldProps & {
+    repeatName: string
+    setValue: Dispatch<SetStateAction<string>>
+    fieldProps: FieldProps
+  }
+> = ({
+  id,
+  repeatName,
+  setValue,
+  fieldProps,
+  name,
+  label,
+  placeholder,
+  type,
+  ...otherTextFieldProps
+}) => {
+  const { form } = fieldProps
+
+  const dotPath = name.split(".")
+  const value = getNestedProperty(form.values, dotPath)
+
+  const repeatDotPath = repeatName.split(".")
+  const repeatValue = getNestedProperty(form.values, repeatDotPath)
+  const repeatTouched = getNestedProperty(form.touched, repeatDotPath)
+  const repeatError = getNestedProperty(form.errors, repeatDotPath)
+
+  useEffect(() => {
+    setValue(value)
+  }, [setValue, value])
+
+  return (
+    <MuiTextField
+      required
+      type={type}
+      label={label ?? `Repeat ${name.replace("_", " ")}`}
+      placeholder={placeholder ?? `Enter your ${name.replace("_", " ")} again`}
+      id={id ?? repeatName}
+      name={repeatName}
+      value={repeatValue}
+      onChange={form.handleChange}
+      onBlur={form.handleBlur}
+      error={repeatTouched && Boolean(repeatError)}
+      helperText={(repeatTouched && repeatError) as false | string}
+      {...otherTextFieldProps}
+    />
+  )
+}
+
+// https://formik.org/docs/examples/with-material-ui
+const RepeatField: FC<RepeatFieldProps> = ({
+  name,
+  type = "text",
+  validateOptions,
+  ...otherTextFieldProps
+}) => {
+  const [value, setValue] = useState("")
+
+  const repeatName = `${name}_repeat`
+
+  const fieldConfig: FieldConfig = {
+    name: repeatName,
+    type,
+    validate: schemaToFieldValidator(
+      YupString().required().equals([value], "does not match"),
+      validateOptions,
+    ),
+  }
+
+  return (
+    <Field {...fieldConfig}>
+      {(fieldProps: FieldProps) => (
+        <TextField
+          name={name}
+          type={type}
+          repeatName={repeatName}
+          setValue={setValue}
+          fieldProps={fieldProps}
+          {...otherTextFieldProps}
+        />
+      )}
+    </Field>
+  )
+}
+
+export default RepeatField

package/src/components/form/SubmitButton.tsx

@@ -0,0 +1,47 @@
+import { Button, type ButtonProps } from "@mui/material"
+import { Field, type FieldProps } from "formik"
+import type { FC } from "react"
+
+export interface SubmitButtonProps
+  extends Omit<ButtonProps, "type" | "onClick"> {}
+
+const SubmitButton: FC<SubmitButtonProps> = ({
+  children = "Submit",
+  ...otherButtonProps
+}) => {
+  function getTouched(
+    values: Record<string, any>,
+    touched?: Record<string, any>,
+  ) {
+    touched = touched || {}
+    for (const key in values) {
+      const value = values[key]
+      touched[key] =
+        value instanceof Object && value.constructor === Object
+          ? getTouched(value, touched)
+          : true
+    }
+
+    return touched
+  }
+
+  return (
+    <Field name="submit" type="submit">
+      {({ form }: FieldProps) => (
+        <Button
+          type="button"
+          onClick={() => {
+            form.setTouched(getTouched(form.values), true).then(errors => {
+              if (!errors || !Object.keys(errors).length) form.submitForm()
+            })
+          }}
+          {...otherButtonProps}
+        >
+          {children}
+        </Button>
+      )}
+    </Field>
+  )
+}
+
+export default SubmitButton