jfs-components 0.0.70 → 0.0.71

package/src/components/CardCTA/CardCTA.tsx

@@ -1,12 +1,36 @@
 import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle, type StyleProp } from 'react-native'
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { findVariablesByPattern, getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import Button from '../Button/Button'
+import Badge from '../Badge/Badge'
+import ButtonGroup from '../ButtonGroup/ButtonGroup'
+import IconButton from '../IconButton/IconButton'
+
+export type CardCTAType = 'cta' | 'rating'
+
+const optionalTokenAvailability = new Map<string, boolean>()
+
+function getOptionalVariableByName<T>(name: string, modes: Record<string, any>, fallback: T): T {
+    let isAvailable = optionalTokenAvailability.get(name)
+
+    if (isAvailable === undefined) {
+        isAvailable = findVariablesByPattern(name).some((variable) => variable.name === name)
+        optionalTokenAvailability.set(name, isAvailable)
+    }
+
+    if (!isAvailable) {
+        return fallback
+    }
+
+    return (getVariableByName(name, modes) ?? fallback) as T
+}
 
 export type CardCTAProps = {
+    /** Visual layout variant */
+    type?: CardCTAType;
     /** Title text */
     title?: string;
     /** Body / subtitle text */
@@ -17,29 +41,49 @@ export type CardCTAProps = {
     buttonLabel?: string;
     /** Callback for the default Button press */
     onPressButton?: () => void;
+    /** Label shown in the rating badge */
+    ratingLabel?: string;
+    /** Show like/dislike actions in the rating footer */
+    showRatingActions?: boolean;
+    /** Callback for the default like action */
+    onPressLike?: () => void;
+    /** Callback for the default dislike action */
+    onPressDislike?: () => void;
     /** Mode configuration for design token resolution */
     modes?: Record<string, any>;
     /** Slot: replaces the default icon area (right side) */
     iconSlot?: React.ReactNode;
     /** Slot: replaces the default Button */
     buttonSlot?: React.ReactNode;
+    /** Slot: replaces the default rating badge */
+    ratingBadgeSlot?: React.ReactNode;
+    /** Slot: replaces the default like/dislike action group */
+    ratingActionsSlot?: React.ReactNode;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
 };
 
 function CardCTA({
+    type = 'cta',
     title = 'If you have 1 line',
     body = 'Then you can have up to 3 lines in the subtext as well. This is for demonstration.',
     iconName = 'ic_upi_number',
-    buttonLabel = 'Button',
+    buttonLabel,
     onPressButton,
+    ratingLabel = '+28 Rating',
+    showRatingActions = true,
+    onPressLike,
+    onPressDislike,
     modes: propModes = EMPTY_MODES,
     iconSlot,
     buttonSlot,
+    ratingBadgeSlot,
+    ratingActionsSlot,
     style,
 }: CardCTAProps) {
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
+    const isRating = type === 'rating'
 
     const background = getVariableByName('cardCTA/background', modes) || '#ffffff'
     const radius = getVariableByName('cardCTA/radius', modes) || 12
@@ -69,13 +113,50 @@ function CardCTA({
     const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes) || 400
     const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw
 
+    const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12)
+    const ratingContentPaddingH = getOptionalVariableByName('cardCTA/rating/content/padding/horizontal', modes, 16)
+    const ratingContentPaddingV = getOptionalVariableByName('cardCTA/rating/content/padding/vertical', modes, 12)
+
+    const ratingFooterPaddingH = getOptionalVariableByName('cardCTA/rating/footer/horizontal', modes, 16)
+    const ratingFooterPaddingTop = getOptionalVariableByName('cardCTA/rating/footer/top', modes, 0)
+    const ratingFooterPaddingBottom = getOptionalVariableByName('cardCTA/rating/footer/bottom', modes, 12)
+
+    const buttonModes = {...modes, AppearanceBrand: 'Secondary', 'Button / Size': 'S'}
+    const iconButtonModes = {'Button / Size': 'S', 'Emphasis': 'Low', 'AppearanceBrand':'Neutral',...modes }
+    const effectiveButtonLabel = buttonLabel ?? (isRating ? 'Save' : 'Button')
+    const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0')
+    const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = React.useState<number | null>(null)
+
+    const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20
+    const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1
+    const measuredButtonWidth = measuredButtonLabelWidth === null
+        ? undefined
+        : Math.ceil(measuredButtonLabelWidth + (buttonPaddingH as number) * 2 + (buttonBorderSize as number) * 2)
+
+    const handleButtonLabelTextLayout = React.useCallback((event: any) => {
+        const lines = event?.nativeEvent?.lines
+        if (!Array.isArray(lines) || lines.length === 0) return
+
+        const nextWidth = Math.ceil(
+            lines.reduce((sum, line) => sum + (typeof line?.width === 'number' ? line.width : 0), 0)
+        )
+        if (nextWidth <= 0) return
+
+        setMeasuredButtonLabelWidth((currentWidth) => {
+            if (currentWidth !== null && Math.abs(currentWidth - nextWidth) < 1) {
+                return currentWidth
+            }
+            return nextWidth
+        })
+    }, [])
+
     const containerStyle: ViewStyle = {
         backgroundColor: background,
         borderRadius: radius,
         borderWidth: borderSize,
         borderColor,
-        flexDirection: 'row',
-        overflow: 'hidden',
+        flexDirection: isRating ? 'column' : 'row',
+        overflow: 'visible',
     }
 
     // NOTE: `minWidth: 0` + explicit `flexShrink: 1` are required on native.
@@ -93,6 +174,8 @@ function CardCTA({
         gap: leftGap,
         alignItems: 'flex-start',
         justifyContent: 'center',
+        overflow: 'visible',
+        zIndex: 1,
     }
 
     // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
@@ -123,6 +206,28 @@ function CardCTA({
         minWidth: 0,
     }
 
+    // Keep text shrink/wrap behavior on the left column, but let the CTA keep
+    // its own intrinsic width. On native, Yoga otherwise measures the Button
+    // with the left column's available width and the single-line label
+    // truncates even when the Button itself has no width/maxWidth constraint.
+    const buttonWrapStyle: ViewStyle = {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        overflow: 'visible',
+        zIndex: 1,
+    }
+
+    const buttonStyle: ViewStyle = {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        overflow: 'visible',
+        ...(measuredButtonWidth !== undefined ? { width: measuredButtonWidth } : {}),
+    }
+
     const titleStyle: TextStyle = {
         color: titleColor,
         fontFamily: titleFontFamily,
@@ -139,6 +244,113 @@ function CardCTA({
         fontWeight: bodyFontWeight,
     }
 
+    const ratingContentStyle: ViewStyle = {
+        paddingHorizontal: ratingContentPaddingH,
+        paddingVertical: ratingContentPaddingV,
+        gap: ratingContentGap,
+        alignItems: 'flex-start',
+    }
+
+    const ratingFooterStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        paddingHorizontal: ratingFooterPaddingH,
+        paddingTop: ratingFooterPaddingTop,
+        paddingBottom: ratingFooterPaddingBottom,
+        overflow: 'visible',
+    }
+
+    const buttonLabelStyle: TextStyle = {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexWrap: 'nowrap',
+    }
+
+    // Keep the rating CTA on an overflow-visible, non-shrinking path. The
+    // footer's row width stays fixed by the card, but Yoga must not use that
+    // width to shrink or clip the button label.
+    const ratingButtonWrapStyle: ViewStyle = {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        alignItems: 'flex-start',
+        overflow: 'visible',
+    }
+
+    const ratingButtonStyle: ViewStyle = {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        flexBasis: 'auto',
+        overflow: 'visible',
+        ...(measuredButtonWidth !== undefined ? { width: measuredButtonWidth } : {}),
+    }
+
+    const ratingButtonLabelStyle: TextStyle = {
+        flexGrow: 0,
+        flexShrink: 0,
+        flexWrap: 'nowrap',
+    }
+
+    if (isRating) {
+        return (
+            <View style={[containerStyle, style]}>
+                <View style={ratingContentStyle}>
+                    {ratingBadgeSlot ? (
+                        cloneChildrenWithModes(ratingBadgeSlot, modes)
+                    ) : (
+                        <Badge label={ratingLabel} modes={modes} />
+                    )}
+                    <View style={textWrapStyle}>
+                        <Text style={titleStyle}>{title}</Text>
+                        <Text style={bodyStyle}>{body}</Text>
+                    </View>
+                </View>
+                <View style={ratingFooterStyle}>
+                    <View style={ratingButtonWrapStyle}>
+                        {buttonSlot ? (
+                            cloneChildrenWithModes(buttonSlot, buttonModes)
+                        ) : (
+                            <Button
+                                label={effectiveButtonLabel}
+                                onPress={onPressButton || (() => {})}
+                                modes={buttonModes}
+                                style={ratingButtonStyle}
+                                renderContent={(labelStyles) => (
+                                    <Text
+                                        onTextLayout={handleButtonLabelTextLayout}
+                                        style={[labelStyles, ratingButtonLabelStyle]}
+                                    >
+                                        {nonWrappingButtonLabel}
+                                    </Text>
+                                )}
+                            />
+                        )}
+                    </View>
+                    {showRatingActions ? (
+                        ratingActionsSlot ? (
+                            cloneChildrenWithModes(ratingActionsSlot, iconButtonModes)
+                        ) : (
+                            <ButtonGroup modes={iconButtonModes}>
+                                <IconButton
+                                    iconName="ic_like"
+                                    accessibilityLabel="Like"
+                                    {...(onPressLike ? { onPress: onPressLike } : {})}
+                                />
+                                <IconButton
+                                    iconName="ic_dislike"
+                                    accessibilityLabel="Dislike"
+                                    {...(onPressDislike ? { onPress: onPressDislike } : {})}
+                                />
+                            </ButtonGroup>
+                        )
+                    ) : null}
+                </View>
+            </View>
+        )
+    }
+
     return (
         <View style={[containerStyle, style]}>
             <View style={leftWrapStyle}>
@@ -146,15 +358,26 @@ function CardCTA({
                     <Text style={titleStyle}>{title}</Text>
                     <Text style={bodyStyle}>{body}</Text>
                 </View>
-                {buttonSlot ? (
-                    cloneChildrenWithModes(buttonSlot, {...modes, AppearanceBrand: 'Secondary', 'Button / Size': 'S'})
-                ) : (
-                    <Button
-                        label={buttonLabel}
-                        onPress={onPressButton || (() => {})}
-                        modes={{...modes, AppearanceBrand: 'Secondary', 'Button / Size': 'S'}}
-                    />
-                )}
+                <View style={buttonWrapStyle}>
+                    {buttonSlot ? (
+                        cloneChildrenWithModes(buttonSlot, buttonModes)
+                    ) : (
+                        <Button
+                            label={effectiveButtonLabel}
+                            onPress={onPressButton || (() => {})}
+                            modes={buttonModes}
+                            style={buttonStyle}
+                            renderContent={(labelStyles) => (
+                                <Text
+                                    onTextLayout={handleButtonLabelTextLayout}
+                                    style={[labelStyles, buttonLabelStyle]}
+                                >
+                                    {nonWrappingButtonLabel}
+                                </Text>
+                            )}
+                        />
+                    )}
+                </View>
             </View>
             <View style={rightWrapStyle}>
                 {iconSlot ? (

package/src/components/CircularProgressBar/CircularProgressBar.tsx

@@ -0,0 +1,190 @@
+import React from 'react'
+import { StyleSheet, Text, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native'
+import Svg, { Circle } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import { IconMinus } from '../../icons/components/IconMinus'
+
+type CircularProgressBarBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
+
+export type CircularProgressBarState = 'Active' | 'Inactive'
+
+export type CircularProgressBarProps = CircularProgressBarBaseProps & {
+  /** Current progress value. Clamped between 0 and 100. */
+  value?: number
+  /** Active shows progress and value; inactive shows the track and minus icon. */
+  state?: CircularProgressBarState | boolean
+  /** Optional formatted value shown in the active state. */
+  valueLabel?: string
+  /** Design token modes forwarded to token lookups. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Track stroke style override. */
+  trackStyle?: StyleProp<ViewStyle>
+  /** Progress stroke style override. */
+  progressStyle?: StyleProp<ViewStyle>
+  /** Value text style override. */
+  valueStyle?: StyleProp<TextStyle>
+  /** Accessibility label for the whole progress component. */
+  accessibilityLabel?: string
+}
+
+const STROKE_WIDTH_RATIO = 8 / 60
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+const toNumber = (value: unknown, fallback: number) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback
+  }
+
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+
+  return fallback
+}
+
+const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
+  if (typeof value === 'number') {
+    return String(value) as TextStyle['fontWeight']
+  }
+
+  if (typeof value === 'string') {
+    return value as TextStyle['fontWeight']
+  }
+
+  return fallback
+}
+
+const getStrokeColor = (style: StyleProp<ViewStyle>, fallback: string) => {
+  const flattened = StyleSheet.flatten(style)
+  return typeof flattened.backgroundColor === 'string'
+    ? flattened.backgroundColor
+    : fallback
+}
+
+function CircularProgressBar({
+  value = 70,
+  state = 'Inactive',
+  valueLabel,
+  modes: propModes = EMPTY_MODES,
+  style,
+  trackStyle,
+  progressStyle,
+  valueStyle,
+  accessibilityLabel,
+  ...rest
+}: CircularProgressBarProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+
+  const isActive = state === true || state === 'Active'
+  const normalizedValue = clamp(value, 0, 100)
+  const size = toNumber(getVariableByName('circularProgressBar/size', modes), 60)
+  const strokeWidth = Math.max(1, size * STROKE_WIDTH_RATIO)
+  const radius = Math.max(0, (size - strokeWidth) / 2)
+  const center = size / 2
+  const circumference = 2 * Math.PI * radius
+
+  const trackColor = getStrokeColor(
+    trackStyle,
+    getVariableByName('circularProgressBar/track/color', modes) as string || '#ebebed'
+  )
+  const progressColor = getStrokeColor(
+    progressStyle,
+    getVariableByName('circularProgressBar/progress/color', modes) as string || '#25ab21'
+  )
+  const iconColor = getVariableByName('circularProgressBar/icon/color', modes) as string || '#666666'
+  const iconSize = toNumber(getVariableByName('circularProgressBar/icon/size', modes), 24)
+
+  const foreground = getVariableByName('circularProgressBar/foreground', modes) as string || '#0d0d0f'
+  const fontSize = toNumber(getVariableByName('circularProgressBar/fontSize', modes), 18)
+  const fontFamily = getVariableByName('circularProgressBar/fontFamily', modes) as string || 'JioType Var'
+  const lineHeight = toNumber(getVariableByName('circularProgressBar/lineHeight', modes), 21)
+  const fontWeight = toFontWeight(getVariableByName('circularProgressBar/fontWeight', modes), '700')
+
+  const computedContainerStyle: ViewStyle = {
+    alignItems: 'center',
+    height: size,
+    justifyContent: 'center',
+    position: 'relative',
+    width: size,
+  }
+
+  const computedValueStyle: TextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    position: 'absolute',
+    textAlign: 'center',
+  }
+
+  const iconStyle: ViewStyle = {
+    left: (size - iconSize) / 2,
+    position: 'absolute',
+    top: (size - iconSize) / 2,
+  }
+
+  const displayValue = valueLabel ?? String(Math.round(normalizedValue))
+  const defaultAccessibilityLabel =
+    accessibilityLabel ?? (isActive ? `${displayValue} out of 100` : 'Inactive progress')
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityValue={{ min: 0, max: 100, now: normalizedValue }}
+      style={[computedContainerStyle, style]}
+      {...rest}
+    >
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={trackColor}
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+        {isActive ? (
+          <Circle
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke={progressColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            fill="none"
+            strokeDasharray={`${circumference} ${circumference}`}
+            strokeDashoffset={circumference * (1 - normalizedValue / 100)}
+            rotation="-90"
+            originX={center}
+            originY={center}
+          />
+        ) : null}
+      </Svg>
+
+      {isActive ? (
+        <Text style={[computedValueStyle, valueStyle]}>
+          {displayValue}
+        </Text>
+      ) : (
+        <IconMinus
+          width={iconSize}
+          height={iconSize}
+          fill={iconColor}
+          color={iconColor}
+          style={iconStyle}
+        />
+      )}
+    </View>
+  )
+}
+
+export default CircularProgressBar