react-core-ts 1.1.22 → 1.1.23

package/dist/styles/styles/components/tooltip.css

@@ -0,0 +1,441 @@
+.tooltip-container {
+  position: relative;
+  transition:
+    background-color 0.3s,
+    width 0.3s,
+    height 0.3s,
+    color 0.3s;
+}
+
+.bottom {
+  .tooltip {
+    position: absolute;
+    bottom: -40;
+    right: 3px;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: max-content;
+    max-width: 100%;
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition: all 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+
+    &.info {
+      color: #ffffff !important;
+      border: 1px solid #ffffff;
+      background-color: #000000;
+      right: 1px;
+      top: 5px;
+    }
+
+    &.card {
+      color: #ffffff !important;
+      border: 1px solid #ffffff;
+      background-color: #000000;
+      right: -8px;
+      top: 5px;
+    }
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    right: 20px;
+    z-index: 999;
+    top: -4px;
+    border: 1px solid #e55353;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .info.tooltip::before {
+    border: 1px solid #000000;
+    background-color: #000000;
+    right: 14px;
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    top: -4px;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+  }
+
+  .card.tooltip::before {
+    border: 1px solid #000000;
+    background-color: #000000;
+    right: 14px;
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    top: -3px;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: 46px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+
+    &.info {
+      top: 30px;
+      max-width: 500px;
+      position: absolute;
+    }
+
+    &.card {
+      top: 20px;
+      max-width: 300px;
+      position: absolute;
+    }
+  }
+}
+.top-tool {
+  .tooltip {
+    position: absolute;
+    bottom: 45px !important;
+    left: 0;
+    top: auto !important;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: max-content;
+    white-space: normal;
+    z-index: 999;
+    font-size: 12px;
+    max-width: 100%;
+    color: #ff681d !important;
+    pointer-events: none;
+    transition: all 0.3s;
+    border: 1px solid #ff681d;
+    background-color: #fff;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    bottom: -4px;
+    border: 1px solid #ff681d;
+    border-left: none;
+    border-top: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #fff;
+  }
+
+  .tooltip-container:hover .tooltip {
+    bottom: 45px !important;
+    opacity: 1;
+    top: auto !important;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+.bottom-tool {
+  .tooltip {
+    position: absolute;
+    bottom: -40;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: max-content;
+    max-width: 100%;
+    z-index: 999;
+    font-size: 12px;
+    color: #ff681d !important;
+    white-space: wrap;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #ff681d;
+    background-color: #fff;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    top: -4px;
+    border: 1px solid #ff681d;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #fff;
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: 46px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+
+.right {
+  .tooltip {
+    position: absolute;
+    top: 2.5px;
+    left: calc(100% + 9px);
+    transform: translateX(0%);
+    padding: 8px;
+    opacity: 0;
+    min-width: 200px;
+    max-width: 200px;
+    min-height: calc(100% - 16px);
+    height: auto;
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip-card {
+    padding: 3px 10px 4px;
+    top: -4px;
+    min-width: 175px;
+    background-color: #3d414a;
+    border: 1px solid #3d414a;
+
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    left: -8px;
+    top: 14px;
+    z-index: 999;
+    transform: translateY(10px);
+    border: 1px solid #e55353;
+    border-top: none;
+    border-right: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .tooltip-card::before {
+    top: 8px;
+    background-color: #3d414a;
+    border: 1px solid #3d414a;
+  }
+
+  .tooltip-container:hover {
+    .tooltip {
+      top: 2.5px;
+      opacity: 1;
+      visibility: visible;
+      z-index: 999;
+      pointer-events: auto;
+    }
+
+    .tooltip-card {
+      top: -4px;
+    }
+  }
+}
+
+.left {
+  .tooltip {
+    position: absolute;
+    top: 2.5px;
+    right: calc(100% + 9px);
+    transform: translateX(0%);
+    padding: 8px;
+    opacity: 0;
+    min-width: 200px;
+    max-width: 200px;
+    min-height: calc(100% - 16px);
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    right: 0px;
+    top: 14px;
+    z-index: 999;
+    transform: translateY(10px);
+    border: 1px solid #e55353;
+    border-bottom: none;
+    border-left: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: 2.5px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+
+.top {
+  .tooltip {
+    position: absolute;
+    top: -40;
+    left: 0;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: 100%;
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    right: 20px;
+    z-index: 999;
+    bottom: -4px;
+    border: 1px solid #e55353;
+    border-left: none;
+    border-top: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: -40px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+
+.custom-tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-text {
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.custom-tooltip {
+  position: absolute;
+  top: 100%;
+  left: 20%;
+  opacity: 0;
+  visibility: hidden;
+  font-size: 12px;
+  background: #deefff;
+  border-color: #bee0ff;
+  padding: 5px;
+  align-items: center;
+  transition:
+    opacity 0.3s,
+    visibility 0.3s,
+    top 0.3s,
+    background 0.3s;
+  z-index: 1;
+}
+
+.custom-tooltip::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 20%;
+  /* Center the arrow */
+  border-width: 9px;
+  /* Slightly larger to act as border */
+  border-style: solid;
+  border-color: transparent transparent #bee0ff transparent;
+  /* Border color */
+  transform: translateX(-20%);
+  z-index: -1;
+  /* Ensure it's behind the ::after pseudo-element */
+}
+
+.custom-tooltip::after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 20%;
+  border-width: 8px;
+  border-style: solid;
+  border-color: transparent transparent #deefff transparent;
+  transform: translateX(-20%);
+  z-index: 1;
+}
+
+.custom-tooltip-container:hover .custom-tooltip {
+  top: 100%;
+  opacity: 1;
+  visibility: visible;
+  background: #deefff;
+  transform: translate(-20%, 10px);
+}

package/dist/styles/styles/components/treedropdown.css

@@ -0,0 +1,63 @@
+.qbs-tree-list-container {
+  display: flex;
+  flex-direction: column;
+}
+.qbs-tree-list-container-sub {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1rem; /* Corresponds to gap-4 in Tailwind */
+}
+
+.qbs-tree-list-container-sub .no-children {
+  margin-left: 1.75rem; /* Corresponds to ml-7 in Tailwind */
+}
+.qbs-tree-list-container-sub-icon {
+  margin-top: 0.25rem; /* Corresponds to mt-1 in Tailwind */
+  cursor: pointer;
+  padding-top: 0.5rem; /* Corresponds to py-2 in Tailwind */
+  padding-bottom: 0.5rem;
+  transition: transform 0.3s ease; /* Smooth rotation transition */
+}
+
+.qbs-tree-list-container-sub-icon.expanded {
+  transform: rotate(90deg); /* Corresponds to rotate-90 in Tailwind */
+}
+.qbs-tree-list-container-sub-container {
+  display: flex;
+  gap: 0.5rem; /* Corresponds to gap-2 in Tailwind */
+  padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
+  flex-direction: row; /* Corresponds to flex-row in Tailwind */
+  width: 100%; /* Corresponds to w-full in Tailwind */
+}
+
+.qbs-tree-list-container-sub-container.checked {
+  background-color: rgba(
+    141,
+    194,
+    240,
+    0.15
+  ) !important; /* Corresponds to bg-green-200 in Tailwind */
+}
+.qbs-tree-list-container-sub-container.marginLeft {
+  margin-left: 28px; /* Corresponds to ml-2 in Tailwind */
+}
+.qbs-tree-list-container-sub- {
+  line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
+  font-size: 0.875rem; /* Corresponds to text-sm in Tailwind (14px) */
+}
+.qbs-tree-list-container-child {
+  margin-left: 1rem; /* Corresponds to ml-4 in Tailwind */
+  margin-top: 0.5rem; /* Corresponds to mt-2 in Tailwind */
+  display: flex; /* Corresponds to flex in Tailwind */
+  flex-direction: column; /* Corresponds to flex-col in Tailwind */
+  gap: 0.5rem; /* Corresponds to gap-2 in Tailwind */
+}
+.qbs-tree-list-container-sub-text {
+  line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
+  font-size: 14px; /* Corresponds to text-sm in Tailwind (14px) */
+  font-weight: 500;
+  letter-spacing: 0.28px;
+  font-family: 'Noto Sans';
+  color: #3d414a;
+}

package/dist/styles/styles/global.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './components/autocomplete.css';
+@import './components/treedropdown.css';
+@import './components/selectedautocomplete.css';
+@import './components/tooltip.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ReactOTPInput.tsx

@@ -0,0 +1,195 @@
+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 ">
+          {Array(BoxLength)
+            .fill("")
+            .map((_, index) => (
+              <input
+                key={index}
+                name={name}
+                id={id}
+                type="text"
+                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="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;