codeforlife 2.7.1 → 2.8.0

package/.github/workflows/main.yml

@@ -4,9 +4,6 @@ on:
   push:
     paths-ignore:
       - '**/*.md'
-      - '**/*.code-*'
-      - '.vscode/**'
-      - '.devcontainer.json'
   pull_request:
   issues:
   issue_comment:

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [2.8.0](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.7.2...v2.8.0) (2025-08-21)
+
+
+### Features
+
+* type fixes ([#89](https://github.com/ocadotechnology/codeforlife-package-javascript/issues/89)) ([386f6e3](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/386f6e3fe135d59480a18034741ff5d33a7a76ac))
+
+## [2.7.2](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.7.1...v2.7.2) (2025-08-15)
+
+
+### Bug Fixes
+
+* comment ([1364251](https://github.com/ocadotechnology/codeforlife-package-javascript/commit/13642516aea7a89d7c3e24e7813391686587447f))
+
 ## [2.7.1](https://github.com/ocadotechnology/codeforlife-package-javascript/compare/v2.7.0...v2.7.1) (2025-08-15)
 
 

package/eslint.config.js

@@ -0,0 +1,17 @@
+import workspaceConfig from "@codeforlife/workspace/eslint.config.js"
+import ts from "typescript-eslint"
+
+export default ts.config(
+  ...workspaceConfig,
+  {
+    ignores: [
+      "src/scripts/*",
+      "src/server.js", // TODO: convert to src/server.ts and remove this ignore
+    ],
+  },
+  {
+    languageOptions: {
+      parserOptions: { tsconfigRootDir: import.meta.dirname },
+    },
+  },
+)

package/package.json

@@ -2,10 +2,10 @@
   "name": "codeforlife",
   "description": "Common frontend code",
   "private": false,
-  "version": "2.7.1",
+  "version": "2.8.0",
   "type": "module",
   "scripts": {
-    "cli": "VITE_CONFIG=./vite.config.ts ../scripts/frontend $@"
+    "cli": "../scripts/frontend $@"
   },
   "repository": {
     "type": "git",
@@ -17,6 +17,48 @@
     "url": "https://github.com/ocadotechnology/codeforlife-package-javascript/issues"
   },
   "homepage": "https://github.com/ocadotechnology/codeforlife-package-javascript#readme",
+  "//": [
+    "Export rules:",
+    "🚫 Don't export anything not contained in the src directory.",
+    "",
+    "Dependency rules:",
+    "✅ Do add `dependencies` that are required to use this package.",
+    "✅ Do add `dependencies` that are shared across all services.",
+    "🚫 Don't add `devDependencies` that are inherited from the CFL workspace.",
+    "✅ Do add `devDependencies` that are unique to this package."
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./api": "./src/api/index.ts",
+    "./api/endpoints": "./src/api/endpoints/index.ts",
+    "./api/*": "./src/api/*.ts",
+    "./components": "./src/components/index.ts",
+    "./components/form": "./src/components/form/index.tsx",
+    "./components/page": "./src/components/page/index.ts",
+    "./components/router": "./src/components/router/index.tsx",
+    "./components/table": "./src/components/table/index.tsx",
+    "./components/*": "./src/components/*.tsx",
+    "./features": "./src/features/index.ts",
+    "./features/*": "./src/features/*.tsx",
+    "./fonts/*": "./src/fonts/*.ttf",
+    "./hooks": "./src/hooks/index.ts",
+    "./hooks/*": "./src/hooks/*.tsx",
+    "./images/svg/*": "./src/images/svg/*.svg",
+    "./middlewares": "./src/middlewares/index.ts",
+    "./middlewares/*": "./src/middlewares/*.ts",
+    "./settings": "./src/settings/index.ts",
+    "./settings/*": "./src/settings/*.ts",
+    "./slices": "./src/slices/index.ts",
+    "./slices/*": "./src/slices/*.ts",
+    "./theme": "./src/theme/index.ts",
+    "./theme/components": "./src/theme/components/index.ts",
+    "./theme/*": "./src/theme/*.ts",
+    "./utils/api": "./src/utils/api.tsx",
+    "./utils/test": "./src/utils/test.tsx",
+    "./utils/theme": "./src/utils/theme.tsx",
+    "./utils/*": "./src/utils/*.ts",
+    "./server": "./src/server.js"
+  },
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
@@ -39,28 +81,7 @@
     "yup": "^1.1.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/express": "^5.0.0",
-    "@types/js-cookie": "^3.0.3",
-    "@types/node": "^22.14.1",
-    "@types/qs": "^6.9.7",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-istanbul": "^1.6.0",
-    "@vitest/ui": "^1.6.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "jsdom": "^23.2.0",
-    "prettier": "^3.2.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.0"
+    "@codeforlife/workspace": "link:../configs/frontend"
   },
   "release": {
     "branches": [

package/src/api/createApi.ts

@@ -1,12 +1,12 @@
 import {
+  type FetchArgs,
   createApi as _createApi,
   fetchBaseQuery,
-  type FetchArgs,
 } from "@reduxjs/toolkit/query/react"
 
 import { SERVICE_API_URL } from "../settings"
-import defaultTagTypes from "./tagTypes"
 import { buildLogoutEndpoint } from "./endpoints/session"
+import defaultTagTypes from "./tagTypes"
 import { getCsrfCookie } from "../utils/auth"
 import { isSafeHttpMethod } from "../utils/api"
 
@@ -45,7 +45,7 @@ export default function createApi<TagTypes extends string = never>({
       const method = typeof arg === "string" ? "GET" : arg.method || "GET"
 
       if (type === "mutation" || !isSafeHttpMethod(method)) {
-        let csrfToken = getCsrfCookie()
+        const csrfToken = getCsrfCookie()
         if (csrfToken) headers.set("x-csrftoken", csrfToken)
       }
 
@@ -55,7 +55,7 @@ export default function createApi<TagTypes extends string = never>({
 
   const api = _createApi({
     // https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#implementing-a-custom-basequery
-    baseQuery: async (args, api, extraOptions) => {
+    baseQuery: async (args: string | FetchArgs, api, extraOptions) => {
       if (api.type === "mutation" && getCsrfCookie() === undefined) {
         // Get the CSRF token.
         const { error } = await fetch(

package/src/api/endpoints/authFactor.ts

@@ -1,10 +1,10 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
 import {
-  buildUrl,
-  tagData,
   type ListArg as _ListArg,
   type ListResult as _ListResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
 import type { AuthFactor } from "../models"
 import { type TagTypes } from "../tagTypes"

package/src/api/endpoints/klass.ts

@@ -1,19 +1,19 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
+import type {
+  Class,
+  SchoolTeacher,
+  SchoolTeacherUser,
+  Teacher,
+} from "../models"
 import {
-  buildUrl,
-  tagData,
   type ListArg as _ListArg,
   type ListResult as _ListResult,
   type RetrieveArg as _RetrieveArg,
   type RetrieveResult as _RetrieveResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
-import type {
-  Class,
-  Teacher,
-  SchoolTeacher,
-  SchoolTeacherUser,
-} from "../models"
 import { type TagTypes } from "../tagTypes"
 import urls from "../urls"
 

package/src/api/endpoints/school.ts

@@ -1,10 +1,10 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
 import {
-  buildUrl,
-  tagData,
   type RetrieveArg as _RetrieveArg,
   type RetrieveResult as _RetrieveResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
 import type { School } from "../models"
 import { type TagTypes } from "../tagTypes"

package/src/api/endpoints/session.ts

@@ -1,4 +1,4 @@
-import { type EndpointBuilder, type Api } from "@reduxjs/toolkit/query/react"
+import { type Api, type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
 import { login, logout } from "../../slices/session"
 
@@ -39,6 +39,7 @@ export function buildLogoutEndpoint<ResultType, QueryArg>(
         console.error("Failed to call logout endpoint...", error)
       } finally {
         dispatch(logout())
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
         dispatch(api.util.resetApiState())
       }
     },

package/src/api/endpoints/user.ts

@@ -1,14 +1,14 @@
 import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
 
+import type { Class, User } from "../models"
 import {
-  buildUrl,
-  tagData,
   type ListArg as _ListArg,
   type ListResult as _ListResult,
   type RetrieveArg as _RetrieveArg,
   type RetrieveResult as _RetrieveResult,
+  buildUrl,
+  tagData,
 } from "../../utils/api"
-import type { Class, User } from "../models"
 import { type TagTypes } from "../tagTypes"
 import urls from "../urls"
 

package/src/api/models.ts

@@ -1,5 +1,5 @@
-import type { Model } from "../utils/api"
 import type { CountryIsoCodes, UkCounties } from "../utils/general"
+import type { Model } from "../utils/api"
 
 // -----------------------------------------------------------------------------
 // User Models

package/src/api/schemas.ts

@@ -1,31 +1,31 @@
 import * as yup from "yup"
 
-import { UK_COUNTIES, COUNTRY_ISO_CODES } from "../utils/general"
 import type {
-  User,
-  TeacherUser,
-  SchoolTeacherUser,
+  AdminSchoolTeacher,
   AdminSchoolTeacherUser,
-  NonAdminSchoolTeacherUser,
-  NonSchoolTeacherUser,
-  Teacher,
-  Student,
-  Class,
-  School,
   AuthFactor,
-  OtpBypassToken,
-  StudentUser,
+  Class,
   IndependentUser,
-  SchoolTeacher,
-  AdminSchoolTeacher,
   NonAdminSchoolTeacher,
+  NonAdminSchoolTeacherUser,
   NonSchoolTeacher,
+  NonSchoolTeacherUser,
+  OtpBypassToken,
+  School,
+  SchoolTeacher,
+  SchoolTeacherUser,
+  Student,
+  StudentUser,
+  Teacher,
+  TeacherUser,
+  User,
 } from "./models"
+import { COUNTRY_ISO_CODES, UK_COUNTIES } from "../utils/general"
 import {
-  unicodeAlphanumericString,
-  uppercaseAsciiAlphanumericString,
   lowercaseAsciiAlphanumericString,
   numericId,
+  unicodeAlphanumericString,
+  uppercaseAsciiAlphanumericString,
 } from "../utils/schema"
 import { type Schemas } from "../utils/api"
 

package/src/components/App.tsx

@@ -1,14 +1,14 @@
+import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom"
 import { CssBaseline, ThemeProvider } from "@mui/material"
-import { type ThemeProviderProps } from "@mui/material/styles/ThemeProvider"
-import { type FC, type ReactNode } from "react"
+import { type FC, type JSX, type ReactNode } from "react"
 import { Provider, type ProviderProps } from "react-redux"
-import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom"
-import { StaticRouter } from "react-router-dom/server"
 import { type Action } from "redux"
+import { StaticRouter } from "react-router-dom/server"
+import { type ThemeProviderProps } from "@mui/material/styles/ThemeProvider"
 
 import "./App.css"
-import { useLocation } from "../hooks"
 import { SSR } from "../settings"
+import { useLocation } from "../hooks"
 // import { InactiveDialog, ScreenTimeDialog } from "../features"
 // import { useCountdown, useEventListener } from "../hooks"
 // import "../scripts"
@@ -60,7 +60,9 @@ const App = <A extends Action = Action, S = unknown>({
   path,
   theme,
   store,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxIdleSeconds = 60 * 60,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxTotalSeconds = 60 * 60,
   ...routesProps
 }: AppProps<A, S>): JSX.Element => {

package/src/components/CopyIconButton.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 
-import { renderWithUser } from "../utils/test"
 import CopyIconButton from "./CopyIconButton"
+import { renderWithUser } from "../utils/test"
 
 test("Clicking button should copy content", async () => {
   const content = "Example string to be copied."

package/src/components/CopyIconButton.tsx

@@ -1,5 +1,5 @@
-import { ContentCopy as ContentCopyIcon } from "@mui/icons-material"
 import { IconButton, type IconButtonProps } from "@mui/material"
+import { ContentCopy as ContentCopyIcon } from "@mui/icons-material"
 import type { FC } from "react"
 
 export interface CopyIconButtonProps extends Omit<IconButtonProps, "onClick"> {
@@ -15,7 +15,7 @@ const CopyIconButton: FC<CopyIconButtonProps> = ({
     <IconButton
       data-testid="copy-icon-button"
       onClick={() => {
-        navigator.clipboard.writeText(content)
+        void navigator.clipboard.writeText(content)
       }}
       {...otherIconButtonProps}
     >

package/src/components/Countdown.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { type FC, useState } from "react"
 import { Typography, type TypographyProps } from "@mui/material"
 
 import { useCountdown } from "../hooks"
@@ -9,7 +9,7 @@ export interface CountdownProps extends Omit<TypographyProps, "children"> {
   onEnd: () => void
 }
 
-const Countdown: React.FC<CountdownProps> = ({
+const Countdown: FC<CountdownProps> = ({
   seconds,
   start = true,
   onEnd,
@@ -17,7 +17,7 @@ const Countdown: React.FC<CountdownProps> = ({
 }) => {
   seconds = Math.floor(seconds)
   const _seconds = useCountdown(seconds)[0]
-  const [end, setEnd] = React.useState(!start)
+  const [end, setEnd] = useState(!start)
 
   if (_seconds === 0 && !end) {
     setEnd(true)

package/src/components/DownloadFileButton.tsx

@@ -24,7 +24,8 @@ const DownloadFileButton: FC<DownloadFileButtonProps> = ({
   let url: undefined | string = undefined
   let anchorProps: undefined | { download?: string; href: string } = undefined
   if ("mimeType" in file) {
-    let { text, mimeType, name, charset = "utf-8", extension } = file
+    const { text, mimeType, name, charset = "utf-8" } = file
+    let { extension } = file
 
     if (!extension) extension = "." + { plain: "txt", csv: "csv" }[mimeType]
 

package/src/components/ElevatedAppBar.tsx

@@ -1,20 +1,20 @@
-import React from "react"
 import {
   AppBar,
   type AppBarProps,
+  Container,
+  type ContainerProps,
   Toolbar,
   type ToolbarProps,
   useScrollTrigger,
-  Container,
-  type ContainerProps,
 } from "@mui/material"
+import { type FC, cloneElement } from "react"
 
 export interface ElevatedAppBarProps extends Omit<AppBarProps, "position"> {
   containerProps: ContainerProps
   toolbarProps?: ToolbarProps
 }
 
-const ElevatedAppBar: React.FC<ElevatedAppBarProps> = ({
+const ElevatedAppBar: FC<ElevatedAppBarProps> = ({
   containerProps,
   toolbarProps,
   elevation = 4,
@@ -26,7 +26,7 @@ const ElevatedAppBar: React.FC<ElevatedAppBarProps> = ({
     threshold: 0,
   })
 
-  return React.cloneElement(
+  return cloneElement(
     <AppBar elevation={elevation} {...otherProps}>
       <Container {...containerProps}>
         <Toolbar {...toolbarProps}>{children}</Toolbar>

package/src/components/Image.tsx

@@ -1,5 +1,5 @@
 import { Box, type BoxProps } from "@mui/material"
-import type React from "react"
+import { type FC } from "react"
 
 import { openInNewTab } from "../utils/general"
 
@@ -10,12 +10,12 @@ export interface ImageProps extends Omit<BoxProps, "component"> {
   hrefInNewTab?: boolean
 }
 
-const Image: React.FC<ImageProps> = ({
-  href,
-  hrefInNewTab = false,
-  ...props
-}) => {
-  let { onClick, style = {}, ...otherProps } = props
+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%"

package/src/components/InputFileButton.tsx

@@ -1,9 +1,9 @@
+import { Button, type ButtonProps } from "@mui/material"
 import {
-  type FC,
   type DetailedHTMLProps,
+  type FC,
   type InputHTMLAttributes,
 } from "react"
-import { Button, type ButtonProps } from "@mui/material"
 
 export interface InputFileButtonProps
   extends Omit<ButtonProps<"label">, "component"> {

package/src/components/ItemizedList.tsx

@@ -1,12 +1,12 @@
-import type React from "react"
+import { type FC, type ReactElement } from "react"
 import {
   List,
-  type ListProps,
   type ListItem,
   type ListItemText,
+  type ListProps,
 } from "@mui/material"
 
-type ListItemElement = React.ReactElement<typeof ListItem | typeof ListItemText>
+type ListItemElement = ReactElement<typeof ListItem | typeof ListItemText>
 
 export interface ItemizedListProps {
   styleType:
@@ -33,7 +33,7 @@ export interface ItemizedListProps {
   children: ListItemElement | ListItemElement[]
 }
 
-const ItemizedList: React.FC<ItemizedListProps> = ({
+const ItemizedList: FC<ItemizedListProps> = ({
   styleType,
   listProps = {},
   pl = 4,

package/src/components/OrderedGrid.tsx

@@ -1,4 +1,4 @@
-import type React from "react"
+import { type FC, type ReactElement } from "react"
 import { Unstable_Grid2 as Grid, type Grid2Props } from "@mui/material"
 
 interface ItemProps
@@ -29,7 +29,7 @@ interface GlobalItemProps extends ItemProps {
 export interface OrderedGridProps {
   rows: Array<
     Array<{
-      element: React.ReactElement
+      element: ReactElement
       itemProps?: ItemProps
     }>
   >
@@ -37,7 +37,7 @@ export interface OrderedGridProps {
   globalItemProps: GlobalItemProps
 }
 
-const OrderedGrid: React.FC<OrderedGridProps> = ({
+const OrderedGrid: FC<OrderedGridProps> = ({
   rows,
   containerProps = {},
   globalItemProps,

package/src/components/ScrollIntoViewLink.tsx

@@ -1,6 +1,5 @@
-import { type FC } from "react"
 import { Link, type LinkProps } from "@mui/material"
-
+import { type FC } from "react"
 export interface ScrollIntoViewLinkProps extends Omit<LinkProps, "onClick"> {
   elementId: string
   options?: ScrollIntoViewOptions

package/src/components/SyncError.tsx

@@ -1,6 +1,6 @@
-import { SyncProblem as SyncProblemIcon } from "@mui/icons-material"
 import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
+import { SyncProblem as SyncProblemIcon } from "@mui/icons-material"
 
 export interface SyncErrorProps {}
 

package/src/components/TablePagination.tsx

@@ -1,3 +1,10 @@
+import {
+  type ElementType,
+  type JSX,
+  type JSXElementConstructor,
+  type ReactNode,
+  useEffect,
+} from "react"
 import {
   TablePagination as MuiTablePagination,
   type TablePaginationProps as MuiTablePaginationProps,
@@ -6,15 +13,9 @@ import {
   type TablePaginationBaseProps,
 } from "@mui/material"
 import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
-import {
-  type ElementType,
-  type JSXElementConstructor,
-  type ReactNode,
-  useEffect,
-} from "react"
 
-import { type Pagination, usePagination } from "../hooks/api"
 import { type ListArg, type ListResult, handleResultState } from "../utils/api"
+import { type Pagination, usePagination } from "../hooks/api"
 
 export type TablePaginationProps<
   QueryArg extends ListArg,
@@ -83,10 +84,17 @@ const TablePagination = <
 
   useEffect(
     () => {
-      trigger({ limit, offset, ...filters } as QueryArg, preferCacheValue)
+      void trigger({ limit, offset, ...filters } as QueryArg, preferCacheValue)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [trigger, limit, offset, ...Object.values(filters || {}), preferCacheValue],
+    [
+      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 || {}
@@ -114,11 +122,13 @@ const TablePagination = <
         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

package/src/components/YouTubeVideo.tsx

@@ -1,11 +1,11 @@
-import type React from "react"
 import { Box, type BoxProps } from "@mui/material"
+import { type FC } from "react"
 
 export interface YouTubeVideoProps extends Omit<BoxProps, "component"> {
   src: string
 }
 
-const YouTubeVideo: React.FC<YouTubeVideoProps> = ({
+const YouTubeVideo: FC<YouTubeVideoProps> = ({
   src,
   style = {},
   ...otherProps