jfs-components 0.1.8 → 0.1.12

package/lib/module/components/Table/Table.js

@@ -0,0 +1,315 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable, ScrollView, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+
+/* -------------------------------------------------------------------------------------------------
+ * Shared types & token resolution
+ * -----------------------------------------------------------------------------------------------*/
+
+/** Resolved styling for a header cell and a body cell, derived from design tokens. */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const toWeight = w => typeof w === 'number' ? `${w}` : w;
+
+/**
+ * Resolve every token the table family needs in one place. Sub-components call
+ * this with their cascaded `modes` so they render correctly both inside a
+ * `Table` and when used standalone. Fallbacks mirror the Figma node values
+ * (`tableCell/*`, `tableHeader/*`) so the component is faithful even before the
+ * tokens are published to the local store.
+ */
+function resolveTableTokens(modes) {
+  const headerFontFamily = getVariableByName('tableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontSize = getVariableByName('tableHeader/label/fontsize', modes) ?? 14;
+  const headerFontWeight = getVariableByName('tableHeader/label/fontweight', modes) ?? 600;
+  const cellFontFamily = getVariableByName('tableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontSize = getVariableByName('tableCell/label/fontsize', modes) ?? 14;
+  const cellFontWeight = getVariableByName('tableCell/label/fontweight', modes) ?? 400;
+  return {
+    headerBg: getVariableByName('tableHeader/background/color', modes) ?? '#f5f5f5',
+    headerPaddingH: getVariableByName('tableHeader/padding/horizontal', modes) ?? 12,
+    headerPaddingV: getVariableByName('tableHeader/padding/vertical', modes) ?? 12,
+    headerText: {
+      color: getVariableByName('tableHeader/label/color', modes) ?? '#000000',
+      fontFamily: headerFontFamily,
+      fontSize: headerFontSize,
+      fontWeight: toWeight(headerFontWeight),
+      lineHeight: 20
+    },
+    cellBg: getVariableByName('tableCell/background/color', modes) ?? '#ffffff',
+    cellPaddingH: getVariableByName('tableCell/padding/horizontal', modes) ?? 12,
+    cellPaddingV: getVariableByName('tableCell/padding/vertical', modes) ?? 12,
+    cellText: {
+      color: getVariableByName('tableCell/label/color', modes) ?? '#000000',
+      fontFamily: cellFontFamily,
+      fontSize: cellFontSize,
+      fontWeight: toWeight(cellFontWeight),
+      lineHeight: 20
+    },
+    borderColor: getVariableByName('tableCell/border/color', modes) ?? '#eeeeee',
+    borderSize: getVariableByName('tableCell/border/size', modes) ?? 1
+  };
+}
+const alignToJustify = align => align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start';
+
+/** Renders text children through the resolved label style; passes elements through untouched. */
+function renderCellContent(children, textStyle, align, modes) {
+  if (children == null || children === false) return null;
+  if (typeof children === 'string' || typeof children === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: [textStyle, {
+        textAlign: align
+      }],
+      children: children
+    });
+  }
+  return cloneChildrenWithModes(children, modes);
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Cell — body cell (Figma `table-cell`, node 603:23)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * A single body cell. White background with a bottom + right divider, matching
+ * the Figma `table-cell` sub-component. String/number children are rendered
+ * with the token label style; any element is rendered as-is.
+ */
+function TableCell({
+  children,
+  align = 'left',
+  width,
+  flex = 1,
+  isLastColumn = false,
+  isLastRow = false,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      backgroundColor: t.cellBg,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: alignToJustify(align),
+      paddingHorizontal: t.cellPaddingH,
+      paddingVertical: t.cellPaddingV,
+      borderColor: t.borderColor,
+      borderBottomWidth: isLastRow ? 0 : t.borderSize,
+      borderRightWidth: isLastColumn ? 0 : t.borderSize,
+      ...(width != null ? {
+        width
+      } : {
+        flex,
+        minWidth: 0
+      })
+    }, style],
+    children: renderCellContent(children, t.cellText, align, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.HeaderCell — header cell (Figma `table header wrap`, node 603:21)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * A single header cell. Muted background with the bold token label style,
+ * matching the Figma `table header wrap` sub-component. Header cells carry no
+ * dividers; the header row draws a single bottom divider beneath them.
+ */
+function TableHeaderCell({
+  children,
+  align = 'left',
+  width,
+  flex = 1,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      backgroundColor: t.headerBg,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: alignToJustify(align),
+      paddingHorizontal: t.headerPaddingH,
+      paddingVertical: t.headerPaddingV,
+      ...(width != null ? {
+        width
+      } : {
+        flex,
+        minWidth: 0
+      })
+    }, style],
+    children: renderCellContent(children, t.headerText, align, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Header — row of header cells with a bottom divider
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableHeader({
+  children,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const t = resolveTableTokens(modes);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      flexDirection: 'row',
+      width: '100%',
+      borderBottomWidth: t.borderSize,
+      borderBottomColor: t.borderColor
+    }, style],
+    children: cloneChildrenWithModes(children, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Row — row of body cells
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableRow({
+  children,
+  onPress,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const rowStyle = {
+    flexDirection: 'row',
+    width: '100%'
+  };
+  const content = cloneChildrenWithModes(children, modes);
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      accessibilityRole: "button",
+      style: ({
+        pressed
+      }) => [rowStyle, pressed ? {
+        opacity: 0.6
+      } : null, style],
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [rowStyle, style],
+    children: content
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table.Body — column container for rows
+ * -----------------------------------------------------------------------------------------------*/
+
+function TableBody({
+  children,
+  modes = EMPTY_MODES,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width: '100%'
+    }, style],
+    children: cloneChildrenWithModes(children, modes)
+  });
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Table — root (Figma `Table`, node 5732:3710)
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Column definition for the data-driven `Table` API. `T` is the shape of one
+ * row record.
+ */
+
+/**
+ * Table renders structured rows and columns. It supports two complementary
+ * usage styles that share the same token-driven styling:
+ *
+ * 1. **Data-driven** (recommended): pass `columns` + `data`. The header and body
+ *    are built for you, columns stay aligned, and per-column `align`/`width`/
+ *    `flex`/`render` give full control.
+ *
+ * 2. **Composition**: pass `Table.Header` / `Table.Body` / `Table.Row` /
+ *    `Table.Cell` / `Table.HeaderCell` as children for bespoke layouts. These
+ *    sub-components are also exported standalone.
+ *
+ * Implementation of Figma node `5732:3710` (`Table`) with sub-components
+ * `603:23` (`table-cell`) and `603:21` (`table header wrap`).
+ *
+ * @component
+ */
+function Table({
+  columns,
+  data,
+  children,
+  showHeader = true,
+  getRowKey,
+  onRowPress,
+  scrollable = false,
+  accessibilityLabel,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const isComposition = children != null;
+  const body = isComposition ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showHeader && columns && columns.length > 0 && /*#__PURE__*/_jsx(TableHeader, {
+      modes: modes,
+      children: columns.map(col => /*#__PURE__*/_jsx(TableHeaderCell, {
+        align: col.headerAlign ?? col.align ?? 'left',
+        width: col.width,
+        flex: col.flex ?? 1,
+        modes: modes,
+        children: col.header ?? col.key
+      }, col.key))
+    }), columns && data && data.length > 0 && /*#__PURE__*/_jsx(TableBody, {
+      modes: modes,
+      children: data.map((row, rowIndex) => {
+        const isLastRow = rowIndex === data.length - 1;
+        return /*#__PURE__*/_jsx(TableRow, {
+          onPress: onRowPress ? () => onRowPress(row, rowIndex) : undefined,
+          modes: modes,
+          children: columns.map((col, colIndex) => /*#__PURE__*/_jsx(TableCell, {
+            align: col.align ?? 'left',
+            width: col.width,
+            flex: col.flex ?? 1,
+            isLastColumn: colIndex === columns.length - 1,
+            isLastRow: isLastRow,
+            modes: modes,
+            children: col.render ? col.render(row, rowIndex) : row[col.key]
+          }, col.key))
+        }, getRowKey?.(row, rowIndex) ?? rowIndex);
+      })
+    })]
+  });
+  const container = /*#__PURE__*/_jsx(View, {
+    accessibilityRole: Platform.OS === 'web' ? 'table' : undefined,
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      overflow: 'hidden'
+    }, !scrollable && {
+      width: '100%'
+    }, style],
+    children: body
+  });
+  if (scrollable) {
+    return /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: container
+    });
+  }
+  return container;
+}
+Table.Header = TableHeader;
+Table.HeaderCell = TableHeaderCell;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+export { TableHeader, TableHeaderCell, TableBody, TableRow, TableCell };
+export default Table;

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

@@ -3,7 +3,7 @@
 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 { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,6 +18,7 @@ function Text({
   modes = EMPTY_MODES,
   style,
   numberOfLines,
+  disableTruncation,
   loading,
   skeletonWidth,
   skeletonLines
@@ -70,7 +71,7 @@ function Text({
   const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Korem ipsum ';
   return /*#__PURE__*/_jsx(RNText, {
     style: [textStyle, style],
-    numberOfLines: numberOfLines,
+    ...resolveTruncation(disableTruncation, numberOfLines),
     children: content
   });
 }

package/lib/module/components/TextInput/TextInput.js

@@ -166,7 +166,15 @@ const TextInputBase = /*#__PURE__*/forwardRef(function TextInput({
     flex: 1,
     color: textColor,
     fontSize,
-    lineHeight,
+    // iOS-only quirk: a single-line RNTextInput with an explicit `lineHeight`
+    // larger than `fontSize` puts all the extra space ABOVE the glyphs, so the
+    // text/placeholder sits below center (iOS native font-metrics bug — see
+    // facebook/react-native#39145 / #28012). The container centers via
+    // `alignItems: 'center'` + `minHeight`, so omit lineHeight on iOS
+    // (UITextField centers natively) and keep it on Android/Web where it's fine.
+    ...(Platform.OS === 'ios' ? null : {
+      lineHeight
+    }),
     fontFamily,
     fontWeight,
     padding: 0,

package/lib/module/components/TextSegment/TextSegment.js

@@ -3,7 +3,7 @@
 import React, { useMemo } from 'react';
 import { Text as RNText } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 
 /**
  * A single coloured run inside a {@link TextSegment}. Each run can carry its own
@@ -73,6 +73,7 @@ function TextSegment({
   children,
   textAlign = 'Left',
   numberOfLines,
+  disableTruncation,
   modes = EMPTY_MODES,
   style
 }) {
@@ -106,7 +107,7 @@ function TextSegment({
   const content = hasChildren ? cloneChildrenWithModes(children, modes) : renderedSegments;
   return /*#__PURE__*/_jsx(RNText, {
     style: [baseStyle, style],
-    numberOfLines: numberOfLines,
+    ...resolveTruncation(disableTruncation, numberOfLines),
     children: content
   });
 }

package/lib/module/components/ThreadHero/ThreadHero.js

@@ -3,7 +3,7 @@
 import React, { isValidElement, cloneElement } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
@@ -14,7 +14,8 @@ export default function ThreadHero({
   caption,
   renderAvatar,
   modes = EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   // Container Gaps
   const containerGap = Number(getVariableByName('threadHero/gap', modes)) || 8;
@@ -95,14 +96,12 @@ export default function ThreadHero({
         children: title
       }) : null, subtitle ? /*#__PURE__*/_jsx(Text, {
         style: subtitleStyle,
-        numberOfLines: 1,
-        ellipsizeMode: "tail",
+        ...resolveTruncation(disableTruncation, 1, 'tail'),
         children: subtitle
       }) : null]
     }), caption ? /*#__PURE__*/_jsx(Text, {
       style: captionStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...resolveTruncation(disableTruncation, 1, 'tail'),
       children: caption
     }) : null]
   });

package/lib/module/components/Title/Title.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } 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 { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
@@ -19,6 +19,7 @@ function Title({
   textStyle,
   subtitleStyle,
   numberOfLines,
+  disableTruncation,
   accessibilityLabel,
   accessibilityHint,
   ...rest
@@ -88,7 +89,7 @@ function Title({
     ...rest,
     children: [/*#__PURE__*/_jsx(Text, {
       style: [titleTextStyle, textStyle],
-      numberOfLines: numberOfLines !== undefined ? numberOfLines : 1,
+      ...resolveTruncation(disableTruncation, numberOfLines !== undefined ? numberOfLines : 1),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: title

package/lib/module/components/Toast/Toast.js

@@ -5,7 +5,7 @@ import { StyleSheet, Text } from 'react-native';
 import Animated, { FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { closeToast } from './useToast';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ANIMATION_DURATION = 250;
 function Toast({
@@ -15,7 +15,8 @@ function Toast({
   onClose,
   modes = EMPTY_MODES,
   placement = 'bottom',
-  style
+  style,
+  disableTruncation
 }) {
   const timerRef = useRef(null);
   useEffect(() => {
@@ -73,7 +74,7 @@ function Toast({
     accessibilityLiveRegion: "assertive",
     children: /*#__PURE__*/_jsx(Text, {
       style: textStyle,
-      numberOfLines: 2,
+      ...resolveTruncation(disableTruncation, 2),
       children: title
     })
   });

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

@@ -6,7 +6,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import MoneyValue from '../MoneyValue/MoneyValue';
 import TransactionStatus from '../TransactionStatus/TransactionStatus';
 import NavArrow from '../NavArrow/NavArrow';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -40,6 +40,7 @@ function TransactionBubble({
   accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const resolvedModes = {
@@ -109,7 +110,7 @@ function TransactionBubble({
       },
       children: [/*#__PURE__*/_jsx(Text, {
         style: descriptionStyle,
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: description
       }), /*#__PURE__*/_jsx(MoneyValue, {
         value: value,

package/lib/module/components/TransactionStatus/TransactionStatus.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 
 // --- Internal Icon Component ---
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,7 +37,8 @@ export default function TransactionStatus({
   status = 'Expired',
   date = '20 Mar 2025',
   modes = EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4;
   // Using 'transactionStatus' tokens for text
@@ -70,7 +71,7 @@ export default function TransactionStatus({
       modes: modes
     }), /*#__PURE__*/_jsxs(Text, {
       style: textStyle,
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: [status, " \xB7 ", date]
     })]
   });

package/lib/module/components/UpiHandle/UpiHandle.js

@@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Pressable, View, Text, Platform } 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 { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -107,6 +107,7 @@ function UpiHandle({
   onPress,
   onClick,
   disabled,
+  disableTruncation,
   // accessibilityLabel is accepted on the type for API back-compat; the
   // wrapper renders `accessibilityLabel={undefined}` because the inner Text
   // already carries the label.
@@ -169,8 +170,7 @@ function UpiHandle({
       })
     }), /*#__PURE__*/_jsx(Text, {
       style: tokens.labelStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...resolveTruncation(disableTruncation, 1, 'tail'),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label

package/lib/module/components/index.js

@@ -73,6 +73,7 @@ export { default as Screen } from './Screen/Screen';
 export { default as Section } from './Section/Section';
 export { default as Slider } from './Slider/Slider';
 export { default as Slot } from './Slot/Slot';
+export { default as Stack } from './Stack/Stack';
 export { default as Spinner } from './Spinner/Spinner';
 export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
@@ -127,6 +128,7 @@ export { default as Popup } from './Popup/Popup';
 export { default as PortfolioHero } from './PortfolioHero/PortfolioHero';
 export { default as PlanComparisonCard } from './PlanComparisonCard/PlanComparisonCard';
 export { default as CompareTable } from './CompareTable/CompareTable';
+export { default as Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from './Table/Table';
 export { default as PoweredByLabel } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel } from './ProductLabel/ProductLabel';
 export { default as ProductMerchandisingCard } from './ProductMerchandisingCard/ProductMerchandisingCard';