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

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

@@ -0,0 +1,507 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextField doesn't render the errorMessage if error prop is false 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      undefined,
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      placeholder="Placeholder"
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="textInput"
+    />
+  </View>
+</View>
+`;
+
+exports[`TextField doesn't render the errorMessage if errorMessage prop is undefined 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      undefined,
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      placeholder="Placeholder"
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="textInput"
+    />
+  </View>
+</View>
+`;
+
+exports[`TextField renders as expected 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      undefined,
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      placeholder="Placeholder"
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="textInput"
+    />
+  </View>
+</View>
+`;
+
+exports[`TextField renders as expected as password field 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      undefined,
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      placeholder="Placeholder"
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      secureTextEntry={true}
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="textInput"
+    />
+  </View>
+</View>
+`;
+
+exports[`TextField renders as expected when disabled 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      undefined,
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "opacity": 0.6,
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": true,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={false}
+      placeholder="Placeholder"
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="textInput"
+    />
+  </View>
+</View>
+`;
+
+exports[`TextField renders as expected with error message 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      undefined,
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      placeholder="Placeholder"
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      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/index.ts

@@ -0,0 +1,2 @@
+export { default as TextField } from './TextField';
+export { TextFieldProps, TextFieldStyles } from './types';

package/src/primitives/TextField/styles.ts

@@ -0,0 +1,47 @@
+import { Platform, StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../theme';
+import { getLineHeight } from '../../utils';
+import { TextFieldStyles } from './types';
+
+export const getThemedStyles = (theme: StrictTheme): TextFieldStyles => {
+  const {
+    components,
+    tokens: { colors, fontSizes, opacities, space, radii, borderWidths },
+  } = theme;
+
+  return StyleSheet.create({
+    container: {
+      alignItems: 'flex-start',
+      ...components?.textField?.container,
+    },
+    disabled: {
+      opacity: opacities[60],
+      ...components?.textField?.disabled,
+    },
+    fieldContainer: {
+      alignItems: 'center',
+      borderColor: colors.border.primary,
+      borderRadius: radii.small,
+      borderWidth: borderWidths.small,
+      flexDirection: 'row',
+      paddingHorizontal: space.xs,
+      ...components?.textField?.fieldContainer,
+    },
+    field: {
+      color: colors.font.primary,
+      fontSize: fontSizes.medium,
+      flexGrow: 1,
+      paddingVertical: space.small,
+      // this is needed because of extra padding inside the input - in Android only
+      ...(Platform.OS === 'android' && { padding: 0 }),
+      ...components?.textField?.field,
+    },
+    label: {
+      color: colors.font.secondary,
+      lineHeight: getLineHeight(fontSizes.small),
+      padding: space.xxs,
+      ...components?.textField?.label,
+    },
+  });
+};

package/src/primitives/TextField/types.ts

@@ -0,0 +1,66 @@
+import { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import { LabelProps } from '../Label/types';
+
+export interface TextFieldProps extends Omit<TextInputProps, 'editable'> {
+  /**
+   * @description
+   * Styling for TextField container
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * @description
+   * A Boolean attribute indicating that the user cannot interact with the control
+   */
+  disabled?: boolean;
+
+  /**
+   * @description
+   * Indicates whether the TextField component has an error
+   */
+  error?: boolean;
+
+  /**
+   * @description
+   *  When defined and `error` is true, show error message
+   */
+  errorMessage?: string;
+
+  /**
+   * @description
+   *  Styling for error message
+   */
+  errorMessageStyle?: StyleProp<TextStyle>;
+
+  /**
+   * @description
+   * Label text for field
+   */
+  label?: string;
+
+  /**
+   * @description
+   * Styling for the label
+   */
+  labelStyle?: LabelProps['style'];
+
+  /**
+   * @description
+   * Styling for the input field
+   */
+  fieldStyle?: StyleProp<TextStyle>;
+
+  /**
+   * @description
+   * Component(s) to show after input
+   */
+  endAccessory?: React.ReactNode;
+}
+
+export interface TextFieldStyles {
+  container?: ViewStyle;
+  disabled?: ViewStyle;
+  field?: TextStyle;
+  fieldContainer?: ViewStyle;
+  label?: TextStyle;
+}

package/src/primitives/index.ts

@@ -1,8 +1,15 @@
 export * from './Button';
 export * from './Carousel';
 export * from './Checkbox';
+export * from './Divider';
+export * from './ErrorMessage';
 export * from './Heading';
 export * from './Icon';
 export * from './IconButton';
 export * from './Label';
+export * from './PasswordField';
+export * from './PhoneNumberField';
 export * from './Radio';
+export * from './RadioGroup';
+export * from './Tabs';
+export * from './TextField';

package/src/theme/ThemeContext.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import { createTheme } from './createTheme';
+import { StrictTheme } from './types';
+
+export interface ThemeContextType {
+  theme: StrictTheme;
+}
+
+export const ThemeContext = React.createContext<ThemeContextType>({
+  theme: createTheme(),
+});

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { createTheme } from './createTheme';
+import { ColorMode, Theme } from './types';
+import { ThemeContext } from './ThemeContext';
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  theme?: Theme;
+  colorMode?: ColorMode;
+}
+
+export const ThemeProvider = ({
+  children,
+  theme,
+  colorMode,
+}: ThemeProviderProps): JSX.Element => {
+  const value = React.useMemo(
+    () => ({ theme: createTheme(theme, colorMode) }),
+    [theme, colorMode]
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};

package/src/theme/__tests__/ThemeProvider.spec.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../ThemeProvider';
+import { Label } from '../../primitives';
+
+const labelText = 'The answer is 42';
+const App = () => {
+  return <Label>{labelText}</Label>;
+};
+
+describe('ThemeProvider', () => {
+  it('renders without props', () => {
+    const { getByText } = render(
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
+    );
+
+    const label = getByText(labelText);
+    expect(label).toBeDefined();
+  });
+});