jfs-components 0.0.1 → 0.0.2

package/src/components/MerchantProfile/MerchantProfile.mdx

@@ -0,0 +1,139 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as MerchantProfileStories from './MerchantProfile.stories';
+import MerchantProfile from './MerchantProfile';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={MerchantProfileStories} />
+
+# MerchantProfile
+
+Displays a merchant's identity in a centered vertical layout with an avatar, title, and subtitle. Commonly used on payment confirmation screens, transaction receipts, and merchant identification flows.
+
+## Props
+
+<ArgsTable of={MerchantProfile} />
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+The default configuration shows the typical merchant profile layout:
+
+<Canvas>
+  <Story of={MerchantProfileStories.Default} />
+</Canvas>
+
+## Examples
+
+### Short Name
+
+For merchants with shorter names:
+
+<Canvas>
+  <Story of={MerchantProfileStories.ShortName} />
+</Canvas>
+
+### Long Name
+
+Handles longer merchant names gracefully with text wrapping:
+
+<Canvas>
+  <Story of={MerchantProfileStories.LongName} />
+</Canvas>
+
+### Without Subtitle
+
+When only the merchant name is needed:
+
+<Canvas>
+  <Story of={MerchantProfileStories.WithoutSubtitle} />
+</Canvas>
+
+### Multiple Profiles
+
+Multiple profiles displayed in a list:
+
+<Canvas>
+  <Story of={MerchantProfileStories.MultipleProfiles} />
+</Canvas>
+
+## Component Usage
+
+```tsx
+import { MerchantProfile } from 'jsf-components';
+
+function PaymentConfirmation() {
+  return (
+    <View style={{ flex: 1 }}>
+      <MerchantProfile
+        title="Uber India Systems Private Limited"
+        subtitle="UPI ID: uberindia@ybl"
+        modes={{}}
+      />
+      
+      {/* Payment amount and other details */}
+    </View>
+  );
+}
+```
+
+### Custom Avatar
+
+You can customize the avatar using the `avatarProps` prop:
+
+```tsx
+<MerchantProfile
+  title="Amazon Pay"
+  subtitle="UPI ID: amazonpay@apl"
+  avatarProps={{
+    imageSource: 'https://example.com/merchant-logo.png',
+    modes: { 'Avatar Size': 'XL' },
+  }}
+/>
+```
+
+<AccessibilitySection
+  items={[
+    'The component uses `accessibilityRole="header"` to identify it as a header region.',
+    'A default accessibility label is generated from the title and subtitle.',
+    'Provide a custom `accessibilityLabel` for more context if needed.',
+    'The Avatar child component handles its own accessibility attributes.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Avatar</strong> — circular merchant logo/image at the top.</li>
+    <li><strong>Title</strong> — bold merchant name centered below the avatar.</li>
+    <li><strong>Subtitle</strong> — lighter text, typically the UPI ID or additional info.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep titles concise; very long names will wrap but may affect layout balance.',
+    'Use consistent modes across the MerchantProfile and its siblings for visual harmony.',
+    'The component is designed for centered layouts; avoid placing in left-aligned contexts.',
+    'For interactive merchant profiles (e.g., tappable), wrap in a Pressable component.',
+  ]}
+/>
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`merchantProfile/gap`**
+- **`merchantProfile/padding/horizontal`**
+- **`merchantProfile/subtitle/color`**
+- **`merchantProfile/subtitle/fontFamily`**
+- **`merchantProfile/subtitle/fontSize`**
+- **`merchantProfile/subtitle/fontWeight`**
+- **`merchantProfile/subtitle/lineHeight`**
+- **`merchantProfile/title/color`**
+- **`merchantProfile/title/fontFamily`**
+- **`merchantProfile/title/fontSize`**
+- **`merchantProfile/title/fontWeight`**
+- **`merchantProfile/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/MerchantProfile/MerchantProfile.tsx

@@ -0,0 +1,174 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  type ViewStyle,
+  type TextStyle,
+  type StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Avatar, { type AvatarProps } from '../Avatar/Avatar'
+
+export type MerchantProfileProps = {
+  /**
+   * The merchant's display name or title
+   */
+  title?: string
+  /**
+   * Subtitle text, typically the UPI ID or additional merchant info
+   */
+  subtitle?: string
+  /**
+   * Mode configuration passed to the token resolver.
+   * Also passed to the Avatar child component for consistent theming.
+   */
+  modes?: Record<string, any>
+  /**
+   * Optional style overrides for the container
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Props to pass to the Avatar component
+   */
+  avatarProps?: Partial<AvatarProps>
+  /**
+   * Accessibility label for the merchant profile region
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * MerchantProfile component that displays a merchant's identity.
+ * 
+ * This component shows a centered profile layout with:
+ * - A circular avatar image
+ * - A title (merchant name)
+ * - A subtitle (typically UPI ID)
+ * 
+ * All styling values are resolved from Figma design tokens using the provided modes.
+ * 
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} [props.title="Uber India Systems Private Limited"] - The merchant's display name
+ * @param {string} [props.subtitle="UPI ID: uberindia@ybl"] - Subtitle text, typically the UPI ID
+ * @param {Object} [props.modes={}] - Mode configuration for design tokens
+ * @param {Object} [props.style] - Optional style overrides for the container
+ * @param {Object} [props.avatarProps] - Props to pass to the Avatar component
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the region
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <MerchantProfile
+ *   title="Uber India Systems Private Limited"
+ *   subtitle="UPI ID: uberindia@ybl"
+ *   modes={{}}
+ * />
+ * 
+ * // With custom avatar
+ * <MerchantProfile
+ *   title="Amazon Pay"
+ *   subtitle="UPI ID: amazonpay@apl"
+ *   avatarProps={{ imageSource: 'https://example.com/logo.png' }}
+ * />
+ * ```
+ */
+function MerchantProfile({
+  title = 'Uber India Systems Private Limited',
+  subtitle = 'UPI ID: uberindia@ybl',
+  modes = {},
+  style,
+  avatarProps,
+  accessibilityLabel,
+}: MerchantProfileProps) {
+  // Resolve design tokens with fallback values matching Figma design
+  const gap = getVariableByName('merchantProfile/gap', modes) ?? 12
+  const paddingHorizontal = getVariableByName('merchantProfile/padding/horizontal', modes) ?? 16
+
+  // Title typography tokens
+  const titleColor = getVariableByName('merchantProfile/title/color', modes) ?? '#0c0d10'
+  const titleFontSize = getVariableByName('merchantProfile/title/fontSize', modes) ?? 16
+  const titleLineHeight = getVariableByName('merchantProfile/title/lineHeight', modes) ?? 18
+  const titleFontFamily = getVariableByName('merchantProfile/title/fontFamily', modes) ?? 'System'
+  const titleFontWeightRaw = getVariableByName('merchantProfile/title/fontWeight', modes) ?? 700
+  const titleFontWeight = typeof titleFontWeightRaw === 'number'
+    ? titleFontWeightRaw.toString()
+    : titleFontWeightRaw
+
+  // Subtitle typography tokens
+  const subtitleColor = getVariableByName('merchantProfile/subtitle/color', modes) ?? '#191b1e'
+  const subtitleFontSize = getVariableByName('merchantProfile/subtitle/fontSize', modes) ?? 12
+  const subtitleLineHeight = getVariableByName('merchantProfile/subtitle/lineHeight', modes) ?? 16
+  const subtitleFontFamily = getVariableByName('merchantProfile/subtitle/fontFamily', modes) ?? 'System'
+  const subtitleFontWeightRaw = getVariableByName('merchantProfile/subtitle/fontWeight', modes) ?? 500
+  const subtitleFontWeight = typeof subtitleFontWeightRaw === 'number'
+    ? subtitleFontWeightRaw.toString()
+    : subtitleFontWeightRaw
+
+  // Container style
+  const containerStyle: ViewStyle = {
+    alignItems: 'center',
+    paddingHorizontal,
+    gap,
+  }
+
+  // Title text style
+  const titleTextStyle: TextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  // Subtitle text style
+  const subtitleTextStyle: TextStyle = {
+    color: subtitleColor,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontFamily: subtitleFontFamily,
+    fontWeight: subtitleFontWeight as TextStyle['fontWeight'],
+    textAlign: 'center',
+  }
+
+  // Default accessibility label
+  const defaultAccessibilityLabel = accessibilityLabel ||
+    `Merchant profile for ${title}${subtitle ? `, ${subtitle}` : ''}`
+
+  // Avatar modes - use provided modes to ensure consistent theming
+  // Override to use a larger avatar size for the merchant profile
+  const avatarModes = {
+    ...modes,
+    ...(avatarProps?.modes || {}),
+  }
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="header"
+      accessibilityLabel={defaultAccessibilityLabel}
+    >
+      <Avatar
+        style="Image"
+        modes={avatarModes}
+        {...avatarProps}
+      />
+      <Text
+        style={titleTextStyle}
+        accessibilityRole="text"
+      >
+        {title}
+      </Text>
+      <Text
+        style={subtitleTextStyle}
+        accessibilityRole="text"
+      >
+        {subtitle}
+      </Text>
+    </View>
+  )
+}
+
+export default MerchantProfile
+

package/src/components/MoneyValue/MoneyValue.mdx

@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Context3
+- **Modes:** Default | Transaction Bubble
+- **Default:** Default
 ## Usage
 
 <Canvas>

package/src/components/NavArrow/NavArrow.mdx

@@ -0,0 +1,123 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as NavArrowStories from './NavArrow.stories';
+import NavArrow from './NavArrow';
+
+<Meta of={NavArrowStories} />
+
+# NavArrow
+
+A small navigation arrow component that displays a chevron for Back or Forward navigation. Commonly used in navigation headers, list items, or anywhere directional navigation cues are needed.
+
+## 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.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Context2
+- **Modes:** Default | AppBar
+- **Default:** Default
+## Usage
+
+### Basic Usage
+
+<Canvas>
+  <Story of={NavArrowStories.Default} />
+</Canvas>
+
+### Direction Variants
+
+The NavArrow supports two directions:
+
+- **Back** — Left-pointing chevron (‹) for backward navigation
+- **Forward** — Right-pointing chevron (›) for forward navigation
+
+<Canvas>
+  <Story of={NavArrowStories.AllDirections} />
+</Canvas>
+
+### Usage Examples
+
+```jsx
+import { NavArrow } from 'jfs-components';
+
+// Basic back arrow
+<NavArrow direction="Back" />
+
+// Forward arrow
+<NavArrow direction="Forward" />
+
+// With custom modes (for theming)
+<NavArrow direction="Back" modes={{ 'Color Mode': 'Dark' }} />
+
+// With accessibility label
+<NavArrow 
+  direction="Back" 
+  accessibilityLabel="Navigate to previous screen" 
+/>
+```
+
+### Usage in a Header
+
+```jsx
+import { View, Text, Pressable } from 'react-native';
+import { NavArrow } from 'jfs-components';
+
+function Header({ title, onBack }) {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', padding: 16 }}>
+      <Pressable onPress={onBack} style={{ padding: 8 }}>
+        <NavArrow direction="Back" />
+      </Pressable>
+      <Text style={{ marginLeft: 8, fontSize: 18, fontWeight: '600' }}>
+        {title}
+      </Text>
+    </View>
+  );
+}
+```
+
+### Usage in a List Item
+
+```jsx
+import { View, Text, Pressable } from 'react-native';
+import { NavArrow } from 'jfs-components';
+
+function NavigableListItem({ label, onPress }) {
+  return (
+    <Pressable 
+      onPress={onPress}
+      style={{ 
+        flexDirection: 'row', 
+        alignItems: 'center', 
+        justifyContent: 'space-between',
+        padding: 16 
+      }}
+    >
+      <Text>{label}</Text>
+      <NavArrow direction="Forward" />
+    </Pressable>
+  );
+}
+```
+
+## Props
+
+<ArgsTable of={NavArrow} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`navArrow/background`**
+- **`navArrow/height`**
+- **`navArrow/icon/color`**
+- **`navArrow/icon/height`**
+- **`navArrow/icon/strokeWeight`**
+- **`navArrow/icon/width`**
+- **`navArrow/radius`**
+- **`navArrow/width`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/NavArrow/NavArrow.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+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 NavArrowProps = {
+  /** Direction of the arrow: 'Back' (left chevron) or 'Forward' (right chevron) */
+  direction?: NavArrowDirection
+  /** Modes used to resolve design tokens */
+  modes?: Record<string, any>
+  /** Optional additional container style */
+  style?: ViewStyle
+  /** Accessibility label for the arrow */
+  accessibilityLabel?: string
+} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel'>
+
+/**
+ * NavArrow component that displays a small chevron arrow for navigation.
+ *
+ * This component uses design tokens for all visual properties:
+ * - navArrow/icon/color - chevron stroke color
+ * - navArrow/icon/width - icon width
+ * - navArrow/icon/height - icon height
+ * - navArrow/icon/strokeWeight - stroke width
+ * - navArrow/width - container width
+ * - navArrow/height - container height
+ * - navArrow/radius - border radius
+ * - navArrow/background - background color
+ *
+ * @component
+ * @param {Object} props
+ * @param {'Back'|'Forward'} [props.direction='Back'] - Arrow direction
+ * @param {Object} [props.modes={}] - Modes for design token resolution
+ * @param {Object} [props.style] - Additional container styles
+ */
+function NavArrow({
+  direction = 'Back',
+  modes = {},
+  style,
+  accessibilityLabel,
+  ...rest
+}: NavArrowProps) {
+  // Resolve design tokens
+  const iconColor =
+    (getVariableByName('navArrow/icon/color', modes) as string) || '#24262b'
+  const iconWidth =
+    Number(getVariableByName('navArrow/icon/width', modes)) || 4
+  const iconHeight =
+    Number(getVariableByName('navArrow/icon/height', modes)) || 8
+  const strokeWeight =
+    Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2
+  const containerWidth =
+    Number(getVariableByName('navArrow/width', modes)) || 6
+  const containerHeight =
+    Number(getVariableByName('navArrow/height', modes)) || 10
+  const borderRadius =
+    Number(getVariableByName('navArrow/radius', modes)) || 0
+  const backgroundColor =
+    (getVariableByName('navArrow/background', modes) as string) || 'transparent'
+
+  const containerStyle: ViewStyle = {
+    width: containerWidth,
+    height: containerHeight,
+    borderRadius,
+    backgroundColor,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(style || {}),
+  }
+
+  const defaultAccessibilityLabel =
+    accessibilityLabel || (direction === 'Back' ? 'Go back' : 'Go forward')
+
+  // 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}`
+
+  return (
+    <View
+      style={containerStyle}
+      accessibilityRole="image"
+      accessibilityLabel={defaultAccessibilityLabel}
+      {...rest}
+    >
+      <Svg
+        width={iconWidth}
+        height={iconHeight}
+        viewBox={`0 0 ${iconWidth} ${iconHeight}`}
+        style={direction === 'Back' ? { transform: [{ scaleX: -1 }] } : undefined}
+      >
+        <Path
+          d={chevronPath}
+          stroke={iconColor}
+          strokeWidth={strokeWeight}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+      </Svg>
+    </View>
+  )
+}
+
+export default NavArrow
+

package/src/components/Section/Section.mdx

@@ -13,6 +13,10 @@ Section component that mirrors the Figma "Section" component.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
 ### Padding
 - **Modes:** Default | None
 - **Default:** Default
@@ -20,10 +24,6 @@ This component uses the following design token collections. Each collection supp
 ### Appearance.Brand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary
-
-### Color Mode
-- **Modes:** Light | Dark
-- **Default:** Light
 ## Usage
 
 <Canvas>

package/src/components/Stepper/Step.mdx

@@ -12,7 +12,7 @@ A component representing a single step within a Stepper process. It displays an
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
-### Status
+### Step Status
 - **Modes:** active | inactive | complete | error | warning
 - **Default:** active
 

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -8,6 +9,7 @@ export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
 export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
+export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as IconButton } from './IconButton/IconButton';
@@ -16,7 +18,9 @@ export { default as LazyList } from './LazyList/LazyList';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
+export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
+export { default as NavArrow } from './NavArrow/NavArrow';
 export { default as PageTitle } from './PageTitle/PageTitle';
 export { default as Section } from './Section/Section';
 export { default as Stepper } from './Stepper/Stepper';