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

package/src/Authenticator/Defaults/types.ts

@@ -0,0 +1,146 @@
+import {
+  AuthenticatorComponentOverrides,
+  AuthenticatorComponentDefaults,
+} from '@aws-amplify/ui-react-core';
+import { RadioFieldOptions, TextFieldOptionsType } from '../hooks';
+
+// TODO fill these interfaces with custom style override types
+export interface ConfirmResetPasswordStyle {}
+export interface ConfirmSignInStyle {}
+export interface ConfirmSignUpStyle {}
+export interface ConfirmVerifyUserStyle {}
+export interface ForceNewPasswordStyle {}
+export interface ResetPasswordStyle {}
+export interface SetupTOTPStyle {}
+export interface SignInStyle {}
+export interface SignUpStyle {}
+export interface VerifyUserStyle {}
+
+export type DefaultComponents<
+  FieldType = {},
+  Props = {}
+> = AuthenticatorComponentDefaults<FieldType, Props>;
+
+export type DefaultConfirmResetPasswordComponent = DefaultComponents<
+  TextFieldOptionsType,
+  { style?: ConfirmResetPasswordStyle }
+>['ConfirmResetPassword'];
+
+export type DefaultConfirmSignInComponent = DefaultComponents<
+  TextFieldOptionsType,
+  { style?: ConfirmSignInStyle }
+>['ConfirmSignIn'];
+
+export type DefaultConfirmSignUpComponent = DefaultComponents<
+  TextFieldOptionsType,
+  { style?: ConfirmSignUpStyle }
+>['ConfirmSignUp'];
+
+export type DefaultConfirmVerifyUserComponent = DefaultComponents<
+  TextFieldOptionsType,
+  { style?: ConfirmVerifyUserStyle }
+>['ConfirmVerifyUser'];
+
+export type DefaultForceNewPasswordComponent = DefaultComponents<
+  TextFieldOptionsType,
+  { style?: ForceNewPasswordStyle }
+>['ForceNewPassword'];
+
+export type DefaultResetPasswordComponent = DefaultComponents<
+  TextFieldOptionsType,
+  { style?: ResetPasswordStyle }
+>['ResetPassword'];
+
+export type DefaultSetupTOTPComponent = DefaultComponents<
+  TextFieldOptionsType,
+  { style?: SetupTOTPStyle }
+>['SetupTOTP'];
+
+export type DefaultSignInComponent = DefaultComponents<
+  TextFieldOptionsType,
+  { style?: SignInStyle }
+>['SignIn'];
+
+export type DefaultSignUpComponent = DefaultComponents<
+  TextFieldOptionsType,
+  { style?: SignUpStyle }
+>['SignUp'];
+
+export type DefaultVerifyUserComponent = DefaultComponents<
+  RadioFieldOptions,
+  { style?: VerifyUserStyle }
+>['VerifyUser'];
+
+/**
+ * Custom Authenticator components
+ */
+type OverrideComponents<
+  FieldType = {},
+  Props = {}
+> = AuthenticatorComponentOverrides<FieldType, Props>;
+
+type ConfirmSignInComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: ConfirmSignInStyle } & P
+>['ConfirmSignIn'];
+
+type ConfirmSignUpComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: ConfirmSignUpStyle } & P
+>['ConfirmSignUp'];
+
+type ConfirmResetPasswordComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: ConfirmResetPasswordStyle } & P
+>['ConfirmResetPassword'];
+
+type ConfirmVerifyUserComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: ConfirmVerifyUserStyle } & P
+>['ConfirmVerifyUser'];
+
+type ForceNewPasswordComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: ForceNewPasswordStyle } & P
+>['ForceNewPassword'];
+
+type ResetPasswordComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: ResetPasswordStyle } & P
+>['ResetPassword'];
+
+type SetupTOTPComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: SetupTOTPStyle } & P
+>['SetupTOTP'];
+
+type SignInComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: SignInStyle } & P
+>['SignIn'];
+
+type SignUpComponent<P = {}> = OverrideComponents<
+  TextFieldOptionsType,
+  { style?: SignUpStyle } & P
+>['SignUp'];
+
+type VerifyUserComponent<P = {}> = OverrideComponents<
+  RadioFieldOptions,
+  { style?: VerifyUserStyle } & P
+>['VerifyUser'];
+
+/**
+ * Override `Authenticator` components param
+ */
+export interface Components {
+  ConfirmSignIn?: ConfirmSignInComponent;
+  ConfirmSignUp?: ConfirmSignUpComponent;
+  ConfirmResetPassword?: ConfirmResetPasswordComponent;
+  ConfirmVerifyUser?: ConfirmVerifyUserComponent;
+  ForceNewPassword?: ForceNewPasswordComponent;
+  ResetPassword?: ResetPasswordComponent;
+  SetupTOTP?: SetupTOTPComponent;
+  SignIn?: SignInComponent;
+  SignUp?: SignUpComponent;
+  VerifyUser?: VerifyUserComponent;
+}

package/src/Authenticator/__tests__/Authenticator.spec.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import * as UIReactCoreModule from '@aws-amplify/ui-react-core';
+import {
+  AuthenticatorMachineContext,
+  UseAuthenticator,
+} from '@aws-amplify/ui-react-core';
+
+import { Authenticator } from '..';
+
+jest.mock('aws-amplify');
+jest.mock('@aws-amplify/ui-react-core');
+
+const CHILD_TEST_ID = 'child-test-id';
+const CHILD_CONTENT = 'Test Children';
+
+const CONTAINER_TEST_ID = 'container-test-id';
+const FOOTER_TEST_ID = 'footer-test-id';
+const HEADER_TEST_ID = 'header-test-id';
+
+function TestChildren() {
+  return <Text testID={CHILD_TEST_ID}>{CHILD_CONTENT}</Text>;
+}
+const TestComponent = () => {
+  return null;
+};
+
+function Container({ children }: { children: React.ReactNode }) {
+  return <View testID={CONTAINER_TEST_ID}>{children}</View>;
+}
+
+function Footer() {
+  return <View testID={FOOTER_TEST_ID} />;
+}
+
+function Header() {
+  return <View testID={HEADER_TEST_ID} />;
+}
+
+const useAuthenticatorInitMachineSpy = jest.spyOn(
+  UIReactCoreModule,
+  'useAuthenticatorInitMachine'
+);
+const useAuthenticatorSpy = jest.spyOn(UIReactCoreModule, 'useAuthenticator');
+const useAuthenticatorRouteSpy = jest.spyOn(
+  UIReactCoreModule,
+  'useAuthenticatorRoute'
+);
+
+type MockSelectorParam =
+  | ((
+      context: AuthenticatorMachineContext
+    ) => AuthenticatorMachineContext[keyof AuthenticatorMachineContext][])
+  | undefined;
+
+describe('Authenticator', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    useAuthenticatorRouteSpy.mockReturnValue({
+      Component: TestComponent as any,
+      props: {} as any,
+    });
+  });
+
+  it('behaves as expected in the happy path', () => {
+    const mockUseAuthenticator = (cb: MockSelectorParam) =>
+      cb?.({
+        route: 'signIn',
+      } as unknown as AuthenticatorMachineContext)[0] as unknown as UseAuthenticator;
+    useAuthenticatorSpy.mockImplementation(mockUseAuthenticator);
+
+    const { toJSON } = render(<Authenticator />);
+
+    expect(useAuthenticatorInitMachineSpy).toHaveBeenCalledTimes(1);
+    expect(useAuthenticatorSpy).toHaveBeenCalledTimes(1);
+    expect(useAuthenticatorSpy).toHaveBeenCalledWith(expect.any(Function));
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each(['authenticated', 'signOut'])(
+    'handles the %s route as expected with children',
+    (route) => {
+      useAuthenticatorSpy.mockImplementation(
+        () => ({ route } as unknown as UseAuthenticator)
+      );
+
+      const { getByTestId, toJSON } = render(
+        <Authenticator>
+          <TestChildren />
+        </Authenticator>
+      );
+
+      const children = getByTestId(CHILD_TEST_ID);
+
+      expect(children.type).toBe('Text');
+      expect(children.props.children).toBe(CHILD_CONTENT);
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it.each(['authenticated', 'signOut'])(
+    'handles the %s route as expected without children',
+    (route) => {
+      useAuthenticatorSpy.mockImplementation(
+        () => ({ route } as unknown as UseAuthenticator)
+      );
+
+      const { container } = render(<Authenticator />);
+
+      expect(container.instance).toBeNull();
+    }
+  );
+
+  it('renders with custom slot components as expected', () => {
+    useAuthenticatorSpy.mockReturnValueOnce({
+      route: 'signIn',
+    } as unknown as UseAuthenticator);
+
+    const { getByTestId, toJSON } = render(
+      <Authenticator Container={Container} Footer={Footer} Header={Header} />
+    );
+
+    expect(getByTestId(CONTAINER_TEST_ID)).toBeDefined();
+    expect(getByTestId(FOOTER_TEST_ID)).toBeDefined();
+    expect(getByTestId(HEADER_TEST_ID)).toBeDefined();
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/Authenticator/__tests__/__snapshots__/Authenticator.spec.tsx.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Authenticator behaves as expected in the happy path 1`] = `
+<SafeAreaProvider>
+  <View
+    onLayout={[Function]}
+    style={
+      Array [
+        Array [
+          Object {
+            "alignContent": "center",
+            "backgroundColor": "hsl(0, 0%, 100%)",
+            "flex": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+        Object {
+          "paddingBottom": 0,
+        },
+      ]
+    }
+  >
+    <RCTScrollView
+      alwaysBounceVertical={false}
+      contentContainerStyle={
+        Array [
+          Object {
+            "alignContent": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+            "paddingBottom": 44,
+            "paddingLeft": undefined,
+            "paddingRight": undefined,
+            "paddingTop": 47,
+          },
+          undefined,
+        ]
+      }
+      keyboardShouldPersistTaps="handled"
+      style={
+        Array [
+          Object {},
+          undefined,
+        ]
+      }
+    >
+      <View>
+        <View
+          style={
+            Object {
+              "marginHorizontal": 16,
+            }
+          }
+        />
+      </View>
+    </RCTScrollView>
+  </View>
+</SafeAreaProvider>
+`;
+
+exports[`Authenticator handles the authenticated route as expected with children 1`] = `
+<Text
+  testID="child-test-id"
+>
+  Test Children
+</Text>
+`;
+
+exports[`Authenticator handles the signOut route as expected with children 1`] = `
+<Text
+  testID="child-test-id"
+>
+  Test Children
+</Text>
+`;
+
+exports[`Authenticator renders with custom slot components as expected 1`] = `
+<SafeAreaProvider>
+  <View
+    testID="container-test-id"
+  >
+    <View
+      testID="header-test-id"
+    />
+    <View
+      style={
+        Object {
+          "marginHorizontal": 16,
+        }
+      }
+    />
+    <View
+      testID="footer-test-id"
+    />
+  </View>
+</SafeAreaProvider>
+`;

package/src/Authenticator/__tests__/__snapshots__/withAuthenticator.spec.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`withAuthenticator renders as expected 1`] = `
+<SafeAreaProvider>
+  <View
+    onLayout={[Function]}
+    style={
+      Array [
+        Array [
+          Object {
+            "alignContent": "center",
+            "backgroundColor": "hsl(0, 0%, 100%)",
+            "flex": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+        Object {
+          "paddingBottom": 0,
+        },
+      ]
+    }
+  >
+    <RCTScrollView
+      alwaysBounceVertical={false}
+      contentContainerStyle={
+        Array [
+          Object {
+            "alignContent": "center",
+            "flexGrow": 1,
+            "justifyContent": "center",
+            "paddingBottom": 44,
+            "paddingLeft": undefined,
+            "paddingRight": undefined,
+            "paddingTop": 47,
+          },
+          undefined,
+        ]
+      }
+      keyboardShouldPersistTaps="handled"
+      style={
+        Array [
+          Object {},
+          undefined,
+        ]
+      }
+    >
+      <View>
+        <View
+          style={
+            Object {
+              "marginHorizontal": 16,
+            }
+          }
+        />
+      </View>
+    </RCTScrollView>
+  </View>
+</SafeAreaProvider>
+`;
+
+exports[`withAuthenticator renders children when route is authenticated 1`] = `
+<Text
+  testID="child-test-id"
+>
+  Test Children
+</Text>
+`;

package/src/Authenticator/__tests__/withAuthenticator.spec.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import * as UIReactCoreModule from '@aws-amplify/ui-react-core';
+import {
+  AuthenticatorMachineContext,
+  UseAuthenticator,
+} from '@aws-amplify/ui-react-core';
+
+import { withAuthenticator } from '..';
+
+const CHILD_TEST_ID = 'child-test-id';
+const CHILD_CONTENT = 'Test Children';
+
+function TestChildren() {
+  return <Text testID={CHILD_TEST_ID}>{CHILD_CONTENT}</Text>;
+}
+const TestComponent = () => {
+  return null;
+};
+
+const TestApp = withAuthenticator(TestChildren);
+
+const useAuthenticatorSpy = jest.spyOn(UIReactCoreModule, 'useAuthenticator');
+const useAuthenticatorRouteSpy = jest.spyOn(
+  UIReactCoreModule,
+  'useAuthenticatorRoute'
+);
+
+type MockSelectorParam =
+  | ((
+      context: AuthenticatorMachineContext
+    ) => AuthenticatorMachineContext[keyof AuthenticatorMachineContext][])
+  | undefined;
+
+describe('withAuthenticator', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    useAuthenticatorRouteSpy.mockReturnValue({
+      Component: TestComponent as any,
+      props: {} as any,
+    });
+  });
+
+  it('renders as expected', () => {
+    const mockUseAuthenticator = (cb: MockSelectorParam) =>
+      cb?.({
+        route: 'signIn',
+      } as unknown as AuthenticatorMachineContext)[0] as unknown as UseAuthenticator;
+    useAuthenticatorSpy.mockImplementation(mockUseAuthenticator);
+
+    const { toJSON, queryByTestId } = render(<TestApp />);
+
+    expect(queryByTestId(CHILD_TEST_ID)).toBeNull();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders children when route is authenticated', () => {
+    useAuthenticatorSpy.mockImplementation(
+      () =>
+        ({
+          route: 'authenticated',
+        } as unknown as UIReactCoreModule.UseAuthenticator)
+    );
+
+    const { toJSON, getByTestId } = render(<TestApp />);
+
+    expect(getByTestId(CHILD_TEST_ID)).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from 'react';
+import { KeyboardAvoidingView, ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useDeviceOrientation } from '../../../hooks';
+import { useTheme } from '../../../theme';
+import { platform } from '../../../utils';
+
+import { getThemedStyles } from './styles';
+import { ContainerProps } from './types';
+
+// prevent bounce when `ScrollView` content is less than height of screnn
+const ALWAYS_BOUNCE_VERTICAL = false;
+const BEHAVIOR = platform.IS_IOS ? 'padding' : 'height';
+
+// prevent keyboard dismiss when press is handled by `ScrollView` children,
+// otherwise dismiss
+const KEYBOARD_SHOULD_PERSIST_TAPS = 'handled';
+
+// TEMPORARY: value to prevent initial `TextField` from being pushed too high
+// in default use case
+const KEYBOARD_VERTICAL_OFFSET = platform.IS_IOS ? -160 : -80;
+
+export default function DefaultContainer({
+  alwaysBounceVertical = ALWAYS_BOUNCE_VERTICAL,
+  behavior = BEHAVIOR,
+  children,
+  keyboardAvoidingViewStyle,
+  keyboardShouldPersistTaps = KEYBOARD_SHOULD_PERSIST_TAPS,
+  keyboardVerticalOffset,
+  scrollViewContentContainerStyle,
+  style,
+  ...rest
+}: ContainerProps): JSX.Element | null {
+  const theme = useTheme();
+  const { isPortraitMode } = useDeviceOrientation();
+  const insets = useSafeAreaInsets();
+
+  const verticalOffset =
+    keyboardVerticalOffset ?? isPortraitMode
+      ? KEYBOARD_VERTICAL_OFFSET
+      : undefined;
+
+  const themedStyle = useMemo(() => {
+    const { bottom, left, right, top } = insets;
+    return getThemedStyles(theme, {
+      paddingBottom: bottom,
+      paddingLeft: left,
+      paddingRight: right,
+      paddingTop: top,
+    });
+  }, [insets, theme]);
+
+  return (
+    <KeyboardAvoidingView
+      behavior={behavior}
+      keyboardVerticalOffset={verticalOffset}
+      style={[themedStyle.keyboardAvoidingView, keyboardAvoidingViewStyle]}
+    >
+      <ScrollView
+        {...rest}
+        alwaysBounceVertical={alwaysBounceVertical}
+        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+        contentContainerStyle={[
+          themedStyle.scrollViewContentContainer,
+          scrollViewContentContainerStyle,
+        ]}
+        style={[themedStyle.scrollView, style]}
+      >
+        {children}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

package/src/Authenticator/common/DefaultContainer/InnerContainer.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../../../theme';
+import { getInnerContainerStyles } from './styles';
+import { ContainerProps } from './types';
+
+export default function InnerContainer({
+  children,
+  ...rest
+}: ContainerProps): JSX.Element | null {
+  const theme = useTheme();
+
+  const themedStyle = getInnerContainerStyles(theme);
+  return (
+    <View {...rest} style={themedStyle.container}>
+      {children}
+    </View>
+  );
+}

package/src/Authenticator/common/DefaultContainer/__tests__/DefaultContainer.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { DefaultContainer } from '..';
+import { Button } from '../../../../primitives/Button';
+
+describe('DefaultContainer', () => {
+  it('renders as expected with children', () => {
+    const testID = 'testButton';
+    const { toJSON, getByTestId } = render(
+      <DefaultContainer>
+        <Button testID={testID} />
+      </DefaultContainer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByTestId(testID)).toBeDefined();
+  });
+});