jfs-components 0.0.74 → 0.0.77

package/lib/module/components/LottiePlayer/LottiePlayer.js

@@ -0,0 +1,111 @@
+"use strict";
+
+import React, { useMemo } 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 { getNativeLottieView } from './loadNativeLottieView';
+
+/**
+ * A parsed Lottie animation. The JSON object you get from
+ * `require('./animation.json')` or `fetch().then(r => r.json())`. We keep the
+ * type intentionally loose because both `lottie-react-native` and `lottie-react`
+ * accept slightly different shapes — `LottiePlayer` narrows back to the
+ * platform-specific type internally.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_SIZE = 117;
+function resolveSize(size, modes) {
+  if (typeof size === 'number') return {
+    width: size,
+    height: size
+  };
+  if (size && typeof size === 'object') return size;
+  const width = Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE;
+  const height = Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE;
+  return {
+    width,
+    height
+  };
+}
+
+/**
+ * Renders a Lottie animation using the consumer's installed
+ * `lottie-react-native` (native) or `lottie-react` (web) — both are declared
+ * as **optional peer dependencies** of `jfs-components`, so installing the
+ * library does not pull them in. Add the relevant package to your app only
+ * if you actually use `LottiePlayer`:
+ *
+ * ```sh
+ * # React Native (iOS / Android)
+ * npm install lottie-react-native
+ * cd ios && pod install
+ *
+ * # Web (or react-native-web)
+ * npm install lottie-react
+ * ```
+ *
+ * The web build (`LottiePlayer.web.tsx`) is picked automatically by Metro /
+ * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
+ *
+ * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
+ * `media/width` and `media/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Media / Output` mode
+ * automatically. This is the same sizing contract `PageHero` and
+ * `LottieIntroBlock` use for their `media` slots.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import animation from './assets/loader.json';
+ *
+ * <LottiePlayer source={animation} />                    // 117 × 117 (default)
+ * <LottiePlayer source={animation} size={70} />          // 70 × 70
+ * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <PageHero media={<LottiePlayer source={animation} />} />
+ * ```
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const {
+    width,
+    height
+  } = useMemo(() => resolveSize(size, modes), [size, modes]);
+  const NativeLottieView = useMemo(() => getNativeLottieView(), []);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width,
+      height
+    }, style],
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityElementsHidden: accessibilityLabel ? undefined : true,
+    importantForAccessibility: accessibilityLabel ? 'auto' : 'no',
+    children: /*#__PURE__*/_jsx(NativeLottieView, {
+      source: source,
+      autoPlay: autoPlay,
+      loop: loop,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(LottiePlayer);

package/lib/module/components/LottiePlayer/LottiePlayer.web.js

@@ -0,0 +1,77 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import { getWebLottieView } from './loadWebLottieView';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_SIZE = 117;
+function resolveSize(size, modes) {
+  if (typeof size === 'number') return {
+    width: size,
+    height: size
+  };
+  if (size && typeof size === 'object') return size;
+  const width = Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE;
+  const height = Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE;
+  return {
+    width,
+    height
+  };
+}
+
+/**
+ * Web build of `LottiePlayer` — picked automatically by webpack /
+ * Metro-for-web via the `.web.tsx` platform extension. Uses `lottie-react`
+ * (which wraps `lottie-web`) and renders a plain DOM container.
+ *
+ * Public API mirrors `LottiePlayer.tsx` (native). See that file for the
+ * documented prop reference and usage patterns.
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const {
+    width,
+    height
+  } = useMemo(() => resolveSize(size, modes), [size, modes]);
+  const WebLottieView = useMemo(() => getWebLottieView(), []);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width,
+      height,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...style
+    },
+    "data-testid": testID,
+    "aria-label": accessibilityLabel,
+    "aria-hidden": accessibilityLabel ? undefined : true,
+    children: /*#__PURE__*/_jsx(WebLottieView, {
+      animationData: source,
+      autoplay: autoPlay,
+      loop: loop,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(LottiePlayer);

package/lib/module/components/LottiePlayer/loadNativeLottieView.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+/** Props we forward to the underlying native Lottie view. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const INSTALL_HINT = 'LottiePlayer requires lottie-react-native in your app.\n' + '  npm install lottie-react-native\n' + '  cd ios && pod install';
+
+/**
+ * Metro resolves `require('lottie-react-native')` at bundle time even inside
+ * try/catch, which breaks apps that import `jfs-components` without having
+ * the optional peer installed. Splitting the module id into a runtime string
+ * keeps Metro from statically linking it — the native module is loaded only
+ * when present in the consumer's node_modules.
+ */
+function resolveNativeLottieModuleName() {
+  return ['lottie', '-react', '-native'].join('');
+}
+function LottieUnavailableView({
+  style
+}) {
+  if (__DEV__) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [style, {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255, 196, 0, 0.12)',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 196, 0, 0.45)',
+        borderRadius: 8,
+        padding: 8
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: '#8a6d00',
+          fontSize: 11,
+          textAlign: 'center',
+          lineHeight: 15
+        },
+        children: INSTALL_HINT
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+}
+function LottieUnavailable(props) {
+  React.useEffect(() => {
+    if (__DEV__) {
+      console.warn(`[jfs-components/LottiePlayer] ${INSTALL_HINT}`);
+    }
+  }, []);
+  return /*#__PURE__*/_jsx(LottieUnavailableView, {
+    style: props.style
+  });
+}
+let cachedView;
+export function getNativeLottieView() {
+  if (cachedView !== undefined) return cachedView;
+  try {
+    const mod = require(resolveNativeLottieModuleName());
+    cachedView = mod.default ?? LottieUnavailable;
+  } catch {
+    cachedView = LottieUnavailable;
+  }
+  return cachedView;
+}

package/lib/module/components/LottiePlayer/loadWebLottieView.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import React from 'react';
+
+/** Props we forward to the underlying web Lottie view. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const INSTALL_HINT = 'LottiePlayer requires lottie-react in your app.\n' + '  npm install lottie-react';
+function resolveWebLottieModuleName() {
+  return ['lottie', '-react'].join('');
+}
+function LottieUnavailable(props) {
+  React.useEffect(() => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.warn(`[jfs-components/LottiePlayer] ${INSTALL_HINT}`);
+    }
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      ...props.style,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(255, 196, 0, 0.12)',
+      border: '1px solid rgba(255, 196, 0, 0.45)',
+      borderRadius: 8,
+      padding: 8,
+      color: '#8a6d00',
+      fontSize: 11,
+      textAlign: 'center',
+      lineHeight: '15px'
+    },
+    children: typeof __DEV__ !== 'undefined' && __DEV__ ? INSTALL_HINT : null
+  });
+}
+let cachedView;
+export function getWebLottieView() {
+  if (cachedView !== undefined) return cachedView;
+  try {
+    const mod = require(resolveWebLottieModuleName());
+    cachedView = mod.default ?? LottieUnavailable;
+  } catch {
+    cachedView = LottieUnavailable;
+  }
+  return cachedView;
+}

package/lib/module/components/PageHero/PageHero.js

@@ -9,12 +9,14 @@ import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * PageHero displays a centered hero block typically used at the top of a page
- * or feature screen. It contains an eyebrow line, a large headline, an optional
- * supporting line (e.g. price/timeline), and an optional action button.
+ * or feature screen. It contains an optional media slot (illustration / image
+ * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
+ * headline, an optional supporting line (e.g. price / timeline), and an
+ * optional action button.
  *
  * All visual values are resolved from Figma design tokens via
- * `getVariableByName`. The button slot cascades the active `modes` to its
- * children through `cloneChildrenWithModes`.
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -25,6 +27,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   supportingText="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
+ *   media={
+ *     <Image
+ *       imageSource={require('./assets/upgrade.png')}
+ *       width={117}
+ *       height={117}
+ *     />
+ *   }
  * />
  * ```
  */
@@ -37,6 +46,7 @@ function PageHero({
   onButtonPress,
   showButton = true,
   buttonSlot,
+  media,
   modes: propModes = EMPTY_MODES,
   style,
   testID
@@ -51,6 +61,12 @@ function PageHero({
   const gap = Number(getVariableByName('PageHero/gap', modes)) || 16;
   const paddingHorizontal = Number(getVariableByName('PageHero/padding/horizontal', modes)) || 0;
   const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8;
+
+  // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
+  // Tokens fall back to 117 when not defined in the variables collection,
+  // so the layout stays stable on consumers that haven't tokenized this yet.
+  const mediaWidth = Number(getVariableByName('media/width', modes)) || 117;
+  const mediaHeight = Number(getVariableByName('media/height', modes)) || 117;
   const eyebrowColor = getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff';
   const eyebrowFontFamily = getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System';
   const eyebrowFontSize = Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18;
@@ -126,10 +142,30 @@ function PageHero({
     // shape never does.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes]);
+
+  // Sized container for the media slot. Always rendered when `media` is
+  // provided, so the slot has a predictable box (matches Figma frame
+  // 4540:7845 — 117×117 by default) even if the inner element omits its
+  // own width/height. `overflow: 'hidden'` mirrors the Figma frame's
+  // `clipsContent` so a slightly oversized illustration doesn't break
+  // the centered layout.
+  const mediaContent = useMemo(() => {
+    if (media === undefined || media === null) return null;
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        width: mediaWidth,
+        height: mediaHeight,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden'
+      },
+      children: cloneChildrenWithModes(media, modes)
+    });
+  }, [media, mediaWidth, mediaHeight, modes]);
   return /*#__PURE__*/_jsxs(View, {
     style: [containerStyle, style],
     testID: testID,
-    children: [/*#__PURE__*/_jsxs(View, {
+    children: [mediaContent, /*#__PURE__*/_jsxs(View, {
       style: textWrapStyle,
       children: [eyebrow ? /*#__PURE__*/_jsx(Text, {
         style: eyebrowStyle,

package/lib/module/components/RechargeCard/RechargeCard.js

@@ -7,7 +7,23 @@ 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';
+
+// 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").
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_BUTTON_GROUP_MODES = {
+  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 = {
+  Context3: 'Balance & Cards'
+};
 /**
  * RechargeCard component implementation from Figma node 2235:937.
  * Displays a recharge plan with price, validity, data, and subscription details.
@@ -23,17 +39,19 @@ export default function RechargeCard({
   modes = EMPTY_MODES,
   style
 }) {
-  // 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);
@@ -44,30 +62,25 @@ 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 => typeof weight === 'number' ? weight.toString() : weight;
 
   // Pass modes to subscription children (e.g. AvatarGroup)
@@ -80,6 +93,8 @@ export default function RechargeCard({
       paddingVertical,
       gap,
       borderRadius: radius,
+      borderWidth: strokeWidth,
+      borderColor: strokeColor,
       minWidth,
       alignItems: 'flex-start'
     }, style],
@@ -100,7 +115,10 @@ export default function RechargeCard({
       }), /*#__PURE__*/_jsx(MoneyValue, {
         value: price,
         currency: "\u20B9",
-        modes: modes
+        modes: {
+          ...DEFAULT_MONEY_VALUE_MODES,
+          ...modes
+        }
       })]
     }), /*#__PURE__*/_jsxs(View, {
       style: {
@@ -189,10 +207,8 @@ export default function RechargeCard({
       children: disclaimer
     }), /*#__PURE__*/_jsx(ButtonGroup, {
       modes: {
-        ...modes,
-        "Appearance.Brand": "Secondary",
-        "Button / Size": "S",
-        "Emphasis": "High"
+        ...DEFAULT_BUTTON_GROUP_MODES,
+        ...modes
       },
       children: actions
     })]

package/lib/module/components/Text/Text.js

@@ -4,6 +4,8 @@ import React from 'react';
 import { Text as RNText } 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';
 import { jsx as _jsx } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -15,7 +17,10 @@ function Text({
   textAlign = 'Left',
   modes = EMPTY_MODES,
   style,
-  numberOfLines
+  numberOfLines,
+  loading,
+  skeletonWidth,
+  skeletonLines
 }) {
   const foreground = getVariableByName('text/foreground', modes) ?? '#000000';
   const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType';
@@ -23,6 +28,31 @@ function Text({
   const fontWeight = getVariableByName('text/fontWeight', modes) ?? '500';
   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;
+    const resolvedLineHeight = lineHeight;
+    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 /*#__PURE__*/_jsx(Skeleton, {
+      kind: "text",
+      width: skeletonWidth ?? computedWidth,
+      height: resolvedLineHeight * lines,
+      modes: modes
+    });
+  }
   const textStyle = {
     color: foreground,
     fontFamily: fontFamily,

package/lib/module/components/index.js

@@ -48,6 +48,7 @@ export { default as LinearMeter } from './LinearMeter/LinearMeter';
 export { default as LinearProgress } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as LottieIntroBlock } from './LottieIntroBlock/LottieIntroBlock';
+export { default as LottiePlayer } from './LottiePlayer/LottiePlayer';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as MerchantProfile } from './MerchantProfile/MerchantProfile';