jfs-components 0.1.2 → 0.1.8

package/src/components/CompareTable/CompareTable.tsx

@@ -0,0 +1,477 @@
+import React from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    Platform,
+    type ImageSourcePropType,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Accordion from '../Accordion/Accordion'
+import Image from '../Image/Image'
+import IconButton from '../IconButton/IconButton'
+import Icon from '../../icons/Icon'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * Brand link colour used by the selection-card CTA. The Figma node resolves
+ * `button/foreground` to this value, but no reproducible token mode currently
+ * produces it (the published token store is out of sync), so it is pinned here
+ * to stay faithful to the design.
+ */
+const BRAND_LINK_COLOR = '#5d00b5'
+
+/**
+ * Selection-card close control (Figma node 5568:3492). It is an `IconButton`
+ * pinned to the card's top-right corner. The Figma node resolves its
+ * `iconButton/background` and border to fully transparent (`#ebebed00` /
+ * `#ffffff00`) — values no token mode reproduces — so they are overridden here.
+ * Size (40px) and icon are left to the `IconButton`'s own token resolution
+ * (padding 11 · 2 + icon 18).
+ */
+/** Add-a-card icon button fill + icon (Figma node 5568:3494 direct overrides). */
+const ADD_BUTTON_BG = '#545961'
+const ADD_BUTTON_ICON_COLOR = '#ffffff'
+
+const closeButtonStyle: ViewStyle = {
+    position: 'absolute',
+    top: 1,
+    right: 0,
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+}
+
+/** Keeps every text layer on a single line on web. */
+const NO_WRAP_TEXT: TextStyle = {
+    flexShrink: 0,
+    ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as const } : {}),
+}
+
+const toWeight = (w: number | string) =>
+    (typeof w === 'number' ? `${w}` : w) as TextStyle['fontWeight']
+
+/**
+ * A single product/plan column rendered as a selection card at the top of the
+ * table. The card order maps 1:1 to each {@link CompareTableRow}'s `values`.
+ */
+export type CompareTableColumn = {
+    /** Product / plan name shown under the image. */
+    label?: string;
+    /** Thumbnail / logo image. Accepts a URL string or an RN image source. */
+    imageSource?: ImageSourcePropType | string;
+    /** CTA link text (e.g. "View details"). Omit to hide the link. */
+    actionLabel?: string;
+    /** Handler for the CTA link. Implies the link is shown. */
+    onActionPress?: () => void;
+    /** When provided, renders a tappable close icon to remove the column. */
+    onRemove?: () => void;
+    /** Stable key. Falls back to the label / index. */
+    key?: React.Key;
+};
+
+/**
+ * Value rendered inside a comparison cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React element → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+export type CompareTableCellValue =
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+    | React.ReactElement;
+
+export type CompareTableRow = {
+    /** One value per column, in the same order as `columns`. */
+    values: CompareTableCellValue[];
+    /** Stable key. Falls back to the index. */
+    key?: React.Key;
+};
+
+/**
+ * A collapsible section. Each section renders as an `Accordion` whose body is a
+ * comparison table that spans the same columns as the selection cards.
+ */
+export type CompareTableSection = {
+    /** Accordion header label, e.g. "Fees & charges". */
+    title: string;
+    /** Optional full-width header row shown at the top of the table body. */
+    header?: string;
+    /** Comparison rows; each row's `values` map 1:1 to `columns`. */
+    rows: CompareTableRow[];
+    /** Initial expanded state. Defaults to `true` for the first section. */
+    defaultExpanded?: boolean;
+    /** Stable key. Falls back to the title / index. */
+    key?: React.Key;
+};
+
+export type CompareTableProps = {
+    /**
+     * Product / plan columns rendered as selection cards. Their order maps 1:1
+     * to each row's `values` array. Supports any number of columns.
+     */
+    columns?: CompareTableColumn[];
+    /** Collapsible comparison sections. */
+    sections?: CompareTableSection[];
+    /**
+     * When provided, renders an "Add a card" tile after the columns. Hidden once
+     * `columns.length` reaches `maxColumns`.
+     */
+    onAddColumn?: () => void;
+    /** Label for the add-a-card tile. @default 'Add a card' */
+    addColumnLabel?: string;
+    /** Maximum number of columns before the add tile is hidden. @default 4 */
+    maxColumns?: number;
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Modes;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+
+const DEFAULT_COLUMNS: CompareTableColumn[] = [
+    { label: 'Plan A', actionLabel: 'View details', onRemove: () => {} },
+    { label: 'Plan B', actionLabel: 'View details', onRemove: () => {} },
+]
+
+const DEFAULT_SECTIONS: CompareTableSection[] = [
+    {
+        title: 'Fees & charges',
+        header: 'Annual fees',
+        defaultExpanded: true,
+        rows: [
+            { values: ['₹0', '₹499'] },
+            { values: ['Free', 'Up to ₹1,300'] },
+            { values: ['1x', '1.25x'] },
+        ],
+    },
+]
+
+/**
+ * CompareTable renders a product comparison surface: a row of selection cards
+ * (one per column) followed by one or more collapsible sections, each holding a
+ * comparison table whose cells line up beneath their column.
+ *
+ * The selection card is an internal sub-component and is intentionally not
+ * exported — it should only be used through `CompareTable`. Implementation of
+ * Figma node `5568:3496` (`Compare table`) with sub-component `5568:3487`
+ * (`selectioncard`).
+ *
+ * @component
+ */
+function CompareTable({
+    columns = DEFAULT_COLUMNS,
+    sections = DEFAULT_SECTIONS,
+    onAddColumn,
+    addColumnLabel = 'Add a card',
+    maxColumns = 4,
+    modes = EMPTY_MODES,
+    style,
+}: CompareTableProps) {
+    // --- selection card tokens ------------------------------------------------
+    const cardBg = (getVariableByName('selectionCard/background/color', modes) as string) ?? '#ffffff'
+    const cardBorderColor = (getVariableByName('selectionCard/border/color', modes) as string) ?? '#eeeeee'
+    const cardBorderSize = (getVariableByName('selectionCard/border/size', modes) as number) ?? 1
+    const cardGap = (getVariableByName('selectionCard/gap', modes) as number) ?? 12
+    const cardPaddingH = (getVariableByName('selectionCard/padding/horizontal', modes) as number) ?? 20
+    const cardPaddingV = (getVariableByName('selectionCard/padding/vertical', modes) as number) ?? 20
+    const cardLabelColor = (getVariableByName('selectionCard/label/color', modes) as string) ?? '#000000'
+    const cardLabelFontSize = (getVariableByName('selectionCard/label/fontsize', modes) as number) ?? 14
+    const cardLabelFontFamily = (getVariableByName('selectionCard/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const cardLabelFontWeight = (getVariableByName('selectionCard/label/fontweight', modes) as number | string) ?? 700
+    const imageRadius = (getVariableByName('image/radius', modes) as number) ?? 8
+
+    // --- add-a-card icon button tokens ---------------------------------------
+    // padding/size/border come from the shared iconButton tokens; the filled
+    // background (#545961) and white icon are the Figma node's direct overrides
+    // (no token mode reproduces them), so they are pinned to match the design.
+    const addBorderColor = (getVariableByName('iconButton/border/color', modes) as string) ?? 'rgba(255,255,255,0)'
+    const addBorderSize = (getVariableByName('iconButton/border/size', modes) as number) ?? 1
+    const addPadding = (getVariableByName('iconButton/padding', modes) as number) ?? 11
+    const addIconSize = (getVariableByName('iconButton/icon/size', modes) as number) ?? 18
+    const addBg = ADD_BUTTON_BG
+    const addIconColor = ADD_BUTTON_ICON_COLOR
+
+    // --- table header tokens --------------------------------------------------
+    const headerBg = (getVariableByName('comparetableHeader/background/color', modes) as string) ?? '#f5f5f5'
+    const headerLabelColor = (getVariableByName('comparetableHeader/label/color', modes) as string) ?? '#000000'
+    const headerFontSize = (getVariableByName('comparetableHeader/label/fontsize', modes) as number) ?? 14
+    const headerFontFamily = (getVariableByName('comparetableHeader/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const headerFontWeight = (getVariableByName('comparetableHeader/label/fontweight', modes) as number | string) ?? 600
+    const headerPaddingH = (getVariableByName('comparetableHeader/padding/horizontal', modes) as number) ?? 12
+    const headerPaddingV = (getVariableByName('comparetableHeader/padding/vertical', modes) as number) ?? 12
+
+    // --- table cell tokens ----------------------------------------------------
+    const cellBorderColor = (getVariableByName('compareTableCell/border/color', modes) as string) ?? '#eeeeee'
+    const cellBorderSize = (getVariableByName('compareTableCell/border/size', modes) as number) ?? 1
+    const cellBg = (getVariableByName('compareTableCell/background/color', modes) as string) ?? '#ffffff'
+    const cellLabelColor = (getVariableByName('compareTableCell/label/color', modes) as string) ?? '#000000'
+    const cellFontSize = (getVariableByName('compareTableCell/label/fontsize', modes) as number) ?? 14
+    const cellFontFamily = (getVariableByName('compareTableCell/label/fontfamily', modes) as string) ?? 'JioType Var'
+    const cellFontWeight = (getVariableByName('compareTableCell/label/fontweight', modes) as number | string) ?? 400
+    const cellPaddingH = (getVariableByName('compareTableCell/padding/horizontal', modes) as number) ?? 12
+    const cellPaddingV = (getVariableByName('compareTableCell/padding/vertical', modes) as number) ?? 12
+
+    const columnCount = columns.length
+    const showAddCard = onAddColumn != null && columnCount < maxColumns
+
+    const cardLabelStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        color: cardLabelColor,
+        fontSize: cardLabelFontSize,
+        fontFamily: cardLabelFontFamily,
+        fontWeight: toWeight(cardLabelFontWeight),
+        lineHeight: cardLabelFontSize * 1.1,
+        textAlign: 'center',
+    }
+
+    const linkStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        color: BRAND_LINK_COLOR,
+        fontFamily: cardLabelFontFamily,
+        fontSize: 14,
+        fontWeight: '700',
+        lineHeight: 22,
+    }
+
+    const headerTextStyle: TextStyle = {
+        color: headerLabelColor,
+        fontSize: headerFontSize,
+        fontFamily: headerFontFamily,
+        fontWeight: toWeight(headerFontWeight),
+    }
+
+    const cellTextStyle: TextStyle = {
+        color: cellLabelColor,
+        fontSize: cellFontSize,
+        fontFamily: cellFontFamily,
+        fontWeight: toWeight(cellFontWeight),
+    }
+
+    const cardStyle: ViewStyle = {
+        flex: 1,
+        minWidth: 0,
+        minHeight: 147,
+        backgroundColor: cardBg,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: cardGap,
+        paddingHorizontal: cardPaddingH,
+        paddingVertical: cardPaddingV,
+    }
+
+    const renderCard = (column: CompareTableColumn, index: number) => {
+        const isLast = index === columnCount - 1 && !showAddCard
+        return (
+            <View
+                key={column.key ?? column.label ?? index}
+                style={[
+                    cardStyle,
+                    {
+                        borderBottomWidth: cardBorderSize,
+                        borderBottomColor: cardBorderColor,
+                        borderRightWidth: isLast ? 0 : cardBorderSize,
+                        borderRightColor: cardBorderColor,
+                    },
+                ]}
+            >
+                {column.imageSource != null && (
+                    <Image
+                        imageSource={column.imageSource}
+                        width={66}
+                        height={44}
+                        borderRadius={imageRadius}
+                        resizeMode="cover"
+                        accessibilityLabel={column.label}
+                    />
+                )}
+                {column.label != null && (
+                    <Text style={cardLabelStyle} numberOfLines={2}>
+                        {column.label}
+                    </Text>
+                )}
+                {column.actionLabel != null && (
+                    <Pressable
+                        onPress={column.onActionPress}
+                        accessibilityRole="button"
+                        accessibilityLabel={column.actionLabel}
+                        hitSlop={6}
+                    >
+                        <Text style={linkStyle}>{column.actionLabel}</Text>
+                    </Pressable>
+                )}
+                {column.onRemove != null && (
+                    // Figma node 5568:3492 — an Icon Button (not a capsule):
+                    // padding 11 + icon 18 → 40px circle, transparent background,
+                    // absolutely pinned to the card's top-right (right:0, top:1).
+                    <IconButton
+                        iconName="ic_close"
+                        onPress={column.onRemove}
+                        modes={modes}
+                        accessibilityLabel={`Remove ${column.label ?? 'column'}`}
+                        style={closeButtonStyle}
+                    />
+                )}
+            </View>
+        )
+    }
+
+    const renderAddCard = () => (
+        <Pressable
+            key="__add_card__"
+            onPress={onAddColumn}
+            accessibilityRole="button"
+            accessibilityLabel={addColumnLabel}
+            style={[cardStyle, { borderBottomWidth: cardBorderSize, borderBottomColor: cardBorderColor }]}
+        >
+            <View
+                style={{
+                    width: addPadding * 2 + addIconSize,
+                    height: addPadding * 2 + addIconSize,
+                    borderRadius: 9999,
+                    borderWidth: addBorderSize,
+                    borderColor: addBorderColor,
+                    backgroundColor: addBg,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                <Icon
+                    name="ic_add"
+                    size={addIconSize}
+                    color={addIconColor}
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                />
+            </View>
+            <Text style={cardLabelStyle} numberOfLines={1}>
+                {addColumnLabel}
+            </Text>
+        </Pressable>
+    )
+
+    const renderCellContent = (value: CompareTableCellValue, cellKey: React.Key) => {
+        if (value === false) {
+            return (
+                <Icon
+                    key={cellKey}
+                    name="ic_close"
+                    size={cellFontSize + 2}
+                    color={cellBorderColor}
+                />
+            )
+        }
+        if (value === null || value === undefined || value === true) {
+            return null
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            return (
+                <Text key={cellKey} style={cellTextStyle}>
+                    {value}
+                </Text>
+            )
+        }
+        return cloneChildrenWithModes(value, modes)
+    }
+
+    const renderTable = (section: CompareTableSection) => (
+        <View
+            style={{
+                width: '100%',
+                borderWidth: cellBorderSize,
+                borderColor: cellBorderColor,
+                overflow: 'hidden',
+            }}
+        >
+            {section.header != null && (
+                <View
+                    style={{
+                        backgroundColor: headerBg,
+                        paddingHorizontal: headerPaddingH,
+                        paddingVertical: headerPaddingV,
+                        borderBottomWidth: cellBorderSize,
+                        borderBottomColor: cellBorderColor,
+                    }}
+                >
+                    <Text style={headerTextStyle}>{section.header}</Text>
+                </View>
+            )}
+            {section.rows.map((row, rowIndex) => {
+                const isLastRow = rowIndex === section.rows.length - 1
+                return (
+                    <View
+                        key={row.key ?? rowIndex}
+                        style={{ flexDirection: 'row', width: '100%' }}
+                    >
+                        {Array.from({ length: columnCount }).map((_, colIndex) => {
+                            const isLastCol = colIndex === columnCount - 1
+                            return (
+                                <View
+                                    key={colIndex}
+                                    style={{
+                                        flex: 1,
+                                        minWidth: 0,
+                                        backgroundColor: cellBg,
+                                        justifyContent: 'center',
+                                        paddingHorizontal: cellPaddingH,
+                                        paddingVertical: cellPaddingV,
+                                        borderRightWidth: isLastCol ? 0 : cellBorderSize,
+                                        borderRightColor: cellBorderColor,
+                                        borderBottomWidth: isLastRow ? 0 : cellBorderSize,
+                                        borderBottomColor: cellBorderColor,
+                                    }}
+                                >
+                                    {renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`)}
+                                </View>
+                            )
+                        })}
+                    </View>
+                )
+            })}
+        </View>
+    )
+
+    return (
+        <View
+            style={[
+                {
+                    width: '100%',
+                    backgroundColor: cardBg,
+                    borderWidth: 1,
+                    borderColor: '#e8e8e8',
+                    overflow: 'hidden',
+                },
+                style,
+            ]}
+        >
+            {(columnCount > 0 || showAddCard) && (
+                <View style={{ flexDirection: 'row', width: '100%' }}>
+                    {columns.map(renderCard)}
+                    {showAddCard && renderAddCard()}
+                </View>
+            )}
+
+            <View style={{ width: '100%' }}>
+                {sections.map((section, index) => (
+                    <Accordion
+                        key={section.key ?? section.title ?? index}
+                        title={section.title}
+                        defaultExpanded={section.defaultExpanded ?? index === 0}
+                        modes={modes}
+                        style={{ paddingHorizontal: headerPaddingH }}
+                    >
+                        {renderTable(section)}
+                    </Accordion>
+                ))}
+            </View>
+        </View>
+    )
+}
+
+export default CompareTable