Merge pull request #370 from oaknational/rc-20241118-1

build: release candidate

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,25 +29,26 @@ const preview: Preview = {
 };
 
 // Providers not currently used
-// - MockClerkProvider
 // - CookieConsentProvider
 // - DemoProvider
 // - LessonPlanTrackingProvider
 // - DialogProvider
-// - OakThemeProvider
 // - SidebarProvider
 // - ChatModerationProvider
 
 export const decorators: Decorator[] = [
   RadixThemeDecorator,
+  ClerkDecorator,
   (Story) => (
     <>
       {/* 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"]}>
@@ -722,7 +722,7 @@ const FAQPage = () => {
                 the volume of requests that can be made, lessons, and resources
                 that can be generated. If you&apos;re reaching these limits,
                 we&apos;d love to hear from you, and you can{" "}
-                <OakLink href="https://forms.gle/tHsYMZJR367zydsG8">
+                <OakLink href="https://share.hsforms.com/118hyngR-QSS0J7vZEVlRSgbvumd">
                   request a higher limit.
                 </OakLink>
               </OakP>
@@ -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>
+    </>
   );
 }
 

apps/nextjs/src/app/layout.tsx

@@ -20,6 +20,7 @@ import "@/app/theme-config.css";
 import { Providers } from "@/components/AppComponents/Chat//providers";
 import { AnalyticsProvider } from "@/components/ContextProviders/AnalyticsProvider";
 import { CookieConsentProvider } from "@/components/ContextProviders/CookieConsentProvider";
+import { FeatureFlagProvider } from "@/components/ContextProviders/FeatureFlagProvider";
 import FontProvider from "@/components/ContextProviders/FontProvider";
 import { GleapProvider } from "@/components/ContextProviders/GleapProvider";
 import { WebDebuggerPosition } from "@/lib/avo/Avo";
@@ -118,7 +119,13 @@ export default async function RootLayout({
                         }}
                         bootstrappedFeatures={bootstrappedFeatures}
                       >
-                        <GleapProvider>{children}</GleapProvider>
+                        <GleapProvider>
+                          <FeatureFlagProvider
+                            bootstrappedFeatures={bootstrappedFeatures}
+                          >
+                            {children}
+                          </FeatureFlagProvider>
+                        </GleapProvider>
                       </AnalyticsProvider>
                     </CookieConsentProvider>
                   </Providers>