jfs-components 0.0.62 → 0.0.64

package/src/components/Avatar/Avatar.tsx

@@ -1,18 +1,115 @@
-import React from 'react'
-import { Pressable, View, Image, Text, type ImageSourcePropType, type ViewStyle, type TextStyle, type ImageStyle } from 'react-native'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import {
+  Pressable,
+  View,
+  Image,
+  Text,
+  Platform,
+  type ImageSourcePropType,
+  type ViewStyle,
+  type TextStyle,
+  type ImageStyle,
+  type PressableStateCallbackType,
+  type StyleProp,
+} from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png')
 
+// ---------------------------------------------------------------------------
+// Module-scope constants — never re-allocated per render.
+// ---------------------------------------------------------------------------
+
+const IS_WEB = Platform.OS === 'web'
+const IS_IOS = Platform.OS === 'ios'
+const PRESS_DELAY = IS_IOS ? 130 : 0
+
+// Pressed visual is applied through Pressable's style callback so the host
+// view updates without scheduling a React render.
+const pressedOverlayStyle: ViewStyle = { transform: [{ scale: 0.98 }] }
+const focusOverlayStyle: ViewStyle = { borderColor: '#222', borderWidth: 1 }
+
+const imageContainerStyle: ViewStyle = {
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden',
+}
+
+const imageBaseStyle: ImageStyle = {
+  width: '100%',
+  height: '100%',
+}
+
+const monogramContainerStyle: ViewStyle = {
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingVertical: 7,
+  paddingHorizontal: 5,
+}
+
+// ---------------------------------------------------------------------------
+// Token resolution — collapsed into one useMemo per (modes, style) tuple.
+// ---------------------------------------------------------------------------
+
+interface AvatarTokens {
+  containerStyle: ViewStyle;
+  imageContainerStyle: ViewStyle;
+  imageStyle: ImageStyle;
+  monogramTextStyle: TextStyle;
+}
+
+function resolveAvatarTokens(modes: Record<string, any>, isMonogram: boolean): AvatarTokens {
+  const size = (getVariableByName('avatar/size', modes) || 29) as number
+  const radiusRaw = (getVariableByName('avatar/radius', modes) || 9999) as number
+  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff'
+  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)'
+  const borderSize = (getVariableByName('avatar/border/size', modes) || 1) as number
+  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5'
+  const labelFontSize = (getVariableByName('avatar/label/fontSize', modes) || 12) as number
+  const labelLineHeight = (getVariableByName('avatar/label/lineHeight', modes) || 14) as number
+  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes) || 500
+  const labelFontWeight =
+    typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw
+  const labelFontFamily = (getVariableByName('avatar/label/fontFamily', modes) || 'Inter') as string
+
+  // 9999 is the design-token sentinel for "perfect circle"
+  const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw
+
+  return {
+    containerStyle: {
+      width: size,
+      height: size,
+      borderRadius,
+      borderWidth: borderSize,
+      borderColor: borderColor as string,
+      overflow: 'hidden',
+      ...(isMonogram ? { backgroundColor: backgroundColor as string } : {}),
+    },
+    imageContainerStyle: {
+      ...imageContainerStyle,
+      borderRadius,
+    },
+    imageStyle: {
+      ...imageBaseStyle,
+      borderRadius,
+    },
+    monogramTextStyle: {
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontWeight: labelFontWeight as TextStyle['fontWeight'],
+      fontFamily: labelFontFamily,
+      color: labelColor as string,
+      textAlign: 'center',
+    },
+  }
+}
+
 /**
  * Avatar component that displays either an image or a monogram.
- * 
- * This component supports two styles:
- * - Image: Displays a user's profile picture
- * - Monogram: Displays user initials in a circular background
- * 
- * All styling values are resolved from Figma design tokens using the provided modes.
- * 
+ *
  * @component
  * @param {Object} props - Component props
  * @param {string} [props.monogram="MS"] - The initials to display when style is "Monogram"
@@ -20,19 +117,18 @@ const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png')
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Avatar Size": "M"})
  * @param {string} [props.imageSource] - Optional image source for Image style (defaults to built-in image)
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses monogram or "User avatar"
- * 
- * @example
- * ```jsx
- * // Image style
- * <Avatar style="Image" modes={{"Avatar Size": "M"}} />
- * 
- * // Monogram style
- * <Avatar style="Monogram" monogram="JD" modes={{"Avatar Size": "L"}} />
- * ```
+ *
+ * Performance notes:
+ *  - All token reads are folded into a single `useMemo([modes, isMonogram])`.
+ *  - Press visual goes through Pressable's `({ pressed })` style callback so
+ *    a scroll-cancelled touch never schedules a React render. iOS gets
+ *    `unstable_pressDelay={130}` for additional safety inside scrollables.
+ *  - Focus state stays in React (it's a sustained visual) but the setter is
+ *    gated to web only, where focus events actually fire.
  */
 export type AvatarProps = {
   monogram?: string;
-  style?: "Image" | "Monogram";
+  style?: 'Image' | 'Monogram';
   modes?: Record<string, any>;
   imageSource?: ImageSourcePropType | string;
   accessibilityLabel?: string;
@@ -41,169 +137,144 @@ export type AvatarProps = {
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel'>;
 
 function Avatar({
-  monogram = "MS",
-  style = "Image",
-  modes = {},
+  monogram = 'MS',
+  style = 'Image',
+  modes = EMPTY_MODES,
   imageSource,
-  accessibilityLabel,
+  // accessibilityLabel is accepted on the type for API back-compat but the
+  // component intentionally renders `accessibilityLabel={undefined}` on the
+  // wrapper (the inner Text/Image carry the label instead).
+  accessibilityLabel: _accessibilityLabel,
   ...rest
 }: AvatarProps) {
-  // Resolve design tokens using the provided modes
-  const size = getVariableByName('avatar/size', modes) || 29
-  const radius = getVariableByName('avatar/radius', modes) || 9999
-  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff'
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)'
-  const borderSize = getVariableByName('avatar/border/size', modes) || 1
-  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5'
-  const labelFontSize = getVariableByName('avatar/label/fontSize', modes) || 12
-  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes) || 14
-  const labelFontWeight = getVariableByName('avatar/label/fontWeight', modes) || 500
-  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes) || 'Inter'
-
-  // Convert radius to React Native format (if 9999, use size/2 for perfect circle)
-  const borderRadius = radius === 9999 ? size / 2 : radius
-
-  // Container style
-  const containerStyle: ViewStyle = {
-    width: size,
-    height: size,
-    borderRadius: borderRadius,
-    borderWidth: borderSize,
-    borderColor: borderColor,
-    overflow: 'hidden',
-    ...(style === 'Monogram' ? { backgroundColor: backgroundColor } : {})
-  }
+  const isMonogram = style === 'Monogram'
+  const tokens = useMemo(() => resolveAvatarTokens(modes, isMonogram), [modes, isMonogram])
 
-  // Image container style
-  const imageContainerStyle: ViewStyle = {
-    width: '100%',
-    height: '100%',
-    borderRadius: borderRadius,
-    overflow: 'hidden',
-  }
+  // Focus is a sustained visible state — keep mirroring on web; gate the
+  // setter so it never fires on native (where focus events don't fire on
+  // these elements anyway).
+  const [isFocused, setIsFocused] = useState(false)
 
-  // Image style
-  const imageStyle: ImageStyle = {
-    width: '100%',
-    height: '100%',
-    borderRadius: borderRadius,
-  }
+  // Mirror user handlers in a ref so our wrappers can stay referentially
+  // stable across renders.
+  const userHandlersRef = useRef<{
+    onPressIn?: (e: any) => void
+    onPressOut?: (e: any) => void
+    onFocus?: (e: any) => void
+    onBlur?: (e: any) => void
+  }>({})
+  userHandlersRef.current.onPressIn = (rest as any)?.onPressIn
+  userHandlersRef.current.onPressOut = (rest as any)?.onPressOut
+  userHandlersRef.current.onFocus = (rest as any)?.onFocus
+  userHandlersRef.current.onBlur = (rest as any)?.onBlur
 
-  // Monogram container style
-  const monogramContainerStyle: ViewStyle = {
-    width: '100%',
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: 7,
-    paddingHorizontal: 5,
-  }
+  const handlePressIn = useCallback((e: any) => {
+    userHandlersRef.current.onPressIn?.(e)
+  }, [])
+  const handlePressOut = useCallback((e: any) => {
+    userHandlersRef.current.onPressOut?.(e)
+  }, [])
+  const handleFocus = useCallback((e: any) => {
+    if (IS_WEB) setIsFocused(true)
+    userHandlersRef.current.onFocus?.(e)
+  }, [])
+  const handleBlur = useCallback((e: any) => {
+    if (IS_WEB) setIsFocused(false)
+    userHandlersRef.current.onBlur?.(e)
+  }, [])
 
-  // Monogram text style
-  const monogramTextStyle: TextStyle = {
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight,
-    fontFamily: labelFontFamily,
-    color: labelColor,
-    textAlign: 'center',
-  }
+  const pressableStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+      tokens.containerStyle,
+      pressed ? pressedOverlayStyle : null,
+      isFocused ? focusOverlayStyle : null,
+    ],
+    [tokens.containerStyle, isFocused]
+  )
 
-  // Generate default accessibility label
-  const defaultAccessibilityLabel = accessibilityLabel ||
-    (style === "Monogram" ? `Avatar with initials ${monogram}` : "User avatar")
-  // Interaction placeholders for press/focus
-  const [isPressed, setIsPressed] = React.useState(false)
-  const [isFocused, setIsFocused] = React.useState(false)
-  const pressedStyle = isPressed ? { transform: [{ scale: 0.98 }] } : null
-  const focusStyle = isFocused ? { borderColor: '#222', borderWidth: 1 } : null
-
-  if (style === "Monogram") {
-    const Wrapper: any = (rest as any)?.onPress ? Pressable : View
+  const staticContainerStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [tokens.containerStyle, isFocused ? focusOverlayStyle : null],
+    [tokens.containerStyle, isFocused]
+  )
+
+  // The inner content varies; everything else (wrapper, handlers, style) is shared.
+  const innerContent = isMonogram ? (
+    <View style={monogramContainerStyle}>
+      <Text
+        style={tokens.monogramTextStyle}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      >
+        {monogram}
+      </Text>
+    </View>
+  ) : (
+    <ImageContent
+      tokens={tokens}
+      imageSource={imageSource}
+    />
+  )
+
+  const isPressable = !!(rest as any)?.onPress
+
+  if (isPressable) {
     return (
-      <Wrapper
-        style={[containerStyle, pressedStyle, focusStyle]}
+      <Pressable
+        style={pressableStyle}
         accessibilityRole="image"
         accessibilityLabel={undefined}
-        onPressIn={(e: any) => {
-          setIsPressed(true)
-            ; (rest as any)?.onPressIn?.(e)
-        }}
-        onPressOut={(e: any) => {
-          setIsPressed(false)
-            ; (rest as any)?.onPressOut?.(e)
-        }}
-        onFocus={(e: any) => {
-          setIsFocused(true)
-            ; (rest as any)?.onFocus?.(e)
-        }}
-        onBlur={(e: any) => {
-          setIsFocused(false)
-            ; (rest as any)?.onBlur?.(e)
-        }}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        unstable_pressDelay={PRESS_DELAY}
         {...rest}
       >
-        <View style={monogramContainerStyle}>
-          <Text
-            style={monogramTextStyle}
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no"
-          >
-            {monogram}
-          </Text>
-        </View>
-      </Wrapper>
+        {innerContent}
+      </Pressable>
     )
   }
 
-  // Normalize imageSource: if it's a string (URL), convert to { uri: string } format
-  // Otherwise, use it as-is (could be require() result or already { uri: ... } object)
-  const normalizedImageSource = React.useMemo(() => {
+  return (
+    <View
+      style={staticContainerStyle}
+      accessibilityRole="image"
+      accessibilityLabel={undefined}
+      {...rest}
+    >
+      {innerContent}
+    </View>
+  )
+}
+
+// Memoize the image normalization so a string URL that doesn't change
+// doesn't keep producing a new `{ uri }` object every render.
+function ImageContent({
+  tokens,
+  imageSource,
+}: {
+  tokens: AvatarTokens;
+  imageSource?: ImageSourcePropType | string;
+}) {
+  const normalizedImageSource = useMemo(() => {
     if (!imageSource) return avatarImage
     if (typeof imageSource === 'string') {
-      // If it's a string, treat it as a URL
       return { uri: imageSource }
     }
-    // Otherwise, use it as-is (could be require() result or { uri: ... } object)
     return imageSource
   }, [imageSource])
 
-  const Wrapper: any = (rest as any)?.onPress ? Pressable : View
   return (
-    <Wrapper
-      style={[containerStyle, pressedStyle, focusStyle]}
-      accessibilityRole="image"
-      accessibilityLabel={undefined}
-      onPressIn={(e: any) => {
-        setIsPressed(true)
-          ; (rest as any)?.onPressIn?.(e)
-      }}
-      onPressOut={(e: any) => {
-        setIsPressed(false)
-          ; (rest as any)?.onPressOut?.(e)
-      }}
-      onFocus={(e: any) => {
-        setIsFocused(true)
-          ; (rest as any)?.onFocus?.(e)
-      }}
-      onBlur={(e: any) => {
-        setIsFocused(false)
-          ; (rest as any)?.onBlur?.(e)
-      }}
-      {...rest}
-    >
-      <View style={imageContainerStyle}>
-        <Image
-          source={normalizedImageSource}
-          resizeMode="cover"
-          style={imageStyle}
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
-        />
-      </View>
-    </Wrapper>
+    <View style={tokens.imageContainerStyle}>
+      <Image
+        source={normalizedImageSource}
+        resizeMode="cover"
+        style={tokens.imageStyle}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      />
+    </View>
   )
 }
 
-export default Avatar
-
+export default React.memo(Avatar)

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -3,7 +3,7 @@ import { View, Platform, type ViewStyle } from 'react-native';
 import MaskedView from '@react-native-masked-view/masked-view';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
 
 type AvatarGroupProps = {
     modes?: Record<string, any>;
@@ -11,7 +11,7 @@ type AvatarGroupProps = {
     style?: ViewStyle;
 } & React.ComponentProps<typeof View>;
 
-function AvatarGroup({ modes = {}, children, style, ...rest }: AvatarGroupProps) {
+function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGroupProps) {
     const gap = getVariableByName('avatarGroup/gap', modes) || 0;
 
 

package/src/components/Badge/Badge.tsx

@@ -7,6 +7,7 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 type BadgeProps = {
   /** Visible label text shown inside the badge */
@@ -22,7 +23,7 @@ type BadgeProps = {
 
 function Badge({
   label = 'Label',
-  modes = {},
+  modes = EMPTY_MODES,
   onPress,
   accessibilityLabel,
   style,

package/src/components/Balance/Balance.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import MoneyValue from '../MoneyValue/MoneyValue'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type BalanceProps = {
     /**
@@ -47,7 +48,7 @@ function Balance({
     title = "Total owed to people",
     amount = "500",
     currency = "₹",
-    modes = {},
+    modes = EMPTY_MODES,
     style,
     children,
 }: BalanceProps) {

package/src/components/BottomNav/BottomNav.tsx

@@ -3,6 +3,7 @@ import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import BottomNavItem from '../BottomNavItem/BottomNavItem'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 type BottomNavProps = {
   /**
@@ -41,7 +42,7 @@ function BottomNav({
   value,
   onChange,
   children,
-  modes: propModes = {},
+  modes: propModes = EMPTY_MODES,
   style,
   accessibilityLabel = undefined,
   accessibilityHint,