jfs-components 0.1.2 → 0.1.8

package/src/components/ProductMerchandisingCard/GlassFill.web.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native'
+
+export type GlassTint = 'dark' | 'light'
+
+export interface GlassFillProps {
+    tint?: GlassTint
+    intensity?: number
+    overlayColor?: string
+    /**
+     * Render a *progressive* (variable) blur: fully clear at the top, easing
+     * into a soft blur toward the bottom. On web this mirrors the native
+     * technique — two `backdrop-filter` layers, each clipped with an eased
+     * multi-stop `mask-image` linear-gradient so the effective blur swells
+     * smoothly toward the bottom.
+     */
+    progressive?: boolean
+    style?: StyleProp<ViewStyle>
+}
+
+const DEFAULT_FALLBACK_DARK = '#1414174a'
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66'
+
+// Mirror of the native ramp (see GlassFill.tsx). Each layer is a `mask-image`
+// gradient whose alpha stops (0 = top, 1 = bottom) ease the blur in; `amount`
+// is the layer's share of the max blur. Two gently-overlapping layers (faint
+// base + bottom accent) keep the surface subtle and glass-like rather than a
+// heavy frosted block.
+interface WebLayer {
+    amount: number
+    stops: { offset: number; opacity: number }[]
+}
+
+const PROGRESSIVE_LAYERS: WebLayer[] = [
+    {
+        amount: 0.65,
+        stops: [
+            { offset: 0.0, opacity: 0 },
+            { offset: 0.08, opacity: 0.12 },
+            { offset: 0.35, opacity: 0.4 },
+            { offset: 0.65, opacity: 0.8 },
+            { offset: 1.0, opacity: 1 },
+        ],
+    },
+    {
+        amount: 1.0,
+        stops: [
+            { offset: 0.0, opacity: 0 },
+            { offset: 0.3, opacity: 0.15 },
+            { offset: 0.65, opacity: 0.65 },
+            { offset: 1.0, opacity: 1 },
+        ],
+    },
+]
+
+function toGradient(stops: WebLayer['stops']): string {
+    const parts = stops
+        .map((s) => `rgba(0,0,0,${s.opacity}) ${Math.round(s.offset * 100)}%`)
+        .join(', ')
+    return `linear-gradient(to bottom, ${parts})`
+}
+
+/**
+ * Web counterpart of `GlassFill`.
+ *
+ * `@react-native-community/blur` ships no web implementation, so on web we
+ * render a translucent `View` with `backdrop-filter: blur()`. Native bundles
+ * pick up `GlassFill.tsx` instead via Metro's platform resolver; the web
+ * bundle picks up this file, so the native-only module is never imported here.
+ */
+function GlassFill({
+    tint = 'dark',
+    intensity = 50,
+    overlayColor,
+    progressive = false,
+    style,
+}: GlassFillProps) {
+    // intensity 0-100 -> ~0-32px CSS blur, kept in parity with the native scale.
+    const blurPx = Math.max(0, Math.min(32, Math.round(intensity * 0.32)))
+    const tintColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK)
+
+    if (progressive) {
+        // Full peak blur (parity with native) so the frosted glass is clearly
+        // engaged at the bottom; the eased masks keep the top fully clear.
+        const peakPx = Math.max(1, Math.min(32, Math.round(intensity * 0.32)))
+        return (
+            <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+                {PROGRESSIVE_LAYERS.map((layer, i) => {
+                    const px = Math.max(1, Math.round(peakPx * layer.amount))
+                    const gradient = toGradient(layer.stops)
+                    // web-only CSS (backdrop-filter / mask-image); cast because
+                    // these keys aren't in RN's ViewStyle.
+                    const webStyle = {
+                        backdropFilter: `blur(${px}px)`,
+                        WebkitBackdropFilter: `blur(${px}px)`,
+                        maskImage: gradient,
+                        WebkitMaskImage: gradient,
+                    } as unknown as ViewStyle
+                    return (
+                        <View
+                            key={i}
+                            style={[StyleSheet.absoluteFill, webStyle]}
+                            pointerEvents="none"
+                        />
+                    )
+                })}
+            </View>
+        )
+    }
+
+    return (
+        <View
+            style={[
+                StyleSheet.absoluteFill,
+                { backgroundColor: tintColor },
+                // backdrop-filter is web-only CSS; ignored by RN on native
+                // (we never bundle this file there anyway).
+                // @ts-ignore web-only style
+                { backdropFilter: `blur(${blurPx}px)`, WebkitBackdropFilter: `blur(${blurPx}px)` },
+                style,
+            ]}
+            pointerEvents="none"
+        />
+    )
+}
+
+export default GlassFill

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