jfs-components 0.0.3 → 0.0.5

package/src/components/ActionTile/ActionTile.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle, TouchableOpacity } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import IconCapsule from '../IconCapsule/IconCapsule'
+
+export type ActionTileProps = {
+    /** Label text, e.g. "Cards" */
+    label?: string
+    /** 
+     * Icon component slot.
+     * Expects an IconCapsule or compatible component.
+     * Modes will be passed to this slot if it's a valid React element.
+     */
+    icon?: React.ReactNode
+    /** Modes for design token resolution */
+    modes?: Record<string, any>
+    /** Optional container style */
+    style?: ViewStyle
+    /** Callback when tile is pressed */
+    onPress?: () => void
+}
+
+/**
+ * ActionTile component from Figma design.
+ * Displays an icon (defaulting to IconCapsule) and a label.
+ * 
+ * @component
+ */
+export default function ActionTile({
+    label = 'Cards',
+    icon,
+    modes = {},
+    style,
+    onPress,
+}: ActionTileProps) {
+    // Resolve tokens
+    const backgroundColor = getVariableByName('actionTile/background', modes) || '#ffffff'
+    const gap = Number(getVariableByName('actionTile/gap', modes)) || 8
+    const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes)) || 12
+    const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes)) || 16
+    const radius = Number(getVariableByName('actionTile/radius', modes)) || 16
+
+    // Text tokens
+    const textColor = getVariableByName('actionTile/foreground', modes) || '#0d0d0f'
+    const fontSize = Number(getVariableByName('actionTile/fontSize', modes)) || 14
+    const fontFamily = getVariableByName('actionTile/fontFamily', modes) || 'JioType Var'
+    const fontWeightStr = getVariableByName('actionTile/fontWeight', modes) || '500'
+    const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes)) || 17
+
+    const containerStyle: ViewStyle = {
+        backgroundColor,
+        borderRadius: radius,
+        paddingHorizontal,
+        paddingVertical,
+        gap,
+        width: 168, // Fixed width from design
+        height: 90, // Fixed height from design
+        alignItems: 'flex-start',
+        // ensure content stretches if needed, though design implies fixed size block
+        ...style,
+    }
+
+    const textStyle: TextStyle = {
+        color: textColor,
+        fontSize,
+        fontFamily,
+        fontWeight: fontWeightStr as any, // Cast to any or TextStyle fontWeight enum if needed
+        lineHeight,
+    }
+
+    // Handle Icon Slot: Pass modes safely
+    const renderIcon = () => {
+        if (React.isValidElement(icon)) {
+            // Pass modes down to the slot child
+            return React.cloneElement(icon as React.ReactElement<any>, { modes })
+        }
+        // Default fallback if no icon prop is provided, matching design default
+        if (!icon) {
+            return <IconCapsule modes={modes} />
+        }
+        return icon
+    }
+
+    const Content = (
+        <View style={containerStyle}>
+            {renderIcon()}
+            <Text style={textStyle}>{label}</Text>
+        </View>
+    )
+
+    if (onPress) {
+        return (
+            <TouchableOpacity onPress={onPress}>
+                {Content}
+            </TouchableOpacity>
+        )
+    }
+
+    return Content
+}

package/src/components/ActionTile/index.ts

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

package/src/components/CtaCard/CtaCard.mdx

@@ -0,0 +1,65 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as CtaCardStories from './CtaCard.stories';
+import CtaCard from './CtaCard';
+
+<Meta of={CtaCardStories} />
+
+# CtaCard
+
+`CtaCard` is a component used to display a Call-to-Action with an icon, title, body text, and a button.
+It is designed to be flexible, allowing content to be passed via props or fully customized via slots.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { CtaCard } from 'jfs-components'; // Adjust import based on your package structure
+
+// Basic Usage
+<CtaCard
+  title="Lets create your UPI ID"
+  body="Send and receive money securely."
+  iconName="ic_upi_number"
+  buttonLabel="Get started"
+  onPressButton={() => console.log('Pressed')}
+/>
+
+// Using Slots
+<CtaCard
+  titleSlot={<CustomTitle />}
+  buttonSlot={<CustomButton />}
+/>
+```
+
+<Canvas>
+  <Story of={CtaCardStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={CtaCard} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`ctaCard/background`**
+- **`ctaCard/body/color`**
+- **`ctaCard/body/fontFamily`**
+- **`ctaCard/body/fontSize`**
+- **`ctaCard/body/lineHeight`**
+- **`ctaCard/content/gap`**
+- **`ctaCard/gap`**
+- **`ctaCard/padding/horizontal`**
+- **`ctaCard/padding/vertical`**
+- **`ctaCard/radius`**
+- **`ctaCard/title/color`**
+- **`ctaCard/title/fontFamily`**
+- **`ctaCard/title/fontSize`**
+- **`ctaCard/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

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/Divider/Divider.tsx

@@ -89,3 +89,4 @@ function Divider({
 
 export default Divider
 
+

package/src/components/Introduction.mdx

@@ -95,7 +95,6 @@ When creating new components:
 
 - [Storybook Documentation](https://storybook.js.org/)
 - [React Native Storybook](https://github.com/storybookjs/react-native)
-- [Styled Components](https://styled-components.com/)
 
 ---
 

package/src/components/NavArrow/NavArrow.tsx

@@ -106,3 +106,4 @@ function NavArrow({
 
 export default NavArrow
 
+

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.