codeforlife 2.6.1

package/src/theme/components/index.ts

@@ -0,0 +1,57 @@
+import { type ThemeOptions } from "@mui/material"
+
+import MuiAccordion from "./MuiAccordion"
+import MuiAutocomplete from "./MuiAutocomplete"
+import MuiButton from "./MuiButton"
+import MuiCardActions from "./MuiCardActions"
+import MuiCheckbox from "./MuiCheckbox"
+import MuiContainer from "./MuiContainer"
+import MuiDialog from "./MuiDialog"
+import MuiFormControlLabel from "./MuiFormControlLabel"
+import MuiFormHelperText from "./MuiFormHelperText"
+import MuiGrid2 from "./MuiGrid2"
+import MuiInputBase from "./MuiInputBase"
+import MuiLink from "./MuiLink"
+import MuiList from "./MuiList"
+import MuiListItemText from "./MuiListItemText"
+import MuiMenu from "./MuiMenu"
+import MuiMenuItem from "./MuiMenuItem"
+import MuiSelect from "./MuiSelect"
+import MuiTab from "./MuiTab"
+import MuiTable from "./MuiTable"
+import MuiTableBody from "./MuiTableBody"
+import MuiTableHead from "./MuiTableHead"
+import MuiTabs from "./MuiTabs"
+import MuiTextField from "./MuiTextField"
+import MuiToolbar from "./MuiToolbar"
+import MuiTypography from "./MuiTypography"
+
+const components: ThemeOptions["components"] = {
+  MuiAccordion,
+  MuiAutocomplete,
+  MuiButton,
+  MuiCardActions,
+  MuiCheckbox,
+  MuiContainer,
+  MuiDialog,
+  MuiFormControlLabel,
+  MuiFormHelperText,
+  MuiGrid2,
+  MuiInputBase,
+  MuiLink,
+  MuiList,
+  MuiListItemText,
+  MuiMenu,
+  MuiMenuItem,
+  MuiSelect,
+  MuiTab,
+  MuiTable,
+  MuiTableBody,
+  MuiTableHead,
+  MuiTabs,
+  MuiTextField,
+  MuiToolbar,
+  MuiTypography,
+}
+
+export default components

package/src/theme/index.ts

@@ -0,0 +1,25 @@
+import {
+  type ThemeOptions,
+  createTheme,
+  responsiveFontSizes,
+} from "@mui/material"
+
+import components from "./components"
+import palette from "./palette"
+import spacing from "./spacing"
+import typography from "./typography"
+
+export * from "./palette"
+export * from "./ThemedBox"
+export { default as ThemedBox } from "./ThemedBox"
+
+export const themeOptions: ThemeOptions = {
+  palette,
+  components,
+  spacing,
+  typography,
+}
+
+const theme = responsiveFontSizes(createTheme(themeOptions))
+
+export default theme

package/src/theme/palette.ts

@@ -0,0 +1,98 @@
+import {
+  createTheme,
+  type PaletteColor,
+  type PaletteOptions,
+  type PaletteColorOptions,
+} from "@mui/material"
+
+import { primary, secondary, tertiary } from "./colors"
+
+// Extend palette to include a custom colors.
+declare module "@mui/material/styles" {
+  interface CustomPaletteColors {
+    tertiary: PaletteColor
+    white: PaletteColor
+    black: PaletteColor
+    teacher: PaletteColor
+    student: PaletteColor
+    indy: PaletteColor
+  }
+  interface Palette extends CustomPaletteColors {}
+  interface PaletteOptions extends CustomPaletteColors {}
+}
+
+export interface PropsColorOverrides {
+  tertiary: true
+  white: true
+  black: true
+  teacher: true
+  student: true
+  indy: true
+}
+
+declare module "@mui/material" {
+  interface FabPropsColorOverrides extends PropsColorOverrides {}
+  interface CardPropsColorOverrides extends PropsColorOverrides {}
+  interface ChipPropsColorOverrides extends PropsColorOverrides {}
+  interface IconPropsColorOverrides extends PropsColorOverrides {}
+  interface AlertPropsColorOverrides extends PropsColorOverrides {}
+  interface BadgePropsColorOverrides extends PropsColorOverrides {}
+  interface RadioPropsColorOverrides extends PropsColorOverrides {}
+  interface AppBarPropsColorOverrides extends PropsColorOverrides {}
+  interface ButtonPropsColorOverrides extends PropsColorOverrides {}
+  interface SliderPropsColorOverrides extends PropsColorOverrides {}
+  interface SwitchPropsColorOverrides extends PropsColorOverrides {}
+  interface SvgIconPropsColorOverrides extends PropsColorOverrides {}
+  interface CheckboxPropsColorOverrides extends PropsColorOverrides {}
+  interface FormLabelPropsColorOverrides extends PropsColorOverrides {}
+  interface InputBasePropsColorOverrides extends PropsColorOverrides {}
+  interface TextFieldPropsColorOverrides extends PropsColorOverrides {}
+  interface IconButtonPropsColorOverrides extends PropsColorOverrides {}
+  interface PaginationPropsColorOverrides extends PropsColorOverrides {}
+  interface ButtonGroupPropsColorOverrides extends PropsColorOverrides {}
+  interface FormControlPropsColorOverrides extends PropsColorOverrides {}
+  interface ToggleButtonPropsColorOverrides extends PropsColorOverrides {}
+  interface LinearProgressPropsColorOverrides extends PropsColorOverrides {}
+  interface PaginationItemPropsColorOverrides extends PropsColorOverrides {}
+  interface CircularProgressPropsColorOverrides extends PropsColorOverrides {}
+  interface TabsPropsIndicatorColorOverrides extends PropsColorOverrides {}
+  interface ToggleButtonGroupPropsColorOverrides extends PropsColorOverrides {}
+}
+
+const {
+  palette: { augmentColor },
+} = createTheme()
+
+const teacher: PaletteColorOptions = {
+  main: primary[500],
+  contrastText: "#fff",
+}
+
+const student: PaletteColorOptions = {
+  main: tertiary[500],
+  contrastText: "#fff",
+}
+
+const indy: PaletteColorOptions = {
+  main: secondary[500],
+  contrastText: "#000",
+}
+
+const palette: PaletteOptions = {
+  // primary / teacher
+  primary: teacher,
+  teacher: augmentColor({ color: teacher }),
+  // secondary / indy
+  secondary: indy,
+  indy: augmentColor({ color: indy }),
+  // tertiary / student
+  tertiary: augmentColor({ color: student }),
+  student: augmentColor({ color: student }),
+  // other
+  white: augmentColor({ color: { main: "#fff" } }),
+  black: augmentColor({ color: { main: "#000" } }),
+  info: { main: "#f1ecec" },
+  error: { main: "#d50000" },
+}
+
+export default palette

package/src/theme/spacing.ts

@@ -0,0 +1,8 @@
+export default function spacing(
+  factor: number,
+  important: boolean = false,
+): string {
+  let spacing = `${8 * factor}px`
+  if (important) spacing += " !important"
+  return spacing
+}

package/src/theme/typography.ts

@@ -0,0 +1,101 @@
+import {
+  type TypographyOptions,
+  type CSSProperties,
+} from "@mui/material/styles/createTypography"
+
+// Pseudo typography variant for all form text.
+export const form: CSSProperties = {
+  fontFamily: '"Inter"',
+  fontSize: "14px !important",
+  fontWeight: 600,
+  margin: 0,
+  marginBottom: "12px",
+  letterSpacing: 0,
+}
+
+// TODO: assess if line-height is needed.
+//  Doesn't play well with responsiveFontSizes.
+//  https://mui.com/material-ui/customization/theming/#responsivefontsizes-theme-options-theme
+
+const typography: TypographyOptions = {
+  h1: {
+    color: "#383b3b",
+    fontFamily: '"SpaceGrotesk"',
+    fontWeight: 500,
+    fontSize: "60px",
+    // lineHeight: '60px',
+    marginBottom: "24px",
+    letterSpacing: 0,
+  },
+  h2: {
+    color: "#383b3b",
+    fontFamily: '"SpaceGrotesk"',
+    fontWeight: 500,
+    fontSize: "55px",
+    // lineHeight: '55px',
+    marginBottom: "22px",
+    letterSpacing: 0,
+  },
+  h3: {
+    color: "#383b3b",
+    fontFamily: '"SpaceGrotesk"',
+    fontWeight: 500,
+    fontSize: "45px",
+    // lineHeight: '47px',
+    marginBottom: "20px",
+    letterSpacing: 0,
+  },
+  h4: {
+    color: "#383b3b",
+    fontFamily: '"SpaceGrotesk"',
+    fontWeight: 500,
+    fontSize: "30px",
+    // lineHeight: '38px',
+    marginBottom: "18px",
+    letterSpacing: 0,
+  },
+  h5: {
+    color: "#383b3b",
+    fontFamily: '"SpaceGrotesk"',
+    fontWeight: 500,
+    fontSize: "25px",
+    // lineHeight: '32px',
+    marginBottom: "16px",
+    letterSpacing: 0,
+  },
+  h6: {
+    color: "#383b3b",
+    fontFamily: '"SpaceGrotesk"',
+    fontWeight: 500,
+    fontSize: "21px",
+    // lineHeight: '26px',
+    marginBottom: "10px",
+    letterSpacing: 0,
+  },
+  body1: {
+    color: "#383b3b",
+    fontFamily: '"Inter"',
+    fontWeight: 500,
+    fontSize: "1.07rem !important",
+    // lineHeight: '22px',
+    marginBottom: "16px",
+    letterSpacing: 0,
+  },
+  body2: {
+    color: "#383b3b",
+    fontFamily: '"Inter"',
+    fontWeight: 500,
+    fontSize: "0.92rem !important",
+    // lineHeight: '20px',
+    marginBottom: "14px",
+    letterSpacing: 0,
+  },
+  button: {
+    fontFamily: '"Inter"',
+    fontSize: "15px",
+    fontWeight: 600,
+    letterSpacing: 0,
+  },
+}
+
+export default typography

package/src/utils/api.test.ts

@@ -0,0 +1,19 @@
+import { buildUrl } from "./api"
+
+test("url params", () => {
+  const url = buildUrl("<id>/", { url: { id: 1 } })
+
+  expect(url).toBe("1/")
+})
+
+test("single search value", () => {
+  const url = buildUrl("/", { search: { age: 18 } })
+
+  expect(url).toBe("/?age=18")
+})
+
+test("multiple search values", () => {
+  const url = buildUrl("/", { search: { age: [18, 21] } })
+
+  expect(url).toBe("/?age=18&age=21")
+})

package/src/utils/api.tsx

@@ -0,0 +1,327 @@
+import { CircularProgress } from "@mui/material"
+import type {
+  FetchBaseQueryError,
+  TypedUseQueryHookResult,
+  TypedUseQueryStateResult,
+  TypedUseMutationResult,
+} from "@reduxjs/toolkit/query/react"
+import { type ReactNode } from "react"
+
+import SyncError from "../components/SyncError"
+import { type Optional, type Required, getNestedProperty } from "./general"
+
+// -----------------------------------------------------------------------------
+// Model Types
+// -----------------------------------------------------------------------------
+
+// The fields of a model.
+export type Fields = Record<string, unknown>
+
+export interface Tag<Type extends string> {
+  type: Type
+  id: string
+}
+
+export type ModelId = string | number
+
+/**
+ * A data model.
+ *  Id: The type of Id.
+ *  Data: The data fields.
+ */
+export type Model<Id extends ModelId, MFields extends Fields = Fields> = {
+  id: Id
+} & Omit<MFields, "id">
+
+export type Result<
+  M extends Model<any>,
+  MFields extends keyof Omit<M, "id"> = never,
+> = Pick<M, "id" | MFields>
+
+export type Arg<
+  M extends Model<any>,
+  RequiredFields extends keyof Omit<M, "id">,
+  OptionalFields extends keyof Omit<M, "id" | RequiredFields> = never,
+> = Required<M, RequiredFields> & Optional<M, OptionalFields>
+
+// -----------------------------------------------------------------------------
+// CRUD Types
+// https://www.django-rest-framework.org/api-guide/viewsets/#viewset-actions
+// -----------------------------------------------------------------------------
+
+// Create
+
+export type CreateResult<
+  M extends Model<any>,
+  MFields extends keyof Omit<M, "id"> = never,
+> = Result<M, MFields>
+
+export type CreateArg<
+  M extends Model<any>,
+  RequiredFields extends keyof Omit<M, "id">,
+  OptionalFields extends keyof Omit<M, "id" | RequiredFields> = never,
+> = Arg<M, RequiredFields, OptionalFields>
+
+export type BulkCreateResult<
+  M extends Model<any>,
+  MFields extends keyof Omit<M, "id"> = never,
+  ExtraFields extends Fields = Fields,
+> = Array<Result<M, MFields> & ExtraFields>
+
+export type BulkCreateArg<
+  M extends Model<any>,
+  RequiredFields extends keyof Omit<M, "id">,
+  OptionalFields extends keyof Omit<M, "id" | RequiredFields> = never,
+  ExtraFields extends Fields = Fields,
+> = Array<Arg<M, RequiredFields, OptionalFields> & ExtraFields>
+
+// Read
+
+export type RetrieveResult<
+  M extends Model<any>,
+  MFields extends keyof Omit<M, "id"> = never,
+> = Result<M, MFields>
+
+export type RetrieveArg<M extends Model<any>> = M["id"]
+
+export interface ListResult<
+  M extends Model<any>,
+  MFields extends keyof Omit<M, "id"> = never,
+  ExtraFields extends Fields = Fields,
+> {
+  count: number
+  offset: number
+  limit: number
+  max_limit: number
+  data: Array<Result<M, MFields> & ExtraFields>
+}
+
+export type ListArg<Filters extends Fields = Fields> = {
+  limit: number
+  offset: number
+} & Partial<Omit<Filters, "limit" | "offset">>
+
+// Update
+
+export type UpdateResult<
+  M extends Model<any>,
+  MFields extends keyof Omit<M, "id"> = never,
+> = Result<M, MFields>
+
+type UpdateWithBody<
+  M extends Model<any>,
+  RequiredFields extends keyof Omit<M, "id">,
+  OptionalFields extends keyof Omit<M, "id" | RequiredFields>,
+> = Pick<M, "id"> & Arg<M, RequiredFields, OptionalFields>
+
+// NOTE: Sometimes update does not require a body. For example, if calling the
+// "refresh" action on an invitation object updates the expiry date to be 24
+// hours from now. In this case, you only need to pass the ID of the object.
+export type UpdateArg<
+  M extends Model<any>,
+  RequiredFields extends keyof Omit<M, "id"> = never,
+  OptionalFields extends keyof Omit<M, "id" | RequiredFields> = never,
+> = [RequiredFields] extends [never]
+  ? [OptionalFields] extends [never]
+    ? M["id"]
+    : UpdateWithBody<M, RequiredFields, OptionalFields>
+  : UpdateWithBody<M, RequiredFields, OptionalFields>
+
+export type BulkUpdateResult<
+  M extends Model<any>,
+  MFields extends keyof Omit<M, "id"> = never,
+  ExtraFields extends Fields = Fields,
+> = Array<Result<M, MFields> & ExtraFields>
+
+export type BulkUpdateArg<
+  M extends Model<any>,
+  RequiredFields extends keyof Omit<M, "id">,
+  OptionalFields extends keyof Omit<M, "id" | RequiredFields> = never,
+  ExtraFields extends Fields = Fields,
+> = Record<M["id"], Arg<M, RequiredFields, OptionalFields> & ExtraFields>
+
+// Delete
+
+export type DestroyResult = null
+
+export type DestroyArg<M extends Model<any>> = M["id"]
+
+export type BulkDestroyResult = null
+
+export type BulkDestroyArg<M extends Model<any>> = Array<M["id"]>
+
+// -----------------------------------------------------------------------------
+// Functions
+// -----------------------------------------------------------------------------
+
+export function buildUrl(
+  url: string,
+  params: {
+    search?: Fields
+    url?: Fields
+  },
+): string {
+  if (params.url) {
+    Object.entries(params.url).forEach(([key, value]) => {
+      url = url.replace(`<${key}>`, String(value))
+    })
+  }
+
+  if (params.search) {
+    const searchParams: string[][] = []
+    for (const key in params.search) {
+      const values = params.search[key]
+      if (values === undefined) continue
+
+      if (Array.isArray(values)) {
+        for (const value of values) searchParams.push([key, String(value)])
+      } else {
+        searchParams.push([key, String(values)])
+      }
+    }
+
+    if (searchParams.length !== 0) {
+      url += `?${new URLSearchParams(searchParams).toString()}`
+    }
+  }
+
+  return url
+}
+
+export function isModelId(value: unknown): boolean {
+  return typeof value === "number" || typeof value === "string"
+}
+
+export function listTag<Type extends string>(type: Type): Tag<Type> {
+  return { type, id: "LIST" }
+}
+
+export type TagDataOptions = Partial<{
+  includeListTag: boolean
+  argKeysAreIds: boolean
+  id: string
+}>
+
+export function tagData<Type extends string, M extends Model<any>>(
+  type: Type,
+  options?: TagDataOptions,
+): (
+  result:
+    | Result<M, any>
+    | Array<Result<M, any>>
+    | ListResult<M, any>
+    | null
+    | undefined,
+  error: FetchBaseQueryError | undefined,
+  arg:
+    | Arg<M, any>
+    | Array<Arg<M, any>>
+    | Record<M["id"], Arg<M, any>>
+    | ListArg<any>
+    | Array<M["id"]>
+    | string
+    | number
+    | undefined,
+) => Array<Tag<Type>> {
+  const {
+    includeListTag = false,
+    argKeysAreIds = false,
+    id = "id",
+  } = options || {}
+
+  function tags(
+    ids: ModelId[],
+    list: boolean = includeListTag,
+  ): Array<Tag<Type>> {
+    const tags = ids.map(id => ({ type, id: String(id) }))
+    if (list) tags.push(listTag(type))
+    return tags
+  }
+
+  function getModelId(result: Result<M, any>) {
+    return getNestedProperty(result, id)
+  }
+
+  return (result, error, arg) => {
+    if (!error) {
+      if (arg) {
+        // The argument is an ID.
+        if (isModelId(arg)) return tags([arg as ModelId])
+
+        // The argument is an array of IDs.
+        if (Array.isArray(arg)) {
+          if (arg.length && isModelId(arg[0])) {
+            return tags(arg as Array<M["id"]>)
+          }
+        }
+        // The argument is an object that contains the id field.
+        else if (typeof arg === "object" && argKeysAreIds) {
+          return tags(Object.keys(arg as Record<M["id"], any>))
+        }
+      }
+
+      if (result) {
+        // The result is an array of models that contain the id field.
+        if (Array.isArray(result)) {
+          return tags(result.map(getModelId))
+        }
+
+        // The result is a model that contains the id field.
+        if (getModelId(result as Result<M, any>) !== undefined) {
+          return tags([getModelId(result as Result<M, any>)])
+        }
+
+        // The result is a list that contains an array of models that contain
+        // the id field.
+        return tags((result as ListResult<M, any>).data.map(getModelId), true)
+      }
+    }
+
+    return tags([])
+  }
+}
+
+export function modelUrls(list: string, detail: string) {
+  if (list === detail) throw Error("List and detail are the same.")
+
+  return { list, detail }
+}
+
+export type HandleQueryStateOptions = Partial<{
+  loading: ReactNode
+  error: ReactNode
+}>
+
+export function handleResultState<QueryArg, ResultType>(
+  result:
+    | TypedUseQueryHookResult<ResultType, QueryArg, any>
+    | TypedUseQueryStateResult<ResultType, QueryArg, any>
+    | TypedUseMutationResult<ResultType, QueryArg, any>,
+  children: (data: NonNullable<ResultType>) => ReactNode,
+  options?: HandleQueryStateOptions,
+): ReactNode {
+  const { data, isLoading, isSuccess, error } = result
+
+  const {
+    loading: loadingNode = <CircularProgress />,
+    error: errorNode = <SyncError />,
+  } = options || {}
+
+  // An error occurred.
+  if (error) {
+    console.error(error)
+    return errorNode
+  }
+
+  // Busy calling the API.
+  if (isLoading) return loadingNode
+
+  // Called the API and got data.
+  if (data) return children(data)
+
+  // Called the API and did not get data.
+  if (isSuccess) throw Error("Expected to get data from API but got nothing.")
+
+  // Have yet to call the API.
+  return loadingNode
+}

package/src/utils/auth.ts

@@ -0,0 +1,17 @@
+import Cookies from "js-cookie"
+
+import {
+  SESSION_COOKIE_NAME,
+  SESSION_METADATA_COOKIE_NAME,
+  CSRF_COOKIE_NAME,
+} from "../settings"
+
+export function logout() {
+  Cookies.remove(SESSION_COOKIE_NAME)
+  Cookies.remove(SESSION_METADATA_COOKIE_NAME)
+}
+
+// https://docs.djangoproject.com/en/3.2/ref/csrf/
+export function getCsrfCookie() {
+  return Cookies.get(CSRF_COOKIE_NAME)
+}