jfs-components 0.1.0 → 0.1.8

package/src/components/ProductMerchandisingCard/GlassFill.tsx

@@ -0,0 +1,276 @@
+import React, { useId } from 'react'
+import { View, StyleSheet, Platform, UIManager, type ViewStyle, type StyleProp } from 'react-native'
+import { BlurView } from '@react-native-community/blur'
+import MaskedView from '@react-native-masked-view/masked-view'
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'
+
+export type GlassTint = 'dark' | 'light'
+
+export interface GlassFillProps {
+    /**
+     * Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
+     * (`'dark'` | `'light'`) and drives the iOS
+     * `reducedTransparencyFallbackColor` so the surface degrades gracefully
+     * when "Reduce Transparency" is enabled in system accessibility settings.
+     */
+    tint?: GlassTint
+    /**
+     * Blur strength as a 0–100 "intensity" value. Internally mapped to
+     * `@react-native-community/blur`'s `blurAmount`. When `progressive` is set,
+     * this is the strength at the BOTTOM of the ramp (the strongest point); the
+     * ramp is kept intentionally gentle so the surface reads as subtle glass
+     * rather than a heavy frosted block.
+     */
+    intensity?: number
+    /**
+     * Token-derived color tint laid OVER the live blur. Painted as a
+     * translucent overlay so the glass keeps its color signature even when the
+     * platform blur quality varies (or realtime blur is unavailable).
+     */
+    overlayColor?: string
+    /**
+     * Render a *progressive* (variable) blur instead of a uniform one: fully
+     * clear at the top, easing into a soft blur toward the bottom. Implemented
+     * by stacking two `MaskedView` + `BlurView` layers (a faint base + a
+     * slightly stronger accent near the bottom), each revealed via an eased
+     * multi-stop SVG gradient mask so the blur swells smoothly rather than
+     * along a hard seam. Works on iOS and Android with no extra native module.
+     */
+    progressive?: boolean
+    /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
+    style?: StyleProp<ViewStyle>
+}
+
+const DEFAULT_FALLBACK_DARK = '#1414174a'
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66'
+
+// The native view-manager name registered by `@react-native-community/blur`
+// (`AndroidBlurView` on Android, `BlurView` on iOS).
+const NATIVE_BLUR_NAME = Platform.OS === 'android' ? 'AndroidBlurView' : 'BlurView'
+
+/**
+ * Alpha stop on a layer's vertical reveal mask. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the mask alpha
+ * there (0 = layer hidden / fully clear, 1 = layer fully applied).
+ *
+ * Using several stops (rather than a single linear 0 → 1 ramp) lets each layer
+ * EASE in, so the blur swells smoothly toward the bottom instead of appearing
+ * along a hard horizontal seam. That soft S-curve is what gives the surface its
+ * "glass" feel rather than a flat translucent panel.
+ */
+interface MaskStop {
+    offset: number
+    opacity: number
+}
+
+/**
+ * A single layer of the progressive ramp.
+ *  - `stops` describe how this layer is revealed from top to bottom.
+ *  - `amount` is this layer's share (0–1) of the max `blurAmount`.
+ *
+ * We stack just TWO layers on both platforms: a faint base blur that covers
+ * most of the footer and a slightly stronger accent concentrated near the
+ * bottom. Keeping the overlap shallow avoids compounding the dark tint of
+ * multiple `BlurView`s (which is what made the earlier 3-layer ramp read as a
+ * heavy block), while still giving a genuine variable-radius result — the blur
+ * radius grows toward the bottom where the two layers overlap.
+ */
+interface ProgressiveLayer {
+    stops: MaskStop[]
+    amount: number
+}
+
+// Base reveal: a faint trace of blur begins near the very top and grows
+// steadily downward, so the upper half still carries visible glass rather than
+// snapping clear. Also reused for the no-native-blur fallback scrim.
+const BASE_MASK_STOPS: MaskStop[] = [
+    { 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 },
+]
+
+const PROGRESSIVE_LAYERS: ProgressiveLayer[] = [
+    { amount: 0.65, stops: BASE_MASK_STOPS },
+    // Accent: the strongest blur, gathering over the lower portion for depth.
+    {
+        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 },
+        ],
+    },
+]
+
+/**
+ * Probe ONCE whether the native blur view is actually present in this binary.
+ *
+ * `@react-native-community/blur` is a peer dependency so its JS always imports,
+ * but on a build where the native module was never linked (e.g. `pod install`
+ * wasn't run on iOS) rendering `<BlurView>` shows React Native's red
+ * "Unimplemented component <BlurView>" placeholder. Detecting availability up
+ * front lets us fall back to a tinted scrim instead of crashing the surface.
+ *
+ *   - New architecture (bridgeless): `getViewManagerConfig` raises a soft error,
+ *     so we MUST use `hasViewManagerConfig` -> Fabric component registry.
+ *   - Old architecture (Paper): `getViewManagerConfig` returns null when the
+ *     view manager isn't registered.
+ */
+const NATIVE_BLUR_SUPPORTED: boolean = (() => {
+    try {
+        const um = UIManager as unknown as {
+            hasViewManagerConfig?: (name: string) => boolean
+            getViewManagerConfig?: (name: string) => unknown
+        }
+        if (typeof um.hasViewManagerConfig === 'function') {
+            return um.hasViewManagerConfig(NATIVE_BLUR_NAME) === true
+        }
+        if (typeof um.getViewManagerConfig === 'function') {
+            return um.getViewManagerConfig(NATIVE_BLUR_NAME) != null
+        }
+    } catch {
+        // Any probe failure -> treat blur as unavailable and use the fallback.
+    }
+    return false
+})()
+
+/**
+ * Vertical alpha-gradient mask drawn with `react-native-svg`. `MaskedView`
+ * reveals its child in proportion to this mask's alpha, so feeding it an eased
+ * multi-stop gradient makes the layer's blur swell in smoothly from top to
+ * bottom instead of along a hard seam.
+ */
+function GradientMask({ id, stops }: { id: string; stops: MaskStop[] }) {
+    return (
+        <Svg width="100%" height="100%">
+            <Defs>
+                <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+                    {stops.map((s, i) => (
+                        <Stop key={i} offset={s.offset} stopColor="#000000" stopOpacity={s.opacity} />
+                    ))}
+                </LinearGradient>
+            </Defs>
+            <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${id})`} />
+        </Svg>
+    )
+}
+
+/**
+ * Glass / frosted surface for native (iOS + Android).
+ *
+ * Why this lives in its own platform-split file (mirrors `MediaCard/GlassFill`):
+ *   - `@react-native-community/blur` is a native-only module; importing it on
+ *     web throws because it references native components not registered there.
+ *     Metro's platform-extension resolution picks `GlassFill.tsx` for native
+ *     and `GlassFill.web.tsx` for web, keeping the web bundle native-free.
+ *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so the
+ *     Figma `blur/minimal` token semantics survive across platforms.
+ *
+ * On iOS (with the pod installed) this is a real `UIVisualEffectView` (true
+ * OS-level live blur). On Android it uses the community blur view. When the
+ * native module isn't linked in the running binary, the component degrades to
+ * a translucent tinted scrim (`reducedTransparencyFallbackColor` / fallback
+ * color) instead of rendering the "Unimplemented component" placeholder.
+ */
+function GlassFill({
+    tint = 'dark',
+    intensity = 50,
+    overlayColor,
+    progressive = false,
+    style,
+}: GlassFillProps) {
+    const rawId = useId()
+    const maskId = `glass-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`
+
+    const blurType: 'light' | 'dark' = tint === 'light' ? 'light' : 'dark'
+    const uniformBlurAmount = Math.max(0, Math.min(32, Math.round(intensity * 0.32)))
+    const fallbackColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK)
+
+    // ----- Progressive (variable) blur -------------------------------------
+    if (progressive) {
+        // Peak blur radius (at the bottom). Full strength so the frosted glass
+        // is clearly engaged where the layers overlap, while the eased masks
+        // keep the top of the surface fully clear.
+        const peakBlur = Math.max(1, Math.min(32, Math.round(intensity * 0.32)))
+
+        // Native blur not linked -> tint eases from transparent (top) to a soft
+        // fallback color (bottom) so the surface still reads as gentle glass.
+        if (!NATIVE_BLUR_SUPPORTED) {
+            return (
+                <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+                    <MaskedView
+                        style={StyleSheet.absoluteFill}
+                        maskElement={<GradientMask id={`${maskId}-fb`} stops={BASE_MASK_STOPS} />}
+                    >
+                        <View style={[StyleSheet.absoluteFill, { backgroundColor: fallbackColor }]} />
+                    </MaskedView>
+                </View>
+            )
+        }
+
+        return (
+            <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+                {PROGRESSIVE_LAYERS.map((layer, i) => {
+                    const amount = Math.max(1, Math.round(peakBlur * layer.amount))
+                    return (
+                        <MaskedView
+                            key={i}
+                            style={StyleSheet.absoluteFill}
+                            maskElement={<GradientMask id={`${maskId}-${i}`} stops={layer.stops} />}
+                        >
+                            <BlurView
+                                style={StyleSheet.absoluteFill}
+                                blurType={blurType}
+                                blurAmount={amount}
+                                reducedTransparencyFallbackColor={fallbackColor}
+                            />
+                        </MaskedView>
+                    )
+                })}
+            </View>
+        )
+    }
+
+    // ----- Uniform blur (default) ------------------------------------------
+    // Native blur not linked in this build -> render a translucent tinted scrim
+    // so the surface still reads as frosted glass and never shows RN's
+    // "Unimplemented component <BlurView>" box.
+    if (!NATIVE_BLUR_SUPPORTED) {
+        return (
+            <View
+                style={[StyleSheet.absoluteFill, { backgroundColor: fallbackColor }, style]}
+                pointerEvents="none"
+            />
+        )
+    }
+
+    return (
+        <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+            <BlurView
+                style={StyleSheet.absoluteFill}
+                blurType={blurType}
+                blurAmount={uniformBlurAmount}
+                reducedTransparencyFallbackColor={fallbackColor}
+            />
+            {overlayColor != null ? (
+                <View style={[StyleSheet.absoluteFill, { backgroundColor: overlayColor }]} />
+            ) : null}
+            {Platform.OS === 'android' ? (
+                <View
+                    style={[
+                        StyleSheet.absoluteFill,
+                        {
+                            backgroundColor: 'rgba(255,255,255,0.03)',
+                            opacity: 0.6,
+                        },
+                    ]}
+                />
+            ) : null}
+        </View>
+    )
+}
+
+export default GlassFill

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