codeforlife 2.6.11 → 2.6.13

package/.github/workflows/main.yml

@@ -34,3 +34,10 @@ jobs:
         with:
           cfl-bot-gh-token: ${{ secrets.CFL_BOT_GH_TOKEN }}
           npm-token: ${{ secrets.NPM_TOKEN }}
+
+  monitor:
+    uses: ocadotechnology/codeforlife-workspace/.github/workflows/monitor-javascript-release.yaml@main
+    secrets: inherit
+    needs: [release]
+    with:
+      node-version: 18

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [2.6.13](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.6.12...v2.6.13) (2025-03-25)
+
+
+### Bug Fixes
+
+* char set validators ([#81](https://github.com/ocadotechnology/codeforlife-package-javascript/issues/81)) ([9ff1f60](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/9ff1f60808f4a50eb2cbcae997de4ae892665c28))
+
+## [2.6.12](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.6.11...v2.6.12) (2025-03-20)
+
+
+### Bug Fixes
+
+* monitor release ([4bb40e1](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/4bb40e1c0021c5371c64b3fb894b4fddccf19374))
+* Portal frontend 48 ([#82](https://github.com/ocadotechnology/codeforlife-package-javascript/issues/82)) ([b76b4b8](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/b76b4b8dd4b5822820577a149d13992468c1cc0c))
+
 ## [2.6.11](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.6.10...v2.6.11) (2025-02-25)
 
 

package/package.json

@@ -2,22 +2,10 @@
   "name": "codeforlife",
   "description": "Common frontend code",
   "private": false,
-  "version": "2.6.11",
+  "version": "2.6.13",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "start": "serve -s dist",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:verbose": "vitest run --reporter=verbose --coverage.thresholds.lines=90 --coverage.thresholds.functions=90 --coverage.thresholds.branches=90 --coverage.thresholds.statements=90",
-    "test:ui": "vitest --ui",
-    "format": "prettier --write .",
-    "format:check": "prettier --check --write=false .",
-    "lint": "eslint --max-warnings=0 .",
-    "lint:fix": "eslint --fix .",
-    "type-check": "tsc --noEmit"
+    "cli": "VITE_CONFIG=./vite.config.ts ../scripts/frontend/cli $@"
   },
   "repository": {
     "type": "git",
@@ -47,7 +35,6 @@
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.23.1",
-    "serve": "^14.2.3",
     "sirv": "^3.0.0",
     "yup": "^1.1.1"
   },

package/src/api/index.ts

@@ -1,4 +1,5 @@
 export { default as createApi } from "./createApi"
 export * from "./models"
+export * as schemas from "./schemas"
 export { default as tagTypes } from "./tagTypes"
 export { default as urls } from "./urls"

package/src/api/schemas.ts

@@ -0,0 +1,117 @@
+import * as yup from "yup"
+
+import { UK_COUNTIES, COUNTRY_ISO_CODES } from "../utils/general"
+import type {
+  User,
+  Teacher,
+  Student,
+  Class,
+  School,
+  AuthFactor,
+  OtpBypassToken,
+} from "./models"
+import {
+  unicodeAlphanumericString,
+  uppercaseAsciiAlphanumericString,
+  lowercaseAsciiAlphanumericString,
+  numericId,
+} from "../utils/schema"
+import { type Schemas } from "../utils/api"
+
+// NOTE: do not use .required() here.
+const id = {
+  user: numericId(),
+  teacher: numericId(),
+  student: numericId(),
+  school: numericId(),
+  klass: uppercaseAsciiAlphanumericString().length(5),
+  authFactor: numericId(),
+  otpBypassToken: numericId(),
+}
+
+const _userTeacher: Omit<Schemas<Teacher>, "user"> = {
+  id: id.teacher.required(),
+  school: id.school,
+  is_admin: yup.bool().required(),
+}
+
+const _userStudent: Omit<Schemas<Student>, "user"> = {
+  id: id.student.required(),
+  school: id.school.required(),
+  klass: id.klass.required(),
+  auto_gen_password: yup.string().required(),
+}
+
+export const user: Schemas<User> = {
+  id: id.user.required(),
+  requesting_to_join_class: id.klass,
+  first_name: unicodeAlphanumericString({
+    spaces: true,
+    specialChars: "-'",
+  })
+    .required()
+    .max(150),
+  last_name: unicodeAlphanumericString({
+    spaces: true,
+    specialChars: "-'",
+  }).max(150),
+  last_login: yup.date(),
+  email: yup.string().email(),
+  password: yup.string().required(),
+  is_staff: yup.bool().required(),
+  is_active: yup.bool().required(),
+  date_joined: yup.date().required(),
+  teacher: yup.object(_userTeacher).optional(),
+  student: yup.object(_userStudent).optional(),
+}
+
+export const teacher: Schemas<Teacher> = {
+  ..._userTeacher,
+  user: id.user.required(),
+}
+
+export const student: Schemas<Student> = {
+  ..._userStudent,
+  user: id.user.required(),
+}
+
+export const school: Schemas<School> = {
+  id: id.school.required(),
+  name: unicodeAlphanumericString({
+    spaces: true,
+    specialChars: "'.",
+  })
+    .required()
+    .max(200),
+  country: yup.string().oneOf(COUNTRY_ISO_CODES),
+  uk_county: yup.string().oneOf(UK_COUNTIES),
+}
+
+export const klass: Schemas<Class> = {
+  id: id.klass.required(),
+  teacher: id.teacher.required(),
+  school: id.school.required(),
+  name: unicodeAlphanumericString({
+    spaces: true,
+    specialChars: "-_",
+  })
+    .required()
+    .max(200),
+  read_classmates_data: yup.bool().required(),
+  receive_requests_until: yup.date(),
+}
+
+export const authFactor: Schemas<AuthFactor> = {
+  id: id.authFactor.required(),
+  user: id.user.required(),
+  type: yup
+    .string()
+    .oneOf(["otp"] as const)
+    .required(),
+}
+
+export const otpBypassToken: Schemas<OtpBypassToken> = {
+  id: id.otpBypassToken.required(),
+  user: id.user.required(),
+  token: lowercaseAsciiAlphanumericString().required().length(8),
+}

package/src/components/form/FirstNameField.tsx

@@ -3,7 +3,7 @@ import { InputAdornment } from "@mui/material"
 import type { FC } from "react"
 
 import TextField, { type TextFieldProps } from "./TextField"
-import { firstNameSchema } from "../../schemas/user"
+import { schemas } from "../../api"
 
 export type FirstNameFieldProps = Omit<
   TextFieldProps,
@@ -20,7 +20,7 @@ const FirstNameField: FC<FirstNameFieldProps> = ({
 }) => {
   return (
     <TextField
-      schema={firstNameSchema}
+      schema={schemas.user.first_name}
       name={name}
       label={label}
       placeholder={placeholder}

package/src/components/form/TextField.tsx

@@ -4,13 +4,7 @@ import {
 } 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 { type StringSchema, type ValidateOptions, array as YupArray } from "yup"
 
 import { schemaToFieldValidator } from "../../utils/form"
 import { getNestedProperty } from "../../utils/general"
@@ -52,18 +46,40 @@ const TextField: FC<TextFieldProps> = ({
 
   const dotPath = name.split(".")
 
-  let _schema: Schema = schema
-  if (split) {
-    _schema = YupArray().of(_schema)
-    if (unique || uniqueCaseInsensitive) {
-      _schema = _schema.test({
+  function buildSchema() {
+    // Build a schema for a single string.
+    let stringSchema = schema
+    // 1: Validate string is required.
+    stringSchema = required ? stringSchema.required() : stringSchema.optional()
+    // 2: Validate string is dirty.
+    if (dirty && !split)
+      stringSchema = stringSchema.notOneOf(
+        [initialValue as string],
+        "cannot be initial value",
+      )
+    // Return a schema for a single string.
+    if (!split) return stringSchema
+
+    // Build a schema for an array of strings.
+    let arraySchema = YupArray().of(stringSchema)
+    // 1: Validate array has min one string.
+    arraySchema = required
+      ? arraySchema.required().min(1)
+      : arraySchema.optional()
+    // 2: Validate array has unique strings.
+    if (unique || uniqueCaseInsensitive)
+      arraySchema = arraySchema.test({
         message: "cannot have duplicates",
         test: values => {
-          if (Array.isArray(values) && values.length >= 2) {
+          if (
+            Array.isArray(values) &&
+            values.length >= 2 &&
+            values.every(value => typeof value === "string")
+          ) {
             return (
               new Set(
-                uniqueCaseInsensitive && typeof values[0] === "string"
-                  ? values.map(value => value.toLowerCase())
+                uniqueCaseInsensitive
+                  ? values.map(value => (value as string).toLowerCase())
                   : values,
               ).size === values.length
             )
@@ -72,19 +88,20 @@ const TextField: FC<TextFieldProps> = ({
           return true
         },
       })
-    }
-  }
-  if (required) {
-    _schema = _schema.required()
-    if (split) _schema = (_schema as ArraySchema<string[], any>).min(1)
+    // 3: Validate array is dirty.
+    if (dirty)
+      arraySchema = arraySchema.notOneOf(
+        [initialValue as string[]],
+        "cannot be initial value",
+      )
+    // Return a schema for an array of strings.
+    return arraySchema
   }
-  if (dirty)
-    _schema = _schema.notOneOf([initialValue], "cannot be initial value")
 
   const fieldConfig: FieldConfig = {
     name,
     type,
-    validate: schemaToFieldValidator(_schema, validateOptions),
+    validate: schemaToFieldValidator(buildSchema(), validateOptions),
   }
 
   const _Field: FC<FieldProps> = ({ form }) => {

package/src/settings/index.ts

@@ -1,5 +1,10 @@
 // Shorthand to access environment variables.
-export default import.meta.env as Record<string, string>
+export default Object.defineProperty(import.meta.env, "vite", {
+  writable: false,
+  value: new Proxy(import.meta.env, {
+    get: (target, name: string) => target[`VITE_${name}`],
+  }),
+}) as ImportMetaEnv & { vite: Record<string, string> }
 
 export * from "./custom"
 export * from "./vite"

package/src/utils/api.tsx

@@ -7,8 +7,9 @@ import type {
 } from "@reduxjs/toolkit/query/react"
 import { type ReactNode } from "react"
 
-import SyncError from "../components/SyncError"
 import { type Optional, type Required, getNestedProperty } from "./general"
+import { type SchemaMap } from "./schema"
+import SyncError from "../components/SyncError"
 
 // -----------------------------------------------------------------------------
 // Model Types
@@ -33,6 +34,10 @@ export type Model<Id extends ModelId, MFields extends Fields = Fields> = {
   id: Id
 } & Omit<MFields, "id">
 
+export type Schemas<M extends Model<any>> = {
+  [K in keyof M]-?: SchemaMap<M[K]>
+}
+
 export type Result<
   M extends Model<any>,
   MFields extends keyof Omit<M, "id"> = never,

package/src/utils/general.ts

@@ -1,5 +1,10 @@
 export type Required<T, K extends keyof T> = { [P in K]-?: T[P] }
 export type Optional<T, K extends keyof T> = Partial<Pick<T, K>>
+export type OptionalPropertyNames<T> = {
+  [K in keyof T]-?: {} extends { [P in K]: T[K] } ? K : never
+}[keyof T]
+export type IsOptional<T, K extends keyof T> =
+  K extends OptionalPropertyNames<T> ? true : false
 
 export function openInNewTab(url: string, target = "_blank"): void {
   window.open(url, target)

package/src/utils/schema.ts

@@ -9,6 +9,13 @@ import {
   type Schema,
   type TypeFromShape,
   type ValidateOptions,
+  type StringSchema,
+  type NumberSchema,
+  type Flags,
+  type BooleanSchema,
+  type DateSchema,
+  string as YupString,
+  number as YupNumber,
 } from "yup"
 
 export type _<T> = T extends {}
@@ -30,6 +37,209 @@ export type ObjectSchemaFromShape<Shape extends ObjectShape> = ObjectSchema<
   ""
 >
 
+export type SchemaMap<
+  TType,
+  TContext = AnyObject,
+  TDefault = any,
+  TFlags extends Flags = "",
+> =
+  NonNullable<TType> extends string
+    ? StringSchema<
+        // @ts-expect-error type is fine
+        TType extends undefined ? TType | undefined : TType,
+        TContext,
+        TDefault,
+        TFlags
+      >
+    : NonNullable<TType> extends number
+      ? NumberSchema<
+          // @ts-expect-error type is fine
+          TType extends undefined ? TType | undefined : TType,
+          TContext,
+          TDefault,
+          TFlags
+        >
+      : NonNullable<TType> extends boolean
+        ? BooleanSchema<
+            // @ts-expect-error type is fine
+            TType extends undefined ? TType | undefined : TType,
+            TContext,
+            TDefault,
+            TFlags
+          >
+        : NonNullable<TType> extends Date
+          ? DateSchema<
+              // @ts-expect-error type is fine
+              TType extends undefined ? TType | undefined : TType,
+              TContext,
+              TDefault,
+              TFlags
+            >
+          : NonNullable<TType> extends object
+            ? ObjectSchema<
+                // @ts-expect-error type is fine
+                TType extends undefined ? TType | undefined : TType,
+                TContext,
+                TDefault,
+                TFlags
+              >
+            : Schema<TType, TContext, TDefault, TFlags>
+
+export function numericId(schema: NumberSchema = YupNumber()) {
+  return schema.min(1)
+}
+
+// -----------------------------------------------------------------------------
+// Limited Character Sets
+// -----------------------------------------------------------------------------
+
+export type MatchesCharSetOptions = Partial<{
+  schema: StringSchema
+  flags: string
+}>
+
+export function matchesCharSet(
+  charSet: string,
+  message: string,
+  options: MatchesCharSetOptions = {},
+) {
+  const { schema = YupString(), flags } = options
+
+  return schema.matches(new RegExp(`^[${charSet}]*$`, flags), message)
+}
+
+export type BuildCharSetOptions = MatchesCharSetOptions &
+  Partial<{ spaces: boolean; specialChars: string }>
+
+export function buildCharSet(
+  charSet: string,
+  description: string,
+  options: BuildCharSetOptions = {},
+) {
+  const { spaces = false, specialChars, ...matchesCharSetOptions } = options
+
+  let message = `can only contain: ${description}`
+
+  if (spaces) {
+    charSet += " "
+    message += ", spaces"
+  }
+  if (specialChars) {
+    charSet += specialChars
+    message += `, special characters (${specialChars})`
+  }
+
+  return matchesCharSet(charSet, message, matchesCharSetOptions)
+}
+
+export function buildUnicodeCharSet(
+  charSet: string,
+  description: string,
+  options: BuildCharSetOptions = {},
+) {
+  let { flags = "u", ...otherOptions } = options
+
+  if (!flags.includes("u")) flags += "u"
+
+  return buildCharSet(charSet, description, { flags, ...otherOptions })
+}
+
+export function asciiAlphaString(options?: BuildCharSetOptions) {
+  return buildCharSet("a-zA-Z", "ASCII alpha characters (a-z, A-Z)", options)
+}
+
+export function lowercaseAsciiAlphaString(options?: BuildCharSetOptions) {
+  return buildCharSet("a-z", "lowercase ASCII alpha characters (a-z)", options)
+}
+
+export function uppercaseAsciiAlphaString(options?: BuildCharSetOptions) {
+  return buildCharSet("A-Z", "uppercase ASCII alpha characters (A-Z)", options)
+}
+
+export function asciiNumericString(options?: BuildCharSetOptions) {
+  return buildCharSet("0-9", "ASCII numbers (0-9)", options)
+}
+
+export function asciiAlphanumericString(options?: BuildCharSetOptions) {
+  return buildCharSet(
+    "a-zA-Z0-9",
+    "ASCII alphanumeric characters (a-z, A-Z, 0-9)",
+    options,
+  )
+}
+
+export function lowercaseAsciiAlphanumericString(
+  options?: BuildCharSetOptions,
+) {
+  return buildCharSet(
+    "a-z0-9",
+    "lowercase ASCII alphanumeric characters (a-z, 0-9)",
+    options,
+  )
+}
+
+export function uppercaseAsciiAlphanumericString(
+  options?: BuildCharSetOptions,
+) {
+  return buildCharSet(
+    "A-Z0-9",
+    "uppercase ASCII alphanumeric characters (A-Z, 0-9)",
+    options,
+  )
+}
+
+export function unicodeAlphaString(options?: BuildCharSetOptions) {
+  return buildUnicodeCharSet("\\p{L}", "unicode alpha characters", options)
+}
+
+export function lowercaseUnicodeAlphaString(options?: BuildCharSetOptions) {
+  return buildUnicodeCharSet(
+    "\\p{Ll}",
+    "lowercase unicode alpha characters",
+    options,
+  )
+}
+
+export function uppercaseUnicodeAlphaString(options?: BuildCharSetOptions) {
+  return buildUnicodeCharSet(
+    "\\p{Lu}",
+    "uppercase unicode alpha characters",
+    options,
+  )
+}
+
+export function unicodeNumericString(options?: BuildCharSetOptions) {
+  return buildUnicodeCharSet("\\p{N}", "unicode numbers", options)
+}
+
+export function unicodeAlphanumericString(options?: BuildCharSetOptions) {
+  return buildUnicodeCharSet(
+    "\\p{L}\\p{N}",
+    "unicode alphanumeric characters",
+    options,
+  )
+}
+
+export function lowercaseUnicodeAlphanumericString(
+  options?: BuildCharSetOptions,
+) {
+  return buildUnicodeCharSet(
+    "\\p{Ll}\\p{N}",
+    "lowercase unicode alphanumeric characters",
+    options,
+  )
+}
+
+export function uppercaseUnicodeAlphanumericString(
+  options?: BuildCharSetOptions,
+) {
+  return buildUnicodeCharSet(
+    "\\p{Lu}\\p{N}",
+    "uppercase unicode alphanumeric characters",
+    options,
+  )
+}
+
 // -----------------------------------------------------------------------------
 // Try Validate Sync
 // -----------------------------------------------------------------------------

package/src/vite.config.ts

@@ -0,0 +1,49 @@
+/**
+ * Shared Vite configuration for all frontend services.
+ *
+ * Vite: https://vitest.dev/config/
+ * Vitest: https://vitest.dev/config/
+ *
+ * NOTE: This doesn't belong in codeforlife-workspace/configs/frontend as it's
+ * still and a script which needs to be included in a Node.js runtime.
+ */
+
+import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      codeforlife: "codeforlife/src",
+    },
+  },
+  envDir: "env",
+  server: {
+    open: true,
+    host: true,
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: "src/setupTests",
+    mockReset: true,
+    coverage: {
+      enabled: true,
+      provider: "istanbul",
+      reporter: ["html", "cobertura"],
+    },
+  },
+  optimizeDeps: {
+    // TODO: investigate which of these are needed
+    include: [
+      "@mui/x-date-pickers",
+      "@mui/x-date-pickers/AdapterDayjs",
+      "dayjs",
+      "dayjs/locale/en-gb",
+      "@mui/icons-material",
+      "yup",
+      "formik",
+    ],
+  },
+})

package/vite.config.ts

@@ -2,6 +2,8 @@ import react from "@vitejs/plugin-react"
 import { defineConfig } from "vitest/config"
 
 // https://vitejs.dev/config/
+// TODO: https://vite.dev/guide/build.html#library-mode
+// TODO: import common configs from src/vite.config.ts
 export default defineConfig({
   plugins: [react()],
   server: {

package/codecov.yml

@@ -1,11 +0,0 @@
-coverage: # https://docs.codecov.com/docs/codecov-yaml
-  precision: 2
-  round: down
-  range: 90...90
-  status: # https://docs.codecov.com/docs/commit-status
-    project:
-      default:
-        target: 90%
-        threshold: 0%
-
-comment: false

package/src/schemas/user.ts

@@ -1,4 +0,0 @@
-import * as yup from "yup"
-
-// TODO: restrict character set; no special characters
-export const firstNameSchema = yup.string().max(150)