jfs-components 0.1.0 → 0.1.8

package/src/components/Overlay/Overlay.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  StyleSheet,
+  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'
+import type { Modes } from '../../design-tokens'
+
+export type OverlayProps = Omit<ViewProps, 'children' | 'style'> & {
+  /**
+   * Content rendered on top of the scrim. `modes` are cascaded to every child
+   * via {@link cloneChildrenWithModes}. When omitted the overlay renders as a
+   * bare backdrop.
+   */
+  children?: React.ReactNode
+  /**
+   * How `children` are positioned within the overlay.
+   * - `center` (default): centers content both axes
+   * - `top` / `bottom`: pins content to the top/bottom edge
+   * - `stretch`: stretches content to fill the overlay
+   */
+  contentPlacement?: 'center' | 'top' | 'bottom' | 'stretch'
+  /**
+   * Called when the scrim (the area outside `children`) is pressed. Typically
+   * used to dismiss the overlaid surface. When omitted the backdrop is inert.
+   */
+  onPress?: () => void
+  /**
+   * When `true` (default) the overlay covers its parent via `StyleSheet.absoluteFill`.
+   * Set to `false` to lay it out in normal flow (driven by `style`).
+   */
+  fill?: boolean
+  /**
+   * Mode configuration passed to the token resolver and cascaded to children.
+   */
+  modes?: Modes
+  style?: StyleProp<ViewStyle>
+}
+
+const PLACEMENT_STYLE: Record<NonNullable<OverlayProps['contentPlacement']>, ViewStyle> = {
+  center: { justifyContent: 'center', alignItems: 'center' },
+  top: { justifyContent: 'flex-start', alignItems: 'stretch' },
+  bottom: { justifyContent: 'flex-end', alignItems: 'stretch' },
+  stretch: { justifyContent: 'center', alignItems: 'stretch' },
+}
+
+/**
+ * Overlay — a token-driven scrim that dims content behind an overlaid surface.
+ *
+ * Renders a semi-transparent backdrop using the `overlay/background` design
+ * token and optionally hosts content (e.g. a modal, sheet or dialog) on top.
+ * Pair it with a `Modal` for true full-screen overlays, or drop it inside any
+ * relatively-positioned container to dim just that region.
+ *
+ * @example
+ * ```tsx
+ * <Overlay modes={modes} onPress={close}>
+ *   <Card>Dialog content</Card>
+ * </Overlay>
+ * ```
+ */
+function Overlay({
+  children,
+  contentPlacement = 'center',
+  onPress,
+  fill = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: OverlayProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+  const { containerStyle, processedChildren } = useMemo(() => {
+    const backgroundColor = (getVariableByName('overlay/background', modes) ??
+      'rgba(0, 0, 0, 0.7)') as string
+
+    const container: ViewStyle = {
+      backgroundColor,
+      overflow: 'hidden',
+      ...PLACEMENT_STYLE[contentPlacement],
+    }
+
+    const processed = children ? cloneChildrenWithModes(children, modes) : null
+
+    return { containerStyle: container, processedChildren: processed }
+  }, [children, modes, contentPlacement])
+
+  return (
+    <View
+      style={[fill && StyleSheet.absoluteFill, containerStyle, style]}
+      accessibilityViewIsModal
+      {...rest}
+    >
+      {onPress ? (
+        <Pressable
+          style={StyleSheet.absoluteFill}
+          onPress={onPress}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss overlay"
+        />
+      ) : null}
+      {processedChildren}
+    </View>
+  )
+}
+
+export default React.memo(Overlay)

package/src/components/PageHero/PageHero.tsx

@@ -10,6 +10,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Button from '../Button/Button'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type PageHeroProps = {
   /** Small eyebrow text shown above the headline. */
@@ -50,7 +51,7 @@ export type PageHeroProps = {
    */
   media?: React.ReactNode
   /** Mode configuration for design-token theming. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Style overrides applied to the outer container. */
   style?: StyleProp<ViewStyle>
   testID?: string

package/src/components/PaymentFeedback/PaymentFeedback.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type PaymentFeedbackProps = {
   /** Large heading text, typically a monetary value (e.g. "₹50,000") */
@@ -25,7 +26,7 @@ export type PaymentFeedbackProps = {
    * IconCapsule's color — pass `AppearanceSystem: 'positive' | 'warning' |
    * 'negative'` to render a green/orange/red capsule (defaults to `positive`).
    */
-  modes?: Record<string, any>
+  modes?: Modes
   style?: ViewStyle
 }
 

package/src/components/PdpCcCard/PdpCcCard.tsx

@@ -0,0 +1,356 @@
+import React, { useMemo } from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    StyleSheet,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+    type ImageSourcePropType,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Title from '../Title/Title'
+import Divider from '../Divider/Divider'
+import Button from '../Button/Button'
+import Image from '../Image/Image'
+import Icon from '../Icon/Icon'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single metric column inside the card's stats row: a small title, a bold
+ * value and an optional muted caption.
+ */
+export interface PdpCcCardMetric {
+    /** Small label rendered above the value (e.g. `"Weight"`). */
+    title?: string
+    /** The prominent value (e.g. `"24K"`). */
+    value?: string
+    /** Optional muted caption rendered below the value. */
+    caption?: string
+}
+
+export interface PdpCcCardProps {
+    /**
+     * Image source for the default media slot. Accepts a URL string or any RN
+     * `ImageSourcePropType`. Ignored when `media` is provided.
+     */
+    imageSource?: ImageSourcePropType | string
+    /** Default media image width. Defaults to the Figma spec (`100`). */
+    imageWidth?: number
+    /** Default media image height. Defaults to the Figma spec (`60`). */
+    imageHeight?: number
+    /**
+     * Full override for the media slot (top of the card). Takes precedence over
+     * `imageSource`. `modes` cascade into it automatically.
+     */
+    media?: React.ReactNode
+    /** Headline title (26px black). */
+    title?: string
+    /** Subtitle rendered below the title (14px medium). */
+    subtitle?: string
+    /**
+     * The metric columns rendered in the stats row. Vertical dividers are
+     * inserted automatically between adjacent metrics. Defaults to two sample
+     * metrics.
+     */
+    metrics?: PdpCcCardMetric[]
+    /** CTA button label. Defaults to `"button"`. */
+    buttonLabel?: string
+    /**
+     * Registry icon name for the button's leading glyph. Defaults to
+     * `'ic_add_circle'`. Pass `null` to hide the leading icon.
+     */
+    buttonIcon?: string | null
+    /** CTA press handler. */
+    onButtonPress?: () => void
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode
+    /** Toggles the CTA button. Defaults to `true`. */
+    showButton?: boolean
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string
+}
+
+/**
+ * PdpCcCard — Figma node 5352:935 ("PDP cc card").
+ *
+ * A centered white product/PDP card composed from the shared design-system
+ * primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Media** — a top image slot (`Image`, rounded via `image/radius`). Pass
+ *    `imageSource` for the default image or `media` for a full slot override.
+ *  - **Title** — a centered headline + subtitle rendered through the shared
+ *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
+ *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
+ *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
+ *
+ * All defaults can be overridden via `modes`.
+ */
+function PdpCcCard({
+    imageSource,
+    imageWidth = 100,
+    imageHeight = 60,
+    media,
+    title = 'Title',
+    subtitle = 'Subtitle',
+    metrics = DEFAULT_METRICS,
+    buttonLabel = 'button',
+    buttonIcon = 'ic_add_circle',
+    onButtonPress,
+    button,
+    showButton = true,
+    onPress,
+    width = 344,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: PdpCcCardProps) {
+    const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+    // The CTA uses the brand "Secondary" appearance at "Medium" emphasis (lilac
+    // fill + purple label) and the small size — matching the design. A
+    // consumer-supplied `modes` value still wins via spread order.
+    const ctaModes = useMemo<Modes>(
+        () => ({ AppearanceBrand: 'Secondary', Emphasis: 'Medium', 'Button / Size': 'S', ...modes }),
+        [modes]
+    )
+
+    const buttonForeground = useMemo(
+        () => asStr(getVariableByName('button/foreground', ctaModes), '#5d00b5'),
+        [ctaModes]
+    )
+
+    const mediaNode = media ? (
+        cloneChildrenWithModes(media, modes)
+    ) : (
+        <Image
+            imageSource={imageSource}
+            width={imageWidth}
+            height={imageHeight}
+            borderRadius={tokens.imageRadius}
+            resizeMode="cover"
+            accessibilityElementsHidden
+            importantForAccessibility="no"
+        />
+    )
+
+    const ctaNode = button ? (
+        cloneChildrenWithModes(button, ctaModes)
+    ) : (
+        <Button
+            label={buttonLabel}
+            modes={ctaModes}
+            onPress={onButtonPress}
+            leading={
+                buttonIcon ? (
+                    <Icon iconName={buttonIcon} size={tokens.buttonIconSize} color={buttonForeground} />
+                ) : undefined
+            }
+        />
+    )
+
+    const content = (
+        <>
+            <View style={styles.mediaSlot}>{mediaNode}</View>
+
+            <Title title={title} subtitle={subtitle} textAlign="Center" modes={modes} />
+
+            {metrics.length > 0 ? (
+                <View style={styles.metricsRow}>
+                    {metrics.map((metric, index) => (
+                        <React.Fragment key={index}>
+                            {index > 0 ? (
+                                <Divider direction="vertical" modes={modes} style={styles.metricDivider} />
+                            ) : null}
+                            <Metricdata metric={metric} tokens={tokens} />
+                        </React.Fragment>
+                    ))}
+                </View>
+            ) : null}
+
+            {showButton ? ctaNode : null}
+        </>
+    )
+
+    const containerStyle = useMemo<ViewStyle>(
+        () => ({ ...tokens.container, width }),
+        [tokens.container, width]
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null, style]}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? title}
+                onPress={onPress}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Metricdata — internal metric column (Figma node 5352:256)
+// ---------------------------------------------------------------------------
+
+function Metricdata({ metric, tokens }: { metric: PdpCcCardMetric; tokens: ResolvedTokens }) {
+    return (
+        <View style={tokens.metric}>
+            {metric.title != null ? <Text style={tokens.metricTitle}>{metric.title}</Text> : null}
+            {metric.value != null ? <Text style={tokens.metricValue}>{metric.value}</Text> : null}
+            {metric.caption != null ? <Text style={tokens.metricCaption}>{metric.caption}</Text> : null}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+interface ResolvedTokens {
+    container: ViewStyle
+    imageRadius: number
+    buttonIconSize: number
+    metric: ViewStyle
+    metricTitle: TextStyle
+    metricValue: TextStyle
+    metricCaption: TextStyle
+}
+
+function asNum(raw: unknown, fallback: number): number {
+    const n = typeof raw === 'number' ? raw : parseFloat(raw as string)
+    return Number.isFinite(n) ? n : fallback
+}
+
+function asStr(raw: unknown, fallback: string): string {
+    return raw != null ? String(raw) : fallback
+}
+
+function resolveTokens(modes: Modes): ResolvedTokens {
+    // NOTE: token names are passed as string literals DIRECTLY to
+    // getVariableByName so the `extract-component-tokens` script can statically
+    // collect them for the generated docs. Do not refactor these into a helper
+    // that receives the name as a variable.
+    const background = asStr(getVariableByName('PDPcccard/bg/color', modes), '#ffffff')
+    const paddingHorizontal = asNum(getVariableByName('PDPcccard/padding/horizontal', modes), 16)
+    const paddingVertical = asNum(getVariableByName('PDPcccard/padding/vertical', modes), 20)
+    const gap = asNum(getVariableByName('PDPcccard/gap', modes), 12)
+
+    const imageRadius = asNum(getVariableByName('image/radius', modes), 8)
+    const buttonIconSize = asNum(getVariableByName('button/iconSize', modes), 16)
+
+    const metricGap = asNum(getVariableByName('metricdata/gap', modes), 4)
+    const metricPadH = asNum(getVariableByName('metricdata/padding/horizontal', modes), 10)
+    const metricPadV = asNum(getVariableByName('metricdata/padding/vertical', modes), 10)
+
+    const titleColor = asStr(getVariableByName('metricdata/title/color', modes), '#000000')
+    const titleSize = asNum(getVariableByName('metricdata/title/fontsize', modes), 12)
+    const titleFamily = asStr(getVariableByName('metricdata/title/fontfamily', modes), 'JioType Var')
+    const titleWeight = asStr(getVariableByName('metricdata/title/fontweight', modes), '400')
+
+    const valueColor = asStr(getVariableByName('metricdata/value/color', modes), '#000000')
+    const valueSize = asNum(getVariableByName('metricdata/value/fontsize', modes), 20)
+    const valueFamily = asStr(getVariableByName('metricdata/value/fontfamily', modes), 'JioType Var')
+    const valueWeight = asStr(getVariableByName('metricdata/value/fontweight', modes), '700')
+
+    const captionColor = asStr(getVariableByName('metricdata/caption/color', modes), '#777777')
+    const captionSize = asNum(getVariableByName('metricdata/caption/fontsize', modes), 12)
+    const captionFamily = asStr(getVariableByName('metricdata/caption/fontfamily', modes), 'JioType Var')
+    const captionWeight = asStr(getVariableByName('metricdata/caption/fontweight', modes), '500')
+
+    return {
+        container: {
+            backgroundColor: background,
+            paddingHorizontal,
+            paddingVertical,
+            gap,
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        imageRadius,
+        buttonIconSize,
+        metric: {
+            flex: 1,
+            gap: metricGap,
+            paddingHorizontal: metricPadH,
+            paddingVertical: metricPadV,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        metricTitle: {
+            color: titleColor,
+            fontSize: titleSize,
+            fontFamily: titleFamily,
+            fontWeight: titleWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(titleSize * 1.2),
+            textAlign: 'center',
+            includeFontPadding: false as any,
+        },
+        metricValue: {
+            color: valueColor,
+            fontSize: valueSize,
+            fontFamily: valueFamily,
+            fontWeight: valueWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(valueSize * 1.2),
+            textAlign: 'center',
+            includeFontPadding: false as any,
+        },
+        metricCaption: {
+            color: captionColor,
+            fontSize: captionSize,
+            fontFamily: captionFamily,
+            fontWeight: captionWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(captionSize * 1.2),
+            textAlign: 'center',
+            includeFontPadding: false as any,
+        },
+    }
+}
+
+const DEFAULT_METRICS: PdpCcCardMetric[] = [
+    { title: 'Title', value: 'Value', caption: 'caption' },
+    { title: 'Title', value: 'Value', caption: 'caption' },
+]
+
+const styles = StyleSheet.create({
+    mediaSlot: {
+        alignSelf: 'stretch',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    metricsRow: {
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        alignItems: 'stretch',
+    },
+    metricDivider: {
+        alignSelf: 'center',
+        height: '70%',
+    },
+    pressed: {
+        opacity: 0.92,
+    },
+})
+
+export default PdpCcCard

package/src/components/PlanComparisonCard/PlanComparisonCard.tsx

@@ -11,6 +11,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
+import type { Modes } from '../../design-tokens'
 
 /** Figma grid: label column 1.8fr, each plan column 1fr. */
 const LABEL_COLUMN_FR = 1.8;
@@ -73,7 +74,7 @@ export type PlanComparisonCardProps = {
     /** Feature rows compared across the plan columns. */
     rows?: PlanComparisonRow[];
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override the outer container style. */
     style?: StyleProp<ViewStyle>;
 };

package/src/components/Popup/Popup.tsx

@@ -13,6 +13,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import VStack from '../VStack/VStack'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type PopupRef = {
     open: () => void
@@ -31,7 +32,7 @@ export type PopupProps = {
     /** Slot content displayed inside the popup. */
     children?: React.ReactNode
     /** Mode configuration for design token resolution. */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Whether pressing the backdrop closes the popup. */
     closeOnBackdropPress?: boolean
     /** Backdrop overlay color. */

package/src/components/PortfolioHero/PortfolioHero.tsx

@@ -10,6 +10,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { cloneChildrenWithModes } from '../../utils/react-utils'
 import Avatar from '../Avatar/Avatar'
 import MoneyValue from '../MoneyValue/MoneyValue'
+import type { Modes } from '../../design-tokens'
 
 export type PortfolioHeroProps = {
   /** Product label text displayed next to the avatar. */
@@ -21,7 +22,7 @@ export type PortfolioHeroProps = {
   /** Currency symbol or ISO code. */
   currency?: string
   /** Modes configuration mapped to Figma tokens. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Slot content rendered below the money value (e.g. Badge, subtitle). */
   children?: React.ReactNode
   /** Container style override. */

package/src/components/PoweredByLabel/PoweredByLabel.tsx

@@ -11,6 +11,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
+import type { Modes } from '../../design-tokens'
 
 // Default bundled FINVU brand logo, matching the Figma reference so the
 // component renders correctly out of the box without any image prop.
@@ -52,7 +53,7 @@ export type PoweredByLabelProps = {
     /**
      * Design token modes for theming (e.g. `{ 'Color Mode': 'Dark' }`).
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Container style override. */
     style?: StyleProp<ViewStyle>
     /** Label text style override. */

package/src/components/ProductLabel/ProductLabel.tsx

@@ -3,6 +3,7 @@ import { View, Text, type ViewStyle, type TextStyle, type ImageSourcePropType }
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Avatar from '../Avatar/Avatar'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type ProductLabelProps = {
   /** The product name label text. */
@@ -10,7 +11,7 @@ export type ProductLabelProps = {
   /** Image source for the product avatar. */
   imageSource?: ImageSourcePropType | string
   /** Modes configuration for design token resolution. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: ViewStyle
 }