jfs-components 0.0.72 → 0.0.74

package/lib/module/components/PoweredByLabel/PoweredByLabel.js

@@ -0,0 +1,130 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Text, View } 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 from '../../utils/MediaSource';
+
+// Default bundled FINVU brand logo, matching the Figma reference so the
+// component renders correctly out of the box without any image prop.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_LOGO = require('./finvu.png');
+const DEFAULT_LABEL = 'Powered by RBI-regulated account aggregator';
+const DEFAULT_IMAGE_WIDTH = 33;
+const DEFAULT_IMAGE_HEIGHT = 12;
+const toNumber = (value, fallback) => {
+  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, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+
+/**
+ * `PoweredByLabel` renders the small "Powered by RBI-regulated account
+ * aggregator" badge with a trailing brand logo, used to attribute the
+ * underlying account-aggregator partner in flows such as bank-account
+ * linking and consent screens.
+ *
+ * The component is composed of:
+ *
+ * 1. A token-styled pill container (`poweredByLabel/background`,
+ *    `poweredByLabel/padding/*`).
+ * 2. The disclosure copy rendered through the `poweredByLabel/*` typography
+ *    tokens.
+ * 3. A configurable brand logo slot. Defaults to the bundled FINVU mark, but
+ *    callers can pass any image via `imageSource` or fully replace the slot
+ *    via `imageSlot`.
+ *
+ * @component
+ * @param {PoweredByLabelProps} props
+ */
+function PoweredByLabel({
+  label = DEFAULT_LABEL,
+  imageSource,
+  imageWidth = DEFAULT_IMAGE_WIDTH,
+  imageHeight = DEFAULT_IMAGE_HEIGHT,
+  imageSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  textStyle,
+  imageStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const background = getVariableByName('poweredByLabel/background', modes) ?? '#f5f5f5';
+  const foreground = getVariableByName('poweredByLabel/foreground', modes) ?? '#191b1e';
+  const fontFamily = getVariableByName('poweredByLabel/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber(getVariableByName('poweredByLabel/fontSize', modes), 10);
+  const lineHeight = toNumber(getVariableByName('poweredByLabel/lineHeight', modes), 12);
+  const fontWeight = toFontWeight(getVariableByName('poweredByLabel/fontWeight', modes), '400');
+  const gap = toNumber(getVariableByName('poweredByLabel/gap', modes), 10);
+  const paddingHorizontal = toNumber(getVariableByName('poweredByLabel/padding/horizontal', modes), 16);
+  const paddingVertical = toNumber(getVariableByName('poweredByLabel/padding/vertical', modes), 6);
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: background,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    // Hug content horizontally so the pill does not stretch to fill the
+    // parent (matches Badge, BrandChip, etc.). Override via `style` if
+    // you want it full-width (e.g. inside a card footer).
+    alignSelf: 'flex-start'
+  };
+  const labelTextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    textAlign: 'center',
+    flexShrink: 1
+  };
+  const renderImage = () => {
+    if (imageSlot !== undefined && imageSlot !== null) {
+      const processed = cloneChildrenWithModes(imageSlot, modes);
+      if (processed.length === 0) return null;
+      return processed.length === 1 ? processed[0] : processed;
+    }
+    const resolvedSource = imageSource ?? DEFAULT_LOGO;
+    return /*#__PURE__*/_jsx(MediaSource, {
+      source: resolvedSource,
+      width: imageWidth,
+      height: imageHeight,
+      resizeMode: "contain",
+      style: imageStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityRole: "text",
+    accessibilityLabel: accessibilityLabel ?? label,
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [labelTextStyle, textStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      numberOfLines: 1,
+      children: label
+    }), renderImage()]
+  });
+}
+export default PoweredByLabel;

package/lib/module/components/ProductOverview/ProductOverview.js

@@ -0,0 +1,142 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Image from '../Image/Image';
+import ProductLabel from '../ProductLabel/ProductLabel';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_STATS = [{
+  value: '995',
+  label: 'Purity'
+}, {
+  value: '3%',
+  label: 'GST'
+}];
+const ProductOverview = ({
+  imageSource,
+  imageRatio = 288 / 170,
+  labelImageSource,
+  label = 'Gold',
+  productName = '0.5g Gold Coin',
+  description = 'Your gold is insured from our vault to you. If lost or damaged, we’ll replace it.',
+  stats = DEFAULT_STATS,
+  modes = EMPTY_MODES,
+  style,
+  children
+}) => {
+  const padding = getVariableByName('productOverview/padding', modes) ?? 24;
+  const gap = getVariableByName('productOverview/gap', modes) ?? 12;
+  const background = getVariableByName('productOverview/background', modes) ?? '#ffffff';
+  const productNameColor = getVariableByName('productOverview/productName/color', modes) ?? '#0d0d0f';
+  const productNameFontFamily = getVariableByName('productOverview/productName/fontFamily', modes) ?? 'JioType Var';
+  const productNameFontSize = getVariableByName('productOverview/productName/fontSize', modes) ?? 26;
+  const productNameFontWeight = getVariableByName('productOverview/productName/fontWeight', modes) ?? 900;
+  const productNameLineHeight = getVariableByName('productOverview/productName/lineHeight', modes) ?? 26;
+  const descriptionColor = getVariableByName('productOverview/description/color', modes) ?? '#1a1c1f';
+  const descriptionFontFamily = getVariableByName('productOverview/description/fontFamily', modes) ?? 'JioType Var';
+  const descriptionFontSize = getVariableByName('productOverview/description/fontSize', modes) ?? 14;
+  const descriptionFontWeight = getVariableByName('productOverview/description/fontWeight', modes) ?? 500;
+  const descriptionLineHeight = getVariableByName('productOverview/description/lineHeight', modes) ?? 18.2;
+  const statGap = getVariableByName('productOverview/stat/gap', modes) ?? 2;
+  const statValueColor = getVariableByName('productOverview/stat/value/color', modes) ?? '#141414';
+  const statValueFontFamily = getVariableByName('productOverview/stat/value/fontFamily', modes) ?? 'JioType Var';
+  const statValueFontSize = getVariableByName('productOverview/stat/value/fontSize', modes) ?? 20;
+  const statValueFontWeight = getVariableByName('productOverview/stat/value/fontWeight', modes) ?? 900;
+  const statValueLineHeight = getVariableByName('productOverview/stat/value/lineHeight', modes) ?? 20;
+  const statLabelColor = productNameColor;
+  const statLabelFontFamily = getVariableByName('productOverview/stat/label/fontFamily', modes) ?? 'JioType Var';
+  const statLabelFontSize = getVariableByName('productOverview/stat/label/fontSize', modes) ?? 12;
+  const statLabelFontWeight = getVariableByName('productOverview/stat/label/fontWeight', modes) ?? 400;
+  const statLabelLineHeight = getVariableByName('productOverview/stat/label/lineHeight', modes) ?? 15.6;
+  const productNameStyle = {
+    color: productNameColor,
+    fontFamily: productNameFontFamily,
+    fontSize: productNameFontSize,
+    fontWeight: String(productNameFontWeight),
+    lineHeight: productNameLineHeight,
+    textAlign: 'center'
+  };
+  const descriptionStyle = {
+    color: descriptionColor,
+    fontFamily: descriptionFontFamily,
+    fontSize: descriptionFontSize,
+    fontWeight: String(descriptionFontWeight),
+    lineHeight: descriptionLineHeight,
+    textAlign: 'center'
+  };
+  const statValueStyle = {
+    color: statValueColor,
+    fontFamily: statValueFontFamily,
+    fontSize: statValueFontSize,
+    fontWeight: String(statValueFontWeight),
+    lineHeight: statValueLineHeight
+  };
+  const statLabelStyle = {
+    color: statLabelColor,
+    fontFamily: statLabelFontFamily,
+    fontSize: statLabelFontSize,
+    fontWeight: String(statLabelFontWeight),
+    lineHeight: statLabelLineHeight,
+    textAlign: 'center'
+  };
+  const showStats = Array.isArray(stats) && stats.length > 0;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      backgroundColor: background,
+      padding,
+      gap,
+      alignItems: 'center',
+      width: '100%'
+    }, style],
+    children: [imageSource != null && /*#__PURE__*/_jsx(Image, {
+      imageSource: imageSource,
+      ratio: imageRatio,
+      resizeMode: "contain",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    }), /*#__PURE__*/_jsx(ProductLabel, {
+      label: label,
+      ...(labelImageSource != null && {
+        imageSource: labelImageSource
+      }),
+      modes: modes
+    }), productName ? /*#__PURE__*/_jsx(Text, {
+      style: productNameStyle,
+      accessibilityRole: "header",
+      children: productName
+    }) : null, description ? /*#__PURE__*/_jsx(Text, {
+      style: descriptionStyle,
+      children: description
+    }) : null, children ? /*#__PURE__*/_jsx(_Fragment, {
+      children: cloneChildrenWithModes(children, modes)
+    }) : null, showStats && /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+      },
+      children: stats.map((stat, index) => /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          alignItems: 'center',
+          gap: statGap,
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: statValueStyle,
+          numberOfLines: 1,
+          children: stat.value
+        }), /*#__PURE__*/_jsx(Text, {
+          style: statLabelStyle,
+          numberOfLines: 1,
+          children: stat.label
+        })]
+      }, `${stat.label}-${index}`))
+    })]
+  });
+};
+export default ProductOverview;

package/lib/module/components/RangeTrack/RangeTrack.js

@@ -0,0 +1,263 @@
+"use strict";
+
+import React, { useCallback, useState } from 'react';
+import { View } 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 MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
+import SegmentedTrack from '../SegmentedTrack/SegmentedTrack';
+import Tabs from '../Tabs/Tabs';
+import TabItem from '../Tabs/TabItem';
+
+/**
+ * One row of data inside a `RangeTrack` tab.
+ *
+ * Each item drives BOTH a `SegmentedTrack` segment and the matching
+ * `MetricLegendItem` row, so the segment color and legend indicator
+ * always share the same color by construction (same `Emphasis / DataViz`
+ * cascade as the standalone `SegmentedTrack`).
+ */
+
+/**
+ * One tab inside a `RangeTrack`. Each tab carries its own `items`
+ * array, which is the single source of truth for both the
+ * `SegmentedTrack` segments AND the `MetricLegendItem` legend rows
+ * rendered for that tab.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_EMPHASIS_CYCLE = ['High', 'Medium', 'Low'];
+const DEFAULT_TABS = [{
+  label: 'Tab item',
+  items: [{
+    label: 'Large cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Mid cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Small cap',
+    value: 1,
+    displayValue: '25%'
+  }]
+}, {
+  label: 'Tab item',
+  items: [{
+    label: 'Large cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Mid cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Small cap',
+    value: 1,
+    displayValue: '25%'
+  }]
+}, {
+  label: 'Tab item',
+  items: [{
+    label: 'Large cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Mid cap',
+    value: 1,
+    displayValue: '25%'
+  }, {
+    label: 'Small cap',
+    value: 1,
+    displayValue: '25%'
+  }]
+}];
+const defaultEmphasisFor = index => DEFAULT_EMPHASIS_CYCLE[index % DEFAULT_EMPHASIS_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 value.
+ *
+ * Mirrors the cascade used by `SegmentedTrack` (per-index `Emphasis /
+ * DataViz` defaults of `High` → `Medium` → `Low`, cycling) so the
+ * pre-computed color we pass to both the segment and the legend
+ * indicator matches what the `SegmentedTrack` would have computed on
+ * its own. This is what keeps segments and legend rows in sync by
+ * construction.
+ */
+function resolveItemColor(parentModes, item, index) {
+  if (item.color) return item.color;
+  const itemModes = {
+    ...parentModes,
+    'Emphasis / DataViz': defaultEmphasisFor(index),
+    ...(item.modes || {})
+  };
+  return getVariableByName('dataViz/bg', itemModes) ?? '#cea15a';
+}
+
+/**
+ * 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, formatValue) {
+  if (item.displayValue !== undefined) return item.displayValue;
+  if (formatValue) return formatValue(item.value);
+  return undefined;
+}
+
+/**
+ * `RangeTrack` pairs a tab row with a `SegmentedTrack` and a vertical
+ * stack of `MetricLegendItem` rows. Each tab carries its own `items`
+ * array which is the **single source of truth** for both the segments
+ * and the legend rows of that tab — every segment has exactly one
+ * legend row and they share the same color through the same
+ * `Emphasis / DataViz` cascade as the standalone `SegmentedTrack`.
+ *
+ * Switching tabs swaps the segments and the legend together so the
+ * two visualizations can never drift out of sync.
+ *
+ * The default 3-item layout per tab receives per-index
+ * `Emphasis / DataViz` defaults (item 1 → `High`, 2 → `Medium`, 3 →
+ * `Low`, then cycles). Override `Appearance / DataViz` on the parent
+ * `modes` to retheme the whole component, or set `modes` per item to
+ * remix.
+ *
+ * The component supports both **controlled** and **uncontrolled**
+ * tab selection — pass `activeTabIndex` + `onTabChange` for the
+ * controlled mode, or omit them and the component will manage the
+ * selection internally starting from `defaultActiveTabIndex`.
+ *
+ * @component
+ * @param {RangeTrackProps} props
+ *
+ * @example
+ * ```tsx
+ * <RangeTrack
+ *   tabs={[
+ *     {
+ *       label: 'Sectoral',
+ *       items: [
+ *         { label: 'Large cap', value: 50, displayValue: '50%' },
+ *         { label: 'Mid cap',   value: 30, displayValue: '30%' },
+ *         { label: 'Small cap', value: 20, displayValue: '20%' },
+ *       ],
+ *     },
+ *     {
+ *       label: 'Geography',
+ *       items: [
+ *         { label: 'India', value: 70, displayValue: '70%' },
+ *         { label: 'US',    value: 20, displayValue: '20%' },
+ *         { label: 'Other', value: 10, displayValue: '10%' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+function RangeTrack({
+  tabs,
+  formatValue,
+  activeTabIndex,
+  defaultActiveTabIndex = 0,
+  onTabChange,
+  scrollableTabs = false,
+  modes: propModes = EMPTY_MODES,
+  style,
+  tabsStyle,
+  trackStyle,
+  legendStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const resolvedTabs = tabs && tabs.length > 0 ? tabs : DEFAULT_TABS;
+  const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultActiveTabIndex, resolvedTabs.length));
+  const isControlled = activeTabIndex !== undefined;
+  const rawIndex = isControlled ? activeTabIndex : internalIndex;
+  const safeIndex = clampIndex(rawIndex, resolvedTabs.length);
+  const handleTabPress = useCallback(index => {
+    const nextTab = resolvedTabs[index];
+    if (!nextTab) return;
+    if (!isControlled) setInternalIndex(index);
+    onTabChange?.(index, nextTab);
+  }, [isControlled, onTabChange, resolvedTabs]);
+  const containerGap = getVariableByName('rangeTrack/gap', modes) ?? 28;
+  // Vertical gap between legend rows is not exposed as its own token —
+  // the Figma design uses 8px between rows, mirroring the
+  // `donutChartSummary/legend/gap` default. Keep the value in step
+  // with `DonutChartSummary` so the two summary components feel
+  // cohesive when stacked.
+  const legendRowGap = 8;
+  const activeTab = resolvedTabs[safeIndex];
+  const activeItems = activeTab?.items ?? [];
+  const segments = activeItems.map((item, index) => ({
+    key: item.key ?? `segment-${index}`,
+    value: item.value,
+    color: resolveItemColor(modes, item, index),
+    accessibilityLabel: item.accessibilityLabel
+  }));
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityRole: "summary",
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      width: '100%',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: containerGap
+    }, style],
+    children: [/*#__PURE__*/_jsx(Tabs, {
+      modes: modes,
+      scrollable: scrollableTabs,
+      style: tabsStyle,
+      children: resolvedTabs.map((tab, index) => /*#__PURE__*/_jsx(TabItem, {
+        label: tab.label,
+        active: index === safeIndex,
+        onPress: () => handleTabPress(index),
+        accessibilityLabel: tab.accessibilityLabel ?? tab.label
+      }, tab.key ?? tab.label ?? `tab-${index}`))
+    }), /*#__PURE__*/_jsx(SegmentedTrack, {
+      modes: modes,
+      segments: segments,
+      style: trackStyle,
+      accessibilityLabel: activeTab?.accessibilityLabel ?? activeTab?.label
+    }), /*#__PURE__*/_jsx(View, {
+      style: [{
+        width: '100%',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: legendRowGap
+      }, legendStyle],
+      children: activeItems.map((item, index) => /*#__PURE__*/_jsx(MetricLegendItem, {
+        label: item.label,
+        value: resolveLegendValue(item, formatValue),
+        indicatorColor: resolveItemColor(modes, item, index),
+        modes: modes
+      }, item.key ?? `legend-${index}`))
+    })]
+  });
+}
+
+/**
+ * Clamp a tab index into `[0, length)`. Negative or out-of-bounds
+ * values fall back to `0` to avoid rendering an undefined tab.
+ */
+function clampIndex(index, length) {
+  if (length <= 0) return 0;
+  if (!Number.isFinite(index)) return 0;
+  if (index < 0) return 0;
+  if (index >= length) return length - 1;
+  return Math.floor(index);
+}
+export default RangeTrack;