react-core-ts 3.0.0 → 4.0.0

package/src/ReactCheckbox.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import { CheckboxProps } from './commontypes';
-import CustomIcons from './components/customIcons';
-
-const Checkbox: React.FC<CheckboxProps> = ({
-  name,
-  id,
-  label,
-  intermediate,
-  handleChange = undefined,
-  disabled = false,
-  checked,
-  className: propsClassName,
-  value,
-  labalClass,
-}) => {
-  const getIconName = () => {
-    if (checked) {
-      if (disabled) {
-        return intermediate
-          ? 'input_intermediate_check_disabled'
-          : 'input_checked_disabled';
-      } else {
-        return intermediate ? 'input_intermediate_check' : 'input_checked';
-      }
-    } else {
-      return disabled ? 'input_unchecked_disabled' : 'input_unchecked';
-    }
-  };
-
-  return (
-    <div
-      className={`text-common font-normal text-grey-secondary flex items-center justify-start gap-2 ${
-        disabled ? ' opacity-70' : ''
-      } `}
-    >
-      <div className="w-4 h-4">
-        <label className="relative">
-          <input
-            type="checkbox"
-            disabled={disabled}
-            name={name}
-            autoComplete="off"
-            className="border-none outline-none invisible "
-            data-testid="app-common-checkbox"
-            id={id ? `input-check-${id}` : `input-check-${name}`}
-            value={value}
-            checked={checked}
-            onChange={handleChange}
-          />
-
-          <div
-            className={`absolute top-0 left-0 text-text-primary ${propsClassName}  ${
-              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-            }`}
-          >
-            {checked ? (
-              <CustomIcons name={getIconName()} isWrapper={false} />
-            ) : (
-              <CustomIcons name="input_unchecked" isWrapper={false} />
-            )}
-          </div>
-        </label>
-      </div>
-      <div className={labalClass}>{label}</div>
-    </div>
-  );
-};
-
-export default Checkbox;

package/src/ReactOTPInput.tsx

@@ -1,199 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { FieldErrors } from 'react-hook-form';
-
-type OTPInputProps = {
-  BoxLength?: number;
-  value?: string;
-  onChangeOTP: (otp: string) => void;
-  label?: string;
-  errors?: FieldErrors;
-  name: string;
-  id: string;
-  labelTitle?: string;
-  initialTime?: number;
-  callbackFn?: (data: boolean) => void;
-};
-
-const OTPInput: React.FC<OTPInputProps> = ({
-  BoxLength = 6,
-  onChangeOTP,
-  value = '',
-  label,
-  errors,
-  name,
-  id,
-  labelTitle,
-  initialTime = 240,
-  callbackFn,
-}) => {
-  // Initialize OTP state from value prop
-  const [otp, setOtp] = useState<string[]>(
-    value.split('').concat(Array(BoxLength - value.length).fill(''))
-  );
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-  const [remainingTime, setRemainingTime] = useState<number>(initialTime);
-  const [isTimerCompleted, setIsTimerCompleted] = useState<boolean>(false);
-
-  useEffect(() => {
-    // Synchronize local otp state with value prop changes
-    setOtp(value.split('').concat(Array(BoxLength - value.length).fill('')));
-  }, [value, BoxLength]);
-
-  useEffect(() => {
-    if (otp) onChangeOTP(otp.join(''));
-  }, [otp]);
-
-  useEffect(() => {
-    if (remainingTime > 0) {
-      const timerId = setInterval(() => {
-        setRemainingTime((prev) => prev - 1);
-      }, 1000);
-
-      return () => clearInterval(timerId);
-    } else {
-      setIsTimerCompleted(true);
-    }
-  }, [remainingTime]);
-
-  const formatTime = (time: number) => {
-    const minutes = Math.floor(time / 60);
-    const seconds = time % 60;
-    return `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
-  };
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    const value = e.target.value;
-    if (/[^0-9]/.test(value)) return;
-
-    const newOtp = [...otp];
-    newOtp[index] = value;
-    setOtp(newOtp);
-
-    if (value !== '' && index < BoxLength - 1) {
-      inputRefs.current[index + 1]?.focus(); // Move focus to next input
-    }
-  };
-
-  const handleKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    if (e.key === 'Backspace' && otp[index] === '' && index > 0) {
-      inputRefs.current[index - 1]?.focus(); // Move focus to previous input
-    }
-  };
-
-  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
-    const pastedData = e.clipboardData.getData('Text').slice(0, BoxLength);
-    if (/[^0-9]/.test(pastedData)) return;
-
-    const newOtp = pastedData
-      .split('')
-      .concat(Array(BoxLength - pastedData.length).fill(''));
-    setOtp(newOtp);
-
-    // Move focus to the last filled input field
-    const lastIndex = newOtp.findIndex((val) => val === '');
-    if (lastIndex !== -1) {
-      inputRefs.current[lastIndex]?.focus();
-    } else {
-      inputRefs.current[BoxLength - 1]?.focus();
-    }
-  };
-
-  const getErrors = (err: any) => {
-    let errMsg = '';
-    if (err.message) {
-      errMsg = err?.message;
-    }
-    return errMsg;
-  };
-
-  const handleError = (data: any) => {
-    if (
-      getErrors(data[name]) === 'required' ||
-      getErrors(data[name]) === 'Required'
-    ) {
-      return `${label ?? labelTitle} is ${getErrors(data[name])}`;
-    } else {
-      return getErrors(data[name]) ?? '';
-    }
-  };
-
-  // Reset time function added
-  const resetTimer = () => {
-    setRemainingTime(initialTime);
-    setIsTimerCompleted(false);
-  };
-
-  const handleResend = () => {
-    if (isTimerCompleted) {
-      callbackFn?.(isTimerCompleted);
-      resetTimer();
-    }
-  };
-
-  return (
-    <div>
-      {label && (
-        <div className="mb-2 me-2">
-          <label className={`text-grey-label font-normal text-common`}>
-            {label}
-          </label>
-        </div>
-      )}
-      <div className="flex flex-col w-fit">
-        <div
-          className="flex gap-x-5 "
-          id={id ? `input-otp-${id}` : `input-otp-${name}`}
-        >
-          {Array(BoxLength)
-            .fill('')
-            .map((_, index) => (
-              <input
-                key={index}
-                name={name}
-                id={id}
-                type="text"
-                autoComplete="off"
-                value={otp[index]}
-                onChange={(e) => handleChange(e, index)}
-                onKeyDown={(e) => handleKeyDown(e, index)}
-                onPaste={handlePaste}
-                ref={(el) => (inputRefs.current[index] = el)}
-                maxLength={1}
-                onFocus={(e) => (e.target.style.borderColor = '#667085')}
-                onBlur={(e) => (e.target.style.borderColor = '#D0D5DD')}
-                className={`otp-input-customstyle w-[54px] h-10 text-center text-lg  border border-[#D0D5DD] focus:border-[#667085] transition-colors duration-200 outline-none rounded-sm`}
-              />
-            ))}
-        </div>
-        <div className="flex items-center pt-3">
-          <p className="text-common text-[#475467]">Didn't receive a code? </p>
-          <span
-            className={`text-common text-[#003C71] ml-2  ${
-              !isTimerCompleted ? 'cursor-not-allowed' : 'cursor-pointer'
-            }`}
-            onClick={handleResend}
-          >
-            Resend Code
-          </span>
-        </div>
-        <div>
-          <span className="text-common text-[#475467]">
-            Remaining Time: {formatTime(remainingTime)}
-          </span>
-        </div>
-
-        <div className="flex justify-center items-center text-[#F94110] text-base font-medium	">
-          {errors && errors[name] && <span> {handleError(errors)}</span>}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default OTPInput;

package/src/ReactRadioButton.tsx

@@ -1,65 +0,0 @@
-import React, { useRef } from "react";
-
-import { RadioProps } from "./commontypes";
-
-const Radio: React.FC<RadioProps> = ({
-  name,
-  id,
-  label,
-  checked,
-  value = undefined,
-  handleChange,
-  disabled = false,
-  customLabel,
-  prefixNode,
-}) => {
-  const radioRef = useRef<HTMLInputElement>(null);
-  const onChange = (e: any) => {
-    handleChange?.(e);
-  };
-  const labelClick = () => {
-    if (radioRef.current) {
-      radioRef.current.click();
-    }
-  };
-  return (
-    <div
-      className={`labels label-text flex items-center justify-start custom-radio-container ${
-        !customLabel && 'gap-0'
-      }  ${disabled ? ' opacity-70' : ''} `}
-    >
-      <div>
-        <label
-          className={`radio-button ${
-            disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-          }`}
-        >
-          <input
-            type="radio"
-            autoComplete="off"
-            checked={checked}
-            disabled={disabled}
-            id={id ? `input-button-${id}` : `input-button-${name}`}
-            ref={radioRef}
-            name={name}
-            data-testid="app-common-radio"
-            value={value}
-            onChange={onChange}
-          />
-          <span className="radio"></span>
-        </label>{' '}
-      </div>
-      {prefixNode && <div>{prefixNode}</div>}
-      <div
-        className={`text-common font-normal cursor-pointer ${
-          checked ? 'text-secondary' : ''
-        }`}
-        onClick={labelClick}
-      >
-        {label}
-      </div>
-    </div>
-  );
-};
-
-export default Radio;

package/src/ReactTextArea.tsx

@@ -1,238 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import { TextAreaProps } from './commontypes';
-import CustomIcons from './components/customIcons';
-import { getInnerWidth } from './utilities/generateInnerWidth';
-import { applyPositionClass } from './utilities/getPosition';
-
-const ModernTextArea: React.FC<TextAreaProps> = ({
-  name,
-  id,
-  label,
-  rows = 5,
-  disabled = false,
-  fullwidth = true,
-  placeholder,
-  className: propsClassName,
-  register,
-  fieldEdit = false,
-  required = false,
-  autoComplete = false,
-  autoFocus = false,
-  onEditComplete,
-  onEditCancel,
-  boxHeight,
-  boxMinHeight,
-  errors,
-  onChange,
-  value,
-  hideLabel = false,
-}) => {
-  // const [editState, setEditState] = useState<boolean>(false)
-  const [isDisabled, setIsDisabled] = useState<boolean>(disabled);
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const adorementRef = useRef<HTMLDivElement>(null);
-  // const onEditIconClick = () => {
-  //   setEditState(true)
-  //   setIsDisabled(false)
-  // }
-  // const onCancelIconClick = () => {
-  //   setEditState(false)
-  //   setIsDisabled(true)
-  //   if (onEditCancel) {
-  //     onEditCancel()
-  //   }
-  // }
-  // const onSaveIconClick = () => {
-  //   setEditState(false)
-  //   setIsDisabled(true)
-  //   if (onEditComplete) {
-  //     onEditComplete()
-  //   }
-  // }
-  // useEffect(() => {
-  //   if (editState) {
-  //     inputRef?.current?.focus()
-  //   }
-  // }, [editState, name])
-  const onLabelClick = () => {
-    if (!isDisabled) {
-      inputRef?.current?.focus();
-    }
-  };
-
-  const checkIsEmptyField = (): boolean => {
-    if (value === undefined) return true;
-    else return (value?.toString().length ?? 0) <= 0 ? true : false;
-  };
-  useEffect(() => {
-    setIsDisabled(disabled);
-  }, [disabled]);
-  const getErrors = (err: any) => {
-    let errMsg = '';
-    if (err.message) {
-      errMsg = err?.message;
-    }
-    return errMsg;
-  };
-  const generateClassName = (
-    type: 'input' | 'label' | 'message' | 'adorement'
-  ): string => {
-    let className = `resize-none ${propsClassName}`;
-    switch (type) {
-      case 'input':
-        className += ` block text-common text-input-text font-normal px-3.5 py-2 w-full text-sm text-gray-900 bg-transparent  border  appearance-none   focus:outline-none focus:ring-0  peer  rounded-[4px] disabled:text-input-disabled disabled:bg-disabled ${
-          hideLabel ? '' : 'placeholder-transparent'
-        } focus:placeholder-grey-secondary`;
-        if (errors && errors[name]) {
-          className +=
-            ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 ';
-        } else {
-          className +=
-            ' text-grey-dark border-input-light focus:border-blue-navy   focus:outline-none  focus:ring-0';
-        }
-        break;
-      //   case 'label': // changes made for remove bg-white from placeolder is field disable and or with data
-      //     className += ` modern-input-label peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-6 z-1 origin-[0] px-0
-      // peer-placeholder-shown:translate-y-0 peer-placeholder-shown:top-[60%] peer-focus:top-2
-      // peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto  ${
-      //   isDisabled ? 'cursor-pointer' : 'cursor-text peer-focus:cursor-pointer'
-      // } ${
-      //       !isDisabled || !checkIsEmptyField()
-      //         ? 'active-input-label-bg'
-      //         : isDisabled && !checkIsEmptyField()
-      //         ? 'disabled-input-label-bg'
-      //         : ''
-      //     } ${
-      //       checkIsEmptyField()
-      //         ? 'modern-input-label-size'
-      //         : 'modern-input-peer-focus-label-size'
-      //     }`;
-
-      //     if (errors && errors[name]) {
-      //       className += ' text-error-light ';
-      //     } else {
-      //       className += ' text-grey-dark peer-focus:text-blue-navy';
-      //     }
-      //     break;
-      case 'label': // changes made for remove bg-white from placeolder is field disable and or with data
-        className += ` flex modern-input-label-truncate peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-1.5 z-1 origin-[0] px-0 
-         peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/6 rtl:peer-focus:left-auto 
-         peer-placeholder-shown:translate-y-2 peer-placeholder-shown:top-[2px] peer-focus:top-1.5 peer-focus:-translate-y-4" ${
-           isDisabled
-             ? 'cursor-pointer'
-             : 'cursor-text peer-focus:cursor-pointer'
-         } ${
-          isDisabled && !checkIsEmptyField()
-            ? 'disabled-input-label-bg'
-            : !isDisabled || !checkIsEmptyField()
-            ? 'active-input-label-bg'
-            : ''
-        } ${
-          checkIsEmptyField()
-            ? 'modern-input-label-size'
-            : 'modern-input-peer-focus-label-size'
-        }`;
-
-        if (errors && errors[name]) {
-          className += ' text-error-light ';
-        } else {
-          className += ' text-grey-dark peer-focus:text-blue-navy';
-        }
-        break;
-
-      case 'message':
-        className = ' text-error-icon ';
-        break;
-      case 'adorement':
-        className +=
-          '  absolute right-0 py-4 adorement gap-1 flex items-center ';
-        break;
-      default:
-        break;
-    }
-    return className;
-  };
-  useEffect(() => {
-    if (autoFocus) {
-      onLabelClick();
-    }
-  }, [autoFocus]);
-  // const getPosition = () => {
-  //   return 'top'
-  // }
-  const handleError = (data: any) => {
-    if (
-      getErrors(data[name]) === 'required' ||
-      getErrors(data[name]) === 'Required'
-    ) {
-      return `${label} is ${getErrors(data[name])}`;
-    } else {
-      return getErrors(data[name]) ?? '';
-    }
-  };
-  const textFieldRef = useRef<HTMLDivElement>(null); // Ref for the text field div
-
-  useEffect(() => {
-    applyPositionClass(textFieldRef, isHovered);
-  }, [isHovered]);
-  return (
-    <div ref={textFieldRef} className={` ${fullwidth ? 'w-full' : 'w-auto'}`}>
-      <div className="tooltip-container">
-        {isHovered && errors && errors[name] && (
-          <span className="tooltip">{errors && handleError(errors)}</span>
-        )}
-
-        <div className={`flex relative ${fullwidth ? 'w-full' : 'w-auto'}`}>
-          <div className="relative w-full">
-            <textarea
-              id={id ? `input-textarea-${id}` : `input-textarea-${name}`}
-              ref={inputRef}
-              disabled={isDisabled}
-              data-testid="textarea"
-              {...register?.(name, { required })}
-              placeholder={placeholder || label}
-              rows={rows || 5}
-              onChange={onChange}
-              value={value}
-              style={{
-                paddingRight: getInnerWidth(adorementRef, 11),
-                height: boxHeight ?? undefined,
-                minHeight: boxMinHeight ?? undefined,
-              }}
-              autoComplete={autoComplete ? 'on' : 'off'}
-              // autoFocus={autoFocus}
-              className={generateClassName('input')}
-            />
-            {!hideLabel && (
-              <label
-                htmlFor={id}
-                onClick={() => onLabelClick()}
-                className={generateClassName('label')}
-              >
-                {label}
-                {required ? <span className="text-error"> *</span> : <></>}
-              </label>
-            )}
-          </div>
-          <div className={generateClassName('adorement')} ref={adorementRef}>
-            {errors && errors[name] && (
-              <div
-                className={` text-error-label text-error-icon cursor-pointer relative ${generateClassName(
-                  'message'
-                )}`}
-                onMouseEnter={() => setIsHovered(true)}
-                onMouseLeave={() => setIsHovered(false)}
-              >
-                <CustomIcons name="alert" type="medium" />
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ModernTextArea;