Skip to content

Commit

Permalink
Upgrade to React 18
Browse files Browse the repository at this point in the history
  • Loading branch information
tassoevan committed Dec 18, 2024
1 parent 83bac32 commit fbd3cfc
Show file tree
Hide file tree
Showing 97 changed files with 619 additions and 1,398 deletions.
5 changes: 1 addition & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,5 @@
"node": "22.9.0",
"yarn": "4.5.1"
},
"packageManager": "[email protected]",
"resolutions": {
"jsdom": "25.0.1"
}
"packageManager": "[email protected]"
}
37 changes: 0 additions & 37 deletions packages/fuselage-hooks/jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,6 @@ import type { Config } from 'jest';

export default {
projects: [
{
displayName: 'React 17',
preset: 'ts-jest',
errorOnDeprecated: true,
testMatch: [
'<rootDir>/src/**/*.spec.{ts,tsx}',
'!**/*.server.spec.{ts,tsx}',
],
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['testing-utils/setup/noErrorsLogged'],
moduleNameMapper: {
'^react($|/.+)': 'react$1',
'^react-dom/client$': 'react-dom$1',
'^react-dom($|/.+)': 'react-dom$1',
},
},
{
displayName: 'React 17 SSR',
preset: 'ts-jest',
errorOnDeprecated: true,
testMatch: ['<rootDir>/src/**/*.server.spec.{ts,tsx}'],
testEnvironment: 'node',
setupFilesAfterEnv: ['testing-utils/setup/noErrorsLogged'],
moduleNameMapper: {
'^react($|/.+)': 'react$1',
'^react-dom/client$': 'react-dom$1',
'^react-dom($|/.+)': 'react-dom$1',
},
},
{
displayName: 'React 18',
preset: 'ts-jest',
Expand All @@ -44,10 +15,6 @@ export default {
'testing-utils/setup/noErrorsLogged',
'<rootDir>/src/jest-setup.ts',
],
moduleNameMapper: {
'^react($|/.+)': 'react18$1',
'^react-dom($|/.+)': 'react-dom18$1',
},
},
{
displayName: 'React 18 SSR',
Expand All @@ -59,10 +26,6 @@ export default {
'testing-utils/setup/noErrorsLogged',
'<rootDir>/src/jest-setup.ts',
],
moduleNameMapper: {
'^react($|/.+)': 'react18$1',
'^react-dom($|/.+)': 'react-dom18$1',
},
},
],
} satisfies Config;
12 changes: 5 additions & 7 deletions packages/fuselage-hooks/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
"@testing-library/react": "~16.1.0",
"@testing-library/user-event": "~14.5.2",
"@types/jest": "~29.5.14",
"@types/react": "~17.0.80",
"@types/react-dom": "~17.0.25",
"@types/react": "~18.3.17",
"@types/react-dom": "~18.3.5",
"@types/resize-observer-browser": "~0.1.11",
"@types/use-sync-external-store": "~0.0.3",
"eslint": "~9.14.0",
Expand All @@ -60,10 +60,8 @@
"lint-all": "workspace:~",
"npm-run-all": "^4.1.5",
"prettier": "~3.3.3",
"react": "^17.0.2",
"react-dom": "~17.0.2",
"react-dom18": "npm:react-dom@18",
"react18": "npm:react@18",
"react": "~18.3.1",
"react-dom": "~18.3.1",
"rimraf": "~5.0.0",
"rollup": "~2.79.2",
"rollup-plugin-terser": "~7.0.2",
Expand All @@ -74,7 +72,7 @@
},
"peerDependencies": {
"@rocket.chat/fuselage-tokens": "*",
"react": "^17.0.2"
"react": "*"
},
"dependencies": {
"use-sync-external-store": "~1.2.0"
Expand Down
4 changes: 4 additions & 0 deletions packages/fuselage-hooks/src/jest-setup.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
import { TextEncoder } from 'node:util';

import { configure } from '@testing-library/react';

configure({ reactStrictMode: true });

global.TextEncoder = TextEncoder;
5 changes: 1 addition & 4 deletions packages/fuselage-hooks/src/testing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
renderHook as _renderHook,
} from '@testing-library/react';
import { createElement } from 'react';
import * as ReactDOMClient from 'react-dom';
import { renderToString } from 'react-dom/server';

type RendererableContainer = Element | Document | DocumentFragment;
Expand Down Expand Up @@ -37,9 +36,7 @@ export function renderHook<
};
}

if ('createRoot' in ReactDOMClient) return _renderHook(render, options);

return _renderHook(render, { ...options, legacyRoot: true });
return _renderHook(render, options);
}

export { act } from '@testing-library/react';
3 changes: 0 additions & 3 deletions packages/fuselage-toastbar/jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,4 @@ export default {
'<rootDir>/jest-setup.ts',
'testing-utils/setup/noErrorsLogged',
],
moduleNameMapper: {
'^react-dom/client$': 'react-dom',
},
} satisfies Config;
10 changes: 5 additions & 5 deletions packages/fuselage-toastbar/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,15 @@
"@testing-library/react": "~16.1.0",
"@testing-library/user-event": "~14.5.2",
"@types/jest": "~29.5.14",
"@types/react": "~17.0.80",
"@types/react-dom": "~17.0.25",
"@types/react": "~18.3.17",
"@types/react-dom": "~18.3.5",
"eslint": "~9.14.0",
"jest": "~29.7.0",
"jest-environment-jsdom": "~29.7.0",
"lint-all": "workspace:~",
"npm-run-all": "^4.1.5",
"prettier": "~3.3.3",
"react-dom": "~17.0.2",
"react-dom": "~18.3.1",
"rimraf": "~3.0.2",
"storybook": "~8.4.7",
"storybook-dark-mode": "~4.0.2",
Expand All @@ -81,8 +81,8 @@
"@rocket.chat/fuselage-hooks": "*",
"@rocket.chat/fuselage-polyfills": "*",
"@rocket.chat/styled": "*",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "*",
"react-dom": "*"
},
"volta": {
"extends": "../../package.json"
Expand Down
2 changes: 1 addition & 1 deletion packages/fuselage-toastbar/src/ToastBarTimed.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const ToastBarTimed = ({
variant={type}
onPointerEnter={() => pause()}
onPointerLeave={() => resume()}
children={message}
children={String(message)}
onClose={dismissToastMessage}
id={id}
time={time}
Expand Down
35 changes: 1 addition & 34 deletions packages/fuselage-toastbar/src/testing.ts
Original file line number Diff line number Diff line change
@@ -1,34 +1 @@
import type {
queries,
Queries,
RenderOptions,
RenderResult,
} from '@testing-library/react';
import { render as renderOriginal } from '@testing-library/react';
import type React from 'react';
import type ReactDOMClient from 'react-dom';

type RendererableContainer = ReactDOMClient.Container;
type HydrateableContainer = Parameters<(typeof ReactDOMClient)['hydrate']>[0];

/**
* Light wrapper around `react-testing-library` to provide a custom render function for transitioning to React 18
*/
export function render<
Q extends Queries = typeof queries,
Container extends RendererableContainer | HydrateableContainer = HTMLElement,
BaseElement extends RendererableContainer | HydrateableContainer = Container,
>(
ui: React.ReactNode,
options: RenderOptions<Q, Container, BaseElement>,
): RenderResult<Q, Container, BaseElement>;
export function render(
ui: React.ReactNode,
options?: Omit<RenderOptions, 'queries'>,
): RenderResult;
export function render(ui: React.ReactNode, options?: any): any {
return renderOriginal(ui, {
legacyRoot: true,
...options,
});
}
export { render } from '@testing-library/react';
1 change: 0 additions & 1 deletion packages/fuselage/jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,5 @@ export default {
],
moduleNameMapper: {
'\\.scss$': 'testing-utils/lazySingletonStyleTagModule',
'^react-dom/client$': 'react-dom',
},
} satisfies Config;
12 changes: 6 additions & 6 deletions packages/fuselage/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@
"@rocket.chat/fuselage-hooks": "*",
"@rocket.chat/fuselage-polyfills": "*",
"@rocket.chat/icons": "*",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "*",
"react-dom": "*",
"react-virtuoso": "1.2.4"
},
"dependencies": {
Expand Down Expand Up @@ -89,8 +89,8 @@
"@types/invariant": "^2.2.37",
"@types/jest": "~29.5.14",
"@types/jest-axe": "~3.5.9",
"@types/react": "~17.0.80",
"@types/react-dom": "~17.0.25",
"@types/react": "~18.3.17",
"@types/react-dom": "~18.3.5",
"autoprefixer": "~10.4.20",
"babel-loader": "~9.2.1",
"caniuse-lite": "~1.0.30001688",
Expand All @@ -115,8 +115,8 @@
"postcss-scss": "~4.0.9",
"postcss-svg": "~3.0.0",
"prettier": "~3.3.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "~18.3.1",
"react-dom": "~18.3.1",
"react-virtuoso": "~3.1.5",
"resolve-url-loader": "~5.0.0",
"rimraf": "^3.0.2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const AnimatedVisibility = (props: AnimatedVisibilityProps) => {
);

const transformFn = useCallback(
(props) => {
(props: any) => {
if (props.onAnimationEnd === undefined) {
props.onAnimationEnd = handleAnimationEnd;
}
Expand Down
3 changes: 2 additions & 1 deletion packages/fuselage/src/components/Banner/Banner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type {
ReactNode,
AllHTMLAttributes,
HTMLAttributeAnchorTarget,
MouseEvent,
} from 'react';
import { useRef, useCallback, useMemo } from 'react';

Expand Down Expand Up @@ -65,7 +66,7 @@ const Banner = ({
}, [onAction]);

const handleCloseButtonClick = useCallback(
(event) => {
(event: MouseEvent) => {
event.stopPropagation();

if (onClose) {
Expand Down
2 changes: 1 addition & 1 deletion packages/fuselage/src/components/Card/Card.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default {
CardCol: CardCol as ComponentType<any>,
CardRow: CardRow as ComponentType<any>,
CardBody: CardBody as ComponentType<any>,
CardControls,
CardControls: CardControls as ComponentType<any>,
},
parameters: {
backgrounds: { default: 'dark' },
Expand Down
10 changes: 9 additions & 1 deletion packages/fuselage/src/components/Flex/Flex.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import type { Meta } from '@storybook/react';
import type { ComponentType } from 'react';

import Tile from '../Tile';

import Flex from '.';
import FlexContainer from './FlexContainer';
import FlexItem from './FlexItem';

export default {
title: 'Layout/Flex',
subcomponents: { 'Flex.Container': Flex.Container, 'Flex.Item': Flex.Item },
subcomponents: {
'FlexContainer': FlexContainer as ComponentType<any>,
'FlexItem': FlexItem as ComponentType<any>,
'Flex.Container': Flex.Container as ComponentType<any>,
'Flex.Item': Flex.Item as ComponentType<any>,
},
} satisfies Meta;

export const example = () => (
Expand Down
2 changes: 1 addition & 1 deletion packages/fuselage/src/components/Flex/FlexContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function FlexContainer({
justifyContent,
}: FlexContainerProps) {
const transformFn = useCallback(
(props) => {
(props: any) => {
if (inline !== undefined && props.display === undefined) {
props.display = inline ? 'inline-flex' : 'flex';
}
Expand Down
2 changes: 1 addition & 1 deletion packages/fuselage/src/components/Flex/FlexItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function FlexItem({
align,
}: FlexItemProps) {
const transformFn = useCallback(
(props) => {
(props: any) => {
if (order !== undefined && props.order === undefined) {
props.order = order;
}
Expand Down
3 changes: 2 additions & 1 deletion packages/fuselage/src/components/InputBox/InputBox.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
import type {
ComponentProps,
FormEvent,
ForwardRefExoticComponent,
ReactNode,
Ref,
Expand Down Expand Up @@ -97,7 +98,7 @@ export const InputBox = forwardRef(function InputBox(
}, []);

Check warning on line 98 in packages/fuselage/src/components/InputBox/InputBox.tsx

View workflow job for this annotation

GitHub Actions / Build and Test

React Hook useLayoutEffect has a missing dependency: 'addon'. Either include it or remove the dependency array

const handleChange = useCallback(
(event) => {
(event: FormEvent<HTMLElement>) => {
if (addon && innerRef.current && innerRef.current.parentElement) {
innerRef.current.parentElement.classList.toggle(
'invalid',
Expand Down
2 changes: 1 addition & 1 deletion packages/fuselage/src/components/Margins/Margins.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const Margins = (props: MarginsProps) => {
} = props;

const transformFn = useCallback(
(props) => {
(props: any) => {
if (all !== undefined && props.margin === undefined) {
props.margin = all;
}
Expand Down
Loading

0 comments on commit fbd3cfc

Please sign in to comment.