jfs-components 0.0.2 → 0.0.4

package/src/components/Accordion/Accordion.mdx

@@ -0,0 +1,122 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as AccordionStories from './Accordion.stories';
+import Accordion from './Accordion';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+Accordion component that mirrors the Figma "Accordion" component. It provides an expandable/collapsible container for content with smooth animation.
+
+## 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.
+
+### Accordion States
+- **Modes:** Idle | Hover | Open | Open Hover | Disabled
+- **Default:** Idle
+## Usage
+
+<Canvas>
+  <Story of={AccordionStories.Default} />
+</Canvas>
+
+## With ListItem Content
+
+<Canvas>
+  <Story of={AccordionStories.WithListItems} />
+</Canvas>
+
+## Accordion Group
+
+<Canvas>
+  <Story of={AccordionStories.AccordionGroup} />
+</Canvas>
+
+<AccessibilitySection
+  items={[
+    'The accordion header has `accessibilityRole="button"` for proper screen reader announcement.',
+    'The `accessibilityState.expanded` property indicates the current state to assistive technology.',
+    'When disabled, `accessibilityState.disabled` is set to true.',
+    'Custom `accessibilityLabel` and `accessibilityHint` can be provided for better context.',
+    'Content within the accordion should maintain its own accessibility attributes.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Header</strong> — Pressable area containing the title and expand/collapse icon (plus/minus).</li>
+    <li><strong>Content Slot</strong> — Expandable area that shows/hides with animation. Pass any React children.</li>
+    <li><strong>Border</strong> — Bottom border separating accordions when stacked.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Use the `modes` prop to ensure consistent theming with surrounding components.',
+    'When nesting components in the content slot, they automatically receive the parent modes via cloning.',
+    'Avoid deeply nested interactive elements that may confuse keyboard navigation.',
+    'For controlled behavior, provide both `expanded` and `onExpandedChange` props.',
+    'Keep accordion titles concise; they are truncated to a single line.',
+  ]}
+/>
+
+## Props
+
+<ArgsTable of={Accordion} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`accordion/border/color`**
+- **`accordion/content/gap`**
+- **`accordion/content/padding/bottom`**
+- **`accordion/content/padding/top`**
+- **`accordion/header/background`**
+- **`accordion/header/gap`**
+- **`accordion/header/padding/vertical`**
+- **`accordion/icon/color`**
+- **`accordion/icon/size`**
+- **`accordion/title/color`**
+- **`accordion/title/fontFamily`**
+- **`accordion/title/fontSize`**
+- **`accordion/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.
+## Example Usage
+
+```tsx
+import { Accordion, ListItem, IconCapsule, MoneyValue } from '@jsf/components';
+
+function PaymentSection() {
+  return (
+    <Accordion 
+      title="Payment Methods"
+      defaultExpanded={true}
+      modes={{ 'Color Mode': 'Light' }}
+    >
+      <ListItem
+        layout="Horizontal"
+        title="Credit Card"
+        supportText="Ending in 4242"
+        leading={<IconCapsule iconName="ic_card" />}
+        endSlot={<MoneyValue value="500" currency="₹" />}
+        navArrow={true}
+      />
+      <ListItem
+        layout="Horizontal"
+        title="Savings Account"
+        supportText="HDFC Bank"
+        leading={<IconCapsule iconName="ic_bank_account" />}
+        endSlot={<MoneyValue value="25,000" currency="₹" />}
+        navArrow={true}
+      />
+    </Accordion>
+  );
+}
+```
+
+
+

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,279 @@
+import React, { useState } from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type AccessibilityState,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Icon from '../../icons/Icon'
+import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
+
+// Enable LayoutAnimation on Android
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true)
+}
+
+/**
+ * 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,
+  modes: Record<string, any>
+): React.ReactNode[] {
+  const result = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+
+    // Get existing children
+    const childChildren = (child.props as any)?.children
+    const hasChildren = childChildren !== undefined && childChildren !== null
+
+    // Merge modes: 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
+        )
+      : undefined
+
+    // Clone element with modes and processed children
+    return React.cloneElement(
+      child,
+      {
+        ...(child.props as any),
+        modes: mergedModes,
+      },
+      processedChildren
+    )
+  })
+  return result || []
+}
+
+export type AccordionProps = {
+  /** The accordion header title */
+  title?: string;
+  /** Initial expanded state. Defaults to false (collapsed) */
+  defaultExpanded?: boolean;
+  /** Controlled expanded state. When provided, the component becomes controlled */
+  expanded?: boolean;
+  /** Callback fired when the accordion's expanded state changes */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Whether the accordion is disabled */
+  disabled?: boolean;
+  /** Content to display when the accordion is expanded (Figma Slot: 'content') */
+  children?: React.ReactNode;
+  /** Modes object passed to getVariableByName for all design tokens */
+  modes?: Record<string, any>;
+  /** Optional container style overrides */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label for screen readers. If not provided, uses title */
+  accessibilityLabel?: string;
+  /** Additional accessibility hint for screen readers */
+  accessibilityHint?: string;
+  /** Additional accessibility state information */
+  accessibilityState?: AccessibilityState;
+  /** Web-specific accessibility props (only used on web platform) */
+  webAccessibilityProps?: WebAccessibilityProps;
+} & React.ComponentProps<typeof View>;
+
+/**
+ * Accordion component that mirrors the Figma "Accordion" component.
+ *
+ * This component supports:
+ *  - **Expandable/collapsible content** with smooth animation
+ *  - **States**: Idle, Hover, Open, Disabled
+ *  - **Slot** for custom content
+ *  - **Design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "content" → `children`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.title='Accordion title'] - The accordion header title
+ * @param {boolean} [props.defaultExpanded=false] - Initial expanded state
+ * @param {boolean} [props.expanded] - Controlled expanded state
+ * @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
+ * @param {boolean} [props.disabled=false] - Whether the accordion is disabled
+ * @param {React.ReactNode} [props.children] - Content to display when expanded
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the accordion. If not provided, uses title
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function Accordion({
+  title = 'Accordion title',
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  disabled = false,
+  children,
+  modes = {},
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  ...rest
+}: AccordionProps) {
+  // Internal state for uncontrolled mode
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
+  
+  // Determine if controlled or uncontrolled
+  const isControlled = controlledExpanded !== undefined
+  const isExpanded = isControlled ? controlledExpanded : internalExpanded
+  
+  // Hover state for web
+  const [isHovered, setIsHovered] = useState(false)
+  
+  // Handle toggle
+  const handleToggle = () => {
+    if (disabled) return
+    
+    // Animate the layout change
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    
+    if (isControlled) {
+      onExpandedChange?.(!isExpanded)
+    } else {
+      setInternalExpanded(!isExpanded)
+      onExpandedChange?.(!isExpanded)
+    }
+  }
+  
+  // Resolve design tokens
+  const titleColor = disabled
+    ? '#999999'
+    : getVariableByName('accordion/title/color', modes) || '#0d0d0d'
+  const titleFontSize = getVariableByName('accordion/title/fontSize', modes) || 18
+  const titleLineHeight = getVariableByName('accordion/title/lineHeight', modes) || 20
+  const titleFontFamily = getVariableByName('accordion/title/fontFamily', modes) || 'System'
+  
+  const iconColor = getVariableByName('accordion/icon/color', modes) || '#141414'
+  const iconSize = getVariableByName('accordion/icon/size', modes) || 24
+  
+  const headerGap = getVariableByName('accordion/header/gap', modes) || 12
+  const headerPaddingVertical = getVariableByName('accordion/header/padding/vertical', modes) || 24
+  const headerBackground = isHovered && !disabled
+    ? '#f2f2f2'
+    : getVariableByName('accordion/header/background', modes) || 'transparent'
+  
+  const contentGap = getVariableByName('accordion/content/gap', modes) || 12
+  const contentPaddingTop = getVariableByName('accordion/content/padding/top', modes) || 8
+  const contentPaddingBottom = isExpanded
+    ? (getVariableByName('accordion/content/padding/bottom', modes) ?? 24)
+    : 8
+  
+  const borderColor = getVariableByName('accordion/border/color', modes) || '#e6e6e6'
+  
+  // Styles
+  const containerStyle: ViewStyle = {
+    borderBottomWidth: 1,
+    borderBottomColor: borderColor,
+  }
+  
+  const headerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: headerGap,
+    paddingVertical: headerPaddingVertical,
+    paddingHorizontal: 0,
+    backgroundColor: headerBackground,
+    overflow: 'hidden',
+  }
+  
+  const titleStyle: TextStyle = {
+    flex: 1,
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: '700',
+  }
+  
+  const contentStyle: ViewStyle = {
+    backgroundColor: 'transparent',
+    gap: contentGap,
+    paddingTop: contentPaddingTop,
+    paddingBottom: contentPaddingBottom,
+    paddingHorizontal: 0,
+    overflow: 'hidden',
+  }
+  
+  // Generate default accessibility label
+  const defaultAccessibilityLabel = accessibilityLabel || title
+  
+  // Web platform support
+  const webProps = usePressableWebSupport({
+    restProps: {},
+    onPress: handleToggle,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+    webAccessibilityProps,
+  })
+  
+  // Process children to pass modes
+  const processedChildren = children
+    ? cloneChildrenWithModes(React.Children.toArray(children), modes)
+    : null
+  
+  return (
+    <View style={[containerStyle, style]} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityHint={accessibilityHint || (isExpanded ? 'Collapse accordion' : 'Expand accordion')}
+        accessibilityState={{
+          expanded: isExpanded,
+          disabled,
+          ...accessibilityState,
+        }}
+        onPress={handleToggle}
+        disabled={disabled}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        style={({ pressed }) => [
+          headerStyle,
+          pressed && !disabled ? { opacity: 0.9 } : null,
+        ]}
+        {...webProps}
+      >
+        <Text style={titleStyle} numberOfLines={1}>
+          {title}
+        </Text>
+        <Icon
+          name={isExpanded ? 'ic_minus' : 'ic_add'}
+          size={iconSize}
+          color={disabled ? '#999999' : iconColor}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        />
+      </Pressable>
+      
+      {isExpanded && processedChildren && (
+        <View style={contentStyle}>
+          {processedChildren}
+        </View>
+      )}
+    </View>
+  )
+}
+
+export default Accordion
+

package/src/components/ActionTile/ActionTile.mdx

@@ -0,0 +1,54 @@
+import { Meta, Story, Canvas, PureArgsTable as Controls } from '@storybook/addon-docs/blocks';
+import * as ActionTileStories from './ActionTile.stories';
+
+<Meta of={ActionTileStories} />
+
+# ActionTile
+
+A tile component used for dashboard actions, displaying an icon and a label.
+
+
+## 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
+## Usage
+
+```tsx
+import ActionTile from './ActionTile';
+import IconCapsule from '../IconCapsule/IconCapsule';
+
+// Default usage
+<ActionTile label="Cards" />
+
+// With custom icon
+<ActionTile 
+  label="Offers" 
+  icon={<IconCapsule iconName="ic_offers" />} 
+/>
+```
+
+<Canvas of={ActionTileStories.Default} />
+
+<Controls />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`actionTile/background`**
+- **`actionTile/fontFamily`**
+- **`actionTile/fontSize`**
+- **`actionTile/fontWeight`**
+- **`actionTile/foreground`**
+- **`actionTile/gap`**
+- **`actionTile/lineHeight`**
+- **`actionTile/padding/horizontal`**
+- **`actionTile/padding/vertical`**
+- **`actionTile/radius`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/ActionTile/ActionTile.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle, TouchableOpacity } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import IconCapsule from '../IconCapsule/IconCapsule'
+
+export type ActionTileProps = {
+    /** Label text, e.g. "Cards" */
+    label?: string
+    /** 
+     * Icon component slot.
+     * Expects an IconCapsule or compatible component.
+     * Modes will be passed to this slot if it's a valid React element.
+     */
+    icon?: React.ReactNode
+    /** Modes for design token resolution */
+    modes?: Record<string, any>
+    /** Optional container style */
+    style?: ViewStyle
+    /** Callback when tile is pressed */
+    onPress?: () => void
+}
+
+/**
+ * ActionTile component from Figma design.
+ * Displays an icon (defaulting to IconCapsule) and a label.
+ * 
+ * @component
+ */
+export default function ActionTile({
+    label = 'Cards',
+    icon,
+    modes = {},
+    style,
+    onPress,
+}: ActionTileProps) {
+    // Resolve tokens
+    const backgroundColor = getVariableByName('actionTile/background', modes) || '#ffffff'
+    const gap = Number(getVariableByName('actionTile/gap', modes)) || 8
+    const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes)) || 12
+    const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes)) || 16
+    const radius = Number(getVariableByName('actionTile/radius', modes)) || 16
+
+    // Text tokens
+    const textColor = getVariableByName('actionTile/foreground', modes) || '#0d0d0f'
+    const fontSize = Number(getVariableByName('actionTile/fontSize', modes)) || 14
+    const fontFamily = getVariableByName('actionTile/fontFamily', modes) || 'JioType Var'
+    const fontWeightStr = getVariableByName('actionTile/fontWeight', modes) || '500'
+    const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes)) || 17
+
+    const containerStyle: ViewStyle = {
+        backgroundColor,
+        borderRadius: radius,
+        paddingHorizontal,
+        paddingVertical,
+        gap,
+        width: 168, // Fixed width from design
+        height: 90, // Fixed height from design
+        alignItems: 'flex-start',
+        // ensure content stretches if needed, though design implies fixed size block
+        ...style,
+    }
+
+    const textStyle: TextStyle = {
+        color: textColor,
+        fontSize,
+        fontFamily,
+        fontWeight: fontWeightStr as any, // Cast to any or TextStyle fontWeight enum if needed
+        lineHeight,
+    }
+
+    // Handle Icon Slot: Pass modes safely
+    const renderIcon = () => {
+        if (React.isValidElement(icon)) {
+            // Pass modes down to the slot child
+            return React.cloneElement(icon as React.ReactElement<any>, { modes })
+        }
+        // Default fallback if no icon prop is provided, matching design default
+        if (!icon) {
+            return <IconCapsule modes={modes} />
+        }
+        return icon
+    }
+
+    const Content = (
+        <View style={containerStyle}>
+            {renderIcon()}
+            <Text style={textStyle}>{label}</Text>
+        </View>
+    )
+
+    if (onPress) {
+        return (
+            <TouchableOpacity onPress={onPress}>
+                {Content}
+            </TouchableOpacity>
+        )
+    }
+
+    return Content
+}

package/src/components/ActionTile/index.ts

@@ -0,0 +1 @@
+export { default } from './ActionTile'

package/src/components/CtaCard/CtaCard.mdx

@@ -0,0 +1,66 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as CtaCardStories from './CtaCard.stories';
+import CtaCard from './CtaCard';
+
+<Meta of={CtaCardStories} />
+
+# CtaCard
+
+`CtaCard` is a component used to display a Call-to-Action with an icon, title, body text, and a button.
+It is designed to be flexible, allowing content to be passed via props or fully customized via slots.
+
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+```tsx
+import { CtaCard } from 'jfs-components'; // Adjust import based on your package structure
+
+// Basic Usage
+<CtaCard
+  title="Lets create your UPI ID"
+  body="Send and receive money securely."
+  iconName="ic_upi_number"
+  buttonLabel="Get started"
+  onPressButton={() => console.log('Pressed')}
+/>
+
+// Using Slots
+<CtaCard
+  titleSlot={<CustomTitle />}
+  buttonSlot={<CustomButton />}
+/>
+```
+
+<Canvas>
+  <Story of={CtaCardStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={CtaCard} />
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`ctaCard/background`**
+- **`ctaCard/body/color`**
+- **`ctaCard/body/fontFamily`**
+- **`ctaCard/body/fontSize`**
+- **`ctaCard/body/lineHeight`**
+- **`ctaCard/content/gap`**
+- **`ctaCard/gap`**
+- **`ctaCard/padding/horizontal`**
+- **`ctaCard/padding/vertical`**
+- **`ctaCard/radius`**
+- **`ctaCard/title/color`**
+- **`ctaCard/title/fontFamily`**
+- **`ctaCard/title/fontSize`**
+- **`ctaCard/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.
+