Skip to content

Commit

Permalink
chore(root): Upgrade all projects to React 18 (#5641)
Browse files Browse the repository at this point in the history
* build: Update packages w/o peers

* build: Upgrade react & dev deps

* chore: Delete Ant Icons!

* refactor: Use design system icons instead
  • Loading branch information
Joel Anton authored May 31, 2024
1 parent 88a1f41 commit c6e6d58
Show file tree
Hide file tree
Showing 44 changed files with 2,800 additions and 3,228 deletions.
12 changes: 5 additions & 7 deletions apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
32 changes: 15 additions & 17 deletions apps/web/src/components/layout/components/ListPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
8 changes: 2 additions & 6 deletions apps/web/src/components/layout/components/VisibilityOff.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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)')};
`;
14 changes: 10 additions & 4 deletions apps/web/src/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
})();

Expand Down
23 changes: 13 additions & 10 deletions apps/web/src/pages/auth/components/OAuth.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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};
}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/pages/auth/components/PasswordResetForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
)}
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';
Expand Down Expand Up @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/pages/integrations/components/NovuInAppForm.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
)}
Expand All @@ -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 />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -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>
Expand Down
Loading

1 comment on commit c6e6d58

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.