jfs-components 0.0.6 → 0.0.7

package/src/components/Screen/Screen.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from 'react'
+import { View, StyleProp, ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+
+/**
+ * Helper function to recursively clone children and pass modes prop to components that accept it.
+ * This ensures that all child components in slots receive the modes prop from the parent.
+ */
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+
+export interface ScreenProps {
+    /**
+     * The content to display inside the screen.
+     */
+    children?: ReactNode;
+    /**
+     * Modes object to override default variable values.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional style overrides for the container.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Screen component that acts as the outer most container providing the background color.
+ * Matches Figma node 201:49.
+ */
+export const Screen = ({
+    children,
+    modes: propModes = {},
+    style
+}: ScreenProps) => {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    const backgroundColor = getVariableByName('screen/body/background', modes)
+
+    const containerStyle: ViewStyle = {
+        flex: 1,
+        backgroundColor,
+        width: '100%',
+        height: '100%',
+    }
+
+    // Pass modes down to children
+    const processedChildren = children
+        ? cloneChildrenWithModes(React.Children.toArray(children), modes)
+        : null
+
+    return (
+        <View style={[containerStyle, style]} data-node-id="201:49">
+            {processedChildren}
+        </View>
+    )
+}
+
+export default Screen

package/src/components/Section/Section.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 SectionStories from './Section.stories';
 import Section from './Section';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -17,6 +17,10 @@ This component uses the following design token collections. Each collection supp
 - **Modes:** Light | Dark
 - **Default:** Light
 
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
 ### Padding
 - **Modes:** Default | None
 - **Default:** Default

package/src/components/Section/Section.tsx

@@ -3,6 +3,7 @@ import { View, Text, Pressable, type StyleProp, type ViewStyle, type PressableSt
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 type SectionProps = {
   title?: string;
@@ -135,7 +136,7 @@ function Section({
   }
 
   // Generate default accessibility label from title and supportText
-  const defaultAccessibilityLabel = accessibilityLabel || 
+  const defaultAccessibilityLabel = accessibilityLabel ||
     (showSupportText ? `${title}. ${supportText}` : title)
 
   // Get web platform support props (only used when onPress is defined)
@@ -150,8 +151,8 @@ function Section({
   const headerContent = (
     <>
       <View style={headerWrapStyle}>
-        <Text 
-          style={titleStyle} 
+        <Text
+          style={titleStyle}
           numberOfLines={1}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
@@ -159,9 +160,9 @@ function Section({
           {title}
         </Text>
         {onPress && (
-          <Icon 
-            name="ic_chevron_right" 
-            size={24} 
+          <Icon
+            name="ic_chevron_right"
+            size={24}
             color={titleColor}
             accessibilityElementsHidden={true}
             importantForAccessibility="no"
@@ -169,8 +170,8 @@ function Section({
         )}
       </View>
       {showSupportText && (
-        <Text 
-          style={supportTextStyle} 
+        <Text
+          style={supportTextStyle}
           numberOfLines={2}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
@@ -182,7 +183,7 @@ function Section({
   )
 
   return (
-    <View 
+    <View
       style={[containerStyle, style]}
       accessibilityRole={'region' as any}
       accessibilityLabel={defaultAccessibilityLabel}
@@ -197,27 +198,27 @@ function Section({
           onPress={onPress}
           onPressIn={(e: any) => {
             setIsHeaderPressed(true)
-            ;(rest as any)?.onPressIn?.(e)
+              ; (rest as any)?.onPressIn?.(e)
           }}
           onPressOut={(e: any) => {
             setIsHeaderPressed(false)
-            ;(rest as any)?.onPressOut?.(e)
+              ; (rest as any)?.onPressOut?.(e)
           }}
           onFocus={(e: any) => {
             setIsHeaderFocused(true)
-            ;(rest as any)?.onFocus?.(e)
+              ; (rest as any)?.onFocus?.(e)
           }}
           onBlur={(e: any) => {
             setIsHeaderFocused(false)
-            ;(rest as any)?.onBlur?.(e)
+              ; (rest as any)?.onBlur?.(e)
           }}
           onHoverIn={(e: any) => {
             setIsHeaderHovered(true)
-            ;(rest as any)?.onHoverIn?.(e)
+              ; (rest as any)?.onHoverIn?.(e)
           }}
           onHoverOut={(e: any) => {
             setIsHeaderHovered(false)
-            ;(rest as any)?.onHoverOut?.(e)
+              ; (rest as any)?.onHoverOut?.(e)
           }}
           style={({ pressed }: PressableStateCallbackType) => [
             headerStyle,
@@ -298,37 +299,7 @@ function SectionBento({
     gap,
   }
 
-  // Helper function to clone children with modes (same as in Section component)
-  const cloneChildrenWithModes = (
-    children: React.ReactNode,
-    modes: Record<string, any>
-  ): React.ReactNode[] => {
-    const result = React.Children.map(children, (child) => {
-      if (!React.isValidElement(child)) {
-        return child
-      }
 
-      const childChildren = (child.props as any)?.children
-      const hasChildren = childChildren !== undefined && childChildren !== null
-      const existingModes = (child.props as any)?.modes
-      // Merge order: parent modes first, then child's explicit modes override them
-      const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
-
-      const processedChildren: React.ReactNode | undefined = hasChildren
-        ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes)
-        : undefined
-
-      return React.cloneElement(
-        child,
-        {
-          ...(child.props as any),
-          modes: mergedModes,
-        },
-        processedChildren
-      )
-    })
-    return result || []
-  }
 
   // Process slots to pass modes to children
   const processedNavSlot = navSlot
@@ -340,7 +311,7 @@ function SectionBento({
     : null
 
   return (
-    <View 
+    <View
       style={[containerStyle, style]}
       accessibilityRole={'region' as any}
       accessibilityLabel={accessibilityLabel}

package/src/components/Stepper/Step.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 StepStories from './Step.stories';
 import { Step } from './Step';
 
@@ -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
 
 <Canvas>

package/src/components/Stepper/StepLabel.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 StepLabelStories from './StepLabel.stories';
 import { StepLabel } from './StepLabel';
 
@@ -15,6 +15,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/Stepper/Stepper.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 StepperStories from './Stepper.stories';
 import Stepper from './Stepper';
 

package/src/components/SupportText/SupportText.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as SupportTextStories from './SupportText.stories';
+import SupportText from './SupportText';
+
+<Meta of={SupportTextStories} />
+
+# SupportText
+
+A component for displaying status messages with icons.
+
+<Canvas>
+  <Story of={SupportTextStories.Default} />
+</Canvas>
+
+## Props
+
+<Controls />
+
+
+## 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.
+
+### Status
+- **Modes:** Neutral | Warning | Error | Success
+- **Default:** Neutral
+## Usage
+
+```tsx
+import { SupportText } from 'jfs-components';
+
+<SupportText status="Success" label="Operation successful" />
+<SupportText status="Error" label="Something went wrong" />
+```
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`supportText/fontFamily`**
+- **`supportText/fontSize`**
+- **`supportText/fontWeight`**
+- **`supportText/foreground`**
+- **`supportText/gap`**
+- **`supportText/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/SupportText/SupportText.tsx

@@ -0,0 +1,104 @@
+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 SupportTextIcon, { type SupportTextStatus } from './SupportTextIcon';
+
+type SupportTextProps = {
+    /**
+     * Text to display
+     */
+    label?: string;
+    /**
+     * Status of the support text (Neutral, Warning, Error, Success)
+     */
+    status?: SupportTextStatus;
+    /**
+     * Optional custom slot for the icon.
+     * Overrides default SupportTextIcon.
+     */
+    iconSlot?: React.ReactNode;
+    /**
+     * Optional custom slot for the text area.
+     * Overrides default Text.
+     */
+    textSlot?: React.ReactNode;
+    /**
+     * Modes object for design token resolution.
+     */
+    modes?: Record<string, any>;
+
+    style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * SupportText component displaying a status icon and label.
+ */
+function SupportText({
+    label = 'Support Text',
+    status = 'Neutral',
+    iconSlot,
+    textSlot,
+    modes: propModes = {},
+    style,
+}: SupportTextProps) {
+    const { modes: globalModes } = useTokens();
+
+    // Merge modes. We might want to inject the status mode here if we knew the collection name.
+    // For now, we rely on the parent passing the correct mode or the status prop driving logic outside tokens if needed (but tokens are preferred).
+    // Strategy: We pass 'modes' as is. If the user wants "Success" styling (green), they should likely pass modes={{ 'SupportText': 'Success' }} AND status="Success".
+    // However, for convenience, we could eventually map status to modes if we determine the key.
+    const modes = { ...globalModes, ...propModes };
+
+    // --- Token Resolution ---
+    const gap = parseInt(getVariableByName('supportText/gap', modes), 10) || 4;
+
+    const textColor = getVariableByName('supportText/foreground', modes) || '#0c0d10';
+    const fontFamily = getVariableByName('supportText/fontFamily', modes) || 'JioType Var';
+    const fontSize = parseInt(getVariableByName('supportText/fontSize', modes), 10) || 12;
+    const lineHeight = parseInt(getVariableByName('supportText/lineHeight', modes), 10) || 16;
+    const fontWeight = getVariableByName('supportText/fontWeight', modes) || '500';
+
+    // --- Styles ---
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: gap,
+    };
+
+    const textStyle: TextStyle = {
+        color: textColor,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight: fontWeight as any,
+        flexShrink: 1, // Ensure text wraps if needed
+    };
+
+    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]}>
+            {iconSlot ? (
+                renderSlot(iconSlot)
+            ) : (
+                <SupportTextIcon status={status} modes={modes} />
+            )}
+
+            {textSlot ? (
+                renderSlot(textSlot)
+            ) : (
+                <Text style={textStyle}>{label}</Text>
+            )}
+        </View>
+    );
+}
+
+export default SupportText;

package/src/components/SupportText/SupportTextIcon.mdx

@@ -0,0 +1,35 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as SupportTextIconStories from './SupportTextIcon.stories';
+import SupportTextIcon from './SupportTextIcon';
+
+<Meta of={SupportTextIconStories} />
+
+# SupportTextIcon
+
+SupportTextIcon component with design-token-driven styling.
+
+## 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.
+
+### Status
+- **Modes:** Neutral | Warning | Error | Success
+- **Default:** Neutral
+## Usage
+
+<Canvas>
+  <Story of={SupportTextIconStories.Default} />
+</Canvas>
+
+## Props
+
+<Controls of={SupportTextIconStories.Default} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`supportText/foreground`**
+- **`supportText/icon/size`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/SupportText/SupportTextIcon.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+
+export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success';
+
+export type SupportTextIconProps = {
+    status?: SupportTextStatus;
+    modes?: Record<string, any>;
+    style?: ViewStyle;
+};
+
+const STATUS_ICON_MAP: Record<SupportTextStatus, string> = {
+    Neutral: 'ic_info',
+    Warning: 'ic_warning', // Using ic_warning for Warning
+    Error: 'ic_warning',   // Using ic_warning for Error
+    Success: 'ic_status_successful',
+};
+
+function SupportTextIcon({
+    status = 'Neutral',
+    modes = {},
+    style,
+}: SupportTextIconProps) {
+    const iconName = STATUS_ICON_MAP[status] || 'ic_info';
+
+    // Resolve icon size
+    const size = parseInt(getVariableByName('supportText/icon/size', modes), 10) || 16;
+
+    // Resolve icon color
+    // Assuming supportText/foreground applies to icon as well, or there might be specific icon color tokens.
+    // Using supportText/foreground as default based on common patterns if no specific icon token.
+    // If specific tokens exist like 'supportText/icon/color', they should be used.
+    // Detailed variables only showed supportText/foreground.
+    const color = getVariableByName('supportText/foreground', modes) || '#0c0d10';
+
+    return (
+        <View style={style}>
+            <Icon name={iconName} size={size} color={color} />
+        </View>
+    );
+}
+
+export default SupportTextIcon;

package/src/components/SupportText/index.ts

@@ -0,0 +1,2 @@
+export { default as SupportText } from './SupportText';
+export { default as SupportTextIcon } from './SupportTextIcon';

package/src/components/TextInput/TextInput.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 TextInputStories from './TextInput.stories';
 import TextInput from './TextInput';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,9 +13,17 @@ Helper function to recursively clone children and pass modes prop to components
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### InputState
+- **Modes:** Idle | Active
+- **Default:** Idle
+
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

package/src/components/ThreadHero/ThreadHero.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 ThreadHeroStories from './ThreadHero.stories';
 import ThreadHero from './ThreadHero';
 

package/src/components/Tooltip/Tooltip.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 TooltipStories from './Tooltip.stories';
 import { Tooltip } from './Tooltip';
 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/TransactionBubble/TransactionBubble.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 TransactionBubbleStories from './TransactionBubble.stories';
 import TransactionBubble from './TransactionBubble';
 

package/src/components/TransactionDetails/TransactionDetails.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 TransactionDetailsStories from './TransactionDetails.stories';
 import TransactionDetails from './TransactionDetails';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';

package/src/components/TransactionDetails/TransactionDetails.tsx

@@ -2,44 +2,7 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 
-/**
- * Helper function to recursively clone children and pass modes prop to components that accept it.
- */
-function cloneChildrenWithModes(
-  children: React.ReactNode,
-  modes: Record<string, any>
-): React.ReactNode[] {
-  const result = React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return child
-    }
-
-    const childChildren = (child.props as any)?.children
-    const hasChildren = childChildren !== undefined && childChildren !== null
-
-    const existingModes = (child.props as any)?.modes
-    const mergedModes = existingModes
-      ? { ...modes, ...existingModes }
-      : modes
-
-    const processedChildren: React.ReactNode | undefined = hasChildren
-      ? cloneChildrenWithModes(
-          React.Children.toArray(childChildren),
-          modes
-        )
-      : undefined
-
-    return React.cloneElement(
-      child,
-      {
-        ...(child.props as any),
-        modes: mergedModes,
-      },
-      processedChildren
-    )
-  })
-  return result || []
-}
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 // ===== Item Subcomponent =====
 

package/src/components/TransactionStatus/TransactionStatus.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 TransactionStatusStories from './TransactionStatus.stories';
 import TransactionStatus from './TransactionStatus';
 

package/src/components/UpiHandle/UpiHandle.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 UpiHandleStories from './UpiHandle.stories';
 import UpiHandle from './UpiHandle';
 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/VStack/VStack.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as VStackStories from './VStack.stories';
+import VStack from './VStack';
+
+<Meta of={VStackStories} />
+
+# VStack
+
+`VStack` arranges its children in a vertical 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 { VStack } from 'jfs-components';
+
+<VStack alignHorizontal="center" modes={{ 'vstack/gap': 16 }}>
+  <View>Item 1</View>
+  <View>Item 2</View>
+</VStack>
+```
+
+<Canvas>
+  <Story of={VStackStories.Default} />
+</Canvas>
+
+## Props
+
+<Controls of={VStackStories.Default} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`vstack/gap`**
+- **`vstack/padding/bottom`**
+- **`vstack/padding/left`**
+- **`vstack/padding/right`**
+- **`vstack/padding/top`**
+
+All tokens support mode-based theming through the `modes` prop.