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'