@momo-kits/foundation 0.167.2-beta.1 → 0.168.1-beta.2

package/Application/Components/SideBarButton.tsx

@@ -0,0 +1,134 @@
+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) => {
+  const isLightTint = tintColor === Colors.black_01 || tintColor === 'white';
+  return isLightTint ? 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 { itemPitch, controlSize } = DuoMetrics;
+  const length = count > 1 ? count * itemPitch : controlSize;
+  let sizeStyle: ViewStyle = { height: length };
+  if (horizontal) {
+    sizeStyle = { width: length, flexDirection: 'row' };
+  }
+
+  return (
+    <View style={[styles.control, getGlassStyle(tintColor), sizeStyle, 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,7 +12,6 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
@@ -32,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();
 
@@ -77,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>
   );
 };
@@ -105,8 +108,7 @@ 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 headerRowOptions = getHeaderRowOptions(useScreenLayout());
   const syncCanGoBack = useNativeCanGoBack();
   const isWhiteList = isWhiteListDesignSystem(context);
   const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
@@ -126,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
@@ -172,7 +157,6 @@ const Navigation: React.FC<any> = ({
             headerBackground,
           },
         },
-        showGrid,
         translate,
       }}
     >
@@ -221,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
@@ -246,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/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 />
+          );
         },
       },
     };
@@ -394,10 +397,10 @@ const getSwipeGestureValue = (
     | Animated.Value
     | undefined;
 
-  return typeof parent?.addListener === 'function' &&
-    typeof parent?.removeListener === 'function'
-    ? parent
-    : undefined;
+  const isListenable =
+    typeof parent?.addListener === 'function' &&
+    typeof parent?.removeListener === 'function';
+  return isListenable ? parent : undefined;
 };
 
 const readAnimatedValue = (node: unknown, fallback: number): number => {

package/Badge/Badge.tsx

@@ -75,9 +75,8 @@ const Badge: FC<BadgeProps> = ({
     return label.toString();
   };
 
-  let badgeColor = isNumber()
-    ? theme.colors.error.primary
-    : theme.colors.warning.primary;
+  const { error, warning } = theme.colors;
+  let badgeColor = isNumber() ? error.primary : warning.primary;
 
   if (backgroundColor && isValidatedColor()) {
     badgeColor = backgroundColor;

package/Badge/BadgeDotAnimation.tsx

@@ -19,9 +19,9 @@ const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
   const waveScaleAnim = useSharedValue(1);
   const waveOpacityAnim = useSharedValue(0);
 
-  const dotStyle =
-    size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;
-  const waveStyle = size === 'small' ? styles.waveSmall : styles.wave;
+  const isSmall = size === 'small';
+  const dotStyle = isSmall ? styles.dotAnimationSmall : styles.dotAnimation;
+  const waveStyle = isSmall ? styles.waveSmall : styles.wave;
 
   useEffect(() => {
     const springCfg = { damping: 5, stiffness: 30, mass: 1 };

package/Button/index.tsx

@@ -272,6 +272,16 @@ const Button: FC<ButtonProps> = ({
     const showLoading = shouldShowLoading(iconLeft, iconRight, isLeft);
 
     if (loading && showLoading) {
+      let webStyle;
+      if (Platform.OS === 'web') {
+        webStyle = {
+          width: iconSize,
+          height: iconSize,
+          marginRight: isLeft ? space : 0,
+          marginLeft: isLeft ? 0 : space,
+          borderRadius: Spacing.M,
+        };
+      }
       return (
         <LottieView
           ref={animationRef}
@@ -284,17 +294,7 @@ const Button: FC<ButtonProps> = ({
             { keypath: 'base pink 2.Ellipse 1.Stroke 1', color: textColor },
           ]}
           style={[style, { borderRadius: Spacing.M }]}
-          webStyle={
-            Platform.OS === 'web'
-              ? {
-                  width: iconSize,
-                  height: iconSize,
-                  marginRight: isLeft ? space : 0,
-                  marginLeft: isLeft ? 0 : space,
-                  borderRadius: Spacing.M,
-                }
-              : undefined
-          }
+          webStyle={webStyle}
         />
       );
     }

package/Consts/theme.ts

@@ -1,5 +1,5 @@
-import type {Context, Theme} from '../Application/types';
-import {Colors} from './colors+spacing+radius';
+import type { Context, Theme } from '../Application/types';
+import { Colors } from './colors+spacing+radius';
 
 const defaultTheme: Theme = {
   dark: false,
@@ -112,10 +112,9 @@ const defaultDarkTheme: Theme = {
 const defaultContext: Context = {
   theme: defaultTheme,
   navigator: undefined,
-  showGrid: false,
   translate: () => {
     return '';
   },
 };
 
-export {defaultContext, defaultTheme, defaultDarkTheme};
+export { defaultContext, defaultTheme, defaultDarkTheme };

package/Input/Input.tsx

@@ -6,9 +6,8 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEventData,
+  TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -102,12 +101,12 @@ const Input = forwardRef(
       onChangeText?.(text);
     };
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onBlur = (e: TextInputFocusEvent) => {
       setFocused(false);
       onBlur?.(e);
     };