@aws-amplify/ui-react-native 0.0.0-fileuploader-41bde68-20221115171326

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

@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heading applies style props 1`] = `
+<Text
+  accessibilityRole="header"
+  style={
+    Array [
+      Object {
+        "color": "black",
+      },
+      Object {
+        "fontSize": 16,
+        "fontWeight": "900",
+        "lineHeight": 24,
+      },
+      Object {
+        "color": "red",
+      },
+    ]
+  }
+>
+  Test Heading
+</Text>
+`;
+
+exports[`Heading renders a level 1 Heading as expected 1`] = `
+<Text
+  accessibilityRole="header"
+  style={
+    Array [
+      Object {
+        "color": "black",
+      },
+      Object {
+        "fontSize": 56,
+        "fontWeight": "100",
+        "lineHeight": 84,
+      },
+      undefined,
+    ]
+  }
+>
+  Heading level 1
+</Text>
+`;
+
+exports[`Heading renders a level 2 Heading as expected 1`] = `
+<Text
+  accessibilityRole="header"
+  style={
+    Array [
+      Object {
+        "color": "black",
+      },
+      Object {
+        "fontSize": 44,
+        "fontWeight": "200",
+        "lineHeight": 66,
+      },
+      undefined,
+    ]
+  }
+>
+  Heading level 2
+</Text>
+`;
+
+exports[`Heading renders a level 3 Heading as expected 1`] = `
+<Text
+  accessibilityRole="header"
+  style={
+    Array [
+      Object {
+        "color": "black",
+      },
+      Object {
+        "fontSize": 34,
+        "fontWeight": "300",
+        "lineHeight": 51,
+      },
+      undefined,
+    ]
+  }
+>
+  Heading level 3
+</Text>
+`;
+
+exports[`Heading renders a level 4 Heading as expected 1`] = `
+<Text
+  accessibilityRole="header"
+  style={
+    Array [
+      Object {
+        "color": "black",
+      },
+      Object {
+        "fontSize": 26,
+        "fontWeight": "500",
+        "lineHeight": 39,
+      },
+      undefined,
+    ]
+  }
+>
+  Heading level 4
+</Text>
+`;
+
+exports[`Heading renders a level 5 Heading as expected 1`] = `
+<Text
+  accessibilityRole="header"
+  style={
+    Array [
+      Object {
+        "color": "black",
+      },
+      Object {
+        "fontSize": 20,
+        "fontWeight": "700",
+        "lineHeight": 30,
+      },
+      undefined,
+    ]
+  }
+>
+  Heading level 5
+</Text>
+`;
+
+exports[`Heading renders a level 6 Heading as expected 1`] = `
+<Text
+  accessibilityRole="header"
+  style={
+    Array [
+      Object {
+        "color": "black",
+      },
+      Object {
+        "fontSize": 16,
+        "fontWeight": "900",
+        "lineHeight": 24,
+      },
+      undefined,
+    ]
+  }
+>
+  Heading level 6
+</Text>
+`;

package/src/primitives/Heading/index.ts

@@ -0,0 +1,2 @@
+export { default as Heading } from './Heading';
+export { HeadingProps, HeadingStyles } from './types';

package/src/primitives/Heading/styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+import { getLineHeight } from '../../utils';
+import { HeadingStyles } from './types';
+
+export const styles: HeadingStyles = StyleSheet.create({
+  text: {
+    color: 'black',
+  },
+  // these values are completely arbitrary for now
+  1: { fontSize: 56, fontWeight: '100', lineHeight: getLineHeight(56) },
+  2: { fontSize: 44, fontWeight: '200', lineHeight: getLineHeight(44) },
+  3: { fontSize: 34, fontWeight: '300', lineHeight: getLineHeight(34) },
+  4: { fontSize: 26, fontWeight: '500', lineHeight: getLineHeight(26) },
+  5: { fontSize: 20, fontWeight: '700', lineHeight: getLineHeight(20) },
+  6: { fontSize: 16, fontWeight: '900', lineHeight: getLineHeight(16) },
+});

package/src/primitives/Heading/types.ts

@@ -0,0 +1,13 @@
+import { TextProps, TextStyle } from 'react-native';
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+
+export interface HeadingProps extends TextProps {
+  level?: Level;
+}
+
+export type HeadingStyles = {
+  text: TextStyle;
+} & {
+  [key in Level]: TextStyle;
+};

package/src/primitives/Icon/Icon.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+import { Animated, Image } from 'react-native';
+
+import { getStyles } from './styles';
+import { IconProps } from './types';
+
+export default function Icon({
+  animated,
+  color,
+  size,
+  style,
+  ...rest
+}: IconProps): JSX.Element {
+  const { icon } = useMemo(() => getStyles(color, size), [color, size]);
+
+  if (animated) {
+    return <Animated.Image {...rest} style={[icon, style]} />;
+  }
+  return <Image {...rest} style={[icon, style]} />;
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import Icon from '../Icon';
+
+const MOCK_SOURCE = { uri: 'mock.png' };
+
+describe('Icon', () => {
+  it('renders as expected', () => {
+    const { toJSON } = render(<Icon source={MOCK_SOURCE} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected with custom styles', () => {
+    const customStyle = { tintColor: 'red' };
+    const { toJSON } = render(
+      <Icon source={MOCK_SOURCE} style={customStyle} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders an animated icon', () => {
+    const { toJSON } = render(<Icon source={MOCK_SOURCE} animated />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon renders an animated icon 1`] = `
+<Image
+  collapsable={false}
+  source={
+    Object {
+      "uri": "mock.png",
+    }
+  }
+  style={
+    Object {
+      "height": undefined,
+      "resizeMode": "contain",
+      "tintColor": undefined,
+      "width": undefined,
+    }
+  }
+/>
+`;
+
+exports[`Icon renders as expected 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "mock.png",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "height": undefined,
+        "resizeMode": "contain",
+        "tintColor": undefined,
+        "width": undefined,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Icon renders as expected with custom styles 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "mock.png",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "height": undefined,
+        "resizeMode": "contain",
+        "tintColor": undefined,
+        "width": undefined,
+      },
+      Object {
+        "tintColor": "red",
+      },
+    ]
+  }
+/>
+`;

package/src/primitives/Icon/index.ts

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

package/src/primitives/Icon/styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+import { IconProps, IconStyles } from './types';
+
+export const getStyles = (
+  color: IconProps['color'],
+  size: IconProps['size']
+): IconStyles =>
+  StyleSheet.create({
+    icon: {
+      height: size,
+      resizeMode: 'contain',
+      tintColor: color,
+      width: size,
+    },
+  });

package/src/primitives/Icon/types.ts

@@ -0,0 +1,22 @@
+import { ColorValue, ImageProps, ImageStyle } from 'react-native';
+
+export interface IconStyles {
+  icon: ImageStyle;
+}
+
+export interface IconProps extends ImageProps {
+  /**
+   * Whether the icon is animated
+   */
+  animated?: boolean;
+
+  /**
+   * Color to be applied to the icon
+   */
+  color?: ColorValue;
+
+  /**
+   * Icon size
+   */
+  size?: number;
+}

package/src/primitives/IconButton/IconButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { Icon } from '../Icon';
+
+import { IconButtonProps } from './types';
+
+export default function IconButton({
+  color,
+  iconStyle,
+  source,
+  size = 16,
+  ...rest
+}: IconButtonProps): JSX.Element {
+  return (
+    <Pressable {...rest}>
+      <Icon color={color} size={size} source={source} style={iconStyle} />
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import IconButton from '../IconButton';
+
+const source = { uri: 'icon.png' };
+
+describe('IconButton', () => {
+  it('renders as expected', () => {
+    const iconButton = TestRenderer.create(<IconButton source={source} />);
+    expect(iconButton.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected with custom icon style', () => {
+    const iconButton = TestRenderer.create(
+      <IconButton
+        iconStyle={{ backgroundColor: 'antiquewhite' }}
+        source={source}
+      />
+    );
+    expect(iconButton.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton renders as expected 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <Image
+    source={
+      Object {
+        "uri": "icon.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 16,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 16,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`IconButton renders as expected with custom icon style 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <Image
+    source={
+      Object {
+        "uri": "icon.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 16,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 16,
+        },
+        Object {
+          "backgroundColor": "antiquewhite",
+        },
+      ]
+    }
+  />
+</View>
+`;

package/src/primitives/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { default as IconButton } from './IconButton';
+export { IconButtonProps, IconButtonStyles } from './types';

package/src/primitives/IconButton/types.ts

@@ -0,0 +1,33 @@
+import {
+  ColorValue,
+  ImageSourcePropType,
+  ImageStyle,
+  PressableProps,
+  StyleProp,
+} from 'react-native';
+
+export interface IconButtonStyles {
+  icon: ImageStyle;
+}
+
+export interface IconButtonProps extends PressableProps {
+  /**
+   * Color to be applied to the icon
+   */
+  color?: ColorValue;
+
+  /**
+   * Icon style properties
+   */
+  iconStyle?: StyleProp<ImageStyle>;
+
+  /**
+   * Icon source, only supports images at this time
+   */
+  source: ImageSourcePropType;
+
+  /**
+   * Icon size
+   */
+  size?: number;
+}

package/src/primitives/Label/Label.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { LabelProps } from './types';
+import { styles } from './styles';
+
+export default function Label({
+  accessibilityRole = 'text',
+  children,
+  style,
+  ...rest
+}: LabelProps): JSX.Element {
+  return (
+    <Text
+      {...rest}
+      accessibilityRole={accessibilityRole}
+      style={[styles.label, style]}
+    >
+      {children}
+    </Text>
+  );
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import Label from '../Label';
+
+describe('Label', () => {
+  it('renders a default Label', () => {
+    const defaultLabel = TestRenderer.create(<Label>Default Label</Label>);
+
+    expect(defaultLabel.toJSON()).toMatchSnapshot();
+  });
+
+  it('applies style props', () => {
+    const customStyle = { color: 'red' };
+
+    const styledLabel = TestRenderer.create(
+      <Label style={customStyle}>Red Label</Label>
+    );
+
+    expect(styledLabel.toJSON()).toMatchSnapshot();
+    expect(styledLabel.root.props.style).toBe(customStyle);
+  });
+});

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label applies style props 1`] = `
+<Text
+  accessibilityRole="text"
+  style={
+    Array [
+      Object {
+        "fontSize": 16,
+        "marginHorizontal": 4,
+        "marginVertical": 2,
+      },
+      Object {
+        "color": "red",
+      },
+    ]
+  }
+>
+  Red Label
+</Text>
+`;
+
+exports[`Label renders a default Label 1`] = `
+<Text
+  accessibilityRole="text"
+  style={
+    Array [
+      Object {
+        "fontSize": 16,
+        "marginHorizontal": 4,
+        "marginVertical": 2,
+      },
+      undefined,
+    ]
+  }
+>
+  Default Label
+</Text>
+`;

package/src/primitives/Label/index.ts

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

package/src/primitives/Label/styles.ts

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+import { LabelStyles } from './types';
+
+export const styles: LabelStyles = StyleSheet.create({
+  label: { fontSize: 16, marginVertical: 2, marginHorizontal: 4 },
+});

package/src/primitives/Label/types.ts

@@ -0,0 +1,8 @@
+import { TextProps, TextStyle } from 'react-native';
+
+export interface LabelProps extends TextProps {}
+
+export type LabelPosition = 'start' | 'end' | 'top' | 'bottom';
+export interface LabelStyles {
+  label: TextStyle;
+}

package/src/primitives/Label/utils.ts

@@ -0,0 +1,27 @@
+import { ViewStyle } from 'react-native';
+import { LabelPosition } from './types';
+
+const FLEX_DIRECTIONS: Record<LabelPosition, ViewStyle['flexDirection']> = {
+  start: 'row-reverse',
+  end: 'row',
+  top: 'column-reverse',
+  bottom: 'column',
+};
+
+/**
+ * The `flexDirection` value returned from `getFlexDirectionFromLabelPosition`
+ * assumes a `Label` component follows the `Primary` component it labels inside
+ * the `Container` that the `flexDirection` is applied to.
+ *
+ * Example Usage:
+ * ```jsx
+ *   const flexDirection = getFlexDirectionFromLabelPosition(labelPosition);
+ *   <Container style={{ flexDirection }}>
+ *     <Primary />
+ *     <Label />
+ *   </Container>
+ * ```
+ */
+export const getFlexDirectionFromLabelPosition = (
+  position: LabelPosition
+): ViewStyle['flexDirection'] => FLEX_DIRECTIONS[position];