jfs-components 0.1.30 → 0.1.33

package/src/components/ValueBackMetric/ValueBackMetric.tsx

@@ -0,0 +1,298 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type GestureResponderEvent,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Icon from '../Icon/Icon'
+import Link from '../Link/Link'
+import type { Modes } from '../../design-tokens'
+
+const TITLE_LINE_HEIGHT_RATIO = 1.2
+const VALUE_LINE_HEIGHT_RATIO = 1.2
+const CAPTION_LINE_HEIGHT_RATIO = 1.5
+
+// The Figma node binds the header-icon size and the per-part font sizes/weights
+// to `valueBackMetric/*` variables, but those tokens are NOT in the committed
+// variables snapshot (`npm run tokens -- find valueBackMetric` → no matches).
+// They also intentionally differ from the `metricdata/*` typography defaults
+// (e.g. `metricdata/value` resolves to 20px/700, whereas this component's value
+// is 16px/500). So the sizes/weights below are encoded as literal constants
+// matching the Figma design exactly. Colours, gaps and padding DO exist as real
+// `metricdata/*` tokens (and match the design), so those resolve through
+// `getVariableByName` and stay themeable.
+const TITLE_FONT_SIZE = 12
+const TITLE_FONT_WEIGHT: TextStyle['fontWeight'] = '500'
+const VALUE_FONT_SIZE = 16
+const VALUE_FONT_WEIGHT: TextStyle['fontWeight'] = '500'
+const CAPTION_FONT_SIZE = 12
+const CAPTION_FONT_WEIGHT: TextStyle['fontWeight'] = '400'
+const FONT_FAMILY = 'JioType Var'
+const CARD_BACKGROUND = '#ffffff'
+const CARD_MIN_HEIGHT = 82
+const ICON_SIZE = 18
+// Figma renders the header glyph flush (all `icon/padding/*` tokens are 0); the
+// shared Icon pulls padding from those tokens, so mirror MetricData and zero it
+// explicitly to keep the icon flush against the title.
+const ICON_PADDING_RESET: ViewStyle = {
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+}
+
+export type ValueBackMetricProps = {
+  /**
+   * Header glyph slot, shown to the left of the title. Mirrors the Figma swap
+   * slot whose preferred instances are `Icon` and `Image`:
+   *  - a registry icon name (e.g. `'ic_rupee_coin'`) renders the shared
+   *    {@link Icon}, colour/size from the `icon/*` tokens (default 18px gold —
+   *    retint via `modes`, e.g. `{ AppearanceBrand: 'Secondary' }`);
+   *  - a custom node (an `<Icon/>`, an `<Image/>`, your brand logo) renders
+   *    as-is with `modes` cascaded into it.
+   * The Figma design uses a dedicated JioPoints brand mark that is not in the
+   * icon registry, so `ic_rupee_coin` stands in by default.
+   */
+  icon?: string | React.ReactNode
+  /** Header title next to the icon. Defaults to `'JioPoints'`. */
+  title?: string
+  /**
+   * The prominent value line (16px/500). Pass a string, or any node to compose
+   * a richer value. Hidden when omitted.
+   */
+  value?: string | React.ReactNode
+  /** Muted caption below the value (12px, `#777`). Hidden when omitted. */
+  caption?: string
+  /** Bottom link label (underlined, brand accent). Hidden when omitted. */
+  linkLabel?: string
+  /** Fired when the link is pressed. Navigation is the consumer's job. */
+  onLinkPress?: (event: GestureResponderEvent) => void
+  /**
+   * Press handler for the whole card. When set, the card becomes pressable
+   * (rendered through a `Pressable` with `accessibilityRole="button"`).
+   * Independent of {@link onLinkPress} — the bottom link keeps its own handler.
+   */
+  onPress?: (event: GestureResponderEvent) => void
+  /** Disable interaction when `onPress` is set. */
+  disabled?: boolean
+  /** Design-token modes for theming. */
+  modes?: Modes
+  /** Override the container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Override the title text styles. */
+  titleStyle?: StyleProp<TextStyle>
+  /** Override the value text styles. */
+  valueStyle?: StyleProp<TextStyle>
+  /** Override the caption text styles. */
+  captionStyle?: StyleProp<TextStyle>
+  /**
+   * Accessibility label. Defaults to the resolved `title`, `value`, `caption`
+   * and `linkLabel` joined together.
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * ValueBackMetric — a compact, left-aligned "value back" card.
+ *
+ * Stacks a branded header row (icon + `title`, e.g. "JioPoints"), a prominent
+ * `value`, a muted `caption`, and an optional bottom `linkLabel` (e.g. "Earn").
+ * `value`, `caption` and `linkLabel` each render only when provided; the header
+ * (icon + title) always shows.
+ *
+ * Colours, gaps and padding resolve from the `metricdata/*` tokens; the header
+ * glyph from the `icon/*` tokens (default 18px gold); the link entirely from
+ * the `link/*` + `text/foreground` tokens via the shared {@link Link}, with
+ * `Text Appearance: Secondary` and `Text Sizes: Small` seeded so it renders
+ * purple at 12px like the design (caller `modes` win). The per-part font
+ * sizes/weights come from the Figma `valueBackMetric/*` variables, which are
+ * not yet in the committed token snapshot, so they are encoded as constants
+ * matching the design.
+ *
+ * @example
+ * ```tsx
+ * <ValueBackMetric
+ *   title="JioPoints"
+ *   value="Value"
+ *   caption="Earn 10 point with UPI"
+ *   linkLabel="Earn"
+ *   onPress={() => navigation.navigate('ValueBack')}
+ *   onLinkPress={() => navigation.navigate('EarnPoints')}
+ * />
+ * ```
+ */
+function ValueBackMetric({
+  icon = 'ic_rupee_coin',
+  title = 'JioPoints',
+  value,
+  caption,
+  linkLabel,
+  onLinkPress,
+  onPress,
+  disabled,
+  modes = EMPTY_MODES,
+  style,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  accessibilityLabel,
+}: ValueBackMetricProps) {
+  const titleColor = (getVariableByName('metricdata/title/color', modes) as string | null) ?? '#000000'
+  const valueColor = (getVariableByName('metricdata/value/color', modes) as string | null) ?? '#000000'
+  const captionColor = (getVariableByName('metricdata/caption/color', modes) as string | null) ?? '#777777'
+  // The design's link is purple (`text/foreground` under `Text Appearance:
+  // Secondary`) at 12px (`link/fontSize` under `Text Sizes: Small`), while the
+  // header icon keeps the default gold `icon/color`. Seed only the link's
+  // modes; caller-supplied modes win.
+  const linkModes = React.useMemo<Modes>(
+    () => ({ 'Text Appearance': 'Secondary', 'Text Sizes': 'Small', ...modes }),
+    [modes]
+  )
+
+  // The header glyph is token-driven: `icon/color` (gold by default, retinted
+  // via `AppearanceBrand`) and `icon/size` (18px). Passing them explicitly — as
+  // MetricData does — makes the glyph deterministic instead of relying on the
+  // shared Icon's internal token lookups.
+  const iconColor = (getVariableByName('icon/color', modes) as string | null) ?? '#ad8444'
+  const iconSize = (getVariableByName('icon/size', modes) as number | null) ?? ICON_SIZE
+
+  const gap = (getVariableByName('metricdata/gap', modes) as number | null) ?? 4
+  const valueWrapGap = (getVariableByName('metricdata/valueWrap/gap', modes) as number | null) ?? 4
+  const paddingHorizontal = (getVariableByName('metricdata/padding/horizontal', modes) as number | null) ?? 10
+  const paddingVertical = (getVariableByName('metricdata/padding/vertical', modes) as number | null) ?? 10
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    minHeight: CARD_MIN_HEIGHT,
+    backgroundColor: CARD_BACKGROUND,
+  }
+
+  const titleTextStyle: TextStyle = {
+    color: titleColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: TITLE_FONT_SIZE,
+    fontWeight: TITLE_FONT_WEIGHT,
+    lineHeight: TITLE_FONT_SIZE * TITLE_LINE_HEIGHT_RATIO,
+  }
+
+  const valueTextStyle: TextStyle = {
+    color: valueColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: VALUE_FONT_SIZE,
+    fontWeight: VALUE_FONT_WEIGHT,
+    lineHeight: VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO,
+  }
+
+  const captionTextStyle: TextStyle = {
+    color: captionColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: CAPTION_FONT_SIZE,
+    fontWeight: CAPTION_FONT_WEIGHT,
+    lineHeight: CAPTION_FONT_SIZE * CAPTION_LINE_HEIGHT_RATIO,
+  }
+
+  // Mirrors the Figma swap slot, whose preferred instances are `Icon` and
+  // `Image`. A registry name renders the token-driven `Icon` (18px, gold,
+  // flush — all from the `icon/*` tokens); a custom node (`<Icon/>`,
+  // `<Image/>`, anything) renders as-is with `modes` cascaded into it, so an
+  // Icon instance follows the icon tokens while an Image keeps its own sizing.
+  const iconNode =
+    icon == null ? null : typeof icon === 'string' ? (
+      <Icon
+        iconName={icon}
+        size={iconSize}
+        color={iconColor}
+        modes={modes}
+        style={ICON_PADDING_RESET}
+      />
+    ) : (
+      cloneChildrenWithModes(icon, modes)
+    )
+
+  const hasValue = value !== undefined && value !== null && value !== ''
+  const hasCaption = caption !== undefined && caption !== ''
+
+  const resolvedLabel =
+    accessibilityLabel ??
+    ([title, typeof value === 'string' ? value : undefined, caption, linkLabel]
+      .filter(Boolean)
+      .join(', ') || undefined)
+
+  const content = (
+    <>
+      {/* Header row: brand glyph + title (always shown). */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: valueWrapGap }}>
+        {iconNode}
+        {title !== undefined && title !== '' ? (
+          <Text style={[titleTextStyle, titleStyle]}>{title}</Text>
+        ) : null}
+      </View>
+
+      {/* Value + caption block (each optional). */}
+      {hasValue || hasCaption ? (
+        <View style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 4 }}>
+          {hasValue ? (
+            typeof value === 'string' ? (
+              <Text style={[valueTextStyle, valueStyle]}>{value}</Text>
+            ) : (
+              value
+            )
+          ) : null}
+          {hasCaption ? <Text style={[captionTextStyle, captionStyle]}>{caption}</Text> : null}
+        </View>
+      ) : null}
+
+      {/* Bottom link (optional). Fully token-driven via the seeded `linkModes`
+          (purple 12px, see above). `linkLabel` is checked inline (narrows it to
+          a non-undefined `string`) and `onPress` is spread conditionally, since
+          `exactOptionalPropertyTypes` forbids passing `undefined` to Link's
+          non-`undefined` optional props. */}
+      {linkLabel ? (
+        <Link
+          text={linkLabel}
+          autolayout="Hug"
+          modes={linkModes}
+          {...(onLinkPress ? { onPress: onLinkPress } : null)}
+        />
+      ) : null}
+    </>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        style={[containerStyle, style]}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        {...(resolvedLabel !== undefined ? { accessibilityLabel: resolvedLabel } : null)}
+        accessibilityState={{ disabled: !!disabled }}
+      >
+        {content}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessible
+      {...(resolvedLabel !== undefined ? { accessibilityLabel: resolvedLabel } : null)}
+    >
+      {content}
+    </View>
+  )
+}
+
+export default React.memo(ValueBackMetric)

package/src/components/index.ts

@@ -33,6 +33,7 @@ export {
 } from './CardFinancialCondition/CardFinancialCondition'
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight'
 export { default as CcCard, type CcCardProps, type CcCardBadge, type CcCardListItem } from './CcCard/CcCard'
+export { default as CategoryCard, type CategoryCardProps } from './CategoryCard/CategoryCard'
 export { default as Disclaimer } from './Disclaimer/Disclaimer'
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider'
 export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer'
@@ -108,6 +109,7 @@ export {
 } from './MonthlyStatusGrid/MonthlyStatusGrid'
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge'
 export { default as HeroSection, type HeroSectionProps } from './HeroSection/HeroSection'
+export { default as HelloJioInput, type HelloJioInputProps } from './HelloJioInput/HelloJioInput'
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard'
 export { default as HStack, type HStackProps } from './HStack/HStack'
 export { default as Icon, type IconProps } from './Icon/Icon'
@@ -336,3 +338,6 @@ export {
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle'
 export { default as AutoplayControl, type AutoplayControlProps } from './AutoplayControl/AutoplayControl'
 export { default as NumberPagination, type NumberPaginationProps } from './NumberPagination/NumberPagination'
+export { default as CounterBadge, type CounterBadgeProps } from './CounterBadge/CounterBadge'
+export { default as FavoriteToggle, type FavoriteToggleProps } from './FavoriteToggle/FavoriteToggle'
+export { default as ValueBackMetric, type ValueBackMetricProps } from './ValueBackMetric/ValueBackMetric'