jfs-components 0.1.2 → 0.1.8

package/lib/module/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -0,0 +1,347 @@
+"use strict";
+
+import React, { useId, useMemo } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import Avatar from '../Avatar/Avatar';
+import Badge from '../Badge/Badge';
+import Button from '../Button/Button';
+import Image from '../Image/Image';
+import GlassFill from './GlassFill';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ProductMerchandisingCard — a full-bleed image card (Figma node 5277:317)
+ * with a top header (avatar + badge) and a bottom **glass footer** that
+ * combines a real native background blur with a transparent→black gradient
+ * scrim for legible text over any image.
+ *
+ * Glass footer implementation (works on iOS, Android and Web):
+ *  - **iOS / Android:** `<GlassFill>` wraps `@react-native-community/blur`'s
+ *    `BlurView` — iOS gets a real `UIVisualEffectView` (live OS blur),
+ *    Android gets the community `RealtimeBlurView` with a tinted scrim
+ *    fallback. The native-only module is isolated in `GlassFill.tsx`.
+ *  - **Web:** the platform-extension `GlassFill.web.tsx` renders a translucent
+ *    `View` with `backdrop-filter: blur()` — Metro picks the right file so the
+ *    web bundle never imports the native blur module.
+ *  - The gradient scrim is drawn with `react-native-svg` (one renderer for all
+ *    platforms) so the fade is identical everywhere.
+ *
+ * The blur strength is driven by the Figma `blur/minimal` token, mapped to the
+ * `GlassFill` 0–100 intensity scale the same way `MediaCard` does.
+ */
+function ProductMerchandisingCard({
+  imageSource,
+  title = 'Title',
+  subtitle = 'Subtitle',
+  badgeLabel,
+  badge,
+  showAvatar = true,
+  avatarSource,
+  avatarMonogram,
+  avatar,
+  specialBadgeLabel,
+  specialBadgeIcon,
+  specialBadge,
+  ctaLabel = 'CTA',
+  onCtaPress,
+  cta,
+  onPress,
+  height = 223,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  // Unique gradient id so multiple cards on one (web) document never collide.
+  const rawId = useId();
+  const scrimId = `pmc-footer-scrim-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const tokens = useMemo(() => resolveTokens(modes), [modes]);
+  const containerStyle = {
+    height,
+    borderRadius: tokens.radius,
+    overflow: 'hidden',
+    position: 'relative',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
+  };
+
+  // Header avatar defaults to the design's 36px (Avatar Size = M). A
+  // consumer-supplied `modes['Avatar Size']` still wins via spread order.
+  const avatarModes = useMemo(() => ({
+    'Avatar Size': 'M',
+    ...modes
+  }), [modes]);
+
+  // The Figma node renders the header badge with the brand "Secondary"
+  // appearance at "Medium" emphasis (lilac fill + dark label). These are set
+  // as defaults so the card matches the design out of the box; a
+  // consumer-supplied `modes` value still wins via spread order.
+  const badgeModes = useMemo(() => ({
+    AppearanceBrand: 'Secondary',
+    Emphasis: 'Medium',
+    ...modes
+  }), [modes]);
+  const headerBadge = badge ?? (badgeLabel != null ? /*#__PURE__*/_jsx(Badge, {
+    label: badgeLabel,
+    modes: badgeModes
+  }) : null);
+  const headerAvatar = showAvatar ? avatar ?? /*#__PURE__*/_jsx(Avatar, {
+    style: avatarSource ? 'Image' : avatarMonogram ? 'Monogram' : 'Image',
+    imageSource: avatarSource,
+    monogram: avatarMonogram,
+    modes: avatarModes
+  }) : null;
+  const footerSpecialBadge = specialBadge ?? (specialBadgeLabel != null ? /*#__PURE__*/_jsxs(View, {
+    style: styles.specialBadge,
+    children: [/*#__PURE__*/_jsx(GlassFill, {
+      tint: "light",
+      intensity: SPECIAL_BADGE_INTENSITY,
+      overlayColor: SPECIAL_BADGE_BG,
+      style: styles.specialBadgeFill
+    }), specialBadgeIcon != null ? /*#__PURE__*/_jsx(View, {
+      style: styles.specialBadgeIcon,
+      children: specialBadgeIcon
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: tokens.specialBadgeText,
+      numberOfLines: 1,
+      children: specialBadgeLabel
+    })]
+  }) : null);
+
+  // The Figma CTA uses the brand "Secondary" appearance (purple fill, white
+  // label) at the small size. Defaults match the design; consumer `modes`
+  // win via spread order.
+  const ctaModes = useMemo(() => ({
+    'Button / Size': 'S',
+    AppearanceBrand: 'Secondary',
+    ...modes
+  }), [modes]);
+  const footerCta = cta ?? /*#__PURE__*/_jsx(Button, {
+    label: ctaLabel,
+    modes: ctaModes,
+    onPress: onCtaPress
+  });
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [imageSource != null ? /*#__PURE__*/_jsx(Image, {
+      imageSource: imageSource,
+      style: StyleSheet.absoluteFillObject,
+      width: "100%",
+      height: height,
+      resizeMode: "cover",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: tokens.header,
+      pointerEvents: "box-none",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.avatarContainer,
+        children: headerAvatar
+      }), headerBadge]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: tokens.footer,
+      pointerEvents: "box-none",
+      children: [/*#__PURE__*/_jsx(GlassFill, {
+        tint: "dark",
+        intensity: tokens.blurIntensity,
+        progressive: true
+      }), /*#__PURE__*/_jsx(View, {
+        style: [StyleSheet.absoluteFill, styles.scrim],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsxs(Svg, {
+          width: "100%",
+          height: "100%",
+          children: [/*#__PURE__*/_jsx(Defs, {
+            children: /*#__PURE__*/_jsxs(LinearGradient, {
+              id: scrimId,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [/*#__PURE__*/_jsx(Stop, {
+                offset: "0.018",
+                stopColor: "#000000",
+                stopOpacity: 0
+              }), /*#__PURE__*/_jsx(Stop, {
+                offset: "0.974",
+                stopColor: "#000000",
+                stopOpacity: 1
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            fill: `url(#${scrimId})`
+          })]
+        })
+      }), footerSpecialBadge, /*#__PURE__*/_jsxs(View, {
+        style: styles.footerRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: tokens.textWrap,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: tokens.title,
+            numberOfLines: 1,
+            children: title
+          }), subtitle != null ? /*#__PURE__*/_jsx(Text, {
+            style: tokens.subtitle,
+            numberOfLines: 1,
+            children: subtitle
+          }) : null]
+        }), footerCta]
+      })]
+    })]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: ({
+        pressed
+      }) => [containerStyle, pressed ? styles.pressed : null, style],
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      onPress: onPress,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// Figma footer backdrop-blur token (`blur/minimal`). The footer uses a
+// *progressive* blur, so this maps the token to the intensity at the BOTTOM of
+// the ramp (the strongest point); the upper part fades to fully clear. Kept
+// intentionally small to match the design's subtle "minimal" blur.
+const BLUR_INTENSITY_FACTOR = 1.0;
+
+// Special badge ("frosted" pill) — values are literals in the Figma node
+// (no dedicated tokens): bg rgba(255,245,229,0.15), 5px backdrop blur.
+const SPECIAL_BADGE_BG = 'rgba(255,245,229,0.15)';
+const SPECIAL_BADGE_INTENSITY = 17; // ~5px CSS blur / ~2 native blurAmount
+
+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 radius = asNum(getVariableByName('productMerchandisingcard/radius', modes), 12);
+  const headerPadH = asNum(getVariableByName('productMerchandisingcard/header/padding/horizontal', modes), 12);
+  const headerPadV = asNum(getVariableByName('productMerchandisingcard/header/padding/vertical', modes), 12);
+  const footerGap = asNum(getVariableByName('productMerchandisingcard/footer/gap', modes), 8);
+  const footerPadH = asNum(getVariableByName('productMerchandisingcard/footer/padding/horizontal', modes), 16);
+  const footerPadV = asNum(getVariableByName('productMerchandisingcard/footer/padding/vertical', modes), 16);
+  const textGap = asNum(getVariableByName('productMerchandisingcard/footer/text/gap', modes), 2);
+  const blurRadius = asNum(getVariableByName('blur/minimal', modes), 29);
+  const titleColor = asStr(getVariableByName('productMerchandisingcard/footer/title/font/color', modes), '#ffffff');
+  const titleSize = asNum(getVariableByName('productMerchandisingcard/footer/title/fontsize', modes), 14);
+  const titleFamily = asStr(getVariableByName('productMerchandisingcard/footer/title/fontfamily', modes), 'JioType Var');
+  const titleWeight = asStr(getVariableByName('productMerchandisingcard/footer/title/fontweight', modes), '700');
+  const subtitleColor = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/font/color', modes), '#c5bcb5');
+  const subtitleSize = asNum(getVariableByName('productMerchandisingcard/footer/subtitle/fontsize', modes), 12);
+  const subtitleFamily = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontfamily', modes), 'JioType Var');
+  const subtitleWeight = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontweight', modes), '400');
+  const sbSize = asNum(getVariableByName('productMerchandisingcard/specialbadge/text/fontsize', modes), 12);
+  const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
+  const sbWeight = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontweight', modes), '500');
+  return {
+    radius,
+    blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
+    header: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      paddingHorizontal: headerPadH,
+      paddingVertical: headerPadV,
+      zIndex: 1
+    },
+    footer: {
+      paddingHorizontal: footerPadH,
+      paddingVertical: footerPadV,
+      gap: footerGap,
+      overflow: 'hidden',
+      zIndex: 2
+    },
+    textWrap: {
+      flex: 1,
+      gap: textGap,
+      justifyContent: 'center'
+    },
+    title: {
+      color: titleColor,
+      fontSize: titleSize,
+      fontFamily: titleFamily,
+      fontWeight: titleWeight,
+      lineHeight: Math.round(titleSize * 1.2),
+      includeFontPadding: false
+    },
+    subtitle: {
+      color: subtitleColor,
+      fontSize: subtitleSize,
+      fontFamily: subtitleFamily,
+      fontWeight: subtitleWeight,
+      lineHeight: Math.round(subtitleSize * 1.2),
+      includeFontPadding: false
+    },
+    specialBadgeText: {
+      color: '#ffffff',
+      fontSize: sbSize,
+      fontFamily: sbFamily,
+      fontWeight: sbWeight,
+      lineHeight: Math.round(sbSize * 1.2),
+      includeFontPadding: false
+    }
+  };
+}
+const styles = StyleSheet.create({
+  avatarContainer: {
+    flexShrink: 1,
+    justifyContent: 'center'
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8
+  },
+  scrim: {
+    // The footer node sits at 90% opacity in Figma; applying it to the
+    // scrim (not the content) keeps the title/CTA crisp while preserving
+    // the intended fade strength.
+    opacity: 0.9
+  },
+  specialBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    overflow: 'hidden',
+    alignSelf: 'flex-start'
+  },
+  specialBadgeFill: {
+    borderRadius: 4
+  },
+  specialBadgeIcon: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  pressed: {
+    opacity: 0.92
+  }
+});
+export default ProductMerchandisingCard;

package/lib/module/components/ProjectionMarker/ProjectionMarker.js

@@ -0,0 +1,156 @@
+"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 Divider from '../Divider/Divider';
+
+/**
+ * A value rendered at either end of the marker. A `string`/`number` is rendered
+ * with the built-in title typography; any other `ReactNode` (e.g. a
+ * `MoneyValue`) is rendered as-is so consumers can fully control presentation.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const isTextValue = value => typeof value === 'string' || typeof value === 'number';
+
+/**
+ * ProjectionMarker renders a start value and an end value connected to a
+ * centered badge that summarizes the projection (e.g. a tenure and interest
+ * rate). It mirrors the Figma `projectionMarker` component and is commonly used
+ * inside "Potential returns" style cards.
+ *
+ * @example
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue="₹1,00,000"
+ *   endValue="₹1,25,101"
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ *
+ * @example Custom end values via MoneyValue
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue={<MoneyValue value="1,00,000" />}
+ *   endValue={<MoneyValue value="1,25,101" />}
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ */
+function ProjectionMarker({
+  startValue = '₹1,00,000',
+  endValue = '₹1,25,101',
+  duration = '1Y 10M',
+  rate = '@ 8.25 %',
+  showConnectors = true,
+  modes = EMPTY_MODES,
+  style,
+  startValueStyle,
+  endValueStyle,
+  badgeStyle,
+  durationStyle,
+  rateStyle,
+  accessibilityLabel
+}) {
+  const titleColor = getVariableByName('projectionMarker/title/color', modes) ?? '#000000';
+  const titleFontFamily = getVariableByName('projectionMarker/title/fontfamily', modes) ?? 'JioType Var';
+  const titleFontSize = getVariableByName('projectionMarker/title/fontsize', modes) ?? 14;
+  const titleFontWeight = String(getVariableByName('projectionMarker/title/fontweight', modes) ?? 600);
+  const durationColor = getVariableByName('projectionMarker/duration/color', modes) ?? '#000000';
+  const durationFontFamily = getVariableByName('projectionMarker/duration/fontfamily', modes) ?? 'JioType Var';
+  const durationFontSize = getVariableByName('projectionMarker/duration/fontsize', modes) ?? 12;
+  const durationFontWeight = String(getVariableByName('projectionMarker/duration/fontweight', modes) ?? 500);
+  const rateColor = getVariableByName('projectionMarker/rate/color', modes) ?? '#6b6b6b';
+  const rateFontFamily = getVariableByName('metricdata/rate/fontfamily', modes) ?? 'JioType Var';
+  const rateFontSize = getVariableByName('metricdata/rate/fontsize', modes) ?? 11;
+  const rateFontWeight = String(getVariableByName('metricdata/rate/fontweight', modes) ?? 400);
+  const badgeBg = getVariableByName('projectionMarker/durationWrap/bg/color', modes) ?? '#f5f5f5';
+  const badgeBorderColor = getVariableByName('projectionMarker/durationWrap/border/color', modes) ?? '#ebebed';
+  const badgeBorderWidth = getVariableByName('metricdata/durationWrap/stroke', modes) ?? 1;
+  const badgeRadius = getVariableByName('metricdata/durationWrap/radius', modes) ?? 8;
+  const badgePaddingHorizontal = getVariableByName('metricdata/durationWrap/padding/horizontal', modes) ?? 16;
+  const badgePaddingVertical = getVariableByName('metricdata/durationWrap/padding/vertical', modes) ?? 8;
+  const titleTextStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleFontSize * 1.3
+  };
+  const renderEndValue = (value, overrideStyle) => {
+    if (value === null || value === undefined) return null;
+    if (isTextValue(value)) {
+      return /*#__PURE__*/_jsx(Text, {
+        style: [titleTextStyle, overrideStyle],
+        numberOfLines: 1,
+        children: value
+      });
+    }
+    return cloneChildrenWithModes(value, modes);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    accessibilityRole: "summary",
+    accessibilityLabel: accessibilityLabel,
+    children: [renderEndValue(startValue, startValueStyle), showConnectors && /*#__PURE__*/_jsx(Divider, {
+      direction: "horizontal",
+      modes: modes,
+      style: styles.connector
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.badge, {
+        backgroundColor: badgeBg,
+        borderColor: badgeBorderColor,
+        borderWidth: badgeBorderWidth,
+        borderRadius: badgeRadius,
+        paddingHorizontal: badgePaddingHorizontal,
+        paddingVertical: badgePaddingVertical
+      }, badgeStyle],
+      children: [duration !== null && duration !== undefined ? isTextValue(duration) ? /*#__PURE__*/_jsx(Text, {
+        style: [{
+          color: durationColor,
+          fontFamily: durationFontFamily,
+          fontSize: durationFontSize,
+          fontWeight: durationFontWeight,
+          lineHeight: durationFontSize * 1.2,
+          textAlign: 'center'
+        }, durationStyle],
+        children: duration
+      }) : cloneChildrenWithModes(duration, modes) : null, rate !== null && rate !== undefined ? isTextValue(rate) ? /*#__PURE__*/_jsx(Text, {
+        style: [{
+          color: rateColor,
+          fontFamily: rateFontFamily,
+          fontSize: rateFontSize,
+          fontWeight: rateFontWeight,
+          lineHeight: rateFontSize * 1.3,
+          textAlign: 'center'
+        }, rateStyle],
+        children: rate
+      }) : cloneChildrenWithModes(rate, modes) : null]
+    }), showConnectors && /*#__PURE__*/_jsx(Divider, {
+      direction: "horizontal",
+      modes: modes,
+      style: styles.connector
+    }), renderEndValue(endValue, endValueStyle)]
+  });
+}
+const styles = {
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
+  },
+  connector: {
+    flex: 1,
+    alignSelf: 'center',
+    marginHorizontal: 16
+  },
+  badge: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
+export default ProjectionMarker;

package/lib/module/components/Radio/Radio.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { Pressable, View, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
@@ -13,14 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Radio
 // ---------------------------------------------------------------------------
 
-export function Radio({
+export const Radio = /*#__PURE__*/forwardRef(function Radio({
   selected = false,
   disabled = false,
   onPress,
   modes = EMPTY_MODES,
   style,
   testID
-}) {
+}, ref) {
   // ---- Refs & State ----
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
@@ -168,6 +168,7 @@ export function Radio({
     getVariableByName('radio/disabledSelected/border/color');
   }
   return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
     testID: testID,
     disabled: disabled,
     onPress: onPress,
@@ -184,5 +185,5 @@ export function Radio({
       style: selectorStyle
     })
   });
-}
+});
 export default Radio;