jfs-components 0.0.5 → 0.0.7

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Pressable, View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
 
 // Default static asset from the component folder.
@@ -40,7 +41,7 @@ type UpiHandleProps = {
  */
 function UpiHandle({
   label = 'Label',
-  modes = {},
+  modes: propModes = {},
   showIcon = true,
   iconName = 'ic_scan_qr_code',
   onPress,
@@ -49,6 +50,8 @@ function UpiHandle({
   accessibilityHint,
   ...rest
 }: UpiHandleProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
   // Token‑driven container styling
   const backgroundColor =
     getVariableByName('upiHandle/background', modes) || '#f5f5f5'

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.

package/src/components/VStack/VStack.tsx

@@ -0,0 +1,100 @@
+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 VStackProps extends ViewProps {
+    /**
+     * The content to display inside the stack.
+     */
+    children?: React.ReactNode;
+    /**
+     * Alignment of children along the cross axis (horizontal for VStack).
+     * Maps to alignItems.
+     */
+    alignHorizontal?: ViewStyle['alignItems'];
+    /**
+     * Justification of children along the main axis (vertical for VStack).
+     * Maps to justifyContent.
+     */
+    justifyVertical?: ViewStyle['justifyContent'];
+    /**
+     * Controls whether children can wrap.
+     * Maps to flexWrap.
+     */
+    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+    /**
+     * If true, reverses the direction of the stack (column-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>;
+}
+
+/**
+ * VStack component for vertical layout using design token spacing.
+ */
+export const VStack = ({
+    children,
+    alignHorizontal,
+    justifyVertical,
+    wrap,
+    reverse = false,
+    as,
+    modes: propModes = {},
+    style,
+    ...rest
+}: VStackProps) => {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    const paddingTop = getVariableByName('vstack/padding/top', modes)
+    const paddingBottom = getVariableByName('vstack/padding/bottom', modes)
+    const paddingLeft = getVariableByName('vstack/padding/left', modes)
+    const paddingRight = getVariableByName('vstack/padding/right', modes)
+    const gap = getVariableByName('vstack/gap', modes)
+
+    const flexWrap = typeof wrap === 'boolean' ? (wrap ? 'wrap' : 'nowrap') : wrap
+
+    const containerStyle: ViewStyle = {
+        flexDirection: reverse ? 'column-reverse' : 'column',
+        alignItems: alignHorizontal,
+        justifyContent: justifyVertical,
+        flexWrap,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        gap,
+    }
+
+    // Pass modes down to children
+    const processedChildren = children
+        ? cloneChildrenWithModes(children, modes)
+        : null
+
+    // "as" prop handling for web - passed via rest if supported by the underlying view implementation on web,
+    // or manually added here. Since View from react-native doesn't formally support "as" in types,
+    // we rely on it being passed through or handled by the web layer if applicable.
+    // For type safety with standard RN View, we might cast props if needed, but passing ...rest usually works for extra props.
+    // We explicitly include 'as' in the props passed to View.
+    const viewProps = {
+        ...rest,
+        as,
+    }
+
+    return (
+        <View style={[containerStyle, style]} {...viewProps}>
+            {processedChildren}
+        </View>
+    )
+}
+
+export default VStack

package/src/components/index.ts

@@ -13,6 +13,7 @@ export { default as Divider, type DividerProps, type DividerDirection } from './
 export { default as Drawer } from './Drawer/Drawer';
 export { default as CtaCard } from './CtaCard/CtaCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
+export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as LazyList } from './LazyList/LazyList';
@@ -34,3 +35,6 @@ export { default as TransactionBubble } from './TransactionBubble/TransactionBub
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as UpiHandle } from './UpiHandle/UpiHandle';
+export { default as VStack, type VStackProps } from './VStack/VStack';
+export { default as ChipGroup, type ChipGroupProps } from './ChipGroup/ChipGroup';
+export { default as EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';