From dd0d79c16848e28f048e187bf0b8a9c794850d1f Mon Sep 17 00:00:00 2001
From: Adam Howard <91115+codeincontext@users.noreply.github.com>
Date: Tue, 3 Dec 2024 13:50:18 +0100
Subject: [PATCH] test: add stories for onboarding

---
 .../Onboarding/AcceptTermsForm.stories.tsx    | 15 +++++++++++
 .../components/Onboarding/AcceptTermsForm.tsx |  3 ++-
 .../LegacyUpgradeNotice.stories.tsx           | 15 +++++++++++
 .../Onboarding/TermsContent.stories.tsx       | 15 +++++++++++
 .../{ => Onboarding}/TermsContent.tsx         |  0
 .../components/SignUpSignInLayout.stories.tsx | 15 +++++++++++
 apps/nextjs/src/mocks/clerk/nextjs.ts         |  1 +
 .../src/mocks/clerk/nextjsComponents.tsx      | 27 +++++++++++++++++--
 8 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx
 create mode 100644 apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx
 create mode 100644 apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx
 rename apps/nextjs/src/components/{ => Onboarding}/TermsContent.tsx (100%)
 create mode 100644 apps/nextjs/src/components/SignUpSignInLayout.stories.tsx

diff --git a/apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx b/apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx
new file mode 100644
index 000000000..cca0f90ef
--- /dev/null
+++ b/apps/nextjs/src/components/Onboarding/AcceptTermsForm.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { AcceptTermsForm } from "./AcceptTermsForm";
+
+const meta: Meta<typeof AcceptTermsForm> = {
+  title: "Pages/Onboarding/AcceptTermsForm",
+  component: AcceptTermsForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof AcceptTermsForm>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/apps/nextjs/src/components/Onboarding/AcceptTermsForm.tsx b/apps/nextjs/src/components/Onboarding/AcceptTermsForm.tsx
index 54ce49d93..fd3a4cb79 100644
--- a/apps/nextjs/src/components/Onboarding/AcceptTermsForm.tsx
+++ b/apps/nextjs/src/components/Onboarding/AcceptTermsForm.tsx
@@ -19,9 +19,10 @@ import Link from "next/link";
 import Button from "@/components/Button";
 import CheckBox from "@/components/CheckBox";
 import SignUpSignInLayout from "@/components/SignUpSignInLayout";
-import TermsContent from "@/components/TermsContent";
 import { trpc } from "@/utils/trpc";
 
+import TermsContent from "./TermsContent";
+
 export const AcceptTermsForm = () => {
   const [dropDownOpen, setDropDownOpen] = useState(true);
   const { isLoaded } = useUser();
diff --git a/apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx b/apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx
new file mode 100644
index 000000000..d61d4b03f
--- /dev/null
+++ b/apps/nextjs/src/components/Onboarding/LegacyUpgradeNotice.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LegacyUpgradeNotice } from "./LegacyUpgradeNotice";
+
+const meta: Meta<typeof LegacyUpgradeNotice> = {
+  title: "Pages/Onboarding/LegacyUpgradeNotice",
+  component: LegacyUpgradeNotice,
+};
+
+export default meta;
+type Story = StoryObj<typeof LegacyUpgradeNotice>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx b/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx
new file mode 100644
index 000000000..4065320f4
--- /dev/null
+++ b/apps/nextjs/src/components/Onboarding/TermsContent.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import TermsContent from "./TermsContent";
+
+const meta: Meta<typeof TermsContent> = {
+  title: "Components/Onboarding/TermsContent",
+  component: TermsContent,
+};
+
+export default meta;
+type Story = StoryObj<typeof TermsContent>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/apps/nextjs/src/components/TermsContent.tsx b/apps/nextjs/src/components/Onboarding/TermsContent.tsx
similarity index 100%
rename from apps/nextjs/src/components/TermsContent.tsx
rename to apps/nextjs/src/components/Onboarding/TermsContent.tsx
diff --git a/apps/nextjs/src/components/SignUpSignInLayout.stories.tsx b/apps/nextjs/src/components/SignUpSignInLayout.stories.tsx
new file mode 100644
index 000000000..63cda9985
--- /dev/null
+++ b/apps/nextjs/src/components/SignUpSignInLayout.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import SignUpSignInLayout from "./SignUpSignInLayout";
+
+const meta: Meta<typeof SignUpSignInLayout> = {
+  title: "Components/Layout/SignUpSignInLayout",
+  component: SignUpSignInLayout,
+};
+
+export default meta;
+type Story = StoryObj<typeof SignUpSignInLayout>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/apps/nextjs/src/mocks/clerk/nextjs.ts b/apps/nextjs/src/mocks/clerk/nextjs.ts
index ea6c3ca74..e583ffc05 100644
--- a/apps/nextjs/src/mocks/clerk/nextjs.ts
+++ b/apps/nextjs/src/mocks/clerk/nextjs.ts
@@ -7,6 +7,7 @@ export {
   useAuth,
   useUser,
   useClerk,
+  useSession,
   SignedIn,
   SignedOut,
   ClerkProvider,
diff --git a/apps/nextjs/src/mocks/clerk/nextjsComponents.tsx b/apps/nextjs/src/mocks/clerk/nextjsComponents.tsx
index c96d21080..5b56737cd 100644
--- a/apps/nextjs/src/mocks/clerk/nextjsComponents.tsx
+++ b/apps/nextjs/src/mocks/clerk/nextjsComponents.tsx
@@ -87,12 +87,35 @@ export const useAuth = () => {
   };
 };
 
-export const SignedIn = ({ children }: { readonly children: React.ReactNode }) => {
+export const useSession = () => {
+  const context = React.useContext(ClerkContext);
+  const mockSession = {};
+  const session = context.isLoaded
+    ? context.isSignedIn
+      ? mockSession
+      : null
+    : undefined;
+  return {
+    isLoaded: context.isLoaded,
+    isSignedIn: context.isSignedIn,
+    session,
+  };
+};
+
+export const SignedIn = ({
+  children,
+}: {
+  readonly children: React.ReactNode;
+}) => {
   const context = React.useContext(ClerkContext);
   return context.isSignedIn ? children : null;
 };
 
-export const SignedOut = ({ children }: { readonly children: React.ReactNode }) => {
+export const SignedOut = ({
+  children,
+}: {
+  readonly children: React.ReactNode;
+}) => {
   const context = React.useContext(ClerkContext);
   return context.isSignedIn ? null : children;
 };