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

package/template/src/components/shared/form-input/FullNameInput.tsx

@@ -0,0 +1,243 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { Control, Controller, FieldValues, Path } from 'react-hook-form';
+import { StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
+import FormInput from './FormInput';
+import DropdownVariant from './variants/DropdownVariant';
+import Icon from '../Icon';
+import CustomText from '@/components/shared/text/CustomText';
+import { useAppTheme } from '@/context/ThemeContext';
+import { ColorType, FontFamily } from '@/theme';
+import { FontWeight, TextVariant } from '@/theme/typography';
+import { normalize } from '@/utils/normalize';
+import { DropdownItem, TextInputVariantProps } from './type';
+import { FORM_FIELD } from './formFieldStyles';
+
+export interface FullNameInputProps<T extends FieldValues> {
+  control: Control<T>;
+  titleName: Path<T>;
+  name: Path<T>;
+  titleOptions: DropdownItem[];
+  label?: string;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+  labelVariant?: TextVariant;
+  labelWeight?: FontWeight;
+  containerStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  labelContainerStyle?: StyleProp<ViewStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  titleDropdownStyle?: StyleProp<ViewStyle>;
+  titleDropdownListStyle?: StyleProp<ViewStyle>;
+  textInputProps?: TextInputVariantProps['textInputProps'];
+}
+
+const TITLE_DROPDOWN_WIDTH = normalize(64);
+const TITLE_DROPDOWN_HEIGHT = normalize(32);
+
+const FullNameInput = <T extends FieldValues>({
+  control,
+  titleName,
+  name,
+  titleOptions,
+  label,
+  placeholder,
+  error,
+  disabled,
+  labelVariant,
+  labelWeight,
+  containerStyle,
+  labelStyle,
+  labelContainerStyle,
+  inputContainerStyle,
+  inputStyle,
+  titleDropdownStyle,
+  titleDropdownListStyle,
+  textInputProps,
+}: FullNameInputProps<T>) => {
+  const { color } = useAppTheme();
+  const styles = useMemo(() => makeStyles(color), [color]);
+
+  const renderTitleIcon = useCallback(
+    (visible?: boolean) => (
+      <View style={styles.titleDropdownIcon}>
+        <Icon
+          name={visible ? 'upArrow' : 'downArrow'}
+          width={normalize(10)}
+          height={normalize(6)}
+          color={color.text_primary}
+        />
+      </View>
+    ),
+    [styles.titleDropdownIcon, color.text_primary],
+  );
+
+  const renderTitleItem = useCallback(
+    (item: DropdownItem) => (
+      <View style={styles.titleDropdownItem}>
+        <CustomText
+          variant="subtitle"
+          weight="500"
+          style={styles.titleDropdownItemText}
+        >
+          {item.label}
+        </CustomText>
+      </View>
+    ),
+    [styles.titleDropdownItem, styles.titleDropdownItemText],
+  );
+
+  const titleDropdown = useMemo(
+    () => (
+      <Controller
+        control={control}
+        name={titleName}
+        render={({ field }) => (
+          <DropdownVariant
+            mode="form"
+            field={field}
+            dropdownData={titleOptions}
+            disabled={disabled}
+            dropdownStyle={[styles.titleDropdown, titleDropdownStyle]}
+            dropdownListStyle={[
+              styles.titleDropdownList,
+              titleDropdownListStyle,
+            ]}
+            dropdownProps={{
+              renderRightIcon: renderTitleIcon,
+              renderItem: renderTitleItem,
+              selectedTextStyle: styles.titleDropdownText,
+              placeholderStyle: styles.titleDropdownText,
+            }}
+          />
+        )}
+      />
+    ),
+    [
+      control,
+      titleName,
+      titleOptions,
+      disabled,
+      styles.titleDropdown,
+      styles.titleDropdownList,
+      styles.titleDropdownText,
+      titleDropdownStyle,
+      titleDropdownListStyle,
+      renderTitleIcon,
+      renderTitleItem,
+    ],
+  );
+
+  return (
+    <FormInput
+      control={control}
+      name={name}
+      label={label}
+      placeholder={placeholder}
+      error={error}
+      variant="text"
+      disabled={disabled}
+      labelVariant={labelVariant}
+      labelWeight={labelWeight}
+      containerStyle={containerStyle}
+      labelStyle={labelStyle}
+      labelContainerStyle={labelContainerStyle}
+      inputContainerStyle={[styles.inputContainer, inputContainerStyle]}
+      inputStyle={[styles.inputText, inputStyle]}
+      leftAdornment={titleDropdown}
+      focusOnContainerPress={false}
+      textInputProps={{
+        autoCapitalize: 'words',
+        ...textInputProps,
+      }}
+    />
+  );
+};
+
+export default memo(FullNameInput) as typeof FullNameInput;
+
+const makeStyles = (color: ColorType) =>
+  StyleSheet.create({
+    inputContainer: {
+      backgroundColor: color.background_primary,
+      borderColor: color.border,
+      borderRadius: FORM_FIELD.radius,
+      height: FORM_FIELD.height,
+      paddingHorizontal: normalize(8),
+      paddingVertical: normalize(8),
+      gap: normalize(8),
+      alignItems: 'center',
+    },
+    inputText: {
+      flex: 1,
+      width: '100%',
+      fontFamily: FontFamily.InterTightRegular,
+      fontSize: FORM_FIELD.fontSize,
+      lineHeight: FORM_FIELD.lineHeight,
+      height: TITLE_DROPDOWN_HEIGHT,
+      paddingHorizontal: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+      margin: 0,
+      minWidth: 0,
+      includeFontPadding: false,
+      textAlignVertical: 'center',
+    },
+    titleDropdown: {
+      width: TITLE_DROPDOWN_WIDTH,
+      height: TITLE_DROPDOWN_HEIGHT,
+      minHeight: TITLE_DROPDOWN_HEIGHT,
+      maxHeight: TITLE_DROPDOWN_HEIGHT,
+      borderRadius: normalize(8),
+      paddingHorizontal: normalize(6),
+      paddingVertical: 0,
+      paddingLeft: normalize(6),
+      paddingRight: normalize(6),
+      backgroundColor: color.background_soft,
+      borderColor: color.border,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'visible',
+    },
+    titleDropdownText: {
+      fontFamily: FontFamily.InterTightMedium,
+      fontSize: FORM_FIELD.fontSize,
+      lineHeight: FORM_FIELD.lineHeight,
+      color: color.text_primary,
+      marginTop: 0,
+      marginBottom: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+      includeFontPadding: false,
+      textAlignVertical: 'center',
+    },
+    titleDropdownIcon: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginLeft: normalize(2),
+    },
+    titleDropdownList: {
+      width: TITLE_DROPDOWN_WIDTH,
+      minWidth: TITLE_DROPDOWN_WIDTH,
+      maxWidth: TITLE_DROPDOWN_WIDTH,
+      marginTop: normalize(4),
+      borderRadius: normalize(8),
+      overflow: 'hidden',
+    },
+    titleDropdownItem: {
+      height: normalize(36),
+      width: TITLE_DROPDOWN_WIDTH,
+      paddingHorizontal: normalize(6),
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    titleDropdownItemText: {
+      fontFamily: FontFamily.InterTightMedium,
+      fontSize: FORM_FIELD.fontSize,
+      lineHeight: FORM_FIELD.lineHeight,
+      color: color.text_primary,
+      textAlign: 'center',
+      includeFontPadding: false,
+    },
+  });

package/template/src/components/shared/form-input/formFieldStyles.ts

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import { FontFamily } from '@/theme';
+import { normalize } from '@/utils/normalize';
+
+/** Shared Figma field chrome — used by FormInput variants as defaults. */
+export const FORM_FIELD = {
+  height: normalize(48),
+  radius: normalize(10),
+  paddingH: normalize(14),
+  fontSize: normalize(13),
+  lineHeight: normalize(18),
+  labelGap: normalize(6),
+  iconSize: normalize(20),
+} as const;
+
+export const formFieldText = StyleSheet.create({
+  input: {
+    flex: 1,
+    width: '100%',
+    fontFamily: FontFamily.InterTightRegular,
+    fontSize: FORM_FIELD.fontSize,
+    paddingHorizontal: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingVertical: 0,
+    margin: 0,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  /** Hindi-only — applied after `input` so English metrics stay unchanged. */
+  inputHindi: {
+    includeFontPadding: true,
+  },
+  dropdownText: {
+    fontFamily: FontFamily.InterTightRegular,
+    fontSize: FORM_FIELD.fontSize,
+    lineHeight: FORM_FIELD.lineHeight,
+  },
+  dropdownTextHindi: {
+    lineHeight: Math.ceil(FORM_FIELD.fontSize * 1.35),
+    includeFontPadding: true,
+  },
+});

package/template/src/components/shared/form-input/type.ts

@@ -0,0 +1,188 @@
+import { IconName } from '@/assets/icons';
+import {
+  AndroidNativeProps,
+  IOSNativeProps,
+} from '@react-native-community/datetimepicker';
+import { ReactNode } from 'react';
+import { Control, FieldValues, Path } from 'react-hook-form';
+import { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import { DropdownProps } from 'react-native-element-dropdown/lib/typescript/components/Dropdown/model';
+import {
+  ICountry,
+  ICountryCca2,
+  PhoneInputProps,
+} from 'rn-international-phone-number';
+import type { FontWeight, TextVariant } from '@/theme/typography';
+
+export type FormInputVariant =
+  | 'text'
+  | 'dropdown'
+  | 'date'
+  | 'time'
+  | 'country-phone'
+  | 'toggle';
+
+export type DropdownItem = {
+  label: string;
+  value: string;
+};
+
+export interface BaseFormInputProps<T extends FieldValues> {
+  control: Control<T>;
+  name: Path<T>;
+  rules?: object;
+  label?: string;
+  error?: string;
+
+  /** Styles */
+  containerStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  labelContainerStyle?: StyleProp<ViewStyle>;
+  labelVariant?: TextVariant;
+  labelWeight?: FontWeight;
+
+  /** Tooltip */
+  isTooltip?: boolean;
+  tooltipMessage?: string;
+}
+
+//Text Input Variant Props
+export interface TextInputVariantProps {
+  leftIcon?: ReactNode;
+  leftAdornment?: ReactNode;
+  leftAdornmentStyle?: StyleProp<ViewStyle>;
+  rightIcon?: ReactNode;
+  isPassword?: boolean;
+  focusOnContainerPress?: boolean;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+  placeholder?: string;
+  /** Replaces the field with a shimmer bone while true */
+  isLoading?: boolean;
+  /** Keep digits only (like phone / OTP) */
+  digitsOnly?: boolean;
+  textInputProps?: Partial<
+    Omit<TextInputProps, 'onChangeText' | 'value' | 'placeholder' | 'editable'>
+  >;
+}
+
+//Dropdown Variant Props
+export interface DropdownVariantProps {
+  dropdownData: DropdownItem[];
+  disabled?: boolean;
+  placeholder?: string;
+  isLoading?: boolean;
+  onLoadMore?: () => void;
+  onListFooterLoading?: () => React.ReactElement | null;
+  search?: boolean;
+  onSearchTextChange?: (text: string) => void;
+  onDropdownSelect?: (item: DropdownItem) => void;
+  /** Styles the closed dropdown trigger (maps to Dropdown `style`) */
+  dropdownStyle?: StyleProp<ViewStyle>;
+  /** Styles the open options list (maps to Dropdown `containerStyle`) */
+  dropdownListStyle?: StyleProp<ViewStyle>;
+  dropdownProps?: Partial<
+    Omit<
+      DropdownProps<any>,
+      | 'data'
+      | 'value'
+      | 'onChange'
+      | 'labelField'
+      | 'valueField'
+      | 'placeholder'
+      | 'disable'
+    >
+  >;
+}
+
+//DateTime Variant Props
+
+type Display = 'spinner' | 'default' | 'clock' | 'calendar';
+type IOSDisplay = 'default' | 'compact' | 'inline' | 'spinner';
+export interface DateTimeVariantProps {
+  minimumDate?: Date;
+  maximumDate?: Date;
+  dateTimeContainerStyle?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  display?: Display | IOSDisplay;
+  placeholder?: string;
+  inputStyle?: StyleProp<TextStyle>;
+  showIcon?: boolean;
+  iconName?: IconName;
+  placeholderTextColor?: string;
+
+  dateTimePickerProps?: Partial<
+    Omit<
+      IOSNativeProps | AndroidNativeProps,
+      | 'value'
+      | 'onChange'
+      | 'onValueChange'
+      | 'onDismiss'
+      | 'onNeutralButtonPress'
+      | 'mode'
+      | 'display'
+      | 'minimumDate'
+      | 'maximumDate'
+      | 'disabled'
+      | 'children'
+    >
+  >;
+}
+
+//Toggle Variant Props
+type ToggleSize = 'sm' | 'md';
+
+type ToggleStyles = {
+  wrapper?: ViewStyle;
+  track?: ViewStyle;
+  thumb?: ViewStyle;
+  label?: TextStyle;
+};
+export interface ToggleVariantProps {
+  disabled?: boolean;
+  size?: ToggleSize;
+  showLabel?: boolean;
+  onLabel?: string;
+  offLabel?: string;
+  activeColor?: string;
+  inactiveColor?: string;
+  thumbColor?: string;
+  styles?: ToggleStyles;
+}
+
+//Country Phone Variant Props
+export type CountryPhoneAppearance = 'login' | 'field';
+
+export interface CountryPhoneVariantProps {
+  showFlag?: boolean;
+  defaultCountry?: ICountryCca2;
+  disabled?: boolean;
+  modalDisabled?: boolean;
+  /** `login` keeps the grey, taller input. `field` matches other form fields. */
+  appearance?: CountryPhoneAppearance;
+  countryContainerStyle?: StyleProp<ViewStyle>;
+  placeholder?: string;
+  onChangeSelectedCountry?: (country: ICountry) => void;
+  phoneInputProps?: Partial<
+    Omit<
+      PhoneInputProps,
+      | 'defaultValue'
+      | 'onChangePhoneNumber'
+      | 'defaultCountry'
+      | 'onChangeCountry'
+      | 'placeholder'
+      | 'disabled'
+      | 'modalDisabled'
+    >
+  >;
+}
+
+export type FormInputProps<T extends FieldValues> = BaseFormInputProps<T> &
+  (
+    | (TextInputVariantProps & { variant: 'text' })
+    | (DropdownVariantProps & { variant: 'dropdown' })
+    | (DateTimeVariantProps & { variant: 'date' | 'time' })
+    | (CountryPhoneVariantProps & { variant: 'country-phone' })
+    | (ToggleVariantProps & { variant: 'toggle' })
+  );