Merge remote-tracking branch 'origin/main' into chore/polyfill_web_st…

…reams

.gitignore

@@ -55,4 +55,6 @@ yarn-error.log*
 .vscode/*.settings.json
 
 .sonar
-.sonar/**/*
+.sonar/**/*
+
+dependency-graph.svg

.vscode/extensions.json

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

CHANGE_LOG.md

@@ -1,3 +1,19 @@
+# [1.18.0](https://github.com/oaknational/oak-ai-lesson-assistant/compare/v1.17.1...v1.18.0) (2024-12-11)
+
+
+### Bug Fixes
+
+*  update eslint config and lint errors ([#422](https://github.com/oaknational/oak-ai-lesson-assistant/issues/422)) ([34774b5](https://github.com/oaknational/oak-ai-lesson-assistant/commit/34774b5b404c154d8c8aa10ae5b687507dc09c85))
+* moderation persist scores [AI-696] ([#418](https://github.com/oaknational/oak-ai-lesson-assistant/issues/418)) ([7539661](https://github.com/oaknational/oak-ai-lesson-assistant/commit/7539661e22fa0e334138e0f796a700662e4e37e3))
+* more flexible and efficient solution for images in docs ([#411](https://github.com/oaknational/oak-ai-lesson-assistant/issues/411)) ([abbff85](https://github.com/oaknational/oak-ai-lesson-assistant/commit/abbff8545476f6c045331a63290fc8f57cf3f54e))
+* upgrade typescript + prettier + eslint with a single shared linting config ([#424](https://github.com/oaknational/oak-ai-lesson-assistant/issues/424)) ([1f4aa9d](https://github.com/oaknational/oak-ai-lesson-assistant/commit/1f4aa9dde84402df089ce4d6947472d389f576a0))
+
+
+### Features
+
+* report google drive storage quota ([#425](https://github.com/oaknational/oak-ai-lesson-assistant/issues/425)) ([a0cb485](https://github.com/oaknational/oak-ai-lesson-assistant/commit/a0cb4859ddb975d831a5b64d8d789ee8597aeda8))
+* test coverage ([#406](https://github.com/oaknational/oak-ai-lesson-assistant/issues/406)) ([00767a0](https://github.com/oaknational/oak-ai-lesson-assistant/commit/00767a0148456f57f8fa21e0cb0149cf849f3574))
+
 ## [1.17.1](https://github.com/oaknational/oak-ai-lesson-assistant/compare/v1.17.0...v1.17.1) (2024-12-03)
 
 

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/.storybook/chromatic.ts

@@ -0,0 +1,91 @@
+import "@storybook/csf";
+
+type ChromaticModes = "mobile" | "mobile-wide" | "desktop" | "desktop-wide";
+
+export function chromaticParams(modes: ChromaticModes[]) {
+  return {
+    chromatic: {
+      modes: {
+        ...(modes.includes("mobile") && {
+          mobile: { viewport: "mobile" },
+        }),
+        ...(modes.includes("mobile-wide") && {
+          mobile: { viewport: "mobile-wide" },
+        }),
+        ...(modes.includes("desktop") && {
+          desktop: { viewport: "desktop" },
+        }),
+        ...(modes.includes("desktop-wide") && {
+          "desktop-wide": { viewport: "desktopWide" },
+        }),
+      },
+    },
+  };
+}
+
+declare module "@storybook/csf" {
+  interface Parameters {
+    /**
+     * Parameters for chromatic
+     */
+    chromatic?: {
+      /**
+       * Delay capture for a fixed time (in milliseconds) to allow your story to get into
+       * the intended state
+       *
+       * @see [delaying snapshots chromatic documentation](https://www.chromatic.com/docs/delay)
+       */
+      delay?: number;
+      /**
+       * Override this behavior in instances where a single pixel change is not flagged by
+       * Chromatic but should be
+       *
+       * * @see [anti-aliasing chromatic documentation](https://www.chromatic.com/docs/threshold#anti-aliasing)
+       *
+       * @default false
+       */
+      diffIncludeAntiAliasing?: boolean;
+      /**
+       * The diffThreshold parameter allows you to fine tune the threshold for visual change
+       * between snapshots before they're flagged by Chromatic. Sometimes you need assurance
+       * to the sub-pixel and other times you want to skip visual noise generated by
+       * non-deterministic rendering such as anti-aliasing.
+       *
+       * 0 is the most accurate. 1 is the least accurate.
+       *
+       * @default 0.063
+       */
+      diffThreshold?: number;
+      /**
+       * You can omit stories entirely from Chromatic testing using the disable story parameter.
+       *
+       * @see [ignoring elements chromatic documentation](https://www.chromatic.com/docs/ignoring-elements)
+       */
+      disable?: boolean;
+      /**
+       * Modes
+       *
+       * @see [modes chromatic documentation](https://www.chromatic.com/docs/modes)
+       */
+      modes?: Record<
+        string,
+        {
+          viewport?: string | number;
+          theme?: "light" | "dark";
+          backgrounds?: { value: string };
+        }
+      >;
+      /**
+       * Define one or more viewport sizes to capture. Note, units are considered in pixels
+       */
+      viewports?: number[];
+      /**
+       * To specify that Chromatic should pause the animation at the end instead of reseting
+       * them to their beginning state.
+       *
+       * @see [animations chromatic documentation](https://www.chromatic.com/docs/animations)
+       */
+      pauseAnimationAtEnd?: boolean;
+    };
+  }
+}

apps/nextjs/.storybook/preview.tsx

@@ -15,6 +15,7 @@ import { DialogProvider } from "../src/components/AppComponents/DialogContext";
 import { AnalyticsProvider } from "../src/mocks/analytics/provider";
 import { ClerkDecorator } from "../src/mocks/clerk/ClerkDecorator";
 import { TRPCReactProvider } from "../src/utils/trpc";
+import { chromaticParams } from "./chromatic";
 import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
 
@@ -28,6 +29,27 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: "Mobile",
+          styles: { width: "375px", height: "800px" },
+        },
+        mobileWide: {
+          name: "Mobile Wide",
+          styles: { width: "430px", height: "930px" },
+        },
+        desktop: {
+          name: "Desktop",
+          styles: { width: "1200px", height: "1000px" },
+        },
+        desktopWide: {
+          name: "Desktop Wide",
+          styles: { width: "1400px", height: "1000px" },
+        },
+      },
+    },
+    ...chromaticParams(["desktop"]),
   },
   loaders: [mswLoader],
 };

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/aila/[id]/download/DownloadView.stories.tsx

@@ -1,6 +1,7 @@
 import type { AilaPersistedChat } from "@oakai/aila/src/protocol/schema";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "../../../../../.storybook/chromatic";
 import { DemoProvider } from "../../../../../src/components/ContextProviders/Demo";
 import { DownloadContent } from "./DownloadView";
 
@@ -9,6 +10,7 @@ const meta: Meta<typeof DownloadContent> = {
   component: DownloadContent,
   parameters: {
     layout: "fullscreen",
+    ...chromaticParams(["mobile", "desktop"]),
   },
   decorators: [
     (Story) => (

apps/nextjs/src/app/aila/[id]/share/index.stories.tsx

@@ -1,13 +1,15 @@
 import type { LooseLessonPlan } from "@oakai/aila/src/protocol/schema";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "../../../../../.storybook/chromatic";
 import ShareChat from "./";
 
 const meta: Meta<typeof ShareChat> = {
   title: "Pages/Chat/Share",
   component: ShareChat,
   parameters: {
     layout: "fullscreen",
+    ...chromaticParams(["mobile", "desktop"]),
   },
 };
 

apps/nextjs/src/app/aila/help/index.stories.tsx

@@ -3,13 +3,15 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { DemoProvider } from "@/components/ContextProviders/Demo";
 
 import { HelpContent } from ".";
+import { chromaticParams } from "../../../../.storybook/chromatic";
 
 const meta: Meta<typeof HelpContent> = {
   title: "Pages/Chat/Help",
   component: HelpContent,
   parameters: {
     // Including custom decorators changes the layout from fullscreen
     layout: "fullscreen",
+    ...chromaticParams(["mobile", "desktop"]),
   },
   decorators: [
     (Story) => (

apps/nextjs/src/app/aila/page-contents.tsx

@@ -11,7 +11,7 @@ const ChatPageContents = ({ id }: { readonly id: string }) => {
   return (
     <Layout>
       <LessonPlanTrackingProvider chatId={id}>
-        <ChatProvider key={`chat-${id}`} id={id}>
+        <ChatProvider id={id}>
           <Chat />
         </ChatProvider>
       </LessonPlanTrackingProvider>

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/faqs/index.stories.tsx

@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { FAQPageContent } from ".";
+import { chromaticParams } from "../../../.storybook/chromatic";
 
 const meta: Meta<typeof FAQPageContent> = {
   title: "Pages/FAQs",
   component: FAQPageContent,
+  parameters: {
+    ...chromaticParams(["mobile", "desktop"]),
+  },
 };
 
 export default meta;

apps/nextjs/src/app/home-page.stories.tsx

@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "../../.storybook/chromatic";
 import { HomePageContent } from "./home-page";
 
 const meta: Meta<typeof HomePageContent> = {
   title: "Pages/Homepage",
   component: HomePageContent,
+  parameters: {
+    ...chromaticParams(["mobile", "desktop"]),
+  },
 };
 
 export default meta;

apps/nextjs/src/app/legal/[slug]/legal.stories.tsx

@@ -1,10 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "../../../../.storybook/chromatic";
 import { LegalContent } from "./legal";
 
 const meta: Meta<typeof LegalContent> = {
   title: "Pages/Legal/Sanity dynamic",
   component: LegalContent,
+  parameters: {
+    ...chromaticParams(["mobile", "desktop"]),
+  },
 };
 
 export default meta;