codeforlife 2.6.1

package/src/components/form/TextField.tsx

@@ -0,0 +1,103 @@
+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 ArraySchema,
+  type StringSchema,
+  type ValidateOptions,
+  array as YupArray,
+  type Schema,
+} from "yup"
+
+import { 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
+}
+
+// https://formik.org/docs/examples/with-material-ui
+const TextField: FC<TextFieldProps> = ({
+  id,
+  name,
+  schema,
+  type = "text",
+  required = false,
+  dirty = false,
+  split,
+  validateOptions,
+  ...otherTextFieldProps
+}) => {
+  const [initialValue, setInitialValue] = useState<string | string[]>("")
+
+  const dotPath = name.split(".")
+
+  let _schema: Schema = schema
+  if (split) _schema = YupArray().of(_schema)
+  if (required) {
+    _schema = _schema.required()
+    if (split) _schema = (_schema as ArraySchema<string[], any>).min(1)
+  }
+  if (dirty)
+    _schema = _schema.notOneOf([initialValue], "cannot be initial value")
+
+  const fieldConfig: FieldConfig = {
+    name,
+    type,
+    validate: schemaToFieldValidator(_schema, 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)
+
+    useEffect(() => {
+      setInitialValue(initialValue)
+    }, [initialValue])
+
+    useEffect(() => {
+      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}>{_Field}</Field>
+}
+
+export default TextField

package/src/components/form/UkCountyField.tsx

@@ -0,0 +1,67 @@
+import { type ChipTypeMap } from "@mui/material"
+import { type ElementType } from "react"
+import { UK_COUNTIES } from "../../utils/general"
+import AutocompleteField, {
+  type AutocompleteFieldProps,
+} from "./AutocompleteField"
+
+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

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

package/src/components/index.ts

@@ -0,0 +1,26 @@
+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 "./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

@@ -0,0 +1,84 @@
+import { Button, Stack, Typography, type ButtonProps } from "@mui/material"
+import { type FC } from "react"
+
+import { primary, secondary, tertiary } from "../../theme/colors"
+import palette from "../../theme/palette"
+import Image, { type ImageProps } from "../Image"
+import Section from "./Section"
+
+export interface BannerProps {
+  header: string
+  subheader?: string
+  textAlign?: "start" | "center"
+  imageProps?: ImageProps
+  buttonProps?: ButtonProps
+  bgcolor?: "primary" | "secondary" | "tertiary"
+}
+
+const Banner: FC<BannerProps> = ({
+  header,
+  subheader,
+  textAlign = "start",
+  imageProps,
+  buttonProps,
+  bgcolor = "primary",
+}) => {
+  // @ts-expect-error guaranteed to be in palette
+  const contrastText = palette[bgcolor].contrastText
+
+  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={buttonProps !== undefined ? undefined : 0}
+            >
+              {subheader}
+            </Typography>
+          )}
+          {buttonProps !== undefined && <Button {...buttonProps} />}
+        </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

@@ -0,0 +1,71 @@
+import {
+  CloseOutlined as CloseOutlinedIcon,
+  ErrorOutline as ErrorOutlineIcon,
+  InfoOutlined as InfoOutlinedIcon,
+} from "@mui/icons-material"
+import { IconButton, Stack, Typography } from "@mui/material"
+import { useEffect, useState, type FC, type ReactNode } from "react"
+
+import palette from "../../theme/palette"
+import Section from "./Section"
+
+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
+
+  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

package/src/components/page/Page.tsx

@@ -0,0 +1,73 @@
+import { Children, useEffect } from "react"
+import { useLocation, type Location } from "react-router-dom"
+
+import {
+  useSession,
+  type SessionMetadata,
+  type UseSessionChildren,
+  type UseSessionChildrenFunction,
+  type UseSessionOptions,
+} from "../../hooks/auth"
+import Notification, { type NotificationProps } from "./Notification"
+
+export type PageState = {
+  notifications: Array<{
+    index?: number
+    props: NotificationProps
+  }>
+  scroll: { x: number; y: number }
+}
+
+export interface PageProps<
+  SessionUserType extends SessionMetadata["user_type"] | undefined,
+> {
+  children: UseSessionChildren<SessionUserType>
+  session?: UseSessionOptions<SessionUserType>
+}
+
+const Page = <
+  SessionUserType extends SessionMetadata["user_type"] | undefined = undefined,
+>({
+  children,
+  session,
+}: PageProps<SessionUserType>): JSX.Element => {
+  const { state } = useLocation() as Location<null | Partial<PageState>>
+
+  let { scroll, notifications } = state || {}
+  scroll = scroll || { x: 0, y: 0 }
+  notifications = notifications || []
+
+  useEffect(() => {
+    window.scroll(scroll.x, scroll.y)
+  }, [scroll.x, scroll.y])
+
+  return (
+    <>
+      {useSession((metadata?: SessionMetadata) => {
+        if (typeof children === "function") {
+          children = metadata
+            ? (children as UseSessionChildrenFunction<true>)(metadata)
+            : (children as UseSessionChildrenFunction<false>)(metadata)
+        }
+
+        if (notifications.length) {
+          const childrenArray = Children.toArray(children)
+
+          notifications.forEach((notification, index) => {
+            childrenArray.splice(
+              notification.index ?? index,
+              0,
+              <Notification {...notification.props} />,
+            )
+          })
+
+          return childrenArray
+        }
+
+        return children
+      }, session)}
+    </>
+  )
+}
+
+export default Page

package/src/components/page/Section.tsx

@@ -0,0 +1,21 @@
+import {
+  Box,
+  Container,
+  type BoxProps,
+  type ContainerProps,
+} from "@mui/material"
+import type { FC } from "react"
+
+export interface SectionProps extends ContainerProps {
+  boxProps?: Omit<BoxProps, "children">
+}
+
+const Section: FC<SectionProps> = ({ boxProps, ...containerProps }) => {
+  return (
+    <Box {...boxProps}>
+      <Container {...containerProps} />
+    </Box>
+  )
+}
+
+export default Section

package/src/components/page/TabBar.tsx

@@ -0,0 +1,131 @@
+import {
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+} from "@mui/icons-material"
+import {
+  IconButton,
+  Tab,
+  Tabs,
+  Typography,
+  type TabScrollButtonProps,
+} from "@mui/material"
+import { useEffect, useState, type FC, type ReactNode } from "react"
+import { generatePath, useNavigate, useParams } from "react-router-dom"
+import { object as YupObject, string as YupString } from "yup"
+
+import { primary } from "../../theme/colors"
+import { tryValidateSync } from "../../utils/schema"
+import Section from "./Section"
+
+export interface TabBarProps {
+  header: string
+  tabs: Array<{
+    label: string
+    children: ReactNode
+    path: string
+  }>
+  originalPath: string
+  value?: number
+}
+
+const TabBar: FC<TabBarProps> = ({ header, tabs, originalPath, value = 0 }) => {
+  const params = useParams()
+  const navigate = useNavigate()
+  const [_value, _setValue] = useState(
+    value < 0 ? 0 : value >= tabs.length ? tabs.length - 1 : value,
+  )
+
+  const labels = tabs.map(tab => tab.label)
+  const children = tabs.map(tab => tab.children)
+  const paths = tabs.map(tab => tab.path)
+
+  useEffect(() => {
+    _setValue(value)
+  }, [value])
+
+  useEffect(() => {
+    const tab = tryValidateSync(
+      params,
+      YupObject({
+        tab: YupString().oneOf(paths).required(),
+      }),
+    )?.tab
+
+    if (tab !== undefined) {
+      _setValue(paths.indexOf(tab))
+    }
+  }, [params, paths])
+
+  return (
+    <>
+      <Section
+        boxProps={{ bgcolor: primary[500] }}
+        sx={{ paddingY: "100px" }}
+        className="flex-center"
+      >
+        <Typography
+          textAlign="center"
+          variant="h2"
+          style={{ color: "white" }}
+          mb={0}
+        >
+          {header}
+        </Typography>
+      </Section>
+      <Section
+        boxProps={{ bgcolor: primary[300] }}
+        sx={{ paddingY: "6px" }}
+        className="flex-center"
+      >
+        <Tabs
+          value={_value}
+          onChange={(_, value) => {
+            navigate(
+              generatePath(originalPath, {
+                tab: paths[value],
+              }),
+            )
+          }}
+          ScrollButtonComponent={({
+            disabled,
+            onClick,
+            direction,
+          }: TabScrollButtonProps) => {
+            return (
+              <>
+                {disabled === false && (
+                  <IconButton
+                    onClick={onClick}
+                    style={{
+                      padding: 0,
+                      [direction === "left" ? "marginRight" : "marginLeft"]:
+                        "15px",
+                      color: "white",
+                    }}
+                  >
+                    {direction === "left" ? (
+                      <>
+                        <ChevronLeftIcon />
+                      </>
+                    ) : (
+                      <>
+                        <ChevronRightIcon />
+                      </>
+                    )}
+                  </IconButton>
+                )}
+              </>
+            )
+          }}
+        >
+          {labels.map(label => (
+            <Tab disableRipple key={label} label={label} />
+          ))}
+        </Tabs>
+      </Section>
+      {children[_value]}
+    </>
+  )
+}
+
+export default TabBar

package/src/components/page/index.ts

@@ -0,0 +1,10 @@
+export * from "./Banner"
+export { default as Banner } from "./Banner"
+export * from "./Notification"
+export { default as Notification } from "./Notification"
+export * from "./Page"
+export { default as Page } from "./Page"
+export * from "./Section"
+export { default as Section } from "./Section"
+export * from "./TabBar"
+export { default as TabBar } from "./TabBar"

package/src/components/router/Link.tsx

@@ -0,0 +1,22 @@
+import { Link as MuiLink, type LinkProps as MuiLinkProps } from "@mui/material"
+import { Link as RouterLink } from "react-router-dom"
+
+import { type LinkProps as RouterLinkProps } from "../../utils/router"
+
+export type LinkProps<
+  Override extends "delta" | "to",
+  State extends Record<string, any> = Record<string, any>,
+> = Omit<MuiLinkProps, "component"> & RouterLinkProps<Override, State>
+
+// https://mui.com/material-ui/integrations/routing/#link
+const Link: {
+  (props: LinkProps<"delta">): JSX.Element
+  <State extends Record<string, any> = Record<string, any>>(
+    props: LinkProps<"to", State>,
+  ): JSX.Element
+} = (props: LinkProps<"delta"> | LinkProps<"to">) => {
+  // @ts-expect-error
+  return <MuiLink component={RouterLink} {...props} />
+}
+
+export default Link

package/src/components/router/LinkButton.tsx

@@ -0,0 +1,21 @@
+import { Button, type ButtonProps } from "@mui/material"
+import { Link } from "react-router-dom"
+
+import { type LinkProps } from "../../utils/router"
+
+export type LinkButtonProps<
+  Override extends "delta" | "to",
+  State extends Record<string, any> = Record<string, any>,
+> = Omit<ButtonProps, "component"> & LinkProps<Override, State>
+
+// https://mui.com/material-ui/integrations/routing/#button
+const LinkButton: {
+  (props: LinkButtonProps<"delta">): JSX.Element
+  <State extends Record<string, any> = Record<string, any>>(
+    props: LinkButtonProps<"to", State>,
+  ): JSX.Element
+} = (props: LinkButtonProps<"delta"> | LinkButtonProps<"to">) => {
+  return <Button {...{ ...props, component: Link }} />
+}
+
+export default LinkButton

package/src/components/router/LinkIconButton.tsx

@@ -0,0 +1,21 @@
+import { IconButton, type IconButtonProps } from "@mui/material"
+import { Link } from "react-router-dom"
+
+import { type LinkProps } from "../../utils/router"
+
+export type LinkIconButtonProps<
+  Override extends "delta" | "to",
+  State extends Record<string, any> = Record<string, any>,
+> = Omit<IconButtonProps, "component"> & LinkProps<Override, State>
+
+// https://mui.com/material-ui/integrations/routing/#button
+const LinkIconButton: {
+  (props: LinkIconButtonProps<"delta">): JSX.Element
+  <State extends Record<string, any> = Record<string, any>>(
+    props: LinkIconButtonProps<"to", State>,
+  ): JSX.Element
+} = (props: LinkIconButtonProps<"delta"> | LinkIconButtonProps<"to">) => {
+  return <IconButton {...{ ...props, component: Link }} />
+}
+
+export default LinkIconButton