@aws-amplify/ui-react-native 0.0.0-in-app-messaging-20220826014803

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/IconButton/IconButton.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+import { Image, Pressable } from 'react-native';
+
+import { getStyles } from './styles';
+import { IconButtonProps } from './types';
+
+export default function IconButton({
+  color,
+  source,
+  size = 16,
+  ...pressableProps
+}: IconButtonProps): JSX.Element {
+  const { icon } = useMemo(() => getStyles(color, size), [color, size]);
+
+  return (
+    <Pressable {...pressableProps}>
+      <Image source={source} style={icon} />
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,13 @@
+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();
+  });
+});

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

@@ -0,0 +1,34 @@
+// 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={
+      Object {
+        "height": 16,
+        "resizeMode": "contain",
+        "tintColor": undefined,
+        "width": 16,
+      }
+    }
+  />
+</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/styles.ts

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

package/src/primitives/IconButton/types.ts

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

package/src/primitives/index.ts

@@ -0,0 +1,3 @@
+export * from './Button';
+export * from './Carousel';
+export * from './IconButton';

package/src/utils/index.ts

@@ -0,0 +1,6 @@
+// as a safeguard against known React Native lineHeight issues, e.g. https://github.com/facebook/react-native/issues/29507
+// use a value of 1.5 as the default line height multiplier
+const LINE_HEIGHT_MULTIPLIER = 1.5;
+
+export const getLineHeight = (fontSize: number): number =>
+  fontSize * LINE_HEIGHT_MULTIPLIER;

package/tsconfig.dist.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**.*"]
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "jsx": "react-native",
+    "noImplicitAny": false,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "outDir": "./dist",
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}