jfs-components 0.1.2 → 0.1.8

package/lib/module/components/CcCard/CcCard.js

@@ -0,0 +1,464 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Badge from '../Badge/Badge';
+import Avatar from '../Avatar/Avatar';
+import Image from '../Image/Image';
+import Icon from '../Icon/Icon';
+import Title from '../Title/Title';
+import ListItem from '../ListItem/ListItem';
+import TextSegment from '../TextSegment/TextSegment';
+import Button from '../Button/Button';
+
+/**
+ * A single coloured chip rendered in the card header. Each badge resolves its
+ * own design tokens through `modes`, so different appearances (brand, tonal,
+ * etc.) can sit side-by-side in the same group.
+ */
+
+/**
+ * A single benefit row in the card's list, rendered through the shared
+ * {@link ListItem} primitive (leading icon + title).
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * CcCard — Figma node 5434:1992 ("Cc Card").
+ *
+ * A white, rounded credit-card product card composed entirely from the shared
+ * design-system primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Header** — two {@link Badge} groups (a leading group + a right-aligned
+ *    trailing group), e.g. `Pre-qualified` / `Lifetime free`.
+ *  - **Media** — a product `Image` + a {@link Title} (title + subtitle resolved
+ *    through the `context7: Card` mode → 14px/12px).
+ *  - **List** — a column of benefit {@link ListItem}s (`List Item Style:
+ *    Minimal`) with leading icons.
+ *  - **Nudge** — an inline upsell row: an {@link Avatar} + a {@link TextSegment}.
+ *  - **Footer** — a headline + description + subtitle text block alongside a
+ *    small {@link Button} (`Button / Size: S`, `AppearanceBrand: Secondary`).
+ *
+ * The {@link CcCardProps.compact} variant collapses the card to just the
+ * leading avatar slot + the footer text block (no CTA button). All defaults can
+ * be overridden via `modes`.
+ */
+function CcCard({
+  compact = false,
+  showHeader = true,
+  badges = DEFAULT_BADGES,
+  trailingBadges,
+  header,
+  imageSource,
+  imageWidth = 88,
+  imageHeight = 54,
+  title = 'Title',
+  subtitle = 'Subtitle',
+  media,
+  items = DEFAULT_ITEMS,
+  showNudge = true,
+  nudgeSegments = DEFAULT_NUDGE_SEGMENTS,
+  nudgeAvatarSource,
+  nudge,
+  headline = 'Headline',
+  description = 'Description',
+  footerSubtitle = 'Subtitle',
+  footer,
+  buttonLabel = 'Button',
+  onButtonPress,
+  button,
+  showButton = true,
+  onPress,
+  width = 343,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const tokens = useMemo(() => resolveTokens(modes), [modes]);
+
+  // The product title uses the card-sized type ramp (14px bold + 12px
+  // subtitle) via the `context7: Card` mode. Consumer modes still win.
+  const titleModes = useMemo(() => ({
+    context7: 'Card',
+    ...modes
+  }), [modes]);
+  // List rows use the minimal style (12px / regular, no padding).
+  const listItemModes = useMemo(() => ({
+    'List Item Style': 'Minimal',
+    ...modes
+  }), [modes]);
+  // The nudge avatar is the smallest size token.
+  const nudgeAvatarModes = useMemo(() => ({
+    'Avatar Size': 'XS',
+    ...modes
+  }), [modes]);
+  // The CTA is the small, brand-secondary (lilac→purple) button.
+  const ctaModes = useMemo(() => ({
+    AppearanceBrand: 'Secondary',
+    'Button / Size': 'S',
+    ...modes
+  }), [modes]);
+
+  // ---- Header -----------------------------------------------------------
+  const headerNode = header ? cloneChildrenWithModes(header, modes) : showHeader && (badges?.length || trailingBadges?.length) ? /*#__PURE__*/_jsxs(View, {
+    style: styles.header,
+    children: [/*#__PURE__*/_jsx(BadgeGroup, {
+      badges: badges,
+      modes: modes
+    }), trailingBadges?.length ? /*#__PURE__*/_jsx(BadgeGroup, {
+      badges: trailingBadges,
+      modes: modes
+    }) : null]
+  }) : null;
+
+  // ---- Media slot (shared by both compact + non-compact) ----------------
+  // Whatever lives in the slot is rendered identically in both variants; only
+  // the surrounding sections differ. The default is an Image driven by
+  // `imageSource`, but a consumer can pass an Avatar (or any node) via `media`.
+  const mediaSlotContent = media ? cloneChildrenWithModes(media, modes) : /*#__PURE__*/_jsx(Image, {
+    imageSource: imageSource,
+    width: imageWidth,
+    height: imageHeight,
+    borderRadius: tokens.imageRadius,
+    resizeMode: "cover",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  });
+
+  // Non-compact lays the slot out in a row next to the product Title.
+  const mediaRow = /*#__PURE__*/_jsxs(View, {
+    style: styles.mediaSlot,
+    children: [mediaSlotContent, /*#__PURE__*/_jsx(View, {
+      style: styles.titleWrap,
+      children: /*#__PURE__*/_jsx(Title, {
+        title: title,
+        subtitle: subtitle,
+        textAlign: "Left",
+        modes: titleModes,
+        style: styles.titleInner
+      })
+    })]
+  });
+
+  // ---- List -------------------------------------------------------------
+  const listNode = items.length > 0 ? /*#__PURE__*/_jsx(View, {
+    style: tokens.listGroup,
+    children: items.map((item, index) => {
+      const leading = item.leading ?? (item.icon !== null ? /*#__PURE__*/_jsx(Icon, {
+        iconName: item.icon ?? 'ic_card',
+        color: item.iconColor,
+        modes: listItemModes
+      }) : null);
+      return /*#__PURE__*/_jsx(ListItem, {
+        layout: "Horizontal",
+        navArrow: false,
+        showSupportText: false,
+        title: item.title,
+        leading: leading,
+        onPress: item.onPress,
+        modes: listItemModes
+      }, index);
+    })
+  }) : null;
+
+  // ---- Nudge ------------------------------------------------------------
+  const nudgeNode = nudge ? cloneChildrenWithModes(nudge, modes) : showNudge ? /*#__PURE__*/_jsxs(View, {
+    style: tokens.nudge,
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      imageSource: nudgeAvatarSource,
+      modes: nudgeAvatarModes
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.nudgeContent,
+      children: /*#__PURE__*/_jsx(TextSegment, {
+        segments: nudgeSegments,
+        modes: modes
+      })
+    })]
+  }) : null;
+
+  // ---- Footer -----------------------------------------------------------
+  const ctaNode = button ? cloneChildrenWithModes(button, ctaModes) : /*#__PURE__*/_jsx(Button, {
+    label: buttonLabel,
+    modes: ctaModes,
+    onPress: onButtonPress
+  });
+  const footerTextBlock = footer ? cloneChildrenWithModes(footer, modes) : /*#__PURE__*/_jsxs(View, {
+    style: tokens.footerTextWrap,
+    children: [headline != null ? /*#__PURE__*/_jsx(Text, {
+      style: tokens.headline,
+      children: headline
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: compact ? tokens.titleWrapCompact : tokens.titleWrapDefault,
+      children: [description != null ? /*#__PURE__*/_jsx(Text, {
+        style: tokens.footerTitle,
+        children: description
+      }) : null, footerSubtitle != null ? /*#__PURE__*/_jsx(Text, {
+        style: tokens.footerSubtitle,
+        children: footerSubtitle
+      }) : null]
+    })]
+  });
+  const footerNode = /*#__PURE__*/_jsxs(View, {
+    style: compact ? tokens.footerRowCompact : tokens.footerRowDefault,
+    children: [footerTextBlock, !compact && showButton ? ctaNode : null]
+  });
+
+  // ---- Compose ----------------------------------------------------------
+  const content = compact ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.compactSlot,
+      children: mediaSlotContent
+    }), footerNode]
+  }) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [headerNode, mediaRow, listNode, nudgeNode, footerNode]
+  });
+  const containerStyle = useMemo(() => ({
+    ...tokens.container,
+    width
+  }), [tokens.container, width]);
+  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
+  });
+}
+
+// ---------------------------------------------------------------------------
+// BadgeGroup — internal wrapping row of badges
+// ---------------------------------------------------------------------------
+
+function BadgeGroup({
+  badges,
+  modes
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.badgeGroup,
+    children: badges.map((badge, index) => {
+      const badgeModes = badge.modes ? {
+        ...modes,
+        ...badge.modes
+      } : modes;
+      return /*#__PURE__*/_jsx(Badge, {
+        label: badge.label,
+        modes: badgeModes,
+        style: badge.color ? {
+          backgroundColor: badge.color
+        } : undefined,
+        labelStyle: badge.labelColor ? {
+          color: badge.labelColor
+        } : undefined
+      }, index);
+    })
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+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('ccCard/bg', modes), '#ffffff');
+  const borderColor = asStr(getVariableByName('ccCard/border/color', modes), '#e3e4e4');
+  const borderWidth = asNum(getVariableByName('ccCard/border/size', modes), 1);
+  const radius = asNum(getVariableByName('ccCard/radius', modes), 12);
+  const paddingHorizontal = asNum(getVariableByName('ccCard/padding/horizontal', modes), 12);
+  const paddingVertical = asNum(getVariableByName('ccCard/padding/vertical', modes), 12);
+  const gap = asNum(getVariableByName('ccCard/padding/gap', modes), 8);
+  const imageRadius = asNum(getVariableByName('image/radius', modes), 0);
+  const listGroupGap = asNum(getVariableByName('listGroup/gap', modes), 4);
+  const nudgeGap = asNum(getVariableByName('nudge/gap', modes), 6);
+  const footerGap = asNum(getVariableByName('ccCard/footer/gap', modes), 8);
+  const textWrapGap = asNum(getVariableByName('ccCard/footer/textWrap/gap', modes), 4);
+  const titleWrapGap = asNum(getVariableByName('ccCard/footer/titleWrap/gap', modes), 8);
+  const headlineColor = asStr(getVariableByName('ccCard/headline/color', modes), '#707275');
+  const headlineSize = asNum(getVariableByName('ccCard/headline/fontSize', modes), 10);
+  const headlineFamily = asStr(getVariableByName('ccCard/headline/fontFamily', modes), 'JioType Var');
+  const headlineLineHeight = asNum(getVariableByName('ccCard/headline/lineHeight', modes), 13);
+  const headlineWeight = asStr(getVariableByName('ccCard/headline/fontWeight', modes), '500');
+  const titleColor = asStr(getVariableByName('ccCard/title/color', modes), '#081007');
+  const titleSize = asNum(getVariableByName('ccCard/title/fontSize', modes), 14);
+  const titleFamily = asStr(getVariableByName('ccCard/title/fontFamily', modes), 'JioType Var');
+  const titleLineHeight = asNum(getVariableByName('ccCard/title/lineHeight', modes), 15);
+  const titleWeight = asStr(getVariableByName('ccCard/title/fontWeight', modes), '700');
+  const subtitleColor = asStr(getVariableByName('ccCard/subtitle/color', modes), '#707275');
+  const subtitleSize = asNum(getVariableByName('ccCard/subtitle/fontSize', modes), 10);
+  const subtitleFamily = asStr(getVariableByName('ccCard/subtitle/fontFamily', modes), 'JioType Var');
+  const subtitleLineHeight = asNum(getVariableByName('ccCard/subtitle/lineHeight', modes), 13);
+  const subtitleWeight = asStr(getVariableByName('ccCard/subtitle/fontWeight', modes), '500');
+  return {
+    container: {
+      backgroundColor: background,
+      borderColor,
+      borderWidth,
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      overflow: 'hidden'
+    },
+    imageRadius,
+    listGroup: {
+      alignSelf: 'stretch',
+      gap: listGroupGap
+    },
+    nudge: {
+      alignSelf: 'stretch',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: nudgeGap
+    },
+    footerRowDefault: {
+      alignSelf: 'stretch',
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: footerGap
+    },
+    footerRowCompact: {
+      alignSelf: 'stretch',
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    footerTextWrap: {
+      flex: 1,
+      minWidth: 1,
+      alignItems: 'flex-start',
+      gap: textWrapGap
+    },
+    titleWrapDefault: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: textWrapGap
+    },
+    titleWrapCompact: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: titleWrapGap
+    },
+    headline: {
+      color: headlineColor,
+      fontSize: headlineSize,
+      fontFamily: headlineFamily,
+      fontWeight: headlineWeight,
+      lineHeight: Math.max(headlineLineHeight, Math.ceil(headlineSize * 1.2)),
+      includeFontPadding: false
+    },
+    footerTitle: {
+      color: titleColor,
+      fontSize: titleSize,
+      fontFamily: titleFamily,
+      fontWeight: titleWeight,
+      lineHeight: Math.max(titleLineHeight, Math.ceil(titleSize * 1.2)),
+      includeFontPadding: false
+    },
+    footerSubtitle: {
+      color: subtitleColor,
+      fontSize: subtitleSize,
+      fontFamily: subtitleFamily,
+      fontWeight: subtitleWeight,
+      lineHeight: Math.max(subtitleLineHeight, Math.ceil(subtitleSize * 1.2)),
+      includeFontPadding: false
+    }
+  };
+}
+const DEFAULT_BADGES = [{
+  label: 'Pre-qualified',
+  modes: {
+    AppearanceBrand: 'Tertiary'
+  },
+  labelColor: '#ffffff'
+}, {
+  label: 'Lifetime free',
+  modes: {
+    AppearanceBrand: 'Tertiary'
+  },
+  labelColor: '#ffffff'
+}];
+const DEFAULT_ITEMS = [{
+  icon: 'ic_card',
+  title: '4 domestic + 2 intl. lounge access yearly'
+}, {
+  icon: 'ic_card',
+  title: '5% cashback on dining & travel'
+}, {
+  icon: 'ic_card',
+  title: 'No annual fee for the first year'
+}];
+const DEFAULT_NUDGE_SEGMENTS = [{
+  text: 'Upsell message '
+}, {
+  text: 'JioFinance+',
+  modes: {
+    'Text Appearance': 'Primary'
+  }
+}];
+const styles = StyleSheet.create({
+  header: {
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 8
+  },
+  badgeGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 4,
+    flexShrink: 1
+  },
+  mediaSlot: {
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8
+  },
+  titleWrap: {
+    flex: 1,
+    minWidth: 1
+  },
+  // The shared Title falls back to 16/8 padding when its tokens resolve to 0
+  // (0 is falsy). Zero it out so the only horizontal gap to the media slot is
+  // the mediaSlot's hard-coded 8px.
+  titleInner: {
+    paddingHorizontal: 0,
+    paddingVertical: 0
+  },
+  // Compact media wrapper hugs its child so the slot sizes to the avatar /
+  // image's intrinsic dimensions instead of stretching to the card width.
+  compactSlot: {
+    alignSelf: 'flex-start'
+  },
+  nudgeContent: {
+    flex: 1,
+    minWidth: 1
+  },
+  pressed: {
+    opacity: 0.92
+  }
+});
+export default CcCard;

package/lib/module/components/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Pressable, Platform, View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
@@ -78,7 +78,7 @@ function invisibleTouchHitSlop(checkboxSize) {
  * @component
  * @param {CheckboxProps} props
  */
-function Checkbox({
+const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
   checked: controlledChecked,
   defaultChecked = false,
   onValueChange,
@@ -86,7 +86,7 @@ function Checkbox({
   modes = EMPTY_MODES,
   style,
   accessibilityLabel
-}) {
+}, ref) {
   const isControlled = controlledChecked !== undefined;
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
   const isChecked = isControlled ? controlledChecked : internalChecked;
@@ -194,6 +194,7 @@ function Checkbox({
   const markColor = disabled && isChecked ? disabledActiveMark : selectedMarkColor;
   const hitSlop = invisibleTouchHitSlop(size);
   return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
     style: [touchTargetStyle, style],
     hitSlop: hitSlop,
     onPress: handlePress,
@@ -221,7 +222,7 @@ function Checkbox({
       })
     })
   });
-}
+});
 function boxShadow(value) {
   if (Platform.OS === 'web') {
     return {

package/lib/module/components/CheckboxItem/CheckboxItem.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useCallback, useState } from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
@@ -33,7 +33,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * />
  * ```
  */
-function CheckboxItem({
+const CheckboxItem = /*#__PURE__*/forwardRef(function CheckboxItem({
   checked: controlledChecked,
   defaultChecked = false,
   onValueChange,
@@ -46,7 +46,7 @@ function CheckboxItem({
   style,
   labelStyle,
   accessibilityLabel
-}) {
+}, ref) {
   const isTrailing = control === 'trailing';
   const isControlled = controlledChecked !== undefined;
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
@@ -115,6 +115,7 @@ function CheckboxItem({
     children: cloneChildrenWithModes(endSlot, modes)
   }) : null;
   return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
     style: [containerStyle, style],
     onPress: handleToggle,
     disabled: disabled,
@@ -130,5 +131,5 @@ function CheckboxItem({
       children: [checkboxNode, labelNode, endSlotNode]
     })
   });
-}
+});
 export default CheckboxItem;