jfs-components 0.0.73 → 0.0.77

package/lib/module/components/LottieIntroBlock/LottieIntroBlock.js

@@ -0,0 +1,144 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import Button from '../Button/Button';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_MEDIA_SIZE = 117;
+/**
+ * LottieIntroBlock displays a centered onboarding/intro block composed of a
+ * media slot (typically a Lottie animation or illustration) above a title,
+ * an optional supportive paragraph, and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LottieIntroBlock
+ *   title="Let's get to know how your financial health is doing"
+ *   supportText="From assets to taxes, stay on top of everything in one simple view."
+ *   buttonLabel="Get started"
+ *   onButtonPress={() => navigate('NextScreen')}
+ *   media={<MyLottiePlayer source={animationSource} />}
+ * />
+ * ```
+ */
+function LottieIntroBlock({
+  title = "Let's get to know how your financial health is doing",
+  showSupportText = true,
+  supportText = 'From assets to taxes, stay on top of everything in one simple view.',
+  showButton = true,
+  buttonLabel = 'Button',
+  onButtonPress,
+  media,
+  buttonSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+
+  // Container
+  const gap = Number(getVariableByName('lottieIntroBlock/gap', modes)) || 36;
+  const paddingHorizontal = Number(getVariableByName('lottieIntroBlock/padding/horizontal', modes)) || 0;
+  const paddingVertical = Number(getVariableByName('lottieIntroBlock/padding/vertical', modes)) || 16;
+
+  // Text wrap
+  const textWrapGap = Number(getVariableByName('lottieIntroBlock/textWrap/gap', modes)) || 16;
+
+  // Title
+  const titleColor = getVariableByName('lottieIntroBlock/title/foreground', modes) || '#0d0d0f';
+  const titleFontSize = Number(getVariableByName('lottieIntroBlock/title/fontSize', modes)) || 23;
+  const titleFontFamily = getVariableByName('lottieIntroBlock/title/fontFamily', modes) || 'System';
+  const titleLineHeight = Number(getVariableByName('lottieIntroBlock/title/lineHeight', modes)) || 23;
+  const titleFontWeight = getVariableByName('lottieIntroBlock/title/fontWeight', modes) || 900;
+
+  // Support text
+  const supportColor = getVariableByName('lottieIntroBlock/supportText/foreground', modes) || '#0d0d0f';
+  const supportFontSize = Number(getVariableByName('lottieIntroBlock/supportText/fontSize', modes)) || 14;
+  const supportFontFamily = getVariableByName('lottieIntroBlock/supportText/fontFamily', modes) || 'System';
+  const supportLineHeight = Number(getVariableByName('lottieIntroBlock/supportText/lineHeight', modes)) || 18;
+  const supportFontWeight = getVariableByName('lottieIntroBlock/supportText/fontWeight', modes) || 400;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    gap
+  };
+  const textWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%'
+  };
+  const titleStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight),
+    textAlign: 'center'
+  };
+  const supportTextStyle = {
+    color: supportColor,
+    fontSize: supportFontSize,
+    fontFamily: supportFontFamily,
+    lineHeight: supportLineHeight,
+    fontWeight: String(supportFontWeight),
+    textAlign: 'center'
+  };
+  const mediaContent = useMemo(() => {
+    if (media === undefined || media === null) {
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          width: DEFAULT_MEDIA_SIZE,
+          height: DEFAULT_MEDIA_SIZE
+        },
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants"
+      });
+    }
+    return cloneChildrenWithModes(media, modes);
+  }, [media, modes]);
+  const buttonContent = useMemo(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return cloneChildrenWithModes(buttonSlot, modes);
+    }
+    if (!showButton) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Button, {
+      label: buttonLabel,
+      onPress: onButtonPress,
+      modes: modes
+    });
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [mediaContent, /*#__PURE__*/_jsxs(View, {
+      style: textWrapStyle,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
+        children: title
+      }), showSupportText && supportText ? /*#__PURE__*/_jsx(Text, {
+        style: supportTextStyle,
+        children: supportText
+      }) : null, buttonContent]
+    })]
+  });
+}
+export default LottieIntroBlock;

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

@@ -0,0 +1,183 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import Button from '../Button/Button';
+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 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`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PageHero
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Resume earning cashback, extra points, and 1% gold"
+ *   supportingText="₹999/year · ₹0 until 2027"
+ *   buttonLabel="Renew for free"
+ *   onButtonPress={() => navigate('Upgrade')}
+ *   media={
+ *     <Image
+ *       imageSource={require('./assets/upgrade.png')}
+ *       width={117}
+ *       height={117}
+ *     />
+ *   }
+ * />
+ * ```
+ */
+function PageHero({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Resume earning cashback, extra points, and 1% gold',
+  supportingText = '₹999/year · ₹0 until 2027',
+  showSupportingText = true,
+  buttonLabel = 'Renew for free',
+  onButtonPress,
+  showButton = true,
+  buttonSlot,
+  media,
+  modes: propModes = EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  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;
+  const eyebrowFontWeight = getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700;
+  const eyebrowLineHeight = Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20;
+  const headlineColor = getVariableByName('PageHero/headline/color', modes) || '#ffffff';
+  const headlineFontFamily = getVariableByName('PageHero/headline/fontFamily', modes) || 'System';
+  const headlineFontSize = Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29;
+  const headlineFontWeight = getVariableByName('PageHero/headline/fontWeight', modes) || 900;
+  const headlineLineHeight = Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29;
+
+  // Only `lineHeight` is tokenized for the supporting text in the Figma source.
+  // Color, font size and weight are inline literals in the design (12px medium
+  // white) — we mirror that here so the visual stays faithful when no token
+  // exists.
+  const supportingTextLineHeight = Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16;
+  const containerStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    gap,
+    width: '100%'
+  };
+  const textWrapStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%'
+  };
+  const eyebrowStyle = {
+    color: eyebrowColor,
+    fontFamily: eyebrowFontFamily,
+    fontSize: eyebrowFontSize,
+    fontWeight: String(eyebrowFontWeight),
+    lineHeight: eyebrowLineHeight,
+    textAlign: 'center'
+  };
+  const headlineStyle = {
+    color: headlineColor,
+    fontFamily: headlineFontFamily,
+    fontSize: headlineFontSize,
+    fontWeight: String(headlineFontWeight),
+    lineHeight: headlineLineHeight,
+    textAlign: 'center',
+    width: '100%'
+  };
+  const supportingTextStyle = {
+    color: '#ffffff',
+    fontFamily: 'System',
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: supportingTextLineHeight,
+    textAlign: 'center'
+  };
+  const buttonWrapStyle = {
+    width: '100%'
+  };
+  const buttonContent = useMemo(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return cloneChildrenWithModes(buttonSlot, modes);
+    }
+    if (!showButton) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Button, {
+      label: buttonLabel,
+      onPress: onButtonPress,
+      modes: modes,
+      style: buttonWrapStyle
+    });
+    // buttonWrapStyle is a literal object created above; it is intentionally
+    // omitted from deps because its identity changes on every render but its
+    // 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: [mediaContent, /*#__PURE__*/_jsxs(View, {
+      style: textWrapStyle,
+      children: [eyebrow ? /*#__PURE__*/_jsx(Text, {
+        style: eyebrowStyle,
+        children: eyebrow
+      }) : null, headline ? /*#__PURE__*/_jsx(Text, {
+        style: headlineStyle,
+        children: headline
+      }) : null]
+    }), showSupportingText && supportingText ? /*#__PURE__*/_jsx(Text, {
+      style: supportingTextStyle,
+      children: supportingText
+    }) : null, buttonContent]
+  });
+}
+export default PageHero;