test: add storybook stories for public pages (#365)

apps/nextjs/.storybook/preview.tsx

@@ -33,7 +33,6 @@ const preview: Preview = {
 // - DemoProvider
 // - LessonPlanTrackingProvider
 // - DialogProvider
-// - OakThemeProvider
 // - SidebarProvider
 // - ChatModerationProvider
 
@@ -44,9 +43,11 @@ export const decorators: Decorator[] = [
       {/* TODO: Mock tRPC calls with MSW */}
       <TRPCReactProvider>
         <AnalyticsProvider>
-          <TooltipProvider>
-            <Story />
-          </TooltipProvider>
+          <OakThemeProvider theme={oakDefaultTheme}>
+            <TooltipProvider>
+              <Story />
+            </TooltipProvider>
+          </OakThemeProvider>
         </AnalyticsProvider>
       </TRPCReactProvider>
     </>

apps/nextjs/src/app/faqs/index.stories.tsx

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

apps/nextjs/src/app/faqs/index.tsx

@@ -17,7 +17,7 @@ import GetInTouchBox from "@/components/AppComponents/GetInTouchBox";
 import Layout from "@/components/Layout";
 import { OakBoxCustomMaxWidth } from "@/components/OakBoxCustomMaxWidth";
 
-const FAQPage = () => {
+export const FAQPageContent = () => {
   const startingRef = useRef(null);
   const featuresRef = useRef(null);
   const supportRef = useRef(null);
@@ -36,7 +36,7 @@ const FAQPage = () => {
     }
   };
   return (
-    <Layout>
+    <>
       <OakMaxWidth>
         <OakFlex $justifyContent="space-between">
           <OakBox $display={["none", "block"]}>
@@ -849,8 +849,14 @@ const FAQPage = () => {
           </OakBoxCustomMaxWidth>
         </OakFlex>
       </OakMaxWidth>
-    </Layout>
+    </>
   );
 };
 
-export default FAQPage;
+export default function FAQPage() {
+  return (
+    <Layout>
+      <FAQPageContent />
+    </Layout>
+  );
+}

apps/nextjs/src/app/home-page.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { HomePageContent } from "./home-page";
+
+const meta: Meta<typeof HomePageContent> = {
+  title: "Pages/Homepage",
+  component: HomePageContent,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof HomePageContent>;
+
+export const Default: Story = {
+  args: {
+    // NOTE: We're not including mux video links right now
+    pageData: null,
+  },
+};

apps/nextjs/src/app/home-page.tsx

@@ -55,17 +55,25 @@ const OakFlexCustomMaxWidthWithHalfWidth = styled(OakFlexCustomMaxWidth)`
   }
 `;
 
-export default function HomePage({
-  pageData,
-}: {
+type HomePageProps = {
   pageData: HomePageQueryResult | null;
-}) {
+};
+
+export default function HomePage(props: HomePageProps) {
+  return (
+    <Layout>
+      <HomePageContent {...props} />
+    </Layout>
+  );
+}
+
+export function HomePageContent({ pageData }: HomePageProps) {
   const user = useUser();
 
   const { track } = useAnalytics();
 
   return (
-    <Layout>
+    <>
       <HeroContainer>
         <OakFlex
           $flexDirection={["column", "row"]}
@@ -334,7 +342,7 @@ export default function HomePage({
           as possible.
         </OakP>
       </OakFlexWithBackground>
-    </Layout>
+    </>
   );
 }