jfs-components 0.0.3 → 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/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>
+    )
+}

package/src/components/TransactionDetails/TransactionDetails.mdx

@@ -0,0 +1,98 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as TransactionDetailsStories from './TransactionDetails.stories';
+import TransactionDetails from './TransactionDetails';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={TransactionDetailsStories} />
+
+# TransactionDetails
+
+TransactionDetails is a container component that displays a list of transaction detail items, each showing a label-value pair. It uses design tokens from Figma for consistent styling.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={TransactionDetailsStories.Default} />
+</Canvas>
+
+## Usage Example
+
+```tsx
+import TransactionDetails from 'jfs-components';
+
+function PaymentConfirmation() {
+  return (
+    <TransactionDetails>
+      <TransactionDetails.Item label="UPI transaction ID" value="101674916166" />
+      <TransactionDetails.Item label="From: 5678 XXXX XXXX 1234" value="JioFinance • shivashankar@okjio" />
+      <TransactionDetails.Item label="To: SHIVASHANKAR RAJAN" value="JioFinance • shivashankar@okjio" />
+      <TransactionDetails.Item label="Payment method" value="UPI" />
+    </TransactionDetails>
+  );
+}
+```
+
+## Single Item
+
+<Canvas>
+  <Story of={TransactionDetailsStories.SingleItem} />
+</Canvas>
+
+<AccessibilitySection
+  items={[
+    'TransactionDetails has role "summary" for screen readers to announce it as a summary section.',
+    'Each DetailItem has role "text" with a combined label and value for clear reading.',
+    'Use descriptive labels that clearly indicate what the value represents.',
+    'Ensure sufficient color contrast between label and value text.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>TransactionDetails (Container)</strong> — Wraps all Item children with consistent gap and padding.</li>
+    <li><strong>TransactionDetails.Item</strong> — Individual label-value pair component.</li>
+    <li><strong>Label</strong> — Descriptive text above the value, using token typography.</li>
+    <li><strong>Value</strong> — The actual data/content text, using token typography.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Always use TransactionDetails.Item as direct children of TransactionDetails for proper mode propagation.',
+    'Keep label text concise and descriptive.',
+    'Values can be longer but consider text wrapping on smaller screens.',
+    'Use consistent date/time and number formatting across all detail items.',
+  ]}
+/>
+
+## TransactionDetails Props
+
+<ArgsTable of={TransactionDetails} />
+
+## TransactionDetails.Item Props
+
+<ArgsTable of={TransactionDetails.Item} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`detailItem/gap`**
+- **`detailItem/label/color`**
+- **`detailItem/label/fontFamily`**
+- **`detailItem/label/fontSize`**
+- **`detailItem/label/fontWeight`**
+- **`detailItem/label/lineHeight`**
+- **`detailItem/value/color`**
+- **`detailItem/value/fontFamily`**
+- **`detailItem/value/fontSize`**
+- **`detailItem/value/fontWeight`**
+- **`detailItem/value/lineHeight`**
+- **`transationDetails/gap`**
+- **`transationDetails/padding/horizontal`**
+- **`transationDetails/padding/vertical`**
+
+All tokens support mode-based theming through the `modes` prop.