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();