jfs-components 0.1.2 → 0.1.8

package/src/components/TextInput/TextInput.tsx

@@ -1,8 +1,8 @@
-import React, { useRef, useState } from 'react'
+import React, { forwardRef, useRef, useState } from 'react'
 import { Platform, Pressable, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -112,7 +112,7 @@ type TextInputProps = {
   accessibilityHint?: string;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
 
-function TextInput({
+const TextInputBase = forwardRef<RNTextInput, TextInputProps>(function TextInput({
   placeholder = '',
   value = '',
   onChangeText,
@@ -127,7 +127,7 @@ function TextInput({
   accessibilityLabel,
   accessibilityHint,
   ...rest
-}: TextInputProps) {
+}: TextInputProps, ref: React.Ref<RNTextInput>) {
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
@@ -251,7 +251,7 @@ function TextInput({
         </View>
       )}
       <RNTextInput
-        ref={inputRef}
+        ref={mergeRefs(inputRef, ref)}
         accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
         placeholder={displayPlaceholder}
@@ -290,7 +290,7 @@ function TextInput({
   }
 
   return <View style={containerStyleArray}>{inner}</View>
-}
+})
 
 /**
  * TextInput.Search component that mirrors the Figma "textInput.search" component.
@@ -325,7 +325,7 @@ type TextInputSearchProps = {
   onBlur?: (e: any) => void;
 } & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
 
-function TextInputSearch({
+const TextInputSearch = forwardRef<RNTextInput, TextInputSearchProps>(function TextInputSearch({
   placeholder = 'Search',
   value = '',
   onChangeText,
@@ -338,7 +338,7 @@ function TextInputSearch({
   onFocus,
   onBlur,
   ...rest
-}: TextInputSearchProps) {
+}: TextInputSearchProps, ref: React.Ref<RNTextInput>) {
   // Resolve icon tokens for default search icon
   const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
   const iconSize = getVariableByName('textInput/icon/size', modes) || 18
@@ -379,10 +379,14 @@ function TextInputSearch({
     textInputProps.accessibilityHint = accessibilityHint
   }
 
-  return <TextInput {...(textInputProps as TextInputProps)} />
-}
+  return <TextInput ref={ref} {...(textInputProps as TextInputProps)} />
+})
 
-// Attach Search as a property of TextInput using namespace pattern
+// Attach Search as a property of TextInput using namespace pattern. The base
+// component is created via forwardRef, so we compose the static onto a typed
+// alias to keep `TextInput.Search` strongly typed.
+type TextInputComponent = typeof TextInputBase & { Search: typeof TextInputSearch }
+const TextInput = TextInputBase as TextInputComponent
 TextInput.Search = TextInputSearch
 
 export default TextInput

package/src/components/TextSegment/TextSegment.tsx

@@ -0,0 +1,166 @@
+import React, { useMemo } from 'react'
+import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single coloured run inside a {@link TextSegment}. Each run can carry its own
+ * `modes`, so individual fragments of the same paragraph can resolve different
+ * design tokens (most commonly a different `text/foreground` colour) while still
+ * flowing — and wrapping — inline as one continuous line of text.
+ */
+export type TextSegmentRun = {
+  /** The text for this run. Include trailing/leading spaces yourself when you want spacing between runs (inline text has no gap concept). */
+  text: string
+  /**
+   * Per-run mode overrides. Merged on top of the parent `TextSegment` modes, so
+   * a run only needs to specify what differs (e.g. `{ 'Text Appearance': 'Primary' }`
+   * to recolour just that fragment). Everything else is inherited.
+   */
+  modes?: Modes
+  /** Optional per-run style override applied last, on top of the token-resolved style. */
+  style?: StyleProp<TextStyle>
+}
+
+export type TextSegmentProps = {
+  /**
+   * Declarative, data-driven way to compose a multi-colour string. Each entry
+   * becomes an inline run. This is the simplest API when the segments are known
+   * up front:
+   *
+   * ```tsx
+   * <TextSegment segments={[
+   *   { text: 'Upsell message ' },
+   *   { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+   * ]} />
+   * ```
+   *
+   * When both `segments` and `children` are provided, `children` win.
+   */
+  segments?: TextSegmentRun[]
+  /**
+   * Compositional alternative to {@link TextSegmentProps.segments}. Pass library
+   * `Text` elements (or plain strings) as children and they are rendered nested
+   * inside the same paragraph so they wrap together. The parent `modes` cascade
+   * down to every child via `cloneChildrenWithModes`, and each child may still
+   * override with its own `modes`:
+   *
+   * ```tsx
+   * <TextSegment>
+   *   <Text>Upsell message </Text>
+   *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+   * </TextSegment>
+   * ```
+   */
+  children?: React.ReactNode
+  /** Horizontal alignment of the whole paragraph. */
+  textAlign?: 'Left' | 'Center'
+  /** Clamp the paragraph to this many lines (truncates with an ellipsis). Applies to the whole composed line, not per-run. */
+  numberOfLines?: number
+  /** Mode configuration used for the base style and cascaded to every run/child. */
+  modes?: Modes
+  /** Style override applied to the outer paragraph (e.g. width constraints to force wrapping). */
+  style?: StyleProp<TextStyle>
+}
+
+const TEXT_ALIGN_MAP: Record<NonNullable<TextSegmentProps['textAlign']>, TextStyle['textAlign']> = {
+  Left: 'left',
+  Center: 'center',
+}
+
+/**
+ * Resolves the `text/*` design tokens for a given modes object into an RN
+ * `TextStyle`. Shared by the outer paragraph and every inline run so a run that
+ * only overrides colour still inherits the family/size/weight/spacing.
+ */
+function resolveTextStyle(modes: Modes): TextStyle {
+  return {
+    color: (getVariableByName('text/foreground', modes) ?? '#000000') as string,
+    fontFamily: (getVariableByName('text/fontFamily', modes) ?? 'JioType') as string,
+    fontSize: (getVariableByName('text/fontSize', modes) ?? 14) as number,
+    fontWeight: String(getVariableByName('text/fontWeight', modes) ?? '500') as TextStyle['fontWeight'],
+    lineHeight: (getVariableByName('text/lineHeight', modes) ?? 20) as number,
+    letterSpacing: (getVariableByName('text/letterSpacing', modes) ?? -0.5) as number,
+  }
+}
+
+/**
+ * TextSegment — composes several differently-styled text runs into a single
+ * paragraph that wraps as one continuous line.
+ *
+ * On the web you would reach for `<span>`s inside a `<p>`; the React Native
+ * equivalent is nesting `<Text>` inside a parent `<Text>`. That nesting is the
+ * whole trick: sibling `<View>`s would lay out as flex blocks and break onto
+ * rigid rows, but nested `<Text>` nodes flow inline and wrap naturally at word
+ * boundaries — exactly like a real paragraph — while each nested run keeps its
+ * own colour/weight resolved from its own `modes`.
+ *
+ * Two equivalent ways to author content:
+ *  - **`segments` prop** — declarative array of `{ text, modes }` runs.
+ *  - **`children`** — pass library `Text` elements (or strings); the parent
+ *    `modes` cascade down and each child may override its own.
+ *
+ * @example Data-driven
+ * ```tsx
+ * <TextSegment
+ *   segments={[
+ *     { text: 'Upsell message ' },
+ *     { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Compositional
+ * ```tsx
+ * <TextSegment numberOfLines={2}>
+ *   <Text>Pay with </Text>
+ *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+ *   <Text> and earn rewards on every transaction.</Text>
+ * </TextSegment>
+ * ```
+ */
+function TextSegment({
+  segments,
+  children,
+  textAlign = 'Left',
+  numberOfLines,
+  modes = EMPTY_MODES,
+  style,
+}: TextSegmentProps) {
+  const baseStyle = useMemo<TextStyle>(
+    () => ({ ...resolveTextStyle(modes), textAlign: TEXT_ALIGN_MAP[textAlign] }),
+    [modes, textAlign]
+  )
+
+  // children win over `segments` so the compositional API can always override.
+  const hasChildren = children !== undefined && children !== null && children !== false
+
+  const renderedSegments = useMemo(() => {
+    if (hasChildren || !segments?.length) return null
+    return segments.map((run, index) => {
+      // Parent modes first, then the run's own modes override them — mirrors the
+      // merge order used by `cloneChildrenWithModes` for the children API.
+      const runModes = run.modes ? { ...modes, ...run.modes } : modes
+      const runStyle = run.modes ? resolveTextStyle(runModes) : undefined
+      return (
+        <RNText key={index} style={[runStyle, run.style]}>
+          {run.text}
+        </RNText>
+      )
+    })
+  }, [segments, hasChildren, modes])
+
+  // The cascade: every child (and its descendants) receives the parent modes so
+  // nested library `Text` runs resolve their tokens against the same baseline,
+  // while still honouring any per-child `modes` override.
+  const content = hasChildren ? cloneChildrenWithModes(children, modes) : renderedSegments
+
+  return (
+    <RNText style={[baseStyle, style]} numberOfLines={numberOfLines}>
+      {content}
+    </RNText>
+  )
+}
+
+export default React.memo(TextSegment)

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';
@@ -67,6 +70,7 @@ 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';
@@ -126,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 {
@@ -152,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';