test: add stories for mobile pullout (AI-700)

apps/nextjs/.storybook/chromatic.ts

@@ -10,7 +10,7 @@ export function chromaticParams(modes: ChromaticModes[]) {
           mobile: { viewport: "mobile" },
         }),
         ...(modes.includes("mobile-wide") && {
-          mobile: { viewport: "mobile-wide" },
+          "mobile-wide": { viewport: "mobile-wide" },
         }),
         ...(modes.includes("desktop") && {
           desktop: { viewport: "desktop" },

apps/nextjs/.storybook/decorators/ChromaticValidationDecorator.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import { Decorator } from "@storybook/react";
+
+export const ChromaticValidationDecorator: Decorator = (
+  Story,
+  { parameters },
+) => {
+  if (
+    !parameters.chromatic?.modes ||
+    Object.keys(parameters.chromatic.modes).length === 0
+  ) {
+    throw new Error("No chromatic parameters set");
+  }
+  return <Story />;
+};

apps/nextjs/.storybook/preview.tsx

@@ -19,7 +19,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 { ChromaticValidationDecorator } from "./decorators/ChromaticValidationDecorator";
 import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
 
@@ -59,7 +59,6 @@ const preview: Preview = {
         },
       },
     },
-    ...chromaticParams(["desktop"]),
   },
   loaders: [mswLoader],
 };
@@ -69,6 +68,7 @@ const preview: Preview = {
 export const decorators: Decorator[] = [
   RadixThemeDecorator,
   ClerkDecorator,
+  ChromaticValidationDecorator,
   (Story) => (
     <>
       <TRPCReactProvider>

apps/nextjs/jest.config.mjs

@@ -27,6 +27,7 @@ const config = {
     "^(\\.{1,2}/.*)\\.js$": "$1",
     "^@/components/(.*)$": "<rootDir>/src/components/$1",
     "^@/assets/(.*)$": "<rootDir>/src/assets/$1",
+    "^@/storybook/(.*)$": "<rootDir>/.storybook/$1",
   },
   extensionsToTreatAsEsm: [".ts", ".tsx"],
   testMatch: ["**/*.test.ts", "**/*.test.tsx"],

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

@@ -1,6 +1,8 @@
 import type { PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ChatModerationDisplay } from "./ChatModerationDisplay";
 
 const meta = {
@@ -14,6 +16,9 @@ const meta = {
       </div>
     ),
   ],
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof ChatModerationDisplay>;
 
 export default meta;

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

@@ -1,13 +1,16 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ChatHistory } from "./chat-history";
 
 const meta = {
   title: "Components/Sidebar/ChatHistory",
   component: ChatHistory,
   parameters: {
     layout: "centered",
+    ...chromaticParams(["desktop"]),
   },
   tags: ["autodocs"],
   decorators: [

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import type { ChatContextProps } from "@/components/ContextProviders/ChatProvider";
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 
 import LessonPlanDisplay from "./chat-lessonPlanDisplay";
@@ -32,6 +33,9 @@ const meta = {
     sectionRefs: {},
     showLessonMobile: false,
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof LessonPlanDisplay>;
 
 export default meta;

apps/nextjs/src/components/AppComponents/Chat/chat-lhs-header.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 
 import ChatLhsHeader from "./chat-lhs-header";
@@ -17,6 +18,7 @@ const meta = {
     isDemoUser: false,
   },
   parameters: {
+    ...chromaticParams(["desktop"]),
     chatContext: {
       ailaStreamingStatus: "Idle",
     },

apps/nextjs/src/components/AppComponents/Chat/chat-list/demo-limit-message.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ChatModerationProvider } from "@/components/ContextProviders/ChatModerationContext";
+import { chromaticParams } from "@/storybook/chromatic";
 
 import { DemoLimitMessage } from "./demo-limit-message";
 
@@ -18,6 +19,9 @@ const meta = {
   args: {
     id: "test-chat-id",
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof DemoLimitMessage>;
 
 export default meta;

apps/nextjs/src/components/AppComponents/Chat/chat-list/in-chat-download-buttons.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import {
   DemoDecorator,
   demoParams,
@@ -16,6 +17,7 @@ const meta = {
   },
   decorators: [DemoDecorator],
   parameters: {
+    ...chromaticParams(["desktop"]),
     ...demoParams({ isDemoUser: true }),
   },
 } satisfies Meta<typeof InChatDownloadButtons>;

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

@@ -1,6 +1,8 @@
 import type { MessagePart } from "@oakai/aila/src/protocol/jsonPatchProtocol";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ChatMessagePart } from "./ChatMessagePart";
 
 const meta = {
@@ -10,6 +12,9 @@ const meta = {
   args: {
     inspect: false,
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof ChatMessagePart>;
 
 export default meta;

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ChatModerationProvider } from "@/components/ContextProviders/ChatModerationContext";
+import { chromaticParams } from "@/storybook/chromatic";
 
 import { ChatMessage } from "./";
 
@@ -20,6 +21,9 @@ const meta = {
     persistedModerations: [],
     ailaStreamingStatus: "Idle",
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof ChatMessage>;
 
 export default meta;

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

@@ -1,6 +1,7 @@
 import type { Message } from "@oakai/aila/src/core/chat";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 import { LessonPlanTrackingDecorator } from "@/storybook/decorators/LessonPlanTrackingDecorator";
 import { SidebarDecorator } from "@/storybook/decorators/SidebarDecorator";
@@ -22,6 +23,7 @@ const meta = {
     isDemoLocked: false,
   },
   parameters: {
+    ...chromaticParams(["desktop"]),
     chatContext: {
       messages: [DummyMessage],
     },

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

@@ -1,6 +1,7 @@
 import type { Message } from "@oakai/aila/src/core/chat";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 import { LessonPlanTrackingDecorator } from "@/storybook/decorators/LessonPlanTrackingDecorator";
 
@@ -18,6 +19,7 @@ const meta = {
   tags: ["autodocs"],
   decorators: [ChatDecorator, LessonPlanTrackingDecorator],
   parameters: {
+    ...chromaticParams(["desktop"]),
     chatContext: {
       messages: [DummyMessage],
     },

apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.stories.tsx

@@ -0,0 +1,68 @@
+import type { Message } from "@oakai/aila/src/core/chat";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { chromaticParams } from "@/storybook/chromatic";
+import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
+import {
+  DemoDecorator,
+  demoParams,
+} from "@/storybook/decorators/DemoDecorator";
+
+import ChatRightHandSideLesson from "./chat-right-hand-side-lesson";
+
+const DummyUserMessage: Message = {
+  id: "123",
+  role: "user",
+  content: "Dummy message",
+};
+
+const DummyAssistantMessage: Message = {
+  id: "123",
+  role: "assistant",
+  content: "Dummy message",
+};
+
+const DummyMessages: Message[] = [DummyUserMessage, DummyAssistantMessage];
+
+const meta = {
+  title: "Components/LessonPlan/ChatRightHandSideLesson",
+  component: ChatRightHandSideLesson,
+  tags: ["autodocs"],
+  decorators: [ChatDecorator, DemoDecorator],
+  args: {
+    showLessonMobile: true,
+    closeMobileLessonPullOut: fn,
+    demo: { isDemoUser: false, isSharingEnabled: true, demo: undefined },
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile",
+    },
+    ...chromaticParams(["mobile"]),
+    chatContext: {
+      lessonPlan: {
+        subject: "biology",
+        keyStage: "key-stage-3",
+        title: "About Frogs",
+      },
+      messages: DummyMessages,
+    },
+    ...demoParams({ isDemoUser: false }),
+  },
+} satisfies Meta<typeof ChatRightHandSideLesson>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const OnlyOneMessage: Story = {
+  parameters: {
+    chatContext: {
+      messages: [DummyUserMessage],
+    },
+  },
+};

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

@@ -24,6 +24,8 @@ const ChatRightHandSideLesson = ({
   demo,
 }: Readonly<ChatRightHandSideLessonProps>) => {
   const { messages } = useLessonChat();
+  console.log({ messages, showLessonMobile });
+  console.log(messages.length);
 
   const chatEndRef = useRef<HTMLDivElement>(null);
 

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

@@ -1,11 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ChatStartForm } from "./chat-start-form";
 
 const meta = {
   title: "Components/Chat Start/ChatStartForm",
   component: ChatStartForm,
   tags: ["autodocs"],
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof ChatStartForm>;
 
 export default meta;

apps/nextjs/src/components/AppComponents/Chat/clear-history.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { ClearHistory } from "./clear-history";
 
 const meta = {
@@ -9,6 +11,9 @@ const meta = {
   argTypes: {
     isEnabled: { control: "boolean" },
   },
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
   decorators: [
     (Story) => {
       return <Story />;

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 
+import { chromaticParams } from "@/storybook/chromatic";
 import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 
 import DropDownSection from "./";
@@ -25,6 +26,7 @@ const meta = {
   },
   decorators: [ChatDecorator],
   parameters: {
+    ...chromaticParams(["desktop"]),
     chatContext: {
       id: "123",
       lastModeration: null,

apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressDropdown.stories.tsx

@@ -6,12 +6,17 @@ import type {
 } from "@oakai/aila/src/protocol/schema";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { LessonPlanProgressDropdown } from "./LessonPlanProgressDropdown";
 
 const meta = {
   title: "Components/LessonPlan/LessonPlanProgressDropdown",
   component: LessonPlanProgressDropdown,
   tags: ["autodocs"],
+  parameters: {
+    ...chromaticParams(["desktop"]),
+  },
 } satisfies Meta<typeof LessonPlanProgressDropdown>;
 
 export default meta;