@aws-amplify/ui-react-native 1.0.0 → 1.1.0

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

@@ -0,0 +1,177 @@
+import { Logger } from 'aws-amplify';
+import {
+  isUnverifiedContactMethodType,
+  UnverifiedContactMethodType,
+} from '@aws-amplify/ui';
+import {
+  AuthenticatorLegacyField,
+  AuthenticatorRouteComponentName,
+  isAuthenticatorComponentRouteKey,
+  UseAuthenticator,
+} from '@aws-amplify/ui-react-core';
+
+import {
+  AuthenticatorFieldTypeKey,
+  MachineFieldTypeKey,
+  RadioFieldOptions,
+  TypedField,
+} from '../types';
+import { KEY_ALLOW_LIST } from './constants';
+
+const logger = new Logger('Authenticator');
+
+export const isRadioFieldOptions = (
+  field: TypedField
+): field is RadioFieldOptions => field?.type === 'radio';
+
+export const getSanitizedRadioFields = (
+  fields: TypedField[],
+  componentName: AuthenticatorRouteComponentName
+): TypedField[] => {
+  const values: Record<string, boolean> = {};
+
+  return fields.filter((field) => {
+    if (!isRadioFieldOptions(field)) {
+      logger.warn(
+        `${componentName} component does not support text fields. field with type ${field.type} has been ignored.`
+      );
+      return false;
+    }
+
+    const { name, value } = field;
+
+    if (!value) {
+      logger.warn(
+        'Each radio field must have a value. field has been ignored.'
+      );
+      return false;
+    }
+
+    if (values[value]) {
+      logger.warn(
+        `Each radio field value must be unique. field with duplicate value of ${value} has been ignored.`
+      );
+      return false;
+    }
+
+    if (!isUnverifiedContactMethodType(name)) {
+      logger.warn(
+        `field with name '${name}' has been ignored. Supported values are: ${Object.values(
+          UnverifiedContactMethodType
+        )}.`
+      );
+      return false;
+    }
+
+    // add `value` key to `values`
+    values[value] = true;
+
+    return true;
+  });
+};
+
+export const getSanitizedTextFields = (
+  fields: TypedField[],
+  componentName: AuthenticatorRouteComponentName
+): TypedField[] => {
+  const names: Record<string, boolean> = {};
+  return fields.filter((field) => {
+    if (isRadioFieldOptions(field)) {
+      logger.warn(
+        `${componentName} component does not support radio fields. field has been ignored.`
+      );
+      return false;
+    }
+
+    const { name } = field;
+
+    if (!name) {
+      logger.warn('Each field must have a name. field has been ignored.');
+      return false;
+    }
+
+    if (names[name]) {
+      logger.warn(
+        `Each field name must be unique. field with duplicate name of ${name} has been ignored.`
+      );
+      return false;
+    }
+
+    names[name] = true;
+
+    return true;
+  });
+};
+
+// typed fields utils
+const isKeyAllowed = (key: string) =>
+  KEY_ALLOW_LIST.some((allowedKey) => allowedKey === key);
+
+const isValidMachineFieldType = (
+  type: string | undefined
+): type is MachineFieldTypeKey => type === 'password' || type === 'tel';
+
+const getFieldType = (type: string | undefined): AuthenticatorFieldTypeKey => {
+  if (isValidMachineFieldType(type)) {
+    return type === 'tel' ? 'phone' : type;
+  }
+  return 'default';
+};
+
+/**
+ * Translate machine fields to typed fields
+ *
+ * @param {AuthenticatorLegacyField} field machine field option object
+ * @returns {TypedField} UI field props object
+ */
+export const getTypedField = ({
+  type: machineFieldType,
+  name,
+  ...field
+}: AuthenticatorLegacyField): TypedField => {
+  const type = getFieldType(machineFieldType);
+
+  return Object.entries(field).reduce(
+    (acc, [key, value]) => {
+      // early return if key is not allowed
+      if (!isKeyAllowed(key)) {
+        return acc;
+      }
+
+      // map to `required` prop
+      if (key === 'isRequired' || key === 'required') {
+        // `TypedField` props expects `required` key
+        return { ...acc, required: value as boolean };
+      }
+
+      return { ...acc, [key]: value };
+    },
+    // initialize `acc` with field `name` and `type`
+    { name, type } as TypedField
+  );
+};
+
+/**
+ * @param {AuthenticatorLegacyField[]} fields machine field options array
+ * @returns {TypedField[]} UI field props array
+ */
+export const getTypedFields = (
+  fields: AuthenticatorLegacyField[]
+): TypedField[] => fields?.map(getTypedField);
+
+export function getRouteTypedFields({
+  fields,
+  route,
+}: Pick<UseAuthenticator, 'fields' | 'route'>): TypedField[] {
+  const isComponentRoute = isAuthenticatorComponentRouteKey(route);
+
+  if (!isComponentRoute) {
+    return [];
+  }
+
+  // `VerifyUser` does not require additional updates to the shape of `fields`
+  const isVerifyUserRoute = route === 'verifyUser';
+  const radioFields = fields as TypedField[];
+
+  return isVerifyUserRoute ? radioFields : getTypedFields(fields);
+}

package/src/Authenticator/index.ts

@@ -0,0 +1,6 @@
+export { default as Authenticator } from './Authenticator';
+export { AuthenticatorProps, WithAuthenticatorOptions } from './types';
+export { default as withAuthenticator } from './withAuthenticator';
+
+// re-export shared `Authenticator` exports
+export { useAuthenticator, UseAuthenticator } from '@aws-amplify/ui-react-core';

package/src/Authenticator/types.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { AuthenticatorMachineOptions } from '@aws-amplify/ui';
+
+import { DefaultContainerComponent } from './common';
+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'
+>;
+
+export interface AuthenticatorProps
+  extends SupportedAuthenticatorMachineOptions {
+  children?: React.ReactNode;
+  Container?: DefaultContainerComponent;
+  Footer?: React.ComponentType;
+  Header?: React.ComponentType;
+  components?: Components;
+}
+
+export type WithAuthenticatorOptions = Omit<AuthenticatorProps, 'children'>;

package/src/Authenticator/withAuthenticator.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Authenticator from './Authenticator';
+import { WithAuthenticatorOptions } from './types';
+
+export default function withAuthenticator<Props = {}>(
+  Component: React.ComponentType<Props>,
+  options: WithAuthenticatorOptions = {}
+): (props: Props) => JSX.Element {
+  return function WrappedWithAuthenticator(props: Props) {
+    return (
+      <Authenticator.Provider>
+        <Authenticator {...options}>
+          <Component {...(props as Props & JSX.IntrinsicAttributes)} />
+        </Authenticator>
+      </Authenticator.Provider>
+    );
+  };
+}

package/src/InAppMessaging/components/BannerMessage/__tests__/__snapshots__/BannerMessage.spec.tsx.snap

@@ -72,6 +72,7 @@ exports[`BannerMessage renders a message as expected with an image 1`] = `
         }
       />
       <View
+        accessibilityRole="button"
         accessible={true}
         collapsable={false}
         focusable={true}
@@ -94,16 +95,22 @@ exports[`BannerMessage renders a message as expected with an image 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
-            Object {
-              "alignSelf": "flex-start",
-              "marginLeft": "auto",
-            },
-            undefined,
+            Object {},
+            null,
+            null,
+            Array [
+              Object {
+                "alignSelf": "flex-start",
+                "marginLeft": "auto",
+              },
+              undefined,
+            ],
           ]
         }
         testID="in-app-messaging--close-button"
       >
         <Image
+          accessibilityRole="image"
           source={
             Object {
               "testUri": "../../../src/assets/icons/close.png",
@@ -174,6 +181,7 @@ exports[`BannerMessage renders a message as expected without an image 1`] = `
         }
       />
       <View
+        accessibilityRole="button"
         accessible={true}
         collapsable={false}
         focusable={true}
@@ -196,16 +204,22 @@ exports[`BannerMessage renders a message as expected without an image 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
-            Object {
-              "alignSelf": "flex-start",
-              "marginLeft": "auto",
-            },
-            undefined,
+            Object {},
+            null,
+            null,
+            Array [
+              Object {
+                "alignSelf": "flex-start",
+                "marginLeft": "auto",
+              },
+              undefined,
+            ],
           ]
         }
         testID="in-app-messaging--close-button"
       >
         <Image
+          accessibilityRole="image"
           source={
             Object {
               "testUri": "../../../src/assets/icons/close.png",

package/src/InAppMessaging/components/ModalMessage/__tests__/__snapshots__/ModalMessage.spec.tsx.snap

@@ -38,6 +38,7 @@ exports[`ModalMessage renders a message as expected with an image 1`] = `
       }
     >
       <View
+        accessibilityRole="button"
         accessible={true}
         collapsable={false}
         focusable={true}
@@ -60,16 +61,22 @@ exports[`ModalMessage renders a message as expected with an image 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
-            Object {
-              "alignSelf": "flex-start",
-              "marginLeft": "auto",
-            },
-            undefined,
+            Object {},
+            null,
+            null,
+            Array [
+              Object {
+                "alignSelf": "flex-start",
+                "marginLeft": "auto",
+              },
+              undefined,
+            ],
           ]
         }
         testID="in-app-messaging--close-button"
       >
         <Image
+          accessibilityRole="image"
           source={
             Object {
               "testUri": "../../../src/assets/icons/close.png",
@@ -175,6 +182,7 @@ exports[`ModalMessage renders as expected in landscape mode 1`] = `
         }
       />
       <View
+        accessibilityRole="button"
         accessible={true}
         collapsable={false}
         focusable={true}
@@ -197,17 +205,23 @@ exports[`ModalMessage renders as expected in landscape mode 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
-            Object {
-              "alignSelf": "flex-start",
-              "marginLeft": "auto",
-              "marginRight": 8,
-            },
-            undefined,
+            Object {},
+            null,
+            null,
+            Array [
+              Object {
+                "alignSelf": "flex-start",
+                "marginLeft": "auto",
+                "marginRight": 8,
+              },
+              undefined,
+            ],
           ]
         }
         testID="in-app-messaging--close-button"
       >
         <Image
+          accessibilityRole="image"
           source={
             Object {
               "testUri": "../../../src/assets/icons/close.png",
@@ -269,6 +283,7 @@ exports[`ModalMessage renders as expected in portrait mode 1`] = `
       }
     >
       <View
+        accessibilityRole="button"
         accessible={true}
         collapsable={false}
         focusable={true}
@@ -291,16 +306,22 @@ exports[`ModalMessage renders as expected in portrait mode 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Array [
-            Object {
-              "alignSelf": "flex-start",
-              "marginLeft": "auto",
-            },
-            undefined,
+            Object {},
+            null,
+            null,
+            Array [
+              Object {
+                "alignSelf": "flex-start",
+                "marginLeft": "auto",
+              },
+              undefined,
+            ],
           ]
         }
         testID="in-app-messaging--close-button"
       >
         <Image
+          accessibilityRole="image"
           source={
             Object {
               "testUri": "../../../src/assets/icons/close.png",

package/src/__mocks__/react-native-safe-area-context.ts

@@ -3,4 +3,7 @@ jest.mock('react-native-safe-area-context');
 const SafeAreaProvider = 'SafeAreaProvider';
 const SafeAreaView = 'SafeAreaView';
 
-export { SafeAreaProvider, SafeAreaView };
+// return somewhat arbitrary values, safe area insets of iPhone 13
+const useSafeAreaInsets = jest.fn(() => ({ bottom: 44, top: 47 }));
+
+export { SafeAreaProvider, SafeAreaView, useSafeAreaInsets };

package/src/__tests__/__snapshots__/index.spec.ts.snap

@@ -2,6 +2,17 @@
 
 exports[`@aws-amplify/ui-react-native exports should match snapshot 1`] = `
 Array [
+  "Authenticator",
+  "AuthenticatorProps",
+  "Theme",
+  "ThemeProvider",
+  "UseAuthenticator",
+  "WithAuthenticatorOptions",
+  "defaultDarkModeOverride",
+  "defaultTheme",
+  "useAuthenticator",
+  "useTheme",
+  "withAuthenticator",
   "BannerMessageProps",
   "CarouselMessageProps",
   "FullScreenMessageProps",

package/src/assets/icons/index.ts

@@ -1,9 +1,17 @@
 import { ImageSourcePropType } from 'react-native';
 
 const icons = {
+  amazonLogo: require('./amazonLogo.png') as ImageSourcePropType,
+  appleLogo: require('./appleLogo.png') as ImageSourcePropType,
   checkboxFilled: require('./checkboxFilled.png') as ImageSourcePropType,
   checkboxOutline: require('./checkboxOutline.png') as ImageSourcePropType,
   close: require('./close.png') as ImageSourcePropType,
+  copy: require('./copy.png') as ImageSourcePropType,
+  error: require('./error.png') as ImageSourcePropType,
+  facebookLogo: require('./facebookLogo.png') as ImageSourcePropType,
+  googleLogo: require('./googleLogo.png') as ImageSourcePropType,
+  visibilityOn: require('./visibilityOn.png') as ImageSourcePropType,
+  visibilityOff: require('./visibilityOff.png') as ImageSourcePropType,
 };
 
 export default icons;

package/src/index.ts

@@ -1 +1,16 @@
+export {
+  Authenticator,
+  AuthenticatorProps,
+  useAuthenticator,
+  UseAuthenticator,
+  withAuthenticator,
+  WithAuthenticatorOptions,
+} from './Authenticator';
 export * from './InAppMessaging';
+export {
+  Theme,
+  ThemeProvider,
+  defaultDarkModeOverride,
+  defaultTheme,
+  useTheme,
+} from './theme';

package/src/primitives/Button/Button.tsx

@@ -1,18 +1,63 @@
-import React from 'react';
-import { Pressable, Text } from 'react-native';
+import React, { useCallback, useMemo } from 'react';
+import {
+  Pressable,
+  PressableStateCallbackType,
+  StyleProp,
+  Text,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 
-import { styles } from './styles';
+import { useTheme } from '../../theme';
+import { capitalize } from '../../utils';
+import { getThemedStyles } from './styles';
 import { ButtonProps } from './types';
 
 export default function Button({
+  accessibilityRole = 'button',
   children,
+  disabled,
+  style,
   textStyle,
-  ...pressableProps
+  variant = 'default',
+  ...rest
 }: ButtonProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
+  const pressableStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
+      const pressedStateStyle =
+        typeof style === 'function' ? style({ pressed }) : style;
+
+      return [
+        themedStyle.container,
+        themedStyle[`container${capitalize(variant)}`],
+        disabled ? themedStyle.disabled : null,
+        pressed ? themedStyle.pressed : null,
+        pressedStateStyle,
+      ];
+    },
+    [disabled, style, themedStyle, variant]
+  );
+
+  const buttonTextStyle: TextStyle = useMemo(
+    (): TextStyle => ({
+      ...themedStyle.text,
+      ...themedStyle[`text${capitalize(variant)}`],
+    }),
+    [themedStyle, variant]
+  );
+
   return (
-    <Pressable {...pressableProps}>
+    <Pressable
+      {...rest}
+      accessibilityRole={accessibilityRole}
+      disabled={disabled}
+      style={pressableStyle}
+    >
       {typeof children === 'string' ? (
-        <Text style={[styles.text, textStyle]}>{children}</Text>
+        <Text style={[buttonTextStyle, textStyle]}>{children}</Text>
       ) : (
         children
       )}