feat: upgrade to react 18 - fix build #2

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 {

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") {

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;
 

packages/react-composition/src/makeComposable.tsx

@@ -37,18 +37,19 @@ const createEmptyRenderer = (name: string) => {
     }[name];
 };
 
-type ComposableProps<TProps> = ComposableFC<TProps> & {
-    children?: React.ReactNode;
-} & React.HTMLAttributes<any>;
-
-export function makeComposable<TProps>(name: string, Component?: React.ComponentType<TProps>) {
+export function makeComposable<TProps>(
+    name: string,
+    Component?: React.ComponentType<React.PropsWithChildren<TProps>>
+) {
     if (!Component) {
         Component = createEmptyRenderer(name);
     }
 
-    const Composable = (props: ComposableProps<TProps>) => {
+    const Composable: ComposableFC<React.PropsWithChildren<TProps>> = props => {
         const parents = useComposableParents();
-        const ComposedComponent = useComponent(Component as React.ComponentType<TProps>);
+        const ComposedComponent = useComponent(
+            Component as React.ComponentType<TProps>
+        ) as ComposableFC<TProps>;
 
         const context = useMemo(() => [...parents, name], [parents, name]);
 

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();
             }

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"

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> {

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();
             }

packages/ui/src/Input/__tests__/Input.test.tsx

@@ -14,10 +14,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

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;

packages/ui/src/RichTextEditor/RichTextEditor.stories.tsx

@@ -10,14 +10,14 @@ import {
 } from "@webiny/storybook-utils/Story";
 import readme from "./README.md";
 
-import { RichTextEditor } from "./index";
+import { RichTextEditor, RichTextEditorValue } from "./index";
 
 const story = storiesOf("Components/RichTextEditor", module);
 
 story.add(
     "usage",
     () => {
-        const onChange = useCallback(data => {
+        const onChange = useCallback((data: RichTextEditorValue) => {
             console.log(data);
         }, []);