jfs-components 0.0.77 → 0.0.79

package/src/components/PlanComparisonCard/PlanComparisonCard.tsx

@@ -0,0 +1,426 @@
+import React, { useState, useCallback } from 'react';
+import {
+    View,
+    Text,
+    Pressable,
+    Platform,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+    type LayoutChangeEvent,
+} from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Icon from '../../icons/Icon';
+
+/**
+ * A single plan column header (the label column has no header of its own).
+ */
+export type PlanComparisonColumn = {
+    /** Header text for the plan column. */
+    label: string;
+    /**
+     * Render the header in the brand accent colour (gold) — use it to
+     * highlight the recommended / upsell plan.
+     * @default false
+     */
+    brand?: boolean;
+};
+
+/**
+ * Value rendered inside a plan cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React node → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+export type PlanComparisonCellValue =
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+    | React.ReactElement;
+
+export type PlanComparisonRow = {
+    /** Feature label shown in the first (left) column. */
+    label: string;
+    /**
+     * Show an info icon after the label. When `onInfoPress` is provided the
+     * icon becomes tappable; otherwise it is purely decorative.
+     */
+    showInfo?: boolean;
+    /** Handler for the info icon. Implies `showInfo`. */
+    onInfoPress?: () => void;
+    /**
+     * One value per plan column, in the same order as `columns`. See
+     * {@link PlanComparisonCellValue} for how each value is rendered.
+     */
+    values: PlanComparisonCellValue[];
+    /** Stable key. Falls back to the label / index. */
+    key?: React.Key;
+};
+
+export type PlanComparisonCardProps = {
+    /**
+     * Plan column headers (excludes the leading label column). The order here
+     * maps 1:1 to each row's `values` array.
+     */
+    columns?: PlanComparisonColumn[];
+    /** Feature rows compared across the plan columns. */
+    rows?: PlanComparisonRow[];
+    /**
+     * Minimum flex-grow on the label column when the table is given extra
+     * horizontal space. Plan columns always size to their content and never
+     * shrink below it.
+     * @default 0
+     */
+    labelColumnFlex?: number;
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Record<string, any>;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+
+const DEFAULT_COLUMNS: PlanComparisonColumn[] = [
+    { label: 'Your plan' },
+    { label: 'JioFinance+', brand: true },
+];
+
+const DEFAULT_ROWS: PlanComparisonRow[] = [
+    { label: 'JioPoints multiplier', values: ['1x', '1.25x'] },
+    { label: 'Cashback', showInfo: true, values: [false, 'Upto ₹5000'] },
+    { label: 'Bonus JioGold', showInfo: true, values: [false, '1%'] },
+];
+
+/**
+ * PlanComparisonCard renders a compact comparison table that pits the user's
+ * current plan against one or more alternative plans across a set of feature
+ * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
+ *
+ * The leading column holds feature labels (with an optional info icon); every
+ * other column maps to a plan in `columns`. Each cell value can be plain text,
+ * a "not available" cross (`false`), or any custom React node.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PlanComparisonCard
+ *   columns={[{ label: 'Your plan' }, { label: 'JioFinance+', brand: true }]}
+ *   rows={[
+ *     { label: 'JioPoints multiplier', values: ['1x', '1.25x'] },
+ *     { label: 'Cashback', showInfo: true, values: [false, 'Upto ₹5000'] },
+ *   ]}
+ * />
+ * ```
+ */
+/** Keeps every text layer on a single line; columns grow to fit content. */
+const NO_WRAP_TEXT: TextStyle = {
+    flexShrink: 0,
+    ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as const } : {}),
+};
+
+function PlanComparisonCard({
+    columns = DEFAULT_COLUMNS,
+    rows = DEFAULT_ROWS,
+    labelColumnFlex = 0,
+    modes = EMPTY_MODES,
+    style,
+}: PlanComparisonCardProps) {
+    /** Natural widths from header labels (plan columns only). */
+    const [headerWidths, setHeaderWidths] = useState<(number | undefined)[]>([]);
+    /** Natural widths from table body columns. */
+    const [bodyWidths, setBodyWidths] = useState<(number | undefined)[]>([]);
+
+    const setMeasuredWidth = useCallback(
+        (
+            setter: React.Dispatch<React.SetStateAction<(number | undefined)[]>>,
+            index: number,
+            width: number,
+        ) => {
+            setter((prev) => {
+                if (prev[index] === width) return prev;
+                const next = [...prev];
+                next[index] = width;
+                return next;
+            });
+        },
+        [],
+    );
+
+    const onHeaderColumnLayout = useCallback(
+        (index: number, event: LayoutChangeEvent) => {
+            setMeasuredWidth(setHeaderWidths, index, event.nativeEvent.layout.width);
+        },
+        [setMeasuredWidth],
+    );
+
+    const onBodyColumnLayout = useCallback(
+        (index: number, event: LayoutChangeEvent) => {
+            setMeasuredWidth(setBodyWidths, index, event.nativeEvent.layout.width);
+        },
+        [setMeasuredWidth],
+    );
+
+    /**
+     * Shared width for header + body cells in a column (max of natural header
+     * label vs body content). No columnGap between columns — gaps would shift
+     * headers relative to the flush table grid below.
+     */
+    const columnWidthStyle = (index: number): ViewStyle => {
+        const width = Math.max(headerWidths[index] ?? 0, bodyWidths[index] ?? 0);
+        if (width > 0) {
+            return { width, minWidth: width, flexShrink: 0, flexGrow: 0 };
+        }
+        return { flexShrink: 0, flexGrow: 0 };
+    };
+
+    // Container
+    const gap = (getVariableByName('planComparisonCard/gap', modes) as number) ?? 16;
+
+    // Header
+    const headerFg = (getVariableByName('planComparisonCard/header/fg', modes) as string) ?? '#ffffff';
+    const headerBrandFg = (getVariableByName('planComparisonCard/header/brand/fg', modes) as string) ?? '#cea15a';
+    const headerFontSize = (getVariableByName('planComparisonCard/header/fontSize', modes) as number) ?? 14;
+    const headerFontFamily = (getVariableByName('planComparisonCard/header/fontFamily', modes) as string) ?? 'JioType Var';
+    const headerLineHeight = (getVariableByName('planComparisonCard/header/lineHeight', modes) as number) ?? 18;
+    const headerFontWeight = (getVariableByName('planComparisonCard/header/fontWeight', modes) as number | string) ?? '500';
+
+    // Table
+    const tableBackground = (getVariableByName('planComparisonCard/tableRow/background', modes) as string) ?? '#141414';
+    const tableRadius = (getVariableByName('planComparisonCard/tableRow/radius', modes) as number) ?? 16;
+    const tableBorderSize = (getVariableByName('planComparisonCard/tableRow/border/size', modes) as number) ?? 1;
+    const tableBorderColor = (getVariableByName('planComparisonCard/tableRow/border/color', modes) as string) ?? '#1e1a14';
+
+    // Cell
+    const cellPadding = (getVariableByName('planComparisonCard/tableCell/padding', modes) as number) ?? 12;
+    const cellGap = (getVariableByName('planComparisonCard/tableCell/gap', modes) as number) ?? 2;
+    const cellMinHeight = (getVariableByName('planComparisonCard/tableCell/height', modes) as number) ?? 46;
+    const cellBorderSize = (getVariableByName('planComparisonCard/tableCell/border/size', modes) as number) ?? 1;
+    const cellBorderColor = (getVariableByName('planComparisonCard/tableCell/border/color', modes) as string) ?? '#1e1a14';
+
+    // Cell label
+    const labelColor = (getVariableByName('planComparisonCard/tableCell/label/color', modes) as string) ?? '#ffffff';
+    const labelDisabledColor = (getVariableByName('planComparisonCard/tableCell/label/disabled/color', modes) as string) ?? '#91949c';
+    const labelFontSize = (getVariableByName('planComparisonCard/tableCell/label/fontSize', modes) as number) ?? 12;
+    const labelFontFamily = (getVariableByName('planComparisonCard/tableCell/label/fontFamily', modes) as string) ?? 'JioType Var';
+    const labelLineHeight = (getVariableByName('planComparisonCard/tableCell/label/lineHeight', modes) as number) ?? 16;
+    const labelFontWeight = (getVariableByName('planComparisonCard/tableCell/label/fontWeight', modes) as number | string) ?? '400';
+
+    // Cell value
+    const valueColor = (getVariableByName('planComparisonCard/tableCell/value/color', modes) as string) ?? '#ffffff';
+    const valueFontSize = (getVariableByName('planComparisonCard/tableCell/value/fontSize', modes) as number) ?? 12;
+    const valueFontFamily = (getVariableByName('planComparisonCard/tableCell/value/fontFamily', modes) as string) ?? 'JioType Var';
+    const valueLineHeight = (getVariableByName('planComparisonCard/tableCell/value/lineHeight', modes) as number) ?? 16;
+    const valueFontWeight = (getVariableByName('planComparisonCard/tableCell/value/fontWeight', modes) as number | string) ?? '500';
+
+    // Icon
+    const iconColor = (getVariableByName('planComparisonCard/icon/color', modes) as string) ?? '#ffffff';
+    const iconSize = (getVariableByName('planComparisonCard/icon/size', modes) as number) ?? 16;
+
+    const toWeight = (w: number | string) => (typeof w === 'number' ? `${w}` : w) as TextStyle['fontWeight'];
+
+    const headerTextStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        fontFamily: headerFontFamily,
+        fontSize: headerFontSize,
+        lineHeight: headerLineHeight,
+        fontWeight: toWeight(headerFontWeight),
+        textAlign: 'center',
+    };
+
+    const labelTextStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        color: labelColor,
+        fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
+        lineHeight: labelLineHeight,
+        fontWeight: toWeight(labelFontWeight),
+    };
+
+    const valueTextStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        color: valueColor,
+        fontFamily: valueFontFamily,
+        fontSize: valueFontSize,
+        lineHeight: valueLineHeight,
+        fontWeight: toWeight(valueFontWeight),
+        textAlign: 'center',
+    };
+
+    const planHeaderColumnStyle: ViewStyle = {
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+
+    const renderValue = (value: PlanComparisonCellValue, cellKey: React.Key) => {
+        // "Not available" → muted cross icon.
+        if (value === false) {
+            return (
+                <Icon
+                    key={cellKey}
+                    name="ic_close"
+                    size={iconSize}
+                    color={labelDisabledColor}
+                />
+            );
+        }
+        // Empty cell.
+        if (value === null || value === undefined || value === true) {
+            return null;
+        }
+        // Text content.
+        if (typeof value === 'string' || typeof value === 'number') {
+            return (
+                <Text key={cellKey} style={valueTextStyle}>
+                    {value}
+                </Text>
+            );
+        }
+        // Custom node — forward modes so themed children stay in sync.
+        return cloneChildrenWithModes(value, modes);
+    };
+
+    const labelCellStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: cellGap,
+        padding: cellPadding,
+        minHeight: cellMinHeight,
+        flexShrink: 0,
+    };
+
+    const valueCellStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: cellPadding,
+        minHeight: cellMinHeight,
+        flexShrink: 0,
+    };
+
+    return (
+        <View style={[{ gap, alignSelf: 'flex-start' }, style]}>
+            {/* Headers above table — same column grid as body (no columnGap) */}
+            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+                <View
+                    style={[
+                        columnWidthStyle(0),
+                        labelColumnFlex > 0 ? { flexGrow: labelColumnFlex } : undefined,
+                    ]}
+                />
+                {columns.map((column, index) => {
+                    const colIndex = index + 1;
+                    return (
+                        <View
+                            key={column.label ?? index}
+                            onLayout={(e) => onHeaderColumnLayout(colIndex, e)}
+                            style={[columnWidthStyle(colIndex), planHeaderColumnStyle]}
+                        >
+                            <Text
+                                style={[
+                                    headerTextStyle,
+                                    {
+                                        color: column.brand ? headerBrandFg : headerFg,
+                                        alignSelf: 'center',
+                                    },
+                                ]}
+                            >
+                                {column.label}
+                            </Text>
+                        </View>
+                    );
+                })}
+            </View>
+
+            {/* Single rounded table — columns size to their widest cell */}
+            <View
+                style={{
+                    flexDirection: 'row',
+                    alignSelf: 'flex-start',
+                    backgroundColor: tableBackground,
+                    borderWidth: tableBorderSize,
+                    borderColor: tableBorderColor,
+                    borderRadius: tableRadius,
+                    overflow: 'hidden',
+                }}
+            >
+                <View
+                    onLayout={(e) => onBodyColumnLayout(0, e)}
+                    style={[
+                        columnWidthStyle(0),
+                        labelColumnFlex > 0 ? { flexGrow: labelColumnFlex } : undefined,
+                    ]}
+                >
+                    {rows.map((row, rowIndex) => {
+                        const isLast = rowIndex === rows.length - 1;
+                        const showInfo = row.showInfo || row.onInfoPress != null;
+                        return (
+                            <View
+                                key={row.key ?? `${row.label}-${rowIndex}`}
+                                style={[
+                                    labelCellStyle,
+                                    {
+                                        borderBottomWidth: isLast ? 0 : cellBorderSize,
+                                        borderBottomColor: cellBorderColor,
+                                    },
+                                ]}
+                            >
+                                <Text style={labelTextStyle}>{row.label}</Text>
+                                {showInfo &&
+                                    (row.onInfoPress ? (
+                                        <Pressable
+                                            onPress={row.onInfoPress}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`More information about ${row.label}`}
+                                            hitSlop={8}
+                                        >
+                                            <Icon name="ic_info" size={iconSize} color={iconColor} />
+                                        </Pressable>
+                                    ) : (
+                                        <Icon name="ic_info" size={iconSize} color={iconColor} />
+                                    ))}
+                            </View>
+                        );
+                    })}
+                </View>
+
+                {columns.map((column, colIndex) => {
+                    const colIndexWidth = colIndex + 1;
+                    return (
+                    <View
+                        key={column.label ?? colIndex}
+                        onLayout={(e) => onBodyColumnLayout(colIndexWidth, e)}
+                        style={[columnWidthStyle(colIndexWidth), planHeaderColumnStyle]}
+                    >
+                        {rows.map((row, rowIndex) => {
+                            const isLast = rowIndex === rows.length - 1;
+                            return (
+                                <View
+                                    key={row.key ?? `${row.label}-${rowIndex}`}
+                                    style={[
+                                        valueCellStyle,
+                                        {
+                                            borderBottomWidth: isLast ? 0 : cellBorderSize,
+                                            borderBottomColor: cellBorderColor,
+                                        },
+                                    ]}
+                                >
+                                    <View style={{ flexShrink: 0 }}>
+                                        {renderValue(
+                                            row.values?.[colIndex],
+                                            `${rowIndex}-${colIndex}`,
+                                        )}
+                                    </View>
+                                </View>
+                            );
+                        })}
+                    </View>
+                    );
+                })}
+            </View>
+        </View>
+    );
+}
+
+export default PlanComparisonCard;

package/src/components/Slot/Slot.tsx

@@ -0,0 +1,91 @@
+import React, { useMemo } from 'react'
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+
+export type SlotLayoutDirection = 'vertical' | 'horizontal'
+
+export type SlotProps = ViewProps & {
+  /**
+   * Content laid out inside the slot. `modes` are cascaded to every child via
+   * {@link cloneChildrenWithModes}.
+   */
+  children?: React.ReactNode
+  /**
+   * Main-axis direction for slot children. Matches the Figma Slot variant:
+   * - `vertical` (default): stacks children in a column
+   * - `horizontal`: arranges children in a row
+   */
+  layoutDirection?: SlotLayoutDirection
+  /**
+   * Alignment along the cross axis.
+   * Defaults to `stretch` for vertical and `flex-start` for horizontal.
+   */
+  alignCrossAxis?: ViewStyle['alignItems']
+  /**
+   * Distribution along the main axis (maps to `justifyContent`).
+   */
+  justifyMainAxis?: ViewStyle['justifyContent']
+  /**
+   * Mode configuration passed to the token resolver and cascaded to children.
+   */
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Slot — a token-driven layout container for grouped slot content.
+ *
+ * Use `Slot` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Slot layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Slot>
+ * </ActionFooter>
+ * ```
+ */
+function Slot({
+  children,
+  layoutDirection = 'vertical',
+  alignCrossAxis,
+  justifyMainAxis,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: SlotProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+  const { containerStyle, processedChildren } = useMemo(() => {
+    const gap = (getVariableByName('slot/gap', modes) ?? 8) as number
+    const isHorizontal = layoutDirection === 'horizontal'
+
+    const container: ViewStyle = {
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: alignCrossAxis ?? (isHorizontal ? 'flex-start' : 'stretch'),
+      justifyContent: justifyMainAxis ?? (isHorizontal ? 'center' : undefined),
+      alignSelf: 'stretch',
+      gap,
+    }
+
+    const processed = children ? cloneChildrenWithModes(children, modes) : null
+
+    return { containerStyle: container, processedChildren: processed }
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis])
+
+  return (
+    <View style={[containerStyle, style]} {...rest}>
+      {processedChildren}
+    </View>
+  )
+}
+
+export default React.memo(Slot)