codeforlife 2.8.3 → 2.9.1

package/src/components/Image.tsx

@@ -1,41 +0,0 @@
-import { Box, type BoxProps } from "@mui/material"
-import { type FC } from "react"
-
-import { openInNewTab } from "../utils/general"
-
-export interface ImageProps extends Omit<BoxProps, "component"> {
-  alt: string
-  src: string
-  href?: string
-  hrefInNewTab?: boolean
-}
-
-const Image: FC<ImageProps> = ({ href, hrefInNewTab = false, ...props }) => {
-  let {
-    onClick,
-    style = {},
-    ...otherProps // eslint-disable-line prefer-const
-  } = props
-
-  if (style.width === undefined) {
-    style.width = "100%"
-  }
-
-  // Override onClick if href provided.
-  if (href !== undefined) {
-    style = { ...style, cursor: "pointer" }
-    if (hrefInNewTab) {
-      onClick = () => {
-        openInNewTab(href)
-      }
-    } else {
-      onClick = () => {
-        window.location.replace(href)
-      }
-    }
-  }
-
-  return <Box component="img" onClick={onClick} style={style} {...otherProps} />
-}
-
-export default Image

package/src/components/InputFileButton.tsx

@@ -1,27 +0,0 @@
-import { Button, type ButtonProps } from "@mui/material"
-import {
-  type DetailedHTMLProps,
-  type FC,
-  type InputHTMLAttributes,
-} from "react"
-
-export interface InputFileButtonProps
-  extends Omit<ButtonProps<"label">, "component"> {
-  inputProps?: Omit<
-    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
-    "type" | "hidden"
-  >
-}
-
-const InputFileButton: FC<InputFileButtonProps> = ({
-  children,
-  inputProps,
-  ...otherButtonProps
-}) => (
-  <Button component="label" {...otherButtonProps}>
-    {children}
-    <input type="file" hidden {...inputProps} />
-  </Button>
-)
-
-export default InputFileButton

package/src/components/ItemizedList.tsx

@@ -1,63 +0,0 @@
-import { type FC, type ReactElement } from "react"
-import {
-  List,
-  type ListItem,
-  type ListItemText,
-  type ListProps,
-} from "@mui/material"
-
-type ListItemElement =
-  | ReactElement<typeof ListItem | typeof ListItemText>
-  | string
-
-export interface ItemizedListProps {
-  styleType:
-    | "unset"
-    | "initial"
-    | "inherit"
-    | "upper-roman"
-    | "upper-latin"
-    | "upper-alpha"
-    | "square"
-    | "none"
-    | "lower-roman"
-    | "lower-latin"
-    | "lower-greek"
-    | "lower-alpha"
-    | "georgian"
-    | "disc"
-    | "decimal-leading-zero"
-    | "decimal"
-    | "armenian"
-    | "circle"
-  listProps?: ListProps
-  pl?: number
-  children: ListItemElement | ListItemElement[]
-}
-
-const ItemizedList: FC<ItemizedListProps> = ({
-  styleType,
-  listProps = {},
-  pl = 4,
-  children,
-}) => {
-  const { sx, ...otherProps } = listProps
-  const listItemProps = { display: "list-item" }
-
-  return (
-    <List
-      sx={{
-        listStyleType: styleType,
-        pl,
-        ".MuiListItem-root": listItemProps,
-        ".MuiListItemText-root": listItemProps,
-        ...sx,
-      }}
-      {...otherProps}
-    >
-      {children}
-    </List>
-  )
-}
-
-export default ItemizedList

package/src/components/OrderedGrid.tsx

@@ -1,92 +0,0 @@
-import { type FC, type ReactElement } from "react"
-import { Unstable_Grid2 as Grid, type Grid2Props } from "@mui/material"
-
-interface ItemProps
-  extends Omit<
-    Grid2Props,
-    | "key"
-    | "order"
-    | "xs"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | "xsOffset"
-    | "smOffset"
-    | "mdOffset"
-    | "lgOffset"
-    | "xlOffset"
-  > {}
-
-interface GlobalItemProps extends ItemProps {
-  xs: number
-  sm: number
-  md: number
-  lg: number
-  xl: number
-}
-
-export interface OrderedGridProps {
-  rows: Array<
-    Array<{
-      element: ReactElement
-      itemProps?: ItemProps
-    }>
-  >
-  containerProps?: Omit<Grid2Props, "container">
-  globalItemProps: GlobalItemProps
-}
-
-const OrderedGrid: FC<OrderedGridProps> = ({
-  rows,
-  containerProps = {},
-  globalItemProps,
-}) => {
-  const columns = Number(containerProps.columns ?? 12)
-
-  const getItemsPerRow = (size: number): number => Math.floor(columns / size)
-
-  const getOrder = (
-    rowIndex: number,
-    itemIndex: number,
-    size: number,
-  ): number =>
-    Math.floor(itemIndex / getItemsPerRow(size)) * rows.length + rowIndex
-
-  const getOffset = (itemIndex: number, size: number): number => {
-    const itemsOnLastRow = rows[0].length % getItemsPerRow(size)
-    return itemsOnLastRow !== 0 && itemIndex === rows[0].length - 1
-      ? (columns - itemsOnLastRow * size) / 2
-      : 0
-  }
-
-  return (
-    <Grid container {...containerProps}>
-      {rows.map((row, rowIndex) =>
-        row.map(({ element, itemProps = {} }, itemIndex) => (
-          <Grid
-            key={`${rowIndex}-${itemIndex}`}
-            order={{
-              xs: getOrder(rowIndex, itemIndex, globalItemProps.xs),
-              sm: getOrder(rowIndex, itemIndex, globalItemProps.sm),
-              md: getOrder(rowIndex, itemIndex, globalItemProps.md),
-              lg: getOrder(rowIndex, itemIndex, globalItemProps.lg),
-              xl: getOrder(rowIndex, itemIndex, globalItemProps.xl),
-            }}
-            xsOffset={getOffset(itemIndex, globalItemProps.xs)}
-            smOffset={getOffset(itemIndex, globalItemProps.sm)}
-            mdOffset={getOffset(itemIndex, globalItemProps.md)}
-            lgOffset={getOffset(itemIndex, globalItemProps.lg)}
-            xlOffset={getOffset(itemIndex, globalItemProps.xl)}
-            {...globalItemProps}
-            {...itemProps}
-          >
-            {element}
-          </Grid>
-        )),
-      )}
-    </Grid>
-  )
-}
-
-export default OrderedGrid

package/src/components/ScrollIntoViewLink.tsx

@@ -1,22 +0,0 @@
-import { Link, type LinkProps } from "@mui/material"
-import { type FC } from "react"
-export interface ScrollIntoViewLinkProps extends Omit<LinkProps, "onClick"> {
-  elementId: string
-  options?: ScrollIntoViewOptions
-}
-
-const ScrollIntoViewLink: FC<ScrollIntoViewLinkProps> = ({
-  elementId,
-  options,
-  ...linkProps
-}) => (
-  <Link
-    {...linkProps}
-    onClick={() => {
-      const element = document.getElementById(elementId)
-      element?.scrollIntoView(options)
-    }}
-  />
-)
-
-export default ScrollIntoViewLink

package/src/components/SyncError.tsx

@@ -1,14 +0,0 @@
-import { Stack, Typography } from "@mui/material"
-import { type FC } from "react"
-import { SyncProblem as SyncProblemIcon } from "@mui/icons-material"
-
-export interface SyncErrorProps {}
-
-const SyncError: FC<SyncErrorProps> = () => (
-  <Stack alignItems="center" alignContent="center">
-    <SyncProblemIcon color="error" />
-    <Typography color="error.main">Failed to sync data</Typography>
-  </Stack>
-)
-
-export default SyncError

package/src/components/TablePagination.tsx

@@ -1,142 +0,0 @@
-import {
-  type ElementType,
-  type JSX,
-  type JSXElementConstructor,
-  type ReactNode,
-  useEffect,
-} from "react"
-import {
-  TablePagination as MuiTablePagination,
-  type TablePaginationProps as MuiTablePaginationProps,
-  Stack,
-  type StackProps,
-  type TablePaginationBaseProps,
-} from "@mui/material"
-import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
-
-import { type ListArg, type ListResult, handleResultState } from "../utils/api"
-import { type Pagination, usePagination } from "../hooks/api"
-
-export type TablePaginationProps<
-  QueryArg extends ListArg,
-  ResultType extends ListResult<any>,
-  RootComponent extends
-    ElementType = JSXElementConstructor<TablePaginationBaseProps>,
-  AdditionalProps = {},
-> = Omit<
-  MuiTablePaginationProps<RootComponent, AdditionalProps>,
-  | "component"
-  | "count"
-  | "rowsPerPage"
-  | "onRowsPerPageChange"
-  | "rowsPerPageOptions"
-  | "page"
-  | "onPageChange"
-> &
-  Partial<
-    Pick<
-      MuiTablePaginationProps<RootComponent, AdditionalProps>,
-      "onRowsPerPageChange" | "onPageChange"
-    >
-  > & {
-    children: (
-      data: ResultType["data"],
-      pagination: Pagination & { count?: number; maxLimit?: number },
-    ) => ReactNode
-    useLazyListQuery: TypedUseLazyQuery<ResultType, QueryArg, any>
-    preferCacheValue?: boolean
-    filters?: Omit<QueryArg, "limit" | "offset">
-    rowsPerPageOptions?: number[]
-    stackProps?: StackProps
-    page?: number
-    rowsPerPage?: number
-  }
-
-const TablePagination = <
-  QueryArg extends ListArg,
-  ResultType extends ListResult<any>,
-  RootComponent extends
-    ElementType = JSXElementConstructor<TablePaginationBaseProps>,
-  AdditionalProps = {},
->({
-  children,
-  useLazyListQuery,
-  preferCacheValue,
-  filters,
-  page: initialPage = 0,
-  rowsPerPage: initialLimit = 50,
-  rowsPerPageOptions = [50, 100, 150],
-  stackProps,
-  onRowsPerPageChange,
-  onPageChange,
-  ...tablePaginationProps
-}: TablePaginationProps<
-  QueryArg,
-  ResultType,
-  RootComponent,
-  AdditionalProps
->): JSX.Element => {
-  const [trigger, result] = useLazyListQuery()
-  const [{ limit, page, offset }, setPagination] = usePagination({
-    page: initialPage,
-    limit: initialLimit,
-  })
-
-  useEffect(
-    () => {
-      void trigger({ limit, offset, ...filters } as QueryArg, preferCacheValue)
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      trigger,
-      limit,
-      offset,
-      // eslint-disable-next-line react-hooks/exhaustive-deps,@typescript-eslint/no-unsafe-assignment
-      ...Object.values(filters || {}),
-      preferCacheValue,
-    ],
-  )
-
-  const { count, max_limit } = result.data || {}
-
-  if (max_limit) {
-    rowsPerPageOptions = rowsPerPageOptions.filter(
-      option => option <= max_limit,
-    )
-  }
-
-  return (
-    <Stack {...stackProps}>
-      {handleResultState(result, ({ data }) =>
-        children(data, {
-          limit,
-          page,
-          offset,
-          count,
-          maxLimit: max_limit,
-        }),
-      )}
-      <MuiTablePagination
-        component="div"
-        count={count ?? 0}
-        rowsPerPage={limit}
-        onRowsPerPageChange={event => {
-          setPagination({ limit: parseInt(event.target.value), page: 0 })
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-          if (onRowsPerPageChange) onRowsPerPageChange(event)
-        }}
-        page={page}
-        onPageChange={(event, page) => {
-          setPagination(({ limit }) => ({ limit, page }))
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-          if (onPageChange) onPageChange(event, page)
-        }}
-        // ascending order
-        rowsPerPageOptions={rowsPerPageOptions.sort((a, b) => a - b)}
-        {...tablePaginationProps}
-      />
-    </Stack>
-  )
-}
-
-export default TablePagination

package/src/components/YouTubeVideo.tsx

@@ -1,26 +0,0 @@
-import { Box, type BoxProps } from "@mui/material"
-import { type FC } from "react"
-
-export interface YouTubeVideoProps extends Omit<BoxProps, "component"> {
-  src: string
-}
-
-const YouTubeVideo: FC<YouTubeVideoProps> = ({
-  src,
-  style = {},
-  ...otherProps
-}) => {
-  return (
-    <Box
-      component="iframe"
-      width="100%"
-      src={src}
-      title="YouTube video player"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen"
-      style={{ border: "0px", aspectRatio: "16 / 9", ...style }}
-      {...otherProps}
-    />
-  )
-}
-
-export default YouTubeVideo

package/src/components/form/ApiAutocompleteField.tsx

@@ -1,187 +0,0 @@
-import { Button, type ChipTypeMap, CircularProgress } from "@mui/material"
-import {
-  Children,
-  type ElementType,
-  type ForwardRefRenderFunction,
-  type HTMLAttributes,
-  type JSX,
-  forwardRef,
-  useEffect,
-  useState,
-} from "react"
-import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
-
-import {
-  AutocompleteField,
-  type AutocompleteFieldProps,
-} from "../../components/form"
-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">,
-  // api type args
-  QueryArg extends ListArg,
-  ResultType extends ListResult<any>,
-  // autocomplete type args
-  Multiple extends boolean | undefined = false,
-  DisableClearable extends boolean | undefined = false,
-  FreeSolo extends boolean | undefined = false,
-  ChipComponent extends ElementType = ChipTypeMap["defaultComponent"],
-> extends Omit<
-    AutocompleteFieldProps<
-      ModelId,
-      Multiple,
-      DisableClearable,
-      FreeSolo,
-      ChipComponent
-    >,
-    | "options"
-    | "ListboxComponent"
-    | "filterOptions"
-    | "getOptionLabel"
-    | "getOptionKey"
-    | "onInputChange"
-  > {
-  useLazyListQuery: TypedUseLazyQuery<ResultType, QueryArg, any>
-  filterOptions?: Omit<QueryArg, "limit" | "offset" | SearchKey>
-  getOptionLabel: (result: ResultType["data"][number]) => string
-  getOptionKey?: (result: ResultType["data"][number]) => ModelId
-  searchKey: SearchKey
-}
-
-const ApiAutocompleteField = <
-  SearchKey extends keyof Omit<QueryArg, "limit" | "offset">,
-  // api type args
-  QueryArg extends ListArg,
-  ResultType extends ListResult<any>,
-  // autocomplete type args
-  Multiple extends boolean | undefined = false,
-  DisableClearable extends boolean | undefined = false,
-  FreeSolo extends boolean | undefined = false,
-  ChipComponent extends ElementType = ChipTypeMap["defaultComponent"],
->({
-  useLazyListQuery,
-  filterOptions,
-  getOptionLabel,
-  getOptionKey = result => result.id as ModelId,
-  searchKey,
-  ...otherAutocompleteFieldProps
-}: ApiAutocompleteFieldProps<
-  SearchKey,
-  // api type args
-  QueryArg,
-  ResultType,
-  // autocomplete type args
-  Multiple,
-  DisableClearable,
-  FreeSolo,
-  ChipComponent
->): JSX.Element => {
-  const [search, setSearch] = useState("")
-  const [trigger, { isLoading, isError }] = useLazyListQuery()
-  const [{ limit, offset }, setPagination] = usePagination()
-  const [{ options, hasMore }, setState] = useState<{
-    options: Record<ModelId, ResultType["data"][number]>
-    hasMore: boolean
-  }>({ options: {}, hasMore: true })
-
-  // Call api
-  useEffect(
-    () => {
-      const arg = { limit, offset, ...filterOptions } as QueryArg
-      // @ts-expect-error search key can index arg
-      if (search) arg[searchKey] = search
-
-      trigger(arg, true)
-        .unwrap()
-        .then(({ data, offset, limit, count }) => {
-          setState(({ options: previousOptions }) => {
-            const options = { ...previousOptions }
-            data.forEach(result => {
-              options[getOptionKey(result)] = result
-            })
-            return { options, hasMore: offset + limit < count }
-          })
-        })
-        .catch(error => {
-          if (error) console.error(error)
-          // TODO: gracefully handle error
-        })
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      trigger,
-      limit,
-      offset,
-      searchKey,
-      search,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...Object.values(filterOptions || {}),
-    ],
-  )
-
-  // Get options keys
-  let optionKeys: ModelId[] = Object.keys(options)
-  if (!optionKeys.length) return <></>
-  if (typeof getOptionKey(Object.values(options)[0]) === "number") {
-    optionKeys = optionKeys.map(Number)
-  }
-
-  function loadNextPage() {
-    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}
-      getOptionLabel={id => getOptionLabel(options[id])}
-      onInputChange={(_, value, reason) => {
-        setSearch(reason === "input" ? value : "")
-      }}
-      ListboxComponent={forwardRef(ListboxComponent)}
-      {...otherAutocompleteFieldProps}
-    />
-  )
-}
-
-export default ApiAutocompleteField