jfs-components 0.1.0 → 0.1.8

package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx

@@ -0,0 +1,423 @@
+import React, { useId, useMemo } from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    StyleSheet,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+    type ImageSourcePropType,
+} from 'react-native'
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import Avatar from '../Avatar/Avatar'
+import Badge from '../Badge/Badge'
+import Button from '../Button/Button'
+import Image from '../Image/Image'
+import GlassFill from './GlassFill'
+import type { Modes } from '../../design-tokens'
+
+export interface ProductMerchandisingCardProps {
+    /**
+     * Background media for the card. Accepts a URL string or any RN
+     * `ImageSourcePropType` (same shape as `Avatar`, `MediaCard`, etc.). The
+     * image is rendered full-bleed behind the header and glass footer.
+     */
+    imageSource?: ImageSourcePropType | string
+    /** Footer title (bold, white). */
+    title?: string
+    /** Footer subtitle (muted). */
+    subtitle?: string
+    /**
+     * Header badge label (top-right). The badge is hidden when this is
+     * `undefined` and no `badge` override is provided.
+     */
+    badgeLabel?: string
+    /**
+     * Full override for the header badge. Takes precedence over `badgeLabel`.
+     */
+    badge?: React.ReactNode
+    /** Show the header avatar (top-left). Defaults to `true`. */
+    showAvatar?: boolean
+    /** Avatar image source. */
+    avatarSource?: ImageSourcePropType | string
+    /** Avatar monogram fallback when no image is supplied. */
+    avatarMonogram?: string
+    /** Full override for the header avatar. Takes precedence over avatar props. */
+    avatar?: React.ReactNode
+    /**
+     * Footer "special badge" label (small frosted pill above the title). The
+     * badge is hidden when this is `undefined` and no `specialBadge` override
+     * is provided.
+     */
+    specialBadgeLabel?: string
+    /** Optional leading node (icon/image) rendered inside the special badge. */
+    specialBadgeIcon?: React.ReactNode
+    /** Full override for the special badge. Takes precedence over the props above. */
+    specialBadge?: React.ReactNode
+    /** CTA button label. Defaults to `"CTA"`. */
+    ctaLabel?: string
+    /** CTA button press handler. */
+    onCtaPress?: () => void
+    /** Full override for the CTA. Takes precedence over `ctaLabel`/`onCtaPress`. */
+    cta?: React.ReactNode
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void
+    /** Card height in px. Defaults to `223` (Figma spec). */
+    height?: 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
+}
+
+/**
+ * ProductMerchandisingCard — a full-bleed image card (Figma node 5277:317)
+ * with a top header (avatar + badge) and a bottom **glass footer** that
+ * combines a real native background blur with a transparent→black gradient
+ * scrim for legible text over any image.
+ *
+ * Glass footer implementation (works on iOS, Android and Web):
+ *  - **iOS / Android:** `<GlassFill>` wraps `@react-native-community/blur`'s
+ *    `BlurView` — iOS gets a real `UIVisualEffectView` (live OS blur),
+ *    Android gets the community `RealtimeBlurView` with a tinted scrim
+ *    fallback. The native-only module is isolated in `GlassFill.tsx`.
+ *  - **Web:** the platform-extension `GlassFill.web.tsx` renders a translucent
+ *    `View` with `backdrop-filter: blur()` — Metro picks the right file so the
+ *    web bundle never imports the native blur module.
+ *  - The gradient scrim is drawn with `react-native-svg` (one renderer for all
+ *    platforms) so the fade is identical everywhere.
+ *
+ * The blur strength is driven by the Figma `blur/minimal` token, mapped to the
+ * `GlassFill` 0–100 intensity scale the same way `MediaCard` does.
+ */
+function ProductMerchandisingCard({
+    imageSource,
+    title = 'Title',
+    subtitle = 'Subtitle',
+    badgeLabel,
+    badge,
+    showAvatar = true,
+    avatarSource,
+    avatarMonogram,
+    avatar,
+    specialBadgeLabel,
+    specialBadgeIcon,
+    specialBadge,
+    ctaLabel = 'CTA',
+    onCtaPress,
+    cta,
+    onPress,
+    height = 223,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: ProductMerchandisingCardProps) {
+    // Unique gradient id so multiple cards on one (web) document never collide.
+    const rawId = useId()
+    const scrimId = `pmc-footer-scrim-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`
+
+    const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+    const containerStyle: ViewStyle = {
+        height,
+        borderRadius: tokens.radius,
+        overflow: 'hidden',
+        position: 'relative',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+    }
+
+    // Header avatar defaults to the design's 36px (Avatar Size = M). A
+    // consumer-supplied `modes['Avatar Size']` still wins via spread order.
+    const avatarModes = useMemo<Modes>(() => ({ 'Avatar Size': 'M', ...modes }), [modes])
+
+    // The Figma node renders the header badge with the brand "Secondary"
+    // appearance at "Medium" emphasis (lilac fill + dark label). These are set
+    // as defaults so the card matches the design out of the box; a
+    // consumer-supplied `modes` value still wins via spread order.
+    const badgeModes = useMemo<Modes>(
+        () => ({ AppearanceBrand: 'Secondary', Emphasis: 'Medium', ...modes }),
+        [modes]
+    )
+
+    const headerBadge =
+        badge ?? (badgeLabel != null ? <Badge label={badgeLabel} modes={badgeModes} /> : null)
+
+    const headerAvatar = showAvatar
+        ? avatar ?? (
+              <Avatar
+                  style={avatarSource ? 'Image' : avatarMonogram ? 'Monogram' : 'Image'}
+                  imageSource={avatarSource}
+                  monogram={avatarMonogram}
+                  modes={avatarModes}
+              />
+          )
+        : null
+
+    const footerSpecialBadge =
+        specialBadge ??
+        (specialBadgeLabel != null ? (
+            <View style={styles.specialBadge}>
+                <GlassFill
+                    tint="light"
+                    intensity={SPECIAL_BADGE_INTENSITY}
+                    overlayColor={SPECIAL_BADGE_BG}
+                    style={styles.specialBadgeFill}
+                />
+                {specialBadgeIcon != null ? (
+                    <View style={styles.specialBadgeIcon}>{specialBadgeIcon}</View>
+                ) : null}
+                <Text style={tokens.specialBadgeText} numberOfLines={1}>
+                    {specialBadgeLabel}
+                </Text>
+            </View>
+        ) : null)
+
+    // The Figma CTA uses the brand "Secondary" appearance (purple fill, white
+    // label) at the small size. Defaults match the design; consumer `modes`
+    // win via spread order.
+    const ctaModes = useMemo<Modes>(
+        () => ({ 'Button / Size': 'S', AppearanceBrand: 'Secondary', ...modes }),
+        [modes]
+    )
+
+    const footerCta =
+        cta ?? <Button label={ctaLabel} modes={ctaModes} onPress={onCtaPress} />
+
+    const content = (
+        <>
+            {imageSource != null ? (
+                <Image
+                    imageSource={imageSource}
+                    style={StyleSheet.absoluteFillObject as any}
+                    width="100%"
+                    height={height}
+                    resizeMode="cover"
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                />
+            ) : null}
+
+            <View style={tokens.header} pointerEvents="box-none">
+                <View style={styles.avatarContainer}>{headerAvatar}</View>
+                {headerBadge}
+            </View>
+
+            <View style={tokens.footer} pointerEvents="box-none">
+                {/* Progressive background blur: clear at the top, ramping to a
+                    soft blur at the bottom (native MaskedView+BlurView / web
+                    backdrop-filter + mask-image). */}
+                <GlassFill tint="dark" intensity={tokens.blurIntensity} progressive />
+                {/* Transparent -> black gradient scrim, identical on all platforms. */}
+                <View style={[StyleSheet.absoluteFill, styles.scrim]} pointerEvents="none">
+                    <Svg width="100%" height="100%">
+                        <Defs>
+                            <LinearGradient id={scrimId} x1="0" y1="0" x2="0" y2="1">
+                                <Stop offset="0.018" stopColor="#000000" stopOpacity={0} />
+                                <Stop offset="0.974" stopColor="#000000" stopOpacity={1} />
+                            </LinearGradient>
+                        </Defs>
+                        <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${scrimId})`} />
+                    </Svg>
+                </View>
+
+                {footerSpecialBadge}
+
+                <View style={styles.footerRow}>
+                    <View style={tokens.textWrap}>
+                        <Text style={tokens.title} numberOfLines={1}>
+                            {title}
+                        </Text>
+                        {subtitle != null ? (
+                            <Text style={tokens.subtitle} numberOfLines={1}>
+                                {subtitle}
+                            </Text>
+                        ) : null}
+                    </View>
+                    {footerCta}
+                </View>
+            </View>
+        </>
+    )
+
+    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>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// Figma footer backdrop-blur token (`blur/minimal`). The footer uses a
+// *progressive* blur, so this maps the token to the intensity at the BOTTOM of
+// the ramp (the strongest point); the upper part fades to fully clear. Kept
+// intentionally small to match the design's subtle "minimal" blur.
+const BLUR_INTENSITY_FACTOR = 1.0
+
+// Special badge ("frosted" pill) — values are literals in the Figma node
+// (no dedicated tokens): bg rgba(255,245,229,0.15), 5px backdrop blur.
+const SPECIAL_BADGE_BG = 'rgba(255,245,229,0.15)'
+const SPECIAL_BADGE_INTENSITY = 17 // ~5px CSS blur / ~2 native blurAmount
+
+interface ResolvedTokens {
+    radius: number
+    blurIntensity: number
+    header: ViewStyle
+    footer: ViewStyle
+    textWrap: ViewStyle
+    title: TextStyle
+    subtitle: TextStyle
+    specialBadgeText: 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 radius = asNum(getVariableByName('productMerchandisingcard/radius', modes), 12)
+    const headerPadH = asNum(getVariableByName('productMerchandisingcard/header/padding/horizontal', modes), 12)
+    const headerPadV = asNum(getVariableByName('productMerchandisingcard/header/padding/vertical', modes), 12)
+    const footerGap = asNum(getVariableByName('productMerchandisingcard/footer/gap', modes), 8)
+    const footerPadH = asNum(getVariableByName('productMerchandisingcard/footer/padding/horizontal', modes), 16)
+    const footerPadV = asNum(getVariableByName('productMerchandisingcard/footer/padding/vertical', modes), 16)
+    const textGap = asNum(getVariableByName('productMerchandisingcard/footer/text/gap', modes), 2)
+    const blurRadius = asNum(getVariableByName('blur/minimal', modes), 29)
+
+    const titleColor = asStr(getVariableByName('productMerchandisingcard/footer/title/font/color', modes), '#ffffff')
+    const titleSize = asNum(getVariableByName('productMerchandisingcard/footer/title/fontsize', modes), 14)
+    const titleFamily = asStr(getVariableByName('productMerchandisingcard/footer/title/fontfamily', modes), 'JioType Var')
+    const titleWeight = asStr(getVariableByName('productMerchandisingcard/footer/title/fontweight', modes), '700')
+
+    const subtitleColor = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/font/color', modes), '#c5bcb5')
+    const subtitleSize = asNum(getVariableByName('productMerchandisingcard/footer/subtitle/fontsize', modes), 12)
+    const subtitleFamily = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontfamily', modes), 'JioType Var')
+    const subtitleWeight = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontweight', modes), '400')
+
+    const sbSize = asNum(getVariableByName('productMerchandisingcard/specialbadge/text/fontsize', modes), 12)
+    const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var')
+    const sbWeight = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontweight', modes), '500')
+
+    return {
+        radius,
+        blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
+        header: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-between',
+            paddingHorizontal: headerPadH,
+            paddingVertical: headerPadV,
+            zIndex: 1,
+        },
+        footer: {
+            paddingHorizontal: footerPadH,
+            paddingVertical: footerPadV,
+            gap: footerGap,
+            overflow: 'hidden',
+            zIndex: 2,
+        },
+        textWrap: {
+            flex: 1,
+            gap: textGap,
+            justifyContent: 'center',
+        },
+        title: {
+            color: titleColor,
+            fontSize: titleSize,
+            fontFamily: titleFamily,
+            fontWeight: titleWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(titleSize * 1.2),
+            includeFontPadding: false as any,
+        },
+        subtitle: {
+            color: subtitleColor,
+            fontSize: subtitleSize,
+            fontFamily: subtitleFamily,
+            fontWeight: subtitleWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(subtitleSize * 1.2),
+            includeFontPadding: false as any,
+        },
+        specialBadgeText: {
+            color: '#ffffff',
+            fontSize: sbSize,
+            fontFamily: sbFamily,
+            fontWeight: sbWeight as TextStyle['fontWeight'],
+            lineHeight: Math.round(sbSize * 1.2),
+            includeFontPadding: false as any,
+        },
+    }
+}
+
+const styles = StyleSheet.create({
+    avatarContainer: {
+        flexShrink: 1,
+        justifyContent: 'center',
+    },
+    footerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    scrim: {
+        // The footer node sits at 90% opacity in Figma; applying it to the
+        // scrim (not the content) keeps the title/CTA crisp while preserving
+        // the intended fade strength.
+        opacity: 0.9,
+    },
+    specialBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        overflow: 'hidden',
+        alignSelf: 'flex-start',
+    },
+    specialBadgeFill: {
+        borderRadius: 4,
+    },
+    specialBadgeIcon: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    pressed: {
+        opacity: 0.92,
+    },
+})
+
+export default ProductMerchandisingCard

package/src/components/ProductOverview/ProductOverview.tsx

@@ -11,6 +11,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Image from '../Image/Image'
 import ProductLabel from '../ProductLabel/ProductLabel'
+import type { Modes } from '../../design-tokens'
 
 export type ProductOverviewStat = {
     /** The large prominent value shown on top, e.g. "995", "3%". */
@@ -38,7 +39,7 @@ export type ProductOverviewProps = {
      */
     stats?: ProductOverviewStat[]
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Container style override. */
     style?: StyleProp<ViewStyle>
     /**

package/src/components/ProgressBadge/ProgressBadge.tsx

@@ -9,6 +9,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type ProgressBadgeProps = {
     /** The text displayed in the badge (e.g. "Live price...") */
@@ -18,7 +19,7 @@ export type ProgressBadgeProps = {
     /** The progress value between 0 and 100 */
     value?: number
     /** Modes object passed to `getVariableByName` for design token resolution */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Optional container style overrides */
     style?: StyleProp<ViewStyle>
     /** Optional text style overrides */