jfs-components 0.1.28 → 0.1.32

package/lib/module/components/CategoryCard/CategoryCard.js

@@ -0,0 +1,258 @@
+"use strict";
+
+import React, { useCallback, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTextLayout } from '../../utils/react-utils';
+import { usePressableWebSupport } from '../../utils/web-platform-utils';
+import Badge from '../Badge/Badge';
+import Image from '../Image/Image';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CATEGORY_CARD_STATE = 'Category Card State';
+const BADGE_OVERLAP = 11;
+const DEFAULT_CARD_WIDTH = 60;
+
+// Default modes from the Figma CategoryCard component. Overridable via `modes`.
+const CATEGORY_CARD_DEFAULT_MODES = Object.freeze({
+  AppearanceBrand: 'Tertiary',
+  'Badge Size': 'Small',
+  Context4: 'Badge',
+  "Radius": "None"
+});
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+function resolveCategoryCardTokens(modes, active) {
+  const idleModes = {
+    ...modes,
+    [CATEGORY_CARD_STATE]: 'Idle'
+  };
+  const activeModes = {
+    ...modes,
+    [CATEGORY_CARD_STATE]: 'Active'
+  };
+  const resolvedModes = active ? activeModes : idleModes;
+  const gap = toNumber(getVariableByName('cardTab/gap', resolvedModes), 6);
+  const paddingHorizontal = toNumber(getVariableByName('cardTab/padding/horizontal', resolvedModes), 8);
+  const paddingVertical = toNumber(getVariableByName('cardTab/padding/vertical', resolvedModes), 8);
+  const radius = toNumber(getVariableByName('cardTab/radius', resolvedModes), 8);
+  const strokeWidth = toNumber(getVariableByName('cardTab/strokeWidth', resolvedModes), 1);
+  const strokeColor = getVariableByName('cardTab/stroke/color', resolvedModes) ?? '#f5f5f5';
+  const idleBackground = getVariableByName('cardTab/background/color', idleModes) ?? '#ffffff';
+  const activeBackground = getVariableByName('cardTab/background/color', activeModes) ?? '#f5f5f5';
+  const backgroundColor = active ? activeBackground : idleBackground;
+  const imageSize = toNumber(getVariableByName('cardTab/image/width', resolvedModes), 36);
+  const imageRadius = toNumber(getVariableByName('image/radius', resolvedModes), 0);
+  const fontFamily = getVariableByName('cardTab/label/fontFamily', resolvedModes) ?? 'JioType Var';
+  const fontSize = toNumber(getVariableByName('cardTab/label/fontSize', resolvedModes), 12);
+  const lineHeight = toNumber(getVariableByName('cardTab/label/lineHeight', resolvedModes), Math.round(fontSize * 1.3));
+  const fontWeight = toFontWeight(getVariableByName('cardTab/label/fontWeight', resolvedModes), '500');
+  const labelColor = getVariableByName('cardTab/label/color', resolvedModes) ?? '#000000';
+  return {
+    containerStyle: {
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor,
+      borderColor: strokeColor,
+      borderWidth: strokeWidth,
+      borderStyle: 'solid',
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingTop: paddingVertical,
+      paddingBottom: paddingVertical,
+      gap
+    },
+    labelStyle: {
+      color: labelColor,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      textAlign: 'center'
+    },
+    imageSize,
+    imageRadius
+  };
+}
+const pressedOverlayStyle = {
+  opacity: 0.85
+};
+const disabledOverlayStyle = {
+  opacity: 0.5
+};
+
+/**
+ * `CategoryCard` is a compact, tappable tile for category pickers and
+ * merchandising rails. It stacks a square image above a short label and can
+ * optionally show an overlapping badge at the top edge. Cards are typically
+ * laid out in a horizontal `ScrollView` or `HStack`.
+ *
+ * All visual values resolve through the `cardTab/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {CategoryCardProps} props
+ */
+function CategoryCard({
+  label = 'Popular',
+  imageSource,
+  imageSlot,
+  badge,
+  active = false,
+  width = DEFAULT_CARD_WIDTH,
+  disableTruncation,
+  singleLine,
+  onPress,
+  disabled = false,
+  modes: propModes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  testID,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...CATEGORY_CARD_DEFAULT_MODES,
+    ...propModes
+  }), [globalModes, propModes]);
+  const resolvedModes = useMemo(() => ({
+    ...modes,
+    [CATEGORY_CARD_STATE]: active ? 'Active' : 'Idle'
+  }), [modes, active]);
+  const tokens = useMemo(() => resolveCategoryCardTokens(resolvedModes, active), [resolvedModes, active]);
+  const {
+    style: labelLayoutStyle,
+    ...labelTruncation
+  } = useMemo(() => resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines: 1,
+    ellipsizeMode: 'tail'
+  }), [disableTruncation, singleLine]);
+  const processedImageSlot = useMemo(() => {
+    if (!imageSlot) return null;
+    const processed = cloneChildrenWithModes(imageSlot, resolvedModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [imageSlot, resolvedModes]);
+  const imageNode = processedImageSlot ?? (imageSource !== undefined ? /*#__PURE__*/_jsx(Image, {
+    imageSource: imageSource,
+    width: tokens.imageSize,
+    height: tokens.imageSize,
+    ratio: 1,
+    resizeMode: "cover",
+    borderRadius: tokens.imageRadius,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  }) : /*#__PURE__*/_jsx(Image, {
+    imageSource: "https://www.figma.com/api/mcp/asset/0ee34871-646f-4736-be06-22fb6c0a4eed",
+    width: tokens.imageSize,
+    height: tokens.imageSize,
+    ratio: 1,
+    resizeMode: "cover",
+    borderRadius: tokens.imageRadius,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  }));
+  const a11yLabel = accessibilityLabel ?? (badge ? `${label}, ${badge}` : label);
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: a11yLabel,
+    webAccessibilityProps
+  });
+  const badgeNode = badge ? /*#__PURE__*/_jsx(View, {
+    style: BADGE_ANCHOR,
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(Badge, {
+      label: badge,
+      modes: resolvedModes,
+      style: BADGE_CENTER_STYLE
+    })
+  }) : null;
+
+  // Truncation needs a width bound so the ellipsis engages. `singleLine`
+  // must NOT fill the content box — otherwise the text is pinned to the left
+  // padding edge and only grows rightward. Intrinsic width + centered
+  // alignment lets overflow expand equally on both sides.
+  const labelWidthStyle = singleLine ? LABEL_OVERFLOW_CENTER_STYLE : LABEL_FILL_STYLE;
+  const pressableStyle = useCallback(({
+    pressed
+  }) => [tokens.containerStyle, {
+    width
+  }, badge ? {
+    marginTop: BADGE_OVERLAP
+  } : null, disabled ? disabledOverlayStyle : null, pressed && !disabled ? pressedOverlayStyle : null, style], [tokens.containerStyle, width, badge, disabled, style]);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: a11yLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled,
+      selected: active,
+      ...accessibilityState
+    },
+    onPress: onPress,
+    disabled: disabled,
+    style: pressableStyle,
+    testID: testID,
+    ...webProps,
+    children: [badgeNode, imageNode, /*#__PURE__*/_jsx(Text, {
+      style: [tokens.labelStyle, labelWidthStyle, labelLayoutStyle, labelStyle],
+      ...labelTruncation,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: label
+    })]
+  });
+}
+const BADGE_ANCHOR = {
+  position: 'absolute',
+  top: -BADGE_OVERLAP,
+  left: 0,
+  right: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 1
+};
+const BADGE_CENTER_STYLE = {
+  alignSelf: 'center'
+};
+
+/** Lets the label fill the card width so the one-line ellipsis has a bound. */
+const LABEL_FILL_STYLE = {
+  width: '100%',
+  alignSelf: 'stretch'
+};
+
+/**
+ * Intrinsic width, horizontally centred. When the label is wider than the
+ * card it overflows left and right equally instead of growing only rightward
+ * from the padded content edge.
+ */
+const LABEL_OVERFLOW_CENTER_STYLE = {
+  alignSelf: 'center',
+  textAlign: 'center'
+};
+export default /*#__PURE__*/React.memo(CategoryCard);

package/lib/module/components/CompareTable/CompareTable.js

@@ -1,7 +1,7 @@
 "use strict";
 
-import React from 'react';
-import { View, Text, Pressable, Platform } from 'react-native';
+import React, { useCallback, useRef } from 'react';
+import { View, Text, Pressable, Platform, ScrollView } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Accordion from '../Accordion/Accordion';
@@ -106,7 +106,10 @@ function CompareTable({
   maxColumns = 4,
   modes = EMPTY_MODES,
   style,
-  disableTruncation
+  disableTruncation,
+  columnWidth,
+  stickyHeaders = true,
+  stickyHeaderLabel = true
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = getVariableByName('selectionCard/background/color', modes) ?? '#ffffff';
@@ -163,6 +166,95 @@ function CompareTable({
   const showAddCard = onAddColumn != null && columnCount < maxColumns;
   /** Grid columns shared by the selection-card row and every table row. */
   const gridColumnCount = columnCount + (showAddCard ? 1 : 0);
+  const showCardsRow = columnCount > 0 || showAddCard;
+
+  // --- fixed-width scroll mode -------------------------------------------
+  // `columnWidth` opts the component into scroll mode (see prop doc). In that
+  // mode the cards row and each section's table body are independent
+  // horizontal ScrollViews; their scroll events are chained so they move in
+  // lockstep, and the cards row pins to the top on the vertical axis.
+  const useFixedWidth = columnWidth != null;
+  /** Total scrollable content width shared by every horizontal surface. */
+  const contentWidth = useFixedWidth ? gridColumnCount * columnWidth : 0;
+  const cardsScrollRef = useRef(null);
+  const bodyScrollRefs = useRef(new Map());
+  // Stable per-section ref-callback instances so React doesn't detach/reattach
+  // on every render (which would churn the map and re-fire scrollTo).
+  const bodyRefCallbacks = useRef(new Map());
+  /** Tracks which ScrollView the user is currently dragging. Only the
+   *  actively-dragged ScrollView drives horizontal sync — programmatic
+   *  scrollTo echoes from synced peers are ignored, eliminating jitter. */
+  const draggingSource = useRef(null);
+  const lastSyncX = useRef(0);
+  const syncOthers = useCallback((source, x) => {
+    if (source !== 'cards' && cardsScrollRef.current) {
+      cardsScrollRef.current.scrollTo({
+        x,
+        animated: false
+      });
+    }
+    bodyScrollRefs.current.forEach((ref, idx) => {
+      if (source === 'cards' || idx !== source) {
+        ref.scrollTo({
+          x,
+          animated: false
+        });
+      }
+    });
+  }, []);
+  const onScrollBeginDrag = useCallback(source => () => {
+    draggingSource.current = source;
+  }, []);
+  const onScrollEndDrag = useCallback(source => e => {
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
+  const onMomentumScrollEnd = useCallback(source => e => {
+    if (draggingSource.current === source) {
+      draggingSource.current = null;
+    }
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
+
+  /** Real-time scroll sync: only the actively-dragged ScrollView drives
+   *  sync on native — echoed onScroll events from programmatic scrollTo
+   *  on other ScrollViews are ignored because draggingSource won't match.
+   *  On web, onScrollBeginDrag never fires for mouse/trackpad, so skip
+   *  the guard and rely on the lastSyncX rounded-value check instead. */
+  const onScroll = useCallback(source => e => {
+    if (Platform.OS !== 'web' && draggingSource.current !== source) return;
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
+  const getBodyRefCallback = useCallback(idx => {
+    let cb = bodyRefCallbacks.current.get(idx);
+    if (!cb) {
+      cb = ref => {
+        if (ref) {
+          bodyScrollRefs.current.set(idx, ref);
+          // Bring a freshly-expanded section's body into sync with
+          // the rest of the surfaces.
+          if (lastSyncX.current > 0) {
+            ref.scrollTo({
+              x: lastSyncX.current,
+              animated: false
+            });
+          }
+        } else {
+          bodyScrollRefs.current.delete(idx);
+        }
+      };
+      bodyRefCallbacks.current.set(idx, cb);
+    }
+    return cb;
+  }, []);
   const cardLabelStyle = {
     ...NO_WRAP_TEXT,
     color: cardLabelColor,
@@ -193,8 +285,12 @@ function CompareTable({
     fontWeight: toWeight(cellFontWeight)
   };
   const cardStyle = {
-    flex: 1,
-    minWidth: 0,
+    ...(useFixedWidth ? {
+      width: columnWidth
+    } : {
+      flex: 1,
+      minWidth: 0
+    }),
     minHeight: 147,
     backgroundColor: cardBg,
     borderRadius: cardRadius,
@@ -313,6 +409,7 @@ function CompareTable({
     return /*#__PURE__*/_jsx(Table.Cell, {
       modes: modes,
       flex: 1,
+      width: useFixedWidth ? columnWidth : undefined,
       align: "left",
       isLastColumn: isLastCol,
       isLastRow: isLastRow,
@@ -366,31 +463,155 @@ function CompareTable({
       })
     })]
   });
-  return /*#__PURE__*/_jsxs(View, {
-    style: [{
-      width: '100%',
-      backgroundColor: cardBg,
-      borderWidth: 1,
-      borderColor: '#e8e8e8',
-      overflow: 'hidden'
-    }, style],
-    children: [(columnCount > 0 || showAddCard) && /*#__PURE__*/_jsxs(View, {
+  const renderHeaderContent = section => section.header != null ? /*#__PURE__*/_jsx(View, {
+    style: {
+      backgroundColor: headerBg,
+      paddingHorizontal: headerPaddingH,
+      paddingVertical: headerPaddingV,
+      borderBottomWidth: cellBorderSize,
+      borderBottomColor: cellBorderColor
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      style: headerTextStyle,
+      children: section.header
+    })
+  }) : null;
+  const renderBodyContent = (section, index) => /*#__PURE__*/_jsx(ScrollView, {
+    ref: getBodyRefCallback(index),
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    onScroll: onScroll(index),
+    onScrollBeginDrag: onScrollBeginDrag(index),
+    onScrollEndDrag: onScrollEndDrag(index),
+    onMomentumScrollEnd: onMomentumScrollEnd(index),
+    children: /*#__PURE__*/_jsx(View, {
       style: {
-        flexDirection: 'row',
-        width: '100%'
+        width: contentWidth
       },
-      children: [columns.map(renderCard), showAddCard && renderAddCard()]
-    }), /*#__PURE__*/_jsx(View, {
+      children: section.rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === section.rows.length - 1;
+        return /*#__PURE__*/_jsxs(View, {
+          style: {
+            flexDirection: 'row',
+            width: '100%'
+          },
+          children: [Array.from({
+            length: columnCount
+          }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
+        }, row.key ?? rowIndex);
+      })
+    })
+  });
+  const outerStyle = {
+    width: '100%',
+    backgroundColor: cardBg,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    overflow: 'hidden'
+  };
+
+  // --- flex mode (columnWidth omitted): original behaviour, unchanged -------
+  if (!useFixedWidth) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [outerStyle, style],
+      children: [showCardsRow && /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          width: '100%'
+        },
+        children: [columns.map(renderCard), showAddCard && renderAddCard()]
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          width: '100%'
+        },
+        children: sections.map((section, index) => /*#__PURE__*/_jsx(Accordion, {
+          title: section.title,
+          defaultExpanded: section.defaultExpanded ?? index === 0,
+          modes: modes,
+          children: renderTable(section)
+        }, section.key ?? section.title ?? index))
+      })]
+    });
+  }
+
+  // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
+  // Build children and stickyHeaderIndices for the vertical ScrollView.
+  // When stickyHeaders is on, section headers are injected as direct children
+  // so React Native's stickyHeaderIndices can pin them with stacking.
+  const scrollChildren = [];
+  const stickyIndices = [];
+  if (showCardsRow) {
+    stickyIndices.push(scrollChildren.length);
+    scrollChildren.push(/*#__PURE__*/_jsx(ScrollView, {
+      ref: cardsScrollRef,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      onScroll: onScroll('cards'),
+      onScrollBeginDrag: onScrollBeginDrag('cards'),
+      onScrollEndDrag: onScrollEndDrag('cards'),
+      onMomentumScrollEnd: onMomentumScrollEnd('cards'),
+      children: /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          width: contentWidth
+        },
+        children: [columns.map(renderCard), showAddCard && renderAddCard()]
+      })
+    }, "cards-row"));
+  }
+  sections.forEach((section, index) => {
+    const sectionKey = section.key ?? section.title ?? index;
+    const headerContent = renderHeaderContent(section);
+    if (stickyHeaders && headerContent != null) {
+      stickyIndices.push(scrollChildren.length);
+      scrollChildren.push(/*#__PURE__*/_jsx(View, {
+        style: {
+          width: '100%'
+        },
+        children: stickyHeaderLabel ? headerContent : /*#__PURE__*/_jsx(ScrollView, {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          children: /*#__PURE__*/_jsx(View, {
+            style: {
+              width: contentWidth
+            },
+            children: headerContent
+          })
+        })
+      }, `sticky-header-${sectionKey}`));
+    }
+    scrollChildren.push(/*#__PURE__*/_jsxs(Accordion, {
+      title: section.title,
+      defaultExpanded: section.defaultExpanded ?? index === 0,
+      modes: modes,
+      children: [!stickyHeaders && headerContent != null && (stickyHeaderLabel ? headerContent : /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            width: contentWidth
+          },
+          children: headerContent
+        })
+      })), renderBodyContent(section, index)]
+    }, sectionKey));
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [outerStyle, style, {
+      flexDirection: 'column',
+      flex: 1
+    }],
+    children: /*#__PURE__*/_jsx(ScrollView, {
       style: {
-        width: '100%'
+        width: '100%',
+        flex: 1
       },
-      children: sections.map((section, index) => /*#__PURE__*/_jsx(Accordion, {
-        title: section.title,
-        defaultExpanded: section.defaultExpanded ?? index === 0,
-        modes: modes,
-        children: renderTable(section)
-      }, section.key ?? section.title ?? index))
-    })]
+      stickyHeaderIndices: stickyIndices,
+      showsVerticalScrollIndicator: false,
+      directionalLockEnabled: true,
+      children: scrollChildren
+    })
   });
 }
 export default CompareTable;