feat: migrate nextjs to rr7

packages/lib/client-only/download-pdf.ts

@@ -1,4 +1,4 @@
-import type { DocumentData } from '@documenso/prisma/client';
+import type { DocumentData } from '@prisma/client';
 
 import { getFile } from '../universal/upload/get-file';
 import { downloadFile } from './download-file';

packages/lib/client-only/hooks/use-analytics.ts

@@ -1,13 +1,9 @@
 import { posthog } from 'posthog-js';
 
-import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
-import {
-  FEATURE_FLAG_GLOBAL_SESSION_RECORDING,
-  extractPostHogConfig,
-} from '@documenso/lib/constants/feature-flags';
+import { extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
 
 export function useAnalytics() {
-  const featureFlags = useFeatureFlags();
+  // const featureFlags = useFeatureFlags();
   const isPostHogEnabled = extractPostHogConfig();
 
   /**
@@ -24,37 +20,54 @@ export function useAnalytics() {
     posthog.capture(event, properties);
   };
 
+  /**
+   * Capture an analytic event.
+   *
+   * @param error The error to capture.
+   * @param properties Properties to attach to the event.
+   */
+  const captureException = (error: Error, properties?: Record<string, unknown>) => {
+    if (!isPostHogEnabled) {
+      return;
+    }
+
+    posthog.captureException(error, properties);
+  };
+
   /**
    * Start the session recording.
    *
    * @param eventFlag The event to check against feature flags to determine whether tracking is enabled.
    */
   const startSessionRecording = (eventFlag?: string) => {
-    const isSessionRecordingEnabled = featureFlags.getFlag(FEATURE_FLAG_GLOBAL_SESSION_RECORDING);
-    const isSessionRecordingEnabledForEvent = Boolean(eventFlag && featureFlags.getFlag(eventFlag));
+    return;
+    // const isSessionRecordingEnabled = featureFlags.getFlag(FEATURE_FLAG_GLOBAL_SESSION_RECORDING);
+    // const isSessionRecordingEnabledForEvent = Boolean(eventFlag && featureFlags.getFlag(eventFlag));
 
-    if (!isPostHogEnabled || !isSessionRecordingEnabled || !isSessionRecordingEnabledForEvent) {
-      return;
-    }
+    // if (!isPostHogEnabled || !isSessionRecordingEnabled || !isSessionRecordingEnabledForEvent) {
+    //   return;
+    // }
 
-    posthog.startSessionRecording();
+    // posthog.startSessionRecording();
   };
 
   /**
    * Stop the current session recording.
    */
   const stopSessionRecording = () => {
-    const isSessionRecordingEnabled = featureFlags.getFlag(FEATURE_FLAG_GLOBAL_SESSION_RECORDING);
+    return;
+    // const isSessionRecordingEnabled = featureFlags.getFlag(FEATURE_FLAG_GLOBAL_SESSION_RECORDING);
 
-    if (!isPostHogEnabled || !isSessionRecordingEnabled) {
-      return;
-    }
+    // if (!isPostHogEnabled || !isSessionRecordingEnabled) {
+    //   return;
+    // }
 
-    posthog.stopSessionRecording();
+    // posthog.stopSessionRecording();
   };
 
   return {
     capture,
+    captureException,
     startSessionRecording,
     stopSessionRecording,
   };

packages/lib/client-only/hooks/use-document-element.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { useCallback } from 'react';
 
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';

packages/lib/client-only/hooks/use-field-item-styles.ts

@@ -1,25 +0,0 @@
-import { useMemo } from 'react';
-
-import type { CombinedStylesKey } from '../../../ui/primitives/document-flow/add-fields';
-import { combinedStyles } from '../../../ui/primitives/document-flow/field-item';
-
-const defaultFieldItemStyles = {
-  borderClass: 'border-field-card-border',
-  activeBorderClass: 'border-field-card-border/80',
-  initialsBGClass: 'text-field-card-foreground/50 bg-slate-900/10',
-  fieldBackground: 'bg-field-card-background',
-};
-
-export const useFieldItemStyles = (color: CombinedStylesKey | null) => {
-  return useMemo(() => {
-    if (!color) return defaultFieldItemStyles;
-
-    const selectedColorVariant = combinedStyles[color];
-    return {
-      activeBorderClass: selectedColorVariant?.borderActive,
-      borderClass: selectedColorVariant?.border,
-      initialsBGClass: selectedColorVariant?.initialsBG,
-      fieldBackground: selectedColorVariant?.fieldBackground,
-    };
-  }, [color]);
-};

packages/lib/client-only/hooks/use-field-page-coords.ts

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import type { Field } from '@prisma/client';
+
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import type { Field } from '@documenso/prisma/client';
 
 export const useFieldPageCoords = (field: Field) => {
   const [coords, setCoords] = useState({

packages/lib/client-only/hooks/use-update-search-params.ts

@@ -1,9 +1,7 @@
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'react-router';
 
 export const useUpdateSearchParams = () => {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   return (params: Record<string, string | number | boolean | null | undefined>) => {
     const nextSearchParams = new URLSearchParams(searchParams?.toString() ?? '');
@@ -16,6 +14,6 @@ export const useUpdateSearchParams = () => {
       }
     });
 
-    router.push(`${pathname}?${nextSearchParams.toString()}`);
+    setSearchParams(nextSearchParams);
   };
 };

packages/lib/client-only/providers/feature-flag.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-
-import {
-  FEATURE_FLAG_POLL_INTERVAL,
-  LOCAL_FEATURE_FLAGS,
-  isFeatureFlagEnabled,
-} from '@documenso/lib/constants/feature-flags';
-import { getAllFlags } from '@documenso/lib/universal/get-feature-flag';
-
-import { TFeatureFlagValue } from './feature-flag.types';
-
-export type FeatureFlagContextValue = {
-  getFlag: (_key: string) => TFeatureFlagValue;
-};
-
-export const FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null);
-
-export const useFeatureFlags = () => {
-  const context = useContext(FeatureFlagContext);
-
-  if (!context) {
-    throw new Error('useFeatureFlags must be used within a FeatureFlagProvider');
-  }
-
-  return context;
-};
-
-export function FeatureFlagProvider({
-  children,
-  initialFlags,
-}: {
-  children: React.ReactNode;
-  initialFlags: Record<string, TFeatureFlagValue>;
-}) {
-  const [flags, setFlags] = useState(initialFlags);
-
-  const getFlag = useCallback(
-    (flag: string) => {
-      if (!isFeatureFlagEnabled()) {
-        return LOCAL_FEATURE_FLAGS[flag] ?? true;
-      }
-
-      return flags[flag] ?? false;
-    },
-    [flags],
-  );
-
-  /**
-   * Refresh the flags every `FEATURE_FLAG_POLL_INTERVAL` amount of time if the window is focused.
-   */
-  useEffect(() => {
-    if (!isFeatureFlagEnabled()) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      if (document.hasFocus()) {
-        void getAllFlags().then((newFlags) => setFlags(newFlags));
-      }
-    }, FEATURE_FLAG_POLL_INTERVAL);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-
-  /**
-   * Refresh the flags when the window is focused.
-   */
-  useEffect(() => {
-    if (!isFeatureFlagEnabled()) {
-      return;
-    }
-
-    const onFocus = () => void getAllFlags().then((newFlags) => setFlags(newFlags));
-
-    window.addEventListener('focus', onFocus);
-
-    return () => {
-      window.removeEventListener('focus', onFocus);
-    };
-  }, []);
-
-  return (
-    <FeatureFlagContext.Provider
-      value={{
-        getFlag,
-      }}
-    >
-      {children}
-    </FeatureFlagContext.Provider>
-  );
-}

packages/lib/client-only/providers/feature-flag.types.ts

@@ -1,10 +0,0 @@
-import { z } from 'zod';
-
-export const ZFeatureFlagValueSchema = z.union([
-  z.boolean(),
-  z.string(),
-  z.number(),
-  z.undefined(),
-]);
-
-export type TFeatureFlagValue = z.infer<typeof ZFeatureFlagValueSchema>;

packages/lib/client-only/providers/i18n-server.tsx

@@ -1,17 +1,12 @@
-import 'server-only';
-
-import { cookies, headers } from 'next/headers';
-
 import type { I18n, Messages } from '@lingui/core';
 import { setupI18n } from '@lingui/core';
-import { setI18n } from '@lingui/react/server';
 
 import {
   APP_I18N_OPTIONS,
   SUPPORTED_LANGUAGE_CODES,
   isValidLanguageCode,
 } from '../../constants/i18n';
-import { extractLocaleData } from '../../utils/i18n';
+import { env } from '../../utils/env';
 import { remember } from '../../utils/remember';
 
 type SupportedLanguages = (typeof SUPPORTED_LANGUAGE_CODES)[number];
@@ -19,7 +14,7 @@ type SupportedLanguages = (typeof SUPPORTED_LANGUAGE_CODES)[number];
 export async function loadCatalog(lang: SupportedLanguages): Promise<{
   [k: string]: Messages;
 }> {
-  const extension = process.env.NODE_ENV === 'development' ? 'po' : 'js';
+  const extension = env('NODE_ENV') === 'development' ? 'po' : 'mjs';
 
   const { messages } = await import(`../../translations/${lang}/web.${extension}`);
 
@@ -71,29 +66,3 @@ export const getI18nInstance = async (lang?: SupportedLanguages | (string & {}))
 
   return instances[lang] ?? instances[APP_I18N_OPTIONS.sourceLang];
 };
-
-/**
- * This needs to be run in all layouts and page server components that require i18n.
- *
- * https://lingui.dev/tutorials/react-rsc#pages-layouts-and-lingui
- */
-export const setupI18nSSR = async () => {
-  const { lang, locales } = extractLocaleData({
-    cookies: cookies(),
-    headers: headers(),
-  });
-
-  // Get and set a ready-made i18n instance for the given language.
-  const i18n = await getI18nInstance(lang);
-
-  // Reactivate the i18n instance with the locale for date and number formatting.
-  i18n.activate(lang, locales);
-
-  setI18n(i18n);
-
-  return {
-    lang,
-    locales,
-    i18n,
-  };
-};

packages/lib/client-only/providers/i18n.client.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 
 import { type Messages, setupI18n } from '@lingui/core';

packages/lib/client-only/providers/session.tsx

@@ -0,0 +1,111 @@
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React from 'react';
+
+import type { Session } from '@prisma/client';
+import { useLocation } from 'react-router';
+
+import { authClient } from '@documenso/auth/client';
+import type { SessionUser } from '@documenso/auth/server/lib/session/session';
+import { type TGetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { trpc } from '@documenso/trpc/client';
+
+export type AppSession = {
+  session: Session;
+  user: SessionUser;
+  teams: TGetTeamsResponse;
+};
+
+interface SessionProviderProps {
+  children: React.ReactNode;
+  initialSession: AppSession | null;
+}
+
+interface SessionContextValue {
+  sessionData: AppSession | null;
+  refreshSession: () => Promise<void>;
+}
+
+const SessionContext = createContext<SessionContextValue | null>(null);
+
+export const useSession = () => {
+  const context = useContext(SessionContext);
+
+  if (!context) {
+    throw new Error('useSession must be used within a SessionProvider');
+  }
+
+  if (!context.sessionData) {
+    throw new Error('Session not found');
+  }
+
+  return {
+    ...context.sessionData,
+    refreshSession: context.refreshSession,
+  };
+};
+
+export const useOptionalSession = () => {
+  const context = useContext(SessionContext);
+
+  if (!context) {
+    throw new Error('useOptionalSession must be used within a SessionProvider');
+  }
+
+  return context;
+};
+
+export const SessionProvider = ({ children, initialSession }: SessionProviderProps) => {
+  const [session, setSession] = useState<AppSession | null>(initialSession);
+
+  const location = useLocation();
+
+  const refreshSession = useCallback(async () => {
+    const newSession = await authClient.getSession();
+
+    if (!newSession.isAuthenticated) {
+      setSession(null);
+      return;
+    }
+
+    const teams = await trpc.team.getTeams.query().catch(() => {
+      // Todo: (RR7) Log
+      return [];
+    });
+
+    setSession({
+      session: newSession.session,
+      user: newSession.user,
+      teams,
+    });
+  }, []);
+
+  useEffect(() => {
+    const onFocus = () => {
+      void refreshSession();
+    };
+
+    window.addEventListener('focus', onFocus);
+
+    return () => {
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [refreshSession]);
+
+  /**
+   * Refresh session in background on navigation.
+   */
+  useEffect(() => {
+    void refreshSession();
+  }, [location.pathname]);
+
+  return (
+    <SessionContext.Provider
+      value={{
+        sessionData: session,
+        refreshSession,
+      }}
+    >
+      {children}
+    </SessionContext.Provider>
+  );
+};

packages/lib/client-only/recipient-type.ts

@@ -1,11 +1,11 @@
-import type { Recipient } from '@documenso/prisma/client';
+import type { Recipient } from '@prisma/client';
 import {
   DocumentDistributionMethod,
   ReadStatus,
   RecipientRole,
   SendStatus,
   SigningStatus,
-} from '@documenso/prisma/client';
+} from '@prisma/client';
 
 export enum RecipientStatusType {
   COMPLETED = 'completed',