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

package/dist/primitives/Label/types.d.ts

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

package/dist/primitives/Label/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/Label/utils.d.ts

@@ -0,0 +1,17 @@
+import { ViewStyle } from 'react-native';
+import { LabelPosition } from './types';
+/**
+ * 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 declare const getFlexDirectionFromLabelPosition: (position: LabelPosition) => ViewStyle['flexDirection'];

package/dist/primitives/Label/utils.js

@@ -0,0 +1,21 @@
+const FLEX_DIRECTIONS = {
+    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) => FLEX_DIRECTIONS[position];

package/dist/primitives/Radio/Radio.d.ts

@@ -0,0 +1,2 @@
+import { RadioProps } from './types';
+export default function Radio<T>({ accessibilityRole, disabled, label, labelPosition, labelStyle, onChange, radioContainerStyle, radioDotStyle, selected, size, style, value, ...rest }: RadioProps<T>): JSX.Element;

package/dist/primitives/Radio/Radio.js

@@ -0,0 +1,29 @@
+import React, { useCallback, useMemo } from 'react';
+import { Pressable, View, } from 'react-native';
+import { Label } from '../Label';
+import { getFlexDirectionFromLabelPosition } from '../Label/utils';
+import { styles } from './styles';
+import { getRadioDimensions } from './getRadioDimensions';
+export default function Radio({ accessibilityRole = 'radio', disabled, label, labelPosition = 'end', labelStyle, onChange, radioContainerStyle, radioDotStyle, selected, size = 'medium', style, value, ...rest }) {
+    const handleOnChange = useCallback(() => {
+        if (!disabled) {
+            onChange?.(value);
+        }
+    }, [onChange, value, disabled]);
+    const containerStyle = useCallback(({ pressed }) => {
+        const containerStyle = {
+            ...styles.container,
+            flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
+            ...(disabled && styles.disabled),
+        };
+        const pressedStateStyle = typeof style === 'function' ? style({ pressed }) : style;
+        return [containerStyle, pressedStateStyle];
+    }, [disabled, labelPosition, style]);
+    const { radioContainerSize, radioDotSize } = useMemo(() => getRadioDimensions(size, styles), [size]);
+    return (<Pressable {...rest} accessibilityRole={accessibilityRole} onPress={handleOnChange} style={containerStyle}>
+      <View style={[styles.radioContainer, radioContainerSize, radioContainerStyle]}>
+        {selected ? (<View style={[styles.radioDot, radioDotSize, radioDotStyle]}/>) : null}
+      </View>
+      {label ? <Label style={labelStyle}>{label}</Label> : null}
+    </Pressable>);
+}

package/dist/primitives/Radio/getRadioDimensions.d.ts

@@ -0,0 +1,18 @@
+import { RadioDimensions, RadioStyles, Size } from './types';
+/**
+ * These utility functions are used to apply styles to
+ * the two nested View's comprising the Radio:
+ *   - The outer <View> is named 'radioContainer'
+ *   - The inner <View> is named 'radioDot'
+ *
+ * If a customer passes a number to the `size` prop, then we simply calculate the dimensions
+ * for both the 'radioContainer' and 'radioDot' based on that number.
+ *
+ * If a customer passes a string ('small' | 'medium' | 'large') to the `size` prop,
+ * then we return the respective dimensions as defined in the `styles` object
+ * (e.g., 'small' => { radioContainerSmall, radioDotSmall } )
+ */
+export declare const getRadioDimensions: (size: Size, styles: RadioStyles) => {
+    radioContainerSize: RadioDimensions;
+    radioDotSize: RadioDimensions;
+};

package/dist/primitives/Radio/getRadioDimensions.js

@@ -0,0 +1,27 @@
+import { capitalize } from '../../utils';
+/**
+ * These utility functions are used to apply styles to
+ * the two nested View's comprising the Radio:
+ *   - The outer <View> is named 'radioContainer'
+ *   - The inner <View> is named 'radioDot'
+ *
+ * If a customer passes a number to the `size` prop, then we simply calculate the dimensions
+ * for both the 'radioContainer' and 'radioDot' based on that number.
+ *
+ * If a customer passes a string ('small' | 'medium' | 'large') to the `size` prop,
+ * then we return the respective dimensions as defined in the `styles` object
+ * (e.g., 'small' => { radioContainerSmall, radioDotSmall } )
+ */
+export const getRadioDimensions = (size, styles) => {
+    if (typeof size === 'number') {
+        return {
+            radioContainerSize: { height: size, width: size },
+            radioDotSize: { height: size * 0.5, width: size * 0.5 },
+        };
+    }
+    const sizeKey = capitalize(size);
+    return {
+        radioContainerSize: styles[`radioContainer${sizeKey}`],
+        radioDotSize: styles[`radioDot${sizeKey}`],
+    };
+};

package/dist/primitives/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from './Radio';
+export { RadioProps, RadioStyles } from './types';

package/dist/primitives/Radio/index.js

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

package/dist/primitives/Radio/styles.d.ts

@@ -0,0 +1,2 @@
+import { RadioStyles } from './types';
+export declare const styles: RadioStyles;

package/dist/primitives/Radio/styles.js

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+const RADIO_COLOR = '#317d95';
+const ROUNDED_BORDER_RADIUS = 999;
+export const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+    },
+    disabled: {
+        opacity: 0.6,
+    },
+    radioContainer: {
+        alignItems: 'center',
+        borderColor: RADIO_COLOR,
+        borderRadius: ROUNDED_BORDER_RADIUS,
+        borderWidth: 2,
+        justifyContent: 'center',
+    },
+    radioDot: {
+        backgroundColor: RADIO_COLOR,
+        borderRadius: ROUNDED_BORDER_RADIUS,
+    },
+    radioContainerLarge: {
+        height: 24,
+        width: 24,
+    },
+    radioContainerMedium: {
+        height: 20,
+        width: 20,
+    },
+    radioContainerSmall: {
+        height: 16,
+        width: 16,
+    },
+    radioDotLarge: {
+        height: 12,
+        width: 12,
+    },
+    radioDotMedium: {
+        height: 10,
+        width: 10,
+    },
+    radioDotSmall: {
+        height: 8,
+        width: 8,
+    },
+});

package/dist/primitives/Radio/types.d.ts

@@ -0,0 +1,28 @@
+import { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { LabelPosition } from '../Label/types';
+export declare type Size = number | 'small' | 'medium' | 'large';
+export interface RadioProps<T> extends PressableProps {
+    disabled?: boolean;
+    label?: string;
+    labelPosition?: LabelPosition;
+    labelStyle?: StyleProp<TextStyle>;
+    onChange?: (value?: T) => void;
+    radioContainerStyle?: StyleProp<ViewStyle>;
+    radioDotStyle?: StyleProp<ViewStyle>;
+    size?: Size;
+    selected?: boolean;
+    value: T;
+}
+export declare type RadioDimensions = Pick<ViewStyle, 'height' | 'width'>;
+export interface RadioStyles {
+    container: ViewStyle;
+    disabled: ViewStyle;
+    radioContainer: ViewStyle;
+    radioContainerLarge: RadioDimensions;
+    radioContainerMedium: RadioDimensions;
+    radioContainerSmall: RadioDimensions;
+    radioDot: ViewStyle;
+    radioDotLarge: RadioDimensions;
+    radioDotMedium: RadioDimensions;
+    radioDotSmall: RadioDimensions;
+}

package/dist/primitives/Radio/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Button';
+export * from './Carousel';
+export * from './Checkbox';
+export * from './Heading';
+export * from './Icon';
+export * from './IconButton';
+export * from './Label';
+export * from './Radio';

package/dist/primitives/index.js

@@ -0,0 +1,8 @@
+export * from './Button';
+export * from './Carousel';
+export * from './Checkbox';
+export * from './Heading';
+export * from './Icon';
+export * from './IconButton';
+export * from './Label';
+export * from './Radio';

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare const getLineHeight: (fontSize: number) => number;
+export declare function capitalize<T extends string>(value: T): Capitalize<T>;

package/dist/utils/index.js

@@ -0,0 +1,7 @@
+// 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) => fontSize * LINE_HEIGHT_MULTIPLIER;
+export function capitalize(value) {
+    return (value.charAt(0).toUpperCase() + value.slice(1));
+}

package/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  preset: 'react-native',
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
+    '!<rootDir>/src/**/*{c,C}onstants.ts',
+  ],
+  moduleNameMapper: {
+    '^react$': '<rootDir>/node_modules/react',
+    '^react-native$': '<rootDir>/node_modules/react-native',
+  },
+  coverageThreshold: {
+    global: {
+      branches: 90,
+      functions: 90,
+      lines: 90,
+      statements: 90,
+    },
+  },
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@aws-amplify/ui-react-native",
+  "version": "0.0.0-fileuploader-41bde68-20221115171326",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "yarn dist && cp -a src/assets dist",
+    "clean": "rimraf dist",
+    "dev": "yarn dist --watch",
+    "dist": "tsc --project tsconfig.dist.json",
+    "lint": "tsc --noEmit && eslint src",
+    "prebuild": "rimraf dist",
+    "test": "jest --coverage",
+    "test:watch": "yarn test --watch"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/react-native": "^11.1.0",
+    "@types/react": "^17.0.2",
+    "@types/react-native": "^0.67.6",
+    "@types/react-test-renderer": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "babel-jest": "^28.0.3",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "metro-react-native-babel-preset": "^0.70.2",
+    "react": "^17.0.2",
+    "react-native": "^0.68.1",
+    "react-native-safe-area-context": "^4.2.5",
+    "react-test-renderer": "^17.0.2",
+    "rimraf": "^3.0.2"
+  },
+  "dependencies": {
+    "@aws-amplify/ui": "0.0.0-fileuploader-41bde68-20221115171326",
+    "@aws-amplify/ui-react-core": "0.0.0-fileuploader-41bde68-20221115171326"
+  },
+  "peerDependencies": {
+    "aws-amplify": ">= 5.0.1",
+    "react": ">= 16.14.0",
+    "react-native": ">= 0.63.4",
+    "react-native-safe-area-context": ">= 4.2.5"
+  },
+  "resolutions": {
+    "@types/react": "^17.0.2"
+  }
+}

package/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { ImageDimensions, useMessageProps } from '../../hooks';
+import { MessageWrapper } from '../MessageWrapper';
+import { MessageLayout } from '../MessageLayout';
+
+import { getStyles, positionStyle } from './styles';
+import { BannerMessageProps } from './types';
+
+export default function BannerMessage({
+  position = 'top',
+  ...props
+}: BannerMessageProps): JSX.Element | null {
+  const messageProps = useMessageProps(
+    props,
+    (imageDimensions: ImageDimensions) =>
+      getStyles(imageDimensions, { position: { ...positionStyle[position] } })
+  );
+  const { shouldRenderMessage, styles } = messageProps;
+
+  if (!shouldRenderMessage) {
+    return null;
+  }
+
+  const { wrapper, ...messageStyles } = styles!;
+
+  return (
+    <MessageWrapper style={wrapper}>
+      <MessageLayout
+        {...props}
+        {...messageProps}
+        orientation="landscape"
+        styles={messageStyles}
+      />
+    </MessageWrapper>
+  );
+}

package/src/InAppMessaging/components/BannerMessage/__tests__/BannerMessage.spec.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import { IN_APP_MESSAGING_TEST_ID } from '../../../constants';
+import { useMessageImage } from '../../../hooks/useMessageImage';
+
+import BannerMessage from '../BannerMessage';
+
+jest.mock('../../../hooks/useMessageImage');
+jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
+
+const mockUseMessageImage = useMessageImage as jest.Mock;
+const onAction = jest.fn();
+const onClose = jest.fn();
+
+const baseProps = { layout: 'TOP_BANNER' as const, onClose };
+
+describe('BannerMessage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders a message as expected without an image', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: false,
+    });
+
+    const renderer = TestRenderer.create(<BannerMessage {...baseProps} />);
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders a message as expected with an image', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: true,
+      imageDimensions: { height: 100, width: 100 },
+      isImageFetching: false,
+    });
+
+    const src = 'asset.png';
+    const props = { ...baseProps, image: { src } };
+
+    const renderer = TestRenderer.create(<BannerMessage {...props} />);
+
+    const image = renderer.root.findByProps({
+      testID: IN_APP_MESSAGING_TEST_ID.IMAGE,
+    });
+
+    expect(image.props).toEqual(
+      expect.objectContaining({ source: { uri: src } })
+    );
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+
+  it('returns null while an image is fetching', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: true,
+    });
+
+    const renderer = TestRenderer.create(<BannerMessage {...baseProps} />);
+
+    expect(renderer.toJSON()).toBeNull();
+  });
+
+  it.each([
+    [
+      'header',
+      IN_APP_MESSAGING_TEST_ID.HEADER,
+      {
+        testProps: { content: 'header content' },
+        expectedProps: { children: 'header content' },
+      },
+    ],
+    [
+      'body',
+      IN_APP_MESSAGING_TEST_ID.BODY,
+      {
+        testProps: { content: 'body content' },
+        expectedProps: { children: 'body content' },
+      },
+    ],
+    [
+      'primaryButton',
+      IN_APP_MESSAGING_TEST_ID.PRIMARY_BUTTON,
+      {
+        testProps: { onAction, title: 'primary button' },
+        expectedProps: { children: 'primary button', onPress: onAction },
+      },
+    ],
+    [
+      'secondaryButton',
+      IN_APP_MESSAGING_TEST_ID.SECONDARY_BUTTON,
+      {
+        testProps: { onAction, title: 'secondary button' },
+        expectedProps: { children: 'secondary button', onPress: onAction },
+      },
+    ],
+  ])(
+    'correctly handles a %s prop',
+    (key, testID, { testProps, expectedProps }) => {
+      mockUseMessageImage.mockReturnValueOnce({
+        hasRenderableImage: false,
+        imageDimensions: { height: undefined, width: undefined },
+        isImageFetching: false,
+      });
+
+      const props = { ...baseProps, [key]: testProps };
+
+      const renderer = TestRenderer.create(<BannerMessage {...props} />);
+      const testElement = renderer.root.findByProps({ testID });
+
+      expect(testElement.props).toEqual(expect.objectContaining(expectedProps));
+    }
+  );
+
+  it('calls onClose when the close button is pressed', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: false,
+    });
+
+    const renderer = TestRenderer.create(<BannerMessage {...baseProps} />);
+    const closeButton = renderer.root.findByProps({
+      testID: IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON,
+    });
+
+    TestRenderer.act(() => {
+      (closeButton.props as { onPress: () => void }).onPress();
+    });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});