create-react-native-starter-kit 0.0.0-stage → 1.0.1

package/template/src/components/shared/form-input/variants/DropdownVariant.tsx

@@ -0,0 +1,221 @@
+import { useAppTheme } from '@/context/ThemeContext';
+import { DropdownItem, DropdownVariantProps } from '../type';
+import { ActivityIndicator, Animated, StyleSheet, View } from 'react-native';
+import { Dropdown } from 'react-native-element-dropdown';
+import Icon from '../../Icon';
+import { normalize } from '@/utils/normalize';
+import { isHindiLanguage } from '@/utils/hindiText';
+import React, { memo, useCallback, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FORM_FIELD, formFieldText } from '../formFieldStyles';
+
+type RHFDropdownField = {
+  value: string;
+  onChange: (value: string) => void;
+};
+type DropdownFormMode = {
+  mode: 'form';
+  field: RHFDropdownField;
+};
+
+type DropdownStandaloneMode = {
+  mode: 'standalone';
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export type DropdownVisualProps =
+  | (DropdownFormMode & DropdownVariantProps)
+  | (DropdownStandaloneMode & DropdownVariantProps);
+
+interface AnimatedArrowProps {
+  visible?: boolean;
+}
+
+const AnimatedDropdownArrow = memo(
+  ({ visible = false }: AnimatedArrowProps) => {
+    const anim = useRef(new Animated.Value(visible ? 1 : 0)).current;
+
+    useEffect(() => {
+      Animated.spring(anim, {
+        toValue: visible ? 1 : 0,
+        friction: 7,
+        tension: 80,
+        useNativeDriver: true,
+      }).start();
+    }, [visible, anim]);
+
+    const scale = anim.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [1, 0.75, 1],
+    });
+
+    const opacity = anim.interpolate({
+      inputRange: [0, 0.5, 1],
+      outputRange: [1, 0.7, 1],
+    });
+
+    return (
+      <Animated.View
+        style={[styles.trailingIconSlot, { transform: [{ scale }], opacity }]}
+      >
+        <Icon
+          name={visible ? 'upArrow' : 'downArrow'}
+          width={FORM_FIELD.iconSize}
+          height={FORM_FIELD.iconSize}
+        />
+      </Animated.View>
+    );
+  },
+);
+
+const DropdownVariant = (props: DropdownVisualProps) => {
+  const { color } = useAppTheme();
+  const { i18n } = useTranslation();
+  const isHindi = isHindiLanguage(i18n.language);
+
+  const {
+    dropdownData,
+    disabled,
+    placeholder,
+    isLoading,
+    onLoadMore,
+    onListFooterLoading,
+    search,
+    onSearchTextChange,
+    onDropdownSelect,
+    dropdownProps,
+    dropdownStyle,
+    dropdownListStyle,
+    mode,
+  } = props;
+
+  const resolvedValue = mode === 'form' ? props.field.value : props.value;
+
+  const handleChange = mode === 'form' ? props.field.onChange : props.onChange;
+
+  const renderRightIcon = useCallback(
+    (visible?: boolean) => {
+      if (dropdownProps?.renderRightIcon) {
+        return dropdownProps.renderRightIcon(visible);
+      }
+      if (isLoading) {
+        return (
+          <View style={styles.trailingIconSlot}>
+            <ActivityIndicator size="small" color={color.primary} />
+          </View>
+        );
+      }
+      return <AnimatedDropdownArrow visible={visible} />;
+    },
+    [dropdownProps, isLoading, color.primary],
+  );
+
+  const handleDropdownChange = useCallback(
+    (item: DropdownItem) => {
+      handleChange(item.value);
+      onDropdownSelect?.(item);
+    },
+    [handleChange, onDropdownSelect],
+  );
+
+  return (
+    <Dropdown
+      {...dropdownProps}
+      data={dropdownData}
+      labelField="label"
+      valueField="value"
+      value={resolvedValue}
+      disable={disabled}
+      showsVerticalScrollIndicator={false}
+      placeholder={placeholder}
+      style={[
+        styles.dropdownTrigger,
+        {
+          borderColor: color.border,
+          backgroundColor: disabled
+            ? color.disabled
+            : color.background_primary,
+        },
+        dropdownStyle,
+      ]}
+      containerStyle={[
+        styles.dropdownList,
+        {
+          borderColor: color.border,
+          backgroundColor: color.background_primary,
+        },
+        dropdownListStyle,
+        dropdownProps?.containerStyle,
+      ]}
+      placeholderStyle={[
+        formFieldText.dropdownText,
+        isHindi && formFieldText.dropdownTextHindi,
+        { color: color.text_placeholder },
+        dropdownProps?.placeholderStyle,
+      ]}
+      selectedTextStyle={[
+        formFieldText.dropdownText,
+        isHindi && formFieldText.dropdownTextHindi,
+        { color: color.text_primary },
+        dropdownProps?.selectedTextStyle,
+      ]}
+      itemTextStyle={[
+        formFieldText.dropdownText,
+        isHindi && formFieldText.dropdownTextHindi,
+        { color: color.text_primary },
+        dropdownProps?.itemTextStyle,
+      ]}
+      itemContainerStyle={dropdownProps?.itemContainerStyle}
+      activeColor={color.border}
+      renderRightIcon={renderRightIcon}
+      iconStyle={styles.dropdownIconStyle}
+      onChange={handleDropdownChange}
+      flatListProps={{
+        onEndReachedThreshold: 0.05,
+        onEndReached: onLoadMore,
+        ListFooterComponent: onListFooterLoading,
+      }}
+      search={search}
+      searchPlaceholder="Search..."
+      onChangeText={onSearchTextChange}
+      inputSearchStyle={{
+        color: color.text_primary,
+        borderRadius: normalize(12),
+        borderColor: color.border,
+      }}
+    />
+  );
+};
+
+export default memo(DropdownVariant);
+
+const styles = StyleSheet.create({
+  dropdownTrigger: {
+    borderWidth: 1,
+    borderRadius: FORM_FIELD.radius,
+    height: FORM_FIELD.height,
+    minHeight: FORM_FIELD.height,
+    width: '100%',
+    paddingLeft: FORM_FIELD.paddingH,
+    paddingRight: FORM_FIELD.paddingH,
+    justifyContent: 'center',
+  },
+  trailingIconSlot: {
+    width: FORM_FIELD.iconSize,
+    height: FORM_FIELD.iconSize,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dropdownIconStyle: {
+    width: FORM_FIELD.iconSize,
+    height: FORM_FIELD.iconSize,
+    marginRight: 0,
+  },
+  dropdownList: {
+    borderWidth: 1,
+    maxHeight: normalize(200),
+    overflow: 'hidden',
+    borderRadius: 5,
+  },
+});

package/template/src/components/shared/form-input/variants/TextInputVariant.tsx

@@ -0,0 +1,300 @@
+import { useAppTheme } from '@/context/ThemeContext';
+import { FontFamily } from '@/theme';
+import React, {
+  ComponentRef,
+  forwardRef,
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { StyleSheet, TextInput, Pressable, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import Icon from '../../Icon';
+import BaseSkelton from '../../skelton/BaseSkelton';
+import { normalize } from '@/utils/normalize';
+import { isHindiLanguage } from '@/utils/hindiText';
+import { TextInputVariantProps } from '../type';
+import { FORM_FIELD, formFieldText } from '../formFieldStyles';
+
+type InputValue = string | number;
+
+type RHFTextField<T = InputValue> = {
+  value: T;
+  onChange: (value: T) => void;
+  onBlur?: () => void;
+};
+
+type TextFormMode<T> = {
+  mode: 'form';
+  field: RHFTextField<T>;
+};
+
+type TextIndependentMode<T> = {
+  mode: 'standalone';
+  value: T;
+  onChangeText: (value: T) => void;
+};
+type TextInputVisualProps<T = InputValue> =
+  | (TextFormMode<T> & TextInputVariantProps)
+  | (TextIndependentMode<T> & TextInputVariantProps);
+
+type TextInputInstance = ComponentRef<typeof TextInput>;
+
+const TextInputVariant = forwardRef<TextInputInstance, TextInputVisualProps>(
+  (props, ref) => {
+    const {
+      mode,
+      disabled,
+      inputContainerStyle,
+      inputStyle,
+      leftIcon,
+      leftAdornment,
+      leftAdornmentStyle,
+      textInputProps,
+      rightIcon,
+      placeholder = 'Enter text',
+      isPassword = false,
+      focusOnContainerPress = true,
+      isLoading = false,
+      digitsOnly = false,
+    } = props;
+
+    const { color } = useAppTheme();
+    const { i18n } = useTranslation();
+    const isHindi = isHindiLanguage(i18n.language);
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const inputRef = useRef<TextInputInstance | null>(null);
+
+    const setRefs = useCallback(
+      (node: TextInputInstance | null) => {
+        inputRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref],
+    );
+
+    const togglePassword = useCallback(() => {
+      setIsPasswordVisible(prev => !prev);
+    }, []);
+
+    const resolvedValue = mode === 'form' ? props.field.value : props.value;
+    const handleChange =
+      mode === 'form' ? props.field.onChange : props.onChangeText;
+    const handleBlur = mode === 'form' ? props.field.onBlur : undefined;
+    const isNumberValue = typeof resolvedValue === 'number';
+
+    const onChangeText = useCallback(
+      (text: string) => {
+        const nextText = digitsOnly ? text.replace(/\D/g, '') : text;
+
+        if (isNumberValue) {
+          const next = nextText === '' ? 0 : Number(nextText);
+          handleChange?.(next as never);
+          return;
+        }
+        handleChange?.(nextText as never);
+      },
+      [digitsOnly, handleChange, isNumberValue],
+    );
+
+    const isMultiline = Boolean(textInputProps?.multiline);
+    const { style: customTextInputStyle, ...restTextInputProps } =
+      textInputProps || {};
+
+    const wrapperToneStyle = useMemo(
+      () => ({
+        backgroundColor: disabled
+          ? color.disabled
+          : color.background_primary,
+        borderColor: color.border,
+      }),
+      [color.background_primary, color.border, color.disabled, disabled],
+    );
+
+    const inputColorStyle = useMemo(
+      () => ({ color: color.text_primary }),
+      [color.text_primary],
+    );
+
+    const fieldShimmerLayout = useMemo(
+      () => [
+        {
+          key: 'textField',
+          width: '100%' as const,
+          height: FORM_FIELD.height,
+          borderRadius: FORM_FIELD.radius,
+        },
+      ],
+      [],
+    );
+
+    if (isLoading) {
+      return (
+        <BaseSkelton
+          isLoading
+          layout={fieldShimmerLayout}
+          containerStyle={styles.shimmer}
+        />
+      );
+    }
+
+    return (
+      <View
+        collapsable={false}
+        onTouchEnd={() => {
+          if (!disabled && focusOnContainerPress && !leftAdornment) {
+            inputRef.current?.focus();
+          }
+        }}
+        style={[
+          styles.wrapper,
+          isMultiline && styles.multilineWrapper,
+          wrapperToneStyle,
+          inputContainerStyle,
+        ]}
+      >
+        {leftAdornment ? (
+          <View style={[styles.leftAdornment, leftAdornmentStyle]}>
+            {leftAdornment}
+          </View>
+        ) : (
+          leftIcon && (
+            <Pressable
+              style={[styles.leftIcon, isMultiline && styles.multilineIcon]}
+              disabled={disabled}
+              hitSlop={20}
+            >
+              {leftIcon}
+            </Pressable>
+          )
+        )}
+
+        <View
+          collapsable={false}
+          style={[styles.inputFlex, isMultiline && styles.multilineInputFlex]}
+        >
+          <TextInput
+            ref={setRefs}
+            value={String(resolvedValue ?? '')}
+            onChangeText={onChangeText}
+            onBlur={handleBlur}
+            editable={!disabled}
+            placeholderTextColor={color.text_placeholder}
+            secureTextEntry={isPassword && !isPasswordVisible}
+            placeholder={placeholder}
+            cursorColor={color.text_primary}
+            allowFontScaling={false}
+            underlineColorAndroid="transparent"
+            {...restTextInputProps}
+            style={[
+              styles.input,
+              formFieldText.input,
+              isHindi && formFieldText.inputHindi,
+              inputColorStyle,
+              isMultiline && styles.multilineInput,
+              isMultiline && isHindi && styles.multilineInputHindi,
+              leftAdornment ? styles.inputWithAdornment : undefined,
+              inputStyle,
+              customTextInputStyle,
+            ]}
+          />
+        </View>
+
+        {isPassword && (
+          <Pressable
+            onPress={togglePassword}
+            style={[styles.rightIcon, isMultiline && styles.multilineIcon]}
+            disabled={disabled}
+            hitSlop={20}
+          >
+            <Icon name={isPasswordVisible ? 'eye' : 'eyeClose'} size={22} />
+          </Pressable>
+        )}
+
+        {rightIcon && (
+          <Pressable
+            style={[styles.rightIcon, isMultiline && styles.multilineIcon]}
+            disabled={disabled}
+            hitSlop={20}
+          >
+            {rightIcon}
+          </Pressable>
+        )}
+      </View>
+    );
+  },
+);
+
+export default memo(TextInputVariant);
+
+const styles = StyleSheet.create({
+  shimmer: {
+    width: '100%',
+  },
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: FORM_FIELD.radius,
+    height: FORM_FIELD.height,
+    minHeight: FORM_FIELD.height,
+    width: '100%',
+    paddingHorizontal: FORM_FIELD.paddingH,
+  },
+  multilineWrapper: {
+    minHeight: normalize(100),
+    height: undefined,
+    alignItems: 'stretch',
+    paddingVertical: 0,
+  },
+  inputFlex: {
+    flex: 1,
+    minWidth: 0,
+    justifyContent: 'center',
+  },
+  multilineInputFlex: {
+    alignSelf: 'stretch',
+  },
+  input: {
+    paddingVertical: 0,
+  },
+  multilineInput: {
+    height: undefined,
+    fontSize: FORM_FIELD.fontSize,
+    fontFamily: FontFamily.InterTightRegular,
+    textAlignVertical: 'top',
+    paddingTop: 12,
+    paddingBottom: 12,
+    minHeight: normalize(100),
+    width: '100%',
+    alignSelf: 'stretch',
+    includeFontPadding: false,
+  },
+  multilineInputHindi: {
+    includeFontPadding: true,
+    paddingTop: 14,
+    paddingBottom: 14,
+  },
+  leftAdornment: {
+    flexShrink: 0,
+  },
+  inputWithAdornment: {
+    width: '100%',
+    paddingHorizontal: 0,
+  },
+  leftIcon: {
+    marginRight: 8,
+  },
+  rightIcon: {
+    marginLeft: 8,
+  },
+  multilineIcon: {
+    marginTop: 14,
+  },
+});

package/template/src/components/shared/form-input/variants/ToggleVariant.tsx

@@ -0,0 +1,194 @@
+import { useAppTheme } from '@/context/ThemeContext';
+import { normalize } from '@/utils/normalize';
+import React, { memo, useEffect } from 'react';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+import CustomText from '@/components/shared/text/CustomText';
+import { ToggleVariantProps } from '../type';
+
+type RHFToggleField = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+};
+type ToggleFormMode = {
+  mode: 'form';
+  field: RHFToggleField;
+};
+
+type ToggleStandaloneMode = {
+  mode: 'standalone';
+  value: boolean;
+  onChange: (value: boolean) => void;
+  alignToggle?: ViewStyle['alignItems'];
+};
+
+export type ToggleVisualProps =
+  | (ToggleFormMode & ToggleVariantProps)
+  | (ToggleStandaloneMode & ToggleVariantProps);
+
+const SIZE_MAP = {
+  sm: {
+    width: 52,
+    height: 26,
+    thumb: 22,
+    padding: 2,
+    labelSize: normalize(9),
+  },
+  md: {
+    width: 60,
+    height: 32,
+    thumb: 28,
+    padding: 2,
+    labelSize: normalize(11),
+  },
+} as const;
+
+const Toggle = (props: ToggleVisualProps) => {
+  const {
+    disabled = false,
+    size = 'md',
+
+    showLabel = true,
+    onLabel = 'ON',
+    offLabel = 'OFF',
+
+    activeColor,
+    inactiveColor,
+    thumbColor,
+    styles: styleOverrides,
+    mode,
+  } = props;
+
+  const { width, height, thumb, padding, labelSize } = SIZE_MAP[size];
+  const { color } = useAppTheme();
+  const resolvedValue = mode === 'form' ? props.field.value : props.value;
+  const handleChange = mode === 'form' ? props.field.onChange : props.onChange;
+  const labelJustify = resolvedValue ? 'flex-start' : 'flex-end';
+  const alignToggleEnd: ViewStyle['alignItems'] =
+    mode === 'standalone' && props.alignToggle ? props.alignToggle : 'flex-end';
+  const thumbCont = {
+    width: thumb,
+    height: thumb,
+    borderRadius: thumb / 2,
+    backgroundColor: thumbColor || color.background_primary,
+    right: size === 'sm' ? 28 : 30,
+  };
+  const pressableOpacity = disabled ? 0.6 : 1.0;
+  const activeClr = activeColor || color.primary;
+  const inactiveClr = inactiveColor || color.placeholder;
+  const formWrapper: ViewStyle =
+    mode === 'form'
+      ? { position: 'absolute', right: 0 }
+      : { position: 'relative' };
+
+  const travelDistance = width - thumb - padding * 2;
+
+  const translateX = useSharedValue(resolvedValue ? travelDistance : 0);
+
+  useEffect(() => {
+    translateX.value = withTiming(resolvedValue ? travelDistance : 0, {
+      duration: 180,
+    });
+  }, [resolvedValue, travelDistance, translateX]);
+
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  const handlePress = () => {
+    handleChange?.(!resolvedValue);
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: resolvedValue, disabled }}
+      style={[
+        { opacity: pressableOpacity, alignItems: alignToggleEnd },
+        formWrapper,
+        styleOverrides?.wrapper,
+      ]}
+      disabled={disabled}
+    >
+      {/* Track */}
+      <View
+        style={[
+          styles.track,
+          {
+            width,
+            height,
+            borderRadius: height / 2,
+            padding,
+            backgroundColor: resolvedValue ? activeClr : inactiveClr,
+          },
+          styleOverrides?.track,
+        ]}
+      >
+        {/* ON / OFF Label (SAFE, CONDITIONAL) */}
+        {showLabel && (
+          <View
+            pointerEvents="none"
+            style={[
+              styles.labelContainer,
+              {
+                justifyContent: labelJustify,
+              },
+              styles.labelContainer,
+            ]}
+          >
+            <CustomText
+              variant="label"
+              weight="600"
+              numberOfLines={1}
+              ellipsizeMode="clip"
+              textColor={color.text_default}
+              textAlign="center"
+              style={[styles.label, { fontSize: labelSize }, styleOverrides?.label]}
+            >
+              {resolvedValue ? onLabel : offLabel}
+            </CustomText>
+          </View>
+        )}
+
+        {/* Thumb */}
+        <Animated.View
+          style={[styles.thumb, thumbCont, thumbStyle, styleOverrides?.thumb]}
+        />
+      </View>
+    </Pressable>
+  );
+};
+
+export default memo(Toggle);
+
+const styles = StyleSheet.create({
+  track: {
+    justifyContent: 'center',
+  },
+  thumb: {
+    position: 'absolute',
+    elevation: 2,
+  },
+  labelContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    left: 6,
+    right: 6,
+  },
+  label: {
+    marginBottom: 0,
+  },
+});