test: add stories for onboarding (#423)

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: {},
+};

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();

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: {},
+};

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: {},
+};

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: {},
+};

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

@@ -7,6 +7,7 @@ export {
   useAuth,
   useUser,
   useClerk,
+  useSession,
   SignedIn,
   SignedOut,
   ClerkProvider,

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;
 };