@hero-design/rn 8.33.1 → 8.34.0

package/src/components/Modal/__tests__/ModalPresenter.spec.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ModalPresenter, {
+  ModalPresenterHandles,
+} from '../ModalPresenter/ModalPresenter';
+import Typography from '../../Typography';
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+
+  const mockedAnimatedFunctions = {
+    start: (callback: () => void) => {
+      if (callback) {
+        callback();
+      }
+    },
+    _isUsingNativeDriver: () => jest.fn(),
+  };
+
+  RN.Animated.spring = () => mockedAnimatedFunctions;
+
+  return RN;
+});
+
+describe('ModalPresenter', () => {
+  it('should render correctly', () => {
+    const wrapper = renderWithTheme(
+      <ModalPresenter
+        testID="modal-presenter"
+        style={{ backgroundColor: 'blue' }}
+      >
+        <Typography.Text>Modal content</Typography.Text>
+      </ModalPresenter>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.getByText('Modal content')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-presenter')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-presenter')).toHaveStyle({
+      backgroundColor: 'blue',
+    });
+  });
+
+  it('allow using ref', () => {
+    const ref = React.createRef<ModalPresenterHandles>();
+    const completion = jest.fn();
+
+    renderWithTheme(
+      <ModalPresenter ref={ref}>
+        <Typography.Text>Modal content</Typography.Text>
+      </ModalPresenter>
+    );
+
+    ref.current?.animatedOut(completion);
+    expect(completion).toHaveBeenCalled();
+  });
+});

package/src/components/Modal/__tests__/__snapshots__/ModalContentWrapper.spec.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalContentWrapper should render correctly 1`] = `
+<View
+  collapsable={false}
+  style={
+    Object {
+      "backgroundColor": "blue",
+    }
+  }
+  testID="modal-content-wrapper"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Modal content
+  </Text>
+</View>
+`;

package/src/components/Modal/__tests__/__snapshots__/ModalPresenter.spec.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalPresenter should render correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "blue",
+        "height": "100%",
+        "justifyContent": "center",
+        "opacity": 0,
+        "width": "100%",
+      }
+    }
+    testID="modal-presenter"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Modal content
+    </Text>
+  </View>
+</View>
+`;

package/src/components/Modal/__tests__/index.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { BackHandler } from 'react-native';
+import Modal from '..';
+import Typography from '../../Typography';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+
+  const mockedAnimatedFunctions = {
+    start: (callback: () => void) => {
+      if (callback) {
+        callback();
+      }
+    },
+    _isUsingNativeDriver: () => jest.fn(),
+  };
+
+  RN.Animated.timing = () => mockedAnimatedFunctions;
+
+  return RN;
+});
+
+describe('Modal', () => {
+  it('onShow should be called correctly', () => {
+    const onShow = jest.fn();
+
+    renderWithTheme(
+      <Modal onShow={onShow} visible>
+        <Typography.Text>Modal content</Typography.Text>
+      </Modal>
+    );
+
+    expect(onShow).toHaveBeenCalled();
+  });
+
+  it('onRequestClose should be called correctly', () => {
+    const onRequestClose = jest.fn();
+
+    renderWithTheme(
+      <Modal onRequestClose={onRequestClose} visible>
+        <Typography.Text>Modal content</Typography.Text>
+      </Modal>
+    );
+    // @ts-expect-error: BackHandler mock
+    BackHandler.mockPressBack();
+
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+});

package/src/components/Modal/index.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { BackHandler, Dimensions, View, ViewStyle } from 'react-native';
+import ModalContentWrapper, {
+  ModalContentWrapperHandler,
+} from './ModalContentWrapper';
+import ModalProvider from './ModalProvider';
+import { ModalHandler, showModal } from './ModalPresenter';
+
+const wrapperStyle: ViewStyle = {
+  width: Dimensions.get('window').width,
+  height: Dimensions.get('window').height,
+};
+
+export interface ModalProps {
+  /**
+   * Content of the modal.
+   */
+  children: React.ReactElement;
+  /**
+   * Visibility of the modal
+   */
+  visible?: boolean;
+  /**
+   * Callback when the modal is shown.
+   */
+  onShow?: () => void;
+  /**
+   * Callback when the user taps the hardware back button.
+   */
+  onRequestClose?: () => void;
+  /**
+   * TestID of the modal.
+   */
+  testID?: string;
+  /**
+   * Animation type of the modal content.
+   */
+  animationType?: 'none' | 'slide' | 'fade';
+}
+
+const Modal = ({
+  children,
+  onShow,
+  onRequestClose,
+  testID,
+  visible = true,
+  animationType = 'none',
+}: ModalProps) => {
+  const [modalHandler, setModalHandler] = React.useState<ModalHandler>();
+  const modalContentWrapperRef = React.useRef<ModalContentWrapperHandler>(null);
+
+  const getModalContent = React.useCallback(
+    (isUpdate = false) => {
+      return animationType === 'none' ? (
+        <View style={wrapperStyle} testID={testID}>
+          {children}
+        </View>
+      ) : (
+        <ModalContentWrapper
+          visible={visible}
+          style={wrapperStyle}
+          animationType={animationType}
+          testID={testID}
+          onShow={onShow}
+          ref={modalContentWrapperRef}
+          animated={!isUpdate}
+        >
+          {children}
+        </ModalContentWrapper>
+      );
+    },
+    [visible, children, onShow, testID, animationType]
+  );
+
+  React.useEffect(() => {
+    if (visible) {
+      // Modal does not exist, create a new one
+      if (!modalHandler) {
+        const newModalHandler = showModal(getModalContent(false));
+        setModalHandler(newModalHandler);
+
+        // If animationType is slide for fade, onShow would be run after animation on ModalContentWrapper,
+        // else run on this component.
+        if (animationType === 'none') {
+          onShow?.();
+        }
+      }
+      // Modal already exists, update it
+      else {
+        modalHandler.update(getModalContent(true));
+      }
+    } else if (animationType === 'none') {
+      modalHandler?.dismiss();
+      setModalHandler(undefined);
+    } else {
+      // Wait to finish animation before dismissing
+      modalContentWrapperRef.current?.hide(() => {
+        modalHandler?.dismiss();
+        setModalHandler(undefined);
+      });
+    }
+  }, [getModalContent]);
+
+  React.useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onRequestClose?.();
+        return true;
+      }
+    );
+
+    return () => backHandler.remove();
+  }, [onRequestClose]);
+
+  return null;
+};
+
+export default Object.assign(Modal, {
+  Provider: ModalProvider,
+});

package/src/components/PageControl/index.tsx

@@ -32,7 +32,6 @@ const PageControl = ({
   style,
 }: PageControlProps) => {
   const theme = useTheme();
-
   const animatedValue = React.useRef(new Animated.Value(currentPage)).current;
 
   React.useEffect(() => {

package/src/components/PinInput/PinCell.tsx

@@ -25,7 +25,9 @@ function PinCell({
         <StyledFilledMask themeState={state} testID="pin-cell-filled-mask" />
       )}
       {value !== '' && !secure && (
-        <StyledCellText themeState={state}>{value}</StyledCellText>
+        <StyledCellText themeState={state} level="h3">
+          {value}
+        </StyledCellText>
       )}
     </StyledCell>
   );

package/src/components/PinInput/StyledPinInput.tsx

@@ -27,12 +27,9 @@ export const StyledCell = styled(View)<{
   borderColor: theme.__hd__.pinInput.colors[themeState],
 }));
 
-export const StyledCellText = styled(Typography.Text)<{
+export const StyledCellText = styled(Typography.Title)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
-  fontFamily: theme.__hd__.pinInput.fonts.cellText,
-  fontSize: theme.__hd__.pinInput.fontSizes.cellText,
-  lineHeight: theme.__hd__.pinInput.lineHeights.cellText,
   color: theme.__hd__.pinInput.colors[themeState],
 }));
 
@@ -83,9 +80,7 @@ export const StyledErrorContainer = styled(View)(({ theme }) => ({
   alignItems: 'center',
 }));
 
-export const StyledErrorMessage = styled(Typography.Text)(({ theme }) => ({
-  fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
-  fontSize: theme.__hd__.pinInput.fontSizes.errorMessage,
+export const StyledErrorMessage = styled(Typography.Caption)(({ theme }) => ({
   color: theme.__hd__.pinInput.colors.error,
   paddingLeft: theme.__hd__.pinInput.space.errorMessagePadding,
 }));

package/src/components/PinInput/__tests__/__snapshots__/PinCell.spec.tsx.snap

@@ -25,25 +25,21 @@ exports[`PinCell renders correctly when focused is false, state is default 1`] =
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="default"
     themeTypeface="neutral"
   >
@@ -77,25 +73,21 @@ exports[`PinCell renders correctly when focused is false, state is disabled 1`]
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#bfc1c5",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="disabled"
     themeTypeface="neutral"
   >
@@ -129,25 +121,21 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#de350b",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="error"
     themeTypeface="neutral"
   >
@@ -181,25 +169,21 @@ exports[`PinCell renders correctly when focused is true, state is default 1`] =
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="default"
     themeTypeface="neutral"
   >
@@ -233,25 +217,21 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#de350b",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="error"
     themeTypeface="neutral"
   >

package/src/components/PinInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -497,25 +497,21 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 28,
+              "letterSpacing": 0.24,
+              "lineHeight": 36,
             },
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 28,
-                "lineHeight": 36,
               },
               undefined,
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
+        themeLevel="h3"
         themeState="default"
         themeTypeface="neutral"
       >
@@ -556,25 +552,21 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 28,
+              "letterSpacing": 0.24,
+              "lineHeight": 36,
             },
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 28,
-                "lineHeight": 36,
               },
               undefined,
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
+        themeLevel="h3"
         themeState="default"
         themeTypeface="neutral"
       >
@@ -615,25 +607,21 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 28,
+              "letterSpacing": 0.24,
+              "lineHeight": 36,
             },
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 28,
-                "lineHeight": 36,
               },
               undefined,
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
+        themeLevel="h3"
         themeState="default"
         themeTypeface="neutral"
       >
@@ -1036,25 +1024,21 @@ exports[`rendering renders correctly when there is error 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 12,
+            "letterSpacing": 0.48,
+            "lineHeight": 16,
           },
           Array [
             Object {
               "color": "#de350b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 12,
               "paddingLeft": 4,
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
     >
       PIN is not correct
     </Text>

package/src/components/PinInput/index.tsx

@@ -198,4 +198,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
   }
 );
 
+PinInput.displayName = 'PinInput';
+
 export default PinInput;

package/src/components/Progress/ProgressCircle.tsx

@@ -171,9 +171,7 @@ const ProgressCircle = ({
           <StyledStrokeEnd themeIntent={intent} />
         </Animated.View>
         <StyledDonutCircle>
-          <Typography.Text fontSize="large">
-            {renderValue(value)}
-          </Typography.Text>
+          <Typography.Body>{renderValue(value)}</Typography.Body>
         </StyledDonutCircle>
       </StyledContainer>
     </View>