@hero-design/rn 8.41.2 → 8.41.3-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.41.2",
+  "version": "8.41.3-rc.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.41.2",
+    "@hero-design/colors": "8.41.3-rc.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.41.2",
+    "@hero-design/react-native-month-year-picker": "^8.41.3-rc.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -36,6 +36,7 @@
     "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
+    "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^11.2.5"
@@ -47,8 +48,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "8.41.2",
-    "@hero-design/react-native-month-year-picker": "^8.41.2",
+    "@hero-design/eslint-plugin": "8.41.3-rc.0",
+    "@hero-design/react-native-month-year-picker": "^8.41.3-rc.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -64,12 +65,12 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.41.2",
+    "eslint-config-hd": "8.41.3-rc.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.41.2",
+    "prettier-config-hd": "8.41.3-rc.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/rollup.config.js

@@ -35,6 +35,7 @@ export default {
     'react-native-vector-icons',
     'react-native-linear-gradient',
     '@hero-design/react-native-month-year-picker',
+    'react-native-root-siblings',
   ],
   plugins: [
     replace({

package/src/components/Error/StyledError.tsx

@@ -1,9 +1,8 @@
 import styled from '@emotion/native';
-import { View } from 'react-native';
+import { Modal, View } from 'react-native';
 import Image from '../Image';
 import Typography from '../Typography';
 import Button from '../Button';
-import Modal from '../Modal';
 
 type ErrorVariant = 'full-screen' | 'in-page';
 

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

@@ -245,164 +245,146 @@ exports[`Error renders error screen with image correctly 1`] = `
 `;
 
 exports[`Error renders full screen error page correctly 1`] = `
-[
-  <View
-    collapsable={false}
-    style={
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  onDismiss={[Function]}
+  onRequestClose={[Function]}
+  style={
+    [
       {
-        "backgroundColor": "#000000",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />,
+        "height": "100%",
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  visible={true}
+>
   <View
-    collapsable={false}
     style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 1334,
-          },
-        ],
-      }
+      [
+        {
+          "backgroundColor": "#ccd2d3",
+          "display": "flex",
+          "flex": 1,
+          "flexDirection": "column",
+        },
+        undefined,
+      ]
     }
+    themeVariant="full-screen"
   >
     <View
       style={
         [
           {
-            "backgroundColor": "#ccd2d3",
+            "alignItems": "center",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",
+            "justifyContent": "center",
+            "padding": 24,
           },
           undefined,
         ]
       }
-      themeVariant="full-screen"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "display": "flex",
-              "flex": 1,
-              "flexDirection": "column",
-              "justifyContent": "center",
-              "padding": 24,
+              "height": 176,
+              "marginBottom": 24,
+              "width": 176,
             },
             undefined,
           ]
         }
       >
-        <View
-          style={
-            [
-              {
-                "height": 176,
-                "marginBottom": 24,
-                "width": 176,
-              },
-              undefined,
-            ]
-          }
-        >
-          <Image
-            source={
-              {
-                "uri": "path_to_image",
-              }
-            }
-            style={
-              [
-                {
-                  "borderRadius": 0,
-                  "height": 72,
-                  "width": 72,
-                },
-                [
-                  {
-                    "height": 176,
-                    "marginBottom": 24,
-                    "resizeMode": "contain",
-                    "width": 176,
-                  },
-                  undefined,
-                ],
-              ]
+        <Image
+          source={
+            {
+              "uri": "path_to_image",
             }
-            testID="error-image"
-          />
-        </View>
-        <Text
-          allowFontScaling={false}
+          }
           style={
             [
               {
-                "color": "#001f23",
-                "fontFamily": "RebondGrotesque-SemiBold",
-                "fontSize": 24,
-                "letterSpacing": 0.24,
-                "lineHeight": 32,
+                "borderRadius": 0,
+                "height": 72,
+                "width": 72,
               },
               [
                 {
-                  "color": "#001f23",
-                  "marginBottom": 8,
-                  "textAlign": "center",
+                  "height": 176,
+                  "marginBottom": 24,
+                  "resizeMode": "contain",
+                  "width": 176,
                 },
                 undefined,
               ],
             ]
           }
-          themeIntent="body"
-          themeLevel="h4"
-          themeTypeface="playful"
-        >
-          We’re sorry, something went wrong
-        </Text>
-        <Text
-          allowFontScaling={false}
-          style={
+          testID="error-image"
+        />
+      </View>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "RebondGrotesque-SemiBold",
+              "fontSize": 24,
+              "letterSpacing": 0.24,
+              "lineHeight": 32,
+            },
             [
               {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 18,
-                "letterSpacing": 0.54,
-                "lineHeight": 26,
+                "marginBottom": 8,
+                "textAlign": "center",
               },
-              [
-                {
-                  "color": "#4d6265",
-                  "textAlign": "center",
-                },
-                undefined,
-              ],
-            ]
-          }
-          themeIntent="body"
-          themeTypeface="playful"
-          themeVariant="regular"
-        >
-          Please try again later
-        </Text>
-      </View>
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeLevel="h4"
+        themeTypeface="playful"
+      >
+        We’re sorry, something went wrong
+      </Text>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 18,
+              "letterSpacing": 0.54,
+              "lineHeight": 26,
+            },
+            [
+              {
+                "color": "#4d6265",
+                "textAlign": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="playful"
+        themeVariant="regular"
+      >
+        Please try again later
+      </Text>
     </View>
-  </View>,
-]
+  </View>
+</Modal>
 `;
 
 exports[`Error renders title only correctly 1`] = `

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

@@ -3,7 +3,6 @@ import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Error from '..';
 import Image from '../../Image';
-import Portal from '../../Portal';
 
 const title = `We’re sorry, something went wrong`;
 const description = 'Please try again later';
@@ -47,14 +46,12 @@ describe('Error', () => {
   });
   it('renders full screen error page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
-      <Portal.Provider>
-        <Error
-          variant="full-screen"
-          title={title}
-          description={description}
-          image="path_to_image"
-        />
-      </Portal.Provider>
+      <Error
+        variant="full-screen"
+        title={title}
+        description={description}
+        image="path_to_image"
+      />
     );
 
     expect(getByText(title)).toBeTruthy();

package/src/components/Modal/ModalContentWrapper.tsx

@@ -0,0 +1,112 @@
+import React, { forwardRef } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  Platform,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+type ModalContentWrapperProps = {
+  children: React.ReactElement;
+  visible?: boolean;
+  onShow?: () => void;
+  testID?: string;
+  animationType?: 'none' | 'slide' | 'fade';
+  style?: StyleProp<ViewStyle>;
+  animated?: boolean;
+};
+
+export type ModalContentWrapperHandler = {
+  hide: (callback?: () => void) => void;
+};
+
+const windowHeight = Dimensions.get('window').height;
+const defaultAnimationConfig = {
+  easing: Easing.inOut(Easing.cubic),
+  duration: 400,
+  useNativeDriver: Platform.OS !== 'web',
+};
+
+const ModalContentWrapper = forwardRef<
+  ModalContentWrapperHandler,
+  ModalContentWrapperProps
+>(
+  (
+    {
+      animationType,
+      children,
+      testID,
+      onShow,
+      style,
+      visible,
+      animated = true,
+    },
+    ref
+  ) => {
+    const animatedValue = React.useRef(new Animated.Value(0)).current;
+
+    const modalAnimation = animatedValue.interpolate(
+      animationType === 'fade'
+        ? {
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+          }
+        : {
+            inputRange: [0, 1],
+            outputRange: [windowHeight, 0],
+          }
+    );
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        hide: (callback) => {
+          Animated.timing(animatedValue, {
+            toValue: 0,
+            ...defaultAnimationConfig,
+          }).start(callback);
+        },
+      }),
+      [animatedValue]
+    );
+
+    React.useEffect(() => {
+      // Hiding animation will be called from the modal component
+      if (visible) {
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          ...defaultAnimationConfig,
+          // Prevent animation when updating the modal content
+          duration: animated ? defaultAnimationConfig.duration : 0,
+        }).start(() => {
+          onShow?.();
+        });
+      }
+    }, [visible, animatedValue, onShow, animated]);
+
+    return (
+      <Animated.View
+        testID={testID}
+        style={[
+          style,
+          {
+            ...(animationType === 'fade' ? { opacity: modalAnimation } : {}),
+            ...(animationType === 'slide'
+              ? {
+                  transform: [{ translateY: modalAnimation }],
+                }
+              : {}),
+          },
+        ]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
+);
+
+ModalContentWrapper.displayName = 'ModalContentWrapper';
+
+export default ModalContentWrapper;

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

@@ -0,0 +1,135 @@
+import React, { forwardRef, useRef } from 'react';
+import { Animated, StyleSheet, ViewProps } from 'react-native';
+import RootSiblings from 'react-native-root-siblings';
+import { useTheme } from '../../../theme';
+import Box from '../../Box';
+
+export type ModalPresenterHandles = {
+  animatedOut: (completion?: () => void) => void;
+};
+export type ModalDismissFunc = (onDismiss?: () => void) => void;
+export type ModalUpdateFunc = (content: React.ReactNode) => void;
+
+/**
+ * Modal handler is returned by `showModal` function.
+ */
+export type ModalHandler = {
+  /**
+   * Same `dismiss` function as in `ModalContentProps`.
+   */
+  dismiss: ModalDismissFunc;
+  /**
+   * Same `update` function as in `ModalContentProps`.
+   */
+  update: ModalUpdateFunc;
+};
+
+const ModalPresenter = forwardRef<ModalPresenterHandles, ViewProps>(
+  ({ style, children, ...props }, ref) => {
+    const animatedOpacity = useRef(new Animated.Value(0));
+    const theme = useTheme();
+
+    React.useEffect(() => {
+      Animated.spring(animatedOpacity.current, {
+        toValue: 1,
+        useNativeDriver: true,
+      }).start();
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({
+      animatedOut: (completion?: () => void) => {
+        Animated.spring(animatedOpacity.current, {
+          toValue: 0,
+          useNativeDriver: true,
+        }).start(() => {
+          completion?.();
+        });
+      },
+    }));
+
+    return (
+      <Box style={StyleSheet.absoluteFill}>
+        <Animated.View
+          style={[
+            {
+              width: '100%',
+              height: '100%',
+              backgroundColor: `${theme.colors.overlayGlobalSurface}66`, // 66 = 40% opacity as suggested by the mobile color guidelines
+              justifyContent: 'center',
+              alignItems: 'center',
+              opacity: animatedOpacity.current,
+            },
+            style,
+          ]}
+          {...props}
+        >
+          {children}
+        </Animated.View>
+      </Box>
+    );
+  }
+);
+
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+
+export const showModal = (content: React.ReactNode): ModalHandler => {
+  let ref: ModalPresenterHandles | null = null;
+  let rootSiblings: RootSiblings | null = null;
+
+  const dismiss: ModalDismissFunc = (onDismiss) => {
+    if (rootSiblings) {
+      const cleanup = () => {
+        rootSiblings?.destroy();
+        rootSiblings = null;
+        ref = null;
+        onDismiss?.();
+      };
+
+      if (ref) {
+        ref.animatedOut(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+  };
+
+  const update: ModalUpdateFunc = (newContent) => {
+    rootSiblings?.update(
+      <ModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {newContent}
+      </ModalPresenter>
+    );
+  };
+
+  rootSiblings = new RootSiblings(
+    (
+      <ModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {content}
+      </ModalPresenter>
+    )
+  );
+
+  return { dismiss, update };
+};
+
+ModalPresenter.displayName = 'ModalPresenter';
+
+export default ModalPresenter;

package/src/components/Modal/ModalPresenter/index.tsx

@@ -0,0 +1,9 @@
+import {
+  ModalDismissFunc,
+  ModalHandler,
+  showModal,
+  ModalPresenterHandles,
+} from './ModalPresenter';
+
+export type { ModalDismissFunc, ModalHandler, ModalPresenterHandles };
+export { showModal };

package/src/components/Modal/ModalProvider.tsx

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { RootSiblingParent } from 'react-native-root-siblings';
+
+const ModalProvider = ({ children }: { children: ReactNode }) => {
+  return <RootSiblingParent>{children}</RootSiblingParent>;
+};
+
+export default ModalProvider;