jfs-components 0.0.2 → 0.0.4

package/src/components/CtaCard/CtaCard.tsx

@@ -0,0 +1,185 @@
+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 IconCapsule from '../IconCapsule/IconCapsule';
+import Button from '../Button/Button';
+
+type CtaCardProps = {
+    /**
+     * Title text for the card
+     */
+    title?: string;
+    /**
+     * Body text for the card
+     */
+    body?: string;
+    /**
+     * Name of the icon to display in the IconCapsule (if iconSlot is not provided)
+     */
+    iconName?: string;
+    /**
+     * Label for the button (if buttonSlot is not provided)
+     */
+    buttonLabel?: string;
+    /**
+     * Callback for the button press (if buttonSlot is not provided)
+     */
+    onPressButton?: () => void;
+    /**
+     * Modes object for design token resolution
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional custom slot for the icon area.
+     * If provided, overrides the default IconCapsule.
+     * `modes` will be automatically passed to this slot if it's a valid React element.
+     */
+    iconSlot?: React.ReactNode;
+    /**
+     * Optional custom slot for the title area.
+     * If provided, overrides the default title Text.
+     * `modes` will be automatically passed to this slot if it's a valid React element.
+     */
+    titleSlot?: React.ReactNode;
+    /**
+     * Optional custom slot for the body area.
+     * If provided, overrides the default body Text.
+     * `modes` will be automatically passed to this slot if it's a valid React element.
+     */
+    bodySlot?: React.ReactNode;
+    /**
+     * Optional custom slot for the button area.
+     * If provided, overrides the default Button.
+     * `modes` will be automatically passed to this slot if it's a valid React element.
+     */
+    buttonSlot?: React.ReactNode;
+
+    style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * CtaCard component that maps directly to the Figma design using design tokens.
+ *
+ * @component
+ */
+function CtaCard({
+    title = "Lets create your UPI ID",
+    body = "Send and receive money securely.",
+    iconName = "ic_upi_number",
+    buttonLabel = "Get started",
+    onPressButton,
+    modes = {},
+    iconSlot,
+    titleSlot,
+    bodySlot,
+    buttonSlot,
+    style,
+}: CtaCardProps) {
+    // --- Token Resolution ---
+    // Container
+    const backgroundColor = getVariableByName('ctaCard/background', modes) || '#0078ad';
+    const radius = getVariableByName('ctaCard/radius', modes) || 16;
+    const paddingHorizontal = getVariableByName('ctaCard/padding/horizontal', modes) || 20;
+    const paddingVertical = getVariableByName('ctaCard/padding/vertical', modes) || 23;
+    const gap = getVariableByName('ctaCard/gap', modes) || 16;
+
+    // Content Wrap
+    const contentGap = getVariableByName('ctaCard/content/gap', modes) || 8;
+
+    // Title Text
+    const titleColor = getVariableByName('ctaCard/title/color', modes) || '#ffffff';
+    const titleFontFamily = getVariableByName('ctaCard/title/fontFamily', modes) || 'JioType Var';
+    const titleFontSize = getVariableByName('ctaCard/title/fontSize', modes) || 23;
+    const titleLineHeight = getVariableByName('ctaCard/title/lineHeight', modes) || 23;
+
+    // Body Text
+    const bodyColor = getVariableByName('ctaCard/body/color', modes) || '#ffffff';
+    const bodyFontFamily = getVariableByName('ctaCard/body/fontFamily', modes) || 'JioType Var';
+    const bodyFontSize = getVariableByName('ctaCard/body/fontSize', modes) || 14;
+    const bodyLineHeight = getVariableByName('ctaCard/body/lineHeight', modes) || 17;
+
+    // --- Styles ---
+    const containerStyle: ViewStyle = {
+        backgroundColor,
+        borderRadius: radius,
+        paddingHorizontal,
+        paddingVertical,
+        gap,
+        alignItems: 'flex-start',
+        width: '100%', // Adjust based on layout needs, usually cards take full width available
+        overflow: 'hidden',
+    };
+
+    const contentWrapStyle: ViewStyle = {
+        gap: contentGap,
+        alignItems: 'flex-start',
+        width: '100%',
+    };
+
+    const titleStyle: TextStyle = {
+        color: titleColor,
+        fontFamily: titleFontFamily,
+        fontSize: titleFontSize,
+        lineHeight: titleLineHeight,
+        fontWeight: '900', // "Black" in Figma often maps to 900
+    };
+
+    const bodyStyle: TextStyle = {
+        color: bodyColor,
+        fontFamily: bodyFontFamily,
+        fontSize: bodyFontSize,
+        lineHeight: bodyLineHeight,
+        fontWeight: '400', // Regular
+    };
+
+    // --- Slot Helper ---
+    // Helper to clone element with modes if no modes are already present on it (standard in this library)
+    const renderSlot = (slot: React.ReactNode) => {
+        if (React.isValidElement(slot)) {
+            return React.cloneElement(slot as React.ReactElement<any>, {
+                modes: { ...modes, ...(slot as any).props.modes },
+            });
+        }
+        return slot;
+    };
+
+    return (
+        <View style={[containerStyle, style]}>
+            <View style={contentWrapStyle}>
+                {/* Icon Slot */}
+                {iconSlot ? (
+                    renderSlot(iconSlot)
+                ) : (
+                    <IconCapsule iconName={iconName} modes={modes} />
+                )}
+
+                {/* Title Slot */}
+                {titleSlot ? (
+                    renderSlot(titleSlot)
+                ) : (
+                    <Text style={titleStyle}>{title}</Text>
+                )}
+
+                {/* Body Slot */}
+                {bodySlot ? (
+                    renderSlot(bodySlot)
+                ) : (
+                    <Text style={bodyStyle}>{body}</Text>
+                )}
+            </View>
+
+            {/* Button Slot - placed outside content wrap based on Figma structure (flex-col gap=16) */}
+            {buttonSlot ? (
+                renderSlot(buttonSlot)
+            ) : (
+                <Button
+                    label={buttonLabel}
+                    onPress={onPressButton}
+                    modes={modes}
+                />
+            )}
+        </View>
+    );
+}
+
+export default CtaCard;

package/src/components/CtaCard/index.ts

@@ -0,0 +1 @@
+export { default } from './CtaCard';

package/src/components/MoneyValue/MoneyValue.tsx

@@ -40,10 +40,12 @@ const CURRENCY_SYMBOLS = {
 type MoneyValueProps = {
   value?: string | number;
   currency?: string;
+  negative?: boolean;
   modes?: Record<string, any>;
   style?: StyleProp<ViewStyle>;
   valueStyle?: StyleProp<TextStyle>;
   currencyStyle?: StyleProp<TextStyle>;
+  negativeSignStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 } & React.ComponentProps<typeof View>;
@@ -58,29 +60,54 @@ type MoneyValueProps = {
  * (e.g. "INR", "USD"). When an ISO code is provided, it will be mapped to the
  * appropriate symbol, with special care to support INR and other major currencies.
  *
+ * Negative values are auto-detected from the value prop (e.g., -500 or "-500").
+ * The `negative` prop can be used to explicitly override this behavior.
+ *
  * @component
  * @param {Object} props
- * @param {string|number} [props.value="500"] - Monetary value to display.
+ * @param {string|number} [props.value="500"] - Monetary value to display. Negative values are auto-detected.
  * @param {string} [props.currency="₹"] - Currency symbol or ISO code (e.g. "INR").
+ * @param {boolean} [props.negative] - Explicitly override negative display. If undefined, auto-detects from value.
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  *                                   Example: {"MoneyValue / Theme": "Default"}
  * @param {Object} [props.style] - Optional container style overrides.
  * @param {Object} [props.valueStyle] - Optional value text style overrides.
  * @param {Object} [props.currencyStyle] - Optional currency text style overrides.
+ * @param {Object} [props.negativeSignStyle] - Optional negative sign text style overrides.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, generates from value and currency
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
 function MoneyValue({
   value = '500',
   currency = '₹',
+  negative,
   modes = {},
   style,
   valueStyle,
   currencyStyle,
+  negativeSignStyle,
   accessibilityLabel,
   accessibilityHint,
   ...rest
 }: MoneyValueProps) {
+  // Auto-detect negative from value and compute display value
+  const { isNegative, displayValue } = React.useMemo(() => {
+    const stringValue = String(value)
+    const trimmed = stringValue.trim()
+    const valueIsNegative = trimmed.startsWith('-') || (typeof value === 'number' && value < 0)
+    
+    // Strip leading minus sign for display (we show it separately)
+    const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed
+    
+    // Use explicit negative prop if provided, otherwise use auto-detected
+    const showNegative = negative !== undefined ? negative : valueIsNegative
+    
+    return {
+      isNegative: showNegative,
+      displayValue: absoluteValue,
+    }
+  }, [value, negative])
+
   // Resolve typography and layout tokens from Figma
   const textColor =
     getVariableByName('moneyValue/text/color', modes) || '#0f0d0a'
@@ -122,7 +149,7 @@ function MoneyValue({
 
   // Generate default accessibility label from value and currency
   const defaultAccessibilityLabel = accessibilityLabel || 
-    `${resolvedCurrency} ${value}`
+    `${isNegative ? 'negative ' : ''}${resolvedCurrency} ${displayValue}`
 
   return (
     <View 
@@ -132,6 +159,15 @@ function MoneyValue({
       accessibilityHint={accessibilityHint}
       {...rest}
     >
+      {isNegative && (
+        <Text 
+          style={[baseTextStyle, negativeSignStyle]}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        >
+          -
+        </Text>
+      )}
       <Text 
         style={[baseTextStyle, currencyStyle]}
         accessibilityElementsHidden={true}
@@ -144,7 +180,7 @@ function MoneyValue({
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       >
-        {value}
+        {displayValue}
       </Text>
     </View>
   )

package/src/components/ThreadHero/ThreadHero.mdx

@@ -0,0 +1,69 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as ThreadHeroStories from './ThreadHero.stories';
+import ThreadHero from './ThreadHero';
+
+<Meta of={ThreadHeroStories} />
+
+# ThreadHero
+
+The `ThreadHero` component displays a central user identity with an avatar, title, subtitle, and an optional caption.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import ThreadHero from './ThreadHero';
+import Avatar from '../Avatar/Avatar';
+
+<ThreadHero
+  title="Subhash Rajan"
+  subtitle="Banking name: SHIVASHANKAR RAJAN"
+  caption="+91 00000 00000"
+  renderAvatar={<Avatar size="small" initials="SR" />}
+/>
+```
+
+## Props
+
+<ArgsTable of={ThreadHero} />
+
+## Stories
+
+### Default
+
+<Canvas>
+  <Story of={ThreadHeroStories.Default} />
+</Canvas>
+
+### Without Caption
+
+<Canvas>
+  <Story of={ThreadHeroStories.WithoutCaption} />
+</Canvas>
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`threadHero/caption/color`**
+- **`threadHero/caption/fontFamily`**
+- **`threadHero/caption/fontSize`**
+- **`threadHero/caption/fontWeight`**
+- **`threadHero/caption/lineHeight`**
+- **`threadHero/details/gap`**
+- **`threadHero/gap`**
+- **`threadHero/subtitle/color`**
+- **`threadHero/subtitle/fontFamily`**
+- **`threadHero/subtitle/fontSize`**
+- **`threadHero/subtitle/fontWeight`**
+- **`threadHero/subtitle/lineHeight`**
+- **`threadHero/title/color`**
+- **`threadHero/title/fontFamily`**
+- **`threadHero/title/fontSize`**
+- **`threadHero/title/fontWeight`**
+- **`threadHero/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/ThreadHero/ThreadHero.tsx

@@ -0,0 +1,124 @@
+import React, { isValidElement, cloneElement, type ReactNode } from 'react'
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type ThreadHeroProps = {
+    /** Title text, e.g. "Subhash Rajan" */
+    title?: string
+    /** Subtitle text, e.g. "Banking name: SHIVASHANKAR RAJAN" */
+    subtitle?: string
+    /** Optional caption text below the details, e.g. "+91 00000 00000" */
+    caption?: string
+    /** Slot for Avatar component */
+    renderAvatar?: ReactNode
+    /** Modes for design token resolution */
+    modes?: Record<string, any>
+    /** Optional container style */
+    style?: ViewStyle
+}
+
+/**
+ * ThreadHero component displaying a central identity with avatar, title, subtitle, and caption.
+ */
+export default function ThreadHero({
+    title = 'Subhash Rajan',
+    subtitle = 'Banking name: SHIVASHANKAR RAJAN',
+    caption,
+    renderAvatar,
+    modes = {},
+    style,
+}: ThreadHeroProps) {
+    // Container Gaps
+    const containerGap = Number(getVariableByName('threadHero/gap', modes)) || 8
+    const detailsGap = Number(getVariableByName('threadHero/details/gap', modes)) || 2
+
+    // Title Styles
+    const titleColor = getVariableByName('threadHero/title/color', modes) || '#191b1e'
+    const titleFontSize = Number(getVariableByName('threadHero/title/fontSize', modes)) || 16
+    const titleFontFamily = getVariableByName('threadHero/title/fontFamily', modes) || 'System'
+    const titleLineHeight = Number(getVariableByName('threadHero/title/lineHeight', modes)) || 20
+    const titleFontWeight = getVariableByName('threadHero/title/fontWeight', modes) || '600'
+
+    // Subtitle Styles
+    const subtitleColor = getVariableByName('threadHero/subtitle/color', modes) || '#5d5d61'
+    const subtitleFontSize = Number(getVariableByName('threadHero/subtitle/fontSize', modes)) || 12
+    const subtitleFontFamily = getVariableByName('threadHero/subtitle/fontFamily', modes) || 'System'
+    const subtitleLineHeight = Number(getVariableByName('threadHero/subtitle/lineHeight', modes)) || 18
+    const subtitleFontWeight = getVariableByName('threadHero/subtitle/fontWeight', modes) || '500'
+
+    // Caption Styles
+    const captionColor = getVariableByName('threadHero/caption/color', modes) || '#5d5d61'
+    const captionFontSize = Number(getVariableByName('threadHero/caption/fontSize', modes)) || 12
+    const captionFontFamily = getVariableByName('threadHero/caption/fontFamily', modes) || 'System'
+    const captionLineHeight = Number(getVariableByName('threadHero/caption/lineHeight', modes)) || 18
+    const captionFontWeight = getVariableByName('threadHero/caption/fontWeight', modes) || '500'
+
+    // Styles
+    const containerStyle: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: containerGap,
+        ...style,
+    }
+
+    const detailsStyle: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: detailsGap,
+        width: '100%',
+    }
+
+    const titleStyle: TextStyle = {
+        color: titleColor,
+        fontSize: titleFontSize,
+        fontFamily: titleFontFamily,
+        lineHeight: titleLineHeight,
+        fontWeight: titleFontWeight as any,
+        textAlign: 'center',
+        minWidth: '100%',
+    }
+
+    const subtitleStyle: TextStyle = {
+        color: subtitleColor,
+        fontSize: subtitleFontSize,
+        fontFamily: subtitleFontFamily,
+        lineHeight: subtitleLineHeight,
+        fontWeight: subtitleFontWeight as any,
+        textAlign: 'center',
+        minWidth: '100%',
+    }
+
+    const captionStyle: TextStyle = {
+        color: captionColor,
+        fontSize: captionFontSize,
+        fontFamily: captionFontFamily,
+        lineHeight: captionLineHeight,
+        fontWeight: captionFontWeight as any,
+        textAlign: 'center',
+        width: '100%',
+    }
+
+    // Process Avatar Slot to inject modes
+    const avatarContent = isValidElement(renderAvatar)
+        ? cloneElement(renderAvatar as React.ReactElement<any>, { modes })
+        : renderAvatar
+
+    return (
+        <View style={containerStyle}>
+            <View style={detailsStyle}>
+                {avatarContent}
+                {title ? <Text style={titleStyle}>{title}</Text> : null}
+                {subtitle ? (
+                    <Text style={subtitleStyle} numberOfLines={1} ellipsizeMode="tail">
+                        {subtitle}
+                    </Text>
+                ) : null}
+            </View>
+            {caption ? (
+                <Text style={captionStyle} numberOfLines={1} ellipsizeMode="tail">
+                    {caption}
+                </Text>
+            ) : null}
+        </View>
+    )
+}

package/src/components/TransactionBubble/TransactionBubble.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as TransactionBubbleStories from './TransactionBubble.stories';
+import TransactionBubble from './TransactionBubble';
+
+<Meta of={TransactionBubbleStories} />
+
+# TransactionBubble
+
+TransactionBubble component with design-token-driven styling.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={TransactionBubbleStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={TransactionBubble} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`transactionBubble/background`**
+- **`transactionBubble/border/color`**
+- **`transactionBubble/border/size`**
+- **`transactionBubble/description/color`**
+- **`transactionBubble/description/fontFamily`**
+- **`transactionBubble/description/fontSize`**
+- **`transactionBubble/description/lineHeight`**
+- **`transactionBubble/gap`**
+- **`transactionBubble/padding`**
+- **`transactionBubble/radius`**
+- **`transactionBubble/statusWrap/height`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/TransactionBubble/TransactionBubble.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import MoneyValue from '../MoneyValue/MoneyValue'
+import NavArrow from '../NavArrow/NavArrow'
+import TransactionStatus from '../TransactionStatus/TransactionStatus'
+
+export type TransactionBubbleProps = {
+    /** Description text, e.g. "Payment to Uber India" */
+    description?: string
+    /** Money amount */
+    amount?: string | number
+    /** Currency code or symbol */
+    currency?: string
+    /** Transaction status text, e.g. "Expired" */
+    status?: string
+    /** Date/time string associated with status */
+    statusDate?: string
+    /** Modes for design token resolution */
+    modes?: Record<string, any>
+    /** Optional container style */
+    style?: ViewStyle
+}
+
+/**
+ * TransactionBubble component displaying transaction details in a bubble card.
+ *
+ * @component
+ */
+export default function TransactionBubble({
+    description = 'Payment to Uber India',
+    amount = '56',
+    currency = '₹',
+    status = 'Expired',
+    statusDate = '20 Mar 2025',
+    modes = {},
+    style,
+}: TransactionBubbleProps) {
+    // --- Container Tokens ---
+    const backgroundColor = getVariableByName('transactionBubble/background', modes) || '#ffffff'
+    const borderColor = getVariableByName('transactionBubble/border/color', modes) || '#e5e5e5'
+    const borderWidth = Number(getVariableByName('transactionBubble/border/size', modes)) || 1
+    const borderRadius = Number(getVariableByName('transactionBubble/radius', modes)) || 23
+    const padding = Number(getVariableByName('transactionBubble/padding', modes)) || 16
+    const gap = Number(getVariableByName('transactionBubble/gap', modes)) || 8
+
+    // --- Description Tokens ---
+    const descColor = getVariableByName('transactionBubble/description/color', modes) || '#24262b'
+    const descFontSize = Number(getVariableByName('transactionBubble/description/fontSize', modes)) || 14
+    const descLineHeight = Number(getVariableByName('transactionBubble/description/lineHeight', modes)) || 17
+    const descFontFamily = getVariableByName('transactionBubble/description/fontFamily', modes) || 'System'
+
+    // --- Status Row Tokens ---
+    // Status wrapping gap from TransactionBubble definition for the row container
+    const statusHeight = Number(getVariableByName('transactionBubble/statusWrap/height', modes)) || 18
+
+    const containerStyle: ViewStyle = {
+        backgroundColor,
+        borderColor,
+        borderWidth,
+        borderRadius,
+        padding,
+        gap,
+        alignItems: 'flex-start',
+        width: 231, // Fixed width from design or prop? Design shows w-[231px]. We can make it auto or fixed. Let's respect style prop.
+        ...style,
+    }
+
+    const descriptionStyle: TextStyle = {
+        color: descColor,
+        fontSize: descFontSize,
+        lineHeight: descLineHeight,
+        fontFamily: descFontFamily,
+        fontWeight: '500', // Hardcoded in design as 'Medium' -> 500
+    }
+
+    return (
+        <View style={containerStyle}>
+            {/* Description & Money Wrapper (Vertical) */}
+            <View style={{ gap: 8, width: '100%' }}>
+                <Text style={descriptionStyle} numberOfLines={1} ellipsizeMode='tail'>
+                    {description}
+                </Text>
+
+                <MoneyValue
+                    value={amount}
+                    currency={currency}
+                    modes={modes}
+                />
+            </View>
+
+            {/* Status Row */}
+            <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                width: '100%',
+                height: statusHeight, // Enforce height from design
+            }}>
+                <TransactionStatus
+                    status={status}
+                    date={statusDate}
+                    modes={modes}
+                />
+
+                <NavArrow
+                    direction="Forward"
+                    modes={modes}
+                />
+            </View>
+        </View>
+    )
+}