@momo-kits/foundation 0.167.1-duotest.2 → 0.167.1

package/Application/Components/DuoGlassBackground.tsx

@@ -1,179 +0,0 @@
-import React, { useContext, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-import { ApplicationContext } from '../../Context';
-import { Shadow } from '../../Consts';
-import { Image } from '../../Image';
-import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
-import { GlassView } from './OptionalGlassView';
-
-// extended headers run their gradient this far below the header, as off Duo
-const EXTENDED_GRADIENT_EXTRA = 52;
-// scroll distance over which the extended gradient collapses to the header
-const EXTENDED_COLLAPSE_DISTANCE = 100;
-// scroll distance over which the bar material fades in
-const FADE_DISTANCE = 16;
-const TRANSLUCENT_ALPHA = 'CC';
-
-/**
- * iPhone Duo header background: glass running edge to edge, behind the status bar
- * column too, shown once content scrolls under it
- */
-const DuoGlassBackground: React.FC<{
-  animatedValue?: AnimatedCompatValue;
-  // scroll offset where the bar starts to show, e.g. below an animated banner
-  fadeStart?: number;
-}> = ({ animatedValue, fadeStart = 0 }) => {
-  const { theme } = useContext(ApplicationContext);
-  const sharedValue = useNormalizedSharedValue(animatedValue);
-  const [scrolled, setScrolled] = useState(false);
-
-  useAnimatedReaction(
-    () => sharedValue.value > fadeStart,
-    (isScrolled, wasScrolled) => {
-      if (GlassView && isScrolled !== wasScrolled) {
-        runOnJS(setScrolled)(isScrolled);
-      }
-    },
-    [fadeStart],
-  );
-
-  const fadeStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      sharedValue.value,
-      [fadeStart, fadeStart + FADE_DISTANCE],
-      [0, 1],
-      Extrapolation.CLAMP,
-    ),
-  }));
-
-  return (
-    <View pointerEvents={'none'} style={StyleSheet.absoluteFill}>
-      {GlassView ? (
-        // UIVisualEffectView breaks under alpha, so glass toggles its effect instead
-        <GlassView
-          effect={scrolled ? 'glass' : 'none'}
-          useShadow
-          style={StyleSheet.absoluteFill}
-        />
-      ) : (
-        <Animated.View
-          style={[
-            StyleSheet.absoluteFill,
-            styles.translucentBar,
-            {
-              backgroundColor:
-                theme.colors.background.surface + TRANSLUCENT_ALPHA,
-              borderBottomColor: theme.colors.border.default,
-            },
-            fadeStyle,
-          ]}
-        />
-      )}
-    </View>
-  );
-};
-
-/**
- * pink header gradient drawn under the content, fading out on scroll as main's extended
- * header does: header-high for default headers, 52 taller (collapsing) for extended
- */
-const DuoScrollGradient: React.FC<{
-  animatedValue?: AnimatedCompatValue;
-  gradientColor?: string;
-  headerBackground?: string;
-  heightHeader: number;
-  extended?: boolean;
-  // quick return header: the gradient leaves with the content instead of fading
-  followScroll?: boolean;
-}> = ({
-  animatedValue,
-  gradientColor,
-  headerBackground,
-  heightHeader,
-  extended,
-  followScroll,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const sharedValue = useNormalizedSharedValue(animatedValue);
-  const color = gradientColor ?? theme.colors.gradient;
-  const image = headerBackground ?? theme.assets?.headerBackground;
-
-  const scrollStyle = useAnimatedStyle(() => {
-    if (followScroll) {
-      return {
-        height: heightHeader + (extended ? EXTENDED_GRADIENT_EXTRA : 0),
-        transform: [{ translateY: -Math.max(sharedValue.value, 0) }],
-      };
-    }
-    return {
-      height: extended
-        ? interpolate(
-            sharedValue.value,
-            [0, EXTENDED_COLLAPSE_DISTANCE],
-            [heightHeader + EXTENDED_GRADIENT_EXTRA, heightHeader],
-            Extrapolation.CLAMP,
-          )
-        : heightHeader,
-      opacity: interpolate(
-        sharedValue.value,
-        [0, EXTENDED_GRADIENT_EXTRA],
-        [1, 0],
-        Extrapolation.CLAMP,
-      ),
-    };
-  });
-
-  if (!color) {
-    return null;
-  }
-
-  return (
-    <Animated.View
-      pointerEvents={'none'}
-      style={[styles.gradient, scrollStyle]}
-    >
-      <LinearGradient
-        colors={[color, color + '00']}
-        style={StyleSheet.absoluteFill}
-      >
-        {!!image && (
-          <Image
-            style={styles.gradientFill}
-            source={{ uri: image }}
-            loading={false}
-          />
-        )}
-      </LinearGradient>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  translucentBar: {
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    ...Shadow.Light,
-  },
-  gradient: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    overflow: 'hidden',
-  },
-  // banner image keeps its 375:154 shape, the gradient box clips it
-  gradientFill: {
-    width: '100%',
-    position: 'absolute',
-    aspectRatio: 375 / 154,
-  },
-});
-
-export { DuoGlassBackground, DuoScrollGradient };

package/Application/Components/DuoQuickReturnHeader.tsx

@@ -1,42 +0,0 @@
-import React, { createContext, useContext } from 'react';
-import { StackHeaderProps, Header } from '@react-navigation/stack';
-import Animated, {
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-
-// how far the header is pushed above the top edge
-const DuoHeaderOffsetContext = createContext<SharedValue<number> | undefined>(
-  undefined,
-);
-
-/**
- * iPhone Duo header that leaves with the content and comes back when scrolling back
- */
-const DuoQuickReturnHeader: React.FC<
-  StackHeaderProps & { offset: SharedValue<number> }
-> = ({ offset, ...props }) => {
-  const style = useAnimatedStyle(() => ({
-    transform: [{ translateY: -offset.value }],
-  }));
-
-  return (
-    <DuoHeaderOffsetContext.Provider value={offset}>
-      <Animated.View pointerEvents={'box-none'} style={style}>
-        <Header {...props} />
-      </Animated.View>
-    </DuoHeaderOffsetContext.Provider>
-  );
-};
-
-/**
- * side bar controls render inside the header; this cancels its offset so they stay put
- */
-const useSideBarCounterStyle = () => {
-  const offset = useContext(DuoHeaderOffsetContext);
-  return useAnimatedStyle(() => ({
-    transform: [{ translateY: offset ? offset.value : 0 }],
-  }));
-};
-
-export { DuoQuickReturnHeader, useSideBarCounterStyle };

package/Application/Components/OptionalGlassView.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-
-// native glass is optional so apps without @momo-kits/glass-view still bundle
-let GlassView: React.ComponentType<any> | undefined;
-try {
-  GlassView = require('@momo-kits/glass-view').GlassView;
-} catch {
-  GlassView = undefined;
-}
-
-export { GlassView };

package/Application/Components/OptionalScrollObserver.ts

@@ -1,12 +0,0 @@
-import type React from 'react';
-
-// native observer is optional so apps without it in @momo-kits/reserved-regions still bundle
-let ScrollObserverView: React.ComponentType<any> | undefined;
-try {
-  ScrollObserverView =
-    require('@momo-kits/reserved-regions').ScrollObserverView;
-} catch {
-  ScrollObserverView = undefined;
-}
-
-export { ScrollObserverView };

package/Application/Components/SideBarButton.tsx

@@ -1,139 +0,0 @@
-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/device.ts

@@ -1,29 +0,0 @@
-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/Layout/ReservedRegions.tsx

@@ -1,47 +0,0 @@
-import React, { createContext, ReactNode, useState } from 'react';
-import { Platform, StyleSheet } from 'react-native';
-
-export type ReservedRegion = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
-// native probe is optional so apps without @momo-kits/reserved-regions still bundle
-let ReservedRegionsView: React.ComponentType<any> | undefined;
-try {
-  ReservedRegionsView =
-    require('@momo-kits/reserved-regions').ReservedRegionsView;
-} catch {
-  ReservedRegionsView = undefined;
-}
-
-/**
- * screen regions the system currently occludes, in window coordinates
- */
-const ReservedRegionsContext = createContext<ReservedRegion[]>([]);
-
-/**
- * tracks the system occlusion regions (iOS 27.1+), e.g. the iPhone Duo status bar
- * cluster growing for a call or a Live Activity
- */
-const ReservedRegionsProvider: React.FC<{ children: ReactNode }> = ({
-  children,
-}) => {
-  const [regions, setRegions] = useState<ReservedRegion[]>([]);
-
-  return (
-    <ReservedRegionsContext.Provider value={regions}>
-      {children}
-      {Platform.OS === 'ios' && !!ReservedRegionsView && (
-        <ReservedRegionsView
-          style={StyleSheet.absoluteFill}
-          onRegionsChange={setRegions}
-        />
-      )}
-    </ReservedRegionsContext.Provider>
-  );
-};
-
-export { ReservedRegionsContext, ReservedRegionsProvider };

package/Popup/utils.ts

@@ -1,32 +0,0 @@
-import { Dimensions, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Spacing } from '../Consts';
-import { getDuoTopInset, isIPhoneDuo } from '../Application/device';
-
-// width of a system alert on the iPhone Duo inner display, in both orientations
-const DUO_POPUP_MAX_WIDTH = 440;
-
-const usePopupWidth = () => {
-  const windowSize = useWindowDimensions();
-  if (!isIPhoneDuo()) {
-    return Dimensions.get('window').width - Spacing.XL * 2;
-  }
-  return Math.min(windowSize.width - Spacing.XL * 2, DUO_POPUP_MAX_WIDTH);
-};
-
-// room left for a popup on iPhone Duo, where landscape is too short for it
-const usePopupMaxHeight = () => {
-  const insets = useSafeAreaInsets();
-  const { width, height } = useWindowDimensions();
-  if (!isIPhoneDuo()) {
-    return undefined;
-  }
-  return (
-    height -
-    getDuoTopInset(insets, width, height) -
-    insets.bottom -
-    Spacing.XL * 2
-  );
-};
-
-export { usePopupWidth, usePopupMaxHeight };