@aws-amplify/ui-react-native 1.2.27 → 2.0.0

package/src/Authenticator/Defaults/{SetupTOTP/SetupTOTP.tsx → SetupTotp/SetupTotp.tsx}

@@ -12,20 +12,20 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultSetupTOTPProps } from '../types';
+import { DefaultSetupTotpProps } from '../types';
 import { styles } from './styles';
 
-const COMPONENT_NAME = 'SetupTOTP';
+const COMPONENT_NAME = 'SetupTotp';
 
 const {
   getBackToSignInText,
   getConfirmingText,
   getConfirmText,
-  getSetupTOTPText,
-  getSetupTOTPInstructionsText,
+  getSetupTotpText,
+  getSetupTotpInstructionsText,
 } = authenticatorTextUtil;
 
-const SetupTOTP = ({
+const SetupTotp = ({
   fields,
   handleBlur,
   handleChange,
@@ -35,7 +35,7 @@ const SetupTOTP = ({
   totpSecretCode,
   validationErrors,
   ...rest
-}: DefaultSetupTOTPProps): JSX.Element => {
+}: DefaultSetupTotpProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
@@ -50,14 +50,14 @@ const SetupTOTP = ({
     validationErrors,
   });
 
-  const headerText = getSetupTOTPText();
+  const headerText = getSetupTotpText();
   const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
   const secondaryButtonText = getBackToSignInText();
 
   const body = (
     <>
       <Label style={styles.secretKeyText}>
-        {getSetupTOTPInstructionsText()}
+        {getSetupTotpInstructionsText()}
       </Label>
       <Label selectable style={styles.secretKeyText}>
         {totpSecretCode}
@@ -96,9 +96,9 @@ const SetupTOTP = ({
   );
 };
 
-SetupTOTP.Footer = DefaultFooter;
-SetupTOTP.FormFields = DefaultTextFormFields;
-SetupTOTP.Header = DefaultHeader;
+SetupTotp.Footer = DefaultFooter;
+SetupTotp.FormFields = DefaultTextFormFields;
+SetupTotp.Header = DefaultHeader;
 
-SetupTOTP.displayName = COMPONENT_NAME;
-export default SetupTOTP;
+SetupTotp.displayName = COMPONENT_NAME;
+export default SetupTotp;

package/src/Authenticator/Defaults/SetupTotp/index.ts

@@ -0,0 +1 @@
+export { default as SetupTotp } from './SetupTotp';

package/src/Authenticator/Defaults/{SetupTOTP → SetupTotp}/styles.ts

@@ -1,10 +1,10 @@
 import { StyleSheet, TextStyle } from 'react-native';
 
-export interface SetupTOTPStyle {
+export interface SetupTotpStyle {
   secretKeyText: TextStyle;
 }
 
-export const styles: SetupTOTPStyle = StyleSheet.create({
+export const styles: SetupTotpStyle = StyleSheet.create({
   // TODO: replace with tokens
   secretKeyText: { flexWrap: 'wrap', paddingVertical: 4, marginHorizontal: 8 },
 });

package/src/Authenticator/Defaults/SignIn/SignIn.tsx

@@ -6,6 +6,7 @@ import {
   DefaultTextFormFields,
   DefaultHeader,
   DefaultContent,
+  FederatedProviderButtons,
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
@@ -19,7 +20,9 @@ const SignIn = ({
   handleChange,
   handleSubmit,
   hideSignUp,
-  toResetPassword,
+  socialProviders,
+  toFederatedSignIn,
+  toForgotPassword,
   toSignUp,
   validationErrors,
   ...rest
@@ -50,10 +53,18 @@ const SignIn = ({
   const signInText = getSignInText();
   const signUpText = getSignUpTabText();
 
+  const body = socialProviders ? (
+    <FederatedProviderButtons
+      route="signIn"
+      socialProviders={socialProviders}
+      toFederatedSignIn={toFederatedSignIn}
+    />
+  ) : null;
+
   const buttons = useMemo(() => {
     const forgotPassword = {
       children: forgotPasswordText,
-      onPress: toResetPassword,
+      onPress: toForgotPassword,
     };
     return {
       primary: { children: signInText, disabled, onPress: handleFormSubmit },
@@ -68,13 +79,14 @@ const SignIn = ({
     hideSignUp,
     signInText,
     signUpText,
-    toResetPassword,
+    toForgotPassword,
     toSignUp,
   ]);
 
   return (
     <DefaultContent
       {...rest}
+      body={body}
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}

package/src/Authenticator/Defaults/SignUp/SignUp.tsx

@@ -6,6 +6,7 @@ import {
   DefaultFooter,
   DefaultTextFormFields,
   DefaultHeader,
+  FederatedProviderButtons,
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
@@ -28,6 +29,8 @@ const SignUp = ({
   hasValidationErrors,
   hideSignIn,
   isPending,
+  socialProviders,
+  toFederatedSignIn,
   toSignIn,
   validationErrors,
   ...rest
@@ -53,6 +56,14 @@ const SignUp = ({
     : getCreateAccountText();
   const secondaryButtonText = getSignInTabText();
 
+  const body = socialProviders ? (
+    <FederatedProviderButtons
+      route="signUp"
+      socialProviders={socialProviders}
+      toFederatedSignIn={toFederatedSignIn}
+    />
+  ) : null;
+
   const buttons = useMemo(
     () => ({
       primary: {
@@ -77,6 +88,7 @@ const SignUp = ({
   return (
     <DefaultContent
       {...rest}
+      body={body}
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}

package/src/Authenticator/Defaults/index.ts

@@ -3,8 +3,8 @@ export { ConfirmSignIn } from './ConfirmSignIn';
 export { ConfirmSignUp } from './ConfirmSignUp';
 export { ConfirmVerifyUser } from './ConfirmVerifyUser';
 export { ForceNewPassword } from './ForceNewPassword';
-export { ResetPassword } from './ResetPassword';
-export { SetupTOTP } from './SetupTOTP';
+export { ForgotPassword } from './ForgotPassword';
+export { SetupTotp } from './SetupTotp';
 export { SignIn } from './SignIn';
 export { SignUp } from './SignUp';
 export { VerifyUser } from './VerifyUser';

package/src/Authenticator/Defaults/types.ts

@@ -11,14 +11,14 @@ export interface ConfirmSignUpStyle {}
 export interface ConfirmVerifyUserStyle {}
 export interface ForceNewPasswordStyle {}
 export interface ResetPasswordStyle {}
-export interface SetupTOTPStyle {}
+export interface SetupTotpStyle {}
 export interface SignInStyle {}
 export interface SignUpStyle {}
 export interface VerifyUserStyle {}
 
 export type DefaultComponents<
   FieldType = {},
-  Props = {}
+  Props = {},
 > = AuthenticatorComponentDefaults<FieldType, Props>;
 
 export type DefaultConfirmResetPasswordProps = React.ComponentPropsWithoutRef<
@@ -56,18 +56,18 @@ export type DefaultForceNewPasswordProps = React.ComponentPropsWithoutRef<
   >['ForceNewPassword']
 >;
 
-export type DefaultResetPasswordProps = React.ComponentPropsWithoutRef<
+export type DefaultForgotPasswordProps = React.ComponentPropsWithoutRef<
   DefaultComponents<
     TextFieldOptionsType,
     { style?: ResetPasswordStyle }
-  >['ResetPassword']
+  >['ForgotPassword']
 >;
 
-export type DefaultSetupTOTPProps = React.ComponentPropsWithoutRef<
+export type DefaultSetupTotpProps = React.ComponentPropsWithoutRef<
   DefaultComponents<
     TextFieldOptionsType,
-    { style?: SetupTOTPStyle }
-  >['SetupTOTP']
+    { style?: SetupTotpStyle }
+  >['SetupTotp']
 >;
 
 export type DefaultSignInProps = React.ComponentPropsWithoutRef<
@@ -90,7 +90,7 @@ export type DefaultVerifyUserProps = React.ComponentPropsWithoutRef<
  */
 type OverrideComponents<
   FieldType = {},
-  Props = {}
+  Props = {},
 > = AuthenticatorComponentOverrides<FieldType, Props>;
 
 type ConfirmSignInComponent<P = {}> = OverrideComponents<
@@ -121,12 +121,12 @@ type ForceNewPasswordComponent<P = {}> = OverrideComponents<
 type ResetPasswordComponent<P = {}> = OverrideComponents<
   TextFieldOptionsType,
   { style?: ResetPasswordStyle } & P
->['ResetPassword'];
+>['ForgotPassword'];
 
-type SetupTOTPComponent<P = {}> = OverrideComponents<
+type SetupTotpComponent<P = {}> = OverrideComponents<
   TextFieldOptionsType,
-  { style?: SetupTOTPStyle } & P
->['SetupTOTP'];
+  { style?: SetupTotpStyle } & P
+>['SetupTotp'];
 
 type SignInComponent<P = {}> = OverrideComponents<
   TextFieldOptionsType,
@@ -153,7 +153,7 @@ export interface Components {
   ConfirmVerifyUser?: ConfirmVerifyUserComponent;
   ForceNewPassword?: ForceNewPasswordComponent;
   ResetPassword?: ResetPasswordComponent;
-  SetupTOTP?: SetupTOTPComponent;
+  SetupTotp?: SetupTotpComponent;
   SignIn?: SignInComponent;
   SignUp?: SignUpComponent;
   VerifyUser?: VerifyUserComponent;

package/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { Button, Icon, Label } from '../../../primitives';
 import { usePressableContainerStyles } from '../../../hooks';
 
-import { styles } from './styles';
 import { FederatedProviderButtonProps } from './types';
 
 export default function FederatedProviderButton({
@@ -14,14 +13,13 @@ export default function FederatedProviderButton({
   ...rest
 }: FederatedProviderButtonProps): JSX.Element {
   const pressableStyle = usePressableContainerStyles({
-    containerStyle: styles.container,
     overrideStyle: style,
   });
 
   return (
     <Button {...rest} style={pressableStyle}>
-      <Icon source={source} style={styles.icon} size={20} />
-      <Label style={[styles.label, textStyle]}>{children}</Label>
+      <Icon source={source} size={20} />
+      <Label style={textStyle}>{children}</Label>
     </Button>
   );
 }

package/src/Authenticator/common/FederatedProviderButton/types.ts

@@ -7,7 +7,9 @@ import {
 
 import { ButtonProps } from '../../../primitives';
 
-export interface FederatedProviderButtonProps extends ButtonProps {
+export interface FederatedProviderButtonProps
+  extends Omit<ButtonProps, 'children'> {
+  children?: React.ReactNode;
   source: ImageSourcePropType;
 }
 

package/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx

@@ -1,25 +1,48 @@
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
-import { capitalize } from '@aws-amplify/ui';
+import { signInWithRedirect } from 'aws-amplify/auth';
 
-import { icons } from '../../../assets';
-import { FederatedProviderButton } from '../FederatedProviderButton';
-import { Divider } from '../../../primitives';
+import {
+  SocialProvider,
+  authenticatorTextUtil,
+  capitalize,
+} from '@aws-amplify/ui';
 
-import { styles } from './styles';
+import { Divider } from '../../../primitives';
+import { useTheme } from '../../../theme';
+import { FederatedProviderButton } from '../FederatedProviderButton';
 import { FederatedProviderButtonsProps } from './types';
+import { icons } from '../../../assets';
+import { getThemedStyles } from './styles';
+
+const { getSignInWithFederationText, getOrText } = authenticatorTextUtil;
+
+// use `signInWithRedirect` directly instead of `toFederatedSignIn`
+// exposed on `useAuthenticator` for RN. `@aws-amplify/rtn-web-browser`
+// does not emit an event on federated sign in flow cancellation,
+// preventing the `Authenticator` from updating state and leaving the
+// UI in a "pending" state
+const handleSignInWithRedirect = (
+  provider: 'amazon' | 'apple' | 'facebook' | 'google'
+) => signInWithRedirect({ provider: capitalize(provider) });
 
 export default function FederatedProviderButtons({
+  buttonStyle,
+  dividerLabelStyle,
+  route,
   socialProviders,
-  toFederatedSignIn,
+  style,
 }: FederatedProviderButtonsProps): JSX.Element | null {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
   const providerButtons = useMemo(
     () =>
-      socialProviders?.map((provider) => {
+      socialProviders?.map((provider: SocialProvider) => {
         const providerIconSource = icons[`${provider}Logo`];
 
         const handlePress = () => {
-          toFederatedSignIn({ provider });
+          handleSignInWithRedirect(provider);
         };
 
         return (
@@ -27,19 +50,24 @@ export default function FederatedProviderButtons({
             key={provider}
             onPress={handlePress}
             source={providerIconSource}
-            style={styles.button}
+            style={[themedStyle.button, buttonStyle]}
           >
-            {`Sign In with ${capitalize(provider)}`}
+            {getSignInWithFederationText(route, provider)}
           </FederatedProviderButton>
         );
       }),
-    [socialProviders, toFederatedSignIn]
+    [route, socialProviders, themedStyle, buttonStyle]
   );
 
   return providerButtons?.length ? (
-    <View style={styles.container}>
+    <View
+      style={[themedStyle.container, style]}
+      testID="amplify__federated-provider-buttons"
+    >
       {providerButtons}
-      <Divider labelStyle={styles.text}>Or</Divider>
+      <Divider labelStyle={[themedStyle.dividerLabel, dividerLabelStyle]}>
+        {getOrText()}
+      </Divider>
     </View>
   ) : null;
 }

package/src/Authenticator/common/FederatedProviderButtons/styles.ts

@@ -1,7 +1,22 @@
+import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../../theme';
 import { FederatedProviderButtonStyle } from './types';
 
-export const styles: FederatedProviderButtonStyle = {
-  button: { marginVertical: 8 },
-  container: { paddingVertical: 4 },
-  text: { paddingVertical: 8, textAlign: 'center' },
+export const getThemedStyles = (
+  theme: StrictTheme
+): FederatedProviderButtonStyle => {
+  const { space } = theme.tokens;
+
+  return StyleSheet.create({
+    button: {
+      marginVertical: space.xs,
+    },
+    dividerLabel: {
+      textAlign: 'center',
+    },
+    container: {
+      marginHorizontal: space.small,
+    },
+  });
 };

package/src/Authenticator/common/FederatedProviderButtons/types.ts

@@ -1,16 +1,19 @@
-import { TextStyle, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
 
 import { AuthenticatorMachineContext } from '@aws-amplify/ui-react-core';
 
-// TODO extend from ViewProps, add button style related style props
 export interface FederatedProviderButtonsProps
   extends Pick<
-    AuthenticatorMachineContext,
-    'socialProviders' | 'toFederatedSignIn'
-  > {}
+      AuthenticatorMachineContext,
+      'route' | 'socialProviders' | 'toFederatedSignIn'
+    >,
+    ViewProps {
+  buttonStyle?: StyleProp<ViewStyle>;
+  dividerLabelStyle?: StyleProp<TextStyle>;
+}
 
 export interface FederatedProviderButtonStyle {
   button: ViewStyle;
   container: ViewStyle;
-  text: TextStyle;
+  dividerLabel: TextStyle;
 }

package/src/Authenticator/hooks/useFieldValues/useFieldValues.ts

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Logger } from 'aws-amplify';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { ValidationError } from '@aws-amplify/ui';
 
 import { OnChangeText, TextFieldOnBlur, TypedField } from '../types';

package/src/Authenticator/hooks/useFieldValues/utils.ts

@@ -1,4 +1,4 @@
-import { Logger } from 'aws-amplify';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import {
   authenticatorTextUtil,
   isString,

package/src/Authenticator/types.ts

@@ -7,11 +7,8 @@ import { Components } from './Defaults';
 
 type SupportedAuthenticatorMachineOptions = Omit<
   AuthenticatorMachineOptions,
-  // `socialProviders` not supported as a prop,
-  // feature is not enabled in React Native `Authenticator`
-  | 'socialProviders'
   // `formFields` prop in RWA is to be deprecated
-  | 'formFields'
+  'formFields'
 >;
 
 export interface AuthenticatorProps

package/src/InAppMessaging/components/InAppMessageDisplay/handleMessageLinkAction.ts

@@ -1,8 +1,8 @@
 import { Linking } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { HandleMessageLinkAction } from '@aws-amplify/ui-react-core-notifications';
 
-const logger = new Logger('Notifications.InAppMessaging');
+const logger = new Logger('InAppMessaging');
 
 const handleMessageLinkAction: HandleMessageLinkAction = async (
   url: string

package/src/InAppMessaging/hooks/useMessageImage/useMessageImage.ts

@@ -1,16 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
 import { Image } from 'react-native';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
 import {
-  MessageImage,
-  MessageLayout,
+  InAppMessageImage,
+  InAppMessageLayout,
 } from '@aws-amplify/ui-react-core-notifications';
 
 import { ImageDimensions, ImagePrefetchStatus, UseMessageImage } from './types';
 import { getLayoutImageDimensions, prefetchNetworkImage } from './utils';
 
-const logger = new Logger('Notifications.InAppMessaging');
+const logger = new Logger('InAppMessaging');
 
 /**
  * Handles prefetching and dimension setting for message images
@@ -20,8 +20,8 @@ const logger = new Logger('Notifications.InAppMessaging');
  * @returns message image dimensions and rendering related booleans
  */
 export default function useMessageImage(
-  image: MessageImage | undefined,
-  layout: MessageLayout
+  image: InAppMessageImage | undefined,
+  layout: InAppMessageLayout
 ): UseMessageImage {
   const { src } = image ?? {};
   const shouldPrefetch = !!src;

package/src/InAppMessaging/hooks/useMessageImage/utils.ts

@@ -1,6 +1,6 @@
 import { Image } from 'react-native';
-import { ConsoleLogger as Logger } from '@aws-amplify/core';
-import { MessageLayout } from '@aws-amplify/ui-react-core-notifications';
+import { ConsoleLogger as Logger } from 'aws-amplify/utils';
+import { InAppMessageLayout } from '@aws-amplify/ui-react-core-notifications';
 
 import {
   BANNER_IMAGE_SCREEN_SIZE,
@@ -10,9 +10,9 @@ import {
 } from './constants';
 import { ImageDimensions, ImageLoadingState } from './types';
 
-const logger = new Logger('Notifications.InAppMessaging');
+const logger = new Logger('InAppMessaging');
 
-const inAppMessageImageSizes: Record<MessageLayout, number> = {
+const inAppMessageImageSizes: Record<InAppMessageLayout, number> = {
   BOTTOM_BANNER: BANNER_IMAGE_SCREEN_SIZE,
   MIDDLE_BANNER: BANNER_IMAGE_SCREEN_SIZE,
   TOP_BANNER: BANNER_IMAGE_SCREEN_SIZE,
@@ -41,7 +41,7 @@ export const prefetchNetworkImage = async (
 export const getLayoutImageDimensions = (
   imageHeight: number,
   imageWidth: number,
-  layout: MessageLayout
+  layout: InAppMessageLayout
 ): ImageDimensions => {
   // determine aspect ratio for scaling rendered image
   const aspectRatio = imageWidth / imageHeight;

package/src/InAppMessaging/hooks/useMessageProps/types.ts

@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import {
-  MessageLayout,
+  InAppMessageLayout,
   MessagePayloadStyle,
 } from '@aws-amplify/ui-react-core-notifications';
 
@@ -50,7 +50,7 @@ export interface MessageStyleParams {
   /**
    * message specific layout
    */
-  layout: MessageLayout;
+  layout: InAppMessageLayout;
 
   /**
    * style params to derive resolved style from
@@ -114,7 +114,7 @@ export interface MessageContainerAndWrapperStyle {
   container: [
     defaultStyle: StyleProp<ViewStyle>,
     messageStyle: StyleProp<ViewStyle>,
-    overrideStyle: StyleProp<ViewStyle>
+    overrideStyle: StyleProp<ViewStyle>,
   ];
   wrapper: StyleProp<ViewStyle>;
 }

package/src/InAppMessaging/hooks/useMessageProps/utils.ts

@@ -1,8 +1,8 @@
 import { StyleSheet } from 'react-native';
 import { isFunction } from '@aws-amplify/ui';
 import {
+  InAppMessageLayout,
   MessageComponentBaseProps,
-  MessageLayout,
   MessagePayloadStyle,
 } from '@aws-amplify/ui-react-core-notifications';
 
@@ -87,7 +87,7 @@ export const getComponentButtonStyle = ({
  * @returns {Boolean} boolean indicating whether entire screen should be filled
  */
 
-export const shouldFillDeviceScreen = (layout: MessageLayout): boolean => {
+export const shouldFillDeviceScreen = (layout: InAppMessageLayout): boolean => {
   switch (layout) {
     case 'CAROUSEL':
     case 'FULL_SCREEN': {

package/src/InAppMessaging/index.ts

@@ -1,5 +1,14 @@
+// re-export in-app types from '@aws-amplify/ui-react-core-notifications'
 export {
+  InAppMessage,
+  InAppMessageAction,
+  InAppMessageButton,
+  InAppMessageContent,
+  InAppMessageImage,
+  InAppMessageLayout,
   InAppMessagingProvider,
+  InAppMessageStyle,
+  InAppMessageTextAlign,
   useInAppMessaging,
 } from '@aws-amplify/ui-react-core-notifications';
 

package/src/assets/icons/icons.ts

@@ -1,3 +1,6 @@
+// disable `@typescript-eslint/no-var-requires` for this file
+// .png icons will be removed in favor of .svg icons
+/* eslint-disable @typescript-eslint/no-var-requires */
 import { ImageSourcePropType } from 'react-native';
 
 const icons = {

package/src/hooks/useDeviceOrientation/useDeviceOrientation.ts

@@ -40,7 +40,12 @@ export default function useDeviceOrientation(): {
       if (isFunction(subscription?.remove)) {
         subscription.remove();
       } else {
-        Dimensions.removeEventListener('change', handler);
+        (
+          Dimensions as unknown as {
+            // @todo-migration remove below, no longer needed
+            removeEventListener: (event: 'change', handler: () => void) => void;
+          }
+        ).removeEventListener('change', handler);
       }
     };
   }, []);

package/src/primitives/Button/styles.ts

@@ -18,8 +18,10 @@ export const getThemedStyles = (theme: StrictTheme): ButtonStyles => {
   return StyleSheet.create({
     container: {
       alignItems: 'center',
-      backgroundColor: colors.transparent,
       justifyContent: 'center',
+      flexDirection: 'row',
+      gap: space.small,
+      backgroundColor: colors.transparent,
       paddingVertical: space.small,
       paddingHorizontal: space.medium,
       borderRadius: radii.small,
@@ -31,7 +33,7 @@ export const getThemedStyles = (theme: StrictTheme): ButtonStyles => {
       ...components?.button?.containerDefault,
     },
     containerPrimary: {
-      backgroundColor: colors.brand.primary[80],
+      backgroundColor: colors.primary[80],
       ...components?.button?.containerPrimary,
     },
     containerLink: {