jfs-components 0.0.54 → 0.0.56

package/lib/module/components/TransactionBubble/TransactionBubble.js

@@ -0,0 +1,140 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import MoneyValue from '../MoneyValue/MoneyValue';
+import TransactionStatus from '../TransactionStatus/TransactionStatus';
+import NavArrow from '../NavArrow/NavArrow';
+import { cloneChildrenWithModes } from '../../utils/react-utils';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TransactionBubble — Figma node 1517:1155.
+ *
+ * Layout (single horizontal row inside a rounded bordered pill):
+ *
+ *   ┌──────────────────────────────────────────────┐
+ *   │  Description                  Status · Date  │
+ *   │  ₹56                                    ›    │
+ *   └──────────────────────────────────────────────┘
+ *
+ * Left column: description text + MoneyValue, stacked vertically with `transactionBubble/gap`.
+ * Right column: TransactionStatus + NavArrow, stacked vertically with `transactionBubble/statusWrap/gap`,
+ *               right-aligned.
+ */
+function TransactionBubble({
+  description = 'Payment to Uber India',
+  value = '56',
+  currency = '₹',
+  status = 'Expired',
+  date = '20 Mar 2025',
+  statusSlot,
+  children,
+  modes = {},
+  onPress,
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  webAccessibilityProps,
+  ...rest
+}) {
+  const resolvedModes = {
+    ...modes,
+    'Context3': 'Transaction Bubble'
+  };
+  const padding = Number(getVariableByName('transactionBubble/padding', resolvedModes)) || 16;
+  const radius = Number(getVariableByName('transactionBubble/radius', resolvedModes)) || 23;
+  const borderSize = Number(getVariableByName('transactionBubble/border/size', resolvedModes)) || 1;
+  const backgroundColor = getVariableByName('transactionBubble/background', resolvedModes) || '#ffffff';
+  const borderColor = getVariableByName('transactionBubble/border/color', resolvedModes) || '#e5e5e5';
+  const bubbleGap = Number(getVariableByName('transactionBubble/gap', resolvedModes)) || 8;
+  const wrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes)) || 8;
+  const descriptionColor = getVariableByName('transactionBubble/description/color', resolvedModes) || '#24262b';
+  const descriptionFontSize = Number(getVariableByName('transactionBubble/description/fontSize', resolvedModes)) || 14;
+  const descriptionLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', resolvedModes)) || 17;
+  const descriptionFontFamily = getVariableByName('transactionBubble/description/fontFamily', resolvedModes) || 'JioType Var';
+  const statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes)) || 4;
+  const containerStyle = {
+    padding,
+    borderRadius: radius,
+    borderWidth: borderSize,
+    borderColor,
+    backgroundColor
+  };
+  const descriptionStyle = {
+    color: descriptionColor,
+    fontSize: descriptionFontSize,
+    lineHeight: descriptionLineHeight,
+    fontFamily: descriptionFontFamily
+  };
+  const processedChildren = children ? cloneChildrenWithModes(React.Children.toArray(children), resolvedModes) : null;
+  const processedStatusSlot = statusSlot ? cloneChildrenWithModes(React.Children.toArray(statusSlot), resolvedModes) : null;
+  const defaultAccessibilityLabel = accessibilityLabel || `${description} • ${status}`;
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress,
+    disabled: false,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps
+  });
+  const rightColumn = processedStatusSlot || /*#__PURE__*/_jsxs(View, {
+    style: {
+      alignItems: 'flex-end',
+      justifyContent: 'flex-end',
+      gap: statusWrapGap
+    },
+    children: [/*#__PURE__*/_jsx(TransactionStatus, {
+      status: status,
+      date: date,
+      modes: resolvedModes
+    }), /*#__PURE__*/_jsx(NavArrow, {
+      direction: "Forward",
+      modes: resolvedModes
+    })]
+  });
+  const mainContent = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      gap: wrapGap
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        gap: bubbleGap
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: descriptionStyle,
+        numberOfLines: 1,
+        children: description
+      }), /*#__PURE__*/_jsx(MoneyValue, {
+        value: value,
+        currency: currency,
+        modes: resolvedModes
+      })]
+    }), rightColumn]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsxs(Pressable, {
+      onPress: onPress,
+      style: ({
+        pressed
+      }) => [containerStyle, style, pressed && {
+        opacity: 0.85
+      }],
+      accessibilityRole: "button",
+      accessibilityLabel: defaultAccessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      ...webProps,
+      ...rest,
+      children: [mainContent, processedChildren]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: defaultAccessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    children: [mainContent, processedChildren]
+  });
+}
+export default TransactionBubble;

package/lib/module/components/index.js

@@ -48,6 +48,7 @@ export { default as ThreadHero } from './ThreadHero/ThreadHero';
 export { Tooltip } from './Tooltip/Tooltip';
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
+export { default as TransactionBubble } from './TransactionBubble/TransactionBubble';
 export { default as UpiHandle } from './UpiHandle/UpiHandle';
 export { default as VStack } from './VStack/VStack';
 export { default as ChipGroup } from './ChipGroup/ChipGroup';

package/lib/module/design-tokens/JFSThemeProvider.js

@@ -1,7 +1,8 @@
 "use strict";
 
-import React, { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useMemo, useState, useEffect } from 'react';
 import { getVariableByName } from './figma-variables-resolver';
+import * as Font from 'expo-font';
 
 /**
  * Shape of the TokenContext
@@ -22,7 +23,6 @@ export const JFSThemeProvider = ({
   children
 }) => {
   const value = useMemo(() => {
-    // We bind the current modes to getVariableByName so consumers don't have to pass it
     const getVariable = name => getVariableByName(name, modes);
     return {
       modes,
@@ -53,4 +53,36 @@ export const useTokens = () => {
     };
   }
   return context;
-};
+};
+
+/**
+ * Returns the JFS font map. The TTF is encapsulated within the package at
+ * src/assets/fonts/JioType Var.ttf (included via package.json "files").
+ * Call this inside load functions to avoid top-level require errors if font missing.
+ */
+export const getJFSFonts = () => ({
+  'JioType Var': require('../assets/fonts/JioType Var.ttf')
+});
+
+/**
+ * Hook for loading JFS fonts using expo-font. This improves Android font support by explicitly registering
+ * the custom 'JioType Var' font (encapsulated in the package) via Font.loadAsync before components render.
+ * Without it, Android defaults to Roboto. Call at app root (e.g. before JFSThemeProvider). Returns loaded state.
+ * See getJFSFonts() for direct use with Font.loadAsync. Handles missing font gracefully for web/Storybook.
+ */
+export function useJFSFonts() {
+  const [fontsLoaded, setFontsLoaded] = useState(false);
+  useEffect(() => {
+    async function loadJFSFonts() {
+      try {
+        await Font.loadAsync(getJFSFonts());
+        setFontsLoaded(true);
+      } catch (error) {
+        console.warn('Failed to load JFS fonts (this is common in web/Storybook or if font file missing):', error);
+        setFontsLoaded(true);
+      }
+    }
+    loadJFSFonts();
+  }, []);
+  return fontsLoaded;
+}