codeforlife 2.8.2 → 2.9.0

package/src/components/form/PasswordField.tsx

@@ -1,71 +0,0 @@
-import { type FC, useState } from "react"
-import { IconButton, InputAdornment } from "@mui/material"
-import {
-  Visibility as VisibilityIcon,
-  VisibilityOff as VisibilityOffIcon,
-} from "@mui/icons-material"
-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

@@ -1,123 +0,0 @@
-import {
-  type Dispatch,
-  type FC,
-  type SetStateAction,
-  useEffect,
-  useState,
-} from "react"
-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 { type FormValues, 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 as FormValues, dotPath) as string
-
-  const repeatDotPath = repeatName.split(".")
-  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)
-  }, [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

@@ -1,57 +0,0 @@
-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"> {}
-
-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: unknown = 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={() => {
-            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}
-        >
-          {children}
-        </Button>
-      )}
-    </Field>
-  )
-}
-
-export default SubmitButton

package/src/components/form/TextField.tsx

@@ -1,150 +0,0 @@
-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 { type StringSchema, type ValidateOptions, array as YupArray } from "yup"
-
-import { type FormValues, schemaToFieldValidator } from "../../utils/form"
-import { getNestedProperty } from "../../utils/general"
-
-export type TextFieldProps = Omit<
-  MuiTextFieldProps,
-  | "name"
-  | "value"
-  | "onChange"
-  | "onBlur"
-  | "error"
-  | "defaultValue"
-  | "helperText"
-> & {
-  name: string
-  schema: StringSchema
-  validateOptions?: ValidateOptions
-  dirty?: boolean
-  split?: string | RegExp
-  unique?: boolean
-  uniqueCaseInsensitive?: boolean
-}
-
-// https://formik.org/docs/examples/with-material-ui
-const TextField: FC<TextFieldProps> = ({
-  id,
-  name,
-  schema,
-  type = "text",
-  required = false,
-  dirty = false,
-  unique = false,
-  uniqueCaseInsensitive = false,
-  split,
-  validateOptions,
-  ...otherTextFieldProps
-}) => {
-  const [initialValue, setInitialValue] = useState<string | string[]>("")
-
-  const dotPath = name.split(".")
-
-  function buildSchema() {
-    // Build a schema for a single string.
-    let stringSchema = schema
-    // 1: Validate string is required.
-    stringSchema = required ? stringSchema.required() : stringSchema.optional()
-    // 2: Validate string is dirty.
-    if (dirty && !split)
-      stringSchema = stringSchema.notOneOf(
-        [initialValue as string],
-        "cannot be initial value",
-      )
-    // Return a schema for a single string.
-    if (!split) return stringSchema
-
-    // Build a schema for an array of strings.
-    let arraySchema = YupArray().of(stringSchema)
-    // 1: Validate array has min one string.
-    arraySchema = required
-      ? arraySchema.required().min(1)
-      : arraySchema.optional()
-    // 2: Validate array has unique strings.
-    if (unique || uniqueCaseInsensitive)
-      arraySchema = arraySchema.test({
-        message: "cannot have duplicates",
-        test: values => {
-          if (
-            Array.isArray(values) &&
-            values.length >= 2 &&
-            values.every(value => typeof value === "string")
-          ) {
-            return (
-              new Set(
-                uniqueCaseInsensitive
-                  ? values.map(value => value.toLowerCase())
-                  : values,
-              ).size === values.length
-            )
-          }
-
-          return true
-        },
-      })
-    // 3: Validate array is dirty.
-    if (dirty)
-      arraySchema = arraySchema.notOneOf(
-        [initialValue as string[]],
-        "cannot be initial value",
-      )
-    // Return a schema for an array of strings.
-    return arraySchema
-  }
-
-  const fieldConfig: FieldConfig = {
-    name,
-    type,
-    validate: schemaToFieldValidator(buildSchema(), validateOptions),
-  }
-
-  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(() => {
-      void form.setFieldValue(
-        name,
-        split && typeof value === "string" ? value.split(split) : value,
-        true,
-      )
-    }, [value]) // eslint-disable-line react-hooks/exhaustive-deps
-
-    return (
-      <MuiTextField
-        id={id ?? name}
-        name={name}
-        type={type}
-        required={required}
-        value={value}
-        onChange={form.handleChange}
-        onBlur={form.handleBlur}
-        error={touched && Boolean(error)}
-        helperText={(touched && error) as false | string}
-        {...otherTextFieldProps}
-      />
-    )
-  }
-
-  return <Field {...fieldConfig}>{FieldInternal}</Field>
-}
-
-export default TextField

package/src/components/form/UkCountyField.tsx

@@ -1,68 +0,0 @@
-import { type ElementType, type JSX } from "react"
-import { type ChipTypeMap } from "@mui/material"
-
-import AutocompleteField, {
-  type AutocompleteFieldProps,
-} from "./AutocompleteField"
-import { UK_COUNTIES } from "../../utils/general"
-
-export interface UkCountyFieldProps<
-  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"
-  > {
-  textFieldProps?: Omit<
-    AutocompleteFieldProps<
-      string,
-      Multiple,
-      DisableClearable,
-      FreeSolo,
-      ChipComponent
-    >["textFieldProps"],
-    "name"
-  > & {
-    name?: string
-  }
-}
-
-const UkCountyField = <
-  Multiple extends boolean | undefined = false,
-  DisableClearable extends boolean | undefined = false,
-  FreeSolo extends boolean | undefined = false,
-  ChipComponent extends ElementType = ChipTypeMap["defaultComponent"],
->({
-  textFieldProps,
-  ...otherAutocompleteFieldProps
-}: UkCountyFieldProps<
-  Multiple,
-  DisableClearable,
-  FreeSolo,
-  ChipComponent
->): JSX.Element => {
-  const {
-    name = "uk_county",
-    label = "UK county",
-    placeholder = "Select your UK county",
-    ...otherTextFieldProps
-  } = textFieldProps || {}
-
-  return (
-    <AutocompleteField
-      options={UK_COUNTIES}
-      textFieldProps={{ name, label, placeholder, ...otherTextFieldProps }}
-      {...otherAutocompleteFieldProps}
-    />
-  )
-}
-
-export default UkCountyField

package/src/components/form/index.tsx

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

package/src/components/index.ts

@@ -1,28 +0,0 @@
-export * from "./App"
-export { default as App } from "./App"
-export * from "./ClickableTooltip"
-export { default as ClickableTooltip } from "./ClickableTooltip"
-export * from "./CopyIconButton"
-export { default as CopyIconButton } from "./CopyIconButton"
-export * from "./Countdown"
-export { default as Countdown } from "./Countdown"
-export * from "./DownloadFileButton"
-export { default as DownloadFileButton } from "./DownloadFileButton"
-export * from "./ElevatedAppBar"
-export { default as ElevatedAppBar } from "./ElevatedAppBar"
-export * from "./Image"
-export { default as Image } from "./Image"
-export * from "./ItemizedList"
-export { default as InputFileButton } from "./InputFileButton"
-export * from "./InputFileButton"
-export { default as ItemizedList } from "./ItemizedList"
-export * from "./OrderedGrid"
-export { default as OrderedGrid } from "./OrderedGrid"
-export * from "./ScrollIntoViewLink"
-export { default as ScrollIntoViewLink } from "./ScrollIntoViewLink"
-export * from "./SyncError"
-export { default as SyncError } from "./SyncError"
-export * from "./TablePagination"
-export { default as TablePagination } from "./TablePagination"
-export * from "./YouTubeVideo"
-export { default as YouTubeVideo } from "./YouTubeVideo"

package/src/components/page/Banner.tsx

@@ -1,95 +0,0 @@
-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 Section from "./Section"
-import palette from "../../theme/palette"
-
-export interface BannerProps<
-  Button1State extends Record<string, any> = Record<string, any>,
-  Button2State extends Record<string, any> = Record<string, any>,
-> {
-  header: string
-  subheader?: string
-  textAlign?: "start" | "center"
-  imageProps?: ImageProps
-  button1Props?: LinkButtonProps<"to", Button1State>
-  button2Props?: LinkButtonProps<"to", Button2State>
-  bgcolor?: "primary" | "secondary" | "tertiary"
-}
-
-const Banner = <
-  Button1State extends Record<string, any> = Record<string, any>,
-  Button2State extends Record<string, any> = Record<string, any>,
->({
-  header,
-  subheader,
-  textAlign = "start",
-  imageProps,
-  button1Props,
-  button2Props,
-  bgcolor = "primary",
-}: BannerProps<Button1State, Button2State>) => {
-  // @ts-expect-error guaranteed to be in palette
-  const contrastText = palette[bgcolor].contrastText as string
-
-  return (
-    <Section
-      boxProps={{
-        bgcolor: {
-          primary: primary[500],
-          secondary: secondary[500],
-          tertiary: tertiary[500],
-        }[bgcolor],
-      }}
-      sx={{ paddingY: 0 }}
-    >
-      <Stack
-        direction="row"
-        alignItems="center"
-        justifyContent={textAlign}
-        gap={2}
-      >
-        <Stack
-          py={{
-            xs: "80px",
-            md: imageProps !== undefined ? 0 : "100px",
-          }}
-          textAlign={textAlign}
-        >
-          <Typography
-            variant="h2"
-            color={contrastText}
-            mb={subheader !== undefined ? undefined : 0}
-          >
-            {header}
-          </Typography>
-          {subheader !== undefined && (
-            <Typography
-              color={contrastText}
-              variant="h4"
-              mb={button1Props !== undefined ? undefined : 0}
-            >
-              {subheader}
-            </Typography>
-          )}
-          <Stack direction="row" gap={2}>
-            {button1Props !== undefined && <LinkButton {...button1Props} />}
-            {button2Props !== undefined && <LinkButton {...button2Props} />}
-          </Stack>
-        </Stack>
-        {imageProps !== undefined && (
-          <Image
-            {...imageProps}
-            display={{ xs: "none", md: "block" }}
-            maxWidth="320px"
-            marginLeft="auto"
-          />
-        )}
-      </Stack>
-    </Section>
-  )
-}
-
-export default Banner

package/src/components/page/Notification.tsx

@@ -1,71 +0,0 @@
-import {
-  CloseOutlined as CloseOutlinedIcon,
-  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 Section from "./Section"
-import palette from "../../theme/palette"
-
-export interface NotificationProps {
-  open?: boolean
-  error?: boolean
-  onClose?: () => void
-  children: ReactNode
-  bgcolor?: "secondary" | "tertiary"
-}
-
-const Notification: FC<NotificationProps> = ({
-  open = true,
-  error = false,
-  onClose,
-  children,
-  bgcolor = "secondary",
-}) => {
-  const [_open, _setOpen] = useState(open)
-
-  useEffect(() => {
-    _setOpen(open)
-  }, [open])
-
-  if (!_open) return <></>
-
-  // @ts-expect-error guaranteed to be in palette
-  const contrastText = palette[bgcolor].contrastText as string
-
-  return (
-    <Section
-      boxProps={{
-        bgcolor: {
-          secondary: "#ffd23b",
-          tertiary: "#08bafc",
-        }[bgcolor],
-      }}
-      sx={{ paddingY: "5px" }}
-    >
-      <Stack direction="row" alignItems="center" gap={2}>
-        {error ? (
-          <ErrorOutlineIcon htmlColor={contrastText} />
-        ) : (
-          <InfoOutlinedIcon htmlColor={contrastText} />
-        )}
-        <Typography variant="body2" color={contrastText} mb={0}>
-          {children}
-        </Typography>
-        <IconButton
-          style={{ marginLeft: "auto" }}
-          onClick={() => {
-            _setOpen(false)
-            if (onClose !== undefined) onClose()
-          }}
-        >
-          <CloseOutlinedIcon htmlColor={contrastText} />
-        </IconButton>
-      </Stack>
-    </Section>
-  )
-}
-
-export default Notification