test: add DialogContentDecorator

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

@@ -0,0 +1,29 @@
+import React from "react";
+
+import type { Decorator } from "@storybook/react";
+
+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: () => {},
+        dialogProps: {},
+        setDialogProps: () => {},
+        openSidebar: false,
+        setOpenSidebar: () => {},
+      }}
+    >
+      <Story />
+    </DialogContext.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/components/DialogControl/DialogContents.stories.tsx

@@ -4,28 +4,14 @@ import { http, HttpResponse } from "msw";
 import type { AnalyticsContext } from "@/components/ContextProviders/AnalyticsProvider";
 import { analyticsContext } from "@/components/ContextProviders/AnalyticsProvider";
 
-import { DialogContext } from "../AppComponents/DialogContext";
 import { DemoProvider } from "../ContextProviders/Demo";
 import DialogContents from "./DialogContents";
+import { DialogContentDecorator } from "@/storybook/decorators/DialogContentDecorator";
 
 const meta: Meta<typeof DialogContents> = {
   title: "Components/Dialogs/DialogContents",
   component: DialogContents,
-  decorators: (Story, { parameters }) => {
-    return (
-      <DialogContext.Provider
-        value={{
-          dialogWindow: parameters.dialogWindow,
-          setDialogWindow: () => {},
-          dialogProps: {},
-          setDialogProps: () => {},
-          openSidebar: false,
-          setOpenSidebar: () => {},
-        }}
-      >
-        <Story />
-      </DialogContext.Provider>
-    );
+  decorators: [DialogContentDecorator]
   },
 };
 

apps/nextjs/src/mocks/clerk/ClerkDecorator.tsx

@@ -2,6 +2,12 @@ import type { Decorator } from "@storybook/react";
 
 import { ClerkProvider } from "./nextjsComponents";
 
+declare module "@storybook/csf" {
+  interface Parameters {
+    auth?: "loading" | "signedIn" | "signedInDemo" | "signedOut";
+  }
+}
+
 export const ClerkDecorator: Decorator = (Story, { parameters }) => {
   return (
     <ClerkProvider state={parameters.auth ?? "signedIn"}>