jfs-components 0.1.0 → 0.1.8

package/lib/commonjs/utils/react-utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EMPTY_MODES = void 0;
 exports.cloneChildrenWithModes = cloneChildrenWithModes;
 exports.flattenChildren = flattenChildren;
+exports.mergeRefs = mergeRefs;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -79,6 +80,27 @@ function cloneChildrenWithModes(children, modes, forcedModes) {
   return _react.default.Children.toArray(result);
 }
 
+/**
+ * Combines several refs (object refs and/or callback refs) into a single
+ * callback ref. Useful when a component needs to keep its own internal ref to a
+ * node while still honouring a ref forwarded by the consumer.
+ *
+ * @example
+ * const inputRef = useRef<RNTextInput>(null)
+ * <RNTextInput ref={mergeRefs(inputRef, forwardedRef)} />
+ */
+function mergeRefs(...refs) {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

package/lib/module/components/Accordion/Accordion.js

@@ -6,9 +6,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
-
-// Enable LayoutAnimation on Android
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Enable LayoutAnimation on Android
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }

package/lib/module/components/AmountInput/AmountInput.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
@@ -13,12 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @component
  */
-export default function AmountInput({
+const AmountInput = /*#__PURE__*/forwardRef(function AmountInput({
   moneyValueSlot,
   noteInputSlot,
   modes: propModes = EMPTY_MODES,
   style
-}) {
+}, ref) {
   const {
     modes: globalModes
   } = useTokens();
@@ -72,7 +72,9 @@ export default function AmountInput({
     return noteInputSlot;
   };
   return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
     style: containerStyle,
     children: [renderMoneyValueSlot(), renderNoteInputSlot()]
   });
-}
+});
+export default AmountInput;

package/lib/module/components/AreaLineChart/AreaLineChart.js

@@ -92,7 +92,7 @@ const defaultFormatX = label => String(label);
  * @component
  */
 function AreaLineChart({
-  series,
+  series = [],
   xLabels,
   yMin,
   yMax,

package/lib/module/components/Balance/Balance.js

@@ -4,8 +4,15 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import MoneyValue from '../MoneyValue/MoneyValue';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The Balance design renders its money value at the 36 px / 900-weight scale.
+// The `moneyValue/*` tokens alias into the `Context3` collection, where the
+// `Balance & Cards` mode supplies those larger values. Applied *before* the
+// caller's `modes` so any consumer can still override individual keys.
+const DEFAULT_MONEY_VALUE_MODES = {
+  Context3: 'Balance & Cards'
+};
 /**
  * Balance component that displays a title and a monetary value.
  *
@@ -29,7 +36,7 @@ function Balance({
   // Title styles
   const titleColor = getVariableByName('balance/title/foreground', modes) ?? '#0c0d10';
   const titleFontSize = getVariableByName('balance/title/fontSize', modes) ?? 14;
-  const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'System';
+  const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'JioType Var';
   const titleLineHeight = getVariableByName('balance/title/lineHeight', modes) ?? 18;
   const titleFontWeightValue = getVariableByName('balance/title/fontWeight', modes) ?? 500;
   const titleFontWeight = typeof titleFontWeightValue === 'number' ? titleFontWeightValue.toString() : titleFontWeightValue;
@@ -46,15 +53,13 @@ function Balance({
     fontWeight: titleFontWeight
   };
 
-  // Handle slot children or default content
-  const content = React.Children.map(children, child => {
-    if (/*#__PURE__*/React.isValidElement(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        modes
-      });
-    }
-    return child;
-  });
+  // The money value renders at the Balance & Cards scale. Merge the default
+  // context mode first so the caller's `modes` can still override it, and
+  // force that context onto any slotted children so custom money values match.
+  const moneyValueModes = {
+    ...DEFAULT_MONEY_VALUE_MODES,
+    ...modes
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     "data-node-id": "1986:6203",
@@ -62,10 +67,10 @@ function Balance({
       style: titleStyle,
       "data-node-id": "1986:2613",
       children: title
-    }), children ? content : /*#__PURE__*/_jsx(MoneyValue, {
+    }), children ? cloneChildrenWithModes(children, modes, DEFAULT_MONEY_VALUE_MODES) : /*#__PURE__*/_jsx(MoneyValue, {
       value: amount,
       currency: currency,
-      modes: modes
+      modes: moneyValueModes
     })]
   });
 }

package/lib/module/components/BenefitCard/BenefitCard.js

@@ -0,0 +1,225 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text as RNText, Pressable, StyleSheet } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
+import ListItem from '../ListItem/ListItem';
+import Divider from '../Divider/Divider';
+import Button from '../Button/Button';
+
+/**
+ * A single benefit row rendered with the shared `ListItem` primitive: a
+ * leading icon, a title and an optional right-aligned trailing value.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * BenefitCard — Figma node 5352:1077 ("Benefit Card").
+ *
+ * A white, rounded card that summarises the rewards a user will earn. It is
+ * composed entirely from the shared design-system primitives so it stays in
+ * sync with the rest of the library:
+ *
+ *  - **Header** — a section title + a single highlighted {@link ListItem}
+ *    (leading `Icon`, title, right-aligned trailing value) followed by a
+ *    `Divider`.
+ *  - **Body** — a section title + a column of benefit {@link ListItem}s. The
+ *    list is a real slot: pass `children` to fully control it, or `items` for
+ *    the declarative path.
+ *  - **CTA** — a small {@link Button} (Figma `Button / Size = S`).
+ *
+ * The list rows resolve through the `List Item Style: Minimal` mode (12px /
+ * regular title, 4px gap, no padding) and the leading icons use the
+ * `AppearanceBrand: Secondary` brand color, exactly matching the design. All
+ * three defaults can be overridden via `modes`.
+ */
+function BenefitCard({
+  headerTitle = 'You will earn',
+  headerItem,
+  showHeader = true,
+  bodyTitle = 'Upgrade to JioFinance+ and earn more',
+  items,
+  children,
+  buttonLabel = 'Upgrade',
+  onButtonPress,
+  button,
+  showButton = true,
+  onPress,
+  width = 344,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const tokens = useMemo(() => resolveTokens(modes), [modes]);
+
+  // Sub-component modes. Consumer-supplied `modes` always win via spread order.
+  const listItemModes = useMemo(() => ({
+    'List Item Style': 'Minimal',
+    ...modes
+  }), [modes]);
+  const iconModes = useMemo(() => ({
+    AppearanceBrand: 'Secondary',
+    ...modes
+  }), [modes]);
+  const trailingTextModes = useMemo(() => ({
+    'Text Sizes': 'Small',
+    Weight: 'Regular',
+    ...modes
+  }), [modes]);
+  const ctaModes = useMemo(() => ({
+    'Button / Size': 'S',
+    ...modes
+  }), [modes]);
+  const renderItem = (item, key) => {
+    const leading = item.leading ?? (item.icon != null ? /*#__PURE__*/_jsx(Icon, {
+      iconName: item.icon,
+      color: item.iconColor,
+      modes: iconModes
+    }) : null);
+    const trailing = item.trailing ?? (item.trailingText != null ? /*#__PURE__*/_jsx(Text, {
+      modes: trailingTextModes,
+      children: item.trailingText
+    }) : undefined);
+    return /*#__PURE__*/_jsx(ListItem, {
+      layout: "Horizontal",
+      navArrow: false,
+      showSupportText: false,
+      title: item.title,
+      leading: leading,
+      trailing: trailing,
+      onPress: item.onPress,
+      modes: listItemModes
+    }, key);
+  };
+  const headerNode = showHeader && (headerTitle != null || headerItem != null) ? /*#__PURE__*/_jsxs(View, {
+    style: styles.section,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.cardHeader,
+      children: [headerTitle != null ? /*#__PURE__*/_jsx(RNText, {
+        style: tokens.title,
+        children: headerTitle
+      }) : null, headerItem != null ? renderItem(headerItem, 'header-item') : null]
+    }), /*#__PURE__*/_jsx(Divider, {
+      modes: modes
+    })]
+  }) : null;
+  const bodyList = children ? cloneChildrenWithModes(children, listItemModes) : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index));
+  const ctaNode = button ?? /*#__PURE__*/_jsx(Button, {
+    label: buttonLabel,
+    modes: ctaModes,
+    onPress: onButtonPress
+  });
+  const containerStyle = useMemo(() => ({
+    ...tokens.container,
+    width
+  }), [tokens.container, width]);
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [headerNode, /*#__PURE__*/_jsxs(View, {
+      style: tokens.body,
+      children: [bodyTitle != null ? /*#__PURE__*/_jsx(RNText, {
+        style: tokens.title,
+        children: bodyTitle
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: tokens.listWrap,
+        children: bodyList
+      })]
+    }), showButton ? ctaNode : null]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: ({
+        pressed
+      }) => [containerStyle, pressed ? styles.pressed : null, style],
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? headerTitle ?? bodyTitle,
+      onPress: onPress,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// The "card header" inner gap (title -> highlighted item) is a fixed 4px in
+// the Figma node and has no dedicated token.
+const CARD_HEADER_GAP = 4;
+function asNum(raw, fallback) {
+  const n = typeof raw === 'number' ? raw : parseFloat(raw);
+  return Number.isFinite(n) ? n : fallback;
+}
+function asStr(raw, fallback) {
+  return raw != null ? String(raw) : fallback;
+}
+function resolveTokens(modes) {
+  // NOTE: token names are passed as string literals DIRECTLY to
+  // getVariableByName so the `extract-component-tokens` script can statically
+  // collect them for the generated docs. Do not refactor these into a helper
+  // that receives the name as a variable.
+  const background = asStr(getVariableByName('benefitCard/background', modes), '#ffffff');
+  const paddingHorizontal = asNum(getVariableByName('benefitCard/padding/horizontal', modes), 12);
+  const paddingVertical = asNum(getVariableByName('benefitCard/padding/vertical', modes), 12);
+  const radius = asNum(getVariableByName('benefitCard/radius', modes), 12);
+  const gap = asNum(getVariableByName('benefitCard/gap', modes), 8);
+  const titleColor = asStr(getVariableByName('benefitCard/title/foreground', modes), '#000000');
+  const titleSize = asNum(getVariableByName('benefitCard/title/fontsize', modes), 14);
+  const titleFamily = asStr(getVariableByName('benefitCard/title/fontFamily', modes), 'JioType Var');
+  const titleWeight = asStr(getVariableByName('benefitCard/title/fontWeight', modes), '500');
+  return {
+    container: {
+      backgroundColor: background,
+      paddingHorizontal,
+      paddingVertical,
+      borderRadius: radius,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'flex-start'
+    },
+    body: {
+      alignSelf: 'stretch',
+      gap
+    },
+    listWrap: {
+      alignSelf: 'stretch',
+      gap
+    },
+    title: {
+      color: titleColor,
+      fontSize: titleSize,
+      fontFamily: titleFamily,
+      fontWeight: titleWeight,
+      lineHeight: 20,
+      letterSpacing: -0.5,
+      includeFontPadding: false
+    }
+  };
+}
+const DEFAULT_ITEMS = [{
+  icon: 'ic_card',
+  title: 'Up to ₹5000 cashback'
+}, {
+  icon: 'ic_card',
+  title: '25% extra JioPoints'
+}];
+const styles = StyleSheet.create({
+  section: {
+    alignSelf: 'stretch',
+    gap: 8
+  },
+  cardHeader: {
+    alignSelf: 'stretch',
+    gap: CARD_HEADER_GAP
+  },
+  pressed: {
+    opacity: 0.92
+  }
+});
+export default BenefitCard;

package/lib/module/components/Card/Card.js

@@ -4,13 +4,12 @@ import React, { createContext, useContext, isValidElement, cloneElement } from '
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
  * This ensures that nested components can resolve their tokens correctly without 
  * needing explicit mode prop passing for every child.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CardContext = /*#__PURE__*/createContext({});
 /**
  * Card component implementation from Figma node 765:6186.

package/lib/module/components/CardFeedback/CardFeedback.js

@@ -4,11 +4,10 @@ import React, { createContext, useContext, isValidElement, cloneElement } from '
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import IconComponent from '../../icons/Icon';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Context to share 'modes' with child components.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const CardFeedbackContext = /*#__PURE__*/createContext({});
 /**
  * CardFeedback component from Figma node 1280:4481.