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

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/TextField/TextField.tsx

@@ -33,8 +33,9 @@ export default function TextField({
     () => ({
       ...themedStyle.fieldContainer,
       ...(disabled && themedStyle.disabled),
+      ...(error && themedStyle.error),
     }),
-    [disabled, themedStyle]
+    [disabled, error, themedStyle]
   );
 
   return (

package/src/primitives/TextField/__tests__/TextField.spec.tsx

@@ -67,7 +67,7 @@ describe('TextField', () => {
     expect(queryByText(message)).toBeNull();
   });
 
-  it(`doesn't render the errorMessage if errorMessage prop is undefined`, () => {
+  it(`shows error style, but doesn't render the errorMessage if errorMessage prop is undefined`, () => {
     const message = 'Error message';
     const { toJSON, queryByText } = render(
       <TextField {...defaultProps} error />
@@ -111,18 +111,13 @@ describe('TextField', () => {
   });
 
   it('applies theme and style props', () => {
-    const errorMessageText = 'Error!';
-    const customErrorMessageStyle = { color: 'red' };
     const customFieldStyle = { color: 'orange' };
     const customLabelStyle = { color: 'blue' };
     const customStyle = { backgroundColor: 'purple' };
 
-    const { getByTestId, getByText } = render(
+    const { getByTestId } = render(
       <TextField
         {...defaultProps}
-        error
-        errorMessage={errorMessageText}
-        errorMessageStyle={customErrorMessageStyle}
         fieldStyle={customFieldStyle}
         labelStyle={customLabelStyle}
         style={customStyle}
@@ -135,7 +130,6 @@ describe('TextField', () => {
     const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
     const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
     const input = getByTestId(testID);
-    const errorMessage = getByText(errorMessageText);
 
     expect(container.props.style).toStrictEqual([
       themedStyle.container,
@@ -148,6 +142,61 @@ describe('TextField', () => {
       themedStyle.field,
       customFieldStyle,
     ]);
+  });
+
+  it('applies theme and style props with error', () => {
+    const errorMessageText = 'Error!';
+    const customErrorMessageStyle = { color: 'red' };
+    const customStyle = { backgroundColor: 'purple' };
+
+    const { getByTestId, getByText } = render(
+      <TextField
+        {...defaultProps}
+        style={customStyle}
+        error
+        errorMessage={errorMessageText}
+        errorMessageStyle={customErrorMessageStyle}
+      />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
+    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
+    const errorMessage = getByText(errorMessageText);
+
+    expect(container.props.style).toStrictEqual([
+      themedStyle.container,
+      customStyle,
+    ]);
+    expect(inputContainer.props.style).toStrictEqual({
+      ...themedStyle.fieldContainer,
+      ...themedStyle.error,
+    });
     expect(errorMessage.props.style).toContain(customErrorMessageStyle);
   });
+
+  it('applies theme and style props for disabled', () => {
+    const customStyle = { backgroundColor: 'purple' };
+
+    const { getByTestId } = render(
+      <TextField {...defaultProps} style={customStyle} disabled />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
+    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
+
+    expect(container.props.style).toStrictEqual([
+      themedStyle.container,
+      customStyle,
+    ]);
+    expect(inputContainer.props.style).toStrictEqual({
+      ...themedStyle.fieldContainer,
+      ...themedStyle.disabled,
+    });
+  });
 });

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

@@ -80,7 +80,7 @@ exports[`TextField doesn't render the errorMessage if error prop is false 1`] =
 </View>
 `;
 
-exports[`TextField doesn't render the errorMessage if errorMessage prop is undefined 1`] = `
+exports[`TextField renders as expected 1`] = `
 <View
   style={
     Array [
@@ -160,7 +160,7 @@ exports[`TextField doesn't render the errorMessage if errorMessage prop is undef
 </View>
 `;
 
-exports[`TextField renders as expected 1`] = `
+exports[`TextField renders as expected as password field 1`] = `
 <View
   style={
     Array [
@@ -223,6 +223,7 @@ exports[`TextField renders as expected 1`] = `
       editable={true}
       placeholder="Placeholder"
       placeholderTextColor="hsl(210, 10%, 40%)"
+      secureTextEntry={true}
       style={
         Array [
           Object {
@@ -240,7 +241,7 @@ exports[`TextField renders as expected 1`] = `
 </View>
 `;
 
-exports[`TextField renders as expected as password field 1`] = `
+exports[`TextField renders as expected when disabled 1`] = `
 <View
   style={
     Array [
@@ -287,6 +288,7 @@ exports[`TextField renders as expected as password field 1`] = `
         "borderRadius": 4,
         "borderWidth": 1,
         "flexDirection": "row",
+        "opacity": 0.6,
         "paddingHorizontal": 8,
       }
     }
@@ -295,15 +297,14 @@ exports[`TextField renders as expected as password field 1`] = `
     <TextInput
       accessibilityState={
         Object {
-          "disabled": undefined,
+          "disabled": true,
         }
       }
       accessible={true}
       autoCapitalize="none"
-      editable={true}
+      editable={false}
       placeholder="Placeholder"
       placeholderTextColor="hsl(210, 10%, 40%)"
-      secureTextEntry={true}
       style={
         Array [
           Object {
@@ -321,7 +322,7 @@ exports[`TextField renders as expected as password field 1`] = `
 </View>
 `;
 
-exports[`TextField renders as expected when disabled 1`] = `
+exports[`TextField renders as expected with error message 1`] = `
 <View
   style={
     Array [
@@ -364,11 +365,10 @@ exports[`TextField renders as expected when disabled 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "borderColor": "hsl(210, 10%, 58%)",
+        "borderColor": "hsl(0, 95%, 30%)",
         "borderRadius": 4,
         "borderWidth": 1,
         "flexDirection": "row",
-        "opacity": 0.6,
         "paddingHorizontal": 8,
       }
     }
@@ -377,12 +377,12 @@ exports[`TextField renders as expected when disabled 1`] = `
     <TextInput
       accessibilityState={
         Object {
-          "disabled": true,
+          "disabled": undefined,
         }
       }
       accessible={true}
       autoCapitalize="none"
-      editable={false}
+      editable={true}
       placeholder="Placeholder"
       placeholderTextColor="hsl(210, 10%, 40%)"
       style={
@@ -399,10 +399,28 @@ exports[`TextField renders as expected when disabled 1`] = `
       testID="textInput"
     />
   </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        undefined,
+      ]
+    }
+  >
+    Error message
+  </Text>
 </View>
 `;
 
-exports[`TextField renders as expected with error message 1`] = `
+exports[`TextField shows error style, but doesn't render the errorMessage if errorMessage prop is undefined 1`] = `
 <View
   style={
     Array [
@@ -445,7 +463,7 @@ exports[`TextField renders as expected with error message 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "borderColor": "hsl(210, 10%, 58%)",
+        "borderColor": "hsl(0, 95%, 30%)",
         "borderRadius": 4,
         "borderWidth": 1,
         "flexDirection": "row",
@@ -479,23 +497,5 @@ exports[`TextField renders as expected with error message 1`] = `
       testID="textInput"
     />
   </View>
-  <Text
-    accessibilityRole="text"
-    style={
-      Array [
-        Object {
-          "fontSize": 14,
-          "fontWeight": "400",
-          "lineHeight": 21,
-        },
-        Object {
-          "color": "hsl(210, 50%, 10%)",
-        },
-        undefined,
-      ]
-    }
-  >
-    Error message
-  </Text>
 </View>
 `;

package/src/primitives/TextField/styles.ts

@@ -19,6 +19,9 @@ export const getThemedStyles = (theme: StrictTheme): TextFieldStyles => {
       opacity: opacities[60],
       ...components?.textField?.disabled,
     },
+    error: {
+      borderColor: colors.border.error,
+    },
     fieldContainer: {
       alignItems: 'center',
       borderColor: colors.border.primary,

package/src/primitives/TextField/types.ts

@@ -60,6 +60,7 @@ export interface TextFieldProps extends Omit<TextInputProps, 'editable'> {
 export interface TextFieldStyles {
   container?: ViewStyle;
   disabled?: ViewStyle;
+  error?: ViewStyle;
   field?: TextStyle;
   fieldContainer?: ViewStyle;
   label?: TextStyle;

package/src/theme/__tests__/createTheme.spec.ts

@@ -21,6 +21,54 @@ describe('createTheme', () => {
     });
   });
 
+  describe('number conversions', () => {
+    it('should convert strings to numbers where applicable', () => {
+      const { tokens } = createTheme({
+        tokens: {
+          borderWidths: {
+            small: '4',
+            medium: '1rem',
+            large: 6,
+          },
+          opacities: {
+            '10': '0.2',
+          },
+          space: {
+            small: 4,
+            medium: '6',
+            large: '{space.small.value}',
+          },
+          fontSizes: {
+            small: '1rem',
+          },
+        },
+      });
+      expect(tokens.borderWidths.small).toBe(4);
+      expect(tokens.borderWidths.medium).toBe(16);
+      expect(tokens.borderWidths.large).toBe(6);
+      expect(tokens.opacities['10']).toBe(0.2);
+      expect(tokens.space.small).toBe(4);
+      expect(tokens.space.medium).toBe(6);
+      expect(tokens.space.large).toBe(4);
+      expect(tokens.fontSizes.small).toBe(16);
+    });
+
+    it('should use the spaceModifier for space tokens with rem', () => {
+      const { tokens } = createTheme({
+        spaceModifier: 1.25,
+        tokens: {
+          space: {
+            small: 4,
+            medium: '1rem',
+          },
+        },
+      });
+
+      expect(tokens.space.small).toEqual(4);
+      expect(tokens.space.medium).toEqual(20);
+    });
+  });
+
   describe('with mixture of value and no value', () => {
     const { tokens } = createTheme({
       tokens: {

package/src/theme/createTheme.ts

@@ -2,21 +2,33 @@ import deepExtend from 'style-dictionary/lib/utils/deepExtend';
 import resolveObject from 'style-dictionary/lib/utils/resolveObject';
 import usesReference from 'style-dictionary/lib/utils/references/usesReference';
 import { isFunction, setupTokens } from '@aws-amplify/ui';
-import { Theme, StrictTheme, ColorMode, Components } from './types';
+import {
+  Theme,
+  StrictTheme,
+  ColorMode,
+  Components,
+  StrictTokens,
+} from './types';
 import { defaultTheme } from './defaultTheme';
 
 // This will resolve all references in component themes by either
 // calling the component theme function with the already resolved base tokens
 // OR
 // resolving the component theme object
-const setupComponents = ({ components, tokens }: StrictTheme) => {
+const setupComponents = ({
+  components,
+  tokens,
+}: {
+  components: Components;
+  tokens: StrictTokens;
+}) => {
   const output = components
     ? Object.entries(components).reduce(
         (acc, [key, value]) => ({
           ...acc,
           [key]: isFunction(value) ? (value(tokens) as typeof value) : value,
         }),
-        {} as Components<'components'>
+        {}
       )
     : {};
 
@@ -26,6 +38,16 @@ const setupComponents = ({ components, tokens }: StrictTheme) => {
   }).components;
 };
 
+const shouldParseFloatValue = (pathKey: string) =>
+  [
+    'space',
+    'borderWidths',
+    'opacities',
+    'fontSizes',
+    'lineHeights',
+    'radii',
+  ].includes(pathKey);
+
 const setupToken = ({
   token,
   path = [],
@@ -39,27 +61,28 @@ const setupToken = ({
 }): string | number => {
   const { value } = token;
   if (typeof value === 'string') {
-    // Perform transforms
-    if (path[0] === 'space') {
-      if (value.includes('rem')) {
-        return Math.floor(parseFloat(value) * 16 * spaceModifier);
-      }
-    }
-    if (value.includes('rem')) {
-      return Math.floor(parseFloat(value) * 16);
-    }
-    if (value.includes('px')) {
-      return parseInt(value, 10);
-    }
-    if (path[0] === 'opacities') {
-      return parseFloat(value);
-    }
     // Remove .value from references if there is a reference
+    // this needs to come first so we don't get NaNs for references
     if (usesReference(value)) {
       return value.replace('.value', '');
     }
+
+    if (shouldParseFloatValue(path[0])) {
+      if (value.includes('rem')) {
+        if (path[0] === 'space') {
+          return Math.floor(parseFloat(value) * 16 * spaceModifier);
+        }
+        return Math.floor(parseFloat(value) * 16);
+      }
+      if (value.includes('px')) {
+        return parseInt(value, 10);
+      }
+      return parseFloat(value);
+    }
+
     return value;
   }
+
   // Font Weights in RN are strings
   if (path[0] === 'fontWeights') {
     return `${value}`;
@@ -118,14 +141,14 @@ export const createTheme = (
     }) as StrictTheme['tokens']
   );
 
-  let { components } = mergedTheme;
+  let components;
 
   // Resolve component token references too
   if (mergedTheme.components) {
     components = setupComponents({
-      ...mergedTheme,
+      components: mergedTheme.components,
       tokens,
-    }) as Components<'output'>;
+    });
   }
 
   return { ...mergedTheme, tokens, components };

package/src/theme/types.ts

@@ -26,22 +26,23 @@ type ComponentTheme<ComponentType, Output> = Output extends 'output'
   : ((tokens: StrictTheme['tokens']) => ComponentType) | ComponentType;
 
 // TODO: make optional all the way down
-export type Components<Output> = Record<string, object> & {
-  button?: ComponentTheme<ButtonStyles, Output>;
-  checkbox?: ComponentTheme<CheckboxStyles, Output>;
-  divider?: ComponentTheme<DividerStyles, Output>;
-  errorMessage?: ComponentTheme<ErrorMessageStyles, Output>;
-  heading?: ComponentTheme<HeadingStyles, Output>;
-  icon?: ComponentTheme<IconStyles, Output>;
-  iconButton?: ComponentTheme<IconButtonStyles, Output>;
-  label?: ComponentTheme<LabelStyles, Output>;
-  passwordField?: ComponentTheme<PasswordFieldStyles, Output>;
-  phoneNumberField?: ComponentTheme<PhoneNumberFieldStyles, Output>;
-  radio?: ComponentTheme<RadioStyles, Output>;
-  radioGroup?: ComponentTheme<RadioGroupStyles, Output>;
-  tabs?: ComponentTheme<TabsStyles, Output>;
-  textField?: ComponentTheme<TextFieldStyles, Output>;
-};
+export type Components<Output extends 'input' | 'output' | unknown = unknown> =
+  {
+    button?: ComponentTheme<ButtonStyles, Output>;
+    checkbox?: ComponentTheme<CheckboxStyles, Output>;
+    divider?: ComponentTheme<DividerStyles, Output>;
+    errorMessage?: ComponentTheme<ErrorMessageStyles, Output>;
+    heading?: ComponentTheme<HeadingStyles, Output>;
+    icon?: ComponentTheme<IconStyles, Output>;
+    iconButton?: ComponentTheme<IconButtonStyles, Output>;
+    label?: ComponentTheme<LabelStyles, Output>;
+    passwordField?: ComponentTheme<PasswordFieldStyles, Output>;
+    phoneNumberField?: ComponentTheme<PhoneNumberFieldStyles, Output>;
+    radio?: ComponentTheme<RadioStyles, Output>;
+    radioGroup?: ComponentTheme<RadioGroupStyles, Output>;
+    tabs?: ComponentTheme<TabsStyles, Output>;
+    textField?: ComponentTheme<TextFieldStyles, Output>;
+  };
 
 export type ColorMode = 'light' | 'dark' | 'system' | null;
 export type Override = Omit<Theme, 'overrides'> & {

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '1.2.20';
+export const VERSION = '1.2.21';