refactor(web): Single theme entry point & ensure Mantine singletons (#…

…5624)

* refactor(web): Single theming entry point and pin @types/react to ensure mantine singleton

* refactor(theme): remove redundant color scheme code

* refactor(routes): rename layout components for clarity

* refactor(auth): simplify conditional rendering in pages

apps/web/src/AppRoutes.tsx

@@ -1,7 +1,8 @@
 import { FeatureFlagsKeysEnum } from '@novu/shared';
 import { Route, Routes } from 'react-router-dom';
-import { AppLayout } from './components/layout/AppLayout';
-import { EnsureOnboardingComplete } from './components/layout/EnsureOnboardingComplete';
+import { PrivatePageLayout } from './components/layout/components/AppLayout';
+import { PublicPageLayout } from './components/layout/components/PublicPageLayout';
+import { EnsureOnboardingComplete } from './components/layout/components/EnsureOnboardingComplete';
 import { ROUTES } from './constants/routes.enum';
 import { useFeatureFlag } from './hooks';
 import { ActivitiesPage } from './pages/activities/ActivitiesPage';
@@ -53,29 +54,31 @@ export const AppRoutes = () => {
 
   return (
     <Routes>
-      <Route path={ROUTES.AUTH_SIGNUP} element={<SignUpPage />} />
-      <Route path={ROUTES.AUTH_LOGIN} element={<LoginPage />} />
-      <Route path={ROUTES.AUTH_RESET_REQUEST} element={<PasswordResetPage />} />
-      <Route path={ROUTES.AUTH_RESET_TOKEN} element={<PasswordResetPage />} />
-      <Route path={ROUTES.AUTH_INVITATION_TOKEN} element={<InvitationPage />} />
-      <Route path={ROUTES.AUTH_APPLICATION} element={<QuestionnairePage />} />
-      <Route
-        path={ROUTES.PARTNER_INTEGRATIONS_VERCEL_LINK_PROJECTS}
-        element={
-          <EnsureOnboardingComplete>
-            <LinkVercelProjectPage type="create" />
-          </EnsureOnboardingComplete>
-        }
-      />
-      <Route
-        path={ROUTES.PARTNER_INTEGRATIONS_VERCEL_LINK_PROJECTS_EDIT}
-        element={
-          <EnsureOnboardingComplete>
-            <LinkVercelProjectPage type="edit" />
-          </EnsureOnboardingComplete>
-        }
-      />
-      <Route element={<AppLayout />}>
+      <Route element={<PublicPageLayout />}>
+        <Route path={ROUTES.AUTH_SIGNUP} element={<SignUpPage />} />
+        <Route path={ROUTES.AUTH_LOGIN} element={<LoginPage />} />
+        <Route path={ROUTES.AUTH_RESET_REQUEST} element={<PasswordResetPage />} />
+        <Route path={ROUTES.AUTH_RESET_TOKEN} element={<PasswordResetPage />} />
+        <Route path={ROUTES.AUTH_INVITATION_TOKEN} element={<InvitationPage />} />
+        <Route path={ROUTES.AUTH_APPLICATION} element={<QuestionnairePage />} />
+        <Route
+          path={ROUTES.PARTNER_INTEGRATIONS_VERCEL_LINK_PROJECTS}
+          element={
+            <EnsureOnboardingComplete>
+              <LinkVercelProjectPage type="create" />
+            </EnsureOnboardingComplete>
+          }
+        />
+        <Route
+          path={ROUTES.PARTNER_INTEGRATIONS_VERCEL_LINK_PROJECTS_EDIT}
+          element={
+            <EnsureOnboardingComplete>
+              <LinkVercelProjectPage type="edit" />
+            </EnsureOnboardingComplete>
+          }
+        />
+      </Route>
+      <Route element={<PrivatePageLayout />}>
         <Route path={ROUTES.WORKFLOWS_DIGEST_PLAYGROUND} element={<TemplatesDigestPlaygroundPage />} />
         <Route path={ROUTES.WORKFLOWS_CREATE} element={<TemplateEditorPage />} />
         <Route path={ROUTES.WORKFLOWS_EDIT_TEMPLATEID} element={<TemplateEditorPage />}>

apps/web/src/Providers.tsx

@@ -1,5 +1,5 @@
 import { ColorSchemeProvider, Loader } from '@mantine/core';
-import { colors } from '@novu/design-system';
+import { colors, ThemeProvider } from '@novu/design-system';
 import { CONTEXT_PATH, SegmentProvider } from '@novu/shared-web';
 import * as Sentry from '@sentry/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -34,9 +34,6 @@ const fallbackDisplay = (
       display: 'grid',
       placeItems: 'center',
       bg: 'surface.page',
-      // Root element may not have loaded so rely on OS
-      _osDark: { bg: 'legacy.BGDark' },
-      _osLight: { bg: 'legacy.BGLight' },
     })}
   >
     <Loader size={64} variant="bars" color={colors.gradientMiddle} />
@@ -48,7 +45,7 @@ const fallbackDisplay = (
  */
 const Providers: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   return (
-    <ColorSchemeProvider colorScheme={'dark'} toggleColorScheme={() => {}}>
+    <ThemeProvider>
       <SegmentProvider>
         <QueryClientProvider client={queryClient}>
           <BrowserRouter basename={CONTEXT_PATH}>
@@ -60,7 +57,7 @@ const Providers: React.FC<PropsWithChildren<{}>> = ({ children }) => {
           </BrowserRouter>
         </QueryClientProvider>
       </SegmentProvider>
-    </ColorSchemeProvider>
+    </ThemeProvider>
   );
 };
 

apps/web/src/components/layout/components/AppLayout.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import * as Sentry from '@sentry/react';
+import { Outlet } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { HeaderNav } from './HeaderNav';
+import { SideNav } from './SideNav';
+import { IntercomProvider } from 'react-use-intercom';
+import { INTERCOM_APP_ID } from '../../../config/index';
+import { EnsureOnboardingComplete } from '../components/EnsureOnboardingComplete';
+import { SpotLight } from '../../utils/Spotlight';
+import { SpotLightProvider } from '../../providers/SpotlightProvider';
+import { useFeatureFlag } from '@novu/shared-web';
+import { FeatureFlagsKeysEnum } from '@novu/shared';
+import { HeaderNav as HeaderNavNew } from './v2/HeaderNav';
+import { MainNav } from '../../nav/MainNav';
+import { FreeTrialBanner } from './FreeTrialBanner';
+
+const AppShell = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  min-width: 1024px;
+`;
+
+const ContentShell = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  overflow: hidden; // for appropriate scroll
+`;
+
+export function PrivatePageLayout() {
+  const [isIntercomOpened, setIsIntercomOpened] = useState(false);
+
+  const isInformationArchitectureEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_INFORMATION_ARCHITECTURE_ENABLED);
+
+  return (
+    <EnsureOnboardingComplete>
+      <SpotLightProvider>
+        <IntercomProvider
+          appId={INTERCOM_APP_ID}
+          onShow={() => setIsIntercomOpened(true)}
+          onHide={() => setIsIntercomOpened(false)}
+        >
+          <Sentry.ErrorBoundary
+            fallback={({ error, resetError, eventId }) => (
+              <>
+                Sorry, but something went wrong. <br />
+                Our team has been notified and we are investigating.
+                <br />
+                <code>
+                  <small style={{ color: 'lightGrey' }}>
+                    Event Id: {eventId}.
+                    <br />
+                    {error.toString()}
+                  </small>
+                </code>
+              </>
+            )}
+          >
+            <SpotLight>
+              <AppShell>
+                {isInformationArchitectureEnabled ? <MainNav /> : <SideNav />}
+                <ContentShell>
+                  <FreeTrialBanner />
+                  {isInformationArchitectureEnabled ? (
+                    <HeaderNavNew />
+                  ) : (
+                    <HeaderNav isIntercomOpened={isIntercomOpened} />
+                  )}
+                  <Outlet />
+                </ContentShell>
+              </AppShell>
+            </SpotLight>
+          </Sentry.ErrorBoundary>
+        </IntercomProvider>
+      </SpotLightProvider>
+    </EnsureOnboardingComplete>
+  );
+}

apps/web/src/components/layout/EnsureOnboardingComplete.tsx → apps/web/src/components/layout/components/EnsureOnboardingComplete.tsx

@@ -1,6 +1,6 @@
 import { Navigate, useLocation } from 'react-router-dom';
-import { ROUTES } from '../../constants/routes.enum';
-import { useBlueprint, useAuthController } from '../../hooks/index';
+import { ROUTES } from '../../../constants/routes.enum';
+import { useBlueprint, useAuthController } from '../../../hooks/index';
 
 export function EnsureOnboardingComplete({ children }: any) {
   useBlueprint();