jfs-components 0.0.70 → 0.0.71

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

package/src/components/CircularRating/CircularRating.tsx

@@ -0,0 +1,241 @@
+import React, { useMemo } from 'react'
+import {
+  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 Icon from '../../icons/Icon'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import CircularProgressBarDoted from '../CircularProgressBarDoted/CircularProgressBarDoted'
+import Nudge from '../Nudge/Nudge'
+
+type CircularRatingBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
+
+export type CircularRatingProps = CircularRatingBaseProps & {
+  /** Rating value. Clamped by CircularProgressBarDoted between 0 and 100. */
+  value?: number
+  /** Number of dots rendered around the rating ring. */
+  dotCount?: number
+  /** Small label above the score. */
+  label?: string
+  /** Text below the score. */
+  tierLabel?: string
+  /** Footer timestamp/copy shown below the rating. */
+  footerText?: string
+  /** Show the footer info icon. */
+  showFooterIcon?: boolean
+  /** Show the bottom inline nudge. */
+  showNudge?: boolean
+  /** Body text for the default bottom nudge. */
+  nudgeBody?: string
+  /** Button label for the default bottom nudge. */
+  nudgeButtonLabel?: string
+  /** Called when the nudge button is pressed. */
+  onPressNudgeButton?: () => void
+  /** Called when the rating tier row is pressed. */
+  onTierPress?: () => void
+  /** Optional footer slot. Receives `modes` recursively. */
+  footerSlot?: React.ReactNode
+  /** Optional nudge slot. Receives `modes` recursively. */
+  nudgeSlot?: React.ReactNode
+  /** Design token modes forwarded to token lookups and child components. */
+  modes?: Record<string, any>
+  /** Optional container style overrides. */
+  style?: StyleProp<ViewStyle>
+  /** Optional rating ring wrapper style overrides. */
+  ratingStyle?: StyleProp<ViewStyle>
+  /** Optional footer row style overrides. */
+  footerStyle?: StyleProp<ViewStyle>
+  /** Optional footer text style overrides. */
+  footerTextStyle?: StyleProp<TextStyle>
+  /** Optional nudge style overrides. */
+  nudgeStyle?: StyleProp<ViewStyle>
+  /** Accessibility label for the whole component. */
+  accessibilityLabel?: string
+}
+
+interface CircularRatingTokens {
+  containerStyle: ViewStyle
+  ratingStyle: ViewStyle
+  footerStyle: ViewStyle
+  footerTextStyle: TextStyle
+  footerIconColor: string
+  footerIconSize: number
+}
+
+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
+}
+
+function resolveCircularRatingTokens(modes: Record<string, any>): CircularRatingTokens {
+  const gap = toNumber(getVariableByName('circularRating/gap', modes), 32)
+  const padding = toNumber(getVariableByName('circularRating/padding', modes), 10)
+
+  const footerGap = toNumber(getVariableByName('circularRating/footer/gap', modes), 4)
+  const footerHeight = toNumber(getVariableByName('circularRating/footer/height', modes), 16)
+  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes) || '#0d0d0f'
+  const footerTextFontSize = toNumber(getVariableByName('circularRating/footer/text/fontSize', modes), 12)
+  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes) || 'JioType Var'
+  const footerTextLineHeight = toNumber(getVariableByName('circularRating/footer/text/lineHeight', modes), 16)
+  const footerTextFontWeight = toFontWeight(
+    getVariableByName('circularRating/footer/text/fontWeight', modes),
+    '400'
+  )
+
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      gap,
+      justifyContent: 'center',
+      padding,
+    },
+    ratingStyle: {
+      height: 320,
+      width: 320,
+    },
+    footerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: footerGap,
+      height: footerHeight,
+      justifyContent: 'center',
+      width: '100%',
+    },
+    footerTextStyle: {
+      color: footerTextColor as string,
+      fontFamily: footerTextFontFamily as string,
+      fontSize: footerTextFontSize,
+      fontWeight: footerTextFontWeight,
+      lineHeight: footerTextLineHeight,
+      textAlign: 'center',
+    },
+    footerIconColor: (getVariableByName('circularRating/footer/icon/color', modes) || '#1a1c1f') as string,
+    footerIconSize: toNumber(getVariableByName('circularRating/footer/icon/size', modes), 16),
+  }
+}
+
+function CircularRating({
+  value = 72,
+  dotCount = 24,
+  label = 'Rating',
+  tierLabel = 'Doing great',
+  footerText = 'Updated on 1 March',
+  showFooterIcon = true,
+  showNudge = true,
+  nudgeBody = 'Split this transaction into installments',
+  nudgeButtonLabel = 'Button',
+  onPressNudgeButton,
+  onTierPress,
+  footerSlot,
+  nudgeSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ratingStyle,
+  footerStyle,
+  footerTextStyle,
+  nudgeStyle,
+  accessibilityLabel,
+  ...rest
+}: CircularRatingProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+  const tokens = useMemo(() => resolveCircularRatingTokens(modes), [modes])
+
+  const processedFooterSlot = useMemo(() => {
+    if (!footerSlot) return null
+    const processed = cloneChildrenWithModes(React.Children.toArray(footerSlot), modes)
+    return processed.length === 1 ? processed[0] : processed
+  }, [footerSlot, modes])
+
+  const processedNudgeSlot = useMemo(() => {
+    if (!nudgeSlot) return null
+    const processed = cloneChildrenWithModes(React.Children.toArray(nudgeSlot), modes)
+    return processed.length === 1 ? processed[0] : processed
+  }, [nudgeSlot, modes])
+
+  const defaultAccessibilityLabel =
+    accessibilityLabel ?? `${label}. ${Math.round(value)} out of 100. ${tierLabel}. ${footerText}`
+
+  return (
+    <View
+      accessibilityLabel={defaultAccessibilityLabel}
+      style={[tokens.containerStyle, style]}
+      {...rest}
+    >
+      <View style={[tokens.ratingStyle, ratingStyle]}>
+        <CircularProgressBarDoted
+          value={value}
+          dotCount={dotCount}
+          label={label}
+          tierLabel={tierLabel}
+          onTierPress={onTierPress}
+          modes={modes}
+        />
+      </View>
+
+      <View style={[tokens.footerStyle, footerStyle]}>
+        {processedFooterSlot || (
+          <>
+            <Text numberOfLines={1} style={[tokens.footerTextStyle, footerTextStyle]}>
+              {footerText}
+            </Text>
+            {showFooterIcon ? (
+              <Icon
+                name="ic_info"
+                size={tokens.footerIconSize}
+                color={tokens.footerIconColor}
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
+              />
+            ) : null}
+          </>
+        )}
+      </View>
+
+      {showNudge ? (
+        processedNudgeSlot || (
+          <Nudge
+            type="inline-compact"
+            body={nudgeBody}
+            buttonLabel={nudgeButtonLabel}
+            onPressButton={onPressNudgeButton}
+            modes={modes}
+            style={[{ width: 312 }, nudgeStyle]}
+          />
+        )
+      ) : null}
+    </View>
+  )
+}
+
+export default React.memo(CircularRating)