jfs-components 0.1.30 → 0.1.33

package/src/components/HelloJioInput/HelloJioInput.tsx

@@ -0,0 +1,513 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  Platform,
+  Pressable,
+  View,
+  TextInput as RNTextInput,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type TextInputProps as RNTextInputProps,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import Icon from '../../icons/Icon'
+import {
+  EMPTY_MODES,
+  cloneChildrenWithModes,
+  mergeRefs,
+} from '../../utils/react-utils'
+import GlassFill from '../../utils/GlassFill/GlassFill'
+import IconButton from '../IconButton/IconButton'
+import type { Modes } from '../../design-tokens'
+
+const IS_WEB = Platform.OS === 'web'
+const STATE_COLLECTION = 'HelloJioInput State'
+
+/** Default IconButton modes matching the Figma send control. */
+const DEFAULT_SEND_BUTTON_MODES = Object.freeze({
+  AppearanceBrand: 'Primary',
+  'Button / Size': 'S',
+}) as Modes
+
+const toNumber = (value: unknown, fallback: number): number => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+  return fallback
+}
+
+const toFontWeight = (
+  value: unknown,
+  fallback: TextStyle['fontWeight']
+): TextStyle['fontWeight'] => {
+  if (typeof value === 'number') return String(value) as TextStyle['fontWeight']
+  if (typeof value === 'string') return value as TextStyle['fontWeight']
+  return fallback
+}
+
+type VisualState = 'Idle' | 'Active' | 'IdleJioPlus'
+
+/**
+ * Fallback values from the Figma `HelloJioInput` component when local token
+ * JSON has not been synced yet. Mode-driven `getVariableByName` wins when
+ * tokens resolve.
+ */
+const STATE_FALLBACKS: Record<
+  VisualState,
+  {
+    background: string
+    borderColor: string
+    labelColor: string
+    iconColor: string
+  }
+> = {
+  Idle: {
+    background: '#f5f5f5',
+    borderColor: '#f5f5f5',
+    labelColor: '#545961',
+    iconColor: '#545961',
+  },
+  Active: {
+    background: '#ffffff',
+    borderColor: '#b5b5b5',
+    labelColor: '#24262b',
+    iconColor: '#24262b',
+  },
+  IdleJioPlus: {
+    background: '#f5f5f5',
+    borderColor: '#f5f5f5',
+    labelColor: '#545961',
+    iconColor: '#545961',
+  },
+}
+
+export type HelloJioInputProps = {
+  /** Placeholder shown when empty. Defaults to `"Ask me anything"`. */
+  placeholder?: string
+  /** Controlled value. Pair with `onChangeText`. */
+  value?: string
+  /** Uncontrolled initial value. Ignored when `value` is provided. */
+  defaultValue?: string
+  /** Called whenever the text changes. */
+  onChangeText?: (text: string) => void
+  /**
+   * Called when the user submits — either via the send button or the keyboard
+   * return key. Receives the current text. This is the primary action hook.
+   */
+  onSubmit?: (text: string) => void
+  /**
+   * Leading icon name from the registry. Defaults to `"ic_hellojio"`.
+   * Ignored when `leading` is provided.
+   */
+  leadingIconName?: string
+  /**
+   * Slot replacing the default leading icon (Figma Slot "start"). Receives
+   * `modes` recursively.
+   */
+  leading?: React.ReactNode
+  /**
+   * Slot replacing the default send `IconButton` (Figma Slot "end").
+   * Pass `null` to hide the trailing control entirely.
+   */
+  trailing?: React.ReactNode | null
+  /**
+   * Icon name for the default send button. Defaults to `"ic_send_message"`.
+   * Ignored when `trailing` is provided.
+   */
+  sendIconName?: string
+  /**
+   * When `true`, renders the IdleJioPlus glass surface while unfocused.
+   * Focus still switches to the Active (solid white + border) state.
+   */
+  jioPlus?: boolean
+  /** Disables typing and the send button. */
+  disabled?: boolean
+  /** Design token modes. Visual Idle/Active/IdleJioPlus is derived from focus + `jioPlus`. */
+  modes?: Modes
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Text input style override. */
+  inputStyle?: StyleProp<TextStyle>
+  accessibilityLabel?: string
+  accessibilityHint?: string
+  testID?: string
+  onFocus?: RNTextInputProps['onFocus']
+  onBlur?: RNTextInputProps['onBlur']
+} & Omit<
+  RNTextInputProps,
+  | 'style'
+  | 'value'
+  | 'defaultValue'
+  | 'onChangeText'
+  | 'onFocus'
+  | 'onBlur'
+  | 'placeholder'
+  | 'editable'
+  | 'onSubmitEditing'
+>
+
+interface HelloJioInputTokens {
+  containerStyle: ViewStyle
+  inputStyle: TextStyle
+  iconColor: string
+  iconSize: number
+  blurIntensity: number
+  useGlass: boolean
+}
+
+function resolveHelloJioInputTokens(
+  modes: Modes,
+  visualState: VisualState
+): HelloJioInputTokens {
+  const fallback = STATE_FALLBACKS[visualState]
+
+  const background =
+    (getVariableByName('helloJioInput/background', modes) as string | null) ??
+    fallback.background
+  const borderColor =
+    (getVariableByName('helloJioInput/border/color', modes) as string | null) ??
+    fallback.borderColor
+  const strokeWidth = toNumber(
+    getVariableByName('helloJioInput/strokeWidth', modes),
+    1
+  )
+  const gap = toNumber(getVariableByName('helloJioInput/gap', modes), 8)
+  const paddingLeft = toNumber(
+    getVariableByName('helloJioInput/padding/left', modes),
+    12
+  )
+  const paddingRight = toNumber(
+    getVariableByName('helloJioInput/padding/right', modes),
+    4
+  )
+  const paddingTop = toNumber(
+    getVariableByName('helloJioInput/padding/top', modes),
+    4
+  )
+  const paddingBottom = toNumber(
+    getVariableByName('helloJioInput/padding/bottom', modes),
+    4
+  )
+  const height = toNumber(getVariableByName('helloJioInput/height', modes), 36)
+  const radiusRaw = toNumber(
+    getVariableByName('helloJioInput/radius', modes),
+    99999
+  )
+  const borderRadius = radiusRaw >= 9999 ? 99999 : radiusRaw
+
+  const labelColor =
+    (getVariableByName('helloJioInput/label/color', modes) as string | null) ??
+    fallback.labelColor
+  const fontSize = toNumber(
+    getVariableByName('helloJioInput/fontSize', modes),
+    14
+  )
+  const lineHeight = toNumber(
+    getVariableByName('helloJioInput/lineHeight', modes),
+    18
+  )
+  const fontFamily =
+    (getVariableByName('helloJioInput/fontFamily', modes) as string | null) ??
+    'JioType Var'
+  const fontWeight = toFontWeight(
+    getVariableByName('helloJioInput/fontWeight', modes),
+    '400'
+  )
+
+  const iconColor =
+    (getVariableByName('helloJioInput/icon/color', modes) as string | null) ??
+    fallback.iconColor
+  const iconSize = toNumber(
+    getVariableByName('textInput/icon/size', modes) ??
+      getVariableByName('helloJioInput/icon/size', modes),
+    18
+  )
+
+  const blurMinimal = toNumber(getVariableByName('blur/minimal', modes), 29)
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(blurMinimal)))
+  const useGlass = visualState === 'IdleJioPlus'
+
+  return {
+    containerStyle: {
+      position: 'relative',
+      flexDirection: 'row',
+      alignItems: 'center',
+      // Glass keeps the container transparent so GlassFill shows through.
+      backgroundColor: useGlass ? 'transparent' : background,
+      borderColor,
+      borderWidth: strokeWidth,
+      borderStyle: 'solid',
+      borderRadius,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      paddingBottom,
+      gap,
+      height,
+      overflow: 'hidden',
+      width: '100%',
+    },
+    inputStyle: {
+      flex: 1,
+      color: labelColor,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      // iOS single-line TextInput + explicit lineHeight sits below center —
+      // same quirk TextInput works around. Omit on iOS.
+      ...(Platform.OS === 'ios' ? null : { lineHeight }),
+      padding: 0,
+      margin: 0,
+      minHeight: lineHeight,
+      outlineStyle: 'none' as any,
+      outlineWidth: 0,
+      outlineColor: 'transparent',
+    },
+    iconColor,
+    iconSize,
+    blurIntensity,
+    useGlass,
+  }
+}
+
+/**
+ * `HelloJioInput` is the pill-shaped HelloJio prompt field: leading brand
+ * icon, single-line text input, and a gold send `IconButton` on the right.
+ *
+ * Visual state is derived automatically:
+ *  - **Idle** — gray fill, gray label (default)
+ *  - **Active** — white fill + border while focused
+ *  - **IdleJioPlus** — frosted glass when `jioPlus` and unfocused
+ *
+ * @component
+ */
+const HelloJioInput = forwardRef<RNTextInput, HelloJioInputProps>(
+  function HelloJioInput(
+    {
+      placeholder = 'Ask me anything',
+      value,
+      defaultValue = '',
+      onChangeText,
+      onSubmit,
+      leadingIconName = 'ic_hellojio',
+      leading,
+      trailing,
+      sendIconName = 'ic_send_message',
+      jioPlus = false,
+      disabled = false,
+      modes: propModes = EMPTY_MODES,
+      style,
+      inputStyle,
+      accessibilityLabel,
+      accessibilityHint,
+      testID,
+      onFocus,
+      onBlur,
+      returnKeyType = 'send',
+      ...rest
+    },
+    ref
+  ) {
+    const { modes: globalModes } = useTokens()
+    const inputRef = useRef<RNTextInput>(null)
+    const [isFocused, setIsFocused] = useState(false)
+    const [isHovered, setIsHovered] = useState(false)
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue)
+
+    const isControlled = value !== undefined
+    const currentValue = isControlled ? value : uncontrolledValue
+
+    const visualState: VisualState = isFocused
+      ? 'Active'
+      : jioPlus
+        ? 'IdleJioPlus'
+        : 'Idle'
+
+    const modes = useMemo(
+      () => ({
+        ...globalModes,
+        ...propModes,
+        [STATE_COLLECTION]: visualState,
+      }),
+      [globalModes, propModes, visualState]
+    )
+
+    const sendButtonModes = useMemo(
+      () => ({ ...DEFAULT_SEND_BUTTON_MODES, ...modes }),
+      [modes]
+    )
+
+    const tokens = useMemo(
+      () => resolveHelloJioInputTokens(modes, visualState),
+      [modes, visualState]
+    )
+
+    const handleChangeText = useCallback(
+      (text: string) => {
+        if (!isControlled) setUncontrolledValue(text)
+        onChangeText?.(text)
+      },
+      [isControlled, onChangeText]
+    )
+
+    const handleSubmit = useCallback(() => {
+      if (disabled) return
+      onSubmit?.(currentValue)
+    }, [disabled, onSubmit, currentValue])
+
+    const handleFocus = useCallback(
+      (e: any) => {
+        setIsFocused(true)
+        onFocus?.(e)
+      },
+      [onFocus]
+    )
+
+    const handleBlur = useCallback(
+      (e: any) => {
+        setIsFocused(false)
+        onBlur?.(e)
+      },
+      [onBlur]
+    )
+
+    const leadingElement =
+      leading ??
+      (leadingIconName ? (
+        <Icon
+          name={leadingIconName}
+          size={tokens.iconSize}
+          color={tokens.iconColor}
+        />
+      ) : null)
+
+    const processedLeading = leadingElement
+      ? cloneChildrenWithModes(React.Children.toArray(leadingElement), modes)
+      : null
+
+    const defaultTrailing = (
+      <IconButton
+        iconName={sendIconName}
+        modes={sendButtonModes}
+        onPress={handleSubmit}
+        disabled={disabled}
+        accessibilityLabel="Send"
+      />
+    )
+
+    const trailingElement =
+      trailing === undefined
+        ? defaultTrailing
+        : trailing === null
+          ? null
+          : trailing
+
+    const processedTrailing = trailingElement
+      ? cloneChildrenWithModes(React.Children.toArray(trailingElement), modes)
+      : null
+
+    const a11yLabel =
+      accessibilityLabel ?? (placeholder || 'HelloJio input')
+
+    const hoverStyle: ViewStyle =
+      isHovered && !disabled && !isFocused ? { opacity: 0.95 } : {}
+
+    const containerStyleArray: StyleProp<ViewStyle> = [
+      tokens.containerStyle,
+      hoverStyle,
+      disabled ? { opacity: 0.5 } : null,
+      style,
+    ]
+
+    const glassOverlay =
+      (getVariableByName('helloJioInput/background', modes) as string | null) ??
+      STATE_FALLBACKS.IdleJioPlus.background
+
+    const inner = (
+      <>
+        {tokens.useGlass ? (
+          <GlassFill
+            tint="light"
+            intensity={tokens.blurIntensity}
+            overlayColor={glassOverlay}
+            androidTintWash={false}
+          />
+        ) : null}
+        {processedLeading ? (
+          <View
+            accessibilityElementsHidden
+            importantForAccessibility="no"
+            style={SLOT_CENTER}
+          >
+            {processedLeading}
+          </View>
+        ) : null}
+        <RNTextInput
+          ref={mergeRefs(inputRef, ref)}
+          accessibilityLabel={a11yLabel}
+          accessibilityHint={accessibilityHint}
+          placeholder={isFocused ? '' : placeholder}
+          placeholderTextColor={tokens.inputStyle.color}
+          value={currentValue}
+          onChangeText={handleChangeText}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onSubmitEditing={handleSubmit}
+          returnKeyType={returnKeyType}
+          editable={!disabled}
+          style={[tokens.inputStyle, inputStyle]}
+          testID={testID}
+          {...rest}
+        />
+        {processedTrailing ? (
+          <View
+            // Keep the send button in the a11y tree — it has its own label.
+            style={SLOT_CENTER}
+          >
+            {processedTrailing}
+          </View>
+        ) : null}
+      </>
+    )
+
+    // Same Android focus rule as TextInput: never wrap native TextInput in
+    // Pressable on native (steals the first tap). Web keeps Pressable for
+    // hover + click-anywhere-to-focus.
+    if (IS_WEB) {
+      return (
+        <Pressable
+          style={containerStyleArray}
+          onHoverIn={() => setIsHovered(true)}
+          onHoverOut={() => setIsHovered(false)}
+          onPress={() => {
+            if (!disabled) inputRef.current?.focus()
+          }}
+          accessible={false}
+          disabled={disabled}
+        >
+          {inner}
+        </Pressable>
+      )
+    }
+
+    return <View style={containerStyleArray}>{inner}</View>
+  }
+)
+
+const SLOT_CENTER: ViewStyle = {
+  justifyContent: 'center',
+  alignItems: 'center',
+}
+
+export default React.memo(HelloJioInput)