jfs-components 0.1.0 → 0.1.8

package/src/components/Tooltip/Tooltip.tsx

@@ -22,6 +22,7 @@ import Svg, { Path } from 'react-native-svg'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // --- Types ---
 
@@ -49,7 +50,7 @@ type TooltipContextValue = {
   setTriggerRect: (rect: Rect | null) => void
   contentSize: Size | null
   setContentSize: (size: Size) => void
-  modes: Record<string, any>
+  modes: Modes
   placement: Placement
 }
 
@@ -81,7 +82,7 @@ function useTooltipContext() {
 
 export type TooltipProps = {
   children: ReactNode
-  modes?: Record<string, any>
+  modes?: Modes
   /** Initial visibility state (controlled) */
   open?: boolean
   /** Callback when visibility changes */

package/src/components/TransactionBubble/TransactionBubble.tsx

@@ -6,6 +6,7 @@ import TransactionStatus from '../TransactionStatus/TransactionStatus'
 import NavArrow from '../NavArrow/NavArrow'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+import type { Modes } from '../../design-tokens'
 
 export type TransactionBubbleProps = {
   description?: string
@@ -16,7 +17,7 @@ export type TransactionBubbleProps = {
   /** Slot for the status area. When provided, replaces the default TransactionStatus + NavArrow. */
   statusSlot?: React.ReactNode
   children?: React.ReactNode
-  modes?: Record<string, any>
+  modes?: Modes
   onPress?: () => void
   style?: ViewStyle
   accessibilityLabel?: string

package/src/components/TransactionDetails/TransactionDetails.tsx

@@ -3,6 +3,7 @@ import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'reac
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // ===== Item Subcomponent =====
 
@@ -12,7 +13,7 @@ export type TransactionDetailsItemProps = {
   /** The value text displayed below the label (e.g., "101674916166") */
   value?: string
   /** Modes object passed to `getVariableByName` for design token resolution */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Optional container style overrides */
   style?: StyleProp<ViewStyle>
   /** Optional label text style overrides */
@@ -126,7 +127,7 @@ export type TransactionDetailsProps = {
   /** Slot for TransactionDetails.Item children */
   children?: React.ReactNode
   /** Modes object passed to `getVariableByName` for design token resolution */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Optional container style overrides */
   style?: StyleProp<ViewStyle>
   /** Accessibility label for screen readers */

package/src/components/TransactionStatus/TransactionStatus.tsx

@@ -3,10 +3,11 @@ import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { Svg, Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // --- Internal Icon Component ---
 type StatusIconProps = {
-    modes?: Record<string, any>
+    modes?: Modes
     width?: number
     height?: number
     color?: string
@@ -44,7 +45,7 @@ export type TransactionStatusProps = {
     /** Date text, e.g. "20 Mar 2025" */
     date?: string
     /** Modes for design token resolution */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Optional container style */
     style?: ViewStyle
 }

package/src/components/UpiHandle/UpiHandle.tsx

@@ -16,6 +16,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
 import Icon from '../../icons/Icon'
+import type { Modes } from '../../design-tokens'
 
 // Default static asset from the component folder.
 // Consumers can override the image via the `source` prop if needed.
@@ -30,7 +31,7 @@ const focusOverlayStyle: ViewStyle = { borderWidth: 1, borderColor: '#222' }
 
 type UpiHandleProps = {
   label?: string;
-  modes?: Record<string, any>;
+  modes?: Modes;
   showIcon?: boolean;
   iconName?: string;
   /**
@@ -62,7 +63,7 @@ interface UpiHandleTokens {
   iconPlaceholderStyle: ViewStyle;
 }
 
-function resolveUpiHandleTokens(modes: Record<string, any>): UpiHandleTokens {
+function resolveUpiHandleTokens(modes: Modes): UpiHandleTokens {
   const backgroundColor = (getVariableByName('upiHandle/background', modes) || '#f5f5f5') as string
   const radius = (getVariableByName('upiHandle/radius', modes) || 99999) as number
   const paddingLeft = (getVariableByName('upiHandle/padding/left', modes) || 4) as number

package/src/components/VStack/VStack.tsx

@@ -3,6 +3,7 @@ import { View, StyleProp, ViewStyle, ViewProps } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export interface VStackProps extends ViewProps {
     /**
@@ -35,7 +36,7 @@ export interface VStackProps extends ViewProps {
     /**
      * Modes object to override default variable values.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 
 /**

package/src/components/docs/modeControls.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import {
+  FIGMA_MODES,
+  FIGMA_COMPONENT_MODES,
+} from '../../design-tokens/figma-modes.generated'
+
+/**
+ * Storybook helpers that turn a component's design-token collections into real,
+ * per-collection `select` controls and merge the picked values into the `modes`
+ * prop — so authors get the same enum-driven DX in the Storybook Controls panel
+ * that the typed `modes` prop gives them in code.
+ *
+ * Fully backward compatible:
+ *   - If nothing is picked, `modes` is left exactly as the story provided it.
+ *   - Any `modes` value the story already sets WINS over a control selection,
+ *     so existing stories render identically until someone touches a control.
+ *   - The synthetic control args are stripped before they reach the component,
+ *     so they never leak in as unknown props.
+ */
+
+const UNSET = '(default)'
+
+type Collections = readonly string[]
+
+/**
+ * Resolve the list of collections to expose. Accepts a component name (looked up
+ * in the generated map), an explicit list, or both (merged + de-duplicated).
+ */
+function resolveCollections(
+  componentOrCollections: string | Collections,
+  extra: Collections = []
+): string[] {
+  const fromName =
+    typeof componentOrCollections === 'string'
+      ? FIGMA_COMPONENT_MODES[componentOrCollections] || []
+      : componentOrCollections
+  const merged = new Set<string>([...fromName, ...extra])
+  // Only keep collections that actually have more than one mode to choose from.
+  return [...merged].filter((name) => {
+    const modes = (FIGMA_MODES as Record<string, readonly string[]>)[name]
+    return Array.isArray(modes) && modes.length > 1
+  })
+}
+
+/**
+ * Build `argTypes` entries — one `select` per multi-mode collection, grouped
+ * under a "Modes" category. Spread the result into your story `meta.argTypes`.
+ */
+export function modeArgTypes(
+  componentOrCollections: string | Collections,
+  extra: Collections = []
+): Record<string, unknown> {
+  const collections = resolveCollections(componentOrCollections, extra)
+  const argTypes: Record<string, unknown> = {}
+  for (const name of collections) {
+    const modes = (FIGMA_MODES as Record<string, readonly string[]>)[name]
+    argTypes[name] = {
+      name,
+      description: `\`${name}\` collection mode`,
+      control: { type: 'select' },
+      options: [UNSET, ...modes],
+      table: { category: 'Modes' },
+    }
+  }
+  return argTypes
+}
+
+/**
+ * A decorator that merges the picked collection modes into `args.modes` and
+ * strips the synthetic control args before they reach the component.
+ */
+export function modeDecorator(
+  componentOrCollections: string | Collections,
+  extra: Collections = []
+) {
+  const collections = resolveCollections(componentOrCollections, extra)
+
+  return function ModeControlsDecorator(Story: any, context: any) {
+    const args = context?.args || {}
+    const picked: Record<string, string> = {}
+    // Start from the real story args so nothing is dropped. Passing only the
+    // synthetic keys here would REPLACE the story args in this Storybook
+    // renderer, wiping out real props (e.g. `series`, slot nodes) and leaving
+    // the component to render empty/crash.
+    const override: Record<string, unknown> = { ...args }
+
+    for (const name of collections) {
+      const value = args[name]
+      if (value && value !== UNSET) {
+        picked[name] = value
+      }
+      // Neutralise the synthetic arg so it is never spread onto the component.
+      override[name] = undefined
+    }
+
+    // Explicit story-provided modes win over control selections.
+    override.modes = { ...picked, ...(args.modes || {}) }
+
+    return <Story args={override} />
+  }
+}
+
+/**
+ * Convenience: returns `{ argTypes, decorators }` to spread directly into a
+ * story `meta`.
+ *
+ * @example
+ * const meta = {
+ *   title: 'Components/Button',
+ *   component: Button,
+ *   ...withModeControls('Button'),
+ * }
+ */
+export function withModeControls(
+  componentOrCollections: string | Collections,
+  extra: Collections = []
+): { argTypes: Record<string, unknown>; decorators: unknown[] } {
+  return {
+    argTypes: modeArgTypes(componentOrCollections, extra),
+    decorators: [modeDecorator(componentOrCollections, extra)],
+  }
+}

package/src/components/index.ts

@@ -5,6 +5,7 @@ export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
 export { default as Badge } from './Badge/Badge';
+export { default as BenefitCard, type BenefitCardProps, type BenefitCardItem } from './BenefitCard/BenefitCard';
 export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as BrandChip, type BrandChipProps } from './BrandChip/BrandChip';
@@ -20,11 +21,12 @@ export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGro
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
 export { default as CardFinancialCondition, type CardFinancialConditionProps } 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 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';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
-export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
+export { default as DropdownInput, type DropdownInputProps, type DropdownInputHandle, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
 export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
 export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA'
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
@@ -38,6 +40,7 @@ export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating'
 export { default as CoverageRing, type CoverageRingProps } from './CoverageRing/CoverageRing'
 export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem } from './CoverageBarComparison/CoverageBarComparison'
+export { default as ComparisonBar, type ComparisonBarProps, type ComparisonBarItem } from './ComparisonBar/ComparisonBar'
 export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart'
 export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid'
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
@@ -63,9 +66,11 @@ export { default as NoteInput, type NoteInputProps } from './NoteInput/NoteInput
 export { default as Nudge, type NudgeProps } from './Nudge/Nudge';
 export { default as NavArrow } from './NavArrow/NavArrow';
 export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Numpad/Numpad';
+export { default as Overlay, type OverlayProps } from './Overlay/Overlay';
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
+export { default as Slider, type SliderProps, type SliderHandle } from './Slider/Slider';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
 export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
@@ -125,12 +130,16 @@ export { default as ToastProvider, type ToastProviderProps } from './Toast/Toast
 export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';
 export { default as AmountInput, type AmountInputProps } from './AmountInput/AmountInput';
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
+export { default as PdpCcCard, type PdpCcCardProps, type PdpCcCardMetric } from './PdpCcCard/PdpCcCard';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
 export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
+export { default as CompareTable, type CompareTableProps, type CompareTableColumn, type CompareTableRow, type CompareTableCellValue, type CompareTableSection } from './CompareTable/CompareTable';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
+export { default as ProductMerchandisingCard, type ProductMerchandisingCardProps } from './ProductMerchandisingCard/ProductMerchandisingCard';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';
+export { default as ProjectionMarker, type ProjectionMarkerProps } from './ProjectionMarker/ProjectionMarker';
 export { default as ProgressBadge, type ProgressBadgeProps } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount, type SwappableAmountProps } from './SwappableAmount/SwappableAmount';
 export {
@@ -151,5 +160,6 @@ export { default as StrengthIndicator, type StrengthIndicatorProps, type Strengt
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
 export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
+export { default as TextSegment, type TextSegmentProps, type TextSegmentRun } from './TextSegment/TextSegment';
 export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';