jfs-components 0.0.71 → 0.0.73

package/src/components/DonutChartSummary/DonutChartSummary.tsx

@@ -0,0 +1,256 @@
+import React from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import DonutChart, { type DonutChartSegmentData } from '../DonutChart/DonutChart'
+import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+
+/**
+ * One row of the `DonutChartSummary`. Each item drives BOTH a donut
+ * segment and the matching legend row, so the segment and indicator
+ * always share the same color by construction.
+ */
+export type DonutChartSummaryItem = {
+    /** Stable React key. Falls back to the item label / index. */
+    key?: React.Key
+    /** The descriptive label rendered next to the indicator dot. */
+    label?: React.ReactNode
+    /**
+     * The data point — drives the segment's angular share. Same
+     * semantics as `DonutChartSegmentData.value`. When the legend's
+     * right-side text is shown, the resolution order is:
+     * `displayValue` → `formatValue(value)` → hide.
+     */
+    value: number
+    /**
+     * Optional override for the legend row's right-side text. Falls
+     * back to `formatValue(value)` if a parent-level `formatValue` is
+     * provided; otherwise the value slot is hidden (matches the Figma
+     * `data` boolean toggle on `MetricLegendItem`). Pass `null` or
+     * `false` to explicitly hide on a per-item basis.
+     */
+    displayValue?: React.ReactNode
+    /**
+     * Hard-override the shared color used for both the donut segment
+     * and the legend indicator. Bypasses `dataViz/bg` token resolution.
+     */
+    color?: string
+    /**
+     * Per-item design token mode overrides. Merged on top of parent
+     * `modes` and the per-index `Appearance / DataViz` defaults
+     * (`Senary`, `Primary`, `Secondary`, `Tertiary`, `Quaternary`,
+     * `Quinary`, then cycles).
+     */
+    modes?: Record<string, any>
+    /** Accessibility label for the segment + legend row pairing. */
+    accessibilityLabel?: string
+}
+
+export type DonutChartSummaryProps = {
+    /**
+     * Data-driven rows. Each entry produces a donut segment AND a
+     * matching `MetricLegendItem` — the count of legend rows is locked
+     * in step with the count of donut segments by construction.
+     */
+    items?: DonutChartSummaryItem[]
+    /**
+     * Optional formatter applied to each item's numeric `value` when
+     * the item does not provide an explicit `displayValue`. Useful for
+     * the common "format every weight the same way" case
+     * (e.g. `(v) => `${v}%``).
+     */
+    formatValue?: (value: number) => React.ReactNode
+    /** Center value text inside the donut (large/bold). */
+    centerValue?: React.ReactNode
+    /** Center label text inside the donut (smaller, beneath the value). */
+    centerLabel?: React.ReactNode
+    /**
+     * Slot for fully-custom donut center content. When provided it
+     * replaces the default `centerValue`/`centerLabel` text wrap.
+     */
+    donutCenter?: React.ReactNode
+    /** Outer donut diameter in px. Defaults to 194 (Figma reference). */
+    donutSize?: number
+    /** Donut ring stroke width in px. Defaults to ~18% of `donutSize`. */
+    donutStrokeWidth?: number
+    /**
+     * Visual gap between adjacent donut segments expressed in degrees
+     * of arc. Defaults to 0 (segments touch).
+     */
+    donutGap?: number
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Override outer container styles. */
+    style?: StyleProp<ViewStyle>
+    /** Override the legend container styles. */
+    legendStyle?: StyleProp<ViewStyle>
+    /** Accessibility label announced for the whole summary. */
+    accessibilityLabel?: string
+}
+
+const DEFAULT_APPEARANCE_CYCLE = [
+    'Senary',
+    'Primary',
+    'Secondary',
+    'Tertiary',
+    'Quaternary',
+    'Quinary',
+] as const
+
+const DEFAULT_ITEMS: DonutChartSummaryItem[] = [
+    { label: 'Equity', value: 40, displayValue: '40%' },
+    { label: 'Recommended coverage', value: 25, displayValue: '25%' },
+    { label: 'Additional benefits', value: 20, displayValue: '20%' },
+    { label: 'Cost analysis', value: 15, displayValue: '15%' },
+]
+
+const defaultAppearanceFor = (index: number) =>
+    DEFAULT_APPEARANCE_CYCLE[index % DEFAULT_APPEARANCE_CYCLE.length]
+
+/**
+ * Resolve the shared color for an item. Honors any explicit `color`
+ * override, then falls back to `dataViz/bg` for the merged mode set,
+ * then to the Figma reference purple.
+ */
+function resolveItemColor(
+    parentModes: Record<string, any>,
+    item: DonutChartSummaryItem,
+    index: number
+): string {
+    if (item.color) return item.color
+    const itemModes = {
+        ...parentModes,
+        'Appearance / DataViz': defaultAppearanceFor(index),
+        ...(item.modes || {}),
+    }
+    return (
+        (getVariableByName('dataViz/bg', itemModes) as string | null) ?? '#5d00b5'
+    )
+}
+
+/**
+ * `DonutChartSummary` pairs a `DonutChart` with a vertical list of
+ * `MetricLegendItem` rows. The component takes a single `items` array,
+ * so the number of legend rows is locked in step with the number of
+ * donut segments by construction — every segment has exactly one
+ * legend row, and they share the same color through the same
+ * `Appearance / DataViz` cascade as the standalone `DonutChart`.
+ *
+ * The default 4-item layout receives per-index `Appearance / DataViz`
+ * defaults (item 1 → `Senary`, 2 → `Primary`, 3 → `Secondary`, 4 →
+ * `Tertiary`, then cycles). Override `modes` per item to remix, or set
+ * `Emphasis / DataViz` on the parent `modes` to dim or brighten the
+ * whole component at once.
+ *
+ * @component
+ * @param {DonutChartSummaryProps} props
+ */
+function DonutChartSummary({
+    items,
+    formatValue,
+    centerValue = '₹51,230',
+    centerLabel = 'Total invested',
+    donutCenter,
+    donutSize = 194,
+    donutStrokeWidth,
+    donutGap = 0,
+    modes: propModes = EMPTY_MODES,
+    style,
+    legendStyle,
+    accessibilityLabel,
+}: DonutChartSummaryProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    const gap =
+        (getVariableByName('donutChartSummary/gap', modes) as number | null) ?? 16
+    const legendGap =
+        (getVariableByName('donutChartSummary/legend/gap', modes) as
+            | number
+            | null) ?? 8
+
+    const resolvedItems = items && items.length > 0 ? items : DEFAULT_ITEMS
+
+    const segments: DonutChartSegmentData[] = resolvedItems.map(
+        (item, index) => ({
+            key: item.key ?? `segment-${index}`,
+            value: item.value,
+            color: resolveItemColor(modes, item, index),
+            accessibilityLabel: item.accessibilityLabel,
+        })
+    )
+
+    const showCustomCenter = donutCenter !== undefined && donutCenter !== null
+
+    return (
+        <View
+            accessibilityRole="summary"
+            accessibilityLabel={accessibilityLabel}
+            style={[
+                {
+                    width: '100%',
+                    alignItems: 'center',
+                    gap,
+                },
+                style,
+            ]}
+        >
+            <DonutChart
+                size={donutSize}
+                {...(donutStrokeWidth !== undefined && {
+                    strokeWidth: donutStrokeWidth,
+                })}
+                gap={donutGap}
+                segments={segments}
+                modes={modes}
+                {...(!showCustomCenter && {
+                    value: centerValue,
+                    label: centerLabel,
+                })}
+            >
+                {showCustomCenter ? donutCenter : null}
+            </DonutChart>
+
+            <View
+                style={[
+                    {
+                        width: '100%',
+                        gap: legendGap,
+                    },
+                    legendStyle,
+                ]}
+            >
+                {resolvedItems.map((item, index) => (
+                    <MetricLegendItem
+                        key={item.key ?? `legend-${index}`}
+                        label={item.label}
+                        value={resolveLegendValue(item, formatValue)}
+                        indicatorColor={resolveItemColor(modes, item, index)}
+                        modes={modes}
+                    />
+                ))}
+            </View>
+        </View>
+    )
+}
+
+/**
+ * Resolve what to render in the legend row's right-side slot. The
+ * order of precedence is:
+ *   1. `item.displayValue` if explicitly provided (including `null` /
+ *      `false`, which the underlying `MetricLegendItem` treats as
+ *      "hide the value slot").
+ *   2. `formatValue(item.value)` when a parent-level formatter exists.
+ *   3. `undefined` — the value slot is hidden.
+ */
+function resolveLegendValue(
+    item: DonutChartSummaryItem,
+    formatValue: ((value: number) => React.ReactNode) | undefined
+): React.ReactNode {
+    if (item.displayValue !== undefined) return item.displayValue
+    if (formatValue) return formatValue(item.value)
+    return undefined
+}
+
+export default DonutChartSummary

package/src/components/HoldingsCard/HoldingsCard.tsx

@@ -9,7 +9,7 @@ import {
     type ImageSourcePropType,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import RadioButton from '../RadioButton/RadioButton'
+import Radio from '../Radio/Radio'
 import { EMPTY_MODES } from '../../utils/react-utils'
 
 export interface HoldingsCardDetailItem {
@@ -198,7 +198,7 @@ export default function HoldingsCard({
 
                 {/* Pointer events disabled — the whole card is the pressable target */}
                 <View pointerEvents="none">
-                    <RadioButton
+                    <Radio
                         selected={selected}
                         disabled={disabled}
                         modes={modes}

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/LinearMeter/LinearMeter.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import { View, Text, type StyleProp, type ViewStyle, type TextStyle, type DimensionValue } from 'react-native'
+import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import MoneyValue from '../MoneyValue/MoneyValue'
+import LinearProgress from '../LinearProgress/LinearProgress'
 
 type LinearMeterLabelProps = {
     children: React.ReactNode
@@ -57,14 +58,6 @@ const LinearMeter = ({
     ...rest
 }: LinearMeterProps) => {
     const gap = getVariableByName('linearMeter/gap', modes)
-    // Track tokens
-    const trackBg = getVariableByName('linearMeter/track/background', modes)
-    const trackHeight = getVariableByName('linearMeter/track/height', modes)
-    const trackRadius = getVariableByName('linearMeter/track/radius', modes)
-
-    // Indicator tokens
-    const indicatorBg = getVariableByName('linearMeter/indicator/background', modes)
-    const indicatorRadius = getVariableByName('linearMeter/indicator/radius', modes)
 
     // Wrap tokens
     const wrapGap = getVariableByName('linearMeter/wrap/gap', modes)
@@ -94,10 +87,6 @@ const LinearMeter = ({
 
     const content = children ? childrenWithModes : defaultContent
 
-    // Calculate width percentage
-    const clampedValue = Math.min(Math.max(value, 0), 1)
-    const widthPercent = `${clampedValue * 100}%`
-
     return (
         <View
             style={[
@@ -110,32 +99,13 @@ const LinearMeter = ({
             ]}
             {...rest}
         >
-            {/* Track */}
-            <View
-                style={[
-                    {
-                        flex: 1,
-                        height: trackHeight,
-                        backgroundColor: trackBg,
-                        borderRadius: trackRadius,
-                        overflow: 'hidden', // Ensure indicator stays inside
-                    },
-                    trackStyle,
-                ]}
-            >
-                {/* Indicator */}
-                <View
-                    style={[
-                        {
-                            width: widthPercent as DimensionValue,
-                            height: '100%',
-                            backgroundColor: indicatorBg,
-                            borderRadius: indicatorRadius,
-                        },
-                        indicatorStyle,
-                    ]}
-                />
-            </View>
+            <LinearProgress
+                value={value}
+                modes={modes}
+                style={{ flex: 1 }}
+                trackStyle={trackStyle}
+                indicatorStyle={indicatorStyle}
+            />
 
             {/* Right Slot Wrapper */}
             <View

package/src/components/LinearProgress/LinearProgress.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import {
+    View,
+    type StyleProp,
+    type ViewStyle,
+    type DimensionValue,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+
+export type LinearProgressProps = {
+    /** Progress value between 0 and 1. Values are clamped. */
+    value?: number
+    /** Design token modes for theming */
+    modes?: Record<string, any>
+    /** Override container styles (the track wrapper) */
+    style?: StyleProp<ViewStyle>
+    /** Override the track styles */
+    trackStyle?: StyleProp<ViewStyle>
+    /** Override the indicator styles */
+    indicatorStyle?: StyleProp<ViewStyle>
+} & Omit<React.ComponentProps<typeof View>, 'style'>
+
+const LinearProgress = ({
+    value = 0,
+    modes = EMPTY_MODES,
+    style,
+    trackStyle,
+    indicatorStyle,
+    ...rest
+}: LinearProgressProps) => {
+    // The track and the progress indicator are intentionally rendered at
+    // different emphasis levels by default: the track sits in the
+    // background as a low-emphasis surface, while the progress indicator
+    // is the high-emphasis foreground. Defaults are placed *before* the
+    // user-provided modes spread, so callers can still override
+    // `Emphasis / DataViz` (or any other mode) via the `modes` prop.
+    const trackModes = { 'Emphasis': 'Low', ...modes }
+    const progressModes = { 'Emphasis': 'High', ...modes }
+
+    const trackHeight =
+        (getVariableByName('linearProgress/track/height', trackModes) as number | null) ?? 8
+    const trackRadius =
+        (getVariableByName('linearProgress/track/radius', trackModes) as number | null) ?? 999
+    const trackBg =
+        (getVariableByName('linearProgress/track/background', trackModes) as string | null) ??
+        '#ede7ff'
+
+    const indicatorHeight =
+        (getVariableByName('linearProgress/indicator/height', progressModes) as number | null) ?? 8
+    const indicatorRadius =
+        (getVariableByName('linearProgress/indicator/radius', progressModes) as number | null) ?? 999
+    const indicatorBg =
+        (getVariableByName('linearProgress/indicator/background', progressModes) as string | null) ??
+        '#5d00b5'
+
+    const clampedValue = Math.min(Math.max(value, 0), 1)
+    const widthPercent = `${clampedValue * 100}%` as DimensionValue
+
+    return (
+        <View
+            style={[
+                {
+                    height: trackHeight,
+                    backgroundColor: trackBg,
+                    borderRadius: trackRadius,
+                    overflow: 'hidden',
+                    width: '100%',
+                },
+                style,
+                trackStyle,
+            ]}
+            accessibilityRole="progressbar"
+            accessibilityValue={{ min: 0, max: 1, now: clampedValue }}
+            {...rest}
+        >
+            <View
+                style={[
+                    {
+                        width: widthPercent,
+                        height: indicatorHeight,
+                        backgroundColor: indicatorBg,
+                        borderRadius: indicatorRadius,
+                    },
+                    indicatorStyle,
+                ]}
+            />
+        </View>
+    )
+}
+
+export default LinearProgress