jfs-components 0.0.69 → 0.0.71

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

package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx

@@ -0,0 +1,357 @@
+import React, { useMemo, useState } from 'react'
+import {
+  type LayoutChangeEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { IconChevronright } from '../../icons/components/IconChevronright'
+
+type CircularProgressBarDotedBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
+
+export type CircularProgressBarDotedProps = CircularProgressBarDotedBaseProps & {
+  /** Progress value. Clamped between 0 and 100. */
+  value?: number
+  /** Number of dots in the ring. */
+  dotCount?: number
+  /** Small label above the score. */
+  label?: string
+  /** Text below the score. */
+  tierLabel?: string
+  /** Show or hide the chevron after the tier label. */
+  showChevron?: boolean
+  /** Called when the component is pressed. */
+  onPress?: () => void
+  /** Called when the tier row is pressed. */
+  onTierPress?: () => void
+  /** Design token modes forwarded to token lookups and slot children. */
+  modes?: Record<string, any>
+  /** Slot rendered in the center of the dotted ring. Receives `modes` recursively. */
+  children?: React.ReactNode
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Ring wrapper style override. */
+  ringStyle?: StyleProp<ViewStyle>
+  /** Track dot style override. */
+  trackDotStyle?: StyleProp<ViewStyle>
+  /** Progress dot style override. */
+  progressDotStyle?: StyleProp<ViewStyle>
+  /** Center content style override. */
+  contentStyle?: StyleProp<ViewStyle>
+  /** Score tier stack style override. */
+  scoreTierStyle?: StyleProp<ViewStyle>
+  /** Score trend row style override. */
+  scoreTrendStyle?: StyleProp<ViewStyle>
+  /** Label text style override. */
+  labelStyle?: StyleProp<TextStyle>
+  /** Score text style override. */
+  scoreLabelStyle?: StyleProp<TextStyle>
+  /** Tier text style override. */
+  tierLabelStyle?: StyleProp<TextStyle>
+  /** Accessibility label for the whole progress component. */
+  accessibilityLabel?: string
+}
+
+const DEFAULT_DOT_COUNT = 24
+const START_ANGLE_DEGREES = -90
+
+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 getBackgroundColor = (style: StyleProp<ViewStyle>, fallback: string) => {
+  const flattened = StyleSheet.flatten(style)
+  return typeof flattened.backgroundColor === 'string'
+    ? flattened.backgroundColor
+    : fallback
+}
+
+function CircularProgressBarDoted({
+  value = 72,
+  dotCount = DEFAULT_DOT_COUNT,
+  label = 'Rating',
+  tierLabel = 'Doing great',
+  showChevron = true,
+  onPress,
+  onTierPress,
+  modes: propModes = EMPTY_MODES,
+  children,
+  style,
+  ringStyle,
+  trackDotStyle,
+  progressDotStyle,
+  contentStyle,
+  scoreTierStyle,
+  scoreTrendStyle,
+  labelStyle,
+  scoreLabelStyle,
+  tierLabelStyle,
+  accessibilityLabel,
+  onLayout,
+  ...rest
+}: CircularProgressBarDotedProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+  const [layoutSize, setLayoutSize] = useState(0)
+
+  const normalizedValue = clamp(value, 0, 100)
+  const resolvedDotCount = Math.max(1, Math.floor(dotCount))
+  const activeDots = normalizedValue <= 0
+    ? 0
+    : Math.ceil((normalizedValue / 100) * resolvedDotCount)
+
+  const dotShadowSize = toNumber(getVariableByName('circularProgressBarDoted/dot/shadow/size', modes), 6)
+  const baseDotSize = toNumber(getVariableByName('circularProgressBarDoted/dot/size', modes), 6)
+  const dotSize = baseDotSize + dotShadowSize
+  const outerDotSize = dotSize
+  const ringSize = layoutSize
+  const ringRadius = Math.max(0, (ringSize - outerDotSize) / 2)
+
+  const trackDotColor = getBackgroundColor(
+    trackDotStyle,
+    getVariableByName('circularProgressBarDoted/trackDot/bg', modes) as string || '#ebebed'
+  )
+  const progressDotColor = getBackgroundColor(
+    progressDotStyle,
+    getVariableByName('circularProgressBarDoted/progressDot/bg', modes) as string || '#25ab21'
+  )
+
+  const contentGap = toNumber(getVariableByName('circularProgressBarDoted/gap', modes), 12)
+  const scoreTierGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTier/gap', modes), 6)
+  const scoreTierWidth = toNumber(getVariableByName('circularProgressBarDoted/scoreTier/width', modes), 116)
+  const scoreTrendGap = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/gap', modes), 2)
+  const scoreTrendHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreTrend/height', modes), 24)
+
+  const typographyFontFamily = getVariableByName('Typography/Font Family', modes) as string || 'JioType Var'
+  const labelColor = getVariableByName('circularProgressBarDoted/label/color', modes) as string || '#080d1a'
+  const labelFontSize = toNumber(getVariableByName('Typography/Size/Body/XS', modes), 12)
+  const labelFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body Low (Regular)', modes), '400')
+
+  const scoreColor = getVariableByName('circularProgressBarDoted/scoreLabel/color', modes) as string || '#080d1a'
+  const scoreFontSize = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/fontSize', modes), 56)
+  const scoreFontFamily = getVariableByName('circularProgressBarDoted/scoreLabel/fontFamily', modes) as string || 'JioType Var'
+  const scoreLineHeight = toNumber(getVariableByName('circularProgressBarDoted/scoreLabel/lineHeight', modes), 56)
+  const scoreFontWeight = toFontWeight(getVariableByName('circularProgressBarDoted/scoreLabel/fontWeight', modes), '900')
+
+  const tierColor = getVariableByName('circularProgressBarDoted/tierLabel/color', modes) as string || '#080d1a'
+  const tierFontSize = toNumber(getVariableByName('Typography/Size/Body/M', modes), 16)
+  const tierFontWeight = toFontWeight(getVariableByName('Typography/Font Weight/Body High', modes), '700')
+  const iconColor = getVariableByName('circularProgressBarDoted/icon/color', modes) as string || '#303338'
+  const iconSize = toNumber(getVariableByName('circularProgressBarDoted/icon/size', modes), 24)
+
+  const dots = useMemo(
+    () => Array.from({ length: resolvedDotCount }, (_, index) => {
+      const angle = ((360 / resolvedDotCount) * index + START_ANGLE_DEGREES) * (Math.PI / 180)
+      const center = ringSize / 2
+
+      return {
+        isActive: index < activeDots,
+        left: center + ringRadius * Math.cos(angle) - outerDotSize / 2,
+        top: center + ringRadius * Math.sin(angle) - outerDotSize / 2,
+      }
+    }),
+    [activeDots, outerDotSize, resolvedDotCount, ringRadius, ringSize]
+  )
+
+  const containerStyle: ViewStyle = {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    height: '100%',
+    justifyContent: 'center',
+    position: 'relative',
+    width: '100%',
+  }
+
+  const computedRingStyle: ViewStyle = {
+    height: ringSize,
+    position: 'absolute',
+    width: ringSize,
+  }
+
+  const dotOuterStyle: ViewStyle = {
+    alignItems: 'center',
+    height: outerDotSize,
+    justifyContent: 'center',
+    position: 'absolute',
+    width: outerDotSize,
+  }
+
+  const dotInnerStyle: ViewStyle = {
+    borderRadius: dotSize / 2,
+    height: dotSize,
+    width: dotSize,
+  }
+
+  const computedContentStyle: ViewStyle = {
+    alignItems: 'center',
+    gap: contentGap,
+    justifyContent: 'center',
+    minWidth: scoreTierWidth,
+  }
+
+  const computedScoreTierStyle: ViewStyle = {
+    alignItems: 'center',
+    gap: scoreTierGap,
+    justifyContent: 'center',
+    width: '100%',
+  }
+
+  const computedScoreTrendStyle: ViewStyle = {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: scoreTrendGap,
+    height: scoreTrendHeight,
+    justifyContent: 'center',
+    minWidth: scoreTierWidth,
+  }
+
+  const computedLabelStyle: TextStyle = {
+    color: labelColor,
+    fontFamily: typographyFontFamily,
+    fontSize: labelFontSize,
+    fontWeight: labelFontWeight,
+    lineHeight: labelFontSize * 1.3,
+    textAlign: 'center',
+  }
+
+  const computedScoreLabelStyle: TextStyle = {
+    color: scoreColor,
+    fontFamily: scoreFontFamily,
+    fontSize: scoreFontSize,
+    fontWeight: scoreFontWeight,
+    lineHeight: scoreLineHeight,
+    textAlign: 'center',
+  }
+
+  const computedTierLabelStyle: TextStyle = {
+    color: tierColor,
+    fontFamily: typographyFontFamily,
+    fontSize: tierFontSize,
+    fontWeight: tierFontWeight,
+    lineHeight: tierFontSize * 1.3,
+    textAlign: 'center',
+  }
+
+  const resolvedScoreLabel = String(Math.round(normalizedValue))
+  const defaultAccessibilityLabel =
+    accessibilityLabel ?? `${label}. ${resolvedScoreLabel} out of 100. ${tierLabel}`
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    onLayout?.(event)
+
+    const { width, height } = event.nativeEvent.layout
+    const nextSize = Math.max(0, Math.min(width, height))
+    setLayoutSize((currentSize) => currentSize === nextSize ? currentSize : nextSize)
+  }
+
+  const trendContent = (
+    <>
+      <Text numberOfLines={1} style={[computedTierLabelStyle, tierLabelStyle]}>
+        {tierLabel}
+      </Text>
+      {showChevron ? (
+        <IconChevronright
+          width={iconSize}
+          height={iconSize}
+          fill={iconColor}
+          color={iconColor}
+        />
+      ) : null}
+    </>
+  )
+
+  return (
+    <Pressable
+      accessibilityRole="progressbar"
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityValue={{ min: 0, max: 100, now: normalizedValue }}
+      disabled={!onPress}
+      onLayout={handleLayout}
+      onPress={onPress}
+      style={[containerStyle, style]}
+      {...rest}
+    >
+      <View pointerEvents="none" style={[computedRingStyle, ringStyle]}>
+        {dots.map((dot, index) => (
+          <View
+            key={index}
+            style={[
+              dotOuterStyle,
+              { left: dot.left, top: dot.top },
+            ]}
+          >
+            <View
+              style={[
+                dotInnerStyle,
+                { backgroundColor: dot.isActive ? progressDotColor : trackDotColor },
+                dot.isActive ? progressDotStyle : trackDotStyle,
+              ]}
+            />
+          </View>
+        ))}
+      </View>
+
+      <View style={[computedContentStyle, contentStyle]}>
+        {children ? (
+          cloneChildrenWithModes(children, modes)
+        ) : (
+          <>
+            <View style={[computedScoreTierStyle, scoreTierStyle]}>
+              <Text style={[computedLabelStyle, labelStyle]}>
+                {label}
+              </Text>
+              <Text style={[computedScoreLabelStyle, scoreLabelStyle]}>
+                {resolvedScoreLabel}
+              </Text>
+            </View>
+            {onTierPress ? (
+              <Pressable
+                accessibilityRole="button"
+                onPress={onTierPress}
+                style={[computedScoreTrendStyle, scoreTrendStyle]}
+              >
+                {trendContent}
+              </Pressable>
+            ) : (
+              <View style={[computedScoreTrendStyle, scoreTrendStyle]}>
+                {trendContent}
+              </View>
+            )}
+          </>
+        )}
+      </View>
+    </Pressable>
+  )
+}
+
+export default CircularProgressBarDoted