jfs-components 0.0.72 → 0.0.74

package/src/components/DonutChartSummary/DonutChartSummary.tsx

@@ -0,0 +1,256 @@
+import React from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import DonutChart, { type DonutChartSegmentData } from '../DonutChart/DonutChart'
+import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+
+/**
+ * One row of the `DonutChartSummary`. Each item drives BOTH a donut
+ * segment and the matching legend row, so the segment and indicator
+ * always share the same color by construction.
+ */
+export type DonutChartSummaryItem = {
+    /** Stable React key. Falls back to the item label / index. */
+    key?: React.Key
+    /** The descriptive label rendered next to the indicator dot. */
+    label?: React.ReactNode
+    /**
+     * The data point — drives the segment's angular share. Same
+     * semantics as `DonutChartSegmentData.value`. When the legend's
+     * right-side text is shown, the resolution order is:
+     * `displayValue` → `formatValue(value)` → hide.
+     */
+    value: number
+    /**
+     * Optional override for the legend row's right-side text. Falls
+     * back to `formatValue(value)` if a parent-level `formatValue` is
+     * provided; otherwise the value slot is hidden (matches the Figma
+     * `data` boolean toggle on `MetricLegendItem`). Pass `null` or
+     * `false` to explicitly hide on a per-item basis.
+     */
+    displayValue?: React.ReactNode
+    /**
+     * Hard-override the shared color used for both the donut segment
+     * and the legend indicator. Bypasses `dataViz/bg` token resolution.
+     */
+    color?: string
+    /**
+     * Per-item design token mode overrides. Merged on top of parent
+     * `modes` and the per-index `Appearance / DataViz` defaults
+     * (`Senary`, `Primary`, `Secondary`, `Tertiary`, `Quaternary`,
+     * `Quinary`, then cycles).
+     */
+    modes?: Record<string, any>
+    /** Accessibility label for the segment + legend row pairing. */
+    accessibilityLabel?: string
+}
+
+export type DonutChartSummaryProps = {
+    /**
+     * Data-driven rows. Each entry produces a donut segment AND a
+     * matching `MetricLegendItem` — the count of legend rows is locked
+     * in step with the count of donut segments by construction.
+     */
+    items?: DonutChartSummaryItem[]
+    /**
+     * Optional formatter applied to each item's numeric `value` when
+     * the item does not provide an explicit `displayValue`. Useful for
+     * the common "format every weight the same way" case
+     * (e.g. `(v) => `${v}%``).
+     */
+    formatValue?: (value: number) => React.ReactNode
+    /** Center value text inside the donut (large/bold). */
+    centerValue?: React.ReactNode
+    /** Center label text inside the donut (smaller, beneath the value). */
+    centerLabel?: React.ReactNode
+    /**
+     * Slot for fully-custom donut center content. When provided it
+     * replaces the default `centerValue`/`centerLabel` text wrap.
+     */
+    donutCenter?: React.ReactNode
+    /** Outer donut diameter in px. Defaults to 194 (Figma reference). */
+    donutSize?: number
+    /** Donut ring stroke width in px. Defaults to ~18% of `donutSize`. */
+    donutStrokeWidth?: number
+    /**
+     * Visual gap between adjacent donut segments expressed in degrees
+     * of arc. Defaults to 0 (segments touch).
+     */
+    donutGap?: number
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Override outer container styles. */
+    style?: StyleProp<ViewStyle>
+    /** Override the legend container styles. */
+    legendStyle?: StyleProp<ViewStyle>
+    /** Accessibility label announced for the whole summary. */
+    accessibilityLabel?: string
+}
+
+const DEFAULT_APPEARANCE_CYCLE = [
+    'Senary',
+    'Primary',
+    'Secondary',
+    'Tertiary',
+    'Quaternary',
+    'Quinary',
+] as const
+
+const DEFAULT_ITEMS: DonutChartSummaryItem[] = [
+    { label: 'Equity', value: 40, displayValue: '40%' },
+    { label: 'Recommended coverage', value: 25, displayValue: '25%' },
+    { label: 'Additional benefits', value: 20, displayValue: '20%' },
+    { label: 'Cost analysis', value: 15, displayValue: '15%' },
+]
+
+const defaultAppearanceFor = (index: number) =>
+    DEFAULT_APPEARANCE_CYCLE[index % DEFAULT_APPEARANCE_CYCLE.length]
+
+/**
+ * Resolve the shared color for an item. Honors any explicit `color`
+ * override, then falls back to `dataViz/bg` for the merged mode set,
+ * then to the Figma reference purple.
+ */
+function resolveItemColor(
+    parentModes: Record<string, any>,
+    item: DonutChartSummaryItem,
+    index: number
+): string {
+    if (item.color) return item.color
+    const itemModes = {
+        ...parentModes,
+        'Appearance / DataViz': defaultAppearanceFor(index),
+        ...(item.modes || {}),
+    }
+    return (
+        (getVariableByName('dataViz/bg', itemModes) as string | null) ?? '#5d00b5'
+    )
+}
+
+/**
+ * `DonutChartSummary` pairs a `DonutChart` with a vertical list of
+ * `MetricLegendItem` rows. The component takes a single `items` array,
+ * so the number of legend rows is locked in step with the number of
+ * donut segments by construction — every segment has exactly one
+ * legend row, and they share the same color through the same
+ * `Appearance / DataViz` cascade as the standalone `DonutChart`.
+ *
+ * The default 4-item layout receives per-index `Appearance / DataViz`
+ * defaults (item 1 → `Senary`, 2 → `Primary`, 3 → `Secondary`, 4 →
+ * `Tertiary`, then cycles). Override `modes` per item to remix, or set
+ * `Emphasis / DataViz` on the parent `modes` to dim or brighten the
+ * whole component at once.
+ *
+ * @component
+ * @param {DonutChartSummaryProps} props
+ */
+function DonutChartSummary({
+    items,
+    formatValue,
+    centerValue = '₹51,230',
+    centerLabel = 'Total invested',
+    donutCenter,
+    donutSize = 194,
+    donutStrokeWidth,
+    donutGap = 0,
+    modes: propModes = EMPTY_MODES,
+    style,
+    legendStyle,
+    accessibilityLabel,
+}: DonutChartSummaryProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    const gap =
+        (getVariableByName('donutChartSummary/gap', modes) as number | null) ?? 16
+    const legendGap =
+        (getVariableByName('donutChartSummary/legend/gap', modes) as
+            | number
+            | null) ?? 8
+
+    const resolvedItems = items && items.length > 0 ? items : DEFAULT_ITEMS
+
+    const segments: DonutChartSegmentData[] = resolvedItems.map(
+        (item, index) => ({
+            key: item.key ?? `segment-${index}`,
+            value: item.value,
+            color: resolveItemColor(modes, item, index),
+            accessibilityLabel: item.accessibilityLabel,
+        })
+    )
+
+    const showCustomCenter = donutCenter !== undefined && donutCenter !== null
+
+    return (
+        <View
+            accessibilityRole="summary"
+            accessibilityLabel={accessibilityLabel}
+            style={[
+                {
+                    width: '100%',
+                    alignItems: 'center',
+                    gap,
+                },
+                style,
+            ]}
+        >
+            <DonutChart
+                size={donutSize}
+                {...(donutStrokeWidth !== undefined && {
+                    strokeWidth: donutStrokeWidth,
+                })}
+                gap={donutGap}
+                segments={segments}
+                modes={modes}
+                {...(!showCustomCenter && {
+                    value: centerValue,
+                    label: centerLabel,
+                })}
+            >
+                {showCustomCenter ? donutCenter : null}
+            </DonutChart>
+
+            <View
+                style={[
+                    {
+                        width: '100%',
+                        gap: legendGap,
+                    },
+                    legendStyle,
+                ]}
+            >
+                {resolvedItems.map((item, index) => (
+                    <MetricLegendItem
+                        key={item.key ?? `legend-${index}`}
+                        label={item.label}
+                        value={resolveLegendValue(item, formatValue)}
+                        indicatorColor={resolveItemColor(modes, item, index)}
+                        modes={modes}
+                    />
+                ))}
+            </View>
+        </View>
+    )
+}
+
+/**
+ * Resolve what to render in the legend row's right-side slot. The
+ * order of precedence is:
+ *   1. `item.displayValue` if explicitly provided (including `null` /
+ *      `false`, which the underlying `MetricLegendItem` treats as
+ *      "hide the value slot").
+ *   2. `formatValue(item.value)` when a parent-level formatter exists.
+ *   3. `undefined` — the value slot is hidden.
+ */
+function resolveLegendValue(
+    item: DonutChartSummaryItem,
+    formatValue: ((value: number) => React.ReactNode) | undefined
+): React.ReactNode {
+    if (item.displayValue !== undefined) return item.displayValue
+    if (formatValue) return formatValue(item.value)
+    return undefined
+}
+
+export default DonutChartSummary

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,331 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+    Platform,
+    Pressable,
+    ScrollView,
+    Text,
+    View,
+    type AccessibilityProps,
+    type PressableStateCallbackType,
+    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 Icon from '../../icons/Icon'
+
+const IS_WEB = Platform.OS === 'web'
+
+// ---------------------------------------------------------------------------
+// DropdownItem
+// ---------------------------------------------------------------------------
+
+export type DropdownItemProps = {
+    /** Display text for the item. Ignored when `children` is provided. */
+    label?: string
+    /**
+     * Value associated with the item. Used by the parent `Dropdown` /
+     * `DropdownInput` to identify the selected item. Optional when the item
+     * is purely informational or used outside of a selection context.
+     */
+    value?: string | number | null
+    /** Whether the item is currently selected (renders the trailing check). */
+    selected?: boolean
+    /** Whether the item is disabled and non-interactive. */
+    disabled?: boolean
+    /** Optional element rendered before the label (icon, avatar, etc.). */
+    leading?: React.ReactNode
+    /**
+     * Optional element rendered after the label. When omitted and `selected`
+     * is true, a check icon is rendered automatically.
+     */
+    trailing?: React.ReactNode
+    /** Press handler. Receives the item's `value` if provided. */
+    onPress?: (value: DropdownItemProps['value']) => void
+    /** Optional custom child content (overrides `label`). */
+    children?: React.ReactNode
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>
+    /** Style overrides for the item container. */
+    style?: StyleProp<ViewStyle>
+    /** Style overrides for the item label text. */
+    labelStyle?: StyleProp<TextStyle>
+    /** Accessibility label (defaults to label / inferred from children). */
+    accessibilityLabel?: string
+    /** Accessibility hint. */
+    accessibilityHint?: string
+}
+
+function useDropdownItemTokens(modes: Record<string, any>) {
+    return useMemo(() => {
+        // The `dropdownItem/background` token aliases through the
+        // `Dropdown Item State` collection (Idle | Selected), so we resolve
+        // both possibilities up-front and pick at render time.
+        const idleBackground =
+            (getVariableByName('dropdownItem/background', {
+                ...modes,
+                'Dropdown Item State': 'Idle',
+            }) as string) || '#ffffff'
+        const selectedBackground =
+            (getVariableByName('dropdownItem/background', {
+                ...modes,
+                'Dropdown Item State': 'Selected',
+            }) as string) || '#f5f5f5'
+        const foreground =
+            (getVariableByName('dropdownItem/foreground', modes) as string) ||
+            '#000000'
+        const fontFamily =
+            (getVariableByName('dropdownItem/fontFamily', modes) as string) ||
+            'JioType Var'
+        const fontSize =
+            parseInt(getVariableByName('dropdownItem/fontSize', modes), 10) || 16
+        const fontWeight =
+            (getVariableByName('dropdownItem/fontWeight', modes) as string) ||
+            '400'
+        const lineHeight =
+            parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10) || 19
+        const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10) || 8
+        const paddingHorizontal =
+            parseInt(
+                getVariableByName('dropdownItem/padding/horizontal', modes),
+                10
+            ) || 12
+        const paddingVertical =
+            parseInt(
+                getVariableByName('dropdownItem/padding/vertical', modes),
+                10
+            ) || 12
+
+        return {
+            idleBackground,
+            selectedBackground,
+            foreground,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            lineHeight,
+            gap,
+            paddingHorizontal,
+            paddingVertical,
+        }
+    }, [modes])
+}
+
+export function DropdownItem({
+    label,
+    value = null,
+    selected = false,
+    disabled = false,
+    leading,
+    trailing,
+    onPress,
+    children,
+    modes: propModes = EMPTY_MODES,
+    style,
+    labelStyle,
+    accessibilityLabel,
+    accessibilityHint,
+}: DropdownItemProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = useMemo(
+        () => ({ ...globalModes, ...propModes }),
+        [globalModes, propModes]
+    )
+
+    const tokens = useDropdownItemTokens(modes)
+    const [isHovered, setIsHovered] = useState(false)
+
+    const handlePress = useCallback(() => {
+        if (disabled) return
+        onPress?.(value)
+    }, [disabled, onPress, value])
+
+    const containerStyle = useCallback(
+        ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
+            const showSelected =
+                pressed || (isHovered && IS_WEB) || selected
+            const base: ViewStyle = {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: tokens.gap,
+                paddingHorizontal: tokens.paddingHorizontal,
+                paddingVertical: tokens.paddingVertical,
+                backgroundColor: showSelected
+                    ? tokens.selectedBackground
+                    : tokens.idleBackground,
+                opacity: disabled ? 0.4 : 1,
+                width: '100%',
+            }
+            return [base, style]
+        },
+        [
+            tokens.gap,
+            tokens.paddingHorizontal,
+            tokens.paddingVertical,
+            tokens.idleBackground,
+            tokens.selectedBackground,
+            isHovered,
+            selected,
+            disabled,
+            style,
+        ]
+    )
+
+    const textStyle: TextStyle = {
+        color: tokens.foreground,
+        fontFamily: tokens.fontFamily,
+        fontSize: tokens.fontSize,
+        fontWeight: tokens.fontWeight as TextStyle['fontWeight'],
+        lineHeight: tokens.lineHeight,
+        flexShrink: 1,
+    }
+
+    const processedLeading = leading
+        ? cloneChildrenWithModes(React.Children.toArray(leading), modes)
+        : null
+
+    const customTrailing = trailing
+        ? cloneChildrenWithModes(React.Children.toArray(trailing), modes)
+        : null
+
+    const showDefaultCheck = !trailing && selected
+
+    const fallbackA11yLabel =
+        accessibilityLabel ||
+        (typeof label === 'string' ? label : 'Dropdown item')
+
+    const a11yProps: AccessibilityProps = {
+        accessibilityRole: 'menuitem',
+        accessibilityLabel: fallbackA11yLabel,
+        accessibilityState: { selected, disabled },
+    }
+    if (accessibilityHint) {
+        a11yProps.accessibilityHint = accessibilityHint
+    }
+
+    const handleHoverIn = useCallback(() => {
+        if (IS_WEB && !disabled) setIsHovered(true)
+    }, [disabled])
+    const handleHoverOut = useCallback(() => {
+        if (IS_WEB) setIsHovered(false)
+    }, [])
+
+    return (
+        <Pressable
+            onPress={handlePress}
+            disabled={disabled}
+            onHoverIn={handleHoverIn}
+            onHoverOut={handleHoverOut}
+            style={containerStyle}
+            {...a11yProps}
+        >
+            {processedLeading}
+            {children != null ? (
+                children
+            ) : (
+                <Text style={[textStyle, labelStyle]} numberOfLines={1}>
+                    {label}
+                </Text>
+            )}
+            {customTrailing}
+            {showDefaultCheck && (
+                <Icon name="ic_confirm" size={16} color={tokens.foreground} />
+            )}
+        </Pressable>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown (popup surface)
+// ---------------------------------------------------------------------------
+
+export type DropdownProps = {
+    /** Dropdown items, typically `<DropdownItem />` children. */
+    children?: React.ReactNode
+    /**
+     * Maximum height of the popup before its content becomes scrollable.
+     * Defaults to no limit.
+     */
+    maxHeight?: number
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>
+    /** Style overrides for the popup container. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label for the menu surface. */
+    accessibilityLabel?: string
+}
+
+/**
+ * `Dropdown` is the visual surface (popup) that contains a list of
+ * `DropdownItem`s. It is responsible for the background, rounded corners,
+ * elevation/shadow, and clipping. Use it standalone for menu UIs, or rely on
+ * `DropdownInput` which composes it into a form-field experience.
+ */
+export function Dropdown({
+    children,
+    maxHeight,
+    modes: propModes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: DropdownProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = useMemo(
+        () => ({ ...globalModes, ...propModes }),
+        [globalModes, propModes]
+    )
+
+    const radius =
+        parseInt(getVariableByName('dropdown/radius', modes), 10) || 8
+    const background =
+        (getVariableByName('dropdown/background', modes) as string) || '#ffffff'
+    const shadowColor =
+        (getVariableByName('dropdown/shadow/color', modes) as string) ||
+        'rgba(0, 0, 0, 0.08)'
+    const shadowOffsetX =
+        parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0
+    const shadowOffsetY =
+        parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4
+    const shadowBlur =
+        parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16
+
+    const containerStyle: ViewStyle = {
+        backgroundColor: background,
+        borderRadius: radius,
+        overflow: 'hidden',
+        shadowColor,
+        shadowOffset: { width: shadowOffsetX, height: shadowOffsetY },
+        shadowOpacity: 1,
+        shadowRadius: shadowBlur / 2,
+        elevation: 4,
+    }
+
+    const content = (
+        <View style={{ flexDirection: 'column' }}>
+            {cloneChildrenWithModes(children, modes)}
+        </View>
+    )
+
+    return (
+        <View
+            style={[containerStyle, style]}
+            accessibilityRole="menu"
+            accessibilityLabel={accessibilityLabel || 'Dropdown menu'}
+        >
+            {maxHeight != null ? (
+                <ScrollView
+                    style={{ maxHeight }}
+                    showsVerticalScrollIndicator={true}
+                    keyboardShouldPersistTaps="handled"
+                >
+                    {content}
+                </ScrollView>
+            ) : (
+                content
+            )}
+        </View>
+    )
+}
+
+export default Dropdown