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

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

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultContainer renders as expected with children 1`] = `
+<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
+        accessibilityRole="button"
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "transparent",
+              "borderRadius": 4,
+              "justifyContent": "center",
+              "paddingHorizontal": 16,
+              "paddingVertical": 12,
+            },
+            Object {
+              "borderColor": "hsl(210, 8%, 55%)",
+              "borderWidth": 1,
+            },
+            null,
+            null,
+            undefined,
+          ]
+        }
+        testID="testButton"
+      />
+    </View>
+  </RCTScrollView>
+</View>
+`;

package/src/Authenticator/common/DefaultContainer/index.ts

@@ -0,0 +1,3 @@
+export { default as DefaultContainer } from './DefaultContainer';
+export { default as InnerContainer } from './InnerContainer';
+export { DefaultContainerComponent } from './types';

package/src/Authenticator/common/DefaultContainer/styles.ts

@@ -0,0 +1,40 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { StrictTheme } from 'src/theme';
+
+import { ContainerStyles, InnerContainerStyles } from './types';
+
+export const getThemedStyles = (
+  { tokens: { colors } }: StrictTheme,
+  insetPadding: Pick<
+    ViewStyle,
+    'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop'
+  >
+): Required<ContainerStyles> => {
+  return StyleSheet.create({
+    keyboardAvoidingView: {
+      alignContent: 'center',
+      backgroundColor: colors.background.primary,
+      justifyContent: 'center',
+      flex: 1,
+      // TDOO: add theme override
+    },
+    scrollViewContentContainer: {
+      ...insetPadding,
+      alignContent: 'center',
+      justifyContent: 'center',
+      flexGrow: 1,
+      // TDOO: add theme override
+    },
+    scrollView: {}, // TDOO: add theme override
+  });
+};
+
+export const getInnerContainerStyles = ({
+  tokens: { space },
+}: StrictTheme): InnerContainerStyles =>
+  StyleSheet.create({
+    container: {
+      marginHorizontal: space.medium,
+      // TDOO: add theme override
+    },
+  });

package/src/Authenticator/common/DefaultContainer/types.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  KeyboardAvoidingViewProps,
+  ScrollViewProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+export interface ContainerStyles {
+  keyboardAvoidingView?: ViewStyle;
+  scrollViewContentContainer?: ViewStyle;
+  scrollView?: ViewStyle;
+}
+
+export interface ContainerProps
+  extends ScrollViewProps,
+    Pick<KeyboardAvoidingViewProps, 'behavior' | 'keyboardVerticalOffset'> {
+  children: React.ReactNode;
+  keyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
+  scrollViewContentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export type DefaultContainerComponent<P = {}> = React.ComponentType<
+  ContainerProps & P
+>;
+
+export interface InnerContainerStyles {
+  container: ViewStyle;
+}

package/src/Authenticator/common/DefaultContent/DefaultContent.tsx

@@ -0,0 +1,92 @@
+import React, { Fragment, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Button, Label, ErrorMessage } from '../../../primitives';
+import { TextFieldOptionsType, RadioFieldOptions } from '../../hooks';
+import { StrictTheme, useTheme } from '../../../theme';
+
+import { getDefaultStyle } from './styles';
+import { DefaultContentProps } from './types';
+
+function useThemedStyles<Style>(getStyle: (theme: StrictTheme) => Style) {
+  const theme = useTheme();
+  return useMemo(() => getStyle(theme), [getStyle, theme]);
+}
+
+export default function DefaultContent<
+  FieldsType extends TextFieldOptionsType | RadioFieldOptions
+>({
+  body,
+  buttons: { primary, links, secondary },
+  error,
+  fields,
+  Footer,
+  FormFields,
+  isPending,
+  Header,
+  headerText,
+  validationErrors,
+}: DefaultContentProps<FieldsType>): JSX.Element {
+  const themedStyles = useThemedStyles(getDefaultStyle);
+
+  const linkButtons = useMemo(
+    () =>
+      links?.length ? (
+        <View style={themedStyles.linksContainer}>
+          {links.map((button) => (
+            <Fragment key={`${button.children}`}>
+              <Button {...button} style={themedStyles.link} variant="link" />
+            </Fragment>
+          ))}
+        </View>
+      ) : null,
+    [links, themedStyles]
+  );
+
+  return (
+    <>
+      <Header style={themedStyles.header}>{headerText}</Header>
+      {body ? (
+        typeof body === 'string' ? (
+          <Label style={themedStyles.body}>{body}</Label>
+        ) : (
+          body
+        )
+      ) : null}
+      <FormFields
+        fieldContainerStyle={themedStyles.fieldContainer}
+        fieldErrorsContainer={themedStyles.fieldErrorsContainer}
+        fieldErrorStyle={themedStyles.fieldError}
+        fieldLabelStyle={themedStyles.fieldLabel}
+        fieldStyle={themedStyles.fieldStyle}
+        fields={fields}
+        isPending={isPending}
+        validationErrors={validationErrors}
+        style={themedStyles.formFields}
+      />
+      {error ? (
+        <ErrorMessage
+          style={themedStyles.errorMessage}
+          labelStyle={themedStyles.errorMessageLabel}
+        >
+          {error}
+        </ErrorMessage>
+      ) : null}
+      <Button
+        {...primary}
+        variant="primary"
+        textStyle={themedStyles.buttonPrimaryLabel}
+        style={themedStyles.buttonPrimary}
+      />
+      {secondary ? (
+        <Button
+          {...secondary}
+          textStyle={themedStyles.buttonSecondaryLabel}
+          style={themedStyles.buttonSecondary}
+        />
+      ) : null}
+      {linkButtons}
+      <Footer style={themedStyles.footer} />
+    </>
+  );
+}

package/src/Authenticator/common/DefaultContent/index.ts

@@ -0,0 +1 @@
+export { default as DefaultContent } from './DefaultContent';

package/src/Authenticator/common/DefaultContent/styles.ts

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../../theme';
+import { DefaultContentStyle } from './types';
+
+export const getDefaultStyle = ({
+  tokens: { colors, fontSizes, space },
+}: StrictTheme): Required<DefaultContentStyle> =>
+  StyleSheet.create({
+    body: {
+      fontSize: fontSizes.medium,
+      paddingHorizontal: space.small,
+    },
+    buttonPrimary: {
+      marginHorizontal: space.medium,
+      marginVertical: space.small,
+    },
+    buttonPrimaryLabel: {}, // themed value only
+    buttonSecondary: {
+      marginHorizontal: space.medium,
+    },
+    buttonSecondaryLabel: {}, // themed value only
+    errorMessage: {
+      marginVertical: space.small,
+    },
+    errorMessageLabel: {}, // themed value only
+    fieldContainer: {
+      paddingHorizontal: space.small,
+    }, // themed value only
+    fieldErrorsContainer: {
+      paddingHorizontal: space.medium,
+      paddingVertical: space.xs,
+    },
+    fieldError: {
+      color: colors.font.error,
+      paddingVertical: 1,
+    }, // themed value only
+    fieldLabel: {}, // themed value only
+    fieldStyle: {}, // themed value only
+    footer: {}, // themed value only
+    formFields: {
+      paddingBottom: space.xs,
+    },
+    header: {
+      marginVertical: space.small,
+      paddingHorizontal: space.small,
+    },
+    link: {
+      marginVertical: space.xs,
+      minWidth: '50%',
+    },
+    linksContainer: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+    },
+  });

package/src/Authenticator/common/DefaultContent/types.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import {
+  AuthenticatorComponentDefaultProps,
+  AuthenticatorHeaderComponent,
+  AuthenticatorFooterComponent,
+  AuthenticatorMachineContext,
+  AuthenticatorRouteComponentName,
+} from '@aws-amplify/ui-react-core';
+
+import { ButtonProps } from '../../../primitives';
+
+import {
+  DefaultFormFieldsComponent,
+  DefaultFormFieldsStyle,
+} from '../../common';
+import { TextFieldOptionsType, RadioFieldOptions } from '../../hooks';
+
+export interface DefaultContentStyle {
+  body?: TextStyle;
+  buttonPrimary?: ViewStyle;
+  buttonPrimaryLabel?: TextStyle;
+  buttonSecondary?: ViewStyle;
+  buttonSecondaryLabel?: TextStyle;
+  errorMessage?: ViewStyle;
+  errorMessageLabel?: TextStyle;
+  fieldErrorsContainer?: ViewStyle;
+  fieldContainer?: ViewStyle;
+  fieldError?: TextStyle;
+  fieldLabel?: TextStyle;
+  fieldStyle?: TextStyle;
+  footer?: TextStyle;
+  formFields?: ViewStyle;
+  header?: TextStyle;
+  link?: ViewStyle;
+  linksContainer?: ViewStyle;
+}
+
+export type DefaultContentStyleProps = {
+  [Key in keyof DefaultContentStyle]: StyleProp<DefaultContentStyle[Key]>;
+} & DefaultFormFieldsStyle;
+
+type DefaultComponentProps<FieldsType> =
+  AuthenticatorComponentDefaultProps<FieldsType>[AuthenticatorRouteComponentName];
+
+type AuthenticatorButtonProps = Omit<ButtonProps, 'children'> & {
+  children: string;
+};
+
+type DefaultButtons = {
+  primary: AuthenticatorButtonProps;
+  secondary?: AuthenticatorButtonProps;
+  links?: AuthenticatorButtonProps[];
+};
+
+export type DefaultContentProps<
+  FieldsType extends
+    | TextFieldOptionsType
+    | RadioFieldOptions
+    | unknown = unknown
+> = Pick<
+  DefaultComponentProps<FieldsType>,
+  'error' | 'Footer' | 'isPending'
+> & {
+  buttons: DefaultButtons;
+  body?: React.ReactNode;
+  fields: FieldsType[];
+  headerText: string;
+  Footer: AuthenticatorFooterComponent<{ style?: StyleProp<TextStyle> }>;
+  FormFields: DefaultFormFieldsComponent<FieldsType>;
+  Header: AuthenticatorHeaderComponent<{ style?: StyleProp<TextStyle> }>;
+  validationErrors?: AuthenticatorMachineContext['validationErrors'];
+};

package/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { DefaultFooterProps } from './types';
+
+export default function DefaultFooter({
+  children,
+  ...rest
+}: DefaultFooterProps): JSX.Element | null {
+  return children ? <View {...rest}>{children}</View> : null;
+}

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

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

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultFooter renders as expected with children 1`] = `
+<View>
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "borderColor": "hsl(210, 8%, 55%)",
+          "borderWidth": 1,
+        },
+        null,
+        null,
+        undefined,
+      ]
+    }
+    testID="testButton"
+  />
+</View>
+`;
+
+exports[`DefaultFooter renders as expected without children 1`] = `null`;

package/src/Authenticator/common/DefaultFooter/index.ts

@@ -0,0 +1,2 @@
+export { default as DefaultFooter } from './DefaultFooter';
+export { DefaultFooterProps } from './types';

package/src/Authenticator/common/DefaultFooter/types.ts

@@ -0,0 +1,3 @@
+import { ViewProps } from 'react-native';
+
+export interface DefaultFooterProps extends ViewProps {}

package/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { censorAllButFirstAndLast, censorPhoneNumber } from '@aws-amplify/ui';
+
+import { Radio, RadioGroup } from '../../../primitives';
+import { DefaultRadioFormFieldsComponent } from './types';
+
+const censorContactInformation = (name: string, value: string): string => {
+  let censoredVal = value;
+  if (name === 'email') {
+    const splitEmail = value.split('@');
+    const censoredName = censorAllButFirstAndLast(splitEmail[0]);
+
+    censoredVal = `${censoredName}@${splitEmail[1]}`;
+  } else if (name === 'phone_number') {
+    censoredVal = censorPhoneNumber(value);
+  }
+  return censoredVal;
+};
+
+const DefaultFormFields: DefaultRadioFormFieldsComponent = ({
+  fields,
+  isPending,
+  fieldContainerStyle,
+  fieldLabelStyle,
+  style,
+}) => {
+  return (
+    <RadioGroup disabled={isPending} style={style}>
+      {fields.map(({ name, value, ...props }) => (
+        <Radio
+          {...props}
+          key={value}
+          // value has to be name, because Auth is only interested in the
+          // string "email" or "phone_number", not the actual value
+          value={name}
+          label={censorContactInformation(name, value)}
+          labelStyle={fieldLabelStyle}
+          style={fieldContainerStyle}
+        />
+      ))}
+    </RadioGroup>
+  );
+};
+
+export default DefaultFormFields;

package/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx

@@ -0,0 +1,60 @@
+import React, { Fragment } from 'react';
+import { View } from 'react-native';
+
+import { getErrors } from '@aws-amplify/ui';
+
+import {
+  PasswordField,
+  PhoneNumberField,
+  TextField,
+} from '../../../primitives';
+
+import { FieldErrors } from './FieldErrors';
+import { DefaultTextFormFieldsComponent } from './types';
+
+const DefaultTextFormFields: DefaultTextFormFieldsComponent = ({
+  fieldContainerStyle,
+  fieldErrorsContainer,
+  fieldErrorStyle,
+  fieldStyle,
+  fields = [],
+  isPending,
+  style,
+  validationErrors,
+}) => {
+  const formFields = fields.map(({ name, type, ...field }) => {
+    const errors = validationErrors ? getErrors(validationErrors?.[name]) : [];
+
+    const hasError = errors?.length > 0;
+
+    const Field =
+      type === 'password'
+        ? PasswordField
+        : type === 'phone'
+        ? PhoneNumberField
+        : TextField;
+
+    return (
+      <Fragment key={name}>
+        <Field
+          {...field}
+          disabled={isPending}
+          error={hasError}
+          fieldStyle={fieldStyle}
+          key={name}
+          style={fieldContainerStyle}
+        />
+        <FieldErrors
+          errors={errors}
+          errorStyle={fieldErrorStyle}
+          style={fieldErrorsContainer}
+        />
+      </Fragment>
+    );
+  });
+  return <View style={style}>{formFields}</View>;
+};
+
+DefaultTextFormFields.displayName = 'DefaultTextFormFields';
+
+export default DefaultTextFormFields;

package/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { FieldErrorsProps } from './types';
+
+export const FieldErrors = ({
+  errors,
+  errorStyle,
+  style,
+}: FieldErrorsProps): JSX.Element | null => {
+  if (!errors || !errors.length) {
+    return null;
+  }
+
+  return (
+    <View style={style}>
+      {errors.map((error) => (
+        <Text key={error} style={errorStyle}>
+          {error}
+        </Text>
+      ))}
+    </View>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import DefaultFormFields from '../DefaultTextFormFields';
+
+describe('DefaultFormFields', () => {
+  it('renders as expected', () => {
+    const { toJSON } = render(
+      <DefaultFormFields fields={[]} isPending={false} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(toJSON()).toBeDefined();
+  });
+});

package/src/Authenticator/common/DefaultFormFields/__tests__/FieldErrors.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { FieldErrors } from '../FieldErrors';
+
+describe('FieldErrors', () => {
+  it('renders as expected', () => {
+    const errors = ['error 1', 'error 2'];
+    const { toJSON, findByText } = render(
+      <FieldErrors
+        errors={errors}
+        errorStyle={{ color: 'red' }}
+        style={{ backgroundColor: 'black' }}
+      />
+    );
+
+    expect(findByText('error 1')).toBeDefined();
+    expect(findByText('error 2')).toBeDefined();
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected with no errors', () => {
+    const { toJSON } = render(<FieldErrors errors={[]} />);
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(toJSON()).toBe(null);
+  });
+});

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultFormFields renders as expected 1`] = `<View />`;