jfs-components 0.0.5 → 0.0.7

package/src/components/NavArrow/NavArrow.tsx

@@ -3,10 +3,10 @@ import { View, type ViewStyle } from 'react-native'
 import Svg, { Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 
-type NavArrowDirection = 'Back' | 'Forward'
+type NavArrowDirection = 'Back' | 'Forward' | 'Down'
 
 type NavArrowProps = {
-  /** Direction of the arrow: 'Back' (left chevron) or 'Forward' (right chevron) */
+  /** Direction of the arrow: 'Back' (left chevron), 'Forward' (right chevron), or 'Down' */
   direction?: NavArrowDirection
   /** Modes used to resolve design tokens */
   modes?: Record<string, any>
@@ -31,7 +31,7 @@ type NavArrowProps = {
  *
  * @component
  * @param {Object} props
- * @param {'Back'|'Forward'} [props.direction='Back'] - Arrow direction
+ * @param {'Back'|'Forward'|'Down'} [props.direction='Back'] - Arrow direction
  * @param {Object} [props.modes={}] - Modes for design token resolution
  * @param {Object} [props.style] - Additional container styles
  */
@@ -51,18 +51,25 @@ function NavArrow({
     Number(getVariableByName('navArrow/icon/height', modes)) || 8
   const strokeWeight =
     Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2
-  const containerWidth =
+
+  // Base dimensions from tokens (these are for Vertical orientation like Back/Forward)
+  const baseContainerWidth =
     Number(getVariableByName('navArrow/width', modes)) || 6
-  const containerHeight =
+  const baseContainerHeight =
     Number(getVariableByName('navArrow/height', modes)) || 10
+
   const borderRadius =
     Number(getVariableByName('navArrow/radius', modes)) || 0
   const backgroundColor =
     (getVariableByName('navArrow/background', modes) as string) || 'transparent'
 
+  // For Down direction, we swap width and height considerations
+  const isDown = direction === 'Down'
+
   const containerStyle: ViewStyle = {
-    width: containerWidth,
-    height: containerHeight,
+    // If Down, we use the height token for width and width token for height
+    width: isDown ? baseContainerHeight : baseContainerWidth,
+    height: isDown ? baseContainerWidth : baseContainerHeight,
     borderRadius,
     backgroundColor,
     alignItems: 'center',
@@ -71,12 +78,37 @@ function NavArrow({
   }
 
   const defaultAccessibilityLabel =
-    accessibilityLabel || (direction === 'Back' ? 'Go back' : 'Go forward')
+    accessibilityLabel ||
+    (direction === 'Back'
+      ? 'Go back'
+      : direction === 'Forward'
+        ? 'Go forward'
+        : 'Go down')
+
+  // Determine SVG dimensions based on orientation
+  // For Down, we swap width/height so the layout box is correct (8x4 instead of 4x8)
+  const svgWidth = isDown ? iconHeight : iconWidth
+  const svgHeight = isDown ? iconWidth : iconHeight
 
-  // SVG path for chevron - draws a simple ">" shape
-  // For Back direction, we flip horizontally with scaleX(-1)
-  // The path creates a chevron pointing right by default
-  const chevronPath = `M1 1L${iconWidth - 1} ${iconHeight / 2}L1 ${iconHeight - 1}`
+  // SVG path generation
+  let chevronPath
+  let transform
+
+  if (isDown) {
+    // Arrow pointing down: M1 1 L[mid] [bottom] L[right] 1
+    // Width is iconHeight (8), Height is iconWidth (4)
+    // Tip at (4, 3), Left (1, 1), Right (7, 1)
+    chevronPath = `M1 1L${svgWidth / 2} ${svgHeight - 1}L${svgWidth - 1} 1`
+  } else {
+    // Arrow pointing right (Forward)
+    // Width is iconWidth (4), Height is iconHeight (8)
+    chevronPath = `M1 1L${iconWidth - 1} ${iconHeight / 2}L1 ${iconHeight - 1}`
+
+    // For Back, we just flip the Forward arrow
+    if (direction === 'Back') {
+      transform = [{ scaleX: -1 }]
+    }
+  }
 
   return (
     <View
@@ -86,10 +118,10 @@ function NavArrow({
       {...rest}
     >
       <Svg
-        width={iconWidth}
-        height={iconHeight}
-        viewBox={`0 0 ${iconWidth} ${iconHeight}`}
-        style={direction === 'Back' ? { transform: [{ scaleX: -1 }] } : undefined}
+        width={svgWidth}
+        height={svgHeight}
+        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+        style={transform ? { transform } : undefined}
       >
         <Path
           d={chevronPath}

package/src/components/PageTitle/PageTitle.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 PageTitleStories from './PageTitle.stories';
 import PageTitle from './PageTitle';
 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/PageTitle/PageTitle.tsx

@@ -1,6 +1,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'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 
 type PageTitleProps = {
   title?: string;
@@ -29,7 +30,7 @@ type PageTitleProps = {
  */
 function PageTitle({
   title = 'Page Title',
-  modes = {},
+  modes: propModes = {},
   style,
   textStyle,
   numberOfLines,
@@ -37,6 +38,9 @@ function PageTitle({
   accessibilityHint,
   ...rest
 }: PageTitleProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+
   // Resolve container padding tokens
   const paddingHorizontal =
     getVariableByName('pageTitle/padding/horizontal', modes) || 16
@@ -79,15 +83,15 @@ function PageTitle({
   const defaultAccessibilityLabel = accessibilityLabel || title
 
   return (
-    <View 
+    <View
       style={[containerStyle, style]}
       accessibilityRole="header"
       accessibilityLabel={defaultAccessibilityLabel}
       accessibilityHint={accessibilityHint}
       {...rest}
     >
-      <Text 
-        style={[textStyleObj, textStyle]} 
+      <Text
+        style={[textStyleObj, textStyle]}
         numberOfLines={numberOfLines !== undefined ? numberOfLines : 1}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"

package/src/components/Screen/Screen.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as ScreenStories from './Screen.stories';
+import Screen from './Screen';
+
+<Meta of={ScreenStories} />
+
+# Screen
+
+The `Screen` component acts as the outer most container for a page, providing the correct background color based on the current mode.
+
+
+## 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.
+
+### Page type
+- **Modes:** MainPage | SubPage
+- **Default:** MainPage
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import Screen from 'jfs-components/src/components/Screen/Screen';
+
+function MyPage(props) {
+  return (
+    <Screen modes={props.modes}>
+      {/* Content goes here */}
+    </Screen>
+  );
+}
+```
+
+## Props
+
+<Controls />
+
+## Examples
+
+### Default
+
+<Canvas of={ScreenStories.Default} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`screen/body/background`**
+
+All tokens support mode-based theming through the `modes` prop.

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.