test: add stories for header and footer (#368)

apps/nextjs/.storybook/preview.tsx

@@ -11,6 +11,7 @@ import type { Preview, Decorator } from "@storybook/react";
 
 import { TooltipProvider } from "../src/components/AppComponents/Chat/ui/tooltip";
 import { AnalyticsProvider } from "../src/mocks/analytics/provider";
+import { ClerkDecorator } from "../src/mocks/clerk/ClerkDecorator";
 import { TRPCReactProvider } from "../src/utils/trpc";
 import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
@@ -28,7 +29,6 @@ const preview: Preview = {
 };
 
 // Providers not currently used
-// - MockClerkProvider
 // - CookieConsentProvider
 // - DemoProvider
 // - LessonPlanTrackingProvider
@@ -38,6 +38,7 @@ const preview: Preview = {
 
 export const decorators: Decorator[] = [
   RadixThemeDecorator,
+  ClerkDecorator,
   (Story) => (
     <>
       {/* TODO: Mock tRPC calls with MSW */}

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Footer from "./Footer";
+
+const meta: Meta<typeof Footer> = {
+  title: "Components/Layout/Footer",
+  component: Footer,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Footer>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Header from "./Header";
+
+const meta: Meta<typeof Header> = {
+  title: "Components/Layout/Header",
+  component: Header,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Header>;
+
+export const SignedIn: Story = {
+  args: {},
+  parameters: {
+    auth: "signedIn",
+  },
+};
+
+export const SignedOut: Story = {
+  args: {},
+  parameters: {
+    auth: "signedOut",
+  },
+};

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

@@ -0,0 +1,11 @@
+import type { Decorator } from "@storybook/react/*";
+
+import { ClerkProvider } from "./nextjsComponents";
+
+export const ClerkDecorator: Decorator = (Story, { parameters }) => {
+  return (
+    <ClerkProvider state={parameters.auth ?? "signedIn"}>
+      <Story />
+    </ClerkProvider>
+  );
+};

apps/nextjs/src/mocks/clerk/nextjs.ts

@@ -1,6 +1,6 @@
-/* 
+/*
 Mocks the Clerk authentication library for use in Story book.
-See the readme for more context on why this is needed. 
+See the readme for more context on why this is needed.
 */
 
 export {
@@ -10,4 +10,5 @@ export {
   SignedIn,
   SignedOut,
   ClerkProvider,
+  UserButton,
 } from "./nextjsComponents";

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

@@ -1,43 +1,115 @@
 import React from "react";
 
+type Context = {
+  isLoaded: boolean;
+  isSignedIn: boolean | undefined;
+  user:
+    | Record<
+        "id" | "firstName" | "lastName" | "emailAddresses" | "publicMetadata",
+        unknown
+      >
+    | undefined;
+};
+
 const mockUser = {
   id: "user_123",
   firstName: "John",
   lastName: "Doe",
   emailAddresses: [{ emailAddress: "[email protected]" }],
-  publicMetadata: { labs: { isDemoUser: true } },
+  publicMetadata: { labs: { isDemoUser: false } },
   // Add other user properties as needed
 };
 
-export const useUser = () => ({
-  isLoaded: true,
-  isSignedIn: true,
-  user: mockUser,
-});
+const states: Record<ClerkProviderProps["state"], Context> = {
+  loading: {
+    isLoaded: false,
+    isSignedIn: undefined,
+    user: undefined,
+  },
+  signedOut: {
+    isLoaded: true,
+    isSignedIn: false,
+    user: undefined,
+  },
+  signedIn: {
+    isLoaded: true,
+    isSignedIn: true,
+    user: mockUser,
+  },
+  signedInDemo: {
+    isLoaded: true,
+    isSignedIn: true,
+    user: {
+      ...mockUser,
+      publicMetadata: { ...mockUser.publicMetadata, isDemoUser: true },
+    },
+  },
+};
+
+const ClerkContext = React.createContext<Context>(states.signedIn);
+
+type ClerkProviderProps = {
+  state: "loading" | "signedIn" | "signedInDemo" | "signedOut";
+  children: React.ReactNode;
+};
+export const ClerkProvider = ({ state, children }: ClerkProviderProps) => (
+  <ClerkContext.Provider value={states[state]}>
+    {children}
+  </ClerkContext.Provider>
+);
+
+export const useUser = () => {
+  const context = React.useContext(ClerkContext);
+  return {
+    isLoaded: context.isLoaded,
+    isSignedIn: context.isSignedIn,
+    user: context.user,
+  };
+};
 
 export const useClerk = () => ({
   signOut: () => Promise.resolve(),
   signIn: () => Promise.resolve(),
   // Add other Clerk methods as needed
 });
 
-export const useAuth = () => ({
-  isLoaded: true,
-  isSignedIn: true,
-  userId: mockUser.id,
-  sessionId: "session_123",
-  getToken: () => Promise.resolve("mock_token"),
-});
+export const useAuth = () => {
+  const context = React.useContext(ClerkContext);
+  return {
+    isLoaded: context.isLoaded,
+    isSignedIn: context.isSignedIn,
+    userId: mockUser?.id,
+    sessionId: "session_123",
+    getToken: () => Promise.resolve("mock_token"),
+  };
+};
 
-export const SignedIn = ({ children }: { children: React.ReactNode }) => (
-  <>{children}</>
-);
-export const SignedOut = ({ children }: { children: React.ReactNode }) => (
-  <>{children}</>
-);
+export const SignedIn = ({ children }: { children: React.ReactNode }) => {
+  const context = React.useContext(ClerkContext);
+  return context.isSignedIn ? children : null;
+};
 
-export const ClerkProvider = ({ children }: { children: React.ReactNode }) => (
-  <>{children}</>
-);
+export const SignedOut = ({ children }: { children: React.ReactNode }) => {
+  const context = React.useContext(ClerkContext);
+  return context.isSignedIn ? null : children;
+};
+
+export const UserButton = () => {
+  const context = React.useContext(ClerkContext);
+
+  return context.isSignedIn ? (
+    <div
+      style={{
+        display: "block",
+        height: "28px",
+        width: "28px",
+        background: "yellowgreen",
+        borderRadius: "50%",
+      }}
+    />
+  ) : (
+    "Sign in"
+  );
+};
 
 // Mock other Clerk components and hooks as needed