refactor(docs): move components out of app

apps/docs/features/auth/auth.client.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { SessionContextProvider } from '@supabase/auth-helpers-react'
+import { createClient } from '@supabase/supabase-js'
+import { useQueryClient } from '@tanstack/react-query'
+import { AuthProvider, useConstant } from 'common'
+import { type PropsWithChildren, useCallback } from 'react'
+import { IS_PLATFORM } from '~/lib/constants'
+import { LOCAL_STORAGE_KEYS, remove } from '~/lib/storage'
+import { useOnLogout } from '~/lib/userAuth'
+
+const AuthContainerInternal = ({ children }: PropsWithChildren) => {
+  const supabase = useConstant(() =>
+    IS_PLATFORM
+      ? createClient(
+          process.env.NEXT_PUBLIC_SUPABASE_URL!,
+          process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+        )
+      : undefined
+  )
+
+  return IS_PLATFORM ? (
+    <SessionContextProvider supabaseClient={supabase!}>
+      <AuthProvider>{children}</AuthProvider>
+    </SessionContextProvider>
+  ) : (
+    <AuthProvider>{children}</AuthProvider>
+  )
+}
+
+/**
+ *
+ * !!! IMPORTANT !!!
+ * Ensure data is cleared on sign out.
+ *
+ */
+const SignOutHandler = ({ children }: PropsWithChildren) => {
+  const queryClient = useQueryClient()
+
+  const cleanUp = useCallback(() => {
+    queryClient.cancelQueries()
+    queryClient.clear()
+
+    Object.keys(LOCAL_STORAGE_KEYS).forEach((key) => {
+      remove('local', LOCAL_STORAGE_KEYS[key])
+    })
+  }, [queryClient])
+
+  useOnLogout(cleanUp)
+
+  return <>{children}</>
+}
+
+const AuthContainer = ({ children }: PropsWithChildren) => (
+  <AuthContainerInternal>
+    <SignOutHandler>{children}</SignOutHandler>
+  </AuthContainerInternal>
+)
+
+export { AuthContainer }

apps/docs/features/data/queryClient.client.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { QueryClientProvider as QueryClientProviderPrimitive } from '@tanstack/react-query'
+import { type PropsWithChildren } from 'react'
+import { useRootQueryClient } from '~/lib/fetch/queryClient'
+
+const QueryClientProvider = ({ children }: PropsWithChildren) => {
+  const queryClient = useRootQueryClient()
+
+  return (
+    <QueryClientProviderPrimitive client={queryClient}>{children}</QueryClientProviderPrimitive>
+  )
+}
+
+export { QueryClientProvider }

apps/docs/features/envs/staging.client.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { type PropsWithChildren, useEffect, useState } from 'react'
+import { BUILD_PREVIEW_HTML, IS_PREVIEW } from '~/lib/constants'
+
+/**
+ * Preview builds don't need to be statically generated to optimize performance.
+ * This (somewhat hacky) way of shortcutting preview builds cuts their build
+ * time and speeds up the feedback loop for previewing docs changes in Vercel.
+ *
+ * This technically breaks the Rules of Hooks to avoid an unnecessary full-app
+ * rerender in prod, but this is fine because IS_PREVIEW will never change on
+ * you within a single build.
+ */
+const ShortcutPreviewBuild = ({ children }: PropsWithChildren) => {
+  if (!BUILD_PREVIEW_HTML && IS_PREVIEW) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isMounted, setIsMounted] = useState(false)
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      setIsMounted(true)
+    }, [])
+
+    return isMounted ? children : null
+  }
+
+  return children
+}
+
+export { ShortcutPreviewBuild }

apps/docs/features/telemetry/telemetry.client.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useTelemetryProps } from 'common'
+import { usePathname } from 'next/navigation'
+import { useCallback, useEffect } from 'react'
+import { useConsent } from 'ui-patterns/ConsentToast'
+import { BASE_PATH, IS_PLATFORM } from '~/lib/constants'
+import { unauthedAllowedPost } from '~/lib/fetch/fetchWrappers'
+
+const useSendPageTelemetryWithConsent = () => {
+  const { hasAcceptedConsent } = useConsent()
+  const telemetryProps = useTelemetryProps()
+
+  const sendPageTelemetry = useCallback(
+    (route: string) => {
+      if (!(IS_PLATFORM && hasAcceptedConsent)) return
+
+      unauthedAllowedPost('/platform/telemetry/page', {
+        body: {
+          referrer: document.referrer,
+          title: document.title,
+          route: `${BASE_PATH}${route}`,
+          ga: {
+            screen_resolution: telemetryProps?.screenResolution,
+            language: telemetryProps?.language,
+            session_id: '',
+          },
+        },
+      }).catch((e) => {
+        console.error('Problem sending telemetry:', e)
+      })
+    },
+    [telemetryProps, hasAcceptedConsent]
+  )
+
+  return sendPageTelemetry
+}
+
+const PageTelemetry = () => {
+  const pathname = usePathname()
+  const sendPageTelemetry = useSendPageTelemetryWithConsent()
+
+  useEffect(() => {
+    if (pathname) {
+      sendPageTelemetry(pathname)
+    }
+  }, [pathname, sendPageTelemetry])
+
+  return null
+}
+
+export { PageTelemetry }

apps/docs/features/ui/helpers.constants.ts

@@ -0,0 +1,3 @@
+const DOCS_CONTENT_CONTAINER_ID = 'docs-content-container'
+
+export { DOCS_CONTENT_CONTAINER_ID }

apps/docs/features/ui/helpers.scroll.client.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import { useEffect } from 'react'
+import { DOCS_CONTENT_CONTAINER_ID } from './helpers.constants'
+
+const useScrollTopOnPageChange = () => {
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (document && pathname) {
+      // Don't scroll on reference pages
+      if (pathname.startsWith('/reference/')) return
+
+      const container = document.getElementById(DOCS_CONTENT_CONTAINER_ID)
+      if (container) container.scrollTop = 0
+      /**
+       * a11y works by default, so no need to specially handle it
+       */
+    }
+  }, [pathname])
+}
+
+/**
+ * Scroll the docs content container to top on page change. Can't use Next.js's
+ * native scroll restoration, because we scroll the content container, not the
+ * document.
+ */
+const ScrollRestoration = () => {
+  useScrollTopOnPageChange()
+  return null
+}
+
+export { ScrollRestoration }

apps/docs/features/ui/theme.client.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { useThemeSandbox } from 'common'
+
+const ThemeSandbox = () => {
+  useThemeSandbox()
+
+  return null
+}
+
+export { ThemeSandbox }

apps/docs/layouts/MainSkeleton.tsx

@@ -2,13 +2,12 @@ import { useTheme } from 'next-themes'
 import Image from 'next/legacy/image'
 import Link from 'next/link'
 import { type CSSProperties, type PropsWithChildren, memo, useEffect } from 'react'
-
 import { cn } from 'ui'
-
 import Footer from '~/components/Navigation/Footer'
 import HomeMenuIconPicker from '~/components/Navigation/NavigationMenu/HomeMenuIconPicker'
 import NavigationMenu, { type MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
+import { DOCS_CONTENT_CONTAINER_ID } from '~/features/ui/helpers.constants'
 import { menuState, useMenuMobileOpen } from '~/hooks/useMenuState'
 
 const levelsData = {
@@ -275,8 +274,8 @@ const Container = memo(function Container({
 
   return (
     <div
-      // #docs-content-container is used by layout to scroll to top
-      id="docs-content-container"
+      // used by layout to scroll to top
+      id={DOCS_CONTENT_CONTAINER_ID}
       className={cn(
         // 'overflow-x-auto',
         'w-full transition-all ease-out',

apps/docs/lib/constants.ts

@@ -1,9 +1,10 @@
-export const BUILD_PREVIEW_HTML = process.env.NEXT_PUBLIC_BUILD_PREVIEW_HTML === 'true'
-export const IS_PLATFORM = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
-export const IS_PREVIEW = process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
-export const LOCAL_SUPABASE = process.env.NEXT_PUBLIC_LOCAL_SUPABASE === 'true'
 export const API_URL = (
   process.env.NODE_ENV === 'development'
     ? process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080'
     : process.env.NEXT_PUBLIC_API_URL
 ).replace(/\/platform$/, '')
+export const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/docs'
+export const BUILD_PREVIEW_HTML = process.env.NEXT_PUBLIC_BUILD_PREVIEW_HTML === 'true'
+export const IS_PLATFORM = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
+export const IS_PREVIEW = process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
+export const LOCAL_SUPABASE = process.env.NEXT_PUBLIC_LOCAL_SUPABASE === 'true'