Merge pull request #670 from Orfium/chore/react-upgrade

.storybook/preview.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import ThemeProvider from '../src/components/ThemeProvider';
 import { useThemeSwitch } from '../src/hooks/useThemeSwitch';
+import { ReactFCC } from '../src/utils/types';
 
 const viewPorts = {
   desktop1920: {
@@ -90,7 +91,7 @@ const ThemeSwitcher = () => {
   );
 };
 
-const Wrapper: React.FC = ({ children }) => {
+const Wrapper: ReactFCC = ({ children }) => {
   const themeSwitchState = useThemeSwitch();
   return (
     <div

__mocks__/@tippyjs/react.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
-const Tippy: React.FC<{ content: string }> = props => {
+const Tippy = (props: PropsWithChildren<{ content: string }>) => {
   const { children, content, ...rest } = props;
 
   return (

package.json

@@ -8,14 +8,15 @@
     "@amanda-mitchell/semantic-release-npm-multiple": "^2.8.0",
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.14.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.14.1",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@mdx-js/react": "^1.6.22",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
@@ -41,11 +42,11 @@
     "@types/jest": "^26.0.23",
     "@types/lodash": "^4.14.149",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^17.0.9",
-    "@types/react-dom": "^17.0.6",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@types/react-highlight-words": "^0.16.1",
-    "@types/react-router-dom": "^5.1.5",
-    "@types/react-test-renderer": "^17.0.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-test-renderer": "^18.0.1",
     "@types/recharts": "^1.8.16",
     "@types/styled-components": "^5.1.7",
     "@types/uuid": "^8.3.0",
@@ -75,11 +76,11 @@
     "jest-webpack-resolver": "^0.3.0",
     "lint-staged": "^11.0.0",
     "prettier": "^2.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-test-renderer": "^16.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
     "storybook-addon-designs": "^6.2.1",
     "storybook-addon-pseudo-states": "^1.14.0",
@@ -105,7 +106,7 @@
     "pluralize": "^8.0.0",
     "polished": "^3.4.4",
     "react-fast-compare": "^3.2.0",
-    "react-highlight-words": "^0.17.0",
+    "react-highlight-words": "^0.20.0",
     "react-media": "^2.0.0-rc.1",
     "react-range": "^1.8.12",
     "react-switch": "^6.0.0",
@@ -117,8 +118,8 @@
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "prop-types": "^15.7.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0"
   },

src/components/Avatar/__snapshots__/Avatar.stories.storyshot

@@ -622,7 +622,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-8"
             >
-
               JN
             </div>
           </div>
@@ -643,7 +642,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-8"
             >
-
               +
               2
             </div>
@@ -678,7 +676,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-17"
             >
-
               <span
                 className="emotion-18"
                 onClick={[Function]}
@@ -706,7 +703,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-17"
             >
-
               +
               3
             </div>
@@ -774,7 +770,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-34"
             >
-
               +
               2
             </div>
@@ -820,7 +815,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-41"
             >
-
               JN
             </div>
           </div>
@@ -841,7 +835,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-41"
             >
-
               +
               2
             </div>
@@ -1153,7 +1146,6 @@ exports[`Storyshots Design System/Avatar Avatar with icon 1`] = `
         <div
           className="emotion-2"
         >
-
           <span
             className="emotion-3"
             onClick={[Function]}
@@ -1174,7 +1166,6 @@ exports[`Storyshots Design System/Avatar Avatar with icon 1`] = `
         <div
           className="emotion-5"
         >
-
           <span
             className="emotion-3"
             onClick={[Function]}
@@ -1195,7 +1186,6 @@ exports[`Storyshots Design System/Avatar Avatar with icon 1`] = `
         <div
           className="emotion-8"
         >
-
           <span
             className="emotion-3"
             onClick={[Function]}
@@ -1216,7 +1206,6 @@ exports[`Storyshots Design System/Avatar Avatar with icon 1`] = `
         <div
           className="emotion-11"
         >
-
           <span
             className="emotion-3"
             onClick={[Function]}
@@ -1476,7 +1465,6 @@ exports[`Storyshots Design System/Avatar Avatar with letter 1`] = `
         <div
           className="emotion-2"
         >
-
           JN
         </div>
       </div>
@@ -1490,7 +1478,6 @@ exports[`Storyshots Design System/Avatar Avatar with letter 1`] = `
         <div
           className="emotion-3"
         >
-
           JN
         </div>
       </div>
@@ -1504,7 +1491,6 @@ exports[`Storyshots Design System/Avatar Avatar with letter 1`] = `
         <div
           className="emotion-4"
         >
-
           JN
         </div>
       </div>
@@ -1518,7 +1504,6 @@ exports[`Storyshots Design System/Avatar Avatar with letter 1`] = `
         <div
           className="emotion-5"
         >
-
           JN
         </div>
       </div>

src/components/Breadcrumb/Breadcrumb.tsx

@@ -2,6 +2,7 @@ import isEmpty from 'lodash/isEmpty';
 import uniqueId from 'lodash/uniqueId';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { ReactFCC } from 'utils/types';
 
 import { breadcrumbLinkStyles, breadcrumbStyles } from './Breadcrumb.style';
 import BreadcrumbItem from './BreadcrumbItem/BreadcrumbItem';
@@ -12,10 +13,10 @@ export type Props = {
   data?: BreadcrumbItemData[];
 };
 
-const isLastItem = (dataItems: React.ReactNode[], itemIndex: number) =>
+const isLastItem = (dataItems: (React.ReactNode | BreadcrumbItemData)[], itemIndex: number) =>
   itemIndex === dataItems.length - 1;
 
-const Breadcrumb: React.FC<Props> = ({ children, data = [] }) => {
+const Breadcrumb: ReactFCC<Props> = ({ children, data = [] }) => {
   const passDataToRouterLink = React.useCallback(
     (dataItem: BreadcrumbItemData, index: number) => {
       const { to, label } = dataItem;

src/components/Button/Button.tsx

@@ -3,9 +3,10 @@ import React, { useRef } from 'react';
 import { ButtonProps } from 'utils/common';
 import { TestProps } from 'utils/types';
 
-import ButtonBase, { Props as ButtonBaseProps } from '../ButtonBase/ButtonBase';
 import { buttonSpanStyle, childrenWrapperStyle, iconStyle } from './Button.style';
 import ButtonLoader from './ButtonLoader';
+import ButtonBase, { Props as ButtonBaseProps } from '../ButtonBase/ButtonBase';
+import Icon from '../Icon';
 
 export type Props = ButtonBaseProps & TestProps & onClickProp;
 type onClickProp = { onClick: ClickHandler };
@@ -59,5 +60,4 @@ const Button = React.forwardRef<HTMLButtonElement, Props & ButtonProps>((props,
   );
 });
 Button.displayName = 'Button';
-
 export default Button;

src/components/Button/__snapshots__/Button.stories.storyshot

@@ -254,11 +254,9 @@ exports[`Storyshots Design System/Button Async Button 1`] = `
         >
           <div>
             Button inner text from event: 
-
           </div>
           <div>
             Fake response: 
-
           </div>
         </div>
       </div>
@@ -291,11 +289,9 @@ exports[`Storyshots Design System/Button Async Button 1`] = `
         >
           <div>
             Button inner text from event: 
-
           </div>
           <div>
             Fake response: 
-
           </div>
         </div>
       </div>
@@ -328,11 +324,9 @@ exports[`Storyshots Design System/Button Async Button 1`] = `
         >
           <div>
             Button inner text from event: 
-
           </div>
           <div>
             Fake response: 
-
           </div>
         </div>
       </div>

src/components/ButtonBase/ButtonBase.tsx

@@ -1,14 +1,14 @@
 import { CSSObject } from '@emotion/serialize';
 import React from 'react';
 
+import { buttonBaseStyle } from './ButtonBase.style';
+import { buttonSizes } from './config';
 import { ClickEvent } from '../../hooks/useLoading';
 import { useTypeColorToColorMatch } from '../../hooks/useTypeColorToColorMatch';
 import { ButtonProps } from '../../utils/common';
 import { generateTestDataId } from '../../utils/helpers';
 import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
 import { TestProps } from '../../utils/types';
-import { buttonBaseStyle } from './ButtonBase.style';
-import { buttonSizes } from './config';
 
 export type EventButtonProps = {
   onClick?: (event: ClickEvent) => void;
@@ -21,7 +21,7 @@ export type Props = {
   /** the color of the button based on our colors eg. red-500 */
   color?: string;
   /** This property define the size of the button. Defaults to 'md' */
-  size?: typeof buttonSizes[number];
+  size?: (typeof buttonSizes)[number];
   /** This property will make the button fit to its parent width. Defaults to false */
   block?: boolean;
   /** Property indicating if the component is filled with a color based on the type */
@@ -33,9 +33,9 @@ export type Props = {
   /** An optional boolean to show if the button is icon */
   isIconButton?: boolean;
   /** An optional icon to put on the right of the button */
-  iconRight?: React.Component | JSX.Element | null;
+  iconRight?: React.ReactNode | null;
   /** An optional icon to put on the left of the button */
-  iconLeft?: React.Component | JSX.Element | null;
+  iconLeft?: React.ReactNode | null;
   /** Define if the button is in disabled state */
   disabled?: boolean;
   /** Defines the button type */
@@ -94,7 +94,7 @@ const ButtonBase = React.forwardRef<
         sx,
         childrenCount: React.Children.count(children),
       })}
-      onClick={event => {
+      onClick={(event) => {
         if (onClick) {
           onClick(event);
         }

src/components/ButtonBase/utils.ts

@@ -3,8 +3,8 @@ import { Theme } from 'theme';
 import { mainTypes } from 'theme/palette';
 
 import { ColorShapeFromComponent, getColorFromType } from '../../utils/themeFunctions';
-import { buttonConfig } from './config';
 import { Props } from './ButtonBase';
+import { buttonConfig } from './config';
 
 /**
  * This function defines what background-color to show based on type or color passed

src/components/Card/Card.tsx

@@ -1,5 +1,6 @@
 import { Elevation, Spacing } from 'index';
 import React from 'react';
+import { ReactFCC } from 'utils/types';
 
 import { cardStyle } from './Card.style';
 
@@ -12,7 +13,7 @@ export type Props = {
   radius?: keyof Spacing;
 };
 
-const Card: React.FC<Props> = ({ elevated, transparent = false, radius, children }) => {
+const Card: ReactFCC<Props> = ({ elevated, transparent = false, radius, children }) => {
   return <div css={cardStyle({ elevated, transparent, radius })}>{children}</div>;
 };