jfs-components 0.0.71 → 0.0.73

package/src/components/ProductOverview/ProductOverview.tsx

@@ -0,0 +1,236 @@
+import React from 'react'
+import {
+    View,
+    Text,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+    type ImageSourcePropType,
+} from 'react-native'
+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'
+
+export type ProductOverviewStat = {
+    /** The large prominent value shown on top, e.g. "995", "3%". */
+    value: string
+    /** The descriptive label rendered beneath the value, e.g. "Purity". */
+    label: string
+}
+
+export type ProductOverviewProps = {
+    /** Hero image source rendered at the top of the card. */
+    imageSource?: ImageSourcePropType | string
+    /** Aspect ratio for the hero image. Defaults to the Figma frame (288:170). */
+    imageRatio?: number
+    /** Avatar source for the inline ProductLabel chip. */
+    labelImageSource?: ImageSourcePropType | string
+    /** Text shown next to the avatar in the ProductLabel chip. */
+    label?: string
+    /** The large product name, e.g. "0.5g Gold Coin". */
+    productName?: string
+    /** The short multi-line description below the product name. */
+    description?: string
+    /**
+     * Stats rendered in the bottom row. Each stat shows a large value above a
+     * smaller label. Pass an empty array (or `null`) to hide the row.
+     */
+    stats?: ProductOverviewStat[]
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>
+    /**
+     * Custom slot rendered between the description and the stats row, useful
+     * for badges, callouts, etc. Receives the same `modes` as the parent.
+     */
+    children?: React.ReactNode
+}
+
+const DEFAULT_STATS: ProductOverviewStat[] = [
+    { value: '995', label: 'Purity' },
+    { value: '3%', label: 'GST' },
+]
+
+const ProductOverview = ({
+    imageSource,
+    imageRatio = 288 / 170,
+    labelImageSource,
+    label = 'Gold',
+    productName = '0.5g Gold Coin',
+    description = 'Your gold is insured from our vault to you. If lost or damaged, we’ll replace it.',
+    stats = DEFAULT_STATS,
+    modes = EMPTY_MODES,
+    style,
+    children,
+}: ProductOverviewProps) => {
+    const padding = (getVariableByName('productOverview/padding', modes) as number | null) ?? 24
+    const gap = (getVariableByName('productOverview/gap', modes) as number | null) ?? 12
+    const background =
+        (getVariableByName('productOverview/background', modes) as string | null) ?? '#ffffff'
+
+    const productNameColor =
+        (getVariableByName('productOverview/productName/color', modes) as string | null) ??
+        '#0d0d0f'
+    const productNameFontFamily =
+        (getVariableByName('productOverview/productName/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const productNameFontSize =
+        (getVariableByName('productOverview/productName/fontSize', modes) as number | null) ?? 26
+    const productNameFontWeight =
+        getVariableByName('productOverview/productName/fontWeight', modes) ?? 900
+    const productNameLineHeight =
+        (getVariableByName('productOverview/productName/lineHeight', modes) as number | null) ?? 26
+
+    const descriptionColor =
+        (getVariableByName('productOverview/description/color', modes) as string | null) ??
+        '#1a1c1f'
+    const descriptionFontFamily =
+        (getVariableByName('productOverview/description/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const descriptionFontSize =
+        (getVariableByName('productOverview/description/fontSize', modes) as number | null) ?? 14
+    const descriptionFontWeight =
+        getVariableByName('productOverview/description/fontWeight', modes) ?? 500
+    const descriptionLineHeight =
+        (getVariableByName('productOverview/description/lineHeight', modes) as number | null) ??
+        18.2
+
+    const statGap = (getVariableByName('productOverview/stat/gap', modes) as number | null) ?? 2
+    const statValueColor =
+        (getVariableByName('productOverview/stat/value/color', modes) as string | null) ??
+        '#141414'
+    const statValueFontFamily =
+        (getVariableByName('productOverview/stat/value/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const statValueFontSize =
+        (getVariableByName('productOverview/stat/value/fontSize', modes) as number | null) ?? 20
+    const statValueFontWeight =
+        getVariableByName('productOverview/stat/value/fontWeight', modes) ?? 900
+    const statValueLineHeight =
+        (getVariableByName('productOverview/stat/value/lineHeight', modes) as number | null) ?? 20
+
+    const statLabelColor = productNameColor
+    const statLabelFontFamily =
+        (getVariableByName('productOverview/stat/label/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const statLabelFontSize =
+        (getVariableByName('productOverview/stat/label/fontSize', modes) as number | null) ?? 12
+    const statLabelFontWeight =
+        getVariableByName('productOverview/stat/label/fontWeight', modes) ?? 400
+    const statLabelLineHeight =
+        (getVariableByName('productOverview/stat/label/lineHeight', modes) as number | null) ??
+        15.6
+
+    const productNameStyle: TextStyle = {
+        color: productNameColor,
+        fontFamily: productNameFontFamily,
+        fontSize: productNameFontSize,
+        fontWeight: String(productNameFontWeight) as TextStyle['fontWeight'],
+        lineHeight: productNameLineHeight,
+        textAlign: 'center',
+    }
+
+    const descriptionStyle: TextStyle = {
+        color: descriptionColor,
+        fontFamily: descriptionFontFamily,
+        fontSize: descriptionFontSize,
+        fontWeight: String(descriptionFontWeight) as TextStyle['fontWeight'],
+        lineHeight: descriptionLineHeight,
+        textAlign: 'center',
+    }
+
+    const statValueStyle: TextStyle = {
+        color: statValueColor,
+        fontFamily: statValueFontFamily,
+        fontSize: statValueFontSize,
+        fontWeight: String(statValueFontWeight) as TextStyle['fontWeight'],
+        lineHeight: statValueLineHeight,
+    }
+
+    const statLabelStyle: TextStyle = {
+        color: statLabelColor,
+        fontFamily: statLabelFontFamily,
+        fontSize: statLabelFontSize,
+        fontWeight: String(statLabelFontWeight) as TextStyle['fontWeight'],
+        lineHeight: statLabelLineHeight,
+        textAlign: 'center',
+    }
+
+    const showStats = Array.isArray(stats) && stats.length > 0
+
+    return (
+        <View
+            style={[
+                {
+                    backgroundColor: background,
+                    padding,
+                    gap,
+                    alignItems: 'center',
+                    width: '100%',
+                },
+                style,
+            ]}
+        >
+            {imageSource != null && (
+                <Image
+                    imageSource={imageSource}
+                    ratio={imageRatio}
+                    resizeMode="contain"
+                    accessibilityElementsHidden
+                    importantForAccessibility="no"
+                />
+            )}
+
+            <ProductLabel
+                label={label}
+                {...(labelImageSource != null && { imageSource: labelImageSource })}
+                modes={modes}
+            />
+
+            {productName ? (
+                <Text style={productNameStyle} accessibilityRole="header">
+                    {productName}
+                </Text>
+            ) : null}
+
+            {description ? <Text style={descriptionStyle}>{description}</Text> : null}
+
+            {children ? <>{cloneChildrenWithModes(children, modes)}</> : null}
+
+            {showStats && (
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                    }}
+                >
+                    {stats.map((stat, index) => (
+                        <View
+                            key={`${stat.label}-${index}`}
+                            style={{
+                                flex: 1,
+                                minWidth: 0,
+                                alignItems: 'center',
+                                gap: statGap,
+                                overflow: 'hidden',
+                            }}
+                        >
+                            <Text style={statValueStyle} numberOfLines={1}>
+                                {stat.value}
+                            </Text>
+                            <Text style={statLabelStyle} numberOfLines={1}>
+                                {stat.label}
+                            </Text>
+                        </View>
+                    ))}
+                </View>
+            )}
+        </View>
+    )
+}
+
+export default ProductOverview

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,227 @@
+import React, { useMemo, useState } from 'react'
+import {
+    Pressable,
+    View,
+    StyleSheet,
+    Platform,
+    ViewStyle,
+    DimensionValue,
+    StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface RadioProps {
+    /**
+     * Whether the radio is selected.
+     */
+    selected?: boolean
+    /**
+     * Whether the radio is disabled.
+     */
+    disabled?: boolean
+    /**
+     * Function to call when the radio is pressed.
+     */
+    onPress?: () => void
+    /**
+     * Modes object for design-token resolution.
+     */
+    modes?: Record<string, any>
+    /**
+     * Custom style for the radio container.
+     */
+    style?: StyleProp<ViewStyle>
+    /**
+     * Test ID for testing.
+     */
+    testID?: string
+}
+
+// ---------------------------------------------------------------------------
+// Radio
+// ---------------------------------------------------------------------------
+
+export function Radio({
+    selected = false,
+    disabled = false,
+    onPress,
+    modes = EMPTY_MODES,
+    style,
+    testID,
+}: RadioProps) {
+    // ---- Refs & State ----
+    const [hovered, setHovered] = useState(false)
+    const [focused, setFocused] = useState(false)
+    const [pressed, setPressed] = useState(false)
+
+    // ---- Dimensions ----
+    const widthStr = getVariableByName('radio/width', modes) || '18'
+    const heightStr = getVariableByName('radio/height', modes) || '18'
+    const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10'
+
+    const width = parseFloat(widthStr?.toString() || '18')
+    const height = parseFloat(heightStr?.toString() || '18')
+    const selectorSize = parseFloat(selectorSizeStr?.toString() || '10')
+
+    // ---- State Logic ----
+    // Priority: Disabled -> Focused -> Hover/Pressed -> Idle
+    // Note: Design treats Active (Pressed) similar to Selected for some styles, 
+    // but usually in Radios, Pressed is a transient state.
+    // We will map:
+    // - Disabled -> 'disabled'
+    // - Focused -> 'focus'
+    // - Hovered -> 'hover'
+    // - Idle -> 'idle'
+
+    // We handle `selected` as a separate dimension derived from state.
+
+    let visualState = 'idle'
+    if (disabled) {
+        visualState = 'disabled'
+    } else if (focused) {
+        visualState = 'focus'
+    } else if (hovered || pressed) {
+        visualState = 'hover'
+    }
+
+    // Construct token paths based on state + selected
+    let prefix = `radio/${visualState}`
+    if (visualState === 'idle' && selected) {
+        prefix = `radio/selected`
+    } else if (selected) {
+        prefix = `radio/${visualState}Selected`
+    }
+
+    // ---- Colors & Border ----
+
+    const resolveColor = (path: string, fallback: string) => {
+        return getVariableByName(path, modes) || fallback
+    }
+
+    // Background Color
+    let bgColorVar = `${prefix}/background/color`
+    // Fix for disabledSelected weirdness if needed
+    if (visualState === 'disabled' && selected) {
+        // Check specific path from dump: `radio/disabledSelected/background`
+        if (!getVariableByName(`${prefix}/background/color`, modes)) {
+            bgColorVar = `${prefix}/background`
+        }
+    }
+
+    // Border Color
+    let borderColorVar = `${prefix}/border/color`
+
+    // Border Width
+    let borderWidthVar = `${prefix}/border/size`
+    // Fix for huge path: `radio/disabled/radio/disabled/border/size`
+    if (visualState === 'disabled' && !selected) {
+        if (getVariableByName('radio/disabled/radio/disabled/border/size', modes)) {
+            borderWidthVar = 'radio/disabled/radio/disabled/border/size'
+        }
+    }
+
+    // Selector Color
+    let selectorBgVar = `${prefix}/selector/background/color`
+    if (!selected) {
+        selectorBgVar = 'transparent'
+    }
+
+    // Shadows (Glow)
+    let shadowSizeVar = `${prefix}/boxShadow/size`
+    let shadowColorVar = `${prefix}/shadow/color`
+
+    // Resolve Values
+    const backgroundColor = resolveColor(bgColorVar, 'transparent')
+    const borderColor = resolveColor(borderColorVar, 'transparent')
+    const borderWidth = parseFloat(getVariableByName(borderWidthVar, modes)?.toString() || '1')
+    const selectorColor = resolveColor(selectorBgVar, 'transparent')
+
+    const shadowSize = parseFloat(getVariableByName(shadowSizeVar, modes)?.toString() || '0')
+    const shadowColor = resolveColor(shadowColorVar, 'transparent')
+
+    // Styles
+    const containerStyle: any = {
+        width,
+        height,
+        borderRadius: width / 2, // 9999px -> circle
+        borderWidth,
+        borderColor,
+        backgroundColor,
+        justifyContent: 'center',
+        alignItems: 'center',
+        // Web shadow (ring)
+        ...(Platform.OS === 'web' && shadowSize > 0 ? {
+            boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`,
+        } : {}),
+    }
+
+    const selectorStyle: ViewStyle = {
+        width: selectorSize,
+        height: selectorSize,
+        borderRadius: selectorSize / 2,
+        backgroundColor: selectorColor,
+    }
+
+    // Dummy block for token extraction (static analysis)
+    if (false as boolean) {
+        getVariableByName('radio/idle/background/color')
+        getVariableByName('radio/idle/border/color')
+        getVariableByName('radio/selector/size')
+        getVariableByName('radio/width')
+        getVariableByName('radio/height')
+        getVariableByName('radio/background/color')
+        getVariableByName('radio/hover/background/color')
+        getVariableByName('radio/hover/border/color')
+        getVariableByName('radio/hover/boxShadow/size')
+        getVariableByName('radio/hover/shadow/color')
+        getVariableByName('radio/selected/background/color')
+        getVariableByName('radio/selected/border/color')
+        getVariableByName('radio/selected/selector/background/color')
+        getVariableByName('radio/hoverSelected/background/color')
+        getVariableByName('radio/hoverSelected/border/color')
+        getVariableByName('radio/hoverSelected/boxShadow/size')
+        getVariableByName('radio/hoverSelected/shadow/color')
+        getVariableByName('radio/hoverSelected/selector/background/color')
+        getVariableByName('radio/focus/background/color')
+        getVariableByName('radio/focus/border/color')
+        getVariableByName('radio/focus/border/size')
+        getVariableByName('radio/focus/boxShadow/size')
+        getVariableByName('radio/focus/shadow/color')
+        getVariableByName('radio/focusSelected/background/color')
+        getVariableByName('radio/focusSelected/selector/background/color')
+        getVariableByName('radio/focusSelected/border/size')
+        getVariableByName('radio/disabled/radio/disabled/border/size')
+        getVariableByName('radio/disabled/background/color')
+        getVariableByName('radio/disabled/border/color')
+        getVariableByName('radio/disabledSelected/selector/background/color')
+        getVariableByName('radio/disabledSelected/background')
+        getVariableByName('radio/disabledSelected/border/color')
+    }
+
+    return (
+        <Pressable
+            testID={testID}
+            disabled={disabled}
+            onPress={onPress}
+            onHoverIn={() => setHovered(true)}
+            onHoverOut={() => setHovered(false)}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            onPressIn={() => setPressed(true)}
+            onPressOut={() => setPressed(false)}
+            style={({ pressed: isPressed }) => [
+                containerStyle,
+                style,
+            ]}
+        >
+            <View style={selectorStyle} />
+        </Pressable>
+    )
+}
+
+export default Radio