feat: upgrade to react 18 - fix build #2 (#3774)

webiny · May 2, 2024 · 4396207 · 4396207
1 parent e7b62b9
commit 4396207
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 13 deletions.
diff --git a/packages/app-cognito-authenticator/src/Authenticator.tsx b/packages/app-cognito-authenticator/src/Authenticator.tsx
@@ -16,9 +16,21 @@ export type AuthState =
     | "confirmSignUp"
     | "forgotPassword";
 
+export interface AuthDataVerified {
+    email?: string;
+    phone_number?: string;
+}
+
+export interface AuthDataUnverified {
+    email?: string;
+    phone_number?: string;
+}
+
 export interface AuthData {
     username?: string;
-    [key: string]: string | null | boolean | undefined;
+    verified?: AuthDataVerified;
+    unverified?: AuthDataUnverified;
+    [key: string]: string | null | boolean | undefined | AuthDataVerified | AuthDataUnverified;
 }
 
 export interface AuthMessage {

diff --git a/packages/app-cognito-authenticator/src/hooks/useRequireNewPassword.ts b/packages/app-cognito-authenticator/src/hooks/useRequireNewPassword.ts
@@ -2,6 +2,7 @@ import { useCallback } from "react";
 import { Auth } from "@aws-amplify/auth";
 import get from "lodash/get";
 import { useAuthenticator } from "./useAuthenticator";
+import { AuthData } from "~/Authenticator";
 
 interface RequireNewPasswordConfirmParams {
     password: string;
@@ -19,7 +20,7 @@ export function useRequireNewPassword(): RequireNewPassword {
     const { authState, authData, changeState } = useAuthenticator();
 
     const checkContact = useCallback(
-        user => {
+        (user: AuthData) => {
             Auth.verifiedContact(user).then(data => {
                 if (data.verified) {
                     changeState("signedIn", user);
@@ -32,7 +33,7 @@ export function useRequireNewPassword(): RequireNewPassword {
     );
 
     const confirm = useCallback(
-        async ({ password, requiredAttributes }) => {
+        async ({ password, requiredAttributes }: RequireNewPasswordConfirmParams) => {
             try {
                 const user = await Auth.completeNewPassword(authData, password, requiredAttributes);
                 if (user.challengeName === "SMS_MFA") {

diff --git a/packages/app-cognito-authenticator/src/hooks/useSignIn.ts b/packages/app-cognito-authenticator/src/hooks/useSignIn.ts
@@ -1,6 +1,7 @@
 import { useCallback, useReducer } from "react";
 import { Auth } from "@aws-amplify/auth";
 import { useAuthenticator } from "./useAuthenticator";
+import { AuthData } from "~/Authenticator";
 
 export interface UseSignInCallableParams {
     username: string;
@@ -29,7 +30,7 @@ export function useSignIn(): UseSignIn {
     const { authState, changeState } = useAuthenticator();
 
     const checkContact = useCallback(
-        user => {
+        (user: AuthData) => {
             Auth.verifiedContact(user).then(data => {
                 if (data.verified) {
                     changeState("signedIn", user);
@@ -42,7 +43,7 @@ export function useSignIn(): UseSignIn {
     );
 
     const signIn = useCallback(
-        async input => {
+        async (input: UseSignInCallableParams) => {
             setState({ loading: true, error: null });
             const { username, password } = input;
 

diff --git a/packages/react-router/src/usePrompt.ts b/packages/react-router/src/usePrompt.ts
@@ -62,7 +62,7 @@ const useBlocker = (blocker: BlockerCallable, when = true) => {
  */
 export const usePrompt = (message: string, when = true) => {
     const blocker = useCallback(
-        tx => {
+        (tx: Transition) => {
             if (window.confirm(message)) {
                 tx.retry();
             }

diff --git a/packages/ui/src/Accordion/AccordionItem.tsx b/packages/ui/src/Accordion/AccordionItem.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties, useCallback, useEffect, useState } from "react";
 import { ListItem, ListItemGraphic, ListItemMeta } from "~/List";
-import Transition from "react-transition-group/Transition";
+import Transition, { TransitionStatus } from "react-transition-group/Transition";
 import { Icon } from "~/Icon";
 import styled from "@emotion/styled";
 import { css } from "emotion";
@@ -67,8 +67,6 @@ const defaultStyle: CSSProperties = {
     overflow: "hidden"
 };
 
-type TransitionStylesState = "entering" | "entered" | "exiting";
-
 const transitionStyles: Record<string, CSSProperties> = {
     entering: {
         opacity: 0,
@@ -200,7 +198,7 @@ const AccordionItemComponent = (props: AccordionItemProps) => {
                 </Actions>
             </ListItem>
             <Transition in={open} timeout={duration}>
-                {(state: TransitionStylesState) => (
+                {(state: TransitionStatus) => (
                     <Content
                         style={{ ...defaultStyle, ...transitionStyles[state] }}
                         className="webiny-ui-accordion-item__content"

diff --git a/packages/ui/src/Dialog/Dialog.tsx b/packages/ui/src/Dialog/Dialog.tsx
@@ -30,6 +30,8 @@ export interface DialogProps extends RmwcDialogProps {
     onClose?: (evt: DialogOnCloseEventT) => void;
 
     preventOutsideDismiss?: boolean;
+
+    children?: React.ReactNode;
 }
 
 export class Dialog extends React.Component<DialogProps> {

diff --git a/packages/ui/src/Input/Input.tsx b/packages/ui/src/Input/Input.tsx
@@ -49,6 +49,9 @@ export type InputProps<TValue = any> = FormComponentProps<TValue> &
         children?: React.ReactNode;
     };
 
+export type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {
+    key?: string;
+};
 /**
  * Use Input component to store short string values, like first name, last name, e-mail etc.
  * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
@@ -126,7 +129,7 @@ export const Input = (props: InputProps) => {
     const { isValid: validationIsValid, message: validationMessage } = validation || {};
 
     const inputOnKeyDown = useCallback(
-        e => {
+        (e: InputOnKeyDownProps) => {
             if (typeof onEnter === "function" && e.key === "Enter") {
                 onEnter();
             }

diff --git a/packages/ui/src/Input/__tests__/Input.test.tsx b/packages/ui/src/Input/__tests__/Input.test.tsx
@@ -15,10 +15,13 @@ function setup(props: SetupProps = {}) {
         onChange: (_: string) => {},
         value: null
     };
+
+    // We cast "as unknown as React.ReactNode" here because renderProp has a "jest.Mock<null, [controllerArg: any]>" type,
+    // but the "Input" component expect React.ReactNode to be the type of the "children" property.
     const renderProp = jest.fn(controllerArg => {
         Object.assign(renderArg, controllerArg);
         return null;
-    });
+    }) as unknown as React.ReactNode;
 
     const onChange = props.onChange
         ? props.onChange

diff --git a/packages/ui/src/Menu/Menu.tsx b/packages/ui/src/Menu/Menu.tsx
@@ -17,9 +17,14 @@ const style = {
     })
 };
 
+// Property "children" of "MenuProps" have type like this because "children" can be passed as a function.
+type MenuPropsChildren =
+    | React.ReactNode
+    | (({ closeMenu }: { closeMenu: () => void }) => React.ReactNode);
+
 type MenuProps = RmwcMenuProps & {
     // One or more MenuItem components.
-    children: React.ReactNode;
+    children: MenuPropsChildren;
 
     // A handler which triggers the menu, eg. button or link.
     handle?: React.ReactElement;