@cleartrip/ct-design-field 4.0.0 → 5.0.0

package/src/variants/Card/index.tsx

@@ -0,0 +1,89 @@
+import { forwardRef, useEffect, useRef } from 'react';
+
+import { FieldChangeEvent, IFieldProps, IFieldRef } from '../../type';
+import { FieldType } from '../../constants';
+import InputField from '../../Field';
+import useMergeRefs from '@cleartrip/ct-design-use-merge-refs';
+
+export interface ICursorRef {
+  cursorPos: number;
+  operation: string;
+}
+
+export enum CURSOR_OPERATION {
+  NONE = 'NONE',
+  ADD = 'ADD',
+  SUBSTRACT = 'SUBSTRACT',
+}
+
+/**
+ * CardField is a wrapper component which is used add a space after a specific character limit
+ * For Eg: 1234 5678 9012 3456
+ *
+ * Use cases
+ *
+ * 1.) Gift Voucher
+ * 2.) Credit/Debit Card
+ */
+const CardField = forwardRef<IFieldRef, IFieldProps>(({ onChange, value, ...rest }, forwardedRef) => {
+  const ref = useRef<IFieldRef | null>(null);
+  const mergedRef = useMergeRefs(forwardedRef, ref);
+  const cursorRef = useRef<ICursorRef>({
+    cursorPos: 0,
+    operation: CURSOR_OPERATION.NONE,
+  });
+
+  /**
+   * Update the cursor position for on each re-render.
+   */
+  useEffect(() => {
+    ref.current?.setSelection(cursorRef.current.cursorPos, cursorRef.current.cursorPos);
+
+    cursorRef.current = {
+      cursorPos: cursorRef.current.cursorPos,
+      operation: CURSOR_OPERATION.NONE,
+    };
+  }, [value]);
+
+  const handleChange = (e: FieldChangeEvent) => {
+    onChange?.(e);
+    let selectionStart = e.target.selectionStart || 0;
+
+    //Update the cursor on the basis of operations.
+    switch (cursorRef.current.operation) {
+      case CURSOR_OPERATION.SUBSTRACT: {
+        --selectionStart;
+        break;
+      }
+
+      case CURSOR_OPERATION.ADD: {
+        ++selectionStart;
+        break;
+      }
+
+      default:
+        break;
+    }
+
+    //Update the ref
+    cursorRef.current = {
+      cursorPos: selectionStart,
+      operation: CURSOR_OPERATION.NONE,
+    };
+  };
+
+  return (
+    <InputField
+      ref={mergedRef}
+      onChange={handleChange}
+      {...rest}
+      type={FieldType.NUMBER}
+      value={value}
+      inputMode='numeric'
+    />
+  );
+});
+
+CardField.displayName = 'CardField';
+
+export default CardField;

package/src/variants/Card/type.ts

@@ -0,0 +1,5 @@
+import { IFieldProps } from '../../type';
+
+export interface ICardFieldProps extends IFieldProps {
+  gap: number;
+}

package/src/variants/OTP/index.tsx

@@ -0,0 +1,343 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { IOtpFieldProps } from './type';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography, TypographyColor, TypographyVariant } from '@cleartrip/ct-design-typography';
+import { IFieldRef, FieldChangeEvent, FieldKeyDownEvent, FieldFocusEvent } from '../../type';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import Field from '../../Input';
+import { isIOS } from '@cleartrip/ct-design-common-utils';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+
+const styles = makeStyles((theme) => ({
+  rootContainer: {
+    justifyContent: 'center',
+  },
+  otpContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing[3],
+  },
+  otpBox: {
+    width: theme.size[15],
+    height: theme.size[15],
+    borderRadius: theme?.border.radius[8],
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderStyle: theme.border.style.solid,
+  },
+  otpInput: {
+    width: '100%',
+    height: '100%',
+    fontSize: theme?.typography.size[20],
+    fontWeight: theme?.typography.weight.semibold,
+    color: theme.color.text.primary,
+    textAlign: 'center',
+  },
+  errorText: {
+    marginVertical: theme?.spacing[2],
+    fontSize: theme?.typography.size[14],
+    fontWeight: theme?.typography.weight.semibold,
+    color: theme?.color.text.warning,
+  },
+}));
+
+const OtpBox: React.FC<Omit<IOtpFieldProps, 'onFocus'> & { focus: boolean; onFocus: (e: FieldFocusEvent) => void }> = ({
+  value,
+  focus,
+  inputMode,
+  onChange,
+  onFocus,
+  readOnly,
+  onBlur,
+  onPressIn,
+  onKeyDown,
+  onSelect,
+  maxLength,
+  prompt,
+  styleConfig,
+}) => {
+  const theme = useTheme();
+  const ref = useRef<IFieldRef>(null);
+  const { hasError = false } = prompt || {};
+  const { otpBox = [], otpRootInput = [] } = styleConfig || {};
+  useEffect(() => {
+    if (focus && ref.current) {
+      ref.current.focus();
+    }
+  }, [focus]);
+
+  const dynamicStyles = useStyles(
+    (theme) => {
+      if (hasError) {
+        return {
+          otpBox: {
+            borderColor: theme.color.border.warning,
+            borderWidth: theme.border.width.lg,
+          },
+        };
+      }
+      return {
+        otpBox: {
+          borderColor: focus ? theme.color.border.primary : theme.color.border.disabledDark,
+          borderWidth: focus ? theme.border.width.lg : theme.border.width.sm,
+        },
+      };
+    },
+    [hasError, focus],
+  );
+
+  return (
+    <Container
+      styleConfig={{
+        root: [styles.otpBox, dynamicStyles.otpBox, ...otpBox],
+      }}
+    >
+      <Field
+        id={`otp-box`}
+        disabled={readOnly}
+        ref={ref}
+        value={value}
+        maxLength={maxLength}
+        inputMode={inputMode}
+        onChange={onChange}
+        onBlur={onBlur}
+        onPressIn={onPressIn}
+        onKeyDown={onKeyDown}
+        onSelect={onSelect}
+        autoCapitalize='characters'
+        cursorColor={theme.color.text.grapetini900}
+        onFocus={onFocus}
+        focus={focus}
+        styleConfig={{ root: [styles.otpInput, ...otpRootInput] }}
+      />
+    </Container>
+  );
+};
+
+const OtpField: React.FC<IOtpFieldProps> = ({
+  value = '',
+  numberOfBoxes = 4,
+  inputMode = 'numeric',
+  autoFocus = true,
+  refocus = false,
+  onChange,
+  readOnly = false,
+  onComplete,
+  onKeyDown,
+  onSelect,
+  onBlur,
+  onPressIn,
+  onFocus,
+  prompt,
+  styleConfig = {},
+}) => {
+  const [focusedIndex, setFocusedIndex] = useState<number>(autoFocus ? 0 : -1);
+  const { hasError = false, message: errorMessage } = prompt || {};
+  const { promptStyles, otpRootContainer = [], otpRootInput = [] } = styleConfig || {};
+  const { promptMessageTypography } = promptStyles || {};
+
+  // Convert value string to array for easy access
+  const otpValues = Array(numberOfBoxes)
+    .fill('')
+    .map((_, index) => {
+      const char = value[index];
+      return char && char !== ' ' ? char : '';
+    });
+  // Handle auto focus on mount
+  useEffect(() => {
+    if (autoFocus && !readOnly) {
+      setFocusedIndex(0);
+    }
+  }, [autoFocus, readOnly]);
+
+  useEffect(() => {
+    if (refocus) {
+      setFocusedIndex(0);
+    }
+  }, [refocus]);
+
+  const validateInput = useCallback(
+    (text: string): string => {
+      if (inputMode === 'numeric') {
+        return text.replace(/[^0-9]/g, '');
+      }
+      return text.replace(/[^0-9A-Za-z]/g, '').toUpperCase();
+    },
+    [inputMode],
+  );
+
+  /**
+   * handleInputChange - Memoized event handler for OTP box input change.
+   *
+   * This function is memoized as much as possible; however, since it relies on otpValues, which is derived
+   * from component props/state and changes as the value prop changes, it's not possible to avoid recalculating
+   * otpValues within this function. To optimize, recompute otpValues inside the handler,
+   * use useCallback only for the core handler, and avoid including otpValues directly in the dependency array.
+   */
+  const handleInputChange = useCallback(
+    (e: FieldChangeEvent, index: number) => {
+      const validatedText = validateInput(e.target.value);
+
+      // Recompute otpValues - treat space as empty placeholder
+      const otpString = value || '';
+      const currentOtpValues = Array(numberOfBoxes)
+        .fill('')
+        .map((_, idx) => {
+          const char = otpString[idx];
+          return char && char !== ' ' ? char : '';
+        });
+
+      // Handle iOS auto-fill (when multiple characters are pasted)
+      if (validatedText.length > 1) {
+        const newValues = [...currentOtpValues];
+
+        // Start filling from the current focused index
+        for (let i = 0; i < validatedText.length && index + i < numberOfBoxes; i++) {
+          newValues[index + i] = validatedText[i];
+        }
+
+        const newValue = newValues.join('');
+
+        onChange?.({
+          target: { value: newValue, selectionStart: index },
+          currentTarget: e.currentTarget,
+          preventDefault: e.preventDefault,
+        });
+        // Move focus to next empty box or last box
+        const nextEmptyIndex = newValues.findIndex((val) => !val);
+        if (nextEmptyIndex !== -1) {
+          setFocusedIndex(nextEmptyIndex);
+        } else {
+          setFocusedIndex(numberOfBoxes - 1);
+        }
+
+        // Check if OTP is complete (no empty boxes)
+        if (!newValues.includes('')) {
+          onComplete?.(newValue);
+        }
+        return;
+      }
+
+      // Single character input - fill the FOCUSED box
+      if (validatedText) {
+        const newValues = [...currentOtpValues];
+        newValues[index] = validatedText;
+
+        const newValue = newValues.join('');
+        onChange?.({
+          target: { value: newValue, selectionStart: index },
+          currentTarget: e.currentTarget,
+          preventDefault: e.preventDefault,
+        });
+
+        // Move focus to next box sequentially
+        if (index < numberOfBoxes - 1) {
+          setFocusedIndex(index + 1);
+        }
+
+        // Check if OTP is complete (no empty boxes)
+        if (!newValues.includes('')) {
+          onComplete?.(newValue);
+        }
+      }
+    },
+    [validateInput, value, numberOfBoxes, onChange, onComplete],
+  );
+
+  const handleKeyPress = useCallback(
+    (e: FieldKeyDownEvent, index: number) => {
+      const key = e.target.key;
+
+      if (key === 'Backspace') {
+        // Recompute to avoid stale closure - treat space as empty
+        const otpString = value || '';
+        const currentOtpValues = Array(numberOfBoxes)
+          .fill('')
+          .map((_, idx) => {
+            const char = otpString[idx];
+            return char && char !== ' ' ? char : '';
+          });
+
+        if (currentOtpValues[index]) {
+          // Clear current box - use SPACE as placeholder to preserve position
+          const newValues = [...currentOtpValues];
+          newValues[index] = ' ';
+          onChange?.({
+            target: { value: newValues.join(''), selectionStart: index },
+            currentTarget: e.currentTarget,
+            preventDefault: e.preventDefault,
+          });
+        } else if (index > 0) {
+          // Move to previous box if current is empty
+          setFocusedIndex(index - 1);
+        }
+      } else if (key === 'ArrowLeft' && index > 0) {
+        e.preventDefault?.();
+        setFocusedIndex(index - 1);
+      } else if (key === 'ArrowRight' && index < numberOfBoxes - 1) {
+        e.preventDefault?.();
+        setFocusedIndex(index + 1);
+      }
+      onKeyDown?.({
+        target: { value, key },
+        currentTarget: e.currentTarget,
+        preventDefault: e.preventDefault,
+      });
+    },
+    [numberOfBoxes, onKeyDown, value, onChange],
+  );
+
+  const handleFocus = useCallback(
+    (e: FieldFocusEvent, index: number) => {
+      onFocus?.({
+        target: { value, index },
+        currentTarget: e.currentTarget,
+        preventDefault: e.preventDefault,
+      });
+      setFocusedIndex(index);
+    },
+    [onFocus, value],
+  );
+
+  return (
+    <Container styleConfig={{ root: [styles.rootContainer, ...otpRootContainer] }}>
+      <Container styleConfig={{ root: [styles.otpContainer, ...otpRootInput] }}>
+        {Array(numberOfBoxes)
+          .fill(null)
+          .map((_, index) => (
+            <OtpBox
+              key={index}
+              value={otpValues[index]}
+              focus={focusedIndex === index}
+              prompt={{ hasError }}
+              inputMode={inputMode}
+              maxLength={isIOS() ? numberOfBoxes : 1}
+              onFocus={(e) => handleFocus(e, index)}
+              onChange={(e) => handleInputChange(e, index)}
+              readOnly={readOnly}
+              onPressIn={onPressIn}
+              onKeyDown={(e) => handleKeyPress(e, index)}
+              onSelect={onSelect}
+              onBlur={onBlur}
+              styleConfig={styleConfig}
+            />
+          ))}
+      </Container>
+
+      {hasError && !!errorMessage && (
+        <Typography
+          variant={TypographyVariant.P3}
+          color={TypographyColor.WARNING}
+          styleConfig={{
+            root: [styles.errorText],
+            ...promptMessageTypography,
+          }}
+        >
+          {errorMessage}
+        </Typography>
+      )}
+    </Container>
+  );
+};
+
+export default OtpField;

package/src/variants/OTP/type.ts

@@ -0,0 +1,34 @@
+import { Styles } from '@cleartrip/ct-design-types';
+import { FieldFocusEvent, IFieldProps } from '../../type';
+
+type OtpFieldStyleConfig = {
+  otpBox?: Styles[];
+  otpRootInput?: Styles[];
+  otpRootContainer?: Styles[];
+} & IFieldProps['styleConfig'];
+
+export interface OtpFieldFocusEvent extends FieldFocusEvent {
+  target: {
+    value: string;
+    index: number;
+  };
+}
+interface OwnOtpFieldProps extends IFieldProps {
+  /** Number of OTP input boxes to display (default: 4) */
+  numberOfBoxes?: number;
+
+  /** Callback fired when all OTP boxes are filled */
+  onComplete?: (otp: string) => void;
+
+  /** Whether to refocus the first otp input box (default: false) */
+  refocus?: boolean;
+  /**
+   * Max length of the OTP input box
+   */
+  maxLength?: number;
+}
+
+export type IOtpFieldProps = Omit<OwnOtpFieldProps, 'onFocus' | 'styleConfig'> & {
+  onFocus?: (e: OtpFieldFocusEvent) => void;
+  styleConfig?: OtpFieldStyleConfig;
+};

package/src/variants/Phone/Prefix/index.tsx

@@ -0,0 +1,87 @@
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import { IPhoneFieldPrefix } from './type';
+import { Container } from '@cleartrip/ct-design-container';
+import { Divider } from '@cleartrip/ct-design-divider';
+import { Box } from '@cleartrip/ct-design-box';
+import { Typography } from '@cleartrip/ct-design-typography';
+
+const styles = makeStyles((theme) => {
+  return {
+    wrapper: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      paddingLeft: 16,
+    },
+    flagContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      height: theme.size[6],
+      width: theme.size[6],
+    },
+    countryCode: {
+      alignSelf: 'flex-start',
+    },
+    divider: {
+      borderRightWidth: 1,
+      height: '100%',
+      borderRightColor: theme.color.background.disabledDark,
+    },
+    disabledColor: {
+      color: theme.color.text.disabled,
+    },
+    enabledColor: {
+      color: theme.color.text.primary,
+    },
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing[2],
+    },
+  };
+});
+
+const DownChevronV2 = ({ color = '#1A1A1A', ...rest }) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12' {...rest}>
+      <path stroke={color} strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M2 4l4 4 4-4'></path>
+    </svg>
+  );
+};
+
+const PhoneFieldPrefix: React.FC<IPhoneFieldPrefix> = ({
+  countryCode,
+  disabled = false,
+  flagIcon,
+  onDropdownClick,
+  showDropdownIcon,
+}) => {
+  const onClick = () => {
+    if (disabled) return;
+    onDropdownClick?.();
+  };
+
+  return (
+    <Box boxSize='micro' styleConfig={{ root: [styles.wrapper] }} onClick={onClick}>
+      <Container
+        styleConfig={{
+          root: [styles.container],
+        }}
+      >
+        {flagIcon && <Container styleConfig={{ root: [styles.flagContainer] }}>{flagIcon}</Container>}
+        <Typography variant='B1' color={disabled ? 'disabled' : 'primary'} styleConfig={{ root: [styles.countryCode] }}>
+          {countryCode}
+        </Typography>
+
+        {showDropdownIcon && (
+          <DownChevronV2 color={disabled ? styles.disabledColor.color : styles.enabledColor.color} />
+        )}
+      </Container>
+      <Divider dividerWidth={1} dividerLength={0} orientation='vertical' styleConfig={{ root: [styles.divider] }} />
+    </Box>
+  );
+};
+
+export default PhoneFieldPrefix;

package/src/variants/Phone/Prefix/type.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+export interface IPhoneFieldPrefix {
+  /**
+   * The icon to display for the country flag.
+   */
+  flagIcon?: ReactNode;
+  /**
+   * The country code to display.
+   */
+  countryCode: string;
+  /**
+   * Whether to show the dropdown icon.
+   */
+  showDropdownIcon?: boolean;
+  /**
+   * The function to call when the dropdown icon is clicked.
+   */
+  onDropdownClick?: () => void;
+  /**
+   * Whether the field is disabled.
+   */
+  disabled?: boolean;
+}

package/src/variants/Phone/index.native.tsx

@@ -0,0 +1,84 @@
+import { forwardRef, useState } from 'react';
+import { FieldChangeEvent, IFieldRef } from '../../type';
+import { FieldType } from '../../constants';
+import { IPhoneField } from './type';
+import Field from '../../Field';
+import PhoneFieldPrefix from './Prefix';
+import { ONLY_NUMERIC } from '@cleartrip/ct-design-common-constants';
+import { View } from 'react-native';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+
+const styles = makeStyles((theme) => {
+  return {
+    fieldConfig: {
+      flex: 1,
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingVertical: 0,
+      lineHeight: 18,
+      paddingLeft: theme.spacing[4],
+    },
+  };
+});
+
+const PhoneField = forwardRef<IFieldRef, IPhoneField>(
+  (
+    { flagIcon, countryCode, showDropdownIcon, onDropdownClick, disabled, max, onChange, styleConfig, ...rest },
+    forwardedRef,
+  ) => {
+    const [prefixWidth, setPrefixWidth] = useState(0);
+    const handleChange = (event: FieldChangeEvent) => {
+      const value = event.target.value;
+      const isValidValue = value ? new RegExp(ONLY_NUMERIC).test(value) : true;
+      if (value.length <= max && isValidValue) {
+        onChange?.(event);
+      }
+    };
+    const customPlaceHolderStyling = useStyles(() => {
+      return {
+        placeholderStyles: {
+          marginLeft: prefixWidth,
+        },
+      };
+    }, [prefixWidth]);
+    return (
+      <Field
+        {...rest}
+        type={FieldType.PHONE}
+        ref={forwardedRef}
+        disabled={disabled}
+        onChange={handleChange}
+        prefix={
+          <View
+            onLayout={(e) => {
+              const layout = e.nativeEvent.layout.width;
+              setPrefixWidth(layout);
+            }}
+          >
+            <PhoneFieldPrefix
+              flagIcon={flagIcon}
+              countryCode={countryCode}
+              showDropdownIcon={showDropdownIcon}
+              onDropdownClick={onDropdownClick}
+              disabled={disabled}
+            />
+          </View>
+        }
+        inputMode='numeric'
+        styleConfig={{
+          field: [styles.fieldConfig, ...(styleConfig?.field || [])],
+          placeholder: {
+            placeholderLabel: [
+              customPlaceHolderStyling.placeholderStyles,
+              ...(styleConfig?.placeholder?.placeholderLabel || []),
+            ],
+          },
+          ...styleConfig,
+        }}
+      />
+    );
+  },
+);
+
+PhoneField.displayName = 'PhoneField';
+export default PhoneField;