jfs-components 0.0.1

package/src/components/Stepper/StepLabel.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type StepLabelProps = {
+    title?: string
+    supportingText?: string
+    modes?: Record<string, any>
+    style?: ViewStyle
+}
+
+export function StepLabel({
+    title = 'Stepper Item',
+    supportingText,
+    modes = {},
+    style,
+}: StepLabelProps) {
+    // Title styles
+    const titleColor =
+        (getVariableByName('steperItem/title/color', modes) as string) || '#0d0d0f'
+    const titleFontSize =
+        Number(getVariableByName('steperItem/title/fontSize', modes) as unknown) || 14
+    const titleFontFamily =
+        (getVariableByName('steperItem/title/fontFamily', modes) as string) ||
+        undefined
+    const titleLineHeight =
+        Number(getVariableByName('steperItem/title/lineHeight', modes) as unknown) ||
+        18
+    const titleFontWeight =
+        (getVariableByName('steperItem/title/fontWeight', modes) as string) || '700'
+
+    // Subtitle styles
+    const subtitleColor =
+        (getVariableByName('steperItem/subtitle/color', modes) as string) ||
+        '#3d4047'
+    const subtitleFontSize =
+        Number(
+            getVariableByName('steperItem/subtitle/fontSize', modes) as unknown
+        ) || 12
+    const subtitleFontFamily =
+        (getVariableByName('steperItem/subtitle/fontFamily', modes) as string) ||
+        undefined
+    const subtitleLineHeight =
+        Number(
+            getVariableByName('steperItem/subtitle/lineHeight', modes) as unknown
+        ) || 16
+    const subtitleFontWeight =
+        (getVariableByName('steperItem/subtitle/fontWeight', modes) as string) ||
+        '400'
+
+    // Layout gap
+    const textGap =
+        Number(getVariableByName('steperItem/textWrap/gap', modes) as unknown) || 2
+
+    const titleStyle: TextStyle = {
+        color: titleColor,
+        fontSize: titleFontSize,
+        fontFamily: titleFontFamily,
+        fontWeight: titleFontWeight as TextStyle['fontWeight'],
+        lineHeight: titleLineHeight,
+    }
+
+    const subtitleStyle: TextStyle = {
+        color: subtitleColor,
+        fontSize: subtitleFontSize,
+        fontFamily: subtitleFontFamily,
+        fontWeight: subtitleFontWeight as TextStyle['fontWeight'],
+        lineHeight: subtitleLineHeight,
+    }
+
+    return (
+        <View style={[{ gap: textGap, flex: 1 }, style]}>
+            <Text style={titleStyle}>{title}</Text>
+            {supportingText ? (
+                <Text style={subtitleStyle}>{supportingText}</Text>
+            ) : null}
+        </View>
+    )
+}

package/src/components/Stepper/Stepper.mdx

@@ -0,0 +1,32 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as StepperStories from './Stepper.stories';
+import Stepper from './Stepper';
+
+<Meta of={StepperStories} />
+
+# Stepper
+
+Stepper component with design-token-driven styling.
+
+## Available Collections and Modes
+
+This component does not use any design token collections with multiple modes.
+## Usage
+
+<Canvas>
+  <Story of={StepperStories.Default} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={Stepper} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`stepper/gap`**
+- **`stepper/padding/horizontal`**
+- **`stepper/padding/vertical`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { View, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { Step } from './Step'
+import { StepLabel } from './StepLabel'
+
+export { Step, StepLabel }
+
+type StepperProps = {
+    children?: React.ReactNode
+    modes?: Record<string, any>
+    style?: ViewStyle
+}
+
+export default function Stepper({
+    children,
+    modes = {},
+    style,
+}: StepperProps) {
+    // Stepper container styles
+    const paddingHorizontal =
+        Number(getVariableByName('stepper/padding/horizontal', modes) as unknown) ||
+        8
+    const paddingVertical =
+        Number(getVariableByName('stepper/padding/vertical', modes) as unknown) || 0
+    const gap = Number(getVariableByName('stepper/gap', modes) as unknown) || 2
+
+    const containerStyle: ViewStyle = {
+        paddingHorizontal,
+        paddingVertical,
+        gap,
+        ...style,
+    }
+
+    // Inject index and connectorStyle logic into Step children
+    const steps = React.Children.toArray(children)
+    const childrenWithProps = steps.map((child, index) => {
+        if (React.isValidElement(child)) {
+            const isLast = index === steps.length - 1
+
+            return React.cloneElement(child, {
+                index,
+                modes, // Pass modes down
+                connectorStyle: isLast ? { display: 'none' } : undefined,
+            } as any)
+        }
+        return child
+    })
+
+    return <View style={containerStyle}>{childrenWithProps}</View>
+}

package/src/components/TextInput/TextInput.mdx

@@ -0,0 +1,70 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as TextInputStories from './TextInput.stories';
+import TextInput from './TextInput';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={TextInputStories} />
+
+# TextInput
+
+Helper function to recursively clone children and pass modes prop to components that accept it.
+
+## 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={TextInputStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Provide `accessibilityLabel` when placeholder is empty or non-descriptive.',
+    'Keep leading/trailing icons marked decorative; only interactive chips should be focusable.',
+    'Use `accessibilityHint` to describe search/filter intent when it is not obvious.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Leading slot</strong> — default search icon or custom element.</li>
+    <li><strong>Input</strong> — textbox with token typography and placeholder handling.</li>
+    <li><strong>Trailing slot</strong> — optional adornment (clear, filters, status).</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Forward `modes` to keep padding, radius, and icon sizes aligned with design tokens.',
+    'Avoid nesting other focusable controls inside the leading/trailing wrappers.',
+    'Use `value` + `onChangeText` for controlled usage; avoid mixing with uncontrolled patterns.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={TextInput} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`textInput/background`**
+- **`textInput/border/color`**
+- **`textInput/fontFamily`**
+- **`textInput/fontSize`**
+- **`textInput/fontWeight`**
+- **`textInput/horizontal/padding`**
+- **`textInput/icon/color`**
+- **`textInput/icon/size`**
+- **`textInput/label/color`**
+- **`textInput/lineHeight`**
+- **`textInput/radius`**
+- **`textInput/vertical/padding`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,400 @@
+import React, { useState } from 'react'
+import { Pressable, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Icon from '../../icons/Icon'
+
+/**
+ * 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
+
+    // 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
+        )
+      : undefined
+
+    // Clone element with modes and processed children
+    return React.cloneElement(
+      child,
+      {
+        ...(child.props as any),
+        modes: mergedModes,
+      },
+      processedChildren
+    )
+  })
+  return result || []
+}
+
+/**
+ * TextInput component that mirrors the Figma "textInput" component.
+ *
+ * This component supports:
+ *  - **leading** slot for icons or other leading elements (defaults to ic_search icon)
+ *  - **trailing** slot for icons or other trailing elements
+ *  - **design-token driven styling** via `getVariableByName` and `modes`
+ *
+ * Wherever the Figma layer name contains "Slot", this component exposes a
+ * dedicated React "slot" prop:
+ *  - Slot "start" → `leading`
+ *  - Slot "end" → `trailing`
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.placeholder=''] - Placeholder text displayed when input is empty
+ * @param {string} [props.value=''] - Current value of the input
+ * @param {Function} [props.onChangeText] - Callback function called when text changes
+ * @param {string} [props.leadingIconName='ic_search'] - Icon name for the leading slot (defaults to "ic_search")
+ * @param {React.ReactNode} [props.leading] - Optional custom leading slot (Figma Slot "start"). If provided, overrides leadingIconName
+ * @param {React.ReactNode} [props.trailing] - Optional trailing slot (Figma Slot "end")
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {Object} [props.inputStyle] - Optional text input style overrides
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses placeholder or "Text input"
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ * @param {Object} [props.rest] - Additional props passed to the underlying TextInput
+ */
+/**
+ * Helper function to convert a color to a more transparent version for placeholder text.
+ * Takes a color string (hex, rgb, rgba) and returns it with reduced opacity.
+ */
+function makePlaceholderColor(color: string | undefined, opacity: number = 0.5): string {
+  if (!color || typeof color !== 'string') {
+    return color || ''
+  }
+  
+  // If it's already an rgba string, extract and modify
+  if (color.startsWith('rgba(')) {
+    const match = color.match(/rgba\(([^)]+)\)/)
+    if (match && match[1]) {
+      const parts = match[1].split(',').map((p) => p.trim())
+      if (parts.length >= 3) {
+        return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${opacity})`
+      }
+    }
+  }
+  // If it's rgb, convert to rgba
+  if (color.startsWith('rgb(')) {
+    const match = color.match(/rgb\(([^)]+)\)/)
+    if (match && match[1]) {
+      return `rgba(${match[1]}, ${opacity})`
+    }
+  }
+  // If it's hex, convert to rgba
+  if (color.startsWith('#')) {
+    const hex = color.replace('#', '')
+    // Handle both 3-digit and 6-digit hex
+    let r: number, g: number, b: number
+    if (hex.length === 3) {
+      const char0 = hex[0]
+      const char1 = hex[1]
+      const char2 = hex[2]
+      if (!char0 || !char1 || !char2) {
+        return color
+      }
+      r = parseInt(char0 + char0, 16)
+      g = parseInt(char1 + char1, 16)
+      b = parseInt(char2 + char2, 16)
+      if (isNaN(r) || isNaN(g) || isNaN(b)) {
+        return color
+      }
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`
+    } else if (hex.length === 6) {
+      r = parseInt(hex.substring(0, 2), 16)
+      g = parseInt(hex.substring(2, 4), 16)
+      b = parseInt(hex.substring(4, 6), 16)
+      if (isNaN(r) || isNaN(g) || isNaN(b)) {
+        return color
+      }
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`
+    } else {
+      return color
+    }
+  }
+  // Fallback: return original color
+  return color
+}
+
+type TextInputProps = {
+  placeholder?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  leadingIconName?: string;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  modes?: Record<string, any>;
+  style?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  onFocus?: (e: any) => void;
+  onBlur?: (e: any) => void;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
+
+function TextInput({
+  placeholder = '',
+  value = '',
+  onChangeText,
+  leadingIconName = 'ic_search',
+  leading,
+  trailing,
+  modes = {},
+  style,
+  inputStyle,
+  onFocus,
+  onBlur,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}: TextInputProps) {
+  // Track focus state to hide placeholder when focused
+  const [isFocused, setIsFocused] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+
+  // Resolve container tokens
+  const backgroundColor = getVariableByName('textInput/background', modes) || '#f5f5f5'
+  const borderColor = getVariableByName('textInput/border/color', modes) || '#f5f5f5'
+  const paddingHorizontal = getVariableByName('textInput/horizontal/padding', modes) || 14
+  const paddingVertical = getVariableByName('textInput/vertical/padding', modes) || 14
+  const radius = getVariableByName('textInput/radius', modes) || 99999
+
+  // Resolve text input typography tokens
+  const textColor = getVariableByName('textInput/label/color', modes) || '#24262b'
+  const fontSize = getVariableByName('textInput/fontSize', modes) || 14
+  const lineHeight = getVariableByName('textInput/lineHeight', modes) || 18
+  const fontFamily = getVariableByName('textInput/fontFamily', modes) || 'System'
+  const fontWeightRaw = getVariableByName('textInput/fontWeight', modes) || 400
+  const fontWeight =
+    typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
+
+  // Create placeholder color (lighter/more transparent version of text color)
+  const placeholderColor = makePlaceholderColor(textColor, 0.6)
+
+  // Resolve icon tokens (for default icon rendering if needed)
+  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
+  const iconSize = getVariableByName('textInput/icon/size', modes) || 18
+
+  // Convert radius to React Native format (if 99999, use a large value for fully rounded)
+  const borderRadius = radius === 99999 ? 99999 : radius
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor,
+    borderColor,
+    borderWidth: 1,
+    borderStyle: 'solid' as const,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical,
+    gap: 8,
+  }
+
+  const hoverStyle: ViewStyle = isHovered ? { opacity: 0.95 } : {}
+  const focusContainerStyle: ViewStyle = isFocused ? { borderColor: '#222', borderWidth: 1 } : {}
+
+  const textInputStyle: TextStyle = {
+    flex: 1,
+    color: textColor,
+    fontSize,
+    lineHeight,
+    fontFamily,
+    fontWeight,
+    padding: 0,
+    margin: 0,
+    minHeight: lineHeight,
+    // Remove focus outline for React Native Web
+    outlineStyle: 'none' as any,
+    outlineWidth: 0,
+    outlineColor: 'transparent',
+  }
+
+  // Determine leading element: use provided leading, or default to icon from leadingIconName
+  const leadingElement = leading || (
+    <Icon name={leadingIconName} size={iconSize} color={iconColor} />
+  )
+
+  // Clone leading and trailing slots and pass modes to all children that accept it
+  const processedLeading = leadingElement
+    ? cloneChildrenWithModes(React.Children.toArray(leadingElement), modes)
+    : null
+
+  const processedTrailing = trailing
+    ? cloneChildrenWithModes(React.Children.toArray(trailing), modes)
+    : null
+
+  // Handle focus events
+  const handleFocus = (e: any) => {
+    setIsFocused(true)
+    if (onFocus) {
+      onFocus(e)
+    }
+  }
+
+  const handleBlur = (e: any) => {
+    setIsFocused(false)
+    if (onBlur) {
+      onBlur(e)
+    }
+  }
+
+  // Hide placeholder when focused
+  const displayPlaceholder = isFocused ? '' : placeholder
+
+  // Generate default accessibility label from placeholder if not provided
+  const defaultAccessibilityLabel = accessibilityLabel || (placeholder || 'Text input')
+
+  return (
+    <Pressable
+      style={[containerStyle, focusContainerStyle, hoverStyle, style]}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+    >
+      {processedLeading && (
+        <View 
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        >
+          {processedLeading}
+        </View>
+      )}
+      <RNTextInput
+        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        placeholder={displayPlaceholder}
+        value={value}
+        onChangeText={onChangeText}
+        placeholderTextColor={placeholderColor}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        style={[textInputStyle, inputStyle]}
+        {...rest}
+      />
+      {processedTrailing && (
+        <View 
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        >
+          {processedTrailing}
+        </View>
+      )}
+    </Pressable>
+  )
+}
+
+/**
+ * TextInput.Search component that mirrors the Figma "textInput.search" component.
+ *
+ * This is a convenience variant that pre-configures the TextInput with:
+ *  - Default search icon in the leading slot
+ *  - No trailing slot
+ *  - Default placeholder text "Search"
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.placeholder='Search'] - Placeholder text (defaults to "Search")
+ * @param {string} [props.value=''] - Current value of the input
+ * @param {Function} [props.onChangeText] - Callback function called when text changes
+ * @param {React.ReactNode} [props.leading] - Optional leading slot (defaults to search icon)
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
+ * @param {Object} [props.style] - Optional container style overrides
+ * @param {Object} [props.inputStyle] - Optional text input style overrides
+ * @param {Object} [props.rest] - Additional props passed to the underlying TextInput
+ */
+type TextInputSearchProps = {
+  placeholder?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  leading?: React.ReactNode;
+  modes?: Record<string, any>;
+  style?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  onFocus?: (e: any) => void;
+  onBlur?: (e: any) => void;
+} & Omit<RNTextInputProps, 'style' | 'onChangeText' | 'onFocus' | 'onBlur' | 'placeholder' | 'value'>;
+
+function TextInputSearch({
+  placeholder = 'Search',
+  value = '',
+  onChangeText,
+  leading,
+  modes = {},
+  style,
+  inputStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  onFocus,
+  onBlur,
+  ...rest
+}: TextInputSearchProps) {
+  // Resolve icon tokens for default search icon
+  const iconColor = getVariableByName('textInput/icon/color', modes) || '#24262b'
+  const iconSize = getVariableByName('textInput/icon/size', modes) || 18
+
+  // Use provided leading or default to search icon
+  const defaultLeading = (
+    <Icon name="ic_search" size={iconSize} color={iconColor} />
+  )
+
+  const textInputProps: Partial<TextInputProps> = {
+    placeholder,
+    value,
+    leading: leading || defaultLeading,
+    trailing: null,
+    modes,
+    style,
+    inputStyle,
+    ...rest,
+  }
+  
+  if (onChangeText) {
+    textInputProps.onChangeText = onChangeText
+  }
+  
+  if (onFocus) {
+    textInputProps.onFocus = onFocus
+  }
+  
+  if (onBlur) {
+    textInputProps.onBlur = onBlur
+  }
+  
+  if (accessibilityLabel) {
+    textInputProps.accessibilityLabel = accessibilityLabel
+  }
+  
+  if (accessibilityHint) {
+    textInputProps.accessibilityHint = accessibilityHint
+  }
+
+  return <TextInput {...(textInputProps as TextInputProps)} />
+}
+
+// Attach Search as a property of TextInput using namespace pattern
+TextInput.Search = TextInputSearch
+
+export default TextInput
+