@momo-kits/foundation 0.167.1-duo.1 → 0.167.1-duo.13

package/Application/Components/SearchHeader.tsx

@@ -1,17 +1,14 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
-import {
-  Dimensions,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../utils';
+import { useScreenLayout } from '../../Layout';
+import { DuoMetrics } from '../../Layout/utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -26,19 +23,31 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   ) => {
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const BACK_WIDTH = 28;
-    const { width: screenWidth } = Dimensions.get('window');
+    const layout = useScreenLayout();
+    // the iPhone Duo status bar row keeps a side bar sized back button
+    const BACK_WIDTH = layout.statusBarClearance ? DuoMetrics.controlSize : 28;
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
     const headerRightWidth = props?.headerRightWidth ?? 73;
 
+    // iPhone Duo side bar holds back: the search shares the content width with the buttons only
+    let searchMaxWidth = layout.width - leftPosition - 12 - headerRightWidth;
+    if (layout.sideBar) {
+      searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
+    }
+    if (layout.statusBarClearance) {
+      searchMaxWidth -=
+        layout.statusBarClearance.left + layout.statusBarClearance.right;
+    }
+
     const backgroundStyle = useAnimatedStyle(() => {
       const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
       return {
-        backgroundColor: t === 0
-          ? theme.colors.background.surface
-          : theme.colors.background.default,
+        backgroundColor:
+          t === 0
+            ? theme.colors.background.surface
+            : theme.colors.background.default,
       };
     });
 
@@ -77,13 +86,11 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
           style={[
             Styles.flex,
             renderButtons && {
-              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
+              maxWidth: searchMaxWidth,
             },
           ]}
         >
-          <Animated.View
-            style={[{ borderRadius: Radius.XL }, backgroundStyle]}
-          >
+          <Animated.View style={[{ borderRadius: Radius.XL }, backgroundStyle]}>
             <InputSearch
               ref={ref}
               {...props}

package/Application/Components/SideBarButton.tsx

@@ -0,0 +1,139 @@
+import React, { ReactNode, useContext } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { NavigationButtonProps } from '../types';
+import { ApplicationContext } from '../../Context';
+import { Colors, Radius, Shadow, Spacing } from '../../Consts';
+import { Icon } from '../../Icon';
+import { BadgeDot } from '../../Badge';
+import { DuoMetrics } from '../../Layout/utils';
+
+const SIDE_BAR_ICON_SIZE = 24;
+
+/**
+ * glass material for side bar controls: dark glass under light icons (banner headers),
+ * light glass otherwise
+ */
+const getGlassStyle = (tintColor?: string) =>
+  tintColor === Colors.black_01 || tintColor === 'white'
+    ? styles.glassDark
+    : styles.glassLight;
+
+/**
+ * 48pt glass circle used for a single control in the iPhone Duo side bar
+ */
+const SideBarButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  showBadge = false,
+  style,
+  ...props
+}) => {
+  const { theme } = useContext(ApplicationContext);
+
+  return (
+    <View>
+      <TouchableOpacity
+        {...props}
+        style={[styles.control, getGlassStyle(tintColor), style]}
+      >
+        <Icon
+          source={icon}
+          color={tintColor ?? theme.colors.text.default}
+          size={SIDE_BAR_ICON_SIZE}
+        />
+      </TouchableOpacity>
+      {showBadge && <BadgeDot size={'small'} style={styles.badgeDot} />}
+    </View>
+  );
+};
+
+/**
+ * 48pt glass capsule grouping related controls, one item per 50pt, laid out vertically
+ * in the side bar or horizontally on a header row
+ */
+const SideBarGroup: React.FC<{
+  tintColor?: string;
+  horizontal?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children: ReactNode;
+}> = ({ tintColor, horizontal = false, style, children }) => {
+  const count = React.Children.toArray(children).length;
+  const length =
+    count > 1 ? count * DuoMetrics.itemPitch : DuoMetrics.controlSize;
+
+  return (
+    <View
+      style={[
+        styles.control,
+        getGlassStyle(tintColor),
+        horizontal
+          ? { width: length, flexDirection: 'row' }
+          : { height: length },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+/**
+ * icon item inside a SideBarGroup
+ */
+const SideBarGroupItem: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  ...props
+}) => {
+  const { theme } = useContext(ApplicationContext);
+
+  return (
+    <TouchableOpacity {...props} style={styles.groupItem}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={SIDE_BAR_ICON_SIZE}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  control: {
+    width: DuoMetrics.controlSize,
+    height: DuoMetrics.controlSize,
+    borderRadius: Radius.XL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  glassLight: {
+    backgroundColor: Colors.black_01 + 'D9',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.black_20 + '14',
+    ...Shadow.Light,
+  },
+  glassDark: {
+    backgroundColor: Colors.black_20 + '80',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.black_01 + '33',
+  },
+  groupItem: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: Spacing.XXS,
+    right: Spacing.XXS,
+  },
+});
+
+export { SideBarButton, SideBarGroup, SideBarGroupItem };

package/Application/ModalScreen.tsx

@@ -8,15 +8,18 @@ import {
   Platform,
   Pressable,
   StyleSheet,
+  useWindowDimensions,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { runOnJS } from 'react-native-reanimated';
+import { getDuoTopInset, isIPhoneDuo } from './device';
+import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
@@ -37,6 +40,8 @@ const Modal: React.FC<ModalParams> = props => {
     title,
   } = props.route.params;
   const Component = useRef(screen).current;
+  const insets = useSafeAreaInsets();
+  const windowSize = useWindowDimensions();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -106,7 +111,7 @@ const Modal: React.FC<ModalParams> = props => {
         }),
       ]).start(() => {
         navigator?.pop();
-        runOnJS(callback)();
+        scheduleOnRN(callback);
       });
     },
     [navigator, opacity, scale],
@@ -147,6 +152,15 @@ const Modal: React.FC<ModalParams> = props => {
               opacity,
               transform: [{ scale }],
             },
+            // center below the side status bar and above the home indicator
+            isIPhoneDuo() && {
+              marginTop: getDuoTopInset(
+                insets,
+                windowSize.width,
+                windowSize.height,
+              ),
+              marginBottom: insets.bottom,
+            },
             modalStyle,
           ]}
         >

package/Application/NavigationContainer.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   SafeAreaInsetsContext,
   SafeAreaProvider,
-  useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -13,14 +12,17 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
-import { getModalOptions, getStackOptions, useNativeCanGoBack } from './utils';
+import {
+  getModalOptions,
+  getStackOptions,
+  isWhiteListDesignSystem,
+  useNativeCanGoBack,
+} from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -28,6 +30,9 @@ import { HeaderRight } from './Components/HeaderRight';
 import { HeaderTitle } from './Components/HeaderTitle';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { type EdgeInsets } from 'react-native-safe-area-context';
+import { useScreenLayout } from '../Layout';
+import { getHeaderRowOptions } from '../Layout/utils';
+import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
 
 const Stack = createStackNavigator();
 
@@ -73,17 +78,19 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         frame: { x: 0, y: 0, width: 0, height: 0 },
       }}
     >
-      <MiniAppContext.Provider value={mergedContext}>
-        <Navigation
-          screen={screen}
-          theme={theme}
-          options={options}
-          maxApi={maxApi}
-          setCurrentContext={setCurrentContext}
-          initialParams={initialParams}
-          localize={localize}
-        />
-      </MiniAppContext.Provider>
+      <ReservedRegionsProvider>
+        <MiniAppContext.Provider value={mergedContext}>
+          <Navigation
+            screen={screen}
+            theme={theme}
+            options={options}
+            maxApi={maxApi}
+            setCurrentContext={setCurrentContext}
+            initialParams={initialParams}
+            localize={localize}
+          />
+        </MiniAppContext.Provider>
+      </ReservedRegionsProvider>
     </SafeAreaProvider>
   );
 };
@@ -101,10 +108,11 @@ const Navigation: React.FC<any> = ({
   const navigationRef = useRef<any>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
-  const [showGrid, setShowGrid] = useState(false);
-  const insets = useSafeAreaInsets();
-  const defaultRegularFontFamily = useDefaultRegularFontFamily();
+  const headerRowOptions = getHeaderRowOptions(useScreenLayout());
   const syncCanGoBack = useNativeCanGoBack();
+  const isWhiteList = isWhiteListDesignSystem(context);
+  const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
+  const navigationFontFamily = isWhiteList ? 'MomoTrustSans-Regular' : 'SFProText';
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -120,23 +128,6 @@ const Navigation: React.FC<any> = ({
    */
   navigator.current.maxApi = maxApi;
 
-  /**
-   * handle mini language & listen change
-   * engine only shake to enable grid view
-   */
-  useEffect(() => {
-    const subscription = DeviceEventEmitter.addListener(
-      'onChangeGrid',
-      enable => {
-        setShowGrid(!!enable);
-      },
-    );
-
-    return () => {
-      subscription?.remove?.();
-    };
-  }, []);
-
   /**
    * translate context method
    * @param data
@@ -156,6 +147,7 @@ const Navigation: React.FC<any> = ({
         navigator: navigator.current,
         theme: {
           ...theme,
+          font: fontFamily,
           colors: {
             ...theme.colors,
             gradient: headerGradient,
@@ -165,7 +157,6 @@ const Navigation: React.FC<any> = ({
             headerBackground,
           },
         },
-        showGrid,
         translate,
       }}
     >
@@ -183,19 +174,19 @@ const Navigation: React.FC<any> = ({
             },
             fonts: {
               regular: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
               medium: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
               bold: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
               heavy: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
             },
@@ -214,9 +205,7 @@ const Navigation: React.FC<any> = ({
               gestureEnabled: false,
               headerTitleAlign: 'center',
               headerTintColor: theme.colors.text.default,
-              headerStyle: {
-                height: 52 + insets.top,
-              },
+              ...headerRowOptions,
             }}
           >
             <Stack.Screen
@@ -239,11 +228,13 @@ const Navigation: React.FC<any> = ({
                 cardStyle: {
                   backgroundColor: theme.colors.background.default,
                 },
-                headerLeft: (props: any) => <HeaderLeft {...props} />,
+                headerLeft: (props: any) => <HeaderLeft {...props} floating />,
                 headerBackground: (props: any) => (
                   <HeaderBackground {...props} />
                 ),
-                headerRight: (props: any) => <HeaderRight {...props} />,
+                headerRight: (props: any) => (
+                  <HeaderRight {...props} floating />
+                ),
                 headerTintColor: Colors.black_17,
                 ...TransitionPresets.ModalTransition,
               }}

package/Application/Navigator.ts

@@ -118,9 +118,7 @@ class Navigator {
   navigate = (name: string) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(
-        CommonActions.navigate({
-          name,
-        })
+        CommonActions.navigate(name)
       );
     }
   };

package/Application/StackScreen.tsx

@@ -4,7 +4,6 @@ import { useHeaderHeight } from '@react-navigation/elements';
 import { ScreenTrackingParams } from './types';
 import Navigation from './Navigation';
 import { ApplicationContext, MiniAppContext, ScreenContext } from '../Context';
-import { GridSystem } from '../Layout';
 import { version } from '../package.json';
 import { SwipeBackHaptic, useAppState } from './utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
@@ -17,7 +16,7 @@ const runAfterInteractions = InteractionManager.runAfterInteractions;
  * @constructor
  */
 const StackScreen: React.FC<any> = props => {
-  const { showGrid, navigator } = useContext(ApplicationContext);
+  const { navigator } = useContext(ApplicationContext);
   const tracking = useRef<any>({
     mounted: false,
     timeoutLoad: undefined,
@@ -42,6 +41,7 @@ const StackScreen: React.FC<any> = props => {
   });
   const widgets = useRef<any>([]);
   const context = useContext<any>(MiniAppContext);
+
   const {
     screen: Component,
     options,
@@ -411,10 +411,7 @@ const StackScreen: React.FC<any> = props => {
     >
       <TooltipPortalProvider>
         <Component heightHeader={heightHeader} {...data} />
-        {showGrid && <GridSystem />}
         <TooltipPortalHost />
-        {/* a leaf on purpose: it subscribes to CardAnimationContext, which changes on every
-            Card render, and must not pull this screen into those renders */}
         <SwipeBackHaptic />
       </TooltipPortalProvider>
     </ScreenContext.Provider>

package/Application/WidgetContainer.tsx

@@ -3,7 +3,6 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { defaultTheme } from '../Consts';
 import {
@@ -11,7 +10,7 @@ import {
   NavigationContainerRef,
   NavigationIndependentTree,
 } from '@react-navigation/native';
-import { getModalOptions } from './utils';
+import { getModalOptions, isWhiteListDesignSystem } from './utils';
 import { createStackNavigator } from '@react-navigation/stack';
 import ModalScreen from './ModalScreen';
 import { View } from 'react-native';
@@ -43,7 +42,6 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady, true));
   const [currentContext, setCurrentContext] = useState({});
-  const defaultRegularFontFamily = useDefaultRegularFontFamily();
 
   useEffect(() => {
     const sub = maxApi?.observer?.('font_scale_config', (data: any) => {
@@ -80,6 +78,9 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
     ...context,
     ...currentContext,
   };
+  const isWhiteList = isWhiteListDesignSystem(mergedContext);
+  const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
+  const navigationFontFamily = isWhiteList ? 'MomoTrustSans-Regular' : 'SFProText';
 
   return (
     <View style={{ height: height ?? '100%', minHeight: 1 }}>
@@ -90,6 +91,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               navigator: navigator.current,
               theme: {
                 ...theme,
+                font: fontFamily,
                 colors: {
                   ...theme.colors,
                   gradient: headerGradient,
@@ -116,19 +118,19 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
                   },
                   fonts: {
                     regular: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                     medium: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                     bold: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                     heavy: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                   },

package/Application/device.ts

@@ -0,0 +1,29 @@
+import { Dimensions, Platform, ScaledSize } from 'react-native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+
+// widest short side of any single-display iPhone
+const IPHONE_MAX_SHORT_SIDE = 440;
+
+// iPhone Duo reports idiom "phone"; 'screen' stays on the outer display, so it
+// still matches when Split View narrows the window
+const isIPhoneDuo = () => {
+  if (Platform.OS !== 'ios' || Platform.isPad) {
+    return false;
+  }
+  const shortSide = (size: ScaledSize) => Math.min(size.width, size.height);
+  return (
+    Math.max(
+      shortSide(Dimensions.get('screen')),
+      shortSide(Dimensions.get('window')),
+    ) > IPHONE_MAX_SHORT_SIDE
+  );
+};
+
+// portrait side status bar is about twice as tall as its inset is wide
+const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
+  Math.max(
+    insets.top,
+    height > width ? Math.max(insets.left, insets.right) * 2 : 0,
+  );
+
+export { isIPhoneDuo, getDuoTopInset };

package/Application/types.ts

@@ -117,7 +117,6 @@ export type Context = {
   [key: string]: any;
   theme: Theme;
   navigator?: NavigatorProps;
-  showGrid?: boolean;
   translate?: (data: string | { vi: string; en: string }) => string;
 };
 
@@ -258,6 +257,11 @@ export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   onBackHandler?: (goBack: () => void) => void;
+  /**
+   * Optional. If `true`, the button floats into the iPhone Duo side bar while the
+   * device shows one. Set when the button is rendered by the navigation header.
+   */
+  floating?: boolean;
 }
 
 export type HeaderBackgroundProps = {
@@ -329,6 +333,11 @@ export type BottomTabProps = {
     blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
   floatingButton?: FloatingButtonProps;
+  /**
+   * iPhone Duo: when the side bar can't hold both bars, which one starts compressed;
+   * tapping the compressed one swaps them. Defaults to 'toolbar'
+   */
+  compressionBehavior?: 'toolbar' | 'tabBar';
 };
 
 export type FloatingButtonProps = {

package/Application/utils.tsx

@@ -73,8 +73,8 @@ const getStackOptions = (): StackNavigationOptions => {
       left: Spacing.S,
     },
     headerBackground: (props: any) => <HeaderBackground {...props} />,
-    headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerRight: (props: any) => <HeaderRight {...props} />,
+    headerLeft: (props: any) => <HeaderLeft {...props} floating />,
+    headerRight: (props: any) => <HeaderRight {...props} floating />,
     headerTintColor: Colors.black_17,
     gestureEnabled: Platform.OS === 'ios',
     ...TransitionPresets.SlideFromRightIOS,
@@ -129,6 +129,7 @@ const getOptions = (
         preventBack={params.preventBack}
         onPressLeftHeader={params.onPressLeftHeader}
         onBackHandler={params.onBackHandler}
+        floating
       />
     );
     if (params.hiddenBack) {
@@ -167,7 +168,9 @@ const getOptions = (
       ...options,
       ...{
         headerRight: (props: any) => {
-          return <HeaderRight {...props} headerRight={params.headerRight} />;
+          return (
+            <HeaderRight {...props} headerRight={params.headerRight} floating />
+          );
         },
       },
     };
@@ -475,6 +478,9 @@ const SwipeBackHaptic = () => {
   return null;
 };
 
+const isWhiteListDesignSystem = (context: any): boolean =>
+  context?.designSystemConfig?.isWhiteListDesignSystem === true;
+
 export {
   getStackOptions,
   getModalOptions,
@@ -487,4 +493,5 @@ export {
   useNativeCanGoBack,
   useNormalizedSharedValue,
   SwipeBackHaptic,
+  isWhiteListDesignSystem,
 };

package/Consts/index.ts

@@ -2,4 +2,3 @@ export * from './colors+spacing+radius';
 export * from './theme';
 export * from './styles';
 export const GRIDVIEW = false;
-export * from './designSystemFont';