jfs-components 0.0.71 → 0.0.72

package/src/components/InstitutionBadge/InstitutionBadge.tsx

@@ -0,0 +1,216 @@
+import React, { useMemo } from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} 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 MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
+
+// Default avatar asset (shared with the Avatar component) so that
+// InstitutionBadge has a sensible visual fallback when no `source` is
+// provided in stories or playgrounds.
+const DEFAULT_AVATAR_IMAGE = require('../Avatar/31595e70c4181263f9971590224b12934b280c9b.png')
+
+type InstitutionBadgeBaseProps = Omit<
+  React.ComponentProps<typeof View>,
+  'children' | 'style'
+>
+
+export type InstitutionBadgeProps = InstitutionBadgeBaseProps & {
+  /** Visible label for the institution (e.g. bank name). */
+  label?: string
+  /**
+   * Unified avatar source. Accepts a remote URI (raster or `.svg`), an
+   * inline SVG XML string, a `require()` asset, an SVG React component,
+   * or an already-rendered React element. Smart-detects raster vs SVG so
+   * the same prop works on iOS, Android and web. See {@link UnifiedSource}.
+   * Ignored when `avatarSlot` is provided.
+   */
+  source?: UnifiedSource
+  /** Slot replacing the default Avatar (e.g. for monogram avatars). Receives `modes` recursively. */
+  avatarSlot?: React.ReactNode
+  /** Design token modes forwarded to token lookups and the Avatar slot. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Label style override. */
+  labelStyle?: StyleProp<TextStyle>
+  /** Accessibility label. Defaults to `label`. */
+  accessibilityLabel?: string
+}
+
+interface InstitutionBadgeTokens {
+  containerStyle: ViewStyle
+  avatarStyle: ViewStyle
+  avatarSize: number
+  labelStyle: TextStyle
+}
+
+const toNumber = (value: unknown, fallback: number) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback
+  }
+
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+
+  return fallback
+}
+
+const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
+  if (typeof value === 'number') {
+    return String(value) as TextStyle['fontWeight']
+  }
+
+  if (typeof value === 'string') {
+    return value as TextStyle['fontWeight']
+  }
+
+  return fallback
+}
+
+function resolveInstitutionBadgeTokens(
+  modes: Record<string, any>
+): InstitutionBadgeTokens {
+  const gap = toNumber(getVariableByName('institutionBadge/gap', modes), 8)
+
+  const foreground =
+    (getVariableByName('institutionBadge/foreground', modes) as string) ||
+    '#080d1a'
+  const fontSize = toNumber(
+    getVariableByName('institutionBadge/fontSize', modes),
+    14
+  )
+  const fontFamily =
+    (getVariableByName('institutionBadge/fontFamily', modes) as string) ||
+    'JioType Var'
+  const lineHeight = toNumber(
+    getVariableByName('institutionBadge/lineHeight', modes),
+    18
+  )
+  const fontWeight = toFontWeight(
+    getVariableByName('institutionBadge/fontWeight', modes),
+    '500'
+  )
+
+  // Avatar wrapper styled from shared `avatar/*` tokens so the badge stays
+  // visually consistent with other Avatar-bearing components.
+  const avatarSize = toNumber(getVariableByName('avatar/size', modes), 36)
+  const avatarRadiusRaw = toNumber(
+    getVariableByName('avatar/radius', modes),
+    9999
+  )
+  // 9999 is the design-token sentinel for "perfect circle".
+  const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw
+  const avatarBorderColor =
+    (getVariableByName('avatar/border/color', modes) as string) ||
+    'rgba(255,255,255,0)'
+  const avatarBorderSize = toNumber(
+    getVariableByName('avatar/border/size', modes),
+    1
+  )
+
+  return {
+    containerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap,
+    },
+    avatarStyle: {
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarRadius,
+      borderWidth: avatarBorderSize,
+      borderColor: avatarBorderColor,
+      overflow: 'hidden',
+    },
+    avatarSize,
+    labelStyle: {
+      color: foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+    },
+  }
+}
+
+// Default Avatar Size = M (36px in tokens) — matches the Figma badge. Callers
+// can override via `modes` if needed.
+const DEFAULT_AVATAR_MODE = 'M'
+
+function InstitutionBadge({
+  label = 'State Bank of India',
+  source,
+  avatarSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  ...rest
+}: InstitutionBadgeProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const avatarModes = useMemo(
+    () => ({ 'Avatar Size': DEFAULT_AVATAR_MODE, ...modes }),
+    [modes]
+  )
+
+  const tokens = useMemo(
+    () => resolveInstitutionBadgeTokens(avatarModes),
+    [avatarModes]
+  )
+
+  const processedAvatarSlot = useMemo(() => {
+    if (!avatarSlot) return null
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(avatarSlot),
+      avatarModes
+    )
+    return processed.length === 1 ? processed[0] : processed
+  }, [avatarSlot, avatarModes])
+
+  const resolvedSource: UnifiedSource =
+    (source as UnifiedSource | undefined) ?? (DEFAULT_AVATAR_IMAGE as UnifiedSource)
+
+  const defaultAccessibilityLabel = accessibilityLabel ?? label
+
+  return (
+    <View
+      accessibilityLabel={defaultAccessibilityLabel}
+      style={[tokens.containerStyle, style]}
+      {...rest}
+    >
+      {processedAvatarSlot || (
+        <View style={tokens.avatarStyle}>
+          <MediaSource
+            source={resolvedSource}
+            size={tokens.avatarSize}
+            resizeMode="cover"
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no"
+          />
+        </View>
+      )}
+      <Text style={[tokens.labelStyle, labelStyle]} numberOfLines={1}>
+        {label}
+      </Text>
+    </View>
+  )
+}
+
+export default React.memo(InstitutionBadge)

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,227 @@
+import React, { useMemo, useState } from 'react'
+import {
+    Pressable,
+    View,
+    StyleSheet,
+    Platform,
+    ViewStyle,
+    DimensionValue,
+    StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface RadioProps {
+    /**
+     * Whether the radio is selected.
+     */
+    selected?: boolean
+    /**
+     * Whether the radio is disabled.
+     */
+    disabled?: boolean
+    /**
+     * Function to call when the radio is pressed.
+     */
+    onPress?: () => void
+    /**
+     * Modes object for design-token resolution.
+     */
+    modes?: Record<string, any>
+    /**
+     * Custom style for the radio container.
+     */
+    style?: StyleProp<ViewStyle>
+    /**
+     * Test ID for testing.
+     */
+    testID?: string
+}
+
+// ---------------------------------------------------------------------------
+// Radio
+// ---------------------------------------------------------------------------
+
+export function Radio({
+    selected = false,
+    disabled = false,
+    onPress,
+    modes = EMPTY_MODES,
+    style,
+    testID,
+}: RadioProps) {
+    // ---- Refs & State ----
+    const [hovered, setHovered] = useState(false)
+    const [focused, setFocused] = useState(false)
+    const [pressed, setPressed] = useState(false)
+
+    // ---- Dimensions ----
+    const widthStr = getVariableByName('radio/width', modes) || '18'
+    const heightStr = getVariableByName('radio/height', modes) || '18'
+    const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10'
+
+    const width = parseFloat(widthStr?.toString() || '18')
+    const height = parseFloat(heightStr?.toString() || '18')
+    const selectorSize = parseFloat(selectorSizeStr?.toString() || '10')
+
+    // ---- State Logic ----
+    // Priority: Disabled -> Focused -> Hover/Pressed -> Idle
+    // Note: Design treats Active (Pressed) similar to Selected for some styles, 
+    // but usually in Radios, Pressed is a transient state.
+    // We will map:
+    // - Disabled -> 'disabled'
+    // - Focused -> 'focus'
+    // - Hovered -> 'hover'
+    // - Idle -> 'idle'
+
+    // We handle `selected` as a separate dimension derived from state.
+
+    let visualState = 'idle'
+    if (disabled) {
+        visualState = 'disabled'
+    } else if (focused) {
+        visualState = 'focus'
+    } else if (hovered || pressed) {
+        visualState = 'hover'
+    }
+
+    // Construct token paths based on state + selected
+    let prefix = `radio/${visualState}`
+    if (visualState === 'idle' && selected) {
+        prefix = `radio/selected`
+    } else if (selected) {
+        prefix = `radio/${visualState}Selected`
+    }
+
+    // ---- Colors & Border ----
+
+    const resolveColor = (path: string, fallback: string) => {
+        return getVariableByName(path, modes) || fallback
+    }
+
+    // Background Color
+    let bgColorVar = `${prefix}/background/color`
+    // Fix for disabledSelected weirdness if needed
+    if (visualState === 'disabled' && selected) {
+        // Check specific path from dump: `radio/disabledSelected/background`
+        if (!getVariableByName(`${prefix}/background/color`, modes)) {
+            bgColorVar = `${prefix}/background`
+        }
+    }
+
+    // Border Color
+    let borderColorVar = `${prefix}/border/color`
+
+    // Border Width
+    let borderWidthVar = `${prefix}/border/size`
+    // Fix for huge path: `radio/disabled/radio/disabled/border/size`
+    if (visualState === 'disabled' && !selected) {
+        if (getVariableByName('radio/disabled/radio/disabled/border/size', modes)) {
+            borderWidthVar = 'radio/disabled/radio/disabled/border/size'
+        }
+    }
+
+    // Selector Color
+    let selectorBgVar = `${prefix}/selector/background/color`
+    if (!selected) {
+        selectorBgVar = 'transparent'
+    }
+
+    // Shadows (Glow)
+    let shadowSizeVar = `${prefix}/boxShadow/size`
+    let shadowColorVar = `${prefix}/shadow/color`
+
+    // Resolve Values
+    const backgroundColor = resolveColor(bgColorVar, 'transparent')
+    const borderColor = resolveColor(borderColorVar, 'transparent')
+    const borderWidth = parseFloat(getVariableByName(borderWidthVar, modes)?.toString() || '1')
+    const selectorColor = resolveColor(selectorBgVar, 'transparent')
+
+    const shadowSize = parseFloat(getVariableByName(shadowSizeVar, modes)?.toString() || '0')
+    const shadowColor = resolveColor(shadowColorVar, 'transparent')
+
+    // Styles
+    const containerStyle: any = {
+        width,
+        height,
+        borderRadius: width / 2, // 9999px -> circle
+        borderWidth,
+        borderColor,
+        backgroundColor,
+        justifyContent: 'center',
+        alignItems: 'center',
+        // Web shadow (ring)
+        ...(Platform.OS === 'web' && shadowSize > 0 ? {
+            boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`,
+        } : {}),
+    }
+
+    const selectorStyle: ViewStyle = {
+        width: selectorSize,
+        height: selectorSize,
+        borderRadius: selectorSize / 2,
+        backgroundColor: selectorColor,
+    }
+
+    // Dummy block for token extraction (static analysis)
+    if (false as boolean) {
+        getVariableByName('radio/idle/background/color')
+        getVariableByName('radio/idle/border/color')
+        getVariableByName('radio/selector/size')
+        getVariableByName('radio/width')
+        getVariableByName('radio/height')
+        getVariableByName('radio/background/color')
+        getVariableByName('radio/hover/background/color')
+        getVariableByName('radio/hover/border/color')
+        getVariableByName('radio/hover/boxShadow/size')
+        getVariableByName('radio/hover/shadow/color')
+        getVariableByName('radio/selected/background/color')
+        getVariableByName('radio/selected/border/color')
+        getVariableByName('radio/selected/selector/background/color')
+        getVariableByName('radio/hoverSelected/background/color')
+        getVariableByName('radio/hoverSelected/border/color')
+        getVariableByName('radio/hoverSelected/boxShadow/size')
+        getVariableByName('radio/hoverSelected/shadow/color')
+        getVariableByName('radio/hoverSelected/selector/background/color')
+        getVariableByName('radio/focus/background/color')
+        getVariableByName('radio/focus/border/color')
+        getVariableByName('radio/focus/border/size')
+        getVariableByName('radio/focus/boxShadow/size')
+        getVariableByName('radio/focus/shadow/color')
+        getVariableByName('radio/focusSelected/background/color')
+        getVariableByName('radio/focusSelected/selector/background/color')
+        getVariableByName('radio/focusSelected/border/size')
+        getVariableByName('radio/disabled/radio/disabled/border/size')
+        getVariableByName('radio/disabled/background/color')
+        getVariableByName('radio/disabled/border/color')
+        getVariableByName('radio/disabledSelected/selector/background/color')
+        getVariableByName('radio/disabledSelected/background')
+        getVariableByName('radio/disabledSelected/border/color')
+    }
+
+    return (
+        <Pressable
+            testID={testID}
+            disabled={disabled}
+            onPress={onPress}
+            onHoverIn={() => setHovered(true)}
+            onHoverOut={() => setHovered(false)}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            onPressIn={() => setPressed(true)}
+            onPressOut={() => setPressed(false)}
+            style={({ pressed: isPressed }) => [
+                containerStyle,
+                style,
+            ]}
+        >
+            <View style={selectorStyle} />
+        </Pressable>
+    )
+}
+
+export default Radio

package/src/components/RadioButton/RadioButton.tsx

@@ -1,227 +1,25 @@
-import React, { useMemo, useState } from 'react'
-import {
-    Pressable,
-    View,
-    StyleSheet,
-    Platform,
-    ViewStyle,
-    DimensionValue,
-    StyleProp,
-} from 'react-native'
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
-
-// ---------------------------------------------------------------------------
-// Props
-// ---------------------------------------------------------------------------
-
-export interface RadioButtonProps {
-    /**
-     * Whether the radio button is selected.
-     */
-    selected?: boolean
-    /**
-     * Whether the radio button is disabled.
-     */
-    disabled?: boolean
-    /**
-     * Function to call when the radio button is pressed.
-     */
-    onPress?: () => void
-    /**
-     * Modes object for design-token resolution.
-     */
-    modes?: Record<string, any>
-    /**
-     * Custom style for the radio button container.
-     */
-    style?: StyleProp<ViewStyle>
-    /**
-     * Test ID for testing.
-     */
-    testID?: string
-}
-
-// ---------------------------------------------------------------------------
-// RadioButton
-// ---------------------------------------------------------------------------
-
-export function RadioButton({
-    selected = false,
-    disabled = false,
-    onPress,
-    modes = EMPTY_MODES,
-    style,
-    testID,
-}: RadioButtonProps) {
-    // ---- Refs & State ----
-    const [hovered, setHovered] = useState(false)
-    const [focused, setFocused] = useState(false)
-    const [pressed, setPressed] = useState(false)
-
-    // ---- Dimensions ----
-    const widthStr = getVariableByName('radio/width', modes) || '18'
-    const heightStr = getVariableByName('radio/height', modes) || '18'
-    const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10'
-
-    const width = parseFloat(widthStr?.toString() || '18')
-    const height = parseFloat(heightStr?.toString() || '18')
-    const selectorSize = parseFloat(selectorSizeStr?.toString() || '10')
-
-    // ---- State Logic ----
-    // Priority: Disabled -> Focused -> Hover/Pressed -> Idle
-    // Note: Design treats Active (Pressed) similar to Selected for some styles, 
-    // but usually in Radio Buttons, Pressed is a transient state.
-    // We will map:
-    // - Disabled -> 'disabled'
-    // - Focused -> 'focus'
-    // - Hovered -> 'hover'
-    // - Idle -> 'idle'
-
-    // We handle `selected` as a separate dimension derived from state.
-
-    let visualState = 'idle'
-    if (disabled) {
-        visualState = 'disabled'
-    } else if (focused) {
-        visualState = 'focus'
-    } else if (hovered || pressed) {
-        visualState = 'hover'
-    }
-
-    // Construct token paths based on state + selected
-    let prefix = `radio/${visualState}`
-    if (visualState === 'idle' && selected) {
-        prefix = `radio/selected`
-    } else if (selected) {
-        prefix = `radio/${visualState}Selected`
-    }
-
-    // ---- Colors & Border ----
-
-    const resolveColor = (path: string, fallback: string) => {
-        return getVariableByName(path, modes) || fallback
-    }
-
-    // Background Color
-    let bgColorVar = `${prefix}/background/color`
-    // Fix for disabledSelected weirdness if needed
-    if (visualState === 'disabled' && selected) {
-        // Check specific path from dump: `radio/disabledSelected/background`
-        if (!getVariableByName(`${prefix}/background/color`, modes)) {
-            bgColorVar = `${prefix}/background`
-        }
-    }
-
-    // Border Color
-    let borderColorVar = `${prefix}/border/color`
-
-    // Border Width
-    let borderWidthVar = `${prefix}/border/size`
-    // Fix for huge path: `radio/disabled/radio/disabled/border/size`
-    if (visualState === 'disabled' && !selected) {
-        if (getVariableByName('radio/disabled/radio/disabled/border/size', modes)) {
-            borderWidthVar = 'radio/disabled/radio/disabled/border/size'
-        }
-    }
-
-    // Selector Color
-    let selectorBgVar = `${prefix}/selector/background/color`
-    if (!selected) {
-        selectorBgVar = 'transparent'
-    }
-
-    // Shadows (Glow)
-    let shadowSizeVar = `${prefix}/boxShadow/size`
-    let shadowColorVar = `${prefix}/shadow/color`
-
-    // Resolve Values
-    const backgroundColor = resolveColor(bgColorVar, 'transparent')
-    const borderColor = resolveColor(borderColorVar, 'transparent')
-    const borderWidth = parseFloat(getVariableByName(borderWidthVar, modes)?.toString() || '1')
-    const selectorColor = resolveColor(selectorBgVar, 'transparent')
-
-    const shadowSize = parseFloat(getVariableByName(shadowSizeVar, modes)?.toString() || '0')
-    const shadowColor = resolveColor(shadowColorVar, 'transparent')
-
-    // Styles
-    const containerStyle: any = {
-        width,
-        height,
-        borderRadius: width / 2, // 9999px -> circle
-        borderWidth,
-        borderColor,
-        backgroundColor,
-        justifyContent: 'center',
-        alignItems: 'center',
-        // Web shadow (ring)
-        ...(Platform.OS === 'web' && shadowSize > 0 ? {
-            boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`,
-        } : {}),
-    }
-
-    const selectorStyle: ViewStyle = {
-        width: selectorSize,
-        height: selectorSize,
-        borderRadius: selectorSize / 2,
-        backgroundColor: selectorColor,
-    }
-
-    // Dummy block for token extraction (static analysis)
-    if (false as boolean) {
-        getVariableByName('radio/idle/background/color')
-        getVariableByName('radio/idle/border/color')
-        getVariableByName('radio/selector/size')
-        getVariableByName('radio/width')
-        getVariableByName('radio/height')
-        getVariableByName('radio/background/color')
-        getVariableByName('radio/hover/background/color')
-        getVariableByName('radio/hover/border/color')
-        getVariableByName('radio/hover/boxShadow/size')
-        getVariableByName('radio/hover/shadow/color')
-        getVariableByName('radio/selected/background/color')
-        getVariableByName('radio/selected/border/color')
-        getVariableByName('radio/selected/selector/background/color')
-        getVariableByName('radio/hoverSelected/background/color')
-        getVariableByName('radio/hoverSelected/border/color')
-        getVariableByName('radio/hoverSelected/boxShadow/size')
-        getVariableByName('radio/hoverSelected/shadow/color')
-        getVariableByName('radio/hoverSelected/selector/background/color')
-        getVariableByName('radio/focus/background/color')
-        getVariableByName('radio/focus/border/color')
-        getVariableByName('radio/focus/border/size')
-        getVariableByName('radio/focus/boxShadow/size')
-        getVariableByName('radio/focus/shadow/color')
-        getVariableByName('radio/focusSelected/background/color')
-        getVariableByName('radio/focusSelected/selector/background/color')
-        getVariableByName('radio/focusSelected/border/size')
-        getVariableByName('radio/disabled/radio/disabled/border/size')
-        getVariableByName('radio/disabled/background/color')
-        getVariableByName('radio/disabled/border/color')
-        getVariableByName('radio/disabledSelected/selector/background/color')
-        getVariableByName('radio/disabledSelected/background')
-        getVariableByName('radio/disabledSelected/border/color')
-    }
-
-    return (
-        <Pressable
-            testID={testID}
-            disabled={disabled}
-            onPress={onPress}
-            onHoverIn={() => setHovered(true)}
-            onHoverOut={() => setHovered(false)}
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
-            onPressIn={() => setPressed(true)}
-            onPressOut={() => setPressed(false)}
-            style={({ pressed: isPressed }) => [
-                containerStyle,
-                style,
-            ]}
-        >
-            <View style={selectorStyle} />
-        </Pressable>
-    )
-}
+/**
+ * @deprecated `RadioButton` has been renamed to `Radio`.
+ *
+ * This file is kept as a backward-compatibility shim for teams that may be
+ * importing `RadioButton` directly from this deep path:
+ *
+ *   import RadioButton from 'jfs-components/src/components/RadioButton/RadioButton'
+ *   import { RadioButton, RadioButtonProps } from '...'
+ *
+ * The recommended public import is now:
+ *
+ *   import { Radio, type RadioProps } from 'jfs-components'
+ *
+ * Going forward, this component is called `Radio`. This shim only re-exports
+ * the new `Radio` component under the old `RadioButton` names; please migrate
+ * existing usages to `Radio` at your earliest convenience.
+ */
+
+import { Radio, type RadioProps } from '../Radio/Radio'
+
+export type RadioButtonProps = RadioProps
+
+export const RadioButton = Radio
 
 export default RadioButton