fix: upgrade typescript + prettier + eslint with a single shared linting config

.github/actions/ref_from_sha/action.yml

@@ -13,4 +13,4 @@ outputs:
     description: "The number of the PR if one is found"
 runs:
   using: "node20"
-  main: "index.js"
+  main: "index.cjs"

.github/actions/ref_from_sha/index.js → .github/actions/ref_from_sha/index.cjs

@@ -8,8 +8,8 @@
 const core = require("@actions/core");
 const github = require("@actions/github");
 
-const prFromSha = require("./pr_from_sha");
-const branchFromSha = require("./branch_from_sha");
+const prFromSha = require("./pr_from_sha.cjs");
+const branchFromSha = require("./branch_from_sha.cjs");
 
 async function run() {
   try {

.github/actions/ref_from_sha/test/e2e.js → .github/actions/ref_from_sha/test/e2e.cjs

@@ -1,7 +1,7 @@
 const github = require("@actions/github");
 
-const prFromSha = require("../pr_from_sha");
-const branchFromSha = require("../branch_from_sha");
+const prFromSha = require("../pr_from_sha.cjs");
+const branchFromSha = require("../branch_from_sha.cjs");
 
 const githubToken = process.env.GITHUB_TOKEN;
 

apps/nextjs/jest.config.js → apps/nextjs/jest.config.mjs

@@ -1,5 +1,9 @@
-const { pathsToModuleNameMapper } = require("ts-jest");
-const { compilerOptions } = require("./tsconfig.test.json");
+import { readFile } from "fs/promises";
+import { pathsToModuleNameMapper } from "ts-jest";
+
+const tsconfig = JSON.parse(
+  await readFile(new URL("./tsconfig.test.json", import.meta.url)),
+);
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 const config = {
@@ -12,12 +16,12 @@ const config = {
         isolatedModules: true,
       },
     ],
-    "^.+\\.svg$": "<rootDir>/jest.svgTransform.js",
+    "^.+\\.svg$": "<rootDir>/jest.svgTransform.mjs",
     "^.+\\.(css|scss|png|jpg|jpeg|gif|webp|avif)$": "jest-transform-stub",
   },
   preset: "ts-jest/presets/default-esm",
   moduleNameMapper: {
-    ...pathsToModuleNameMapper(compilerOptions.paths, {
+    ...pathsToModuleNameMapper(tsconfig.compilerOptions.paths, {
       prefix: "<rootDir>/src/",
     }),
     "^(\\.{1,2}/.*)\\.js$": "$1",
@@ -30,12 +34,12 @@ const config = {
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   rootDir: ".",
   resetMocks: true,
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.cjs"],
   collectCoverageFrom: ["src/**/*.{ts,tsx,js,jsx}"],
   collectCoverage:
     process.env.CI === "true" || process.env.COLLECT_TEST_COVERAGE === "true",
   coverageReporters: ["lcov", "text"],
   coverageDirectory: "coverage",
 };
 
-module.exports = config;
+export default config;

apps/nextjs/jest.static.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 declare module "*.svg" {
   const content: any;
   export default content;

apps/nextjs/jest.svgTransform.js → apps/nextjs/jest.svgTransform.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   process() {
     console.log("Called jest svg transform");
     return { code: "module.exports = {};" };

apps/nextjs/next.config.js

@@ -1,9 +1,10 @@
+// This file should be in Common JS format to be compatible with Next.js
 const {
   getAppVersion,
   getReleaseStage,
   RELEASE_STAGE_PRODUCTION,
   RELEASE_STAGE_TESTING,
-} = require("./scripts/build_config_helpers.js");
+} = require("./scripts/build_config_helpers.cjs");
 const path = require("path");
 
 const { PHASE_PRODUCTION_BUILD, PHASE_TEST } = require("next/constants");

apps/nextjs/package.json

@@ -1,26 +1,27 @@
 {
   "name": "@oakai/nextjs",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "build": "next build",
     "build:dev": "pnpm with-env next build",
     "check": "tsc --noEmit",
     "clean": "rm -rf .next .turbo node_modules",
-    "dev": "FORCE_COLOR=1 SENTRY_SUPPRESS_TURBOPACK_WARNING=1 pnpm with-env node scripts/increase-listeners.js next dev --port 2525 --turbo | pino-pretty -C",
-    "dev:sentry": "FORCE_COLOR=1 pnpm with-env node scripts/increase-listeners.js next dev --port 2525 | pino-pretty -C",
+    "dev": "FORCE_COLOR=1 SENTRY_SUPPRESS_TURBOPACK_WARNING=1 pnpm with-env next dev --port 2525 --turbo | pino-pretty -C",
+    "dev:sentry": "FORCE_COLOR=1 pnpm with-env next dev --port 2525 | pino-pretty -C",
     "dev-trace-deprecation": "NODE_OPTIONS=\"--trace-deprecation\" next dev --port 2525 | pino-pretty -C",
-    "lint": "next lint",
+    "lint": "eslint .",
     "lint-fix": "next lint --fix",
+    "lint-debug": "eslint --debug .",
     "start": "next start",
     "type-check": "tsc --noEmit",
-    "test": "pnpm with-env jest --colors --config jest.config.js",
-    "test:seq": "pnpm with-env jest --colors --config jest.config.js --verbose --runInBand --no-cache",
+    "test": "pnpm with-env jest --colors --config jest.config.mjs",
+    "test:seq": "pnpm with-env jest --colors --config jest.config.mjs --verbose --runInBand --no-cache",
     "test-e2e": "pnpm with-env playwright test",
     "test-e2e-ui": "pnpm with-env playwright test --ui",
     "test-e2e-ui-serve": "pnpm build && pnpm start --port 4848 --turbo",
     "test-e2e-ui-built": "PORT=4848 pnpm with-env playwright test --ui",
-    "test-coverage": "COLLECT_TEST_COVERAGE=true pnpm with-env jest --colors --config jest.config.js --coverage",
+    "test-coverage": "COLLECT_TEST_COVERAGE=true pnpm with-env jest --colors --config jest.config.mjs --coverage",
     "with-env": "dotenv -e ../../.env --",
     "aila": "tsx scripts/aila-cli.ts",
     "storybook": "dotenv -e ../../.env -- storybook dev -p 6006 --no-open",
@@ -43,14 +44,15 @@
     "@oakai/api": "*",
     "@oakai/core": "*",
     "@oakai/db": "*",
+    "@oakai/eslint-config": "*",
     "@oakai/exports": "*",
     "@oakai/logger": "*",
     "@oakai/prettier-config": "*",
     "@oaknational/oak-components": "^1.50.0",
     "@oaknational/oak-consent-client": "^2.1.0",
     "@portabletext/react": "^3.1.0",
-    "@prisma/client": "5.16.1",
-    "@prisma/extension-accelerate": "^1.0.0",
+    "@prisma/client": "^5.16.1",
+    "@prisma/extension-accelerate": "^1.2.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -141,26 +143,23 @@
     "@storybook/test": "^8.4.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/file-saver": "^2.0.6",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^18.17.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^20.9.0",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@types/styled-components": "^5.1.34",
     "autoprefixer": "^10.4.16",
     "avo": "^3.2.11",
     "concurrently": "^8.2.2",
     "dotenv-cli": "^6.0.0",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "15.0.1",
-    "eslint-plugin-storybook": "^0.8.0",
     "graphql": "^16.9.0",
     "jest": "^29.7.0",
     "msw": "^2.6.5",
     "msw-storybook-addon": "^2.0.4",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.3.7",
-    "ts-jest": "^29.1.4",
-    "typescript": "5.3.3",
+    "ts-jest": "^29.2.5",
+    "typescript": "5.7.2",
     "web-streams-polyfill": "^4.0.0"
   },
   "engines": {
@@ -171,5 +170,12 @@
     "workerDirectory": [
       ".storybook/public"
     ]
+  },
+  "eslintConfig": {
+    "extends": "@oakai/eslint-config",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
+    "rules": {}
   }
 }

apps/nextjs/scripts/build_config_helpers.js → apps/nextjs/scripts/build_config_helpers.cjs

@@ -7,7 +7,7 @@ const { existsSync, readFileSync } = require("fs");
  * @returns {(string|null)} The SHA if found, or "no_git_state" if mid-merge, or `null` if it cannot be determined.
  */
 function getLocalGitRef() {
-  if (existsSync("../../.git")) {
+  if (existsSync("../../.git/HEAD")) {
     const rev = readFileSync("../../.git/HEAD")
       .toString()
       .trim()

apps/nextjs/scripts/preload-chat-routes.mjs

@@ -75,6 +75,7 @@ const preBuildRoutes = async (
     console.log("All routes pre-built successfully");
     console.timeEnd(timerId);
   } catch (error) {
+    console.error(error);
     if (retryCount < maxRetries) {
       console.log(
         `Retrying pre-build (attempt ${retryCount + 1} of ${maxRetries})...`,

apps/nextjs/src/ai-apps/lesson-planner/state/actions.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-duplicate-enum-values */
 import type { RateLimitInfo } from "@oakai/api/src/types";
 import type { KeyStageName, SubjectName } from "@oakai/core";
 import type {

apps/nextjs/src/app/api/chat/fixtures/FixtureRecordOpenAiClient.ts

@@ -3,7 +3,7 @@ import { createOpenAIClient } from "@oakai/core/src/llm/openai";
 import { aiLogger } from "@oakai/logger";
 import fs from "fs/promises";
 import type OpenAI from "openai";
-import type { ChatCompletionCreateParamsNonStreaming } from "openai/resources";
+import type { ChatCompletionCreateParamsNonStreaming } from "openai/resources/index.mjs";
 
 const log = aiLogger("fixtures");
 

apps/nextjs/src/components/AppComponents/Chat/chat-message/index.tsx

@@ -1,6 +1,6 @@
 // Inspired by Chatbot-UI and modified to fit the needs of this project
 // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
-import type { ReactNode } from "react";
+import type { ReactNode, JSX } from "react";
 import { useState } from "react";
 
 import type { MessagePart } from "@oakai/aila/src/protocol/jsonPatchProtocol";
@@ -200,7 +200,7 @@ function MessageWrapper({
 
 function MessageTextWrapper({ children }: Readonly<{ children: ReactNode }>) {
   return (
-    <div className=" flex w-full flex-col items-start justify-between">
+    <div className="flex w-full flex-col items-start justify-between">
       {children}
     </div>
   );

apps/nextjs/src/components/AppComponents/Chat/ui/textarea.tsx

@@ -2,23 +2,21 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-9 py-7 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-9 py-7 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
 Textarea.displayName = "Textarea";
 
 export { Textarea };

apps/nextjs/src/components/AppComponents/QuizDesigner/ErrorBox.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from "react";
+
 import type { Responsive } from "@radix-ui/themes";
 import { Box } from "@radix-ui/themes";
 

apps/nextjs/src/components/DialogControl/ContentOptions/ModalFooterButtons.tsx

@@ -1,3 +1,5 @@
+import { JSX } from "react";
+
 import { OakFlex, OakSpan } from "@oaknational/oak-components";
 
 import { OakLinkNoUnderline } from "@/components/OakLinkNoUnderline";

apps/nextjs/src/lib/hooks/use-sidebar.tsx

@@ -11,13 +11,13 @@ import {
 
 const LOCAL_STORAGE_KEY = "sidebar";
 
-export interface SidebarContext {
+export interface SidebarContextValue {
   isSidebarOpen: boolean;
   toggleSidebar: () => void;
   isLoading: boolean;
 }
 
-export const SidebarContext = createContext<SidebarContext | undefined>(
+export const SidebarContext = createContext<SidebarContextValue | undefined>(
   undefined,
 );
 
@@ -53,7 +53,7 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
     });
   }, [setIsSidebarOpen]);
 
-  const contextValue = useMemo(() => {
+  const contextValue: SidebarContextValue = useMemo(() => {
     return { isSidebarOpen, toggleSidebar, isLoading };
   }, [isSidebarOpen, isLoading, toggleSidebar]);
 

apps/nextjs/src/middlewares/auth.middleware.ts

@@ -93,6 +93,7 @@ const shouldInterceptRouteForOnboarding = (req: NextRequest) => {
   return true;
 };
 
+/* eslint-disable-next-line no-undef */
 const needsToCompleteOnboarding = (sessionClaims: CustomJwtSessionClaims) => {
   const labs = sessionClaims.labs;
   return !labs.isOnboarded || labs.isDemoUser === null;

apps/nextjs/src/mocks/clerk/ClerkDecorator.tsx

@@ -1,4 +1,4 @@
-import type { Decorator } from "@storybook/react/*";
+import type { Decorator } from "@storybook/react";
 
 import { ClerkProvider } from "./nextjsComponents";
 

apps/nextjs/tailwind.config.cjs

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const defaultTheme = require("tailwindcss/defaultTheme");
 const { blackA } = require("@radix-ui/colors");