jfs-components 0.0.5 → 0.0.7

package/src/components/AppBar/AppBar.tsx

@@ -1,12 +1,15 @@
 import React, { useState } from 'react'
-import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { View, type StyleProp, type ViewStyle, Pressable } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconButton from '../IconButton/IconButton'
 import Avatar from '../Avatar/Avatar'
+import NavArrow from '../NavArrow/NavArrow'
+// We might need to import Image or Svg if we had the assets locally, but for now we'll use placeholders or standard icons for defaults.
+// The user prompt mentioned "Use getVariableByName... strict camelCase".
 
 /**
  * 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.
  */
 function cloneChildrenWithModes(
   children: React.ReactNode,
@@ -23,16 +26,15 @@ function cloneChildrenWithModes(
 
     // Clone the child with modes prop if it doesn't already have one
     // or merge with existing modes if it does
-    // Merge order: parent modes first, then child's explicit modes override them
     const existingModes = (child.props as any)?.modes
     const mergedModes = existingModes ? { ...modes, ...existingModes } : modes
 
     // Recursively process children if they exist
     const processedChildren: React.ReactNode | undefined = hasChildren
       ? cloneChildrenWithModes(
-          React.Children.toArray(childChildren),
-          modes
-        )
+        React.Children.toArray(childChildren),
+        modes
+      )
       : undefined
 
     // Clone element with modes and processed children
@@ -47,150 +49,176 @@ function cloneChildrenWithModes(
   })?.filter((child) => child !== null && child !== undefined) as React.ReactNode[] ?? []
 }
 
-/**
- * AppBar component that mirrors the Figma "AppBar" component.
- *
- * This component supports:
- *  - **leading** IconButton (default: back button with ic_chevron_left)
- *  - **middle** slot for custom content (typically title or search)
- *  - **actions** slot for custom action buttons (default: two IconButtons)
- *  - **design-token driven styling** via `getVariableByName` and `modes`
- *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "Middle" → `middleSlot`
- *  - Slot "Actions" → `actionsSlot`
- *
- * @component
- * @param {Object} props
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to IconButton with ic_chevron_left.
- * @param {React.ReactNode} [props.middleSlot] - Optional custom slot for middle content (Figma Slot "Middle").
- * @param {React.ReactNode} [props.actionsSlot] - Optional custom slot for action buttons (Figma Slot "Actions").
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
- * @param {Function} [props.onLeadingPress] - Callback when leading button is pressed (only used if leading is not provided).
- * @param {Object} [props.style] - Optional container style overrides.
- * @param {string} [props.accessibilityLabel] - Accessibility label for the app bar
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- */
-type AppBarProps = {
-  leading?: React.ReactNode;
+type AppBarType = 'MainPage' | 'SubPage'
+
+export type AppBarProps = {
+  /**
+   * Type of the App Bar.
+   * - `MainPage`: Taller, usually has Jio logo (leading) and Profile/Notif (actions).
+   * - `SubPage`: Shorter, usually has Back arrow (leading) and Page Title (middle).
+   * @default "MainPage"
+   */
+  type?: AppBarType;
+  /**
+   * Slot for the leading element.
+   * Defaults:
+   * - MainPage: Jio Logo (placeholder circle for now if no asset)
+   * - SubPage: Back Icon Button
+   */
+  leadingSlot?: React.ReactNode;
+  /**
+   * Slot for the middle content.
+   * Often used for "Page Title" in SubPage.
+   */
   middleSlot?: React.ReactNode;
+  /**
+   * Slot for the actions on the right.
+   */
   actionsSlot?: React.ReactNode;
+  /**
+   * Token modes to override.
+   */
   modes?: Record<string, any>;
+  /**
+   * Callback for the default leading slot press (e.g. back button).
+   */
   onLeadingPress?: () => void;
+  /**
+   * Container style override.
+   */
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
 
-function AppBar({
-  leading,
+export default function AppBar({
+  type = 'MainPage',
+  leadingSlot,
   middleSlot,
   actionsSlot,
-  modes = {},
+  modes: propModes = {},
   onLeadingPress,
   style,
-  accessibilityLabel = "App bar",
+  accessibilityLabel,
   accessibilityHint,
   ...rest
 }: AppBarProps) {
-  const [childFocused, setChildFocused] = useState(false)
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
 
-  function injectFocusHandlers(node: React.ReactNode): React.ReactNode {
-    if (!React.isValidElement(node)) return node
-    const existingOnFocus = (node.props as any)?.onFocus
-    const existingOnBlur = (node.props as any)?.onBlur
-    return React.cloneElement(node, {
-      ...(node.props as any),
-      onFocus: (e: any) => {
-        setChildFocused(true)
-        existingOnFocus?.(e)
-      },
-      onBlur: (e: any) => {
-        setChildFocused(false)
-        existingOnBlur?.(e)
-      },
-    })
-  }
-  // Resolve container tokens
-  const paddingHorizontal = getVariableByName('appBarActions/padding/horizontal', modes) ?? 16
-  const paddingVertical = getVariableByName('appBarActions/padding/vertical', modes) ?? 10
-  const actionsGap = getVariableByName('appBarActions/actions/gap', modes) ?? 8
+  const isMain = type === 'MainPage'
+  const isSub = type === 'SubPage'
 
+  // --- Tokens ---
+  // Construct token keys based on type. keys must be camelCase as per instruction.
+  // We use explicit string literals so that the extraction script can find them.
+  const paddingHorizontal = isMain
+    ? getVariableByName('appBar/mainPage/padding/horizontal', modes)
+    : getVariableByName('appBar/subPage/padding/horizontal', modes)
+
+  const paddingVertical = isMain
+    ? getVariableByName('appBar/mainPage/padding/vertical', modes)
+    : getVariableByName('appBar/subPage/padding/vertical', modes)
+
+  const backgroundColor = isMain
+    ? getVariableByName('appBar/mainPage/background', modes)
+    : getVariableByName('appBar/subPage/background', modes)
+
+  const actionsGap = isMain
+    ? getVariableByName('appBar/mainPage/actions/gap', modes)
+    : getVariableByName('appBar/subPage/actions/gap', modes)
+
+  // Layout styles
   const containerStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal,
-    paddingVertical,
-    minHeight: 52,
+    paddingHorizontal: paddingHorizontal ?? 16,
+    paddingVertical: paddingVertical ?? (isMain ? 16 : 10),
+    backgroundColor: backgroundColor ?? '#FFFFFF',
+    // We can set minHeight if we want to enforce consistency, but padding should dictate it mostly.
+    // Figma shows specific heights implicitly via padding + content.
+    // MainPage: h=68 (16 top/bot padding? 36 height content?)
+    // SubPage: h=52
   }
 
-  const actionsRowStyle: ViewStyle = {
-    flexDirection: 'row',
-    gap: actionsGap,
-    alignItems: 'center',
+  // --- Leading Slot Default ---
+  // SubPage default: Back Arrow
+  // MainPage default: Jio Logo (We'll use a placeholder or basic text if no asset, 
+  // but looking at "AppBarHome" before, it had "ic_hellojio". Let's stick to generic defaults or empty if not provided,
+  // but usually a component library provides sensible defaults.)
+
+  // Actually, let's implement the specific defaults mentioned in the plan/analysis
+  // SubPage: NavArrow props (icon, etc). We'll use IconButton with 'ic_chevron_left' as a close approximation.
+
+  let defaultLeading: React.ReactNode = null
+  if (leadingSlot === undefined) {
+    if (isSub) {
+      defaultLeading = (
+        <Pressable
+          {...(onLeadingPress ? { onPress: onLeadingPress } : {})}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Back"
+          style={({ pressed }) => ({
+            opacity: pressed ? 0.7 : 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+          })}
+        >
+          <NavArrow direction="Back" modes={modes} />
+        </Pressable>
+      )
+    } else {
+      // MainPage default leading: often the Brand Logo.
+      // We'll leave it empty or render a placeholder if desired, but standard AppBar often lets consumer pass logo.
+      // Previous code had `leadingIconName='ic_hellojio'` for Home.
+      // We will render nothing by default for MainPage leading to keep it flexible, OR a specialized Logo component if we had one.
+      // For now, let's assume consumer passes it for MainPage, or we leave empty.
+      // Wait, Figma screenshot shows "Jio" logo.
+      // The user said: "mostly token namings are 'camelCase'. Maximize existing component usage."
+      // I'll leave defaultLeading as null for MainPage unless I have a "BrandLogo" component.
+    }
   }
 
-  // Default leading: IconButton with back icon
-  const defaultLeading = leading ?? (
-    <IconButton
-      iconName="ic_chevron_left"
-      modes={modes}
-      {...(onLeadingPress !== undefined ? { onPress: onLeadingPress } : {})}
-      accessibilityLabel="Go back"
-      accessibilityHint="Navigates to the previous screen"
-    />
-  )
-
-  // Default actions: Two IconButtons
-  const defaultActions = actionsSlot ?? (
-    <View style={actionsRowStyle}>
-      <IconButton
-        iconName="ic_hellojio"
-        modes={modes}
-        onPress={() => {}}
-        accessibilityLabel="Hello Jio"
-        accessibilityHint="Opens Hello Jio menu"
-      />
-      <IconButton
-        iconName="ic_more_horizontal"
-        modes={modes}
-        onPress={() => {}}
-        accessibilityLabel="More options"
-        accessibilityHint="Opens additional options menu"
-      />
-    </View>
-  )
+  // --- Process Slots ---
+  const processedLeading = leadingSlot
+    ? cloneChildrenWithModes([leadingSlot], modes)[0]
+    : defaultLeading
 
-  // Clone slot children and pass modes to all children that accept it
-  const processedMiddleSlot = middleSlot
+  const processedMiddle = middleSlot
     ? cloneChildrenWithModes(React.Children.toArray(middleSlot), modes)
     : null
 
-  const processedActionsSlot = actionsSlot
-    ? cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)
-    : defaultActions
+  // Actions Gap wrapper
+  // The Figma has "Actions" slot with a gap.
+  const actionsStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: actionsGap ?? 0,
+  }
 
-  // Process leading if it's a React element
-  const processedLeading = React.isValidElement(leading)
-    ? injectFocusHandlers(cloneChildrenWithModes([leading], modes)[0])
-    : defaultLeading
+  const processedActions = actionsSlot
+    ? <View style={actionsStyle}>{cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)}</View>
+    : null
 
   return (
-    <View 
-      style={[
-        containerStyle,
-        childFocused ? { borderBottomWidth: 2, borderBottomColor: '#222' } : null,
-        style,
-      ]}
+    <View
+      style={[containerStyle, style]}
       accessibilityRole="header"
-      accessibilityLabel={accessibilityLabel}
-      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
+      accessibilityLabel={accessibilityLabel || (isMain ? "Main Header" : "Sub Header")}
+      {...(accessibilityHint ? { accessibilityHint } : {})}
       {...rest}
     >
-      {processedLeading}
-      {processedMiddleSlot && (
+      {/* Leading Section */}
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {processedLeading}
+      </View>
+
+      {/* Middle Section (Absolute centered often, or flex? Figma shows "Slot 'Middle'" inside a wrapper that is absolute center) */}
+      {/* Figma: "absolute flex h-full items-center justify-center left-1/2 ... translate-x-[-50%]" */}
+      {/* We should only render this wrapper if there IS middle content, to avoid z-index blocking hits. */}
+      {processedMiddle && (
         <View
           style={{
             position: 'absolute',
@@ -200,161 +228,19 @@ function AppBar({
             bottom: 0,
             alignItems: 'center',
             justifyContent: 'center',
-            paddingHorizontal: 21,
-            pointerEvents: 'box-none',
+            zIndex: -1, // Behind actions if overlap? Or should be on top? 
+            // Usually middle title shouldn't block actions. `pointerEvents="box-none"` is safer.
           }}
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
+          pointerEvents="box-none"
         >
-          {processedMiddleSlot}
+          {processedMiddle}
         </View>
       )}
-      <View style={actionsRowStyle}>
-        {Array.isArray(processedActionsSlot)
-          ? processedActionsSlot.map((n) => injectFocusHandlers(n))
-          : injectFocusHandlers(processedActionsSlot)}
-      </View>
-    </View>
-  )
-}
 
-/**
- * AppBarHome component that mirrors the Figma "AppBar.home" component.
- *
- * This component supports:
- *  - **leading** IconButton (default: circular button with customizable icon)
- *  - **actions** slot for custom action buttons (default: search and notification IconButtons)
- *  - **avatar** Avatar component on the right
- *  - **design-token driven styling** via `getVariableByName` and `modes`
- *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "Actions" → `actionsSlot`
- *
- * @component
- * @param {Object} props
- * @param {React.ReactNode} [props.leading] - Optional leading element. Defaults to IconButton with customizable icon.
- * @param {React.ReactNode} [props.actionsSlot] - Optional custom slot for action buttons (Figma Slot "Actions").
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens.
- * @param {Function} [props.onLeadingPress] - Callback when leading button is pressed (only used if leading is not provided).
- * @param {string} [props.leadingIconName] - Icon name for default leading button (default: 'ic_hellojio').
- * @param {Object} [props.avatarProps] - Props to pass to Avatar component.
- * @param {Object} [props.style] - Optional container style overrides.
- * @param {string} [props.accessibilityLabel] - Accessibility label for the app bar
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
- */
-type AppBarHomeProps = {
-  leading?: React.ReactNode;
-  actionsSlot?: React.ReactNode;
-  modes?: Record<string, any>;
-  onLeadingPress?: () => void;
-  leadingIconName?: string;
-  avatarProps?: React.ComponentProps<typeof Avatar>;
-  style?: StyleProp<ViewStyle>;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
-
-function AppBarHome({
-  leading,
-  actionsSlot,
-  modes = {},
-  onLeadingPress,
-  leadingIconName = 'ic_hellojio',
-  avatarProps,
-  style,
-  accessibilityLabel = "Home app bar",
-  accessibilityHint,
-  ...rest
-}: AppBarHomeProps) {
-  // Resolve container tokens
-  const paddingHorizontal = getVariableByName('appBarHome/padding/horizontal', modes) ?? 16
-  const paddingVertical = getVariableByName('appBarHome/padding/vertical', modes) ?? 16
-  const actionsGap = getVariableByName('appBarHome/actions/gap', modes) ?? 0
-
-  const containerStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal,
-    paddingVertical,
-    width: '100%',
-  }
-
-  const homeActionsRowStyle: ViewStyle = {
-    flexDirection: 'row',
-    gap: actionsGap,
-    alignItems: 'center',
-  }
-
-  // Default leading: IconButton with customizable icon
-  // The IconButton already handles its own circular styling, so we just use it directly
-  const defaultLeading = leading ?? (
-    <IconButton
-      iconName={leadingIconName}
-      modes={modes}
-      {...(onLeadingPress !== undefined ? { onPress: onLeadingPress } : {})}
-      accessibilityLabel="Home"
-      accessibilityHint="Opens home menu"
-    />
-  )
-
-  // Default actions: Search and Notification IconButtons
-  const defaultActions = actionsSlot ?? (
-    <View style={homeActionsRowStyle}>
-      <IconButton
-        iconName="ic_search"
-        modes={modes}
-        onPress={() => {}}
-        accessibilityLabel="Search"
-        accessibilityHint="Opens search screen"
-      />
-      <IconButton
-        iconName="ic_notification"
-        modes={modes}
-        onPress={() => {}}
-        accessibilityLabel="Notifications"
-        accessibilityHint="Opens notifications"
-      />
-    </View>
-  )
-
-  // Clone slot children and pass modes to all children that accept it
-  const processedActionsSlot = actionsSlot
-    ? cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)
-    : defaultActions
-
-  // Process leading if it's a React element
-  const processedLeading = React.isValidElement(leading)
-    ? cloneChildrenWithModes([leading], modes)[0]
-    : defaultLeading
-
-  // Process avatar with modes
-  const avatarModes = avatarProps?.modes ? { ...modes, ...avatarProps.modes } : modes
-  const processedAvatar = (
-    <Avatar
-      {...(avatarProps ?? {})}
-      modes={avatarModes}
-    />
-  )
-
-  return (
-    <View 
-      style={[containerStyle, style]}
-      accessibilityRole="header"
-      accessibilityLabel={accessibilityLabel}
-      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
-      {...rest}
-    >
-      {processedLeading}
-      <View style={homeActionsRowStyle}>
-        {processedActionsSlot}
-        {processedAvatar}
+      {/* Actions Section */}
+      <View style={actionsStyle}>
+        {processedActions}
       </View>
     </View>
   )
 }
-
-export default AppBar
-export { AppBarHome }
-

package/src/components/Avatar/Avatar.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 AvatarStories from './Avatar.stories';
 import Avatar from './Avatar';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
@@ -13,6 +13,10 @@ Avatar component that displays either an image or a monogram.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Context4
+- **Modes:** Default | Chip
+- **Default:** Default
+
 ### Avatar Size
 - **Modes:** L | M | S
 - **Default:** L
@@ -20,6 +24,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/AvatarGroup/AvatarGroup.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 AvatarGroupStories from './AvatarGroup.stories';
 import AvatarGroup from './AvatarGroup';
 
@@ -12,9 +12,17 @@ AvatarGroup component with design-token-driven styling.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Context4
+- **Modes:** Default | Chip
+- **Default:** Default
+
 ### Avatar Size
 - **Modes:** L | M | S
 - **Default:** L
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 <Canvas>

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

package/src/components/Balance/Balance.mdx

@@ -0,0 +1,62 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import Balance from './Balance';
+import * as BalanceStories from './Balance.stories';
+
+<Meta of={BalanceStories} />
+
+# Balance
+
+The `Balance` component displays a title and a monetary value, typically used to show total amounts or outstanding balances.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { Balance } from 'jfs-components';
+
+// Basic usage
+<Balance 
+  title="Total owed to people" 
+  amount="50,000.67" 
+  currency="₹"
+/>
+
+// With modes
+<Balance 
+  title="Total Balance" 
+  amount="12,500.00"
+  modes={{ "Color Mode": "Dark" }}
+/>
+```
+
+## Props
+
+<ArgsTable of={Balance} />
+
+## Stories
+
+### Default
+<Canvas of={BalanceStories.Default} />
+
+### With Modes
+<Canvas of={BalanceStories.WithModes} />
+
+### Custom Slot
+<Canvas of={BalanceStories.CustomSlot} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`balance/gap`**
+- **`balance/title/fontFamily`**
+- **`balance/title/fontSize`**
+- **`balance/title/fontWeight`**
+- **`balance/title/foreground`**
+- **`balance/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.