jfs-components 0.0.77 → 0.0.78

package/src/components/MessageField/MessageField.tsx

@@ -0,0 +1,543 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    TextInput as RNTextInput,
+    type StyleProp,
+    type TextInputProps as RNTextInputProps,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import { useFormContext } from '../Form/Form'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * Visual state of the textarea. Mirrors the `FormField States` collection so
+ * MessageField slots into the same theming pipeline as FormField. The state
+ * is always derived from props (`isInvalid`, `isDisabled`, `isReadOnly` and
+ * focus) and is locked in `modes['FormField States']` — passing that key in
+ * `modes` is intentionally ignored to keep interactive behaviour and visual
+ * state in sync.
+ */
+export type MessageFieldState =
+    | 'Idle'
+    | 'Active'
+    | 'Read Only'
+    | 'Error'
+    | 'Disabled'
+
+export type MessageFieldProps = {
+    /** Label rendered above the textarea. */
+    label?: string
+    /** Placeholder text shown when the textarea is empty. */
+    placeholder?: string
+    /**
+     * Current value of the textarea (controlled). When provided, the consumer
+     * is responsible for updating it via `onChangeText`.
+     */
+    value?: string
+    /** Initial value when used uncontrolled. Ignored when `value` is provided. */
+    defaultValue?: string
+    /** Called whenever the text changes. Fires for both controlled and uncontrolled use. */
+    onChangeText?: (text: string) => void
+    /**
+     * Form field name. When the field is rendered inside a `<Form>`, this is
+     * the key used to look up server-side `validationErrors` and to clear
+     * the error when the value changes.
+     */
+    name?: string
+    /**
+     * Maximum number of characters accepted. Drives the counter when
+     * `showCounter` is not explicitly false.
+     */
+    maxLength?: number
+    /**
+     * Controls visibility of the character counter.
+     * - Default: counter is shown when `maxLength` is provided.
+     * - `true`: always show counter (shows `<count>/<maxLength>` when
+     *   `maxLength` is set, or just `<count>` otherwise).
+     * - `false`: never show counter.
+     */
+    showCounter?: boolean
+    /**
+     * Number of visible text rows. When provided, overrides the default
+     * `messageField/textarea/height` token to derive the textarea height as
+     * `rows * lineHeight + 2 * padding`.
+     */
+    rows?: number
+    /** Renders a required indicator (asterisk) next to the label. */
+    isRequired?: boolean
+    /** Disables interaction and dims the field. */
+    isDisabled?: boolean
+    /** Marks the field as invalid and resolves to the `Error` state token mode. */
+    isInvalid?: boolean
+    /** Read-only, non-interactive but not dimmed. */
+    isReadOnly?: boolean
+    /** Auto-focus the textarea on mount. */
+    autoFocus?: boolean
+    /** Modes for design token resolution (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Style overrides for the outermost wrapper. */
+    style?: StyleProp<ViewStyle>
+    /** Style overrides for the textarea container (border/padding/etc). */
+    textareaStyle?: StyleProp<ViewStyle>
+    /** Style overrides for the input text. */
+    inputStyle?: StyleProp<TextStyle>
+    /** Accessibility label. Defaults to `label` or `placeholder`. */
+    accessibilityLabel?: string
+    /** Accessibility hint. */
+    accessibilityHint?: string
+    /** Test identifier. */
+    testID?: string
+    /** Called when the textarea receives focus. */
+    onFocus?: RNTextInputProps['onFocus']
+    /** Called when the textarea loses focus. */
+    onBlur?: RNTextInputProps['onBlur']
+}
+
+// ---------------------------------------------------------------------------
+// Token helpers
+// ---------------------------------------------------------------------------
+
+function toNumber(value: unknown, fallback: number): number {
+    if (typeof value === 'number' && Number.isFinite(value)) return value
+    if (typeof value === 'string') {
+        const parsed = parseFloat(value)
+        if (Number.isFinite(parsed)) return parsed
+    }
+    return fallback
+}
+
+function toFontWeight(
+    value: unknown,
+    fallback: TextStyle['fontWeight'],
+): TextStyle['fontWeight'] {
+    if (typeof value === 'number') return value.toString() as TextStyle['fontWeight']
+    if (typeof value === 'string' && value.length > 0) return value as TextStyle['fontWeight']
+    return fallback
+}
+
+function firstError(error: string | string[] | undefined): string | undefined {
+    if (!error) return undefined
+    if (Array.isArray(error)) return error[0]
+    return error
+}
+
+function useMessageFieldTokens(modes: Record<string, any>) {
+    return useMemo(() => {
+        const wrapperGap = toNumber(getVariableByName('messageField/gap', modes), 8)
+
+        const labelColor =
+            (getVariableByName('messageField/label/foreground', modes) as string) ||
+            '#000000'
+        const labelFontFamily =
+            (getVariableByName('messageField/label/fontFamily', modes) as string) ||
+            'JioType Var'
+        const labelFontSize = toNumber(
+            getVariableByName('messageField/label/fontSize', modes),
+            14,
+        )
+        const labelLineHeight = toNumber(
+            getVariableByName('messageField/label/lineHeight', modes),
+            17,
+        )
+        const labelFontWeight = toFontWeight(
+            getVariableByName('messageField/label/fontWeight', modes),
+            '500',
+        )
+
+        const textareaBackground =
+            (getVariableByName('messageField/textarea/background', modes) as string) ||
+            '#ffffff'
+        const textareaBorderColor =
+            (getVariableByName('messageField/textarea/border/color', modes) as string) ||
+            '#b5b6b7'
+        const textareaBorderSize = toNumber(
+            getVariableByName('messageField/textarea/border/size', modes),
+            1.5,
+        )
+        const textareaRadius = toNumber(
+            getVariableByName('messageField/textarea/radius', modes),
+            8,
+        )
+        const textareaPadding = toNumber(
+            getVariableByName('messageField/textarea/padding', modes),
+            12,
+        )
+        const textareaHeight = toNumber(
+            getVariableByName('messageField/textarea/height', modes),
+            108,
+        )
+        const textareaGap = toNumber(
+            getVariableByName('messageField/textarea/gap', modes),
+            0,
+        )
+
+        // `messageField/text/foreground` is the input text color. It also
+        // serves as the placeholder color — in mode-aware token sets it
+        // resolves to a muted/idle color when empty and shifts darker via
+        // the `FormField States` cascade once typed-state tokens land. We
+        // never re-route this through another token (e.g. the counter
+        // color) because that conflates two semantically distinct tokens.
+        const inputTextColor =
+            (getVariableByName('messageField/text/foreground', modes) as string) ||
+            '#707275'
+        const inputFontFamily =
+            (getVariableByName('messageField/text/fontFamily', modes) as string) ||
+            'JioType Var'
+        const inputFontSize = toNumber(
+            getVariableByName('messageField/text/fontSize', modes),
+            16,
+        )
+        const inputLineHeight = toNumber(
+            getVariableByName('messageField/text/lineHeight', modes),
+            21,
+        )
+        const inputFontWeight = toFontWeight(
+            getVariableByName('messageField/text/fontWeight', modes),
+            '400',
+        )
+
+        const counterColor =
+            (getVariableByName('messageField/maxLength/foreground', modes) as string) ||
+            '#24262b'
+        const counterFontFamily =
+            (getVariableByName('messageField/maxLength/fontFamily', modes) as string) ||
+            'JioType Var'
+        const counterFontSize = toNumber(
+            getVariableByName('messageField/maxLength/fontSize', modes),
+            14,
+        )
+        const counterLineHeight = toNumber(
+            getVariableByName('messageField/maxLength/lineHeight', modes),
+            18,
+        )
+        const counterFontWeight = toFontWeight(
+            getVariableByName('messageField/maxLength/fontWeight', modes),
+            '400',
+        )
+
+        return {
+            wrapperGap,
+            labelColor,
+            labelFontFamily,
+            labelFontSize,
+            labelLineHeight,
+            labelFontWeight,
+            textareaBackground,
+            textareaBorderColor,
+            textareaBorderSize,
+            textareaRadius,
+            textareaPadding,
+            textareaHeight,
+            textareaGap,
+            inputTextColor,
+            inputFontFamily,
+            inputFontSize,
+            inputLineHeight,
+            inputFontWeight,
+            counterColor,
+            counterFontFamily,
+            counterFontSize,
+            counterLineHeight,
+            counterFontWeight,
+        }
+    }, [modes])
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const REQUIRED_INDICATOR_COLOR = '#d93d3d'
+
+function MessageField({
+    label,
+    placeholder,
+    value,
+    defaultValue,
+    onChangeText,
+    name,
+    maxLength,
+    showCounter,
+    rows,
+    isRequired = false,
+    isDisabled = false,
+    isInvalid = false,
+    isReadOnly = false,
+    autoFocus = false,
+    modes: propModes = EMPTY_MODES,
+    style,
+    textareaStyle,
+    inputStyle,
+    accessibilityLabel,
+    accessibilityHint,
+    testID,
+    onFocus,
+    onBlur,
+}: MessageFieldProps) {
+    const formCtx = useFormContext()
+    const formError =
+        name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined
+    const resolvedIsInvalid = isInvalid || Boolean(formError)
+
+    const isControlled = value !== undefined
+    const [uncontrolledValue, setUncontrolledValue] = useState<string>(
+        defaultValue ?? '',
+    )
+    const currentValue = isControlled ? (value as string) : uncontrolledValue
+
+    const [isFocused, setIsFocused] = useState(false)
+    const interactive = !isDisabled && !isReadOnly
+
+    // Ref to the native textarea so tapping anywhere in the (padded) textarea
+    // container focuses it on the FIRST tap, fixing the Android "two taps to
+    // open the keyboard" issue.
+    const inputRef = useRef<RNTextInput>(null)
+    const focusInput = useCallback(() => {
+        if (!interactive) return
+        inputRef.current?.focus()
+    }, [interactive])
+
+    const { modes: globalModes } = useTokens()
+    const baseModes = useMemo(
+        () => ({ ...globalModes, ...propModes }),
+        [globalModes, propModes],
+    )
+
+    // FormField States cascade — error > disabled > read only > active (focus)
+    // > idle. Always derived from props and locked into the modes object so
+    // consumers cannot pass `modes={{ 'FormField States': ... }}` and get out
+    // of sync with the component's actual interactive behaviour.
+    const stateMode: MessageFieldState = useMemo(() => {
+        if (resolvedIsInvalid) return 'Error'
+        if (isDisabled) return 'Disabled'
+        if (isReadOnly) return 'Read Only'
+        if (isFocused) return 'Active'
+        return 'Idle'
+    }, [resolvedIsInvalid, isDisabled, isReadOnly, isFocused])
+
+    const modes = useMemo(
+        () => ({
+            ...baseModes,
+            'FormField States': stateMode,
+        }),
+        [baseModes, stateMode],
+    )
+
+    const tokens = useMessageFieldTokens(modes)
+
+    // ---------- Event handlers ---------------------------------------------
+    const handleFocus = useCallback<NonNullable<RNTextInputProps['onFocus']>>(
+        (e) => {
+            setIsFocused(true)
+            onFocus?.(e)
+        },
+        [onFocus],
+    )
+
+    const handleBlur = useCallback<NonNullable<RNTextInputProps['onBlur']>>(
+        (e) => {
+            setIsFocused(false)
+            onBlur?.(e)
+        },
+        [onBlur],
+    )
+
+    const handleChangeText = useCallback(
+        (next: string) => {
+            if (!isControlled) {
+                setUncontrolledValue(next)
+            }
+            onChangeText?.(next)
+            if (name && formCtx) formCtx.onFieldChange(name)
+        },
+        [isControlled, onChangeText, name, formCtx],
+    )
+
+    // ---------- Derived layout values --------------------------------------
+    const computedHeight = useMemo(() => {
+        if (rows && rows > 0) {
+            return Math.round(
+                rows * tokens.inputLineHeight + 2 * tokens.textareaPadding,
+            )
+        }
+        return tokens.textareaHeight
+    }, [rows, tokens.inputLineHeight, tokens.textareaPadding, tokens.textareaHeight])
+
+    const shouldShowCounter = useMemo(() => {
+        if (showCounter === false) return false
+        if (showCounter === true) return true
+        return typeof maxLength === 'number'
+    }, [showCounter, maxLength])
+
+    const counterText = useMemo(() => {
+        const count = currentValue.length
+        if (typeof maxLength === 'number') return `${count}/${maxLength}`
+        return `${count}`
+    }, [currentValue.length, maxLength])
+
+    // ---------- Styles -----------------------------------------------------
+    const wrapperStyle: ViewStyle = useMemo(
+        () => ({
+            gap: tokens.wrapperGap,
+            width: '100%',
+        }),
+        [tokens.wrapperGap],
+    )
+
+    const labelRowStyle: ViewStyle = useMemo(
+        () => ({ flexDirection: 'row', alignItems: 'baseline' }),
+        [],
+    )
+
+    const labelTextStyle: TextStyle = useMemo(
+        () => ({
+            color: tokens.labelColor,
+            fontFamily: tokens.labelFontFamily,
+            fontSize: tokens.labelFontSize,
+            lineHeight: tokens.labelLineHeight,
+            fontWeight: tokens.labelFontWeight,
+        }),
+        [
+            tokens.labelColor,
+            tokens.labelFontFamily,
+            tokens.labelFontSize,
+            tokens.labelLineHeight,
+            tokens.labelFontWeight,
+        ],
+    )
+
+    const requiredIndicatorStyle: TextStyle = useMemo(
+        () => ({ ...labelTextStyle, color: REQUIRED_INDICATOR_COLOR }),
+        [labelTextStyle],
+    )
+
+    const textareaContainerStyle: ViewStyle = useMemo(
+        () => ({
+            backgroundColor: tokens.textareaBackground,
+            borderColor: tokens.textareaBorderColor,
+            borderWidth: tokens.textareaBorderSize,
+            borderStyle: 'solid',
+            borderRadius: tokens.textareaRadius,
+            padding: tokens.textareaPadding,
+            height: computedHeight,
+            width: '100%',
+            overflow: 'hidden',
+            // The gap token is for content within the textarea (icons, etc.);
+            // we keep it so downstream layouts that pass children align.
+            gap: tokens.textareaGap,
+        }),
+        [
+            tokens.textareaBackground,
+            tokens.textareaBorderColor,
+            tokens.textareaBorderSize,
+            tokens.textareaRadius,
+            tokens.textareaPadding,
+            computedHeight,
+            tokens.textareaGap,
+        ],
+    )
+
+    const inputTextStyle: TextStyle = useMemo(
+        () => ({
+            flex: 1,
+            color: tokens.inputTextColor,
+            fontFamily: tokens.inputFontFamily,
+            fontSize: tokens.inputFontSize,
+            lineHeight: tokens.inputLineHeight,
+            fontWeight: tokens.inputFontWeight,
+            padding: 0,
+            margin: 0,
+            textAlignVertical: 'top',
+            // Disable the default web focus ring; the textarea border
+            // already encodes focus state.
+            outlineStyle: 'none' as TextStyle['outlineStyle'],
+            outlineWidth: 0,
+            outlineColor: 'transparent',
+        }),
+        [
+            tokens.inputTextColor,
+            tokens.inputFontFamily,
+            tokens.inputFontSize,
+            tokens.inputLineHeight,
+            tokens.inputFontWeight,
+        ],
+    )
+
+    const counterTextStyle: TextStyle = useMemo(
+        () => ({
+            color: tokens.counterColor,
+            fontFamily: tokens.counterFontFamily,
+            fontSize: tokens.counterFontSize,
+            lineHeight: tokens.counterLineHeight,
+            fontWeight: tokens.counterFontWeight,
+            textAlign: 'right',
+            width: '100%',
+        }),
+        [
+            tokens.counterColor,
+            tokens.counterFontFamily,
+            tokens.counterFontSize,
+            tokens.counterLineHeight,
+            tokens.counterFontWeight,
+        ],
+    )
+
+    const resolvedA11yLabel =
+        accessibilityLabel || label || placeholder || 'Message field'
+
+    return (
+        <View
+            style={[wrapperStyle, style]}
+            pointerEvents={isDisabled ? 'none' : 'auto'}
+            testID={testID}
+            accessible={false}
+        >
+            {label != null && label !== '' && (
+                <View style={labelRowStyle}>
+                    <Text style={labelTextStyle}>{label}</Text>
+                    {isRequired && <Text style={requiredIndicatorStyle}> *</Text>}
+                </View>
+            )}
+
+            <Pressable
+                style={[textareaContainerStyle, textareaStyle]}
+                onPress={focusInput}
+                accessible={false}
+            >
+                <RNTextInput
+                    ref={inputRef}
+                    multiline
+                    value={currentValue}
+                    onChangeText={handleChangeText}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    placeholder={placeholder ?? ''}
+                    placeholderTextColor={tokens.inputTextColor}
+                    editable={interactive}
+                    maxLength={maxLength}
+                    autoFocus={autoFocus}
+                    accessibilityLabel={resolvedA11yLabel}
+                    accessibilityHint={accessibilityHint}
+                    style={[inputTextStyle, inputStyle]}
+                />
+            </Pressable>
+
+            {shouldShowCounter && (
+                <Text style={counterTextStyle} accessibilityElementsHidden>
+                    {counterText}
+                </Text>
+            )}
+        </View>
+    )
+}
+
+export default MessageField

package/src/components/NavArrow/NavArrow.tsx

@@ -1,21 +1,48 @@
 import React, { useMemo } from 'react'
-import { View, type ViewStyle } from 'react-native'
+import {
+  Platform,
+  Pressable,
+  View,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
 import Svg, { Polyline } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import {
+  usePressableWebSupport,
+  type SafePressableProps,
+} from '../../utils/web-platform-utils'
 import { EMPTY_MODES } from '../../utils/react-utils'
 
 type NavArrowDirection = 'Back' | 'Forward' | 'Down'
 
-type NavArrowProps = {
+/** Minimum touch target per iOS HIG / Material accessibility guidance. */
+const MIN_TOUCH_TARGET = 44
+const IS_IOS = Platform.OS === 'ios'
+const PRESS_DELAY = IS_IOS ? 130 : 0
+
+const touchTargetStyle: ViewStyle = {
+  minWidth: MIN_TOUCH_TARGET,
+  minHeight: MIN_TOUCH_TARGET,
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
+type NavArrowProps = SafePressableProps & {
   /** Direction of the arrow: 'Back' (left chevron), 'Forward' (right chevron), or 'Down' */
   direction?: NavArrowDirection
   /** Modes used to resolve design tokens */
   modes?: Record<string, any>
   /** Optional additional container style */
-  style?: ViewStyle
+  style?: StyleProp<ViewStyle>
   /** Accessibility label for the arrow */
   accessibilityLabel?: string
-} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel'>
+  /** Called when the arrow is pressed. Expands the hit area to at least 44×44. */
+  onPress?: () => void
+  /** Disables press interaction when `onPress` is provided */
+  disabled?: boolean
+}
 
 interface NavArrowTokens {
   iconColor: string
@@ -75,6 +102,8 @@ function NavArrow({
   modes = EMPTY_MODES,
   style,
   accessibilityLabel,
+  onPress,
+  disabled = false,
   ...rest
 }: NavArrowProps) {
   const tokens = useMemo(() => resolveNavArrowTokens(modes), [modes])
@@ -91,7 +120,6 @@ function NavArrow({
       backgroundColor: tokens.backgroundColor,
       alignItems: 'center',
       justifyContent: 'center',
-      ...(style || {}),
     }
 
     const chevronW = isDown ? tokens.iconHeight : tokens.iconWidth
@@ -116,7 +144,7 @@ function NavArrow({
     }
 
     return { containerStyle, svgWidth, svgHeight, points }
-  }, [tokens, direction, style])
+  }, [tokens, direction])
 
   const defaultAccessibilityLabel =
     accessibilityLabel ||
@@ -126,23 +154,59 @@ function NavArrow({
         ? 'Go forward'
         : 'Go down')
 
+  const webProps = usePressableWebSupport({
+    restProps: rest,
+    onPress,
+    disabled,
+    accessibilityLabel: defaultAccessibilityLabel,
+  })
+
+  const chevron = (
+    <Svg
+      width={computed.svgWidth}
+      height={computed.svgHeight}
+      viewBox={`0 0 ${computed.svgWidth} ${computed.svgHeight}`}
+    >
+      <Polyline
+        points={computed.points}
+        stroke={tokens.iconColor}
+        strokeWidth={tokens.strokeWeight}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+    </Svg>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityState={{ disabled }}
+        unstable_pressDelay={PRESS_DELAY}
+        style={({ pressed }: PressableStateCallbackType) => [
+          touchTargetStyle,
+          style,
+          pressed && !disabled ? { opacity: 0.7 } : null,
+        ]}
+        {...webProps}
+      >
+        <View style={computed.containerStyle}>{chevron}</View>
+      </Pressable>
+    )
+  }
+
   return (
     <View
-      style={computed.containerStyle}
+      style={[computed.containerStyle, style]}
       accessibilityRole="image"
       accessibilityLabel={defaultAccessibilityLabel}
       {...rest}
     >
-      <Svg width={computed.svgWidth} height={computed.svgHeight} viewBox={`0 0 ${computed.svgWidth} ${computed.svgHeight}`}>
-        <Polyline
-          points={computed.points}
-          stroke={tokens.iconColor}
-          strokeWidth={tokens.strokeWeight}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          fill="none"
-        />
-      </Svg>
+      {chevron}
     </View>
   )
 }