jfs-components 0.0.74 → 0.0.77

package/src/components/RechargeCard/RechargeCard.tsx

@@ -1,11 +1,26 @@
-import React, { isValidElement, cloneElement } from 'react';
-import { View, Text, StyleSheet, type ViewStyle } from 'react-native';
+import React from 'react';
+import { View, Text, type ViewStyle } from 'react-native';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
-import Button from '../Button/Button';
+
+// Defaults applied to the inner ButtonGroup so the card matches Figma out of
+// the box. They are spread *before* the caller's `modes` so any consumer can
+// override an individual key (e.g. swap the size to "M").
+const DEFAULT_BUTTON_GROUP_MODES: Record<string, string> = {
+    AppearanceBrand: 'Secondary',
+    'Button / Size': 'S',
+    Emphasis: 'High',
+};
+
+// Defaults applied to the inner MoneyValue so the price renders at the
+// 36 px / 900-weight scale defined for cards in Figma. Same merge rule as
+// the button group — consumer `modes` override these.
+const DEFAULT_MONEY_VALUE_MODES: Record<string, string> = {
+    Context3: 'Balance & Cards',
+};
 
 
 export type RechargeCardProps = {
@@ -66,17 +81,19 @@ export default function RechargeCard({
     modes = EMPTY_MODES,
     style,
 }: RechargeCardProps) {
-    // Container Tokens
-    const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#f6f3ff';
+    // Container Tokens (defaults mirror Figma node 2235:937).
+    const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#ffffff';
     const paddingHorizontal = parseInt(getVariableByName('rechargeCard/padding/horizontal', modes) || 16, 10);
     const paddingVertical = parseInt(getVariableByName('rechargeCard/padding/vertical', modes) || 20, 10);
     const gap = parseInt(getVariableByName('rechargeCard/gap', modes) || 20, 10);
     const radius = parseInt(getVariableByName('rechargeCard/radius', modes) || 20, 10);
-    const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 328, 10);
+    const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 312, 10);
+    const strokeWidth = parseInt(getVariableByName('rechargeCard/strokeWidth', modes) || 1, 10);
+    const strokeColor = getVariableByName('rechargeCard/stroke/color', modes) || '#ebebed';
 
     // Header Tokens
     const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes) || 4, 10);
-    const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#13002d';
+    const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#000000';
     const titleFontSize = parseInt(getVariableByName('rechargeCard/title/fontSize', modes) || 12, 10);
     const titleFontFamily = getVariableByName('rechargeCard/title/fontFamily', modes) || 'JioType Var';
     const titleLineHeight = parseInt(getVariableByName('rechargeCard/title/lineHeight', modes) || 14, 10);
@@ -87,30 +104,26 @@ export default function RechargeCard({
     const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes) || 4, 10);
 
     // Spec Label Tokens
-    const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#13002d';
+    const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#000000';
     const specLabelFontSize = parseInt(getVariableByName('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
     const specLabelFontFamily = getVariableByName('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
     const specLabelLineHeight = parseInt(getVariableByName('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
     const specLabelFontWeight = getVariableByName('rechargeCard/specItem/label/fontWeight', modes) || '500';
 
     // Spec Value Tokens
-    const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#310064';
+    const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#000000';
     const specValueFontSize = parseInt(getVariableByName('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
     const specValueFontFamily = getVariableByName('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
     const specValueLineHeight = parseInt(getVariableByName('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
     const specValueFontWeight = getVariableByName('rechargeCard/specItem/value/fontWeight', modes) || '500';
 
     // Disclaimer Tokens
-    const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#22004a';
+    const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#000000';
     const disclaimerFontSize = parseInt(getVariableByName('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
     const disclaimerFontFamily = getVariableByName('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
     const disclaimerLineHeight = parseInt(getVariableByName('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
     const disclaimerFontWeight = getVariableByName('rechargeCard/disclaimer/fontWeight', modes) || '400';
 
-    // Button Group Tokens
-    // Handled by ButtonGroup component directly
-
-    // Helpers
     const resolveFontWeight = (weight: string | number) => typeof weight === 'number' ? weight.toString() : weight;
 
     // Pass modes to subscription children (e.g. AvatarGroup)
@@ -125,6 +138,8 @@ export default function RechargeCard({
             paddingVertical,
             gap,
             borderRadius: radius,
+            borderWidth: strokeWidth,
+            borderColor: strokeColor,
             minWidth,
             alignItems: 'flex-start',
         }, style]}>
@@ -142,7 +157,7 @@ export default function RechargeCard({
                 <MoneyValue
                     value={price}
                     currency="₹"
-                    modes={modes}
+                    modes={{ ...DEFAULT_MONEY_VALUE_MODES, ...modes }}
                 />
             </View>
 
@@ -224,15 +239,8 @@ export default function RechargeCard({
                 {disclaimer}
             </Text>
 
-            {/* Button Group */}
-            <ButtonGroup
-                modes={{
-                    ...modes,
-                    "Appearance.Brand": "Secondary",
-                    "Button / Size": "S",
-                    "Emphasis": "High"
-                }}
-            >
+            {/* Button Group: defaults are overridable via the consumer's `modes` */}
+            <ButtonGroup modes={{ ...DEFAULT_BUTTON_GROUP_MODES, ...modes }}>
                 {actions}
             </ButtonGroup>
         </View>

package/src/components/Text/Text.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 export type TextProps = {
   /**
@@ -23,6 +25,25 @@ export type TextProps = {
   style?: StyleProp<TextStyle>
   /** Number of lines to limit the text to. */
   numberOfLines?: number
+  /**
+   * Explicit per-instance loading override. When `true`, this `Text` renders
+   * a skeleton placeholder regardless of any surrounding `<SkeletonGroup>`.
+   * When `false`, the surrounding group is ignored for this instance. When
+   * omitted, the surrounding group's `loading` flag wins.
+   */
+  loading?: boolean
+  /**
+   * Optional width used while the skeleton is showing. Numbers are dp;
+   * `'100%'` (etc.) is a valid RN dimension. Defaults to a character-count
+   * heuristic based on the resolved font size and the supplied content.
+   */
+  skeletonWidth?: number | `${number}%`
+  /**
+   * Optional explicit line count for the skeleton placeholder. Defaults to
+   * `numberOfLines ?? 1`. Useful when `numberOfLines` is intentionally
+   * unbounded but you want a sensible multi-line placeholder.
+   */
+  skeletonLines?: number
 }
 
 const TEXT_ALIGN_MAP: Record<NonNullable<TextProps['textAlign']>, TextStyle['textAlign']> = {
@@ -37,6 +58,9 @@ function Text({
   modes = EMPTY_MODES,
   style,
   numberOfLines,
+  loading,
+  skeletonWidth,
+  skeletonLines,
 }: TextProps) {
   const foreground = getVariableByName('text/foreground', modes) ?? '#000000'
   const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType'
@@ -45,6 +69,36 @@ function Text({
   const lineHeight = getVariableByName('text/lineHeight', modes) ?? 20
   const letterSpacing = getVariableByName('text/letterSpacing', modes) ?? -0.5
 
+  // Skeleton short-circuit. The hook is always called (stable order); the
+  // surrounding group's `active` flag is the default, but an explicit
+  // `loading` prop overrides both directions.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+  if (isLoading) {
+    const resolvedFontSize = fontSize as number
+    const resolvedLineHeight = lineHeight as number
+    const lines = Math.max(1, skeletonLines ?? numberOfLines ?? 1)
+    // Heuristic width based on the actual content length so the placeholder
+    // visually matches what's about to load. Capped to a reasonable lower
+    // bound so very short labels still produce a visible block.
+    const contentLength =
+      typeof children === 'string'
+        ? children.length
+        : typeof text === 'string'
+          ? text.length
+          : 12
+    const charWidth = resolvedFontSize * 0.55
+    const computedWidth = Math.max(charWidth * 4, contentLength * charWidth)
+    return (
+      <Skeleton
+        kind="text"
+        width={skeletonWidth ?? computedWidth}
+        height={resolvedLineHeight * lines}
+        modes={modes}
+      />
+    )
+  }
+
   const textStyle: TextStyle = {
     color: foreground as string,
     fontFamily: fontFamily as string,

package/src/components/index.ts

@@ -47,6 +47,7 @@ export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/Lin
 export { default as LinearProgress, type LinearProgressProps } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as LottieIntroBlock, type LottieIntroBlockProps } from './LottieIntroBlock/LottieIntroBlock';
+export { default as LottiePlayer, type LottiePlayerProps, type LottieAnimationSource } from './LottiePlayer/LottiePlayer';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';