Skip to content

Commit

Permalink
refactor(web): Single theme entry point & ensure Mantine singletons (#…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
rifont authored May 22, 2024
1 parent 7624ab3 commit c38858b
Show file tree
Hide file tree
Showing 21 changed files with 548 additions and 836 deletions.
53 changes: 28 additions & 25 deletions apps/web/src/AppRoutes.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 />}>
Expand Down
9 changes: 3 additions & 6 deletions apps/web/src/Providers.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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} />
Expand All @@ -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}>
Expand All @@ -60,7 +57,7 @@ const Providers: React.FC<PropsWithChildren<{}>> = ({ children }) => {
</BrowserRouter>
</QueryClientProvider>
</SegmentProvider>
</ColorSchemeProvider>
</ThemeProvider>
);
};

Expand Down
84 changes: 0 additions & 84 deletions apps/web/src/components/layout/AppLayout.tsx

This file was deleted.

81 changes: 81 additions & 0 deletions apps/web/src/components/layout/components/AppLayout.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
73 changes: 0 additions & 73 deletions apps/web/src/components/layout/components/AuthLayout.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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();
Expand Down
File renamed without changes.
Loading

0 comments on commit c38858b

Please sign in to comment.