chore(root): Upgrade all projects to React 18

apps/web/package.json

@@ -30,7 +30,6 @@
     "link:submodules": "pnpm link ../../enterprise/packages/translation-web && pnpm link ../../enterprise/packages/billing-web"
   },
   "dependencies": {
-    "@ant-design/icons": "4.6.2",
     "@babel/plugin-proposal-optional-chaining": "^7.20.7",
     "@babel/plugin-transform-react-display-name": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.23.2",
@@ -71,8 +70,6 @@
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^29.5.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
     "@types/react-table": "^7.7.12",
     "ace-builds": "^1.4.12",
     "antd": "^4.10.0",
@@ -86,7 +83,7 @@
     "eslint-plugin-react-hooks": "^4.4.0",
     "handlebars": "^4.7.7",
     "html-webpack-plugin": "5.5.3",
-    "launchdarkly-react-client-sdk": "^3.0.6",
+    "launchdarkly-react-client-sdk": "^3.3.2",
     "less": "^4.1.0",
     "localforage": "^1.10.0",
     "lodash.capitalize": "^4.2.1",
@@ -97,13 +94,13 @@
     "lodash.set": "^4.3.2",
     "monaco-editor": "^0.45.0",
     "polished": "^4.1.3",
-    "react": "^17.0.1",
+    "react": "^18.3.1",
     "react-ace": "^9.4.3",
     "react-chartjs-2": "^4.0.1",
     "react-color": "^2.19.3",
     "react-css-theme-switcher": "^0.3.0",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.3.1",
     "react-editor-js": "^1.9.0",
     "react-error-boundary": "^3.1.4",
     "react-flow-renderer": "^10.2.2",
@@ -152,7 +149,8 @@
     "@storybook/react": "^7.4.2",
     "@storybook/react-webpack5": "^7.4.2",
     "@testing-library/jest-dom": "^4.2.4",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "eslint-plugin-storybook": "^0.6.13",
     "http-server": "^0.13.0",

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

@@ -54,23 +54,21 @@ export const ListPage = <TRow extends object>({
       <PageHeader title={title} />
       {children}
       {paginationInfo && (
-        <>
-          <StickyFooter>
-            <PaginationWrapper>
-              <Pagination
-                totalItemCount={paginationInfo.totalItemCount}
-                totalPageCount={paginationInfo.totalPageCount}
-                currentPageNumber={paginationInfo.currentPageNumber}
-                pageSize={paginationInfo.pageSize}
-                onPageChange={paginationInfo.onPageChange}
-              >
-                <Pagination.PageSizeSelect onPageSizeChange={paginationInfo.onPageSizeChange} />
-                <Pagination.ControlBar />
-                <Pagination.GoToPageInput label={'Go to'} placeholder={'page'} />
-              </Pagination>
-            </PaginationWrapper>
-          </StickyFooter>
-        </>
+        <StickyFooter>
+          <PaginationWrapper>
+            <Pagination
+              totalItemCount={paginationInfo.totalItemCount}
+              totalPageCount={paginationInfo.totalPageCount}
+              currentPageNumber={paginationInfo.currentPageNumber}
+              pageSize={paginationInfo.pageSize}
+              onPageChange={paginationInfo.onPageChange}
+            >
+              <Pagination.PageSizeSelect onPageSizeChange={paginationInfo.onPageSizeChange} />
+              <Pagination.ControlBar />
+              <Pagination.GoToPageInput label={'Go to'} placeholder={'page'} />
+            </Pagination>
+          </PaginationWrapper>
+        </StickyFooter>
       )}
     </PageContainer>
   );

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

@@ -1,4 +1,4 @@
-import { EyeInvisibleOutlined } from '@ant-design/icons';
+import { IconOutlineVisibilityOff } from '@novu/design-system';
 import styled from '@emotion/styled';
 
 import { colors } from '@novu/design-system';
@@ -7,11 +7,7 @@ import { colors } from '@novu/design-system';
 export const VisibilityOff = ({ onClick }: { onClick: React.MouseEventHandler<HTMLDivElement> }) => {
   return (
     <IconContainer onClick={onClick}>
-      <EyeInvisibleOutlined
-        style={{
-          fontSize: '20px',
-        }}
-      />
+      <IconOutlineVisibilityOff />
     </IconContainer>
   );
 };

apps/web/src/components/workflow/preview/common/PreviewEditOverlay.tsx

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
-import { Flex, Group, Overlay, UnstyledButton, useMantineColorScheme } from '@mantine/core';
+import { Flex, Group, Overlay, OverlayProps, UnstyledButton, useMantineColorScheme } from '@mantine/core';
 import { colors, PencilOutlined, Text } from '@novu/design-system';
 import { StepTypeEnum } from '@novu/shared';
+import { PropsWithChildren } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useBasePath } from '../../../../pages/templates/hooks/useBasePath';
 
@@ -44,7 +45,7 @@ export function PreviewEditOverlay() {
   );
 }
 
-const OverlayStyled = styled(Overlay)`
+const OverlayStyled = styled(Overlay)<PropsWithChildren<OverlayProps>>`
   border: 1px solid ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B30 : colors.BGLight)};
   background: ${({ theme }) => (theme.colorScheme === 'dark' ? 'rgba(41, 41, 51, 0.8)' : 'rgba(255, 255, 255, 0.8)')};
 `;

apps/web/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
 import App from './App';
 import { initializeApp } from './initializeApp';
@@ -31,13 +31,19 @@ import '@novu/novui/styles.css';
     });
   }
 
-  ReactDOM.render(
+  const container = document.getElementById('root');
+  if (!container) {
+    throw new Error("No element 'root' is defined in index.html!");
+  }
+
+  const root = createRoot(container);
+
+  root.render(
     <React.StrictMode>
       <FeatureFlagsProvider>
         <App />
       </FeatureFlagsProvider>
-    </React.StrictMode>,
-    document.getElementById('root')
+    </React.StrictMode>
   );
 })();
 

apps/web/src/pages/auth/components/OAuth.tsx

@@ -8,6 +8,7 @@ import { When } from '../../../components/utils/When';
 import { IS_DOCKER_HOSTED } from '../../../config';
 import { buildGithubLink, buildGoogleLink, buildVercelGithubLink } from './gitHubUtils';
 import { useVercelParams } from '../../../hooks';
+import { PropsWithChildren } from 'react';
 
 export function OAuth({ invitationToken }: { invitationToken?: string | undefined }) {
   const { isFromVercel, code, next, configurationId } = useVercelParams();
@@ -59,16 +60,18 @@ const Container = styled.div`
   justify-content: space-between;
 `;
 
-const OAuthButton = styled(MantineButton)<{
-  component: 'a';
-  my: number;
-  href: string;
-  variant: 'white';
-  fullWidth: boolean;
-  radius: 'md';
-  leftIcon: any;
-  sx: any;
-}>`
+const OAuthButton = styled(MantineButton)<
+  PropsWithChildren<{
+    component: 'a';
+    my: number;
+    href: string;
+    variant: 'white';
+    fullWidth: boolean;
+    radius: 'md';
+    leftIcon: any;
+    sx: any;
+  }>
+>`
   :hover {
     color: ${colors.B40};
   }

apps/web/src/pages/auth/components/PasswordResetForm.tsx

@@ -77,7 +77,7 @@ export function PasswordResetForm({ token }: Props) {
       <form noValidate name="reset-form" onSubmit={handleSubmit(onForgotPassword)}>
         <PasswordRequirementPopover control={control}>
           <PasswordInput
-            error={errors.password?.message}
+            error={errors.password?.message as string}
             mt={20}
             {...register('password', {
               required: 'Please input your password',

apps/web/src/pages/auth/components/PasswordResetRequestForm.tsx

@@ -53,7 +53,7 @@ export function PasswordResetRequestForm({ onSent }: Props) {
     <>
       <form noValidate name="reset-form" onSubmit={handleSubmit(onForgotPassword)}>
         <Input
-          error={errors.email?.message}
+          error={errors.email?.message as string}
           {...register('email', {
             required: 'Please provide an email',
             pattern: { value: /^\S+@\S+\.\S+$/, message: 'Please provide a valid email' },

apps/web/src/pages/integrations/components/ConnectIntegrationForm.tsx

@@ -5,12 +5,11 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { showNotification } from '@mantine/notifications';
 import { useClipboard } from '@mantine/hooks';
 import { Image, useMantineColorScheme, Stack, Alert } from '@mantine/core';
-import { WarningOutlined } from '@ant-design/icons';
 import { ChannelTypeEnum, CredentialsKeyEnum } from '@novu/shared';
 import { useAuth } from '@novu/shared-web';
 import type { IResponseError, ICredentialsDto, IConfigCredentials, ICreateIntegrationBodyDto } from '@novu/shared';
 
-import { Button, colors, Input, Switch, Text, Close, Check, Copy } from '@novu/design-system';
+import { Button, colors, Input, Switch, Text, Close, Check, Copy, IconOutlineWarning } from '@novu/design-system';
 import type { IIntegratedProvider } from '../types';
 import { createIntegration, getWebhookSupportStatus, updateIntegration } from '../../../api/integration';
 import { IntegrationInput } from './IntegrationInput';
@@ -303,7 +302,7 @@ export function ConnectIntegrationForm({
             )}
 
             {checkIntegrationState.isShowAlert && (
-              <Alert icon={<WarningOutlined size={16} />} title="An error occurred!" color="red" mb={30}>
+              <Alert icon={<IconOutlineWarning size={'16'} />} title="An error occurred!" color="red" mb={30}>
                 {checkIntegrationState.errorMsg}
               </Alert>
             )}

apps/web/src/pages/integrations/components/IntegrationSecretTextarea.tsx

@@ -1,9 +1,8 @@
-import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { Grid, UnstyledButton } from '@mantine/core';
 import { IConfigCredentials } from '@novu/shared';
 import { useState } from 'react';
 import { When } from '../../../components/utils/When';
-import { Textarea } from '@novu/design-system';
+import { Textarea, IconOutlineVisibility, IconOutlineVisibilityOff } from '@novu/design-system';
 
 export const IntegrationSecretTextarea = ({
   credential,
@@ -61,10 +60,10 @@ export const IntegrationSecretTextarea = ({
           }}
         >
           <When truthy={hidden}>
-            <EyeOutlined size={20} />
+            <IconOutlineVisibility size={'20'} />
           </When>
           <When truthy={!hidden}>
-            <EyeInvisibleOutlined size={20} />
+            <IconOutlineVisibilityOff size={'20'} />
           </When>
         </UnstyledButton>
       </Grid.Col>

apps/web/src/pages/integrations/components/Modal/ConnectIntegrationForm.tsx

@@ -3,7 +3,6 @@ import { Controller, useForm, useWatch } from 'react-hook-form';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useClipboard } from '@mantine/hooks';
 import { ActionIcon, Alert, Center, Image, Stack, useMantineColorScheme } from '@mantine/core';
-import { WarningOutlined } from '@ant-design/icons';
 import { ChannelTypeEnum, ChatProviderIdEnum, CredentialsKeyEnum, ProvidersIdEnum } from '@novu/shared';
 import type {
   IResponseError,
@@ -15,7 +14,18 @@ import type {
 } from '@novu/shared';
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
-import { Button, colors, Input, shadows, Switch, Text, Close, Check, Copy } from '@novu/design-system';
+import {
+  Button,
+  colors,
+  Input,
+  shadows,
+  Switch,
+  Text,
+  Close,
+  Check,
+  Copy,
+  IconOutlineWarning,
+} from '@novu/design-system';
 
 import type { IIntegratedProvider } from '../../types';
 import { createIntegration, getWebhookSupportStatus, updateIntegration } from '../../../../api/integration';
@@ -370,7 +380,7 @@ export function ConnectIntegrationForm({
           )}
           <Alert
             ref={alertRef}
-            icon={<WarningOutlined size={16} />}
+            icon={<IconOutlineWarning size={'16'} />}
             title="An error occurred!"
             color="red"
             mb={30}

apps/web/src/pages/integrations/components/NovuInAppForm.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
+import { PropsWithChildren, useMemo } from 'react';
 import styled from '@emotion/styled/macro';
-import { Title, Text, Grid, Stack, useMantineColorScheme } from '@mantine/core';
+import { Title, Text, Grid, Stack, useMantineColorScheme, TextProps } from '@mantine/core';
 import { useMutation } from '@tanstack/react-query';
 import { Controller, useForm } from 'react-hook-form';
 import type { IResponseError, ICredentialsDto } from '@novu/shared';
@@ -157,7 +157,7 @@ export const NovuInAppForm = ({
   );
 };
 
-const StyledText = styled(Text)`
+const StyledText = styled(Text)<PropsWithChildren<TextProps>>`
   display: inline-block;
   word-break: normal;
   margin: 0 10px;

apps/web/src/pages/integrations/components/UpdateIntegrationCommonFields.tsx

@@ -49,7 +49,7 @@ export const UpdateIntegrationCommonFields = ({ provider }: { provider: IIntegra
             value={field.value ? field.value : provider?.displayName}
             required
             label="Name"
-            error={errors.name?.message}
+            error={errors.name?.message as string}
             data-test-id="provider-instance-name"
           />
         )}
@@ -70,7 +70,7 @@ export const UpdateIntegrationCommonFields = ({ provider }: { provider: IIntegra
             {...field}
             required
             label="Provider identifier"
-            error={errors.identifier?.message}
+            error={errors.identifier?.message as string}
             rightSection={
               <CopyWrapper onClick={() => identifierClipboard.copy(field.value)}>
                 {identifierClipboard.copied ? <Check /> : <Copy />}

apps/web/src/pages/integrations/components/multi-provider/SelectProviderSidebar.tsx

@@ -306,7 +306,7 @@ const CenterDiv = styled.div`
   line-height: 20px;
 `;
 
-const SelectProviderBodyContainer = styled.form`
+const SelectProviderBodyContainer = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;

apps/web/src/pages/partner-integrations/components/ProjectRow.tsx

@@ -1,12 +1,11 @@
 import { forwardRef, useRef, useEffect } from 'react';
 import { Box, Group, CloseButton } from '@mantine/core';
-import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
 import { useWatch, Control, Controller } from 'react-hook-form';
 import { useIntersection } from '@mantine/hooks';
 import type { FetchNextPageOptions, InfiniteQueryObserverResult } from '@tanstack/react-query';
 import { IOrganizationEntity } from '@novu/shared';
 
-import { Text, Select } from '@novu/design-system';
+import { Text, Select, IconOutlineArrowLeft, IconOutlineArrowRight } from '@novu/design-system';
 import { ProjectLinkFormValues } from './LinkProjectContainer';
 
 type ProjectDataType = {
@@ -110,9 +109,9 @@ export function ProjectRow(props: ProjectRowProps) {
         />
       </Box>
       <Group grow position="apart">
-        <ArrowLeftOutlined />
+        <IconOutlineArrowLeft />
         <Text align="center">links to</Text>
-        <ArrowRightOutlined />
+        <IconOutlineArrowRight />
       </Group>
       <Box>
         <Group position="left" noWrap>