jfs-components 0.0.5 → 0.0.7

package/src/components/Balance/Balance.tsx

@@ -0,0 +1,107 @@
+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 MoneyValue from '../MoneyValue/MoneyValue'
+
+export type BalanceProps = {
+    /**
+     * Title text displayed above the balance amount.
+     * @default "Total owed to people"
+     */
+    title?: string;
+    /**
+     * Amount to display in the balance.
+     * @default "500"
+     */
+    amount?: string;
+    /**
+     * Currency symbol or code.
+     * @default "₹"
+     */
+    currency?: string;
+    /**
+     * Mode configuration for design tokens.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional style overrides for the container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Optional children content to render instead of the default MoneyValue.
+     * Use this slot for custom money value implementations.
+     */
+    children?: React.ReactNode;
+};
+
+/**
+ * Balance component that displays a title and a monetary value.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <Balance title="Total Balance" amount="12500" />
+ * ```
+ */
+function Balance({
+    title = "Total owed to people",
+    amount = "500",
+    currency = "₹",
+    modes = {},
+    style,
+    children,
+}: BalanceProps) {
+    // Resolve design tokens
+    const gap = getVariableByName('balance/gap', modes) ?? 6
+
+    // Title styles
+    const titleColor = getVariableByName('balance/title/foreground', modes) ?? '#0c0d10'
+    const titleFontSize = getVariableByName('balance/title/fontSize', modes) ?? 14
+    const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'System'
+    const titleLineHeight = getVariableByName('balance/title/lineHeight', modes) ?? 18
+    const titleFontWeightValue = getVariableByName('balance/title/fontWeight', modes) ?? 500
+    const titleFontWeight = typeof titleFontWeightValue === 'number'
+        ? titleFontWeightValue.toString()
+        : titleFontWeightValue
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: gap,
+    }
+
+    const titleStyle: TextStyle = {
+        color: titleColor,
+        fontSize: titleFontSize,
+        fontFamily: titleFontFamily,
+        lineHeight: titleLineHeight,
+        fontWeight: titleFontWeight as any,
+    }
+
+    // Handle slot children or default content
+    const content = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { modes } as any)
+        }
+        return child
+    })
+
+    return (
+        <View style={[containerStyle, style]} data-node-id="1986:6203">
+            <Text style={titleStyle} data-node-id="1986:2613">
+                {title}
+            </Text>
+            {children ? (
+                content
+            ) : (
+                <MoneyValue
+                    value={amount}
+                    currency={currency}
+                    modes={modes}
+                />
+            )}
+        </View>
+    )
+}
+
+export default Balance

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import BottomNavItem from '../BottomNavItem/BottomNavItem'
 
 type BottomNavItemType = {
@@ -54,13 +55,15 @@ function BottomNav({
     { key: 'invest', label: 'Invest', iconName: 'ic_rupee_coin' },
     { key: 'explore', label: 'Explore', iconName: 'ic_search' },
   ],
-  modes = {},
+  modes: propModes = {},
   onItemPress,
   style,
   accessibilityLabel = "Bottom navigation",
   accessibilityHint,
   ...rest
 }: BottomNavProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
   // Resolve container styling tokens
   const backgroundColor = getVariableByName('bottomNav/background', modes) || '#ffffff'
   const borderColor = getVariableByName('bottomNav/border/color', modes) || '#cccfd1'
@@ -108,7 +111,7 @@ function BottomNav({
             if (key === 'Enter' || key === ' ' || key === 'Spacebar') {
               handlePress()
             }
-            ;(item as any)?.onKeyPress?.(e)
+            ; (item as any)?.onKeyPress?.(e)
           },
         } : {})}
         {...(item.disabled !== undefined ? { disabled: item.disabled } : {})}
@@ -121,7 +124,7 @@ function BottomNav({
   }
 
   return (
-    <View 
+    <View
       style={[containerStyle, style]}
       accessibilityRole="tablist"
       accessibilityLabel={accessibilityLabel}

package/src/components/BottomNavItem/BottomNavItem.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 BottomNavItemStories from './BottomNavItem.stories';
 import BottomNavItem from './BottomNavItem';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -20,6 +20,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/BottomNavItem/BottomNavItem.tsx

@@ -9,6 +9,7 @@ import {
   type ViewStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 
@@ -56,7 +57,7 @@ type BottomNavItemProps = SafePressableProps & {
 function BottomNavItem({
   iconName = 'ic_home',
   label = 'Home',
-  modes = {},
+  modes: propModes = {},
   onPress,
   disabled = false,
   style,
@@ -69,6 +70,8 @@ function BottomNavItem({
   webAccessibilityProps,
   ...rest
 }: BottomNavItemProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
   const pressedStyle = { opacity: 0.7 }
@@ -119,14 +122,14 @@ function BottomNavItem({
 
   const renderContent = () => (
     <>
-      <Icon 
-        name={iconName} 
-        size={resolvedIconSize} 
+      <Icon
+        name={iconName}
+        size={resolvedIconSize}
         color={resolvedIconColor}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
       />
-      <Text 
+      <Text
         style={[textStyle, labelStyle]}
         accessibilityElementsHidden={true}
         importantForAccessibility="no"
@@ -138,14 +141,14 @@ function BottomNavItem({
 
   if (!onPress) {
     return (
-      <View 
+      <View
         style={[baseContainerStyle, style]}
         accessibilityRole="tab"
         accessibilityLabel={defaultAccessibilityLabel}
         accessibilityHint={accessibilityHint}
-        accessibilityState={{ 
+        accessibilityState={{
           disabled,
-          ...accessibilityState 
+          ...accessibilityState
         }}
         {...rest}
       >
@@ -159,34 +162,34 @@ function BottomNavItem({
       accessibilityRole="tab"
       accessibilityLabel={defaultAccessibilityLabel}
       accessibilityHint={accessibilityHint}
-      accessibilityState={{ 
+      accessibilityState={{
         disabled,
         selected: accessibilityState?.selected,
-        ...accessibilityState 
+        ...accessibilityState
       }}
       onPress={onPress}
       disabled={disabled}
       onPressIn={(e: any) => {
-        ;(rest as any)?.onPressIn?.(e)
+        ; (rest as any)?.onPressIn?.(e)
       }}
       onPressOut={(e: any) => {
-        ;(rest as any)?.onPressOut?.(e)
+        ; (rest as any)?.onPressOut?.(e)
       }}
       onFocus={(e: any) => {
         setIsFocused(true)
-        ;(rest as any)?.onFocus?.(e)
+          ; (rest as any)?.onFocus?.(e)
       }}
       onBlur={(e: any) => {
         setIsFocused(false)
-        ;(rest as any)?.onBlur?.(e)
+          ; (rest as any)?.onBlur?.(e)
       }}
       onHoverIn={(e: any) => {
         setIsHovered(true)
-        ;(rest as any)?.onHoverIn?.(e)
+          ; (rest as any)?.onHoverIn?.(e)
       }}
       onHoverOut={(e: any) => {
         setIsHovered(false)
-        ;(rest as any)?.onHoverOut?.(e)
+          ; (rest as any)?.onHoverOut?.(e)
       }}
       style={({ pressed }) =>
         [

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

package/src/components/ButtonGroup/ButtonGroup.mdx

@@ -0,0 +1,56 @@
+{/* ButtonGroup.mdx */}
+
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as ButtonGroupStories from './ButtonGroup.stories';
+
+<Meta of={ButtonGroupStories} />
+
+# Button Group
+
+A layout container that organizes multiple buttons (typically `IconButton`) in a horizontal row with consistent spacing as defined by design tokens.
+
+The `ButtonGroup` component automatically passes its `modes` prop down to all valid React children, ensuring that the entire group responds to theme or mode changes in unison.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { ButtonGroup, IconButton } from 'jfs-components';
+
+function MyHeader() {
+  return (
+    <ButtonGroup modes={{ "Appearance": "dark" }}>
+        <IconButton iconName="ic_qr_code" />
+        <IconButton iconName="ic_photo" />
+    </ButtonGroup>
+  );
+}
+```
+
+## Props
+
+<Controls />
+
+## Examples
+
+### Default
+
+<Canvas of={ButtonGroupStories.Default} />
+
+### With Custom Modes
+
+<Canvas of={ButtonGroupStories.WithModes} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`buttonGroup/padding/gap`**
+- **`buttonGroup/padding/horizontal`**
+- **`buttonGroup/padding/vertical`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import {
+    View,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type ButtonGroupProps = {
+    /**
+     * Child elements to be rendered inside the button group.
+     * Typically generic buttons or icon buttons.
+     */
+    children?: React.ReactNode;
+    /**
+     * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
+     * These modes are passed down to all child components.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Additional styles for the container
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * ButtonGroup component that aggregates multiple buttons (e.g., IconButton)
+ * and handles their layout and styling/theming via design tokens.
+ *
+ * It passes the provided `modes` to all its immediate React Element children.
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <ButtonGroup modes={{"Appearance": "light"}}>
+ *   <IconButton iconName="ic_qr_code" />
+ *   <IconButton iconName="ic_photo" />
+ * </ButtonGroup>
+ * ```
+ */
+function ButtonGroup({
+    children,
+    modes = {},
+    style,
+}: ButtonGroupProps) {
+    // Resolve design tokens
+    const gap = getVariableByName('buttonGroup/padding/gap', modes) ?? 12
+    const paddingHorizontal = getVariableByName('buttonGroup/padding/horizontal', modes) ?? 0
+    const paddingVertical = getVariableByName('buttonGroup/padding/vertical', modes) ?? 0
+
+    // Container style
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: gap,
+        paddingHorizontal: paddingHorizontal,
+        paddingVertical: paddingVertical,
+    }
+
+    // Clone children to pass `modes` prop
+    const childrenWithModes = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            // We safely try to pass `modes` to the child.
+            // If the child doesn't accept `modes`, it will just be an extra prop which is usually fine in React,
+            // but ideally children should be components that respect `modes`.
+            return React.cloneElement(child, { modes: modes } as any)
+        }
+        return child
+    })
+
+    return (
+        <View style={[containerStyle, style]}>
+            {childrenWithModes}
+        </View>
+    )
+}
+
+export default ButtonGroup

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

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

package/src/components/ChipGroup/ChipGroup.mdx

@@ -0,0 +1,40 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Story } from '@storybook/addon-docs';
+import * as ChipGroupStories from './ChipGroup.stories';
+
+<Meta of={ChipGroupStories} />
+
+<Title />
+<Subtitle />
+<Description />
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { ChipGroup } from 'jfs-components';
+import { ChipSelect } from 'jfs-components';
+
+const MyComponent = () => (
+  <ChipGroup>
+    <ChipSelect label="Option 1" />
+    <ChipSelect label="Option 2" />
+    <ChipSelect label="Option 3" />
+  </ChipGroup>
+);
+```
+
+<Primary />
+<Controls />
+<Stories />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`chipGroup/gap`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/ChipGroup/ChipGroup.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+
+export type ChipGroupProps = {
+    /**
+     * Child elements to be rendered inside the chip group.
+     * Expects ChipSelect components.
+     */
+    children?: React.ReactNode;
+    /**
+     * Mode configuration for design tokens.
+     * These modes are passed down to all child components.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Additional styles for the container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Test ID for testing.
+     */
+    testID?: string;
+};
+
+/**
+ * ChipGroup component that handles layout and spacing for ChipSelect components.
+ * Based on Figma Node 1905-5123.
+ */
+function ChipGroup({
+    children,
+    modes = {},
+    style,
+    testID,
+}: ChipGroupProps) {
+    // --- Token Resolution ---
+    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10) || 8;
+
+    // --- Styles ---
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        flexWrap: 'wrap',
+        gap: gap,
+    };
+
+    // Clone children to pass `modes` prop
+    const childrenWithModes = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            // Pass merged modes (parent modes + child modes)
+            // Note: We don't have access to child's existing props here to merge modes perfectly if they were passed directly to child
+            // But usually we want parent modes to override or augment.
+            // For now, simpler approach: just pass the parent modes, assuming child will handle merging if it needs to.
+            // Actually, based on previous ButtonGroup example, we just pass { modes: modes }.
+            return React.cloneElement(child, { modes: modes } as any);
+        }
+        return child;
+    });
+
+    return (
+        <View style={[containerStyle, style]} testID={testID}>
+            {childrenWithModes}
+        </View>
+    );
+}
+
+export default ChipGroup;

package/src/components/ChipSelect/ChipSelect.mdx

@@ -0,0 +1,80 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as ChipSelectStories from './ChipSelect.stories';
+
+<Meta of={ChipSelectStories} />
+
+<Title />
+<Subtitle>
+  A selection chip component that toggles between Idle and Active states.
+</Subtitle>
+
+<Description>
+  The `ChipSelect` component is used for making selections, such as dates or filters. 
+  It supports two states driven by the `active` prop:
+  - **Idle (`active={false}`)**: Customize with an icon and label.
+  - **Active (`active={true}`)**: Displays the label and a close icon. The start icon remains visible if provided.
+  
+  Styling is driven by Figma tokens via `getVariableByName`.
+</Description>
+
+<Primary />
+
+<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.
+
+### ChipSelect State
+- **Modes:** Idle | Active
+- **Default:** Idle
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
+
+```tsx
+import ChipSelect from './ChipSelect';
+
+// Idle State (Icon + Label)
+<ChipSelect 
+  label="Select Date" 
+  active={false} 
+  icon="ic_calendar_week" 
+/>
+
+// Active State (Icon + Label + Close Icon)
+<ChipSelect 
+  label="12 Oct 2023" 
+  active={true}
+  icon="ic_calendar_week"
+  close={true}
+/>
+```
+
+<Stories />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`chipSelect/background`**
+- **`chipSelect/fontFamily`**
+- **`chipSelect/fontSize`**
+- **`chipSelect/fontWeight`**
+- **`chipSelect/foreground`**
+- **`chipSelect/gap`**
+- **`chipSelect/icon/size`**
+- **`chipSelect/lineHeight`**
+- **`chipSelect/padding/horizontal`**
+- **`chipSelect/padding/vertical`**
+- **`chipSelect/radius`**
+
+All tokens support mode-based theming through the `modes` prop.