codeforlife 2.8.2 → 2.9.0

package/src/server.js

@@ -1,187 +0,0 @@
-/**
- * © 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 {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 {"development" | "staging" | "production"} */
-    this.mode = mode || process.env.MODE || "development"
-    /** @type {number} */
-    this.port =
-      port ||
-      (process.env.PORT
-        ? Number(process.env.PORT)
-        : this.envIsProduction
-          ? 8080
-          : 5173)
-    /** @type {string} */
-    this.base = base || process.env.BASE || "/"
-
-    /** @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

@@ -1,22 +0,0 @@
-/**
- * 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

@@ -1,7 +0,0 @@
-// Shorthand to access environment variables.
-export default new Proxy(import.meta.env, {
-  get: (target, name: string) => target[`VITE_${name}`] as string,
-}) as Record<string, string>
-
-export * from "./custom"
-export * from "./vite"

package/src/settings/vite.ts

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

@@ -1,2 +0,0 @@
-// TODO: investigate if this can be moved to the workspace
-import "@testing-library/jest-dom/vitest"

package/src/slices/createSlice.ts

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

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

package/src/slices/session.ts

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

@@ -1,265 +0,0 @@
-import {
-  Box,
-  type BoxProps,
-  type CSSObject,
-  type PaletteColor,
-  type SxProps,
-  type ThemeOptions,
-  ThemeProvider,
-  buttonClasses,
-  createTheme,
-  responsiveFontSizes,
-} from "@mui/material"
-import {
-  Circle as CircleIcon,
-  Hexagon as HexagonIcon,
-} from "@mui/icons-material"
-import { type CommonProps } from "@mui/material/OverridableComponent"
-import type React from "react"
-
-import { getStyleOverrides, includesClassNames } from "../utils/theme"
-import { primary, secondary, tertiary } from "./colors"
-import type Components from "./components/_components"
-import palette from "./palette"
-import { themeOptions } from "."
-
-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

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

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

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