chore: reinstate react hooks linting, fix linting issues (#441)

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "bradlc.vscode-tailwindcss",
     "Prisma.prisma",
     "orta.vscode-jest",
-    "ms-playwright.playwright"
+    "ms-playwright.playwright",
+    "sonarsource.sonarlint-vscode"
   ]
 }

README.md

@@ -26,6 +26,16 @@ Oak AI Lesson Assistant is a project focused on experimenting with AI models and
     - [End-to-end tests](#end-to-end-tests)
       - [Playwright tags](#playwright-tags)
     - [Testing in VSCode](#testing-in-vscode)
+  - [Standards](#standards)
+    - [Typescript](#typescript)
+    - [ES Modules](#esmodules)
+    - [CommonJS](#commonjs)
+  - [Code quality](#quality)
+    - [Sonar](#sonar)
+    - [ESLint](#eslint)
+    - [Prettier](#prettier)
+    - [Tsconfig]("#tsconfig)
+    - [Dependency cruiser](#dependency-cruiser)
   - [Release process](#release-process)
   - [PNPM / dependency problems](#pnpm--dependency-problems)
   - [External contributions](#external-contributions)
@@ -176,6 +186,68 @@ Our Playwright tests are organised with tags:
 
 Install the Jest and Playwright extensions recommended in the workspace config. Testing icons should appear in the gutter to the left of each test when viewing a test file. Clicking the icon will run the test. The testing tab in the VSCode nav bar provides an overview.
 
+## Standards
+
+### Typescript
+
+By default, we develop in Typescript and aim to be up to date with the latest version. New code should default to being written in Typescript unless it is not possible.
+
+### ES Modules
+
+All packages are configured to be ES Modules.
+
+### CommonJS
+
+Currently NextJS, Tailwind and some other tools has some code which needs to be CommonJS. For these files, you should use the .cjs extension so that the correct linting rules are applied.
+
+## Code quality
+
+We use several tools to ensure code quality in the codebase and for checks during development. These checks run on each PR in Github to ensure we maintain good code quality. You can also run many of these checks locally before making a PR.
+
+### Sonar
+
+If you are using VS Code or Cursor, consider installing the SonarQube for IDE extension. This will give you feedback while you were as to any code quality or security issues that it has detected.
+
+If you would like to run a Sonar scan locally, use the following command:
+
+```shell
+pnpm sonar
+```
+
+You will need to log in to Sonar when prompted the first time. This will generate a full report for you of your local development environment. Usually it is easier to make a PR and have this run for you automatically.
+
+### ESLint
+
+We have a single ESLint config for the whole monorepo. You will find it in packages/eslint-config.
+
+This is using the latest version of ESLint and you should note that the config file format has changed to the "Flat file" config in version 9.
+
+Each package does not have its own ESLint config by default. Instead we have a single config file, with regex path matchers to turn on/off rules that are specific for each package. This can be overridden and you can see an example of that in the logger package.
+
+Each package specifies in its package.json file that it should use this shared config and there is a root ESLint config file for the whole mono repo which specifies that it should do the same.
+
+To check for linting errors, run the following command:
+
+```shell
+pnpm lint
+```
+
+If you want to check for linting errors in an individual package, cd into that package and run the same command.
+
+### Prettier
+
+We also have a single Prettier config, which is located in packages/prettier-config. In general there should be no need to change this on a per-package basis.
+
+### Tsconfig
+
+We have an overall tsconfig.json file which specifies the overall Typescript configuration for the project. Then each package extends from it.
+
+You can check the codebase for any Typescript issues by running the following command:
+
+```shell
+pnpm type-check
+```
+
 ## Release process
 
 The current release process is fully documented [in Notion](https://www.notion.so/oaknationalacademy/Branch-Strategy-and-Release-Process-ceeb32937af0426ba495565288e18844?pvs=4), but broadly works as follows:

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

@@ -1,4 +1,3 @@
-/* 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/errorHandling.test.ts

@@ -27,7 +27,6 @@ describe("handleChatException", () => {
 
       const span = { setTag: jest.fn() } as unknown as TracingSpan;
       const error = new AilaThreatDetectionError("user_abc", "test error");
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const prisma = {} as unknown as PrismaClientWithAccelerate;
 
       const response = await handleChatException(
@@ -54,7 +53,6 @@ describe("handleChatException", () => {
     it("should return an error chat message", async () => {
       const span = { setTag: jest.fn() } as unknown as TracingSpan;
       const error = new AilaAuthenticationError("test error");
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const prisma = {} as unknown as PrismaClientWithAccelerate;
 
       const response = await handleChatException(
@@ -84,7 +82,6 @@ describe("handleChatException", () => {
         100,
         Date.now() + 3600 * 1000,
       );
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const prisma = {} as unknown as PrismaClientWithAccelerate;
 
       const response = await handleChatException(
@@ -117,7 +114,6 @@ describe("handleChatException", () => {
     it("should return an error chat message", async () => {
       const span = { setTag: jest.fn() } as unknown as TracingSpan;
       const error = new UserBannedError("test error");
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const prisma = {} as unknown as PrismaClientWithAccelerate;
 
       const response = await handleChatException(

apps/nextjs/src/app/lesson-planner/preview/[slug]/page.tsx

@@ -16,8 +16,6 @@ async function getData(slug: string) {
       notFound: true,
     };
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  //   const { updatedAt, createdAt, ...rest } = sharedData;
 
   const planSections = sharedData.content;
   return planSections;

apps/nextjs/src/app/quiz-designer/preview/[slug]/page.tsx

@@ -14,8 +14,6 @@ async function getData(slug: string) {
       notFound: true,
     };
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  //   const { updatedAt, createdAt, ...rest } = sharedData;
 
   const questions = sharedData.content;
 

apps/nextjs/src/components/AppComponents/Chat/chat-left-hand-side.tsx

@@ -26,7 +26,7 @@ const ChatLeftHandSide = ({
   demo,
   isDemoUser,
 }: Readonly<ChatLeftHandSideProps>) => {
-  const { messages, chatAreaRef } = useLessonChat();
+  const { chatAreaRef } = useLessonChat();
   return (
     <Flex
       direction="column"

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

@@ -1,4 +1,4 @@
-import { MessagePart } from "@oakai/aila/src/protocol/jsonPatchProtocol";
+import type { MessagePart } from "@oakai/aila/src/protocol/jsonPatchProtocol";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ChatMessagePart } from "./ChatMessagePart";

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

@@ -54,10 +54,7 @@ export function ChatMessagePart({
     <div className="w-full">
       <PartComponent part={part.document} />
 
-      {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        inspect && <PartInspector part={part} />
-      }
+      {inspect && <PartInspector part={part} />}
     </div>
   );
 }

apps/nextjs/src/components/AppComponents/Chat/drop-down-section/index.tsx

@@ -92,6 +92,7 @@ const DropDownSection = ({
     prevValue,
     documentContainerRef,
     userHasCancelledAutoScroll,
+    streamingTimeout,
   ]);
 
   return (

apps/nextjs/src/components/AppComponents/QuizDesigner/QuizQuestionRow/Distractor.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+// TODO - if we are maintaining the quiz designer, check the hook dependencies
 import type { Dispatch } from "react";
 import { useCallback, useState } from "react";
 

packages/aila/tsconfig.json

@@ -8,6 +8,7 @@
     "../core/src/utils/subjects/index.ts"
   ],
   "compilerOptions": {
+    "baseUrl": "./src",
     "typeRoots": [
       "./../../node_modules/@types",
       "./src/types",

packages/api/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src", "index.ts", "transformer.ts"]
+  "include": ["src", "index.ts", "transformer.ts"],
+  "compilerOptions": {
+    "baseUrl": "./src"
+  }
 }

packages/db/tsconfig.json

@@ -6,5 +6,8 @@
     "client/index.ts",
     "scripts/**/*.ts",
     "schemas/**/*.ts"
-  ]
+  ],
+  "compilerOptions": {
+    "baseUrl": "."
+  }
 }

packages/eslint-config/src/index.mjs

@@ -93,7 +93,9 @@ const config = [
 
     rules: {
       ...rules,
-      "react/jsx-no-comment-textnodes": "warn"
+      "react/jsx-no-comment-textnodes": "warn",
+      "react-hooks/exhaustive-deps": "error",
+      "react-hooks/rules-of-hooks": "error",
     },
     settings: {
       "import/resolver": {

packages/eslint-config/src/rules.mjs

@@ -46,7 +46,7 @@ export const rules = {
   }],
 
   // Import plugin rules
-  "import/no-cycle": "warn",
+  "import/no-cycle": ["warn", { maxDepth: Infinity }],
   "import/newline-after-import": "off",
   "import/no-duplicates": "off",
 

packages/eslint-config/tsconfig.json

@@ -7,8 +7,16 @@
     "outDir": "./dist",
     "declaration": true,
     "esModuleInterop": true,
-    "strict": true
+    "strict": true,
+    "baseUrl": "./src"
   },
-  "include": ["*.ts", "src/*.ts", "eslint.config.old", "src/rules.mjs", "src/index.mjs", "src/ignores.mjs"],
+  "include": [
+    "*.ts",
+    "src/*.ts",
+    "eslint.config.old",
+    "src/rules.mjs",
+    "src/index.mjs",
+    "src/ignores.mjs"
+  ],
   "exclude": ["node_modules", "dist"]
-}
+}

packages/exports/tsconfig.json

@@ -3,5 +3,8 @@
   "ts-node": {
     "files": true
   },
-  "include": ["src/**/*.ts", "index.ts", "*.ts"]
+  "include": ["src/**/*.ts", "index.ts", "*.ts"],
+  "compilerOptions": {
+    "baseUrl": "./src"
+  }
 }

packages/ingest/tsconfig.json

@@ -8,6 +8,7 @@
     "esModuleInterop": true,
     "types": ["jest"],
     "allowImportingTsExtensions": true,
-    "moduleDetection": "force"
+    "moduleDetection": "force",
+    "baseUrl": "./src"
   }
 }