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

package/src/primitives/Carousel/__tests__/__snapshots__/CarouselPageIndicator.spec.tsx.snap

@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CarouselPageIndicator handles null index value 1`] = `
+<SafeAreaView>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#a1a1a1",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+</SafeAreaView>
+`;
+
+exports[`CarouselPageIndicator handles null numberOfItems value 1`] = `<SafeAreaView />`;
+
+exports[`CarouselPageIndicator renders indicator styles based on current index 1`] = `
+<SafeAreaView>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#a1a1a1",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+</SafeAreaView>
+`;
+
+exports[`CarouselPageIndicator renders with just one item 1`] = `
+<SafeAreaView>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#a1a1a1",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+</SafeAreaView>
+`;
+
+exports[`CarouselPageIndicator renders with multiple items 1`] = `
+<SafeAreaView>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#a1a1a1",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#d8d8d8",
+          "borderRadius": 6,
+          "height": 12,
+          "margin": 4,
+          "width": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+</SafeAreaView>
+`;

package/src/primitives/Carousel/constants.ts

@@ -0,0 +1,25 @@
+import { ViewStyle } from 'react-native';
+
+export const DEFAULT_CAROUSEL_COLOR_ACTIVE = '#a1a1a1';
+export const DEFAULT_CAROUSEL_COLOR_INACTIVE = '#d8d8d8';
+
+export const DEFAULT_CAROUSEL_INDICATOR_SIZE = 12;
+
+const DEFAULT_CAROUSEL_INDICATOR_STYLE: ViewStyle = {
+  borderRadius: DEFAULT_CAROUSEL_INDICATOR_SIZE / 2,
+  height: DEFAULT_CAROUSEL_INDICATOR_SIZE,
+  margin: DEFAULT_CAROUSEL_INDICATOR_SIZE / 3,
+  width: DEFAULT_CAROUSEL_INDICATOR_SIZE,
+};
+
+export const DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE: ViewStyle = {
+  ...DEFAULT_CAROUSEL_INDICATOR_STYLE,
+  backgroundColor: DEFAULT_CAROUSEL_COLOR_ACTIVE,
+};
+
+export const DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE: ViewStyle = {
+  ...DEFAULT_CAROUSEL_INDICATOR_STYLE,
+  backgroundColor: DEFAULT_CAROUSEL_COLOR_INACTIVE,
+};
+
+export const VIEWABILITY_CONFIG = { itemVisiblePercentThreshold: 60 };

package/src/primitives/Carousel/index.ts

@@ -0,0 +1,3 @@
+export { default as Carousel } from './Carousel';
+export { DEFAULT_CAROUSEL_INDICATOR_SIZE } from './constants';
+export { CarouselProps } from './types';

package/src/primitives/Carousel/styles.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+import { CarouselStyles } from './types';
+
+export const styles: CarouselStyles = StyleSheet.create({
+  indicator: {
+    bottom: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+  },
+});

package/src/primitives/Carousel/types.ts

@@ -0,0 +1,22 @@
+import { ListRenderItem, StyleProp, ViewStyle } from 'react-native';
+
+export interface CarouselProps<T> {
+  data: ReadonlyArray<T>;
+  indicatorActiveStyle?: StyleProp<ViewStyle>;
+  indicatorInactiveStyle?: StyleProp<ViewStyle>;
+  onClose?: () => void;
+  renderItem: ListRenderItem<T>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CarouselPageIndicatorProps {
+  activeStyle?: StyleProp<ViewStyle>;
+  currentIndex: number | null;
+  inactiveStyle?: StyleProp<ViewStyle>;
+  numberOfItems: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CarouselStyles {
+  indicator: ViewStyle;
+}

package/src/primitives/Checkbox/Checkbox.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Pressable, ViewStyle } from 'react-native';
+
+import { icons } from '../../assets';
+import { styles } from './styles';
+import { Label } from '../Label';
+import { CheckboxProps } from './types';
+import { getFlexDirectionFromLabelPosition } from '../Label/utils';
+import { Icon } from '../Icon';
+
+export default function Checkbox<T>({
+  accessibilityRole = 'checkbox',
+  iconStyle,
+  disabled,
+  label,
+  labelPosition = 'end',
+  labelStyle,
+  onChange,
+  selected,
+  size,
+  style,
+  value,
+  ...rest
+}: CheckboxProps<T>): JSX.Element {
+  const [checked, setChecked] = useState(selected ?? false);
+
+  const handleOnChange = useCallback(() => {
+    onChange?.(value);
+    setChecked(!checked);
+  }, [onChange, value, checked]);
+
+  const containerStyle: ViewStyle = useMemo(
+    () => ({
+      ...styles.container,
+      flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
+      opacity: disabled ? 0.6 : 1,
+    }),
+    [disabled, labelPosition]
+  );
+
+  return (
+    <Pressable
+      {...rest}
+      accessibilityRole={accessibilityRole}
+      disabled={disabled}
+      onPress={handleOnChange}
+      style={[containerStyle, style]}
+    >
+      <Icon
+        source={checked ? icons.checkboxFilled : icons.checkboxOutline}
+        size={size}
+        style={iconStyle}
+      />
+      {label ? <Label style={labelStyle}>{label}</Label> : null}
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import Checkbox from '../Checkbox';
+
+const onChange = jest.fn();
+
+describe('Checkbox', () => {
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  [true, false].forEach((value) => {
+    it(`renders as expected when selected is ${value}`, () => {
+      const { toJSON } = render(
+        <Checkbox selected={value} value={value} onChange={onChange} />
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  it('renders as expected when disabled', () => {
+    const { toJSON } = render(
+      <Checkbox disabled value="" onChange={onChange} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected with accessibilityRole', () => {
+    const { toJSON } = render(
+      <Checkbox value="" onChange={onChange} accessibilityRole={'none'} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('calls the expected handler when selected', () => {
+    const { getByRole } = render(<Checkbox value="" onChange={onChange} />);
+    const checkbox = getByRole('checkbox');
+    fireEvent.press(checkbox);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('does nothing when disabled', () => {
+    const { getByRole } = render(
+      <Checkbox value="" onChange={onChange} disabled />
+    );
+    const checkbox = getByRole('checkbox');
+    fireEvent.press(checkbox);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox renders as expected when disabled 1`] = `
+<View
+  accessibilityRole="checkbox"
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  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",
+        "flexDirection": "row",
+        "opacity": 0.6,
+        "padding": 4,
+      },
+      undefined,
+    ]
+  }
+>
+  <Image
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/checkboxOutline.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": undefined,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": undefined,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Checkbox renders as expected when selected is false 1`] = `
+<View
+  accessibilityRole="checkbox"
+  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",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 4,
+      },
+      undefined,
+    ]
+  }
+>
+  <Image
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/checkboxOutline.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": undefined,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": undefined,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Checkbox renders as expected when selected is true 1`] = `
+<View
+  accessibilityRole="checkbox"
+  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",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 4,
+      },
+      undefined,
+    ]
+  }
+>
+  <Image
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/checkboxFilled.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": undefined,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": undefined,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Checkbox renders as expected with accessibilityRole 1`] = `
+<View
+  accessibilityRole="none"
+  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",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 4,
+      },
+      undefined,
+    ]
+  }
+>
+  <Image
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/checkboxOutline.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": undefined,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": undefined,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

package/src/primitives/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './types';

package/src/primitives/Checkbox/styles.ts

@@ -0,0 +1,8 @@
+import { CheckboxStyle } from './types';
+
+export const styles: CheckboxStyle = {
+  container: {
+    alignItems: 'center',
+    padding: 4,
+  },
+};

package/src/primitives/Checkbox/types.ts

@@ -0,0 +1,20 @@
+import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon/types';
+import { LabelProps } from '../Label';
+import { LabelPosition } from '../Label/types';
+
+export interface CheckboxProps<T> extends PressableProps {
+  iconStyle?: IconProps['style'];
+  label?: string;
+  labelPosition?: LabelPosition;
+  labelStyle?: LabelProps['style'];
+  onChange: (value: T) => void;
+  selected?: boolean;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+  value: T;
+}
+
+export interface CheckboxStyle {
+  container: ViewStyle;
+}

package/src/primitives/Heading/Heading.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { styles } from './styles';
+import { HeadingProps } from './types';
+
+export default function Heading({
+  accessibilityRole = 'header',
+  children,
+  level = 6,
+  style,
+  ...rest
+}: HeadingProps): JSX.Element {
+  return (
+    <Text
+      {...rest}
+      accessibilityRole={accessibilityRole}
+      style={[styles.text, styles[level], style]}
+    >
+      {children}
+    </Text>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import Heading from '../Heading';
+import { HeadingProps } from '../types';
+
+const title = 'Test Heading';
+const levels: HeadingProps['level'][] = [1, 2, 3, 4, 5, 6];
+
+describe('Heading', () => {
+  it('renders a level 6 Heading by default', () => {
+    const defaultHeading = TestRenderer.create(<Heading>{title}</Heading>);
+    const headingLevel6 = TestRenderer.create(
+      <Heading level={6}>{title}</Heading>
+    );
+
+    expect(defaultHeading.toJSON()).toEqual(headingLevel6.toJSON());
+  });
+
+  it.each(levels)('renders a level %i Heading as expected', (level) => {
+    const heading = TestRenderer.create(
+      <Heading level={level}>{`Heading level ${level}`}</Heading>
+    );
+    expect(heading.toJSON()).toMatchSnapshot();
+  });
+
+  it('applies style props', () => {
+    const customStyle = { color: 'red' };
+
+    const styledHeading = TestRenderer.create(
+      <Heading style={customStyle}>{title}</Heading>
+    );
+
+    expect(styledHeading.toJSON()).toMatchSnapshot();
+    expect(styledHeading.root.props.style).toBe(customStyle);
+  });
+});