codeforlife 2.6.1

package/src/server.js

@@ -0,0 +1,181 @@
+/**
+ * © Ocado Group
+ * Created on 13/12/2024 at 12:15:05(+00:00).
+ *
+ * A server for an app in a live environment.
+ * Based off: https://github.com/bluwy/create-vite-extra/blob/master/template-ssr-react-ts/server.js
+ */
+
+import fs from "node:fs/promises"
+import express from "express"
+import { Cache } from "memory-cache"
+
+export default class Server {
+  constructor(
+    /** @type {Partial<{ mode: "development" | "staging" | "production"; port: number; base: string }>} */
+    { mode, port, base } = {},
+  ) {
+    /** @type {"development" | "staging" | "production"} */
+    this.mode = mode || process.env.MODE || "development"
+    /** @type {number} */
+    this.port = port || (process.env.PORT ? Number(process.env.PORT) : 5173)
+    /** @type {string} */
+    this.base = base || process.env.BASE || "/"
+
+    /** @type {boolean} */
+    this.envIsProduction = process.env.NODE_ENV === "production"
+    /** @type {string} */
+    this.templateHtml = ""
+    /** @type {string} */
+    this.hostname = this.envIsProduction ? "0.0.0.0" : "127.0.0.1"
+
+    /** @type {import('express').Express} */
+    this.app = express()
+    /** @type {import('vite').ViteDevServer | undefined} */
+    this.vite = undefined
+    /** @type {import('memory-cache').Cache<string, any>} */
+    this.cache = new Cache()
+
+    /** @type {string} */
+    this.healthCheckCacheKey = "health-check"
+    /** @type {number} */
+    this.healthCheckCacheTimeout = 30000
+    /** @type {Record<"healthy" | "startingUp" | "shuttingDown" | "unhealthy" | "unknown", number>} */
+    this.healthCheckStatusCodes = {
+      // The app is running normally.
+      healthy: 200,
+      // The app is performing app-specific initialisation which must
+      // complete before it will serve normal application requests
+      // (perhaps the app is warming a cache or something similar). You
+      // only need to use this status if your app will be in a start-up
+      // mode for a prolonged period of time.
+      startingUp: 503,
+      // The app is shutting down. As with startingUp, you only need to
+      // use this status if your app takes a prolonged amount of time
+      // to shutdown, perhaps because it waits for a long-running
+      // process to complete before shutting down.
+      shuttingDown: 503,
+      // The app is not running normally.
+      unhealthy: 503,
+      // The app is not able to report its own state.
+      unknown: 503,
+    }
+  }
+
+  /** @type {(request: import('express').Request) => { healthStatus: "healthy" | "startingUp" | "shuttingDown" | "unhealthy" | "unknown"; additionalInfo: string; details?: Array<{ name: string; description: string; health: "healthy" | "startingUp" | "shuttingDown" | "unhealthy" | "unknown" }> }} */
+  getHealthCheck(request) {
+    return {
+      healthStatus: "healthy",
+      additionalInfo: "All healthy.",
+    }
+  }
+
+  /** @type {(request: import('express').Request, response: import('express').Response) => void} */
+  handleHealthCheck(request, response) {
+    /** @type {{ appId: string; healthStatus: "healthy" | "startingUp" | "shuttingDown" | "unhealthy" | "unknown"; lastCheckedTimestamp: string; additionalInformation: string; startupTimestamp: string; appVersion: string; details: Array<{ name: string; description: string; health: "healthy" | "startingUp" | "shuttingDown" | "unhealthy" | "unknown" }> }} */
+    let value = this.cache.get(this.healthCheckCacheKey)
+    if (value === null) {
+      const healthCheck = this.getHealthCheck(request)
+
+      if (healthCheck.healthStatus !== "healthy") {
+        console.warn(`health check: ${JSON.stringify(healthCheck)}`)
+      }
+
+      value = {
+        appId: process.env.APP_ID || "REPLACE_ME",
+        healthStatus: healthCheck.healthStatus,
+        lastCheckedTimestamp: new Date().toISOString(),
+        additionalInformation: healthCheck.additionalInfo,
+        startupTimestamp: new Date().toISOString(),
+        appVersion: process.env.APP_VERSION || "REPLACE_ME",
+        details: healthCheck.details || [],
+      }
+
+      this.cache.put(
+        this.healthCheckCacheKey,
+        value,
+        this.healthCheckCacheTimeout,
+      )
+    }
+
+    response.status(this.healthCheckStatusCodes[value.healthStatus]).json(value)
+  }
+
+  /** @type {(request: import('express').Request, response: import('express').Response) => Promise<void>} */
+  async handleServeHtml(request, response) {
+    try {
+      const path = request.originalUrl.replace(this.base, "")
+
+      /** @type {string} */
+      let template
+      /** @type {(path: string) => Promise<{ head?: string; html?: string }>} */
+      let render
+      if (this.envIsProduction) {
+        render = (await import("../../../dist/server/entry-server.js")).render
+
+        // Use cached template.
+        template = this.templateHtml
+      } else {
+        render = (await this.vite.ssrLoadModule("/src/entry-server.tsx")).render
+
+        // Always read fresh template.
+        template = await fs.readFile("./index.html", "utf-8")
+        template = await this.vite.transformIndexHtml(path, template)
+      }
+
+      const rendered = await render(path)
+
+      const html = template
+        .replace(`<!--app-head-->`, rendered.head ?? "")
+        .replace(`<!--app-html-->`, rendered.html ?? "")
+
+      response.status(200).set({ "Content-Type": "text/html" }).send(html)
+    } catch (error) {
+      this.vite?.ssrFixStacktrace(error)
+      console.error(error.stack)
+      response.status(500).end(this.envIsProduction ? undefined : error.stack)
+    }
+  }
+
+  async run() {
+    this.app.get("/health-check", (request, response) => {
+      this.handleHealthCheck(request, response)
+    })
+
+    if (this.envIsProduction) {
+      const compression = (await import("compression")).default
+      const sirv = (await import("sirv")).default
+
+      this.templateHtml = await fs.readFile("./dist/client/index.html", "utf-8")
+
+      this.app.use(compression())
+      this.app.use(this.base, sirv("./dist/client", { extensions: [] }))
+    } else {
+      const { createServer } = await import("vite")
+
+      this.vite = await createServer({
+        server: { middlewareMode: true },
+        appType: "custom",
+        base: this.base,
+        mode: this.mode,
+      })
+
+      this.app.use(this.vite.middlewares)
+    }
+
+    this.app.get("*", async (request, response) => {
+      await this.handleServeHtml(request, response)
+    })
+
+    this.app.listen(this.port, this.hostname, () => {
+      let startMessage =
+        "Server started.\n" +
+        `url: http://${this.hostname}:${this.port}\n` +
+        `environment: ${process.env.NODE_ENV}\n`
+
+      if (!this.envIsProduction) startMessage += `mode: ${this.mode}\n`
+
+      console.log(startMessage)
+    })
+  }
+}

package/src/settings/custom.ts

@@ -0,0 +1,22 @@
+/**
+ * This file contains all of our custom settings we define for our own purposes.
+ *
+ * This file is based on:
+ * https://github.com/ocadotechnology/codeforlife-package-python/blob/main/codeforlife/settings/custom.py
+ */
+
+// Shorthand to access environment variables.
+const env = import.meta.env as Record<string, string | undefined>
+
+// The name of the current service.
+export const SERVICE_NAME = env.VITE_SERVICE_NAME ?? "REPLACE_ME"
+
+// The api url of the current service.
+export const SERVICE_API_URL =
+  env.VITE_SERVICE_API_URL ?? "http://localhost:8000"
+
+// The names of cookies.
+export const CSRF_COOKIE_NAME = `${SERVICE_NAME}_csrftoken`
+export const SESSION_COOKIE_NAME = env.VITE_SESSION_COOKIE_NAME ?? "session_key"
+export const SESSION_METADATA_COOKIE_NAME =
+  env.VITE_SESSION_METADATA_COOKIE_NAME ?? "session_metadata"

package/src/settings/index.ts

@@ -0,0 +1,5 @@
+// Shorthand to access environment variables.
+export default import.meta.env as Record<string, string>
+
+export * from "./custom"
+export * from "./vite"

package/src/settings/vite.ts

@@ -0,0 +1,26 @@
+/**
+ * This file contains all of vite's environment variables.
+ *
+ * https://vite.dev/guide/env-and-mode#env-variables
+ */
+
+// Shorthand to access environment variables.
+const env = import.meta.env
+
+// The mode the app is running in.
+export const MODE = env.MODE
+
+// The base url the app is being served from.
+// This is determined by the base config option.
+export const BASE_URL = env.BASE_URL
+
+// Whether the app is running in production (running the dev server with
+// NODE_ENV='production' or running an app built with NODE_ENV='production').
+export const PROD = env.PROD
+
+// Whether the app is running in development (always the opposite of
+// import.meta.env.PROD)
+export const DEV = env.DEV
+
+// Whether the app is running in the server.
+export const SSR = env.SSR

package/src/setupTests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest"

package/src/slices/createSlice.ts

@@ -0,0 +1,8 @@
+import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit"
+
+// `buildCreateSlice` allows us to create a slice with async thunks.
+const createSlice = buildCreateSlice({
+  creators: { asyncThunk: asyncThunkCreator },
+})
+
+export default createSlice

package/src/slices/index.ts

@@ -0,0 +1,2 @@
+export { default as createSlice } from "./createSlice"
+export { default as sessionSlice, type SessionState } from "./session"

package/src/slices/session.ts

@@ -0,0 +1,32 @@
+import Cookies from "js-cookie"
+
+import { SESSION_METADATA_COOKIE_NAME } from "../settings"
+import createSlice from "./createSlice"
+
+export interface SessionState {
+  isLoggedIn: boolean
+}
+
+const initialState: SessionState = {
+  isLoggedIn: Boolean(Cookies.get(SESSION_METADATA_COOKIE_NAME)),
+}
+
+const sessionSlice = createSlice({
+  name: "session",
+  initialState,
+  reducers: create => ({
+    login: create.reducer(state => {
+      state.isLoggedIn = true
+    }),
+    logout: create.reducer(state => {
+      state.isLoggedIn = false
+    }),
+  }),
+  selectors: {
+    selectIsLoggedIn: session => session.isLoggedIn,
+  },
+})
+
+export default sessionSlice
+export const { login, logout } = sessionSlice.actions
+export const { selectIsLoggedIn } = sessionSlice.selectors

package/src/theme/ThemedBox.tsx

@@ -0,0 +1,265 @@
+import {
+  Circle as CircleIcon,
+  Hexagon as HexagonIcon,
+} from "@mui/icons-material"
+import {
+  Box,
+  ThemeProvider,
+  buttonClasses,
+  createTheme,
+  responsiveFontSizes,
+  type BoxProps,
+  type CSSObject,
+  type PaletteColor,
+  type SxProps,
+  type ThemeOptions,
+} from "@mui/material"
+import { type CommonProps } from "@mui/material/OverridableComponent"
+import type React from "react"
+
+import { themeOptions } from "."
+import { getStyleOverrides, includesClassNames } from "../utils/theme"
+import { primary, secondary, tertiary } from "./colors"
+import type Components from "./components/_components"
+import palette from "./palette"
+
+export interface ThemedBoxProps extends BoxProps {
+  options?: ThemeOptions
+  withShapes?: boolean
+  userType: "teacher" | "student" | "independent"
+  bgcolor?: string
+}
+
+const ThemedBox: React.FC<ThemedBoxProps> = ({
+  options = themeOptions,
+  withShapes = false,
+  userType,
+  bgcolor,
+  children,
+  sx,
+  ...otherBoxProps
+}) => {
+  let circleColor: "primary" | "secondary" | "tertiary"
+  let hexagonColor: "primary" | "secondary" | "tertiary"
+  let contrastText: string
+  switch (userType) {
+    case "teacher":
+      bgcolor = bgcolor ?? primary[400]
+      circleColor = "tertiary"
+      hexagonColor = "secondary"
+      contrastText = (palette.primary as PaletteColor).contrastText
+      break
+    case "student":
+      bgcolor = bgcolor ?? tertiary[500]
+      circleColor = "secondary"
+      hexagonColor = "primary"
+      contrastText = palette.tertiary.contrastText
+      break
+    case "independent":
+      bgcolor = bgcolor ?? secondary[500]
+      circleColor = "primary"
+      hexagonColor = "tertiary"
+      contrastText = (palette.secondary as PaletteColor).contrastText
+      break
+  }
+
+  const commonIconSxProps: SxProps = {
+    display: { xs: "none", md: "block" },
+    fontSize: "180px",
+    position: "absolute",
+  }
+
+  const fontStyleOverrides = {
+    color: contrastText,
+    textDecorationColor: contrastText,
+  }
+
+  function overrideStyles(
+    ownerState: CommonProps,
+    styleOverrides: CSSObject,
+    componentKey: keyof Components,
+    muiClassName: string = "root",
+  ): CSSObject {
+    return {
+      // Get the original styles.
+      ...getStyleOverrides(
+        ownerState,
+        componentKey,
+        muiClassName,
+        options.components,
+      ),
+      // Override styles unless the class name 'no-override' is set.
+      ...(!includesClassNames(ownerState, ["no-override"]) && styleOverrides),
+    }
+  }
+
+  const theme = responsiveFontSizes(
+    createTheme({
+      ...options,
+      components: {
+        ...options.components,
+        MuiTypography: {
+          ...options.components?.MuiTypography,
+          styleOverrides: {
+            ...options.components?.MuiTypography?.styleOverrides,
+            root: ({ ownerState }) =>
+              overrideStyles(
+                ownerState,
+                {
+                  ...fontStyleOverrides,
+                },
+                "MuiTypography",
+              ),
+          },
+        },
+        MuiFormHelperText: {
+          ...options.components?.MuiFormHelperText,
+          styleOverrides: {
+            ...options.components?.MuiFormHelperText?.styleOverrides,
+            root: ({ ownerState }) =>
+              overrideStyles(
+                ownerState,
+                {
+                  ...fontStyleOverrides,
+                },
+                "MuiFormHelperText",
+              ),
+          },
+        },
+        MuiLink: {
+          ...options.components?.MuiLink,
+          styleOverrides: {
+            ...options.components?.MuiLink?.styleOverrides,
+            root: ({ ownerState }) =>
+              overrideStyles(
+                ownerState,
+                {
+                  ...fontStyleOverrides,
+                },
+                "MuiLink",
+              ),
+          },
+        },
+        MuiButton: {
+          ...options.components?.MuiButton,
+          styleOverrides: {
+            ...options.components?.MuiButton?.styleOverrides,
+            contained: ({ ownerState }) =>
+              overrideStyles(
+                ownerState,
+                {
+                  ...(userType === "independent" && {
+                    backgroundColor: "white",
+                    "&:hover": {
+                      backgroundColor: "#f6f5f5",
+                      boxShadow: [
+                        "0px 6px 10px 0px rgba(0, 0, 0, 0.14)",
+                        "0px 1px 18px 0px rgba(0, 0, 0, 0.12)",
+                        "0px 3px 5px 0px rgba(0, 0, 0, 0.2);",
+                      ].join(),
+                    },
+                    [`&.${buttonClasses.disabled}`]: {
+                      backgroundColor: "white",
+                      color: contrastText,
+                    },
+                  }),
+                },
+                "MuiButton",
+                "contained",
+              ),
+            outlined: ({ ownerState }) =>
+              overrideStyles(
+                ownerState,
+                {
+                  ...fontStyleOverrides,
+                  border: `2px solid ${contrastText}`,
+                  "&:hover": {
+                    border: `2px solid ${contrastText}`,
+                    backgroundColor: "transparent",
+                    textDecoration: "underline",
+                  },
+                },
+                "MuiButton",
+                "outlined",
+              ),
+          },
+        },
+        MuiCheckbox: {
+          ...options.components?.MuiCheckbox,
+          styleOverrides: {
+            ...options.components?.MuiCheckbox?.styleOverrides,
+            root: ({ ownerState }) =>
+              overrideStyles(
+                ownerState,
+                {
+                  color: `${contrastText} !important`,
+                },
+                "MuiCheckbox",
+              ),
+          },
+        },
+        MuiSvgIcon: {
+          ...options.components?.MuiSvgIcon,
+          styleOverrides: {
+            ...options.components?.MuiSvgIcon?.styleOverrides,
+            root: ({ ownerState }) =>
+              overrideStyles(
+                ownerState,
+                {
+                  "&.checkbox-error": {
+                    color: `${contrastText} !important`,
+                  },
+                },
+                "MuiSvgIcon",
+              ),
+          },
+        },
+      },
+    }),
+  )
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box
+        sx={{
+          ...sx,
+          ...(withShapes && {
+            paddingY: { xs: 2, sm: 3, md: 5 },
+            paddingX: { xs: 2, sm: 5, md: 10 },
+            marginX: { md: "90px" },
+          }),
+          bgcolor,
+          alignItems: "center",
+          position: "relative",
+        }}
+        {...otherBoxProps}
+      >
+        {withShapes && (
+          <>
+            <CircleIcon
+              color={circleColor}
+              sx={{
+                ...commonIconSxProps,
+                top: "5%",
+                left: "0%",
+                transform: "translate(-60%, 0%)",
+              }}
+            />
+            <HexagonIcon
+              color={hexagonColor}
+              sx={{
+                ...commonIconSxProps,
+                bottom: "5%",
+                right: "0%",
+                transform: "translate(60%, 0%) rotate(90deg)",
+              }}
+            />
+          </>
+        )}
+        {children}
+      </Box>
+    </ThemeProvider>
+  )
+}
+
+export default ThemedBox

package/src/theme/colors.ts

@@ -0,0 +1,57 @@
+export default interface Color {
+  900: string
+  800: string
+  700: string
+  600: string
+  500: string
+  400: string
+  300: string
+  200: string
+  100: string
+  50: string
+}
+
+// primary / teacher
+export const primary: Color = {
+  900: "#A60039",
+  800: "#BE0947",
+  700: "#C90548",
+  600: "#D40149",
+  500: "#E0004D",
+  400: "#EE0857",
+  300: "#FA1664",
+  200: "#FF397C",
+  100: "#FF6699",
+  50: "#FF9ABC",
+}
+export { primary as teacher }
+
+// secondary / indy
+export const secondary: Color = {
+  900: "#BF9400",
+  800: "#CFA30B",
+  700: "#DEAD06",
+  600: "#EAB502",
+  500: "#F6BE00",
+  400: "#FFC709",
+  300: "#FFD23D",
+  200: "#FFDA5C",
+  100: "#FFE382",
+  50: "#FFEDAD",
+}
+export { secondary as indy }
+
+// tertiary / student
+export const tertiary: Color = {
+  900: "#01668C",
+  800: "#007FAF",
+  700: "#008CC1",
+  600: "#0099D2",
+  500: "#00A3E0",
+  400: "#04AFEF",
+  300: "#08BAFC",
+  200: "#27C4FF",
+  100: "#4DCEFF",
+  50: "#85DDFF",
+}
+export { tertiary as student }

package/src/theme/components/MuiAccordion.tsx

@@ -0,0 +1,13 @@
+import type Components from "./_components"
+
+const MuiAccordion: Components["MuiAccordion"] = {
+  styleOverrides: {
+    root: {
+      borderRadius: "0px !important",
+      margin: "0px !important",
+      width: "100%",
+    },
+  },
+}
+
+export default MuiAccordion

package/src/theme/components/MuiAutocomplete.tsx

@@ -0,0 +1,11 @@
+import type Components from "./_components"
+
+const MuiAutocomplete: Components["MuiAutocomplete"] = {
+  styleOverrides: {
+    root: {
+      width: "100%",
+    },
+  },
+}
+
+export default MuiAutocomplete