jfs-components 0.0.6 → 0.0.7

package/src/components/ChipSelect/ChipSelect.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+
+export type ChipSelectProps = {
+    /**
+     * Label text to display.
+     * @default "Date"
+     */
+    label?: string;
+    /**
+     * Whether the chip is in active state.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Icon name to display in Idle state (when active is false).
+     * @default "ic_calendar_week"
+     */
+    icon?: string;
+    /**
+     * Whether to show the close icon in Active state (when active is true).
+     * @default true
+     */
+    close?: boolean;
+    /**
+     * Modes for design token resolution.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional style overrides.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Optional slot to override the label text.
+     */
+    labelSlot?: React.ReactNode;
+    /**
+     * Button press handler.
+     */
+    onPress?: () => void;
+};
+
+/**
+ * ChipSelect component for selecting options (e.g. Date selection).
+ * Based on Figma Node 1901-4727.
+ */
+function ChipSelect({
+    label = 'Date',
+    active = false,
+    icon = 'ic_calendar_week',
+    close = true,
+    modes = {},
+    style,
+    labelSlot,
+    onPress,
+}: ChipSelectProps) {
+    // Force control of the 'ChipSelect State' mode based on the active prop
+    // This overrides any 'ChipSelect State' passed from outside, but preserves other modes
+    const resolvedModes = {
+        ...modes,
+        'ChipSelect State': active ? 'Active' : 'Idle',
+    };
+
+    // --- Token Resolution ---
+    const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10) || 4;
+    const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
+    const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10) || 0;
+    const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10) || 999;
+
+    // Background
+    const backgroundColor = getVariableByName('chipSelect/background', resolvedModes) || '#f5f5f5';
+
+    // Text Styles
+    const textColor = getVariableByName('chipSelect/foreground', resolvedModes) || '#0d0d0f';
+    const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10) || 14;
+    const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
+    const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10) || 32;
+    const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes) || '700';
+
+    // Icon Styles
+    const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10) || 16;
+
+    // --- Styles ---
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: backgroundColor,
+        borderRadius: radius,
+        paddingHorizontal: paddingHorizontal,
+        paddingVertical: paddingVertical,
+        gap: gap,
+    };
+
+    const textStyle: TextStyle = {
+        color: textColor,
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+        fontWeight: fontWeight as any,
+        textAlign: 'center',
+    };
+
+    const renderLabel = () => {
+        if (labelSlot) {
+            if (React.isValidElement(labelSlot)) {
+                // Pass resolved modes to slot
+                return React.cloneElement(labelSlot as React.ReactElement<any>, { modes: resolvedModes });
+            }
+            return labelSlot;
+        }
+        return <Text style={textStyle}>{label}</Text>;
+    };
+
+    return (
+        <TouchableOpacity
+            style={[containerStyle, style]}
+            onPress={onPress}
+            activeOpacity={0.8}
+        >
+            {/* Start Icon */}
+            {icon && (
+                <Icon name={icon} size={iconSize} color={textColor} />
+            )}
+
+            {renderLabel()}
+
+            {/* End/Close Icon (Only when active AND close is true) */}
+            {active && close && (
+                <Icon name="ic_close" size={iconSize} color={textColor} />
+            )}
+        </TouchableOpacity>
+    );
+}
+
+export default ChipSelect;

package/src/components/CtaCard/CtaCard.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as CtaCardStories from './CtaCard.stories';
 import CtaCard from './CtaCard';
 

package/src/components/CtaCard/CtaCard.tsx

@@ -1,9 +1,10 @@
-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 { useTokens } from '../../design-tokens/JFSThemeProvider';
-import IconCapsule from '../IconCapsule/IconCapsule';
-import Button from '../Button/Button';
+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 { useTokens } from '../../design-tokens/JFSThemeProvider'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import Button from '../Button/Button'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 type CtaCardProps = {
     /**
@@ -135,37 +136,28 @@ function CtaCard({
         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)
+                    cloneChildrenWithModes(iconSlot, modes)
                 ) : (
                     <IconCapsule iconName={iconName} modes={modes} />
                 )}
 
                 {/* Title Slot */}
                 {titleSlot ? (
-                    renderSlot(titleSlot)
+                    cloneChildrenWithModes(titleSlot, modes)
                 ) : (
                     <Text style={titleStyle}>{title}</Text>
                 )}
 
                 {/* Body Slot */}
                 {bodySlot ? (
-                    renderSlot(bodySlot)
+                    cloneChildrenWithModes(bodySlot, modes)
                 ) : (
                     <Text style={bodyStyle}>{body}</Text>
                 )}
@@ -173,7 +165,7 @@ function CtaCard({
 
             {/* Button Slot - placed outside content wrap based on Figma structure (flex-col gap=16) */}
             {buttonSlot ? (
-                renderSlot(buttonSlot)
+                cloneChildrenWithModes(buttonSlot, modes)
             ) : (
                 <Button
                     label={buttonLabel}

package/src/components/Disclaimer/Disclaimer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as DisclaimerStories from './Disclaimer.stories';
 import Disclaimer from './Disclaimer';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/src/components/Divider/Divider.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as DividerStories from './Divider.stories';
 import Divider from './Divider';
 
@@ -19,6 +19,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 ### Horizontal Divider

package/src/components/Drawer/Drawer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as DrawerStories from './Drawer.stories';
 import Drawer from './Drawer';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,9 +13,17 @@ Lightweight bottom drawer/sheet with a draggable handle.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Page type
+- **Modes:** MainPage | SubPage
+- **Default:** MainPage
+
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/src/components/EmptyState/EmptyState.mdx

@@ -0,0 +1,73 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as EmptyStateStories from './EmptyState.stories';
+import EmptyState from './EmptyState';
+
+<Meta of={EmptyStateStories} />
+
+# EmptyState
+
+The `EmptyState` component is used to display messages when there is no content to show, typically with an icon, title, description, and an action button.
+
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import { EmptyState } from 'jfs-components';
+
+<EmptyState
+  title="No payments to show"
+  description="Start by paying bills, recharge or your friends"
+  modes={{}}
+/>
+```
+
+## Props
+
+<Controls />
+
+## Examples
+
+### Default
+
+<Canvas of={EmptyStateStories.Default} />
+
+### Custom Text
+
+<Canvas of={EmptyStateStories.WithCustomText} />
+
+### Custom Slots
+
+<Canvas of={EmptyStateStories.CustomSlots} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`emptyState/body/color`**
+- **`emptyState/body/fontFamily`**
+- **`emptyState/body/fontSize`**
+- **`emptyState/body/fontWeight`**
+- **`emptyState/body/lineHeight`**
+- **`emptyState/content/gap`**
+- **`emptyState/gap`**
+- **`emptyState/padding`**
+- **`emptyState/radius`**
+- **`emptyState/title/color`**
+- **`emptyState/title/fontFamily`**
+- **`emptyState/title/fontSize`**
+- **`emptyState/title/fontWeight`**
+- **`emptyState/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,181 @@
+import React, { useMemo } from 'react'
+import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import Button from '../Button/Button'
+
+export type EmptyStateProps = {
+    /**
+     * Title text for the empty state
+     * @default "No payments to show"
+     */
+    title?: string;
+    /**
+     * Body description text
+     * @default "Start by paying bills, recharge or your friends"
+     */
+    description?: string;
+    /**
+     * Custom slot for the icon area. Defaults to IconCapsule.
+     * If providing a custom component, ensure it accepts `modes` if needed.
+     */
+    iconSlot?: React.ReactNode;
+    /**
+     * Custom slot for the button area. Defaults to "Button" component.
+     * If providing a custom component, ensure it accepts `modes` if needed.
+     */
+    buttonSlot?: React.ReactNode;
+    /**
+     * Mode configuration for theming
+     */
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+
+/**
+ * EmptyState component that displays an icon, title, description and an action button.
+ *
+ * @component
+ */
+function EmptyState({
+    title = "No payments to show",
+    description = "Start by paying bills, recharge or your friends",
+    iconSlot,
+    buttonSlot,
+    modes: propModes = {},
+    style,
+    testID,
+}: EmptyStateProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    // Container Tokens
+    const gap = getVariableByName('emptyState/gap', modes) || 24
+    const padding = getVariableByName('emptyState/padding', modes) || 4
+    const radius = getVariableByName('emptyState/radius', modes) || 16
+
+    // Content Wrap Tokens
+    const contentGap = getVariableByName('emptyState/content/gap', modes) || 16
+
+    // Title Tokens
+    const titleColor = getVariableByName('emptyState/title/color', modes) || '#0d0d0f'
+    const titleFontSize = getVariableByName('emptyState/title/fontSize', modes) || 16
+    const titleFontFamily = getVariableByName('emptyState/title/fontFamily', modes) || 'System'
+    const titleLineHeight = getVariableByName('emptyState/title/lineHeight', modes) || 18
+    const titleFontWeight = getVariableByName('emptyState/title/fontWeight', modes) || 700
+
+    // Body Tokens
+    const bodyColor = getVariableByName('emptyState/body/color', modes) || '#1a1c1f'
+    const bodyFontSize = getVariableByName('emptyState/body/fontSize', modes) || 12
+    const bodyFontFamily = getVariableByName('emptyState/body/fontFamily', modes) || 'System'
+    const bodyLineHeight = getVariableByName('emptyState/body/lineHeight', modes) || 16
+    const bodyFontWeight = getVariableByName('emptyState/body/fontWeight', modes) || 400
+
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: gap,
+        padding: padding,
+        borderRadius: radius,
+        // Width is set in Figma as fixed 236, but typical practice is to let it be flexible or controlled by parent
+        // However, for strict adherence to "Maximize existing component usage" and specific styles, we can leave width 
+        // to parent or default to auto. 
+    }
+
+    const contentWrapStyle: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: contentGap,
+        width: '100%',
+    }
+
+    const titleStyle: TextStyle = {
+        color: titleColor,
+        fontSize: titleFontSize,
+        fontFamily: titleFontFamily,
+        lineHeight: titleLineHeight,
+        fontWeight: String(titleFontWeight) as TextStyle['fontWeight'],
+        textAlign: 'center',
+    }
+
+    const bodyStyle: TextStyle = {
+        color: bodyColor,
+        fontSize: bodyFontSize,
+        fontFamily: bodyFontFamily,
+        lineHeight: bodyLineHeight,
+        fontWeight: String(bodyFontWeight) as TextStyle['fontWeight'],
+        textAlign: 'center',
+    }
+
+    const defaultIconSlot = useMemo(() => (
+        <IconCapsule modes={modes} />
+    ), [modes])
+
+    // Checking if iconSlot is passed; if not use default. 
+    // If it is passed, we assume the user handles everything or we inject props if it's a valid element? 
+    // User instructions say: "whenever there is a slot, that's should be implemented as real react slot... manual passing down modes"
+    // So we just render what is passed, but for defaults we pass modes.
+    // Ideally, if iconSlot is a function we could pass modes, but ReactNode is static.
+    // The instruction "make sure modes are always passed to all slot children" implies we might need to cloneElement if possible, 
+    // AND/OR user needs to pass it manually in usage. 
+    // But for the DEFAULT slots we render, we definitely pass modes.
+
+    const iconContent = iconSlot || defaultIconSlot
+
+    const defaultButtonSlot = useMemo(() => (
+        <Button label="Button" modes={modes} />
+    ), [modes])
+
+    const buttonContent = buttonSlot || defaultButtonSlot
+
+    return (
+        <View style={[containerStyle, style]} testID={testID}>
+            <View style={contentWrapStyle}>
+                {/* Icon Slot */}
+                {iconContent}
+
+                {/* Texts */}
+                <View style={{ alignItems: 'center', gap: 0 }}>
+                    {/* Note: Figma auto-layout shows gap undefined for the texts parent wrapper if it existed, 
+              but looking at structure: 
+              Empty state (gap 24) -> Content wrap (gap 16) -> Icon Capsule, Texts
+              Wait, the Figma structure from context:
+              Empty state (gap 24)
+                -> Content wrap (gap 16)
+                    -> Icon Capsule
+                    -> (Implicit Text grouping? Or direct text nodes?)
+              Looking at context:
+              Empty state (Gap 24)
+                 Content wrap (Gap 16)
+                    Icon Capsule
+                    p (Title)
+                    p (Body)
+                 Button
+              Wait, looking closer at provided context from Step 6:
+              Root (Empty state) -> gap 24
+                - Content wrap -> gap 16
+                    - Icon Capsule
+                    - Title text
+                    - Body text
+                - Button
+              
+              So Title and Body are inside Content wrap.
+          */}
+                    <View style={{ alignItems: 'center' }}>
+                        <Text style={titleStyle}>{title}</Text>
+                        {description ? <Text style={bodyStyle}>{description}</Text> : null}
+                    </View>
+                </View>
+            </View>
+
+            {/* Button Slot */}
+            {buttonContent}
+        </View>
+    )
+}
+
+export default EmptyState

package/src/components/FilterBar/FilterBar.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as FilterBarStories from './FilterBar.stories';
 import FilterBar from './FilterBar';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';

package/src/components/HStack/HStack.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as HStackStories from './HStack.stories';
+import HStack from './HStack';
+
+<Meta of={HStackStories} />
+
+# HStack
+
+`HStack` arranges its children in a horizontal line. It uses design tokens for spacing and gap.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { HStack } from 'jfs-components';
+
+<HStack justifyHorizontal="space-between" modes={{ 'hstack/gap': 16 }}>
+  <View>Left</View>
+  <View>Right</View>
+</HStack>
+```
+
+<Canvas>
+  <Story of={HStackStories.Default} />
+</Canvas>
+
+## Props
+
+<Controls of={HStackStories.Default} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`hstack/gap`**
+- **`hstack/padding/bottom`**
+- **`hstack/padding/left`**
+- **`hstack/padding/right`**
+- **`hstack/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/HStack/HStack.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { View, StyleProp, ViewStyle, ViewProps } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+
+export interface HStackProps extends ViewProps {
+    /**
+     * The content to display inside the stack.
+     */
+    children?: React.ReactNode;
+    /**
+     * Alignment of children along the cross axis (vertical for HStack).
+     * Maps to alignItems.
+     */
+    alignVertical?: ViewStyle['alignItems'];
+    /**
+     * Justification of children along the main axis (horizontal for HStack).
+     * Maps to justifyContent.
+     */
+    justifyHorizontal?: ViewStyle['justifyContent'];
+    /**
+     * Controls whether children can wrap.
+     * Maps to flexWrap.
+     */
+    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+    /**
+     * If true, reverses the direction of the stack (row-reverse).
+     */
+    reverse?: boolean;
+    /**
+     * Prop for web semantics, often mapped to HTML tags.
+     */
+    as?: any;
+    /**
+     * Modes object to override default variable values.
+     */
+    modes?: Record<string, any>;
+}
+
+/**
+ * HStack component for horizontal layout using design token spacing.
+ */
+export const HStack = ({
+    children,
+    alignVertical,
+    justifyHorizontal,
+    wrap,
+    reverse = false,
+    as,
+    modes: propModes = {},
+    style,
+    ...rest
+}: HStackProps) => {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    const paddingTop = getVariableByName('hstack/padding/top', modes)
+    const paddingBottom = getVariableByName('hstack/padding/bottom', modes)
+    const paddingLeft = getVariableByName('hstack/padding/left', modes)
+    const paddingRight = getVariableByName('hstack/padding/right', modes)
+    const gap = getVariableByName('hstack/gap', modes)
+
+    const flexWrap = typeof wrap === 'boolean' ? (wrap ? 'wrap' : 'nowrap') : wrap
+
+    const containerStyle: ViewStyle = {
+        flexDirection: reverse ? 'row-reverse' : 'row',
+        alignItems: alignVertical,
+        justifyContent: justifyHorizontal,
+        flexWrap,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        gap,
+    }
+
+    // Pass modes down to children
+    const processedChildren = children
+        ? cloneChildrenWithModes(children, modes)
+        : null
+
+    const viewProps = {
+        ...rest,
+        as,
+    }
+
+    return (
+        <View style={[containerStyle, style]} {...viewProps}>
+            {processedChildren}
+        </View>
+    )
+}
+
+export default HStack