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

package/src/Authenticator/hooks/types.ts

@@ -0,0 +1,40 @@
+import {
+  TextFieldProps,
+  PasswordFieldProps,
+  PhoneNumberFieldProps,
+  RadioProps,
+} from '../../primitives';
+
+export type MachineFieldTypeKey = 'password' | 'tel';
+export type AuthenticatorFieldTypeKey =
+  | 'password'
+  | 'phone'
+  | 'default'
+  | 'radio';
+
+type RadioFieldOnBlur = RadioProps<string>['onBlur'];
+export type TextFieldOnBlur = TextFieldProps['onBlur'];
+export type OnChangeText = TextFieldProps['onChangeText'];
+
+type FieldOptions<FieldProps, Type extends AuthenticatorFieldTypeKey> = {
+  name: string;
+  onBlur?: Type extends 'radio' ? RadioFieldOnBlur : TextFieldOnBlur;
+  required?: boolean;
+  type: Type;
+} & Omit<FieldProps, 'disabled' | 'onBlur'>;
+
+type PasswordFieldOptions = FieldOptions<PasswordFieldProps, 'password'>;
+type PhoneFieldOptions = FieldOptions<PhoneNumberFieldProps, 'phone'>;
+type DefaultFieldOptions = FieldOptions<TextFieldProps, 'default'>;
+export type TextFieldOptionsType = (
+  | PasswordFieldOptions
+  | PhoneFieldOptions
+  | DefaultFieldOptions
+) & { labelHidden?: boolean };
+
+export type RadioFieldOptions = FieldOptions<RadioProps<string>, 'radio'>;
+
+/**
+ * `field` options union
+ */
+export type TypedField = RadioFieldOptions | TextFieldOptionsType;

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

@@ -0,0 +1,300 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
+
+import { Logger } from 'aws-amplify';
+import { UnverifiedContactMethodType } from '@aws-amplify/ui';
+import {
+  RadioFieldOptions,
+  TextFieldOptionsType,
+  TypedField,
+} from '../../types';
+import { UseFieldValuesParams } from '../types';
+import useFieldValues from '../useFieldValues';
+
+const warnSpy = jest.spyOn(Logger.prototype, 'warn').mockImplementation();
+
+const textField = {
+  label: 'test',
+  type: 'default',
+  name: 'test',
+  value: 'testValue',
+} as TextFieldOptionsType;
+
+const radioField = {
+  type: 'radio',
+  name: 'email',
+  value: 'testValue',
+  onChange: jest.fn,
+} as RadioFieldOptions;
+
+const mockfields = [];
+const props: UseFieldValuesParams<TypedField> = {
+  componentName: 'SignIn',
+  fields: mockfields,
+  handleBlur: jest.fn(),
+  handleChange: jest.fn(),
+  handleSubmit: jest.fn(),
+};
+
+describe('useFieldValues', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('returns the expected values for text fields', () => {
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [textField],
+      })
+    );
+    expect(result.current).toStrictEqual({
+      disableFormSubmit: false,
+      fields: [
+        {
+          ...textField,
+          onBlur: expect.any(Function),
+          onChangeText: expect.any(Function),
+          value: undefined,
+        },
+      ],
+      handleFormSubmit: expect.any(Function),
+    });
+  });
+
+  it('removes hidden labels from text fields', () => {
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [{ ...textField, labelHidden: true }],
+      })
+    );
+    expect(result.current).toStrictEqual({
+      disableFormSubmit: false,
+      fields: [
+        {
+          ...textField,
+          label: undefined,
+          onBlur: expect.any(Function),
+          onChangeText: expect.any(Function),
+          value: undefined,
+        },
+      ],
+      handleFormSubmit: expect.any(Function),
+    });
+  });
+
+  it('returns the expected values for radio fields', () => {
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        componentName: 'VerifyUser',
+        fields: [radioField],
+      })
+    );
+    expect(result.current).toStrictEqual({
+      disableFormSubmit: true,
+      fields: [{ ...radioField, onChange: expect.any(Function) }],
+      handleFormSubmit: expect.any(Function),
+    });
+  });
+
+  it('returns the expected values with no fields', () => {
+    const { result } = renderHook(() => useFieldValues(props));
+
+    expect(result.current).toStrictEqual({
+      disableFormSubmit: false,
+      fields: mockfields,
+      handleFormSubmit: expect.any(Function),
+    });
+  });
+
+  it('logs a warning for non array fields', () => {
+    const mockFields = 'test' as unknown as RadioFieldOptions[];
+    renderHook(() => useFieldValues({ ...props, fields: mockFields }));
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      `Invalid fields type of ${typeof mockFields} passed to ${
+        props.componentName
+      }. fields must be of type array.`
+    );
+  });
+
+  it('calls expected handlers for text fields', () => {
+    const { result } = renderHook(() =>
+      useFieldValues({ ...props, fields: [textField] })
+    );
+
+    const mockEvent = {
+      nativeEvent: { target: 1 },
+    } as NativeSyntheticEvent<TextInputFocusEventData>;
+    result.current.fields[0].onBlur?.(mockEvent);
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+    expect(props.handleBlur).toHaveBeenCalledWith({
+      name: textField.name,
+      value: undefined,
+    });
+
+    const mockValue = 'test';
+    act(() => {
+      result.current.fields[0].onChangeText?.(mockValue);
+    });
+    expect(props.handleChange).toHaveBeenCalledTimes(1);
+    expect(props.handleChange).toHaveBeenCalledWith({
+      name: textField.name,
+      value: mockValue,
+    });
+
+    result.current.handleFormSubmit();
+    expect(props.handleSubmit).toHaveBeenCalledTimes(1);
+    expect(props.handleSubmit).toHaveBeenCalledWith({
+      [textField.name]: mockValue,
+    });
+  });
+
+  it('calls expected handlers for radios', () => {
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        componentName: 'VerifyUser',
+        fields: [radioField],
+      })
+    );
+
+    const mockValue = 'test';
+    act(() => {
+      result.current.fields[0].onChange?.(mockValue);
+    });
+    expect(result.current.fields[0].value).toEqual(radioField.value);
+
+    result.current.handleFormSubmit();
+    expect(props.handleSubmit).toHaveBeenCalledTimes(1);
+    expect(props.handleSubmit).toHaveBeenCalledWith({
+      unverifiedAttr: mockValue,
+    });
+  });
+
+  it('restricts radio fields to unverified contact methods', () => {
+    const phoneRadioField = {
+      type: 'radio',
+      name: 'phone_number',
+      value: 'testValue',
+      onChange: jest.fn,
+    } as RadioFieldOptions;
+    const unsupportedRadioField = {
+      type: 'radio',
+      name: 'test',
+      value: 'testUnsupportedValue',
+      onChange: jest.fn,
+    } as RadioFieldOptions;
+
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        componentName: 'VerifyUser',
+        fields: [phoneRadioField, unsupportedRadioField],
+      })
+    );
+
+    expect(result.current.fields.length).toBe(1);
+    expect(result.current.fields[0].value).toEqual(phoneRadioField.value);
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      `field with name '${
+        unsupportedRadioField.name
+      }' has been ignored. Supported values are: ${Object.values(
+        UnverifiedContactMethodType
+      )}.`
+    );
+  });
+
+  it("disables form submit if required fields don't have values", () => {
+    const mockTextField = {
+      type: 'default',
+      name: 'test',
+      required: true,
+    } as TextFieldOptionsType;
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [mockTextField],
+      })
+    );
+
+    expect(result.current).toStrictEqual({
+      disableFormSubmit: true,
+      fields: [
+        {
+          ...mockTextField,
+          label: undefined,
+          onBlur: expect.any(Function),
+          onChangeText: expect.any(Function),
+          value: undefined,
+        },
+      ],
+      handleFormSubmit: expect.any(Function),
+    });
+  });
+
+  it('enables form submit if required fields have values', () => {
+    const mockTextField = {
+      label: 'test',
+      type: 'default',
+      name: 'test',
+      required: true,
+    } as TextFieldOptionsType;
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [mockTextField],
+      })
+    );
+
+    const mockValue = 'test';
+    act(() => {
+      result.current.fields[0].onChangeText?.(mockValue);
+    });
+
+    expect(result.current).toStrictEqual({
+      disableFormSubmit: false,
+      fields: [
+        {
+          ...mockTextField,
+          onBlur: expect.any(Function),
+          onChangeText: expect.any(Function),
+          value: mockValue,
+        },
+      ],
+      handleFormSubmit: expect.any(Function),
+    });
+  });
+
+  it('submits the expected values for phone fields', () => {
+    const phoneTextField = {
+      type: 'phone',
+      name: 'test',
+    } as TextFieldOptionsType;
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [phoneTextField],
+      })
+    );
+
+    const mockValue = '+10000000000';
+    act(() => {
+      result.current.fields[0].onChangeText?.(mockValue);
+    });
+
+    expect(result.current.fields.length).toBe(1);
+    expect(result.current.fields[0].value).toEqual(mockValue);
+    result.current.handleFormSubmit();
+    expect(props.handleSubmit).toHaveBeenCalledTimes(1);
+    expect(props.handleSubmit).toHaveBeenCalledWith({
+      country_code: mockValue.substring(0, 3),
+      [textField.name]: mockValue.substring(3, mockValue.length),
+    });
+  });
+});

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

@@ -0,0 +1,208 @@
+import { Logger } from 'aws-amplify';
+import { TypedField } from '../../types';
+
+import {
+  getRouteTypedFields,
+  getSanitizedRadioFields,
+  getSanitizedTextFields,
+} from '../utils';
+
+const warnSpy = jest.spyOn(Logger.prototype, 'warn');
+
+const idle = 'idle';
+const signIn = 'signIn';
+const verifyUser = 'verifyUser';
+
+const passwordField = {
+  type: 'password',
+  name: 'password',
+  label: 'Password',
+  required: true,
+};
+const phoneField = {
+  name: 'phonenumber',
+  type: 'tel',
+};
+const textField = { order: 3, name: 'username', isRequired: true };
+
+const radioField = { type: 'radio', name: 'email', value: 'hello@world.com' };
+
+describe('getSanitizedTextFields', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('returns the expected values in the happy path', () => {
+    const fields: TypedField[] = [{ name: 'test', type: 'default' }];
+    const output = getSanitizedTextFields(fields, 'SignIn');
+
+    expect(output).toHaveLength(1);
+    expect(output).toStrictEqual(fields);
+  });
+
+  it('logs a warning and ignores the field when name is missing', () => {
+    const validField: TypedField = { name: 'test', type: 'default' };
+    const fields: TypedField[] = [
+      validField,
+      { type: 'password', label: 'Password' } as TypedField,
+    ];
+
+    const output = getSanitizedTextFields(fields, 'SignIn');
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Each field must have a name. field has been ignored.'
+    );
+
+    expect(output).toHaveLength(1);
+    expect(output).toStrictEqual([validField]);
+  });
+
+  it('logs a warning and ignores the field when type is radio', () => {
+    const validField: TypedField = { name: 'test', type: 'default' };
+    const fields: TypedField[] = [
+      validField,
+      { name: 'Phone Number', type: 'radio', value: 'value' },
+    ];
+
+    const output = getSanitizedTextFields(fields, 'SignIn');
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      'SignIn component does not support radio fields. field has been ignored.'
+    );
+
+    expect(output).toHaveLength(1);
+    expect(output).toStrictEqual([validField]);
+  });
+
+  it('logs a warning and ignores the field when name is a duplicate', () => {
+    const validField: TypedField = { name: 'test', type: 'default' };
+    const fields: TypedField[] = [
+      validField,
+      { name: 'test', type: 'password' },
+    ];
+
+    const output = getSanitizedTextFields(fields, 'SignIn');
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Each field name must be unique. field with duplicate name of test has been ignored.'
+    );
+
+    expect(output).toHaveLength(1);
+    expect(output).toStrictEqual([validField]);
+  });
+});
+
+describe('getSanitizedRadioFields', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('logs a warning and ignores the field when not a radio field', () => {
+    const validField: TypedField = {
+      name: 'email',
+      type: 'radio',
+      value: 'value',
+    };
+    const fields: TypedField[] = [
+      validField,
+      { type: 'password', value: 'value' } as TypedField,
+    ];
+
+    const output = getSanitizedRadioFields(fields, 'VerifyUser');
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      'VerifyUser component does not support text fields. field with type password has been ignored.'
+    );
+
+    expect(output).toHaveLength(1);
+    expect(output).toStrictEqual([validField]);
+  });
+
+  it('logs a warning and ignores the field when value is missing.', () => {
+    const validField: TypedField = {
+      name: 'email',
+      type: 'radio',
+      value: 'value',
+    };
+    const fields: TypedField[] = [
+      validField,
+      { name: 'phone_number', type: 'radio' } as TypedField,
+    ];
+
+    const output = getSanitizedRadioFields(fields, 'VerifyUser');
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Each radio field must have a value. field has been ignored.'
+    );
+
+    expect(output).toHaveLength(1);
+    expect(output).toStrictEqual([validField]);
+  });
+
+  it('logs a warning and ignores the field when a duplicate value is found.', () => {
+    const validField: TypedField = {
+      name: 'email',
+      type: 'radio',
+      value: 'testValue',
+    };
+    const fields: TypedField[] = [
+      validField,
+      { name: 'email', type: 'radio', value: 'testValue' } as TypedField,
+    ];
+
+    const output = getSanitizedRadioFields(fields, 'VerifyUser');
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Each radio field value must be unique. field with duplicate value of testValue has been ignored.'
+    );
+
+    expect(output).toHaveLength(1);
+    expect(output).toStrictEqual([validField]);
+  });
+});
+
+describe('getRouteTypedFields', () => {
+  it('returns the expected value for a non-component route', () => {
+    const fields = getRouteTypedFields({ fields: [], route: idle });
+
+    expect(fields).toStrictEqual([]);
+    expect(fields).toHaveLength(0);
+  });
+
+  it('returns the expected result for the verifyUser route', () => {
+    const fields = getRouteTypedFields({
+      fields: [radioField],
+      route: verifyUser,
+    });
+
+    expect(fields).toStrictEqual([radioField]);
+  });
+
+  it('returns the expected value for varied fields', () => {
+    const fields = getRouteTypedFields({
+      fields: [passwordField, phoneField, textField],
+      route: signIn,
+    });
+
+    const expected = [
+      passwordField,
+      {
+        name: phoneField.name,
+        type: 'phone',
+      },
+      {
+        name: textField.name,
+        required: textField.isRequired,
+        type: 'default',
+      },
+    ];
+
+    expect(fields).toStrictEqual(expected);
+  });
+});

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

@@ -0,0 +1,8 @@
+// machine keys used with default fields that should be used with UI
+export const KEY_ALLOW_LIST = [
+  'label',
+  'placeholder',
+  'required',
+  'isRequired',
+  'type',
+];

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

@@ -0,0 +1,2 @@
+export { default as useFieldValues } from './useFieldValues';
+export { getRouteTypedFields } from './utils';

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

@@ -0,0 +1,35 @@
+import {
+  AuthenticatorComponentDefaultProps,
+  AuthenticatorRouteComponentName,
+} from '@aws-amplify/ui-react-core';
+
+import { TypedField } from '../types';
+
+export type MachineEventHandlers = Pick<
+  AuthenticatorComponentDefaultProps[AuthenticatorRouteComponentName],
+  'handleBlur' | 'handleChange' | 'handleSubmit'
+>;
+
+export interface UseFieldValuesParams<FieldType extends TypedField> {
+  componentName: AuthenticatorRouteComponentName;
+  fields: FieldType[];
+
+  /**
+   * machine "BLUR" event handler, validates `field` value against machine validation rules
+   */
+  handleBlur: MachineEventHandlers['handleBlur'];
+  /**
+   * machine "CHANGE"" event handler, validates `field` value against machine validation rules
+   */
+  handleChange: MachineEventHandlers['handleChange'];
+  /**
+   * machine "SUBMIT"" event handler, validates `field` value against machine validation rules
+   */
+  handleSubmit: MachineEventHandlers['handleSubmit'];
+}
+
+export interface UseFieldValues<FieldType extends TypedField> {
+  fields: FieldType[]; // return either radio or text
+  disableFormSubmit: boolean;
+  handleFormSubmit: () => void;
+}

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

@@ -0,0 +1,116 @@
+import { useMemo, useState } from 'react';
+import { Logger } from 'aws-amplify';
+
+import { OnChangeText, TextFieldOnBlur, TypedField } from '../types';
+
+import { UseFieldValues, UseFieldValuesParams } from './types';
+import {
+  getSanitizedTextFields,
+  getSanitizedRadioFields,
+  isRadioFieldOptions,
+} from './utils';
+
+const logger = new Logger('Authenticator');
+
+export default function useFieldValues<FieldType extends TypedField>({
+  componentName,
+  fields = [],
+  handleBlur,
+  handleChange,
+  handleSubmit,
+}: UseFieldValuesParams<FieldType>): UseFieldValues<FieldType> {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const isRadioFieldComponent = componentName === 'VerifyUser';
+
+  const sanitizedFields = useMemo(() => {
+    if (!Array.isArray(fields)) {
+      logger.warn(
+        `Invalid fields type of ${typeof fields} passed to ${componentName}. fields must be of type array.`
+      );
+      return [];
+    }
+
+    if (isRadioFieldComponent) {
+      return getSanitizedRadioFields(fields, componentName);
+    }
+
+    return getSanitizedTextFields(fields, componentName);
+  }, [componentName, fields, isRadioFieldComponent]);
+
+  const fieldsWithHandlers = sanitizedFields.map((field) => {
+    if (isRadioFieldOptions(field)) {
+      const onChange = (value: string) => {
+        // call `onChange` passed as radio `field` option
+        field.onChange?.(value);
+
+        // set `name` as value of 'unverifiedAttr'
+        setValues({ unverifiedAttr: value });
+      };
+
+      return { ...field, onChange };
+    }
+
+    const { name, label, labelHidden, ...rest } = field;
+
+    const onBlur: TextFieldOnBlur = (event) => {
+      // call `onBlur` passed as text `field` option
+      field.onBlur?.(event);
+
+      // call machine blur handler
+      handleBlur({ name, value: values[name] });
+    };
+
+    const onChangeText: OnChangeText = (value) => {
+      // call `onChangeText` passed as text `field` option
+      field.onChangeText?.(value);
+
+      // call machine change handler
+      handleChange({ name, value });
+
+      setValues({ ...values, [name]: value });
+    };
+
+    return {
+      ...rest,
+      label: labelHidden ? undefined : label,
+      onBlur,
+      onChangeText,
+      name,
+      value: values[name],
+    };
+  }) as FieldType[];
+
+  const disableFormSubmit = isRadioFieldComponent
+    ? !values.unverifiedAttr
+    : fieldsWithHandlers.some(({ required, value }) => {
+        if (!required) {
+          return false;
+        }
+
+        if (value) {
+          return false;
+        }
+        return true;
+      });
+
+  const handleFormSubmit = () => {
+    const submitValue = isRadioFieldComponent
+      ? values
+      : fieldsWithHandlers.reduce((acc, { name, value, type }) => {
+          /*
+                For phone numbers pass the first 3 charactes from value as dialCode until we support a dialCode picker
+            */
+          return type === 'phone'
+            ? {
+                ...acc,
+                country_code: value?.substring(0, 3),
+                [name]: value?.substring(3, value.length),
+              }
+            : { ...acc, [name]: value };
+        }, {});
+
+    handleSubmit?.(submitValue);
+  };
+
+  return { fields: fieldsWithHandlers, disableFormSubmit, handleFormSubmit };
+}