test: add stories for chat header

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DemoContext } from "@/components/ContextProviders/Demo";
+
+import { Header } from "./header";
+
+const DemoDecorator: Story["decorators"] = (Story, { parameters }) => (
+  <DemoContext.Provider
+    value={{
+      isDemoUser: false,
+      isSharingEnabled: true,
+      ...parameters.demoContext,
+    }}
+  >
+    <Story />
+  </DemoContext.Provider>
+);
+
+const meta: Meta<typeof Header> = {
+  title: "Components/Layout/ChatHeader",
+  component: Header,
+  tags: ["autodocs"],
+  decorators: [DemoDecorator],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      story: {
+        height: "150px",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const DemoUser: Story = {
+  args: {},
+  parameters: {
+    demoContext: {
+      isDemoUser: true,
+      appSessionsPerMonth: 3,
+      appSessionsRemaining: 2,
+    },
+  },
+};
+
+export const DemoLoading: Story = {
+  args: {},
+  parameters: {
+    demoContext: {
+      isDemoUser: true,
+      appSessionsPerMonth: 3,
+      appSessionsRemaining: undefined,
+    },
+  },
+};

apps/nextjs/src/components/Header.stories.tsx

@@ -6,6 +6,14 @@ const meta: Meta<typeof Header> = {
   title: "Components/Layout/Header",
   component: Header,
   tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      story: {
+        height: "80px",
+      },
+    },
+  },
 };
 
 export default meta;