jfs-components 0.1.25 → 0.1.28

package/src/components/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,268 @@
+import React, { useMemo } from 'react'
+import {
+  View,
+  type StyleProp,
+  type ViewStyle,
+  type ImageSourcePropType,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Avatar from '../Avatar/Avatar'
+import Attached from '../Attached/Attached'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import ListItem from '../ListItem/ListItem'
+import UpiHandle from '../UpiHandle/UpiHandle'
+import Divider from '../Divider/Divider'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single UPI handle pill rendered under the profile name.
+ */
+export interface ProfileCardUpiHandle {
+  /** Handle text, e.g. `"username@jio"` or a phone number. */
+  label: string
+  /** Trailing registry icon (e.g. `'ic_copy'`, `'ic_confirm'`). */
+  iconName?: string
+  /** Toggles the trailing icon. Defaults to `true`. */
+  showIcon?: boolean
+  /** Makes the pill pressable (e.g. copy-to-clipboard). */
+  onPress?: () => void
+}
+
+export interface ProfileCardProps {
+  /** User's display name shown in the header. */
+  name?: string
+  /** Monogram initials for the avatar (used when `avatarSource` is not set). */
+  monogram?: string
+  /** Avatar image source. When set, the avatar renders the image instead of the monogram. */
+  avatarSource?: ImageSourcePropType | string
+  /**
+   * Registry icon for the small badge attached to the avatar's bottom-right
+   * corner. Pass `null` to hide the badge. Defaults to `'ic_qr_code'`.
+   */
+  badgeIcon?: string | null
+  /** UPI handle pills rendered under the name. Pass `[]` to render none. */
+  upiHandles?: ProfileCardUpiHandle[]
+  /**
+   * Full override for the header row (avatar + name + handles). Takes
+   * precedence over the declarative header props. `modes` cascade into it.
+   */
+  header?: React.ReactNode
+  /**
+   * Card body (the Figma "slot"). Rendered below the header divider; `modes`
+   * (including the profile-card context) cascade into every child, so nested
+   * `ListItem`s, `Divider`s, `Text`s and `Button`s resolve the on-dark
+   * profile-card token values automatically.
+   */
+  children?: React.ReactNode
+  /** Toggles the divider between the header and the body. Defaults to `true`. */
+  showDivider?: boolean
+  /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+  width?: number | `${number}%`
+  /** Modes object for design-token resolution, cascaded to all children. */
+  modes?: Modes
+  /** Style overrides for the card container. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for the card. */
+  accessibilityLabel?: string
+}
+
+// Forced modes for everything rendered inside the card — the profile card is
+// an on-dark (jioPlus) surface, so child components (Avatar, UpiHandle,
+// ListItem, Divider, Text, Button, …) must resolve their tokens through the
+// `context 10: jioPlus` mode. Consumer modes are spread first so appearance
+// modes (e.g. `Profile Card Appearance: Premium`) still cascade through.
+const CARD_CONTEXT: Modes = Object.freeze({ 'context 10': 'jioPlus' })
+
+const DEFAULT_UPI_HANDLES: ProfileCardUpiHandle[] = [
+  { label: 'username@jio', iconName: 'ic_copy' },
+  { label: '9999999999', iconName: 'ic_confirm' },
+]
+
+interface ProfileCardTokens {
+  containerStyle: ViewStyle
+  handlesRowStyle: ViewStyle
+  badgeBackground: string
+  childModes: Modes
+  badgeModes: Modes
+}
+
+function resolveProfileCardTokens(modes: Modes): ProfileCardTokens {
+  const backgroundColor = (getVariableByName('profileCard/bg', modes) ?? '#00065a') as string
+  const gap = (getVariableByName('profileCard/gap', modes) ?? 12) as number
+  const borderRadius = (getVariableByName('profileCard/radius', modes) ?? 12) as number
+  const paddingHorizontal = (getVariableByName('profileCard/padding/horizontal', modes) ?? 20) as number
+  const paddingVertical = (getVariableByName('profileCard/padding/vertical', modes) ?? 20) as number
+
+  const childModes: Modes = { ...modes, ...CARD_CONTEXT }
+
+  // The UPI handle pills sit in the header ListItem's support slot, whose row
+  // gap is the `slot/gap` token in the ListItem context.
+  const handlesGap = (getVariableByName('slot/gap', { ...childModes, Context: 'ListItem' }) ?? 2) as number
+
+  // The avatar badge is a white circle: the fill comes from the Attached
+  // slot's background token (the IconCapsule itself resolves transparent).
+  const badgeBackground = (getVariableByName('attached/slot/background', childModes) ?? '#ffffff') as string
+
+  return {
+    containerStyle: {
+      backgroundColor,
+      borderRadius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'stretch',
+    },
+    handlesRowStyle: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      gap: handlesGap,
+    },
+    badgeBackground,
+    childModes,
+    // XS capsule per the Figma spec; consumers can still override the size
+    // through their own modes.
+    badgeModes: { 'Icon Capsule Size': 'XS', ...modes, ...CARD_CONTEXT },
+  }
+}
+
+/**
+ * ProfileCard — Figma node 6914:38498 ("Profile Card").
+ *
+ * A dark, rounded profile summary card composed from the shared primitives:
+ *
+ *  - **Header** — a {@link ListItem} whose leading slot is an {@link Attached}
+ *    monogram {@link Avatar} with a small {@link IconCapsule} badge at its
+ *    bottom-right, the user's name as the title, and a row of
+ *    {@link UpiHandle} pills in the support slot.
+ *  - **Divider** — separates the header from the body.
+ *  - **Body slot** — arbitrary children (typically `ListItem`s separated by
+ *    `Divider`s). All profile-card context modes cascade into the slot, so
+ *    nested components automatically resolve their on-dark token values.
+ *
+ * The card supports the `Profile Card Appearance` collection
+ * (`Default` | `Premium`) via the `modes` prop, which recolors the container,
+ * avatar, pills and divider in one go.
+ *
+ * @example
+ * ```tsx
+ * <ProfileCard
+ *   name="Shruti Chandarshekhar Rai"
+ *   monogram="SR"
+ *   upiHandles={[
+ *     { label: 'shrutirai-1@jio', iconName: 'ic_copy', onPress: copyHandle },
+ *     { label: '9184844184', iconName: 'ic_confirm' },
+ *   ]}
+ * >
+ *   <ListItem layout="Horizontal" title="JioFinance+" navArrow={false} />
+ * </ProfileCard>
+ * ```
+ */
+function ProfileCard({
+  name = 'Name',
+  monogram = 'MS',
+  avatarSource,
+  badgeIcon = 'ic_qr_code',
+  upiHandles = DEFAULT_UPI_HANDLES,
+  header,
+  children,
+  showDivider = true,
+  width = 344,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+}: ProfileCardProps) {
+  const { modes: globalModes } = useTokens()
+
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+
+  const tokens = useMemo(() => resolveProfileCardTokens(modes), [modes])
+
+  // ---- Header -------------------------------------------------------------
+  const headerNode = useMemo(() => {
+    if (header) return cloneChildrenWithModes(header, tokens.childModes)
+
+    const avatar = (
+      <Attached
+        position="bottom-right"
+        modes={tokens.childModes}
+        badge={
+          badgeIcon != null ? (
+            <IconCapsule
+              iconName={badgeIcon}
+              modes={tokens.badgeModes}
+              style={{ backgroundColor: tokens.badgeBackground }}
+            />
+          ) : null
+        }
+      >
+        <Avatar
+          monogram={monogram}
+          style={avatarSource ? 'Image' : 'Monogram'}
+          {...(avatarSource != null ? { imageSource: avatarSource } : {})}
+          modes={tokens.childModes}
+        />
+      </Attached>
+    )
+
+    const handles = upiHandles.length > 0 ? (
+      <View style={tokens.handlesRowStyle}>
+        {upiHandles.map((handle, index) => (
+          <UpiHandle
+            key={`${handle.label}-${index}`}
+            label={handle.label}
+            {...(handle.iconName != null ? { iconName: handle.iconName } : {})}
+            showIcon={handle.showIcon ?? true}
+            {...(handle.onPress != null ? { onPress: handle.onPress } : {})}
+            modes={tokens.childModes}
+          />
+        ))}
+      </View>
+    ) : null
+
+    return (
+      <ListItem
+        layout="Horizontal"
+        title={name}
+        navArrow={false}
+        showSupportText={handles != null}
+        supportSlot={handles}
+        leading={avatar}
+        modes={tokens.childModes}
+      />
+    )
+  }, [header, name, monogram, avatarSource, badgeIcon, upiHandles, tokens])
+
+  // ---- Body slot ----------------------------------------------------------
+  const bodyChildren = useMemo(
+    () => (children != null ? cloneChildrenWithModes(children, tokens.childModes) : null),
+    [children, tokens.childModes]
+  )
+  const hasBody = bodyChildren != null && bodyChildren.length > 0
+
+  const containerStyle = useMemo<ViewStyle>(
+    () => ({ ...tokens.containerStyle, width }),
+    [tokens.containerStyle, width]
+  )
+
+  return (
+    <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+      {headerNode}
+      {hasBody && showDivider ? (
+        <Divider direction="horizontal" modes={tokens.childModes} />
+      ) : null}
+      {bodyChildren}
+    </View>
+  )
+}
+
+export default React.memo(ProfileCard)

package/src/components/UpiHandle/UpiHandle.tsx

@@ -18,10 +18,6 @@ import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
 import Icon from '../../icons/Icon'
 import type { Modes } from '../../design-tokens'
 
-// Default static asset from the component folder.
-// Consumers can override the image via the `source` prop if needed.
-const DEFAULT_AVATAR_IMAGE = require('./Image.png')
-
 const IS_WEB = Platform.OS === 'web'
 const IS_IOS = Platform.OS === 'ios'
 const PRESS_DELAY = IS_IOS ? 130 : 0
@@ -39,6 +35,12 @@ type UpiHandleProps = {
    * inline SVG XML string, a `require()` asset, an SVG React component, or
    * an already-rendered element. See {@link UnifiedSource}. Avatars are
    * intentionally **not** tinted — the source renders as-is.
+   *
+   * The leading avatar is driven entirely by this prop: providing a `source`
+   * (or the deprecated `avatarSource`) force-sets the Figma "UPI Handle Image"
+   * collection to `True` and renders the avatar; omitting it force-sets the
+   * mode to `False` and hides it. This override wins over any `UPI Handle
+   * Image` value passed via `modes`.
    */
   source?: UnifiedSource;
   /**
@@ -134,7 +136,7 @@ function resolveUpiHandleTokens(modes: Modes): UpiHandleTokens {
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
- * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web.
+ * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web. Providing a source force-sets `UPI Handle Image: True` (avatar shown); omitting it force-sets `False` (avatar hidden), overriding any `UPI Handle Image` value passed via `modes`.
  * @param {ImageSourcePropType|UnifiedSource} [props.avatarSource] - Deprecated alias for `source`; kept for back-compat.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
@@ -168,12 +170,21 @@ function UpiHandle({
 }: UpiHandleProps) {
   const { modes: globalModes } = useTokens()
 
-  const modes = useMemo(
-    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+  // The avatar is fully driven by the presence of a `source`. It force-sets the
+  // Figma "UPI Handle Image" collection to `True` when a source is provided and
+  // `False` otherwise. This is applied last so it overrides any consumer-passed
+  // `UPI Handle Image` mode, keeping the avatar visibility and the token layout
+  // (symmetric padding in the hidden-image state) in lockstep with the source.
+  const hasSource = source != null || avatarSource != null
+
+  const modes = useMemo(() => {
+    const base = globalModes === EMPTY_MODES && propModes === EMPTY_MODES
       ? EMPTY_MODES
-      : { ...globalModes, ...propModes }),
-    [globalModes, propModes]
-  )
+      : { ...globalModes, ...propModes }
+    return { ...base, 'UPI Handle Image': hasSource ? 'True' : 'False' }
+  }, [globalModes, propModes, hasSource])
+
+  const showImageResolved = hasSource
 
   const tokens = useMemo(() => resolveUpiHandleTokens(modes), [modes])
 
@@ -226,25 +237,25 @@ function UpiHandle({
 
   // `source` wins; `avatarSource` is the legacy fallback. Both are accepted
   // as a UnifiedSource (string / number / {uri} / component / element), and
-  // the legacy `ImageSourcePropType` shapes naturally fit that union too.
-  const resolvedAvatarSource: UnifiedSource =
-    (source as UnifiedSource | undefined) ??
-    (avatarSource as UnifiedSource | undefined) ??
-    (DEFAULT_AVATAR_IMAGE as UnifiedSource)
+  // the legacy `ImageSourcePropType` shapes naturally fit that union too. This
+  // is only read when `showImageResolved` is true, which requires a source.
+  const resolvedAvatarSource = (source ?? avatarSource) as UnifiedSource
 
   const avatarSize = (tokens.avatarStyle.width as number | undefined) ?? 23
 
   const innerContent = (
     <>
-      <View style={tokens.avatarStyle}>
-        <MediaSource
-          source={resolvedAvatarSource}
-          size={avatarSize}
-          resizeMode="cover"
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
-        />
-      </View>
+      {showImageResolved && (
+        <View style={tokens.avatarStyle}>
+          <MediaSource
+            source={resolvedAvatarSource}
+            size={avatarSize}
+            resizeMode="cover"
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no"
+          />
+        </View>
+      )}
       <Text
         style={tokens.labelStyle}
         {...resolveTruncation(disableTruncation, 1, 'tail')}