fix: assert readonly props

.vscode/settings.json

@@ -51,6 +51,7 @@
     "eyfs",
     "firstname",
     "fkey",
+    "flagbuttonformitem",
     "fontsource",
     "gdrive",
     "Geist",
@@ -146,6 +147,7 @@
     "transpiles",
     "trivago",
     "trpc",
+    "TSES",
     "Turbopack",
     "turborepo",
     "uidotdev",

apps/nextjs/.eslintrc.cjs

@@ -2,6 +2,7 @@
 module.exports = {
   extends: ["../../.eslintrc.cjs", "next", "plugin:storybook/recommended"],
   rules: {
+    "react/prefer-read-only-props": "error",
     "no-restricted-imports": [
       "error",
       {

apps/nextjs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/nextjs/src/app/admin/aila/[chatId]/view.tsx

@@ -7,7 +7,7 @@ import { OakAccordion, OakPrimaryButton } from "@oaknational/oak-components";
 
 import { trpc } from "@/utils/trpc";
 
-function ModerationListItem({ moderation }: { moderation: Moderation }) {
+function ModerationListItem({ moderation }: { readonly moderation: Moderation }) {
   const { id, invalidatedAt } = moderation;
   const [invalidated, setInvalidated] = useState(Boolean(invalidatedAt));
   const invalidateModeration = trpc.admin.invalidateModeration.useMutation({
@@ -60,8 +60,8 @@ export function AdminChatView({
   chat,
   moderations,
 }: {
-  chat: AilaPersistedChat;
-  moderations: Moderation[];
+  readonly chat: AilaPersistedChat;
+  readonly moderations: Moderation[];
 }) {
   return (
     <>

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

@@ -7,7 +7,7 @@ import Layout from "@/components/AppComponents/Layout";
 import { ChatProvider } from "@/components/ContextProviders/ChatProvider";
 import LessonPlanTrackingProvider from "@/lib/analytics/lessonPlanTrackingContext";
 
-const ChatPageContents = ({ id }: { id: string }) => {
+const ChatPageContents = ({ id }: { readonly id: string }) => {
   return (
     <Layout>
       <LessonPlanTrackingProvider chatId={id}>

apps/nextjs/src/app/global-error.tsx

@@ -9,7 +9,7 @@ import FullPageWarning from "@/components/FullPageWarning";
 export default function GlobalError({
   error,
 }: {
-  error: Error & { digest?: string };
+  readonly error: Error & { digest?: string };
 }) {
   useEffect(() => {
     Sentry.captureException(error, {

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

@@ -55,9 +55,9 @@ const OakFlexCustomMaxWidthWithHalfWidth = styled(OakFlexCustomMaxWidth)`
   }
 `;
 
-type HomePageProps = {
+export type HomePageProps = Readonly<{
   pageData: HomePageQueryResult | null;
-};
+}>;
 
 export default function HomePage(props: HomePageProps) {
   return (

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

@@ -7,9 +7,9 @@ import type { PolicyDocument } from "cms/types/policyDocument";
 import Layout from "@/components/Layout";
 import { portableTextComponents } from "@/components/PortableText/portableTextComponents";
 
-interface LegalContentProps {
+export type LegalContentProps = Readonly<{
   pageData: PolicyDocument;
-}
+}>;
 
 export const LegalContent = ({ pageData }: LegalContentProps) => {
   return (

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

@@ -3,11 +3,13 @@ import { notFound } from "next/navigation";
 
 import LegalContent from "./legal";
 
+export type PolicyContentPageProps = Readonly<{
+  params: { readonly slug: string };
+}>;
+
 export default async function PolicyContentPage({
   params,
-}: {
-  params: { slug: string };
-}) {
+}: PolicyContentPageProps) {
   const pageData = await fetchPolicyDocument({ slug: params.slug });
 
   if (!pageData) {

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

@@ -23,11 +23,13 @@ async function getData(slug: string) {
   return planSections;
 }
 
+export type QuizPreviewPageProps = Readonly<{
+  params: { readonly slug: string };
+}>;
+
 export default async function QuizPreviewPage({
   params,
-}: {
-  params: { slug: string };
-}) {
+}: QuizPreviewPageProps) {
   log.info("params", params);
 
   const planSections = await getData(params.slug);

apps/nextjs/src/app/prompts/prompts.tsx

@@ -18,9 +18,9 @@ import HeroContainer from "@/components/HeroContainer";
 import Layout from "@/components/Layout";
 import { slugify } from "@/utils/slugify";
 
-type PromptsPageData = {
+export type PromptsPageData = Readonly<{
   apps: SerializedAppWithPrompt[];
-};
+}>;
 
 export const PromptsContent = ({ apps }: PromptsPageData) => {
   const pathname = usePathname();

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

@@ -19,11 +19,13 @@ async function getData(slug: string) {
   return parsedData;
 }
 
+export type GenerationsPageProps = Readonly<{
+  params: { readonly slug: string };
+}>;
+
 export default async function GenerationsPage({
   params,
-}: {
-  params: { slug: string };
-}) {
+}: GenerationsPageProps) {
   const data = await getData(params.slug);
   return <QuizDesignerPage data={data} />;
 }

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

@@ -22,11 +22,13 @@ async function getData(slug: string) {
   return questions;
 }
 
+export type QuizPreviewPageProps = Readonly<{
+  params: { readonly slug: string };
+}>;
+
 export default async function QuizPreviewPage({
   params,
-}: {
-  params: { slug: string };
-}) {
+}: QuizPreviewPageProps) {
   log.info("params", params);
 
   const questions = await getData(params.slug);

apps/nextjs/src/app/styles-registry.tsx

@@ -9,7 +9,7 @@ import { ServerStyleSheet, StyleSheetManager } from "styled-components";
 export default function StyledComponentsRegistry({
   children,
 }: {
-  children: React.ReactNode;
+  readonly children: React.ReactNode;
 }) {
   // Only create stylesheet once with lazy initial state
   // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

apps/nextjs/src/components/AiIcon.tsx

@@ -1,4 +1,4 @@
-const AiIcon = ({ color = "black" }: { color?: "black" | "white" }) => {
+const AiIcon = ({ color = "black" }: { readonly color?: "black" | "white" }) => {
   return (
     <svg
       width="24"

apps/nextjs/src/components/AppComponents/Chat/Chat/ChatModeration.tsx

@@ -9,9 +9,9 @@ import { useLessonChat } from "@/components/ContextProviders/ChatProvider";
 import ModerationFeedbackModal from "../../FeedbackForms/ModerationFeedbackModal";
 import { ChatModerationDisplay } from "./ChatModerationDisplay";
 
-interface ChatModerationProps {
+export type ChatModerationProps = Readonly<{
   children: React.ReactNode;
-}
+}>;
 
 const ChatModeration = ({ children }: ChatModerationProps) => {
   const chat = useLessonChat();

apps/nextjs/src/components/AppComponents/Chat/Chat/ChatModerationDisplay.tsx

@@ -5,10 +5,10 @@ import { Flex } from "@radix-ui/themes";
 
 import ToxicModerationView from "../toxic-moderation-view";
 
-export interface ModerationDisplayProps {
+export type ModerationDisplayProps = Readonly<{
   toxicModeration: PersistedModerationBase | null;
   chatId: string;
-}
+}>;
 
 export const ChatModerationDisplay: React.FC<ModerationDisplayProps> = ({
   toxicModeration,

apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.tsx

@@ -28,17 +28,19 @@ const displayStyles = cva(
   "relative flex flex-col space-y-10 px-14 pb-28 opacity-100 sm:px-24 ",
 );
 
+export type LessonPlanDisplayProps = Readonly<{
+  chatEndRef: React.MutableRefObject<HTMLDivElement | null>;
+  sectionRefs: Record<string, React.MutableRefObject<HTMLDivElement | null>>;
+  documentContainerRef: React.MutableRefObject<HTMLDivElement | null>;
+  showLessonMobile: boolean;
+}>;
+
 export const LessonPlanDisplay = ({
   chatEndRef,
   sectionRefs,
   documentContainerRef,
   showLessonMobile,
-}: {
-  chatEndRef: React.MutableRefObject<HTMLDivElement | null>;
-  sectionRefs: Record<string, React.MutableRefObject<HTMLDivElement | null>>;
-  documentContainerRef: React.MutableRefObject<HTMLDivElement | null>;
-  showLessonMobile: boolean;
-}) => {
+}: LessonPlanDisplayProps) => {
   const chat = useLessonChat();
   const { ailaStreamingStatus, lastModeration } = chat;
   const lessonPlan = {

apps/nextjs/src/components/AppComponents/Chat/chat-list.tsx

@@ -111,21 +111,23 @@ export function ChatList({
   );
 }
 
+export type ChatMessagesDisplayProps = Readonly<{
+  id: string;
+  messages: Message[];
+  lastModeration: PersistedModerationBase | null;
+  persistedModerations: PersistedModerationBase[];
+  ailaStreamingStatus: AilaStreamingStatus;
+  demo: DemoContextProps;
+}>;
+
 export const ChatMessagesDisplay = ({
   messages,
   id,
   lastModeration,
   persistedModerations = [],
   ailaStreamingStatus,
   demo,
-}: {
-  id: string;
-  messages: Message[];
-  lastModeration: PersistedModerationBase | null;
-  persistedModerations: PersistedModerationBase[];
-  ailaStreamingStatus: AilaStreamingStatus;
-  demo: DemoContextProps;
-}) => {
+}: ChatMessagesDisplayProps) => {
   const { lessonPlan, isStreaming } = useLessonChat();
   const { setDialogWindow } = useDialog();
   const { totalSections, totalSectionsComplete } = useProgressForDownloads({
@@ -236,9 +238,9 @@ const InChatDownloadButtons = ({
   id,
   setDialogWindow,
 }: {
-  demo: DemoContextProps;
-  id: string;
-  setDialogWindow: Dispatch<SetStateAction<DialogTypes>>;
+  readonly demo: DemoContextProps;
+  readonly id: string;
+  readonly setDialogWindow: Dispatch<SetStateAction<DialogTypes>>;
 }) => {
   return (
     <OakFlex $flexDirection="column" $gap="all-spacing-7" $mv="space-between-l">
@@ -274,9 +276,9 @@ const InnerInChatButton = ({
 
   children,
 }: {
-  iconName: "download" | "share";
+  readonly iconName: "download" | "share";
 
-  children: string;
+  readonly children: string;
 }) => {
   return (
     <OakFlex

apps/nextjs/src/components/AppComponents/Chat/chat-panel-area.tsx

@@ -1,14 +1,16 @@
 import { useDemoUser } from "@/components/ContextProviders/Demo";
 
+export type ChatPanelAreaProps = Readonly<{
+  children: React.ReactNode;
+  chatAreaRef?: React.RefObject<HTMLDivElement>;
+  isDemoLocked: boolean;
+}>;
+
 export const ChatPanelArea = ({
   children,
   chatAreaRef,
   isDemoLocked,
-}: {
-  children: React.ReactNode;
-  chatAreaRef?: React.RefObject<HTMLDivElement>;
-  isDemoLocked: boolean;
-}) => {
+}: ChatPanelAreaProps) => {
   const demo = useDemoUser();
 
   return (

apps/nextjs/src/components/AppComponents/Chat/chat-panel-disclaimer.tsx

@@ -1,4 +1,4 @@
-const ChatPanelDisclaimer = ({ size }: { size: "sm" | "md" | "lg" }) => {
+const ChatPanelDisclaimer = ({ size }: { readonly size: "sm" | "md" | "lg" }) => {
   return (
     <p className={`my-12 text-${size}`}>
       Aila can make mistakes. Check your lesson before use. See our{" "}

apps/nextjs/src/components/AppComponents/Chat/chat-quick-buttons.tsx

@@ -12,9 +12,9 @@ import type { AilaStreamingStatus } from "./Chat/hooks/useAilaStreamingStatus";
 import ChatButton from "./ui/chat-button";
 import { IconRefresh, IconStop } from "./ui/icons";
 
-interface QuickActionButtonsProps {
+export type QuickActionButtonsProps = Readonly<{
   isEmptyScreen: boolean;
-}
+}>;
 
 const shouldAllowStop = (
   ailaStreamingStatus: AilaStreamingStatus,

apps/nextjs/src/components/AppComponents/Chat/chat-share-dialog.tsx

@@ -25,8 +25,8 @@ import { constructSharePath } from "./Chat/utils";
 const log = aiLogger("chat");
 
 interface ChatShareDialogProps extends DialogProps {
-  chat: SideBarChatItem;
-  onCopy: () => void;
+  readonly chat: SideBarChatItem;
+  readonly onCopy: () => void;
 }
 
 export function ChatShareDialog({

apps/nextjs/src/components/AppComponents/Chat/chat-start-accordion.tsx

@@ -140,17 +140,17 @@ const ChatStartAccordion = () => {
 // Define prop types for each component
 interface AccordionItemProps
   extends React.ComponentPropsWithoutRef<typeof Accordion.Item> {
-  children: React.ReactNode;
+  readonly children: React.ReactNode;
 }
 
 interface AccordionTriggerProps
   extends React.ComponentPropsWithoutRef<typeof Accordion.Trigger> {
-  children: React.ReactNode;
+  readonly children: React.ReactNode;
 }
 
 interface AccordionContentProps
   extends React.ComponentPropsWithoutRef<typeof Accordion.Content> {
-  children: React.ReactNode;
+  readonly children: React.ReactNode;
 }
 
 const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(

apps/nextjs/src/components/AppComponents/Chat/drop-down-section/action-button-wrapper.tsx

@@ -15,7 +15,7 @@ import type {
 import { ActionDropDown } from "./action-drop-down";
 import type { FeedbackOption } from "./drop-down-form-wrapper";
 
-type ActionButtonWrapperProps = {
+export type ActionButtonWrapperProps = Readonly<{
   sectionTitle: string;
   sectionPath: string;
   sectionValue: Record<string, unknown> | string | Array<unknown>;
@@ -28,7 +28,7 @@ type ActionButtonWrapperProps = {
     option: FeedbackOption<AilaUserModificationAction>,
     userFeedbackText: string,
   ) => string;
-};
+}>;
 
 const ActionButtonWrapper = ({
   sectionTitle,