@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#000000",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Modal content
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Modal renders correctly with transparent 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Modal content
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,99 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { BackHandler } from 'react-native';
+import Modal from '..';
+import { Button } from '../../..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Portal from '../../Portal';
+import Typography from '../../Typography';
+
+describe('Modal', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <Portal.Provider>
+        <Modal visible>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with transparent', () => {
+    const wrapper = renderWithTheme(
+      <Portal.Provider>
+        <Modal visible transparent>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger onShow callback correctly', () => {
+    const onShow = jest.fn();
+    renderWithTheme(
+      <Portal.Provider>
+        <Modal visible onShow={onShow}>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(onShow).toBeCalledTimes(1);
+  });
+
+  it('trigger onRequestClose callback correctly', () => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: 'android',
+      select: () => null,
+    }));
+
+    const onRequestClose = jest.fn();
+    renderWithTheme(
+      <Portal.Provider>
+        <Modal visible onRequestClose={onRequestClose}>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    // @ts-expect-error: BackHandler mock
+    BackHandler.mockPressBack();
+    expect(onRequestClose).toBeCalled();
+  });
+
+  it('trigger onDismiss callback correctly', async () => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: 'ios',
+      select: () => null,
+    }));
+
+    const onDismiss = jest.fn();
+
+    const ModalExample = () => {
+      const [modalVisible, setModalVisible] = React.useState(true);
+
+      return (
+        <Portal.Provider>
+          <Modal
+            animationType="none"
+            visible={modalVisible}
+            onDismiss={onDismiss}
+            transparent
+          >
+            <Typography.Body>Modal content</Typography.Body>
+            <Button text="Close modal" onPress={() => setModalVisible(false)} />
+          </Modal>
+        </Portal.Provider>
+      );
+    };
+
+    const { getByText } = renderWithTheme(<ModalExample />);
+
+    fireEvent.press(getByText('Close modal'));
+    expect(onDismiss).toBeCalled();
+  });
+});

package/src/components/Modal/index.tsx

@@ -0,0 +1,217 @@
+import React, {
+  ReactNode,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
+import {
+  Animated,
+  BackHandler,
+  Dimensions,
+  Easing,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import Portal from '../Portal';
+
+type ModalHandles = {
+  show: () => void;
+  hide: (callback: () => void) => void;
+};
+
+const DEFAULT_BACKDROP_OPACITY = 0.4;
+
+const DEFAULT_ANIMATION_CONFIG = {
+  easing: Easing.inOut(Easing.cubic),
+  useNativeDriver: Platform.OS !== 'web',
+  duration: 400,
+};
+
+export interface ModalProps {
+  /**
+   * Content of the modal.
+   */
+  children: ReactNode;
+  /**
+   * 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';
+  /**
+   * Whether to show the modal backdrop
+   */
+  transparent?: boolean;
+  /**
+   * Callback when the modal is dismissed. iOS only.
+   */
+  onDismiss?: () => void;
+}
+
+const Modal = forwardRef<ModalHandles, Omit<ModalProps, 'visible'>>(
+  (
+    {
+      children,
+      onShow,
+      onRequestClose,
+      testID,
+      animationType = 'none',
+      transparent = false,
+      onDismiss,
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+    const animatedBackdropValue = useRef(new Animated.Value(0)).current;
+    const animatedModalValue = useRef(new Animated.Value(0)).current;
+
+    // Show or hide the backdrop and modal content
+    const animateBackdropAndContent = useCallback(
+      ({ toValue, callback }: { toValue: number; callback?: () => void }) => {
+        if (animationType !== 'none') {
+          // Backdrop animation
+          if (!transparent) {
+            Animated.timing(animatedBackdropValue, {
+              toValue,
+              ...DEFAULT_ANIMATION_CONFIG,
+            }).start();
+          }
+
+          // Modal content animation
+          Animated.timing(animatedModalValue, {
+            toValue,
+            ...DEFAULT_ANIMATION_CONFIG,
+          }).start(callback);
+        } else {
+          callback?.();
+        }
+      },
+      [animationType, onShow, transparent]
+    );
+
+    const backdropOpacityAnimation = animatedBackdropValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, DEFAULT_BACKDROP_OPACITY],
+    });
+
+    const modalAnimation = animatedModalValue.interpolate({
+      inputRange: [0, 1],
+      outputRange:
+        animationType === 'slide'
+          ? [Dimensions.get('window').height, 0]
+          : [0, 1],
+    });
+
+    useImperativeHandle(
+      ref,
+      () => {
+        return {
+          show: () => {
+            animateBackdropAndContent({ toValue: 1, callback: onShow });
+          },
+
+          hide: (wrapperCallback) => {
+            animateBackdropAndContent({
+              toValue: 0,
+              callback: () => {
+                if (Platform.OS === 'ios') {
+                  onDismiss?.();
+                }
+
+                wrapperCallback();
+              },
+            });
+          },
+        };
+      },
+      [onDismiss, onShow, animateBackdropAndContent]
+    );
+
+    // Back button handler
+    useEffect(() => {
+      const backHandler = BackHandler.addEventListener(
+        'hardwareBackPress',
+        () => {
+          onRequestClose?.();
+          return true;
+        }
+      );
+
+      return () => backHandler.remove();
+    }, [onRequestClose]);
+
+    return (
+      <Portal>
+        <Animated.View
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            backgroundColor: transparent
+              ? 'transparent'
+              : theme.colors.overlayGlobalSurface,
+            opacity:
+              animationType !== 'none'
+                ? backdropOpacityAnimation
+                : DEFAULT_BACKDROP_OPACITY,
+          }}
+        />
+
+        <Animated.View
+          testID={testID}
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            opacity: animationType === 'fade' ? modalAnimation : 1,
+            transform: [
+              {
+                translateY: animationType === 'slide' ? modalAnimation : 0,
+              },
+            ],
+          }}
+        >
+          {children}
+        </Animated.View>
+      </Portal>
+    );
+  }
+);
+
+const ModalWrapper = ({ visible = true, ...props }: ModalProps) => {
+  const modalRef = useRef<ModalHandles>(null);
+  const [internalVisible, setInternalVisible] = useState(visible);
+
+  useEffect(() => {
+    if (visible) {
+      setInternalVisible(true);
+    } else {
+      // Wait for animation to finish before hiding the modal
+      modalRef.current?.hide(() => setInternalVisible(false));
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    if (internalVisible) {
+      modalRef.current?.show();
+    }
+  }, [internalVisible]);
+
+  return internalVisible ? <Modal ref={modalRef} {...props} /> : null;
+};
+
+export default ModalWrapper;

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

@@ -3,56 +3,99 @@
 exports[`RefreshControl renders correctly 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <View
-    collapsable={false}
     style={
-      Object {
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "height": 8,
-        "marginHorizontal": 8,
-        "opacity": 0.5,
-        "width": 8,
-      }
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
     }
-    testID="page-control-indicator0"
-  />
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "height": 8,
-        "marginHorizontal": 8,
-        "opacity": 1,
-        "width": 24,
+  >
+    <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
       }
-    }
-    testID="page-control-indicator1"
-  />
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 0.5,
+          "width": 8,
+        }
+      }
+      testID="page-control-indicator0"
+    />
+    <View
+      accessibilityState={
+        {
+          "selected": true,
+        }
+      }
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 1,
+          "width": 24,
+        }
+      }
+      testID="page-control-indicator1"
+    />
+    <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
+      }
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 0.5,
+          "width": 8,
+        }
+      }
+      testID="page-control-indicator2"
+    />
+  </View>
   <View
-    collapsable={false}
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      Object {
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "height": 8,
-        "marginHorizontal": 8,
-        "opacity": 0.5,
-        "width": 8,
-      }
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
-    testID="page-control-indicator2"
   />
 </View>
 `;

package/src/components/PageControl/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Animated, StyleProp, ViewStyle } from 'react-native';
 
+import { useTheme } from '../../theme';
 import {
-  StyledPageControlAnimatedView,
   StyledPageControl,
+  StyledPageControlAnimatedView,
 } from './StyledPageControl';
-import { useTheme } from '../../theme';
 
 export interface PageControlProps {
   /**
@@ -32,11 +32,13 @@ const PageControl = ({
   style,
 }: PageControlProps) => {
   const theme = useTheme();
-
   const animatedValue = React.useRef(new Animated.Value(currentPage)).current;
 
   React.useEffect(() => {
-    animatedValue.setValue(currentPage);
+    Animated.spring(animatedValue, {
+      toValue: currentPage,
+      useNativeDriver: false, // Native driver does not support animating width, it will cause the app to crash if set to true
+    }).start();
   }, [currentPage]);
 
   return (
@@ -62,6 +64,7 @@ const PageControl = ({
 
         return (
           <StyledPageControlAnimatedView
+            accessibilityState={{ selected: index === currentPage }}
             style={[{ width: indicatorWidth, opacity }]}
             key={index.toString()}
             testID={`page-control-indicator${index}`}

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,
 }));