jfs-components 0.0.1

package/src/components/Section/Section.tsx

@@ -0,0 +1,364 @@
+import React, { useState } from 'react'
+import { View, Text, Pressable, type StyleProp, type ViewStyle, type PressableStateCallbackType } 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'
+
+type SectionProps = {
+  title?: string;
+  supportText?: string;
+  showSupportText?: boolean;
+  slot?: React.ReactNode;
+  modes?: Record<string, any>;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  /**
+   * Web-specific accessibility props (only used on web platform)
+   */
+  webAccessibilityProps?: WebAccessibilityProps;
+} & React.ComponentProps<typeof View>;
+
+/**
+ * Section component that mirrors the Figma "Section" component.
+ *
+ * This component supports:
+ *  - **header** with title, support text, and optional chevron icon
+ *  - **slot** for custom content (typically ListItem components)
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "slot" → `slot`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.title='Section title'] - Section title text
+ * @param {string} [props.supportText='Section support text'] - Section support text
+ * @param {boolean} [props.showSupportText=true] - Toggles rendering of the support text
+ * @param {React.ReactNode} [props.slot] - Optional custom slot for content area (Figma Slot "slot")
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Function} [props.onPress] - Callback function called when the header is pressed
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for the section. If not provided, uses title
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function Section({
+  title = 'Section title',
+  supportText = 'Section support text',
+  showSupportText = true,
+  slot,
+  modes = {},
+  onPress,
+  style,
+  accessibilityLabel,
+  accessibilityHint,
+  webAccessibilityProps,
+  ...rest
+}: SectionProps) {
+  const [isHeaderFocused, setIsHeaderFocused] = useState(false)
+  const [isHeaderHovered, setIsHeaderHovered] = useState(false)
+  const [isHeaderPressed, setIsHeaderPressed] = useState(false)
+  const headerFocusStyle: ViewStyle = isHeaderFocused ? { borderColor: '#222', borderWidth: 1 } : {}
+  const headerHoverStyle: ViewStyle = isHeaderHovered ? { opacity: 0.95 } : {}
+  const headerPressedStyle: ViewStyle = isHeaderPressed ? { opacity: 0.85 } : {}
+  // Resolve section container tokens
+  const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
+  const gap = getVariableByName('section/gap', modes) || 12
+  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12
+  const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
+  const radius = getVariableByName('section/radius', modes) || 12
+
+  // Resolve section header tokens
+  const headerGap = getVariableByName('section/header/gap', modes) || 8
+  const headerPaddingHorizontal = getVariableByName('section/header/padding/horizontal', modes) || 0
+  const headerPaddingVertical = getVariableByName('section/header/padding/vertical', modes) || 0
+
+  // Resolve section title tokens
+  const titleColor = getVariableByName('section/title/color', modes) || '#0f0d0a'
+  const titleFontSize = getVariableByName('section/title/fontSize', modes) || 18
+  const titleLineHeight = getVariableByName('section/title/lineHeight', modes) || 20
+  const titleFontFamily = getVariableByName('section/title/fontFamily', modes) || 'System'
+  const titleFontWeightRaw = getVariableByName('section/title/fontWeight', modes) || 800
+  const titleFontWeight =
+    typeof titleFontWeightRaw === 'number'
+      ? titleFontWeightRaw.toString()
+      : titleFontWeightRaw
+
+  // Resolve section support text tokens
+  const supportTextColor = getVariableByName('section/supportText/color', modes) || '#1f1a14'
+  const supportTextFontSize = getVariableByName('section/supportText/fontSize', modes) || 14
+  const supportTextLineHeight = getVariableByName('section/supportText/lineHeight', modes) || 18
+  const supportTextFontFamily = getVariableByName('section/supportText/fontFamily', modes) || 'System'
+  const supportTextFontWeightRaw = getVariableByName('section/supportText/fontWeight', modes) || 500
+  const supportTextFontWeight =
+    typeof supportTextFontWeightRaw === 'number'
+      ? supportTextFontWeightRaw.toString()
+      : supportTextFontWeightRaw
+
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius: radius,
+    gap,
+  }
+
+  const headerStyle = {
+    paddingHorizontal: headerPaddingHorizontal,
+    paddingVertical: headerPaddingVertical,
+    gap: headerGap,
+  }
+
+  const headerWrapStyle: ViewStyle = {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'space-between' as const,
+  }
+
+  const titleStyle = {
+    flex: 1,
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight,
+  }
+
+  const supportTextStyle = {
+    color: supportTextColor,
+    fontSize: supportTextFontSize,
+    lineHeight: supportTextLineHeight,
+    fontFamily: supportTextFontFamily,
+    fontWeight: supportTextFontWeight,
+  }
+
+  // Generate default accessibility label from title and supportText
+  const defaultAccessibilityLabel = accessibilityLabel || 
+    (showSupportText ? `${title}. ${supportText}` : title)
+
+  // Get web platform support props (only used when onPress is defined)
+  const webProps = usePressableWebSupport({
+    restProps: {},
+    onPress,
+    disabled: false,
+    accessibilityLabel: title,
+    webAccessibilityProps,
+  })
+
+  const headerContent = (
+    <>
+      <View style={headerWrapStyle}>
+        <Text 
+          style={titleStyle} 
+          numberOfLines={1}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        >
+          {title}
+        </Text>
+        {onPress && (
+          <Icon 
+            name="ic_chevron_right" 
+            size={24} 
+            color={titleColor}
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no"
+          />
+        )}
+      </View>
+      {showSupportText && (
+        <Text 
+          style={supportTextStyle} 
+          numberOfLines={2}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        >
+          {supportText}
+        </Text>
+      )}
+    </>
+  )
+
+  return (
+    <View 
+      style={[containerStyle, style]}
+      accessibilityRole={'region' as any}
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      {...rest}
+    >
+      {onPress ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={title}
+          accessibilityHint={accessibilityHint || "Opens section details"}
+          onPress={onPress}
+          onPressIn={(e: any) => {
+            setIsHeaderPressed(true)
+            ;(rest as any)?.onPressIn?.(e)
+          }}
+          onPressOut={(e: any) => {
+            setIsHeaderPressed(false)
+            ;(rest as any)?.onPressOut?.(e)
+          }}
+          onFocus={(e: any) => {
+            setIsHeaderFocused(true)
+            ;(rest as any)?.onFocus?.(e)
+          }}
+          onBlur={(e: any) => {
+            setIsHeaderFocused(false)
+            ;(rest as any)?.onBlur?.(e)
+          }}
+          onHoverIn={(e: any) => {
+            setIsHeaderHovered(true)
+            ;(rest as any)?.onHoverIn?.(e)
+          }}
+          onHoverOut={(e: any) => {
+            setIsHeaderHovered(false)
+            ;(rest as any)?.onHoverOut?.(e)
+          }}
+          style={({ pressed }: PressableStateCallbackType) => [
+            headerStyle,
+            pressed ? headerPressedStyle : null,
+            headerHoverStyle,
+            headerFocusStyle,
+          ]}
+          {...webProps}
+        >
+          {headerContent}
+        </Pressable>
+      ) : (
+        <View style={headerStyle}>
+          {headerContent}
+        </View>
+      )}
+      {slot && <View>{slot}</View>}
+    </View>
+  )
+}
+
+type SectionBentoProps = {
+  navSlot?: React.ReactNode;
+  upiSlot?: React.ReactNode;
+  modes?: Record<string, any>;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  /**
+   * Web-specific accessibility props (only used on web platform)
+   */
+  webAccessibilityProps?: WebAccessibilityProps;
+} & React.ComponentProps<typeof View>;
+
+/**
+ * Section.Bento component that mirrors the Figma "Section.Bento" component.
+ *
+ * This component supports:
+ *  - **navSlot** for navigation items (typically ListItem components in vertical layout)
+ *  - **upiSlot** for UPI handles (typically UpiHandle components)
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "Nav wrap" → `navSlot`
+ *  - Slot "UPI wrap" → `upiSlot`
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} [props.navSlot] - Optional custom slot for navigation items (Figma Slot "Nav wrap")
+ * @param {React.ReactNode} [props.upiSlot] - Optional custom slot for UPI handles (Figma Slot "UPI wrap")
+ * @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 section
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function SectionBento({
+  navSlot,
+  upiSlot,
+  modes = {},
+  style,
+  accessibilityLabel = "Bento section",
+  accessibilityHint,
+  ...rest
+}: SectionBentoProps) {
+  // Resolve section container tokens
+  const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
+  const gap = getVariableByName('section/gap', modes) || 12
+  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12
+  const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
+  const radius = getVariableByName('section/radius', modes) || 12
+
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius: radius,
+    gap,
+  }
+
+  // Helper function to clone children with modes (same as in Section component)
+  const 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
+      // Merge order: parent modes first, then child's explicit modes override them
+      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 || []
+  }
+
+  // Process slots to pass modes to children
+  const processedNavSlot = navSlot
+    ? cloneChildrenWithModes(React.Children.toArray(navSlot), modes)
+    : null
+
+  const processedUpiSlot = upiSlot
+    ? cloneChildrenWithModes(React.Children.toArray(upiSlot), modes)
+    : null
+
+  return (
+    <View 
+      style={[containerStyle, style]}
+      accessibilityRole={'region' as any}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      {...rest}
+    >
+      {processedNavSlot && <View>{processedNavSlot}</View>}
+      {processedUpiSlot && (
+        <View style={{ flexDirection: 'row' as const, gap: 8 }}>
+          {processedUpiSlot}
+        </View>
+      )}
+    </View>
+  )
+}
+
+// Attach Bento as a property of Section using namespace pattern
+Section.Bento = SectionBento
+
+export default Section
+

package/src/components/Stepper/Step.mdx

@@ -0,0 +1,52 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as StepStories from './Step.stories';
+import { Step } from './Step';
+
+<Meta of={StepStories} />
+
+# Step
+
+A component representing a single step within a Stepper process. It displays an indicator (number or icon), a title, and an optional subtitle.
+
+## 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.
+
+### Status
+- **Modes:** active | inactive | complete | error | warning
+- **Default:** active
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={StepStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={Step} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`stepIndicator/background`**
+- **`stepIndicator/border/color`**
+- **`stepIndicator/border/size`**
+- **`stepIndicator/icon/color`**
+- **`stepIndicator/label/fontFamily`**
+- **`stepIndicator/label/fontSize`**
+- **`stepIndicator/label/fontWeight`**
+- **`stepIndicator/label/lineHeight`**
+- **`stepIndicator/radius`**
+- **`stepIndicator/size`**
+- **`steperItem/badgeWrap/gap`**
+- **`steperItem/gap`**
+- **`steperItem/line`**
+- **`steperItem/lineSize`**
+- **`steperItem/minHeight`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/Stepper/Step.tsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { StepLabel } from './StepLabel'
+
+export type StepStatus = 'number' | 'complete' | 'error' | 'warning'
+
+export type StepProps = {
+    children?: React.ReactNode
+    modes?: Record<string, any>
+    style?: ViewStyle
+    // Injected by Stepper, or provided manually
+    index?: number
+
+    // Custom style for the connecting line, allowing Stepper to hide it for the last item
+    connectorStyle?: ViewStyle
+
+    // Props matching Figma component interface directly
+    title?: string
+    supportingText?: string
+    subtitle?: boolean // Toggle for subtitle visibility if passed via props
+    status?: StepStatus // 'number' | 'complete' | 'error' | 'warning'
+}
+
+export function Step({
+    children,
+    modes = {},
+    style,
+    index = 0,
+    connectorStyle,
+    title,
+    supportingText,
+    subtitle = true,
+    status = 'number',
+}: StepProps) {
+    // Container styles
+    const minHeight =
+        Number(getVariableByName('steperItem/minHeight', modes) as unknown) || 52
+    const gap =
+        Number(getVariableByName('steperItem/gap', modes) as unknown) || 8
+
+    // Indicator dimensions and styles
+    const indicatorSize =
+        Number(getVariableByName('stepIndicator/size', modes) as unknown) || 24
+    const indicatorRadius =
+        Number(getVariableByName('stepIndicator/radius', modes) as unknown) || 9999
+    const indicatorBg =
+        (getVariableByName('stepIndicator/background', modes) as string) ||
+        '#5c00b5'
+    const indicatorBorderColor =
+        (getVariableByName('stepIndicator/border/color', modes) as string) ||
+        '#5c00b5'
+    const indicatorBorderSize =
+        Number(getVariableByName('stepIndicator/border/size', modes) as unknown) || 1
+    const iconColor =
+        (getVariableByName('stepIndicator/icon/color', modes) as string) || '#ffffff'
+
+    // Label styles (for number)
+    const labelFontSize =
+        Number(getVariableByName('stepIndicator/label/fontSize', modes) as unknown) || 12
+    const labelFontFamily =
+        (getVariableByName('stepIndicator/label/fontFamily', modes) as string) || undefined
+    const labelLineHeight =
+        Number(getVariableByName('stepIndicator/label/lineHeight', modes) as unknown) || 14
+    const labelFontWeight =
+        (getVariableByName('stepIndicator/label/fontWeight', modes) as string) || '500'
+
+    // Vertical line styles
+    const lineSize =
+        Number(getVariableByName('steperItem/lineSize', modes) as unknown) || 2
+    const lineColor =
+        (getVariableByName('steperItem/line', modes) as string) || '#5c00b5'
+    const badgeWrapGap =
+        Number(getVariableByName('steperItem/badgeWrap/gap', modes) as unknown) || 2
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        minHeight,
+        ...style,
+    }
+
+    // FIX: This wrapper should NOT expand. It should be exact width of the indicator.
+    const indicatorWrapperStyle: ViewStyle = {
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: indicatorSize,
+        flexGrow: 0, // Do NOT grow
+        flexShrink: 0,
+        gap: badgeWrapGap,
+    }
+
+    const indicatorStyle: ViewStyle = {
+        width: indicatorSize,
+        height: indicatorSize,
+        borderRadius: indicatorRadius,
+        backgroundColor: indicatorBg,
+        borderColor: indicatorBorderColor,
+        borderWidth: indicatorBorderSize,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    }
+
+    const labelStyle: TextStyle = {
+        color: iconColor,
+        fontSize: labelFontSize,
+        fontFamily: labelFontFamily,
+        fontWeight: labelFontWeight as TextStyle['fontWeight'],
+        lineHeight: labelLineHeight,
+        textAlign: 'center',
+    }
+
+    // Combine base line style with injected connectorStyle
+    const lineStyle: ViewStyle = {
+        width: lineSize,
+        backgroundColor: lineColor,
+        flexGrow: 1, // Line should take up remaining vertical space in this column
+        ...connectorStyle, // Allow overriding display, color, etc.
+    }
+
+    // Helper for icons
+    const renderIcon = () => {
+        switch (status) {
+            case 'complete':
+                // Checkmark
+                return (
+                    <Svg width={12} height={12} viewBox="0 0 24 24" fill="none">
+                        <Path d="M20 6L9 17L4 12" stroke={iconColor} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+                    </Svg>
+                )
+            case 'error':
+                // X mark
+                return (
+                    <Svg width={12} height={12} viewBox="0 0 24 24" fill="none">
+                        <Path d="M18 6L6 18M6 6l12 12" stroke={iconColor} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+                    </Svg>
+                )
+            case 'warning':
+                // Exclamation / Triangle
+                return (
+                    <Svg width={12} height={12} viewBox="0 0 24 24" fill="none">
+                        <Path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke={iconColor} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </Svg>
+                )
+            case 'number':
+            default:
+                return <Text style={labelStyle}>{index + 1}</Text>
+        }
+    }
+
+    // Clone children to pass modes if they are StepLabel
+    const childrenWithProps = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { modes } as any)
+        }
+        return child
+    })
+
+    // Determine if we have content to pad
+    // Default padding bottom to 16 if line is shown, but also respect connectorStyle display
+    // If display is none, we probably don't want the padding bottom either.
+    const isLineHidden = connectorStyle?.display === 'none'
+    const contentPaddingBottom = isLineHidden ? 0 : 16
+
+    return (
+        <View style={containerStyle}>
+            <View style={indicatorWrapperStyle}>
+                <View style={indicatorStyle}>
+                    {renderIcon()}
+                </View>
+                <View style={lineStyle} />
+            </View>
+
+            {/* Spacer gap */}
+            <View style={{ width: gap }} />
+
+            {/* Content Area */}
+            <View style={{ flex: 1, paddingBottom: contentPaddingBottom }}>
+                {title ? (
+                    <StepLabel
+                        title={title}
+                        supportingText={subtitle ? (supportingText || undefined) : undefined}
+                        modes={modes}
+                    />
+                ) : (
+                    childrenWithProps
+                )}
+            </View>
+        </View>
+    )
+}

package/src/components/Stepper/StepLabel.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as StepLabelStories from './StepLabel.stories';
+import { StepLabel } from './StepLabel';
+
+<Meta of={StepLabelStories} />
+
+# StepLabel
+
+A sub-component used to render the text content (title and subtitle) for a Step.
+
+## 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
+
+<Canvas>
+  <Story of={StepLabelStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={StepLabel} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`steperItem/subtitle/color`**
+- **`steperItem/subtitle/fontFamily`**
+- **`steperItem/subtitle/fontSize`**
+- **`steperItem/subtitle/fontWeight`**
+- **`steperItem/subtitle/lineHeight`**
+- **`steperItem/textWrap/gap`**
+- **`steperItem/title/color`**
+- **`steperItem/title/fontFamily`**
+- **`steperItem/title/fontSize`**
+- **`steperItem/title/fontWeight`**
+- **`steperItem/title/lineHeight`**
+
+All tokens support mode-based theming through the `modes` prop.