jfs-components 0.0.40 → 0.0.43

package/src/components/FormField/FormField.tsx

@@ -0,0 +1,265 @@
+import React, { useState, useMemo, useCallback } from 'react'
+import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import TextInput from '../TextInput/TextInput'
+import SupportText from '../SupportText/SupportText'
+import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
+
+export type FormFieldType = 'text' | 'password' | 'email' | 'search'
+
+export type FormFieldProps = {
+  label?: string | undefined;
+  placeholder?: string | undefined;
+  value?: string | undefined;
+  onChangeText?: ((text: string) => void) | undefined;
+  type?: FormFieldType | undefined;
+
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  leadingIconName?: string | undefined;
+
+  isRequired?: boolean | undefined;
+  isDisabled?: boolean | undefined;
+  isInvalid?: boolean | undefined;
+
+  supportText?: string | undefined;
+  errorMessage?: string | undefined;
+
+  modes?: Record<string, any> | undefined;
+  style?: StyleProp<ViewStyle>;
+
+  onFocus?: ((e: any) => void) | undefined;
+  onBlur?: ((e: any) => void) | undefined;
+  accessibilityLabel?: string | undefined;
+  accessibilityHint?: string | undefined;
+};
+
+function useFormField(props: FormFieldProps) {
+  const {
+    type = 'text',
+    isDisabled = false,
+    isInvalid = false,
+    supportText,
+    errorMessage,
+    modes: propModes = {},
+    onFocus,
+    onBlur,
+  } = props
+
+  const { modes: globalModes } = useTokens()
+  const baseModes = useMemo(
+    () => ({ ...globalModes, ...propModes }),
+    [globalModes, propModes],
+  )
+
+  const [isFocused, setIsFocused] = useState(false)
+
+  // Merge FormField States collection based on focus
+  const modes = useMemo(() => ({
+    ...baseModes,
+    'FormField States': isFocused ? 'Active' : 'Idle',
+  }), [baseModes, isFocused])
+
+  // -- Label tokens (from "FormField / Output" collection) --
+  const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10'
+  const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var'
+  const labelFontSize = parseInt(getVariableByName('formField/label/fontSize', modes), 10) || 14
+  const labelLineHeight = parseInt(getVariableByName('formField/label/lineHeight', modes), 10) || 17
+  const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500'
+  const gap = parseInt(getVariableByName('formField/gap', modes), 10) || 8
+
+  // -- Input tokens (from "FormField / Output" + "FormField States" collections) --
+  const inputPaddingH = parseInt(getVariableByName('formField/input/padding/horizontal', modes), 10) || 12
+  const inputGap = parseInt(getVariableByName('formField/input/gap', modes), 10) || 8
+  const inputRadius = parseInt(getVariableByName('formField/input/radius', modes), 10) || 8
+  const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff'
+  const inputFontSize = parseInt(getVariableByName('formField/input/label/fontSize', modes), 10) || 16
+  const inputLineHeight = parseInt(getVariableByName('formField/input/label/lineHeight', modes), 10) || 45
+  const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var'
+  const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400'
+  const inputTextColor = getVariableByName('states/formField/input/label/color', modes)
+    || getVariableByName('formField/input/label/color', modes)
+    || '#24262b'
+  const inputBorderColor = getVariableByName('states/formField/input/border/color', modes)
+    || getVariableByName('formField/input/border/color', modes)
+    || '#b5b6b7'
+  const inputBorderSize = parseInt(getVariableByName('formField/input/border/size', modes), 10) || 1
+
+  // -- Styles --
+  const labelStyle: TextStyle = useMemo(() => ({
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight as TextStyle['fontWeight'],
+  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight])
+
+  const wrapperStyle: ViewStyle = useMemo(() => ({
+    gap,
+    opacity: isDisabled ? 0.5 : 1,
+  }), [gap, isDisabled])
+
+  const requiredIndicatorStyle: TextStyle = useMemo(() => ({
+    color: '#d93d3d',
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight as TextStyle['fontWeight'],
+  }), [labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight])
+
+  // Style overrides for the input row, sourced from formField/input/* tokens
+  const inputContainerStyle: ViewStyle = useMemo(() => ({
+    backgroundColor: inputBackground,
+    borderColor: inputBorderColor,
+    borderWidth: inputBorderSize,
+    borderRadius: inputRadius,
+    paddingHorizontal: inputPaddingH,
+    gap: inputGap,
+  }), [inputBackground, inputBorderColor, inputBorderSize, inputRadius, inputPaddingH, inputGap])
+
+  const inputTextStyle: TextStyle = useMemo(() => ({
+    color: inputTextColor,
+    fontSize: inputFontSize,
+    lineHeight: inputLineHeight,
+    fontFamily: inputFontFamily,
+    fontWeight: inputFontWeight as TextStyle['fontWeight'],
+  }), [inputTextColor, inputFontSize, inputLineHeight, inputFontFamily, inputFontWeight])
+
+  // -- Support text logic --
+  const supportStatus: SupportTextStatus = isInvalid ? 'Error' : 'Neutral'
+  const supportLabel = isInvalid && errorMessage ? errorMessage : supportText
+
+  // -- Input type derived props --
+  const secureTextEntry = type === 'password'
+  const keyboardType = type === 'email' ? 'email-address' as const : 'default' as const
+  const autoCapitalize = (type === 'email' || type === 'password') ? 'none' as const : 'sentences' as const
+
+  // -- Event handlers --
+  const handleFocus = useCallback((e: any) => {
+    setIsFocused(true)
+    onFocus?.(e)
+  }, [onFocus])
+
+  const handleBlur = useCallback((e: any) => {
+    setIsFocused(false)
+    onBlur?.(e)
+  }, [onBlur])
+
+  return {
+    modes,
+    labelStyle,
+    wrapperStyle,
+    requiredIndicatorStyle,
+    inputContainerStyle,
+    inputTextStyle,
+    supportStatus,
+    supportLabel,
+    secureTextEntry,
+    keyboardType,
+    autoCapitalize,
+    handleFocus,
+    handleBlur,
+  }
+}
+
+function FormField({
+  label,
+  placeholder,
+  value = '',
+  onChangeText,
+  type = 'text',
+  leading,
+  trailing,
+  leadingIconName,
+  isRequired = false,
+  isDisabled = false,
+  isInvalid = false,
+  supportText,
+  errorMessage,
+  modes = {},
+  style,
+  onFocus,
+  onBlur,
+  accessibilityLabel,
+  accessibilityHint,
+}: FormFieldProps) {
+  const {
+    modes: resolvedModes,
+    labelStyle,
+    wrapperStyle,
+    requiredIndicatorStyle,
+    inputContainerStyle,
+    inputTextStyle,
+    supportStatus,
+    supportLabel,
+    secureTextEntry,
+    keyboardType,
+    autoCapitalize,
+    handleFocus,
+    handleBlur,
+  } = useFormField({
+    type,
+    isDisabled,
+    isInvalid,
+    supportText,
+    errorMessage,
+    modes,
+    onFocus,
+    onBlur,
+  })
+
+  const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field'
+
+  return (
+    <View
+      style={[wrapperStyle, style]}
+      pointerEvents={isDisabled ? 'none' : 'auto'}
+      accessible={true}
+      accessibilityRole="none"
+      accessibilityLabel={resolvedA11yLabel}
+      accessibilityState={{
+        disabled: isDisabled,
+      }}
+    >
+      {label != null && (
+        <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
+          <Text style={labelStyle}>{label}</Text>
+          {isRequired && (
+            <Text style={requiredIndicatorStyle}> *</Text>
+          )}
+        </View>
+      )}
+
+      <TextInput
+        placeholder={placeholder || ''}
+        value={value}
+        {...(onChangeText ? { onChangeText } : {})}
+        leading={leading}
+        trailing={trailing}
+        leadingIconName={leadingIconName || 'ic_search'}
+        modes={resolvedModes}
+        style={inputContainerStyle}
+        inputStyle={inputTextStyle}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        secureTextEntry={secureTextEntry}
+        keyboardType={keyboardType}
+        autoCapitalize={autoCapitalize}
+        editable={!isDisabled}
+        accessibilityLabel={resolvedA11yLabel}
+        accessibilityHint={accessibilityHint || ''}
+      />
+
+      {supportLabel != null && (
+        <SupportText
+          label={supportLabel}
+          status={supportStatus}
+          modes={resolvedModes}
+        />
+      )}
+    </View>
+  )
+}
+
+export default FormField

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef } from 'react'
+import { StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native'
+import Animated, { FadeIn, FadeOut, SlideInDown, SlideInUp } from 'react-native-reanimated'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { closeToast, type ToastPlacement } from './useToast'
+
+export interface ToastProps {
+  id: string
+  title: string
+  timeout?: number | undefined
+  onClose?: (() => void) | undefined
+  modes?: Record<string, any> | undefined
+  placement?: ToastPlacement | undefined
+  style?: StyleProp<ViewStyle> | undefined
+}
+
+const ANIMATION_DURATION = 250
+
+function Toast({
+  id,
+  title,
+  timeout = 4000,
+  onClose,
+  modes = {},
+  placement = 'bottom',
+  style,
+}: ToastProps) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    if (timeout <= 0) return
+    timerRef.current = setTimeout(() => closeToast(id), timeout)
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [id, timeout])
+
+  const backgroundColor = getVariableByName('toast/background', modes) || '#303338'
+  const foreground = getVariableByName('toast/foreground', modes) || '#ffffff'
+  const fontSize = getVariableByName('toast/fontSize', modes) || 14
+  const fontFamily = getVariableByName('toast/fontFamily', modes) || undefined
+  const fontWeight = getVariableByName('toast/fontWeight', modes) || '500'
+  const lineHeight = getVariableByName('toast/lineHeight', modes) || 18
+  const radius = getVariableByName('toast/radius', modes) || 14
+  const paddingHorizontal = getVariableByName('toast/padding/horizontal', modes) || 16
+  const paddingVertical = getVariableByName('toast/padding/vertical', modes) || 14
+  const gap = getVariableByName('toast/gap', modes) || 8
+  const borderWidth = getVariableByName('toast/border/size', modes) || 1
+  const borderColor = getVariableByName('toast/border/color', modes) || 'rgba(255,255,255,0.1)'
+  const shadowBlurPrimary = getVariableByName('toast/shadow/primary/blur', modes) || 48
+  const shadowOffsetYPrimary = getVariableByName('toast/shadow/primary/offsetY', modes) || 16
+  const shadowColorPrimary = getVariableByName('toast/shadow/primary/color', modes) || 'rgba(13,13,15,0.16)'
+
+  const enterAnimation = placement === 'top'
+    ? SlideInUp.duration(ANIMATION_DURATION)
+    : SlideInDown.duration(ANIMATION_DURATION)
+
+  const containerStyle: ViewStyle = {
+    backgroundColor,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    borderWidth,
+    borderColor,
+    shadowColor: shadowColorPrimary,
+    shadowOffset: { width: 0, height: shadowOffsetYPrimary },
+    shadowOpacity: 1,
+    shadowRadius: shadowBlurPrimary / 2,
+    elevation: 8,
+  }
+
+  const textStyle = {
+    color: foreground,
+    fontSize,
+    fontFamily,
+    fontWeight: String(fontWeight) as any,
+    lineHeight,
+  }
+
+  return (
+    <Animated.View
+      entering={enterAnimation}
+      exiting={FadeOut.duration(ANIMATION_DURATION)}
+      style={[styles.toast, containerStyle, style]}
+      accessibilityRole="alert"
+      accessibilityLiveRegion="assertive"
+    >
+      <Text style={textStyle} numberOfLines={2}>
+        {title}
+      </Text>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  toast: {
+    alignSelf: 'center',
+    maxWidth: '90%',
+    minWidth: 200,
+    overflow: 'hidden',
+  },
+})
+
+export default Toast

package/src/components/Toast/ToastProvider.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useToast, type ToastPlacement } from './useToast'
+import Toast from './Toast'
+
+export interface ToastProviderProps {
+  children: React.ReactNode
+  maxVisibleToasts?: number
+  placement?: ToastPlacement
+  modes?: Record<string, any>
+}
+
+function ToastProvider({
+  children,
+  maxVisibleToasts = 3,
+  placement = 'bottom',
+  modes,
+}: ToastProviderProps) {
+  const { toasts } = useToast()
+  const insets = useSafeAreaInsets()
+
+  const visibleToasts = useMemo(
+    () => toasts.slice(-maxVisibleToasts),
+    [toasts, maxVisibleToasts],
+  )
+
+  const regionStyle = useMemo(
+    () => [
+      styles.region,
+      placement === 'top'
+        ? { top: insets.top + 8 }
+        : { bottom: insets.bottom + 8 },
+    ],
+    [placement, insets.top, insets.bottom],
+  )
+
+  return (
+    <View style={styles.container}>
+      {children}
+      {visibleToasts.length > 0 && (
+        <View style={regionStyle} pointerEvents="box-none">
+          {visibleToasts.map((entry) => (
+            <Toast
+              key={entry.id}
+              id={entry.id}
+              title={entry.title}
+              timeout={entry.timeout}
+              onClose={entry.onClose}
+              modes={entry.modes ?? modes}
+              placement={placement}
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  region: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    gap: 8,
+    zIndex: 9999,
+    pointerEvents: 'box-none',
+  },
+})
+
+export default ToastProvider

package/src/components/Toast/useToast.ts

@@ -0,0 +1,80 @@
+import { useCallback, useSyncExternalStore } from 'react'
+
+export type ToastPlacement = 'top' | 'bottom'
+
+export interface ToastOptions {
+  title: string
+  timeout?: number
+  onClose?: () => void
+  modes?: Record<string, any>
+}
+
+export interface ToastEntry {
+  id: string
+  title: string
+  timeout: number
+  onClose?: (() => void) | undefined
+  modes?: Record<string, any> | undefined
+}
+
+type Listener = () => void
+
+let idCounter = 0
+let toasts: ToastEntry[] = []
+const listeners = new Set<Listener>()
+
+function emit() {
+  for (const listener of listeners) {
+    listener()
+  }
+}
+
+function getSnapshot(): ToastEntry[] {
+  return toasts
+}
+
+function subscribe(listener: Listener): () => void {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+export function addToast(options: ToastOptions): string {
+  const id = `toast-${++idCounter}`
+  const entry: ToastEntry = {
+    id,
+    title: options.title,
+    timeout: options.timeout ?? 4000,
+    onClose: options.onClose,
+    modes: options.modes,
+  }
+  toasts = [...toasts, entry]
+  emit()
+  return id
+}
+
+export function closeToast(id: string): void {
+  const entry = toasts.find((t) => t.id === id)
+  toasts = toasts.filter((t) => t.id !== id)
+  emit()
+  entry?.onClose?.()
+}
+
+export function closeAll(): void {
+  const prev = toasts
+  toasts = []
+  emit()
+  prev.forEach((t) => t.onClose?.())
+}
+
+export function useToast() {
+  const queue = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+
+  return {
+    toasts: queue,
+    addToast: useCallback(addToast, []),
+    closeToast: useCallback(closeToast, []),
+    closeAll: useCallback(closeAll, []),
+  }
+}

package/src/components/index.ts

@@ -13,6 +13,9 @@ export { default as Divider, type DividerProps, type DividerDirection } from './
 export { default as Drawer } from './Drawer/Drawer';
 export { default as CtaCard } from './CtaCard/CtaCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
+export { default as Form, type FormProps } from './Form/Form';
+export { useFormContext } from './Form/Form';
+export { default as FormField, type FormFieldProps } from './FormField/FormField';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
@@ -48,4 +51,6 @@ export { default as InputSearch, type InputSearchProps } from './InputSearch/Inp
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
 export { default as SupportTextIcon, type SupportTextIconProps } from './SupportText/SupportTextIcon';
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
-
+export { default as Toast, type ToastProps } from './Toast/Toast';
+export { default as ToastProvider, type ToastProviderProps } from './Toast/ToastProvider';
+export { useToast, addToast, closeToast, closeAll, type ToastOptions, type ToastEntry, type ToastPlacement } from './Toast/useToast';