test: storybook decorators (#443)

apps/nextjs/.storybook/decorators/AnalyticsDecorator.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import type { Decorator } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import {
+  analyticsContext,
+  type AnalyticsContext,
+} from "../../src/components/ContextProviders/AnalyticsProvider";
+
+declare module "@storybook/csf" {
+  interface Parameters {
+    analyticsContext?: Partial<AnalyticsContext>;
+  }
+}
+
+export const AnalyticsDecorator: Decorator = (Story, { parameters }) => {
+  return (
+    <analyticsContext.Provider
+      value={
+        {
+          track: fn(),
+          trackEvent: fn(),
+          identify: fn(),
+          reset: fn(),
+          page: fn(),
+          posthogAiBetaClient: {},
+          ...parameters.analyticsContext,
+        } as unknown as AnalyticsContext
+      }
+    >
+      <Story />
+    </analyticsContext.Provider>
+  );
+};

apps/nextjs/.storybook/decorators/ChatDecorator.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import type { Decorator } from "@storybook/react";
+
+import {
+  ChatContext,
+  type ChatContextProps,
+} from "../../src/components/ContextProviders/ChatProvider";
+
+declare module "@storybook/csf" {
+  interface Parameters {
+    chatContext?: Partial<ChatContextProps>;
+  }
+}
+
+export const ChatDecorator: Decorator = (Story, { parameters }) => (
+  <ChatContext.Provider value={parameters.chatContext as ChatContextProps}>
+    <Story />
+  </ChatContext.Provider>
+);

apps/nextjs/.storybook/decorators/DemoDecorator.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+import type { Decorator } from "@storybook/react";
+import invariant from "tiny-invariant";
+
+import {
+  DemoContext,
+  type DemoContextProps,
+} from "@/components/ContextProviders/Demo";
+
+declare module "@storybook/csf" {
+  interface Parameters {
+    demoContext?: DemoContextProps;
+  }
+}
+
+export const DemoDecorator: Decorator = (Story, { parameters }) => {
+  const value = parameters.demoContext;
+  invariant(
+    value,
+    "DemoDecorator requires a DemoContext. Please call ...demoParams() in the parameters",
+  );
+
+  return (
+    <DemoContext.Provider value={value}>
+      <Story />
+    </DemoContext.Provider>
+  );
+};
+
+const demoBase: DemoContextProps["demo"] = {
+  appSessionsRemaining: 2,
+  appSessionsPerMonth: 3,
+  contactHref: "https://share.hsforms.com/1R9ulYSNPQgqElEHde3KdhAbvumd",
+};
+
+type DemoParams = {
+  isDemoUser: boolean;
+  demo?: Partial<DemoContextProps["demo"]>;
+  isSharingEnabled?: boolean;
+};
+export const demoParams = (
+  args: DemoParams,
+): { demoContext: DemoContextProps } => {
+  const isSharingEnabled = args.isSharingEnabled ?? true;
+
+  const context: DemoContextProps = args.isDemoUser
+    ? {
+        isDemoUser: true,
+        demo: { ...demoBase, ...args.demo },
+        isSharingEnabled,
+      }
+    : {
+        isDemoUser: false,
+        demo: undefined,
+        isSharingEnabled,
+      };
+
+  return {
+    demoContext: context,
+  };
+};

apps/nextjs/.storybook/decorators/DialogContentDecorator.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import type { Decorator } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import type { DialogTypes } from "../../src/components/AppComponents/Chat/Chat/types";
+import { DialogContext } from "../../src/components/AppComponents/DialogContext";
+
+declare module "@storybook/csf" {
+  interface Parameters {
+    dialogWindow?: DialogTypes;
+  }
+}
+
+export const DialogContentDecorator: Decorator = (Story, { parameters }) => {
+  return (
+    <DialogContext.Provider
+      value={{
+        dialogWindow: parameters.dialogWindow ?? "",
+        setDialogWindow: fn(),
+        dialogProps: {},
+        setDialogProps: fn(),
+        openSidebar: false,
+        setOpenSidebar: fn(),
+      }}
+    >
+      <Story />
+    </DialogContext.Provider>
+  );
+};

apps/nextjs/.storybook/decorators/LessonPlanTrackingDecorator.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import type { Decorator } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { LessonPlanTrackingContext } from "../../src/lib/analytics/lessonPlanTrackingContext";
+
+export const LessonPlanTrackingDecorator: Decorator = (Story) => (
+  <LessonPlanTrackingContext.Provider
+    value={{
+      onClickContinue: fn(),
+      onClickRetry: fn(),
+      onClickStartFromExample: fn(),
+      onClickStartFromFreeText: fn(),
+      onStreamFinished: fn(),
+      onSubmitText: fn(),
+    }}
+  >
+    <Story />
+  </LessonPlanTrackingContext.Provider>
+);

apps/nextjs/.storybook/decorators/RadixThemeDecorator.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 
 import { Theme } from "@radix-ui/themes";
+import { Decorator } from "@storybook/react";
 
-export const RadixThemeDecorator = (Story: React.ComponentType) => (
+export const RadixThemeDecorator: Decorator = (Story) => (
   <Theme>
     <Story />
   </Theme>

apps/nextjs/.storybook/decorators/SidebarDecorator.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import type { Decorator } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { SidebarContext } from "../../src/lib/hooks/use-sidebar";
+
+declare module "@storybook/csf" {
+  interface Parameters {
+    // Please fill out as we add configuration
+    sidebarContext?: {};
+  }
+}
+
+export const SidebarDecorator: Decorator = (Story) => (
+  <SidebarContext.Provider
+    value={{
+      toggleSidebar: fn(),
+      isLoading: false,
+      isSidebarOpen: false,
+    }}
+  >
+    <Story />
+  </SidebarContext.Provider>
+);

apps/nextjs/.storybook/preview.tsx

@@ -54,13 +54,7 @@ const preview: Preview = {
   loaders: [mswLoader],
 };
 
-// Providers not currently used
-// - CookieConsentProvider
-// - DemoProvider
-// - LessonPlanTrackingProvider
-// - DialogProvider
-// - SidebarProvider
-// - ChatModerationProvider
+// NOTE: See ./decorators for more decorators available to use in stories
 
 export const decorators: Decorator[] = [
   RadixThemeDecorator,

apps/nextjs/src/app/aila/[id]/download/DownloadView.stories.tsx

@@ -1,7 +1,8 @@
 import type { AilaPersistedChat } from "@oakai/aila/src/protocol/schema";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { chromaticParams } from "../../../../../.storybook/chromatic";
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { DemoProvider } from "../../../../../src/components/ContextProviders/Demo";
 import { DownloadContent } from "./DownloadView";
 

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

@@ -1,7 +1,8 @@
 import type { LooseLessonPlan } from "@oakai/aila/src/protocol/schema";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { chromaticParams } from "../../../../../.storybook/chromatic";
+import { chromaticParams } from "@/storybook/chromatic";
+
 import ShareChat from "./";
 
 const meta: Meta<typeof ShareChat> = {

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

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { DemoProvider } from "@/components/ContextProviders/Demo";
+import { chromaticParams } from "@/storybook/chromatic";
 
 import { HelpContent } from ".";
-import { chromaticParams } from "../../../../.storybook/chromatic";
 
 const meta: Meta<typeof HelpContent> = {
   title: "Pages/Chat/Help",

apps/nextjs/src/app/faqs/index.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { FAQPageContent } from ".";
-import { chromaticParams } from "../../../.storybook/chromatic";
 
 const meta: Meta<typeof FAQPageContent> = {
   title: "Pages/FAQs",

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { chromaticParams } from "../../.storybook/chromatic";
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { HomePageContent } from "./home-page";
 
 const meta: Meta<typeof HomePageContent> = {

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { chromaticParams } from "../../../../.storybook/chromatic";
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { LegalContent } from "./legal";
 
 const meta: Meta<typeof LegalContent> = {

apps/nextjs/src/app/legal/account-locked/account-locked.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { chromaticParams } from "../../../../.storybook/chromatic";
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { AccountLocked } from "./account-locked";
 
 const meta: Meta<typeof AccountLocked> = {

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { chromaticParams } from "../../../.storybook/chromatic";
+import { chromaticParams } from "@/storybook/chromatic";
+
 import { PromptsContent } from "./prompts";
 
 const meta: Meta<typeof PromptsContent> = {

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

@@ -1,34 +1,25 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import type { ChatContextProps } from "@/components/ContextProviders/ChatProvider";
-import { ChatContext } from "@/components/ContextProviders/ChatProvider";
+import { ChatDecorator } from "@/storybook/decorators/ChatDecorator";
 
 import LessonPlanDisplay from "./chat-lessonPlanDisplay";
 
-const ChatDecorator: Story["decorators"] = (Story, { parameters }) => (
-  <ChatContext.Provider
-    value={
-      {
-        id: "123",
-        lastModeration: null,
-        messages: [],
-        lessonPlan: {
-          title: "About Frogs",
-          keyStage: "Key Stage 2",
-          subject: "Science",
-          topic: "Amphibians",
-          basedOn: "Frogs in Modern Britain",
-          learningOutcome:
-            "To understand the importance of frogs in British society and culture",
-        },
-        ailaStreamingStatus: "Idle",
-        ...parameters.chatContext,
-      } as unknown as ChatContextProps
-    }
-  >
-    <Story />
-  </ChatContext.Provider>
-);
+const chatContext: Partial<ChatContextProps> = {
+  id: "123",
+  lastModeration: null,
+  messages: [],
+  lessonPlan: {
+    title: "About Frogs",
+    keyStage: "Key Stage 2",
+    subject: "Science",
+    topic: "Amphibians",
+    basedOn: { title: "Frogs in Modern Britain" },
+    learningOutcome:
+      "To understand the importance of frogs in British society and culture",
+  },
+  ailaStreamingStatus: "Idle",
+};
 
 const meta: Meta<typeof LessonPlanDisplay> = {
   title: "Components/LessonPlan/LessonPlanDisplay",
@@ -47,14 +38,15 @@ type Story = StoryObj<typeof LessonPlanDisplay>;
 export const Default: Story = {
   args: {},
   parameters: {
-    chatContext: {},
+    chatContext,
   },
 };
 
 export const Loading: Story = {
   args: {},
   parameters: {
     chatContext: {
+      ...chatContext,
       lessonPlan: {},
     },
   },
@@ -64,7 +56,9 @@ export const WithModeration: Story = {
   args: {},
   parameters: {
     chatContext: {
+      ...chatContext,
       lastModeration: {
+        id: "123",
         categories: ["l/strong-language"],
       },
     },