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

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FieldErrors renders as expected 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "black",
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "red",
+      }
+    }
+  >
+    error 1
+  </Text>
+  <Text
+    style={
+      Object {
+        "color": "red",
+      }
+    }
+  >
+    error 2
+  </Text>
+</View>
+`;
+
+exports[`FieldErrors renders as expected with no errors 1`] = `null`;

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

@@ -0,0 +1,3 @@
+export { default as DefaultRadioFormFields } from './DefaultRadioFormFields';
+export { default as DefaultTextFormFields } from './DefaultTextFormFields';
+export { DefaultFormFieldsComponent, DefaultFormFieldsStyle } from './types';

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

@@ -0,0 +1,28 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { AuthenticatorFormFieldsComponent } from '@aws-amplify/ui-react-core';
+
+import { RadioFieldOptions, TextFieldOptionsType } from '../../hooks';
+
+export interface FieldErrorsProps {
+  errors: string[];
+  errorStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface DefaultFormFieldsStyle {
+  fieldContainerStyle?: StyleProp<ViewStyle>;
+  fieldErrorsContainer?: FieldErrorsProps['style'];
+  fieldErrorStyle?: FieldErrorsProps['errorStyle'];
+  fieldLabelStyle?: StyleProp<TextStyle>;
+  fieldStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export type DefaultFormFieldsComponent<FieldsType> =
+  AuthenticatorFormFieldsComponent<FieldsType, DefaultFormFieldsStyle>;
+
+export type DefaultTextFormFieldsComponent =
+  DefaultFormFieldsComponent<TextFieldOptionsType>;
+
+export type DefaultRadioFormFieldsComponent =
+  DefaultFormFieldsComponent<RadioFieldOptions>;

package/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Heading } from '../../../primitives/Heading';
+import { DefaultHeaderProps } from './types';
+
+export default function DefaultHeader({
+  children,
+  level = 3,
+  ...rest
+}: DefaultHeaderProps): JSX.Element | null {
+  return children ? (
+    <Heading {...rest} level={level}>
+      {children}
+    </Heading>
+  ) : null;
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { DefaultHeader } from '..';
+
+const heading = 'test';
+
+describe('DefaultHeader', () => {
+  it('renders as expected with children', () => {
+    const { toJSON, getByRole, getByText } = render(
+      <DefaultHeader>{heading}</DefaultHeader>
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByRole('header')).toBeDefined();
+    expect(getByText(heading)).toBeDefined();
+  });
+
+  it('renders as expected without children', () => {
+    const { toJSON } = render(<DefaultHeader />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultHeader renders as expected with children 1`] = `
+<Text
+  accessibilityRole="header"
+  style={
+    Array [
+      Object {
+        "color": "hsl(210, 50%, 10%)",
+      },
+      Object {
+        "fontSize": 24,
+        "fontWeight": "300",
+        "lineHeight": 36,
+      },
+      undefined,
+    ]
+  }
+>
+  test
+</Text>
+`;
+
+exports[`DefaultHeader renders as expected without children 1`] = `null`;

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

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

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

@@ -0,0 +1,3 @@
+import { HeadingProps } from '../../../primitives/Heading';
+
+export interface DefaultHeaderProps extends HeadingProps {}

package/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx

@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
+
+import { Button, Icon, Label } from '../../../primitives';
+
+import { styles } from './styles';
+import { FederatedProviderButtonProps } from './types';
+
+export default function FederatedProviderButton({
+  children,
+  source,
+  style,
+  textStyle,
+  ...rest
+}: FederatedProviderButtonProps): JSX.Element {
+  const containerStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
+      const pressedStateStyle =
+        typeof style === 'function' ? style({ pressed }) : style;
+      return [styles.container, pressedStateStyle];
+    },
+    [style]
+  );
+
+  return (
+    <Button {...rest} style={containerStyle}>
+      {source ? <Icon source={source} style={styles.icon} size={20} /> : null}
+      <Label style={[styles.label, textStyle]}>{children}</Label>
+    </Button>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { icons } from '../../../../assets';
+import FederatedProviderButton from '../FederatedProviderButton';
+
+const signInText = 'Sign In with Amazon';
+
+/* TODO: Add more tests */
+describe('FederatedProviderButton', () => {
+  it('renders default button as expected', () => {
+    const { toJSON } = render(
+      <FederatedProviderButton source={icons.amazonLogo}>
+        {signInText}
+      </FederatedProviderButton>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('handles an onPress callback', () => {
+    const toFederatedSignInMock = jest.fn();
+    const { getByText } = render(
+      <FederatedProviderButton
+        source={icons.amazonLogo}
+        onPress={toFederatedSignInMock}
+      >
+        {signInText}
+      </FederatedProviderButton>
+    );
+
+    const button = getByText(signInText);
+    fireEvent.press(button);
+
+    expect(toFederatedSignInMock).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FederatedProviderButton renders default button as expected 1`] = `
+<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,
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 4,
+          "borderWidth": 0.5,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "paddingVertical": 8,
+          "width": "100%",
+        },
+        undefined,
+      ],
+    ]
+  }
+>
+  <Image
+    accessibilityRole="image"
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/amazonLogo.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 20,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 20,
+        },
+        Object {
+          "paddingHorizontal": 16,
+        },
+      ]
+    }
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "fontWeight": "400",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Sign In with Amazon
+  </Text>
+</View>
+`;

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

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

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

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+import { FederatedProviderButtonStyles } from './types';
+
+export const styles: FederatedProviderButtonStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderRadius: 4,
+    borderWidth: StyleSheet.hairlineWidth,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingVertical: 8,
+    width: '100%',
+  },
+  icon: {
+    paddingHorizontal: 16,
+  },
+  label: {
+    fontWeight: '400',
+  },
+});

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

@@ -0,0 +1,18 @@
+import {
+  ImageSourcePropType,
+  ImageStyle,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import { ButtonProps } from '../../../primitives';
+
+export interface FederatedProviderButtonProps extends ButtonProps {
+  source: ImageSourcePropType;
+}
+
+export interface FederatedProviderButtonStyles {
+  container: ViewStyle;
+  icon: ImageStyle;
+  label: TextStyle;
+}

package/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+
+import { icons } from '../../../assets';
+import { capitalize } from '../../../utils';
+import { FederatedProviderButton } from '../FederatedProviderButton';
+import { Divider } from '../../../primitives';
+
+import { styles } from './styles';
+import { FederatedProviderButtonsProps } from './types';
+
+export default function FederatedProviderButtons({
+  socialProviders,
+  toFederatedSignIn,
+}: FederatedProviderButtonsProps): JSX.Element | null {
+  const providerButtons = useMemo(
+    () =>
+      socialProviders?.map((provider) => {
+        const providerIconSource = icons[`${provider}Logo`];
+
+        const handlePress = () => {
+          toFederatedSignIn({ provider });
+        };
+
+        return (
+          <FederatedProviderButton
+            key={provider}
+            onPress={handlePress}
+            source={providerIconSource}
+            style={styles.button}
+          >
+            {`Sign In with ${capitalize(provider)}`}
+          </FederatedProviderButton>
+        );
+      }),
+    [socialProviders, toFederatedSignIn]
+  );
+
+  return providerButtons?.length ? (
+    <View style={styles.container}>
+      {providerButtons}
+      <Divider labelStyle={styles.text}>Or</Divider>
+    </View>
+  ) : null;
+}

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import FederatedProviderButtons from '../FederatedProviderButtons';
+
+const toFederatedSignIn = jest.fn();
+const providerButtonText = 'Sign In with Amazon';
+
+describe('FederatedProviderButtons', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders as expected', () => {
+    const { getByText, toJSON } = render(
+      <FederatedProviderButtons
+        socialProviders={['amazon']}
+        toFederatedSignIn={toFederatedSignIn}
+      />
+    );
+
+    const providerButton = getByText(providerButtonText);
+    expect(providerButton).toBeDefined();
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders null when socialProviders is empty', () => {
+    const { toJSON } = render(
+      <FederatedProviderButtons
+        socialProviders={[]}
+        toFederatedSignIn={toFederatedSignIn}
+      />
+    );
+
+    expect(toJSON()).toBe(null);
+  });
+
+  it('calls toFederatedSignIn with the expected provider on press', () => {
+    const provider = 'amazon';
+    const { getByText } = render(
+      <FederatedProviderButtons
+        socialProviders={[provider]}
+        toFederatedSignIn={toFederatedSignIn}
+      />
+    );
+
+    const providerButton = getByText(providerButtonText);
+    expect(providerButton).toBeDefined();
+
+    fireEvent.press(providerButton);
+
+    expect(toFederatedSignIn).toBeCalledWith({ provider });
+  });
+});

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

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FederatedProviderButtons renders as expected 1`] = `
+<View
+  style={
+    Object {
+      "paddingVertical": 4,
+    }
+  }
+>
+  <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,
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 4,
+            "borderWidth": 0.5,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "paddingVertical": 8,
+            "width": "100%",
+          },
+          Object {
+            "marginVertical": 8,
+          },
+        ],
+      ]
+    }
+  >
+    <Image
+      accessibilityRole="image"
+      source={
+        Object {
+          "testUri": "../../../src/assets/icons/amazonLogo.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": 20,
+            "resizeMode": "contain",
+            "tintColor": undefined,
+            "width": 20,
+          },
+          Object {
+            "paddingHorizontal": 16,
+          },
+        ]
+      }
+    />
+    <Text
+      accessibilityRole="text"
+      style={
+        Array [
+          Object {
+            "fontSize": 14,
+            "fontWeight": "400",
+            "lineHeight": 21,
+          },
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+          },
+          Array [
+            Object {
+              "fontWeight": "400",
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      Sign In with Amazon
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "hsl(0, 0%, 0%)",
+            "flex": 1,
+            "height": 0.5,
+          },
+          undefined,
+        ]
+      }
+      testID="amplify__divider__line"
+    />
+    <Text
+      accessibilityRole="text"
+      style={
+        Array [
+          Object {
+            "fontSize": 14,
+            "fontWeight": "400",
+            "lineHeight": 21,
+          },
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+          },
+          Array [
+            Object {
+              "fontSize": 16,
+              "margin": 16,
+              "textAlign": "center",
+            },
+            Object {
+              "paddingVertical": 8,
+              "textAlign": "center",
+            },
+          ],
+        ]
+      }
+    >
+      Or
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "hsl(0, 0%, 0%)",
+            "flex": 1,
+            "height": 0.5,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+</View>
+`;

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

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

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

@@ -0,0 +1,7 @@
+import { FederatedProviderButtonStyle } from './types';
+
+export const styles: FederatedProviderButtonStyle = {
+  button: { marginVertical: 8 },
+  container: { paddingVertical: 4 },
+  text: { paddingVertical: 8, textAlign: 'center' },
+};

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

@@ -0,0 +1,16 @@
+import { TextStyle, ViewStyle } from 'react-native';
+
+import { AuthenticatorMachineContext } from '@aws-amplify/ui-react-core';
+
+// TODO extend from ViewProps, add button style related style props
+export interface FederatedProviderButtonsProps
+  extends Pick<
+    AuthenticatorMachineContext,
+    'socialProviders' | 'toFederatedSignIn'
+  > {}
+
+export interface FederatedProviderButtonStyle {
+  button: ViewStyle;
+  container: ViewStyle;
+  text: TextStyle;
+}

package/src/Authenticator/common/index.ts

@@ -0,0 +1,7 @@
+export * from './DefaultContainer';
+export * from './DefaultContent';
+export * from './DefaultFooter';
+export * from './DefaultFormFields';
+export * from './DefaultHeader';
+export * from './FederatedProviderButton';
+export * from './FederatedProviderButtons';

package/src/Authenticator/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useFieldValues';
+export * from './types';