@aws-amplify/ui-react-native 1.2.20 → 1.2.22

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

@@ -2,7 +2,10 @@ 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 {
+  UnverifiedContactMethodType,
+  authenticatorTextUtil,
+} from '@aws-amplify/ui';
 import {
   RadioFieldOptions,
   TextFieldOptionsType,
@@ -58,6 +61,7 @@ describe('useFieldValues', () => {
           value: undefined,
         },
       ],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -80,6 +84,7 @@ describe('useFieldValues', () => {
           value: undefined,
         },
       ],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -95,6 +100,7 @@ describe('useFieldValues', () => {
     expect(result.current).toStrictEqual({
       disableFormSubmit: true,
       fields: [{ ...radioField, onChange: expect.any(Function) }],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -105,6 +111,7 @@ describe('useFieldValues', () => {
     expect(result.current).toStrictEqual({
       disableFormSubmit: false,
       fields: mockfields,
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -129,7 +136,9 @@ describe('useFieldValues', () => {
     const mockEvent = {
       nativeEvent: { target: 1 },
     } as NativeSyntheticEvent<TextInputFocusEventData>;
-    result.current.fields[0].onBlur?.(mockEvent);
+    act(() => {
+      result.current.fields[0].onBlur?.(mockEvent);
+    });
     expect(props.handleBlur).toHaveBeenCalledTimes(1);
     expect(props.handleBlur).toHaveBeenCalledWith({
       name: textField.name,
@@ -153,6 +162,68 @@ describe('useFieldValues', () => {
     });
   });
 
+  it('runs validations for email fields', () => {
+    const emailField = {
+      label: 'test',
+      type: 'email',
+      name: 'invalid_email',
+      value: 'test@',
+    } as TextFieldOptionsType;
+    const phoneTextField = {
+      type: 'phone',
+      name: 'testPhone',
+    } as TextFieldOptionsType;
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [emailField, phoneTextField],
+      })
+    );
+    const mockEvent = {
+      nativeEvent: { target: 1 },
+    } as NativeSyntheticEvent<TextInputFocusEventData>;
+    act(() => {
+      result.current.fields[0].onBlur?.(mockEvent);
+    });
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+    expect(props.handleBlur).toHaveBeenCalledWith({
+      name: emailField.name,
+      value: undefined,
+    });
+    expect(result.current.fieldValidationErrors).toStrictEqual({
+      [emailField.name]: [authenticatorTextUtil.getInvalidEmailText()],
+    });
+  });
+
+  it('runs validations for required fields', () => {
+    const requiredField = {
+      label: 'test',
+      type: 'password',
+      name: 'required',
+      required: true,
+    } as TextFieldOptionsType;
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [requiredField],
+      })
+    );
+    const mockEvent = {
+      nativeEvent: { target: 1 },
+    } as NativeSyntheticEvent<TextInputFocusEventData>;
+    act(() => {
+      result.current.fields[0].onBlur?.(mockEvent);
+    });
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+    expect(props.handleBlur).toHaveBeenCalledWith({
+      name: requiredField.name,
+      value: undefined,
+    });
+    expect(result.current.fieldValidationErrors).toStrictEqual({
+      [requiredField.name]: [authenticatorTextUtil.getRequiredFieldText()],
+    });
+  });
+
   it('calls expected handlers for radios', () => {
     const { result } = renderHook(() =>
       useFieldValues({
@@ -234,6 +305,7 @@ describe('useFieldValues', () => {
           value: undefined,
         },
       ],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -267,6 +339,7 @@ describe('useFieldValues', () => {
           value: mockValue,
         },
       ],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });

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

@@ -1,10 +1,12 @@
 import { Logger } from 'aws-amplify';
-import { TypedField } from '../../types';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
 
+import { TextFieldOptionsType, TypedField } from '../../types';
 import {
   getRouteTypedFields,
   getSanitizedRadioFields,
   getSanitizedTextFields,
+  runFieldValidation,
 } from '../utils';
 
 const warnSpy = jest.spyOn(Logger.prototype, 'warn');
@@ -214,3 +216,67 @@ describe('getRouteTypedFields', () => {
     expect(fields).toStrictEqual(expected);
   });
 });
+
+describe('runFieldValidation', () => {
+  const { getInvalidEmailText, getRequiredFieldText } = authenticatorTextUtil;
+  const field: TextFieldOptionsType = {
+    required: true,
+    type: 'email',
+    name: 'email',
+  };
+
+  it('should return an empty array when no errors are found', () => {
+    const value = 'test@example.com';
+    const stateValidations = {};
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([]);
+  });
+
+  it('should return an array with the required field error when value is missing', () => {
+    const value = undefined;
+    const stateValidations = {};
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([getRequiredFieldText(), getInvalidEmailText()]);
+  });
+
+  it('should return an array with the invalid email error when email value is invalid', () => {
+    const value = 'invalid-email';
+    const stateValidations = {};
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([getInvalidEmailText()]);
+  });
+
+  it('should include state machine validation errors in the result', () => {
+    const value = 'test@example.com';
+    const errorMessage = 'Email already exists.';
+    const stateValidations = {
+      email: errorMessage,
+    };
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([errorMessage]);
+  });
+
+  it('should concatenate state machine validation errors with other errors', () => {
+    const value = undefined;
+    const errorMessage = 'Email already exists.';
+    const stateValidations = {
+      email: errorMessage,
+    };
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([
+      getRequiredFieldText(),
+      getInvalidEmailText(),
+      errorMessage,
+    ]);
+  });
+});

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

@@ -1,7 +1,9 @@
 import {
   AuthenticatorComponentDefaultProps,
   AuthenticatorRouteComponentName,
+  AuthenticatorMachineContext,
 } from '@aws-amplify/ui-react-core';
+import { ValidationError } from '@aws-amplify/ui';
 
 import { TypedField } from '../types';
 
@@ -26,10 +28,13 @@ export interface UseFieldValuesParams<FieldType extends TypedField> {
    * machine "SUBMIT"" event handler, validates `field` value against machine validation rules
    */
   handleSubmit: MachineEventHandlers['handleSubmit'];
+
+  validationErrors?: AuthenticatorMachineContext['validationErrors'];
 }
 
 export interface UseFieldValues<FieldType extends TypedField> {
   fields: FieldType[]; // return either radio or text
+  fieldValidationErrors: ValidationError | undefined;
   disableFormSubmit: boolean;
   handleFormSubmit: () => void;
 }

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

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { Logger } from 'aws-amplify';
+import { ValidationError } from '@aws-amplify/ui';
 
 import { OnChangeText, TextFieldOnBlur, TypedField } from '../types';
 
@@ -8,6 +9,7 @@ import {
   getSanitizedTextFields,
   getSanitizedRadioFields,
   isRadioFieldOptions,
+  runFieldValidation,
 } from './utils';
 
 const logger = new Logger('Authenticator');
@@ -18,8 +20,12 @@ export default function useFieldValues<FieldType extends TypedField>({
   handleBlur,
   handleChange,
   handleSubmit,
+  validationErrors,
 }: UseFieldValuesParams<FieldType>): UseFieldValues<FieldType> {
   const [values, setValues] = useState<Record<string, string>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const [fieldValidationErrors, setFieldValidationErrors] =
+    useState<ValidationError>({});
   const isRadioFieldComponent = componentName === 'VerifyUser';
 
   const sanitizedFields = useMemo(() => {
@@ -53,11 +59,18 @@ export default function useFieldValues<FieldType extends TypedField>({
     const { name, label, labelHidden, ...rest } = field;
 
     const onBlur: TextFieldOnBlur = (event) => {
+      setTouched({ ...touched, [name]: true });
+
       // call `onBlur` passed as text `field` option
       field.onBlur?.(event);
 
       // call machine blur handler
       handleBlur({ name, value: values[name] });
+
+      setFieldValidationErrors({
+        ...fieldValidationErrors,
+        [name]: runFieldValidation(field, values[name], validationErrors),
+      });
     };
 
     const onChangeText: OnChangeText = (value) => {
@@ -67,6 +80,13 @@ export default function useFieldValues<FieldType extends TypedField>({
       // call machine change handler
       handleChange({ name, value });
 
+      if (touched[name]) {
+        setFieldValidationErrors({
+          ...fieldValidationErrors,
+          [name]: runFieldValidation(field, value, validationErrors),
+        });
+      }
+
       setValues({ ...values, [name]: value });
     };
 
@@ -112,5 +132,10 @@ export default function useFieldValues<FieldType extends TypedField>({
     handleSubmit?.(submitValue);
   };
 
-  return { fields: fieldsWithHandlers, disableFormSubmit, handleFormSubmit };
+  return {
+    fields: fieldsWithHandlers,
+    disableFormSubmit,
+    fieldValidationErrors: { ...fieldValidationErrors, ...validationErrors },
+    handleFormSubmit,
+  };
 }

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

@@ -1,7 +1,11 @@
 import { Logger } from 'aws-amplify';
 import {
+  authenticatorTextUtil,
+  isString,
   isUnverifiedContactMethodType,
+  isValidEmail,
   UnverifiedContactMethodType,
+  ValidationError,
 } from '@aws-amplify/ui';
 import {
   AuthenticatorLegacyField,
@@ -14,12 +18,15 @@ import {
   AuthenticatorFieldTypeKey,
   MachineFieldTypeKey,
   RadioFieldOptions,
+  TextFieldOptionsType,
   TypedField,
 } from '../types';
 import { KEY_ALLOW_LIST } from './constants';
 
 const logger = new Logger('Authenticator');
 
+const { getInvalidEmailText, getRequiredFieldText } = authenticatorTextUtil;
+
 export const isRadioFieldOptions = (
   field: TypedField
 ): field is RadioFieldOptions => field?.type === 'radio';
@@ -109,7 +116,8 @@ const isKeyAllowed = (key: string) =>
 
 const isValidMachineFieldType = (
   type: string | undefined
-): type is MachineFieldTypeKey => type === 'password' || type === 'tel';
+): type is MachineFieldTypeKey =>
+  type === 'password' || type === 'tel' || type == 'email';
 
 const getFieldType = (type: string | undefined): AuthenticatorFieldTypeKey => {
   if (isValidMachineFieldType(type)) {
@@ -176,3 +184,38 @@ export function getRouteTypedFields({
 
   return isVerifyUserRoute ? radioFields : getTypedFields(fields);
 }
+
+/**
+ *
+ * @param {TextFieldOptionsType} field text field type
+ * @param {string | undefined} value text field value
+ * @param {string[]} stateValidations validation errors array from state machine
+ * @returns {string[]} field errors array
+ */
+export const runFieldValidation = (
+  field: TextFieldOptionsType,
+  value: string | undefined,
+  stateValidations: ValidationError | undefined
+): string[] => {
+  const fieldErrors: string[] = [];
+  if (field.required && !value) {
+    fieldErrors.push(getRequiredFieldText());
+  }
+  if (field.type === 'email') {
+    if (!isValidEmail(value)) {
+      fieldErrors.push(getInvalidEmailText());
+    }
+  }
+
+  // add state machine validation errors, if any
+  const stateFieldValidation = stateValidations?.[field.name];
+  if (stateFieldValidation) {
+    if (isString(stateFieldValidation)) {
+      fieldErrors.push(stateFieldValidation);
+    } else {
+      return fieldErrors.concat(stateFieldValidation);
+    }
+  }
+
+  return fieldErrors;
+};

package/src/primitives/Checkbox/__tests__/__snapshots__/Checkbox.spec.tsx.snap

@@ -51,9 +51,9 @@ exports[`Checkbox applies label position prop 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -120,9 +120,9 @@ exports[`Checkbox applies theme and style props 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -193,9 +193,9 @@ exports[`Checkbox renders as expected when disabled 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -260,9 +260,9 @@ exports[`Checkbox renders as expected when passing a number to the size prop 1`]
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -327,9 +327,9 @@ exports[`Checkbox renders as expected when selected is false 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -394,9 +394,9 @@ exports[`Checkbox renders as expected when selected is true 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -461,9 +461,9 @@ exports[`Checkbox renders as expected with custom accessibilityRole 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",

package/src/primitives/Divider/__tests__/__snapshots__/Divider.spec.tsx.snap

@@ -32,9 +32,9 @@ exports[`Divider applies theme and style props 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -101,9 +101,9 @@ exports[`Divider renders as expected with label 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",

package/src/primitives/Heading/__tests__/__snapshots__/Heading.spec.tsx.snap

@@ -10,7 +10,7 @@ exports[`Heading applies theme and style props 1`] = `
       },
       Object {
         "fontSize": 14,
-        "fontWeight": "900",
+        "fontWeight": "700",
         "lineHeight": 21,
       },
       Object {
@@ -33,7 +33,7 @@ exports[`Heading renders a level 1 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 40,
-        "fontWeight": "100",
+        "fontWeight": "300",
         "lineHeight": 60,
       },
       undefined,
@@ -54,7 +54,7 @@ exports[`Heading renders a level 2 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 32,
-        "fontWeight": "200",
+        "fontWeight": "400",
         "lineHeight": 48,
       },
       undefined,
@@ -75,7 +75,7 @@ exports[`Heading renders a level 3 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 24,
-        "fontWeight": "300",
+        "fontWeight": "500",
         "lineHeight": 36,
       },
       undefined,
@@ -117,7 +117,7 @@ exports[`Heading renders a level 5 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 16,
-        "fontWeight": "700",
+        "fontWeight": "600",
         "lineHeight": 24,
       },
       undefined,
@@ -138,7 +138,7 @@ exports[`Heading renders a level 6 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 14,
-        "fontWeight": "900",
+        "fontWeight": "700",
         "lineHeight": 21,
       },
       undefined,
@@ -159,7 +159,7 @@ exports[`Heading renders a level 6 Heading by default 1`] = `
       },
       Object {
         "fontSize": 14,
-        "fontWeight": "900",
+        "fontWeight": "700",
         "lineHeight": 21,
       },
       undefined,

package/src/primitives/Heading/styles.ts

@@ -17,19 +17,19 @@ export const getThemedStyles = (theme: StrictTheme): HeadingStyles => {
     },
     1: {
       fontSize: fontSizes.xxxl,
-      fontWeight: fontWeights.hairline,
+      fontWeight: fontWeights.light,
       lineHeight: getLineHeight(fontSizes.xxxl),
       ...components?.heading?.[1],
     },
     2: {
       fontSize: fontSizes.xxl,
-      fontWeight: fontWeights.thin,
+      fontWeight: fontWeights.normal,
       lineHeight: getLineHeight(fontSizes.xxl),
       ...components?.heading?.[2],
     },
     3: {
       fontSize: fontSizes.xl,
-      fontWeight: fontWeights.light,
+      fontWeight: fontWeights.medium,
       lineHeight: getLineHeight(fontSizes.xl),
       ...components?.heading?.[3],
     },
@@ -41,13 +41,13 @@ export const getThemedStyles = (theme: StrictTheme): HeadingStyles => {
     },
     5: {
       fontSize: fontSizes.medium,
-      fontWeight: fontWeights.bold,
+      fontWeight: fontWeights.semibold,
       lineHeight: getLineHeight(fontSizes.medium),
       ...components?.heading?.[5],
     },
     6: {
       fontSize: fontSizes.small,
-      fontWeight: fontWeights.black,
+      fontWeight: fontWeights.bold,
       lineHeight: getLineHeight(fontSizes.small),
       ...components?.heading?.[6],
     },

package/src/primitives/Label/__tests__/__snapshots__/Label.spec.tsx.snap

@@ -6,9 +6,9 @@ exports[`Label applies accessibility role 1`] = `
   style={
     Array [
       Object {
-        "fontSize": 14,
+        "fontSize": 16,
         "fontWeight": "400",
-        "lineHeight": 21,
+        "lineHeight": 24,
       },
       Object {
         "color": "hsl(210, 50%, 10%)",
@@ -28,9 +28,9 @@ exports[`Label renders a default Label 1`] = `
   style={
     Array [
       Object {
-        "fontSize": 14,
+        "fontSize": 16,
         "fontWeight": "400",
-        "lineHeight": 21,
+        "lineHeight": 24,
       },
       Object {
         "color": "hsl(210, 50%, 10%)",
@@ -50,9 +50,9 @@ exports[`Label should apply theme and style props 1`] = `
   style={
     Array [
       Object {
-        "fontSize": 14,
+        "fontSize": 16,
         "fontWeight": "400",
-        "lineHeight": 21,
+        "lineHeight": 24,
       },
       Object {
         "color": "hsl(210, 50%, 10%)",
@@ -74,9 +74,9 @@ exports[`Label should apply variant styles 1`] = `
   style={
     Array [
       Object {
-        "fontSize": 14,
+        "fontSize": 16,
         "fontWeight": "400",
-        "lineHeight": 21,
+        "lineHeight": 24,
       },
       Object {
         "color": "hsl(130, 27%, 29%)",

package/src/primitives/Label/styles.ts

@@ -12,9 +12,9 @@ export const getThemedStyles = (theme: StrictTheme): LabelStyles => {
 
   return StyleSheet.create({
     text: {
-      fontSize: fontSizes.small,
+      fontSize: fontSizes.medium,
       fontWeight: fontWeights.normal,
-      lineHeight: getLineHeight(fontSizes.small),
+      lineHeight: getLineHeight(fontSizes.medium),
       ...components?.label?.text,
     },
     primary: {