@momo-kits/foundation 0.169.1 → 0.169.2

package/Application/BottomTab/DuoTabBar.styles.ts

@@ -1,41 +1,15 @@
 import { StyleSheet } from 'react-native';
-import { Colors, Spacing } from '../../Consts';
+import { Spacing } from '../../Consts';
 import { DuoMetrics } from '../../Layout/utils';
+import { CTA_SHADOW, TabBarMetrics } from './metrics';
 
-export const ITEM_SIZE = DuoMetrics.controlSize;
-export const ICON_SIZE = 28;
-export const QR_ICON_SIZE = 24;
-export const RAIL_PADDING = 6;
-export const RAIL_GAP = Spacing.XXS;
-export const RAIL_PITCH = ITEM_SIZE + RAIL_GAP;
-// selection bubble overflows the 48 rail cell by 5 above and below (Figma MT2)
-export const RAIL_BUBBLE_WIDTH = 44;
-export const RAIL_BUBBLE_HEIGHT = 58;
-export const FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight;
-export const FLOATING_PADDING = Spacing.XS;
-// the system bar sizes its pill to the tabs instead of stretching it across the display
-export const FLOATING_ITEM_WIDTH = 80;
-export const FLOATING_BUBBLE_RADIUS =
-  (FLOATING_HEIGHT - 2 * FLOATING_PADDING) / 2;
-
-/**
- * distance from the screen bottom to the floating tab bar, overlapping the home
- * indicator inset like the system tab bar
- */
-export const getFloatingTabBarBottom = (bottomInset: number) =>
-  Math.max(bottomInset - DuoMetrics.floatingTabBarInsetOverlap, Spacing.S);
+export const RAIL_ITEM_WIDTH = TabBarMetrics.railItemWidth;
+export const RAIL_ITEM_HEIGHT = TabBarMetrics.railItemHeight;
+export const RAIL_COMPACT_SIZE = DuoMetrics.controlSize;
 
 export const styles = StyleSheet.create({
-  barMaterial: {
-    borderWidth: 1,
-  },
-  icon: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-  },
   railColumn: {
     position: 'absolute',
-    gap: Spacing.M,
   },
   railColumnRight: {
     alignItems: 'flex-start',
@@ -45,79 +19,63 @@ export const styles = StyleSheet.create({
     alignItems: 'flex-end',
     paddingRight: Spacing.M,
   },
+  // as wide as the header buttons; the wider rail and center action overflow it evenly
+  railLane: {
+    width: DuoMetrics.controlSize,
+    alignItems: 'center',
+    gap: TabBarMetrics.railCtaGap,
+  },
   railCompact: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
-    borderRadius: ITEM_SIZE / 2,
+    width: RAIL_COMPACT_SIZE,
+    height: RAIL_COMPACT_SIZE,
     alignItems: 'center',
     justifyContent: 'center',
   },
   rail: {
-    width: ITEM_SIZE,
-    paddingVertical: RAIL_PADDING,
-    gap: RAIL_GAP,
+    width: TabBarMetrics.railContainerWidth,
+    paddingHorizontal: TabBarMetrics.railPaddingHorizontal,
+    paddingBottom: TabBarMetrics.railPaddingBottom,
   },
-  railBubble: {
-    position: 'absolute',
-    top: RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2,
-    left: (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
-    width: RAIL_BUBBLE_WIDTH,
-    height: RAIL_BUBBLE_HEIGHT,
+  railIndicator: {
+    top: Spacing.XS,
+    left: TabBarMetrics.railPaddingHorizontal,
+    width: RAIL_ITEM_WIDTH,
+    height: TabBarMetrics.railIndicatorHeight,
   },
   railItem: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
+    width: RAIL_ITEM_WIDTH,
+    height: RAIL_ITEM_HEIGHT,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  railQr: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
-    borderRadius: ITEM_SIZE / 2,
+  railCta: {
+    width: TabBarMetrics.railCtaWidth,
+    height: TabBarMetrics.railCtaHeight,
     alignItems: 'center',
     justifyContent: 'center',
+    gap: TabBarMetrics.railCtaLabelGap,
   },
-  floating: {
-    position: 'absolute',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: Spacing.S,
-  },
-  floatingBar: {
-    flexShrink: 1,
-    height: FLOATING_HEIGHT,
-    padding: FLOATING_PADDING,
-  },
-  floatingRow: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  floatingBubble: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-  },
-  floatingItem: {
-    flex: 1,
+  // custom label content over the label text, centered and unclipped
+  railCtaLabelOverlay: {
+    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  itemLayer: {
+  railCtaLabel: {
+    paddingHorizontal: Spacing.XS,
+  },
+  railCtaButton: {
+    boxShadow: CTA_SHADOW,
+    width: TabBarMetrics.railCtaSize,
+    height: TabBarMetrics.railCtaSize,
+    borderRadius: TabBarMetrics.railCtaSize / 2,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: Spacing.XXS,
   },
-  // pink fills the whole pinned platter
-  floatingQr: {
-    width: FLOATING_HEIGHT,
-    height: FLOATING_HEIGHT,
-    borderRadius: FLOATING_HEIGHT / 2,
+  floating: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
     alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: Colors.black_20,
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.16,
-    shadowRadius: 16,
   },
 });

package/Application/BottomTab/DuoTabBar.tsx

@@ -1,145 +1,64 @@
-import React, { useContext, useMemo, useState } from 'react';
-import { LayoutChangeEvent, TouchableOpacity, View } from 'react-native';
-import { GestureDetector } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
-import { ApplicationContext } from '../../Context';
-import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
-import { useLiquidSelection } from './hooks';
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import React from 'react';
+import { useWindowDimensions, View } from 'react-native';
+import { useScreenLayout } from '../../Layout/utils';
+import { FloatingButtonProps } from '../types';
+import { getSystemIndicatorHeight, HorizontalTabBar } from './BottomTabBar';
+import { getHorizontalBarWidth, TabBarMetrics } from './metrics';
+import { getTabItems } from './tabItems';
 import { DuoRailTabBar } from './DuoRailTabBar';
-import {
-  BarMaterial,
-  getTabItems,
-  LiquidTabItem,
-  Props,
-  QrIcon,
-  SelectionMaterial,
-  TabLabel,
-} from './DuoTabBar.parts';
-import {
-  FLOATING_BUBBLE_RADIUS,
-  FLOATING_HEIGHT,
-  FLOATING_ITEM_WIDTH,
-  FLOATING_PADDING,
-  getFloatingTabBarBottom,
-  QR_ICON_SIZE,
-  styles,
-} from './DuoTabBar.styles';
+import { styles } from './DuoTabBar.styles';
+
+type DuoTabBarProps = BottomTabBarProps & {
+  activeTintColor: string;
+  inactiveTintColor: string;
+  floatingButton?: FloatingButtonProps;
+};
 
 /**
- * space tab content leaves under the Duo floating tab bar, 0 elsewhere
+ * space tab content leaves under the floating horizontal tab bar (phone and unfolded Duo);
+ * 0 when the Duo rail sits in the side bar
  */
 const useDuoTabBarInset = () => {
   const { isIPhoneDuo, sideBar, insets } = useScreenLayout();
-  if (!isIPhoneDuo || sideBar) {
+  if (isIPhoneDuo && sideBar) {
     return 0;
   }
-  return FLOATING_HEIGHT + getFloatingTabBarBottom(insets.bottom);
+  return TabBarMetrics.height + getSystemIndicatorHeight(insets.bottom);
 };
 
 /**
- * floating labelled bar for the unfolded portrait display, QR pinned in its own
- * platter on the trailing side
+ * horizontal navigation bar of the unfolded display: 65% of the short side, centered
  */
-const DuoFloatingTabBar: React.FC<Props> = props => {
-  const { theme } = useContext(ApplicationContext);
+const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
   const { insets } = useScreenLayout();
-  const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
-  const items = getTabItems(props);
-  const [rowWidth, setRowWidth] = useState(0);
-  const cellWidth = rowWidth / state.routes.length;
-
-  const selection = useLiquidSelection({
-    count: items.length,
-    pitch: cellWidth,
-    firstCenter: cellWidth / 2,
-    axis: 'x',
-    index: state.index,
-    onSelect: itemIndex => items[itemIndex]?.onPress(),
-  });
-  const { barStyle, bubbleStyle } = selection;
-  const tabCount = state.routes.length;
-  // stable style arrays, see Rail
-  const floatingBarStyle = useMemo(
-    () => [
-      styles.floatingBar,
-      { width: tabCount * FLOATING_ITEM_WIDTH + 2 * FLOATING_PADDING },
-      barStyle,
-    ],
-    [tabCount, barStyle],
-  );
-  const floatingBubbleStyle = useMemo(
-    () => [styles.floatingBubble, { width: cellWidth }, bubbleStyle],
-    [cellWidth, bubbleStyle],
-  );
-
-  const onRowLayout = (e: LayoutChangeEvent) =>
-    setRowWidth(e.nativeEvent.layout.width);
+  const { width, height } = useWindowDimensions();
+  const { floatingButton, activeTintColor, inactiveTintColor } = props;
 
   return (
     <View
       pointerEvents={'box-none'}
       style={[
         styles.floating,
-        {
-          left: insets.left + DuoMetrics.floatingTabBarMargin,
-          right: insets.right + DuoMetrics.floatingTabBarMargin,
-          bottom: getFloatingTabBarBottom(insets.bottom),
-        },
+        { bottom: getSystemIndicatorHeight(insets.bottom) },
       ]}
     >
-      <Animated.View
-        style={floatingBarStyle}
-        accessibilityLabel={'bottom_tab_bar'}
-      >
-        <BarMaterial radius={FLOATING_HEIGHT / 2} />
-        <GestureDetector gesture={selection.gesture}>
-          <View style={styles.floatingRow} onLayout={onRowLayout}>
-            {rowWidth > 0 && (
-              <Animated.View pointerEvents={'none'} style={floatingBubbleStyle}>
-                <SelectionMaterial radius={FLOATING_BUBBLE_RADIUS} />
-              </Animated.View>
-            )}
-            {items.map((item, index) => (
-              <LiquidTabItem
-                key={item.route.key}
-                item={item}
-                itemIndex={index}
-                selection={selection}
-                onSelect={item.onPress}
-                renderContent={active => (
-                  <>
-                    {item.renderIcon(active)}
-                    <TabLabel
-                      label={item.label}
-                      typography={'label_xs_medium'}
-                      color={active ? activeTintColor : inactiveTintColor}
-                    />
-                  </>
-                )}
-                style={styles.floatingItem}
-              />
-            ))}
-          </View>
-        </GestureDetector>
-      </Animated.View>
-      {floatingButton && (
-        <TouchableOpacity
-          accessibilityRole={'button'}
-          accessibilityLabel={floatingButton.label}
-          onPress={floatingButton.onPress}
-          style={[styles.floatingQr, { backgroundColor: theme.colors.primary }]}
-        >
-          <QrIcon icon={floatingButton.icon} size={QR_ICON_SIZE} />
-        </TouchableOpacity>
-      )}
+      <HorizontalTabBar
+        fixedFontScale
+        items={getTabItems(props)}
+        width={getHorizontalBarWidth(width, height, insets.left, insets.right)}
+        floatingButton={floatingButton}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+      />
     </View>
   );
 };
 
 /**
- * iPhone Duo tab bar: rail in the side bar, or a floating bar when unfolded portrait
+ * iPhone Duo tab bar: rail in the side bar, or the horizontal bar when unfolded portrait
  */
-const DuoTabBar: React.FC<Props> = props => {
+const DuoTabBar: React.FC<DuoTabBarProps> = props => {
   const { sideBar } = useScreenLayout();
   return sideBar ? (
     <DuoRailTabBar {...props} />
@@ -148,4 +67,5 @@ const DuoTabBar: React.FC<Props> = props => {
   );
 };
 
+export type { DuoTabBarProps };
 export { DuoTabBar, useDuoTabBarInset };

package/Application/BottomTab/TabBarIcon.tsx

@@ -1,113 +1,201 @@
-import type { Route } from '@react-navigation/native';
-import React from 'react';
-import {
-  type StyleProp,
-  StyleSheet,
-  type TextStyle,
-  View,
-  type ViewStyle,
-} from 'react-native';
+import React, { useContext, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
-import { Colors } from '../../Consts';
-import { Badge, BadgeDot } from '../../Badge';
+import { Colors, Spacing } from '../../Consts';
+import { ApplicationContext, MiniAppContext } from '../../Context';
+import { BadgeDot } from '../../Badge';
+import { Text } from '../../Text';
+import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type Props = {
-  route: Route<string>;
+  focused: boolean;
+  // '' shows a dot, anything else a label badge
   badge?: string | number;
-  badgeStyle?: StyleProp<TextStyle> | any;
-  activeOpacity: number;
-  inactiveOpacity: number;
-  activeTintColor?: string;
-  inactiveTintColor?: string;
-  renderIcon: (props: {
+  // rail items center the label badge over the icon
+  vertical?: boolean;
+  activeTintColor: string;
+  inactiveTintColor: string;
+  renderIcon?: (props: {
     focused: boolean;
     color: string;
     size: number;
   }) => React.ReactNode;
-  allowFontScaling?: boolean;
-  style: StyleProp<ViewStyle>;
 };
 
 /**
- * Icon sizes taken from Apple HIG
- * https://developer.apple.com/design/human-interface-guidelines/tab-bars
+ * badge value shown on a tab: undefined hides it, '' is a dot, numbers cap at 99+
  */
-const ICON_SIZE_WIDE = 35;
+export const getTabBadge = (
+  badgeLabel?: string | number,
+  showDot?: boolean,
+) => {
+  if (badgeLabel === undefined || badgeLabel === null) {
+    return showDot ? '' : undefined;
+  }
+  const text = `${badgeLabel}`;
+  if (text === '') {
+    return '';
+  }
+  if (/^\d+$/.test(text)) {
+    const value = Number(text);
+    if (value === 0) {
+      return showDot ? '' : undefined;
+    }
+    return value > 99 ? '99+' : text;
+  }
+  return text;
+};
+
+/**
+ * text at its design size: like the system tab bar it doesn't grow with the OS font scale or
+ * the wide Duo displays, which Text otherwise scales up to 5pt
+ */
+export const FixedScaleText: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  return (
+    <MiniAppContext.Provider
+      value={{
+        ...context,
+        fontScale: { useOSScaleRate: false, userScaleRate: 1 },
+      }}
+    >
+      {children}
+    </MiniAppContext.Provider>
+  );
+};
 
+/**
+ * numbers use the error color, text the warning color (Figma Badge round numeric / text)
+ */
+const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
+  label,
+  vertical,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const isNumber = /^\d+\+?$/.test(label);
+  const badge = (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: isNumber
+            ? theme.colors.error.primary
+            : theme.colors.warning.primary,
+          borderColor: theme.colors.background.surface,
+        },
+      ]}
+    >
+      <FixedScaleText>
+        <Text
+          numberOfLines={1}
+          typography={'action_xxs_bold'}
+          color={Colors.black_01}
+        >
+          {label}
+        </Text>
+      </FixedScaleText>
+    </View>
+  );
+  if (vertical) {
+    return <View style={styles.badgeCentered}>{badge}</View>;
+  }
+  return <View style={styles.badgeLeading}>{badge}</View>;
+};
+
+/**
+ * 24 icon; active and inactive icons are stacked and cross-faded on focus
+ */
 export function TabBarIcon({
-  route: _,
+  focused,
   badge,
-  badgeStyle,
-  activeOpacity,
-  inactiveOpacity,
+  vertical,
   activeTintColor,
   inactiveTintColor,
   renderIcon,
-  style,
 }: Props) {
-  const iconSize = 25;
+  const size = TabBarMetrics.iconSize;
+  const progress = useSharedValue(focused ? 1 : 0);
+
+  useEffect(() => {
+    progress.value = withTiming(focused ? 1 : 0, TabBarMotion.tint);
+  }, [focused, progress]);
+
+  const activeStyle = useAnimatedStyle(() => ({ opacity: progress.value }));
+  const inactiveStyle = useAnimatedStyle(() => ({
+    opacity: 1 - progress.value,
+  }));
 
   const renderBadge = () => {
-    if (badge == null) {
-      return;
+    if (badge === undefined || badge === null) {
+      return null;
     }
     if (badge === '') {
-      return <BadgeDot size={'small'} style={[styles.badge, badgeStyle]} />;
+      return <BadgeDot size={'small'} style={styles.dot} />;
     }
-    return <Badge style={[styles.badge, badgeStyle]} label={badge} />;
+    return <TabBadge label={`${badge}`} vertical={vertical} />;
   };
 
-  // We render the icon twice at the same position on top of each other:
-  // active and inactive one, so we can fade between them.
   return (
-    <View style={[styles.wrapperUikit, style]}>
-      <View
-        style={[
-          styles.icon,
-          {
-            opacity: activeOpacity,
-            // Workaround for react-native >= 0.54 layout bug
-            minWidth: iconSize,
-          },
-        ]}
-      >
-        {renderIcon({
-          focused: true,
-          size: iconSize,
-          color: activeTintColor ?? Colors.black_20,
-        })}
-      </View>
-      <View style={[styles.icon, { opacity: inactiveOpacity }]}>
-        {renderIcon({
-          focused: false,
-          size: iconSize,
-          color: inactiveTintColor ?? Colors.black_04,
-        })}
-      </View>
+    <View style={styles.icon}>
+      <Animated.View style={[styles.layer, activeStyle]}>
+        {renderIcon?.({ focused: true, size, color: activeTintColor })}
+      </Animated.View>
+      <Animated.View style={[styles.layer, inactiveStyle]}>
+        {renderIcon?.({ focused: false, size, color: inactiveTintColor })}
+      </Animated.View>
       {renderBadge()}
     </View>
   );
 }
 
+const BADGE_HEIGHT = 16;
+const BADGE_BORDER = 1;
+
 const styles = StyleSheet.create({
   icon: {
-    // We render the icon twice at the same position on top of each other:
-    // active and inactive one, so we can fade between them:
-    // Cover the whole iconContainer:
-    position: 'absolute',
-    alignSelf: 'center',
+    width: TabBarMetrics.iconSize,
+    height: TabBarMetrics.iconSize,
+  },
+  layer: {
+    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    height: '100%',
-    width: '100%',
   },
-  wrapperUikit: {
-    width: ICON_SIZE_WIDE,
-    height: ICON_SIZE_WIDE,
+  dot: {
+    position: 'absolute',
+    left: 16,
+    top: -Spacing.XXS,
   },
-  badge: {
+  badgeLeading: {
     position: 'absolute',
-    end: -3,
-    top: -3,
+    left: Spacing.M,
+    top: -7,
+    width: TabBarMetrics.badgeMaxWidth,
+    alignItems: 'flex-start',
+  },
+  badgeCentered: {
+    position: 'absolute',
+    left: (TabBarMetrics.iconSize - TabBarMetrics.badgeMaxWidth) / 2,
+    top: -10,
+    width: TabBarMetrics.badgeMaxWidth,
+    alignItems: 'center',
+  },
+  badge: {
+    height: BADGE_HEIGHT,
+    minWidth: BADGE_HEIGHT,
+    maxWidth: TabBarMetrics.badgeMaxWidth,
+    // the border is drawn inside the 4 padding, like the Figma inside stroke
+    paddingHorizontal: Spacing.XS - BADGE_BORDER,
+    borderRadius: BADGE_HEIGHT / 2,
+    borderWidth: BADGE_BORDER,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 });