jfs-components 0.0.72 → 0.0.74

package/src/components/LinearMeter/LinearMeter.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import { View, Text, type StyleProp, type ViewStyle, type TextStyle, type DimensionValue } from 'react-native'
+import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import MoneyValue from '../MoneyValue/MoneyValue'
+import LinearProgress from '../LinearProgress/LinearProgress'
 
 type LinearMeterLabelProps = {
     children: React.ReactNode
@@ -57,14 +58,6 @@ const LinearMeter = ({
     ...rest
 }: LinearMeterProps) => {
     const gap = getVariableByName('linearMeter/gap', modes)
-    // Track tokens
-    const trackBg = getVariableByName('linearMeter/track/background', modes)
-    const trackHeight = getVariableByName('linearMeter/track/height', modes)
-    const trackRadius = getVariableByName('linearMeter/track/radius', modes)
-
-    // Indicator tokens
-    const indicatorBg = getVariableByName('linearMeter/indicator/background', modes)
-    const indicatorRadius = getVariableByName('linearMeter/indicator/radius', modes)
 
     // Wrap tokens
     const wrapGap = getVariableByName('linearMeter/wrap/gap', modes)
@@ -94,10 +87,6 @@ const LinearMeter = ({
 
     const content = children ? childrenWithModes : defaultContent
 
-    // Calculate width percentage
-    const clampedValue = Math.min(Math.max(value, 0), 1)
-    const widthPercent = `${clampedValue * 100}%`
-
     return (
         <View
             style={[
@@ -110,32 +99,13 @@ const LinearMeter = ({
             ]}
             {...rest}
         >
-            {/* Track */}
-            <View
-                style={[
-                    {
-                        flex: 1,
-                        height: trackHeight,
-                        backgroundColor: trackBg,
-                        borderRadius: trackRadius,
-                        overflow: 'hidden', // Ensure indicator stays inside
-                    },
-                    trackStyle,
-                ]}
-            >
-                {/* Indicator */}
-                <View
-                    style={[
-                        {
-                            width: widthPercent as DimensionValue,
-                            height: '100%',
-                            backgroundColor: indicatorBg,
-                            borderRadius: indicatorRadius,
-                        },
-                        indicatorStyle,
-                    ]}
-                />
-            </View>
+            <LinearProgress
+                value={value}
+                modes={modes}
+                style={{ flex: 1 }}
+                trackStyle={trackStyle}
+                indicatorStyle={indicatorStyle}
+            />
 
             {/* Right Slot Wrapper */}
             <View

package/src/components/LinearProgress/LinearProgress.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import {
+    View,
+    type StyleProp,
+    type ViewStyle,
+    type DimensionValue,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+
+export type LinearProgressProps = {
+    /** Progress value between 0 and 1. Values are clamped. */
+    value?: number
+    /** Design token modes for theming */
+    modes?: Record<string, any>
+    /** Override container styles (the track wrapper) */
+    style?: StyleProp<ViewStyle>
+    /** Override the track styles */
+    trackStyle?: StyleProp<ViewStyle>
+    /** Override the indicator styles */
+    indicatorStyle?: StyleProp<ViewStyle>
+} & Omit<React.ComponentProps<typeof View>, 'style'>
+
+const LinearProgress = ({
+    value = 0,
+    modes = EMPTY_MODES,
+    style,
+    trackStyle,
+    indicatorStyle,
+    ...rest
+}: LinearProgressProps) => {
+    // The track and the progress indicator are intentionally rendered at
+    // different emphasis levels by default: the track sits in the
+    // background as a low-emphasis surface, while the progress indicator
+    // is the high-emphasis foreground. Defaults are placed *before* the
+    // user-provided modes spread, so callers can still override
+    // `Emphasis / DataViz` (or any other mode) via the `modes` prop.
+    const trackModes = { 'Emphasis': 'Low', ...modes }
+    const progressModes = { 'Emphasis': 'High', ...modes }
+
+    const trackHeight =
+        (getVariableByName('linearProgress/track/height', trackModes) as number | null) ?? 8
+    const trackRadius =
+        (getVariableByName('linearProgress/track/radius', trackModes) as number | null) ?? 999
+    const trackBg =
+        (getVariableByName('linearProgress/track/background', trackModes) as string | null) ??
+        '#ede7ff'
+
+    const indicatorHeight =
+        (getVariableByName('linearProgress/indicator/height', progressModes) as number | null) ?? 8
+    const indicatorRadius =
+        (getVariableByName('linearProgress/indicator/radius', progressModes) as number | null) ?? 999
+    const indicatorBg =
+        (getVariableByName('linearProgress/indicator/background', progressModes) as string | null) ??
+        '#5d00b5'
+
+    const clampedValue = Math.min(Math.max(value, 0), 1)
+    const widthPercent = `${clampedValue * 100}%` as DimensionValue
+
+    return (
+        <View
+            style={[
+                {
+                    height: trackHeight,
+                    backgroundColor: trackBg,
+                    borderRadius: trackRadius,
+                    overflow: 'hidden',
+                    width: '100%',
+                },
+                style,
+                trackStyle,
+            ]}
+            accessibilityRole="progressbar"
+            accessibilityValue={{ min: 0, max: 1, now: clampedValue }}
+            {...rest}
+        >
+            <View
+                style={[
+                    {
+                        width: widthPercent,
+                        height: indicatorHeight,
+                        backgroundColor: indicatorBg,
+                        borderRadius: indicatorRadius,
+                    },
+                    indicatorStyle,
+                ]}
+            />
+        </View>
+    )
+}
+
+export default LinearProgress

package/src/components/LottieIntroBlock/LottieIntroBlock.tsx

@@ -0,0 +1,202 @@
+import React, { useMemo } from 'react'
+import {
+  View,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import Button from '../Button/Button'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+
+const DEFAULT_MEDIA_SIZE = 117
+
+export type LottieIntroBlockProps = {
+  /** Headline text shown below the media area. */
+  title?: string
+  /** Whether to render the supportive paragraph below the title. */
+  showSupportText?: boolean
+  /** Body/supportive text shown below the title. */
+  supportText?: string
+  /** Whether to render the action button at the bottom. */
+  showButton?: boolean
+  /** Label for the default action button. Ignored when `buttonSlot` is provided. */
+  buttonLabel?: string
+  /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
+  onButtonPress?: () => void
+  /**
+   * Custom slot for the media area (Lottie animation, illustration, or image).
+   * Should render at the design size of 117x117. If omitted, a neutral
+   * placeholder of the same size is rendered so the layout stays stable.
+   * `modes` are automatically cascaded into this slot.
+   */
+  media?: React.ReactNode
+  /**
+   * Optional slot to fully override the action button.
+   * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
+   * `modes` are automatically cascaded into this slot.
+   */
+  buttonSlot?: React.ReactNode
+  /** Mode configuration for design-token theming. */
+  modes?: Record<string, any>
+  /** Style overrides applied to the outer container. */
+  style?: StyleProp<ViewStyle>
+  testID?: string
+}
+
+/**
+ * LottieIntroBlock displays a centered onboarding/intro block composed of a
+ * media slot (typically a Lottie animation or illustration) above a title,
+ * an optional supportive paragraph, and an optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LottieIntroBlock
+ *   title="Let's get to know how your financial health is doing"
+ *   supportText="From assets to taxes, stay on top of everything in one simple view."
+ *   buttonLabel="Get started"
+ *   onButtonPress={() => navigate('NextScreen')}
+ *   media={<MyLottiePlayer source={animationSource} />}
+ * />
+ * ```
+ */
+function LottieIntroBlock({
+  title = "Let's get to know how your financial health is doing",
+  showSupportText = true,
+  supportText = 'From assets to taxes, stay on top of everything in one simple view.',
+  showButton = true,
+  buttonLabel = 'Button',
+  onButtonPress,
+  media,
+  buttonSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  testID,
+}: LottieIntroBlockProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () => ({ ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+
+  // Container
+  const gap = Number(getVariableByName('lottieIntroBlock/gap', modes)) || 36
+  const paddingHorizontal =
+    Number(getVariableByName('lottieIntroBlock/padding/horizontal', modes)) || 0
+  const paddingVertical =
+    Number(getVariableByName('lottieIntroBlock/padding/vertical', modes)) || 16
+
+  // Text wrap
+  const textWrapGap =
+    Number(getVariableByName('lottieIntroBlock/textWrap/gap', modes)) || 16
+
+  // Title
+  const titleColor =
+    getVariableByName('lottieIntroBlock/title/foreground', modes) || '#0d0d0f'
+  const titleFontSize =
+    Number(getVariableByName('lottieIntroBlock/title/fontSize', modes)) || 23
+  const titleFontFamily =
+    getVariableByName('lottieIntroBlock/title/fontFamily', modes) || 'System'
+  const titleLineHeight =
+    Number(getVariableByName('lottieIntroBlock/title/lineHeight', modes)) || 23
+  const titleFontWeight =
+    getVariableByName('lottieIntroBlock/title/fontWeight', modes) || 900
+
+  // Support text
+  const supportColor =
+    getVariableByName('lottieIntroBlock/supportText/foreground', modes) ||
+    '#0d0d0f'
+  const supportFontSize =
+    Number(getVariableByName('lottieIntroBlock/supportText/fontSize', modes)) ||
+    14
+  const supportFontFamily =
+    getVariableByName('lottieIntroBlock/supportText/fontFamily', modes) ||
+    'System'
+  const supportLineHeight =
+    Number(
+      getVariableByName('lottieIntroBlock/supportText/lineHeight', modes)
+    ) || 18
+  const supportFontWeight =
+    getVariableByName('lottieIntroBlock/supportText/fontWeight', modes) || 400
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+  }
+
+  const textWrapStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%',
+  }
+
+  const titleStyle: TextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    fontFamily: titleFontFamily,
+    lineHeight: titleLineHeight,
+    fontWeight: String(titleFontWeight) as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  const supportTextStyle: TextStyle = {
+    color: supportColor,
+    fontSize: supportFontSize,
+    fontFamily: supportFontFamily,
+    lineHeight: supportLineHeight,
+    fontWeight: String(supportFontWeight) as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  const mediaContent = useMemo(() => {
+    if (media === undefined || media === null) {
+      return (
+        <View
+          style={{
+            width: DEFAULT_MEDIA_SIZE,
+            height: DEFAULT_MEDIA_SIZE,
+          }}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        />
+      )
+    }
+    return cloneChildrenWithModes(media, modes)
+  }, [media, modes])
+
+  const buttonContent = useMemo(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return cloneChildrenWithModes(buttonSlot, modes)
+    }
+    if (!showButton) {
+      return null
+    }
+    return <Button label={buttonLabel} onPress={onButtonPress} modes={modes} />
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes])
+
+  return (
+    <View style={[containerStyle, style]} testID={testID}>
+      {mediaContent}
+      <View style={textWrapStyle}>
+        <Text style={titleStyle}>{title}</Text>
+        {showSupportText && supportText ? (
+          <Text style={supportTextStyle}>{supportText}</Text>
+        ) : null}
+        {buttonContent}
+      </View>
+    </View>
+  )
+}
+
+export default LottieIntroBlock

package/src/components/MetricLegendItem/MetricLegendItem.tsx

@@ -0,0 +1,167 @@
+import React from 'react'
+import {
+    View,
+    Text,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+
+export type MetricLegendItemProps = {
+    /** The label text on the left (after the indicator). */
+    label?: React.ReactNode
+    /**
+     * The value text shown on the right. When `undefined` or `null`, the
+     * value slot is hidden — matching the Figma `data` boolean toggle.
+     */
+    value?: React.ReactNode
+    /**
+     * Override the indicator dot color. Falls back to the
+     * `metricLegendItem/indicator/bg` design token.
+     */
+    indicatorColor?: string
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>
+    /** Override the indicator (dot) styles. */
+    indicatorStyle?: StyleProp<ViewStyle>
+    /** Override the label text styles. */
+    labelStyle?: StyleProp<TextStyle>
+    /** Override the value text styles. */
+    valueStyle?: StyleProp<TextStyle>
+}
+
+/**
+ * MetricLegendItem renders a horizontal row consisting of a small colored
+ * indicator dot, a label and an optional value. It is used in chart legends
+ * and similar metric callouts.
+ *
+ * @component
+ * @param {MetricLegendItemProps} props
+ */
+function MetricLegendItem({
+    label = 'Current (4 months)',
+    value,
+    indicatorColor,
+    modes = EMPTY_MODES,
+    style,
+    indicatorStyle,
+    labelStyle,
+    valueStyle,
+}: MetricLegendItemProps) {
+    const gap = (getVariableByName('metricLegendItem/gap', modes) as number | null) ?? 4
+    const textWrapGap =
+        (getVariableByName('metricLegendItem/textWrap/gap', modes) as number | null) ?? 4
+
+    const indicatorSize =
+        (getVariableByName('metricLegendItem/indicator/size', modes) as number | null) ?? 8
+    const indicatorRadius =
+        (getVariableByName('metricLegendItem/indicator/radius', modes) as number | null) ?? 999
+    const indicatorBg =
+        indicatorColor ??
+        (getVariableByName('metricLegendItem/indicator/bg', modes) as string | null) ??
+        '#f7ab21'
+
+    const labelColor =
+        (getVariableByName('metricLegendItem/label/color', modes) as string | null) ?? '#000000'
+    const labelFontFamily =
+        (getVariableByName('metricLegendItem/label/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const labelFontSize =
+        (getVariableByName('metricLegendItem/label/fontSize', modes) as number | null) ?? 12
+    const labelLineHeight =
+        (getVariableByName('metricLegendItem/label/lineHeight', modes) as number | null) ?? 16
+    const labelFontWeightRaw =
+        getVariableByName('metricLegendItem/label/fontWeight', modes) ?? 400
+    const labelFontWeight = String(labelFontWeightRaw) as TextStyle['fontWeight']
+
+    const valueColor =
+        (getVariableByName('metricLegendItem/value/color', modes) as string | null) ?? '#000000'
+    const valueFontFamily =
+        (getVariableByName('metricLegendItem/value/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const valueFontSize =
+        (getVariableByName('metricLegendItem/value/fontSize', modes) as number | null) ?? 12
+    const valueLineHeight =
+        (getVariableByName('metricLegendItem/value/lineHeight', modes) as number | null) ?? 16
+    const valueFontWeightRaw =
+        getVariableByName('metricLegendItem/value/fontWeight', modes) ?? 500
+    const valueFontWeight = String(valueFontWeightRaw) as TextStyle['fontWeight']
+
+    const showValue = value !== undefined && value !== null && value !== false
+
+    return (
+        <View
+            style={[
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap,
+                },
+                style,
+            ]}
+            accessibilityRole="text"
+        >
+            <View
+                style={[
+                    {
+                        width: indicatorSize,
+                        height: indicatorSize,
+                        borderRadius: indicatorRadius,
+                        backgroundColor: indicatorBg,
+                    },
+                    indicatorStyle,
+                ]}
+            />
+
+            <View
+                style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: textWrapGap,
+                    minWidth: 0,
+                }}
+            >
+                <Text
+                    style={[
+                        {
+                            flex: 1,
+                            color: labelColor,
+                            fontFamily: labelFontFamily,
+                            fontSize: labelFontSize,
+                            lineHeight: labelLineHeight,
+                            fontWeight: labelFontWeight,
+                        },
+                        labelStyle,
+                    ]}
+                >
+                    {label}
+                </Text>
+
+                {showValue && (
+                    <Text
+                        style={[
+                            {
+                                color: valueColor,
+                                fontFamily: valueFontFamily,
+                                fontSize: valueFontSize,
+                                lineHeight: valueLineHeight,
+                                fontWeight: valueFontWeight,
+                            },
+                            valueStyle,
+                        ]}
+                        numberOfLines={1}
+                    >
+                        {value}
+                    </Text>
+                )}
+            </View>
+        </View>
+    )
+}
+
+export default MetricLegendItem