catchup-library-web 1.0.0

package/src/components/buttons/ApproveButton.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import BaseImage from "../images/BaseImage";
+import BaseLoading from "../loading/BaseLoading";
+import { IButtonProps } from "../../properties/ButtonProperties";
+
+const ApproveButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly,
+}: IButtonProps) => {
+  const [loading, setLoading] = useState(false);
+
+  const internalOnClick = async () => {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    await onClick();
+    setLoading(false);
+  };
+
+  let currentWidthClassName;
+  let currentHeightClassName;
+  let currentLoadingSize;
+  if (size === "small") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-8";
+    currentLoadingSize = 14;
+  } else if (size === "medium") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  } else if (size === "large") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-12";
+    currentLoadingSize = 18;
+  } else if (size === "unlimited") {
+    currentLoadingSize = 14;
+    currentHeightClassName = "h-8";
+  }
+
+  return (
+    <button
+      className={`border border-catchup-green bg-catchup-green text-catchup-white rounded-catchup-button ${
+        loading
+          ? ""
+          : disabled
+          ? "opacity-50"
+          : "hover:bg-catchup-hover-green active:bg-catchup-green"
+      } transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`}
+      onClick={internalOnClick}
+    >
+      {loading ? (
+        <BaseLoading
+          height={currentLoadingSize}
+          width={currentLoadingSize}
+          primaryColor="#ffffff"
+          secondaryColor="#ffffff"
+        />
+      ) : (
+        <div className="flex flex-row justify-center items-center gap-x-2 px-4">
+          {iconPosition === "left" ? (
+            <BaseImage
+              src="/icons/primary-button-arrow-left.png"
+              alt="arrow-left"
+              size="xsmall"
+            />
+          ) : null}
+          {iconOnly ? null : <p className="">{title}</p>}
+
+          {textOnly || iconPosition === "left" ? null : (
+            <BaseImage
+              src="/icons/primary-button-arrow-right.png"
+              alt="arrow-right"
+              size="xsmall"
+            />
+          )}
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default ApproveButton;

package/src/components/buttons/CancelButton.tsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import BaseImage from "../images/BaseImage";
+import BaseLoading from "../loading/BaseLoading";
+import { IButtonProps } from "../../properties/ButtonProperties";
+
+const CancelButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly,
+}: IButtonProps) => {
+  const [loading, setLoading] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const internalOnClick = async () => {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    await onClick();
+    setLoading(false);
+  };
+
+  let currentWidthClassName;
+  let currentHeightClassName;
+  let currentLoadingSize;
+  if (size === "small") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-8";
+    currentLoadingSize = 14;
+  } else if (size === "medium") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  } else if (size === "large") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-12";
+    currentLoadingSize = 18;
+  } else if (size === "unlimited") {
+    currentLoadingSize = 14;
+    currentHeightClassName = "h-8";
+  }
+
+  return (
+    <button
+      className={`border border-catchup-gray-400 bg-catchup-white text-catchup-gray-600 rounded-catchup-button ${
+        loading
+          ? ""
+          : disabled
+          ? "opacity-50"
+          : "hover:bg-catchup-gray-400 hover:text-catchup-white hover:border-catchup-gray-400 active:bg-catchup-gray-500 active:border-catchup-gray-500 active:text-catchup-white"
+      } transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`}
+      onClick={internalOnClick}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      {loading ? (
+        <BaseLoading
+          height={currentLoadingSize}
+          width={currentLoadingSize}
+          primaryColor="#55777f"
+          secondaryColor="#55777f"
+        />
+      ) : (
+        <div className="flex flex-row justify-center items-center gap-x-2">
+          {iconPosition === "left" ? (
+            <BaseImage
+              src={`${
+                isHovered
+                  ? "/icons/cancel-button-arrow-left-white.png"
+                  : "/icons/cancel-button-arrow-left.png"
+              }`}
+              alt="arrow-left"
+              size="xsmall"
+            />
+          ) : null}
+          {iconOnly ? null : <p className="">{title}</p>}
+
+          {textOnly || iconPosition === "left" ? null : (
+            <BaseImage
+              src={`${
+                isHovered
+                  ? "/icons/cancel-button-arrow-left-white.png"
+                  : "/icons/cancel-button-arrow-left.png"
+              }`}
+              alt="arrow-left"
+              size="xsmall"
+            />
+          )}
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default CancelButton;

package/src/components/buttons/CreateButton.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import BaseImage from "../images/BaseImage";
+import BaseLoading from "../loading/BaseLoading";
+import { IButtonProps } from "../../properties/ButtonProperties";
+
+const CreateButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly,
+}: IButtonProps) => {
+  const [loading, setLoading] = useState(false);
+
+  const internalOnClick = async () => {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    await onClick();
+    setLoading(false);
+  };
+
+  let currentWidthClassName;
+  let currentHeightClassName;
+  let currentLoadingSize;
+  if (size === "small") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-8";
+    currentLoadingSize = 14;
+  } else if (size === "medium") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  } else if (size === "large") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-12";
+    currentLoadingSize = 18;
+  } else if (size === "unlimited") {
+    currentLoadingSize = 14;
+    currentHeightClassName = "h-8";
+  }
+
+  return (
+    <button
+      className={`border border-catchup-blue-500 bg-catchup-blue-500 text-catchup-white rounded-catchup-button ${
+        loading
+          ? ""
+          : disabled
+          ? "opacity-50"
+          : "hover:bg-catchup-blue-700 active:bg-catchup-blue-500"
+      } transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`}
+      onClick={internalOnClick}
+    >
+      {loading ? (
+        <BaseLoading
+          height={currentLoadingSize}
+          width={currentLoadingSize}
+          primaryColor="#ffffff"
+          secondaryColor="#ffffff"
+        />
+      ) : (
+        <div className="flex flex-row justify-center items-center gap-x-2 px-4">
+          {iconPosition === "left" ? (
+            <BaseImage
+              src="/icons/primary-button-create-white.png"
+              alt="create"
+              size="xsmall"
+            />
+          ) : null}
+
+          {iconOnly ? null : <p className="">{title}</p>}
+          {textOnly || iconPosition === "left" ? null : (
+            <BaseImage
+              src="/icons/primary-button-create-white.png"
+              alt="create"
+              size="xsmall"
+            />
+          )}
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default CreateButton;

package/src/components/buttons/DeleteButton.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import BaseImage from "../images/BaseImage";
+import BaseLoading from "../loading/BaseLoading";
+import { IButtonProps } from "../../properties/ButtonProperties";
+
+const DeleteButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly,
+}: IButtonProps) => {
+  const [loading, setLoading] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const internalOnClick = async () => {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    await onClick();
+    setLoading(false);
+  };
+
+  let currentWidthClassName;
+  let currentHeightClassName;
+  let currentLoadingSize;
+  if (size === "small") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-8";
+    currentLoadingSize = 14;
+  } else if (size === "medium") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  } else if (size === "large") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-12";
+    currentLoadingSize = 18;
+  }
+
+  return (
+    <button
+      className={`border border-catchup-red bg-catchup-white text-catchup-red rounded-catchup-button ${
+        loading
+          ? ""
+          : disabled
+          ? "opacity-50"
+          : "hover:bg-catchup-red hover:text-catchup-white hover:border-catchup-red active:bg-catchup-red active:hover:border-catchup-red active:text-catchup-white active:opacity-80"
+      } transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`}
+      onClick={internalOnClick}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      {loading ? (
+        <BaseLoading
+          height={currentLoadingSize}
+          width={currentLoadingSize}
+          primaryColor="#55777f"
+          secondaryColor="#55777f"
+        />
+      ) : (
+        <div className="flex flex-row justify-center items-center gap-x-2">
+          {iconPosition === "left" ? (
+            <BaseImage
+              src={`${
+                isHovered ? "/icons/remove-white.png" : "/icons/remove-red.png"
+              }`}
+              alt="remove-white"
+              size="xsmall"
+            />
+          ) : null}
+          {iconOnly ? null : <p className="">{title}</p>}
+
+          {textOnly || iconPosition === "left" ? null : (
+            <BaseImage
+              src={`${
+                isHovered ? "/icons/remove-white.png" : "/icons/remove-red.png"
+              }`}
+              alt="remove-white"
+              size="xsmall"
+            />
+          )}
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default DeleteButton;

package/src/components/buttons/PrimaryButton.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import BaseImage from "../images/BaseImage";
+import BaseLoading from "../loading/BaseLoading";
+import { IButtonProps } from "../../properties/ButtonProperties";
+
+const PrimaryButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly,
+}: IButtonProps) => {
+  const [loading, setLoading] = useState(false);
+
+  const internalOnClick = async () => {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    await onClick();
+    setLoading(false);
+  };
+
+  let currentWidthClassName;
+  let currentHeightClassName;
+  let currentLoadingSize;
+  if (size === "small") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-8";
+    currentLoadingSize = 14;
+  } else if (size === "medium") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  } else if (size === "large") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-12";
+    currentLoadingSize = 18;
+  } else if (size === "unlimited") {
+    currentLoadingSize = 14;
+    currentHeightClassName = "h-8";
+  }
+
+  return (
+    <button
+      className={`border border-catchup-blue-500 bg-catchup-blue-500 text-catchup-white rounded-catchup-button ${
+        loading
+          ? ""
+          : disabled
+          ? "opacity-50"
+          : "hover:bg-catchup-blue-700 active:bg-catchup-blue-500"
+      } transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`}
+      onClick={internalOnClick}
+    >
+      {loading ? (
+        <BaseLoading
+          height={currentLoadingSize}
+          width={currentLoadingSize}
+          primaryColor="#ffffff"
+          secondaryColor="#ffffff"
+        />
+      ) : (
+        <div className="flex flex-row justify-center items-center gap-x-2 px-4">
+          {iconPosition === "left" ? (
+            <BaseImage
+              src="/icons/new/primary-button-arrow-left.png"
+              alt="arrow-left"
+              size="xsmall"
+            />
+          ) : null}
+
+          {iconOnly ? null : <p className="">{title}</p>}
+
+          {textOnly || iconPosition === "left" ? null : (
+            <BaseImage
+              src="/icons/primary-button-arrow-right.png"
+              alt="arrow-right"
+              size="xsmall"
+            />
+          )}
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default PrimaryButton;

package/src/components/buttons/SecondaryButton.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import BaseImage from "../images/BaseImage";
+import BaseLoading from "../loading/BaseLoading";
+import { IButtonProps } from "../../properties/ButtonProperties";
+
+const SecondaryButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly,
+}: IButtonProps) => {
+  const [loading, setLoading] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const internalOnClick = async () => {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    await onClick();
+    setLoading(false);
+  };
+
+  let currentWidthClassName;
+  let currentHeightClassName;
+  let currentLoadingSize;
+  if (size === "small") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-8";
+    currentLoadingSize = 14;
+  } else if (size === "medium") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  } else if (size === "large") {
+    currentWidthClassName = "w-32";
+    currentHeightClassName = "h-12";
+    currentLoadingSize = 18;
+  } else if (size === "unlimited") {
+    currentLoadingSize = 14;
+    currentHeightClassName = "h-8";
+  }
+
+  return (
+    <button
+      className={`border border-catchup-gray-400 bg-catchup-white text-catchup-gray-600 rounded-catchup-button ${
+        loading
+          ? ""
+          : disabled
+          ? "opacity-50"
+          : "hover:bg-catchup-gray-400 hover:text-catchup-white hover:border-catchup-gray-400 active:bg-catchup-gray-500 active:border-catchup-gray-500 active:text-catchup-white"
+      } transition duration-300 ${currentWidthClassName} ${currentHeightClassName}`}
+      onClick={internalOnClick}
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}
+    >
+      {loading ? (
+        <BaseLoading
+          height={currentLoadingSize}
+          width={currentLoadingSize}
+          primaryColor="#55777f"
+          secondaryColor="#55777f"
+        />
+      ) : (
+        <div className="flex flex-row justify-center items-center gap-x-2 px-4">
+          {iconPosition === "left" ? (
+            <BaseImage
+              src="/icons/new/secondary-button-arrow-left.png"
+              alt="arrow-left"
+              size="xsmall"
+            />
+          ) : null}
+          {iconOnly ? null : <p className="">{title}</p>}
+
+          {textOnly || iconPosition === "left" ? null : (
+            <BaseImage
+              src="/icons/secondary-button-arrow-right.png"
+              alt="arrow-right"
+              size="xsmall"
+            />
+          )}
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default SecondaryButton;

package/src/components/images/BaseImage.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import BaseLoading from "../loading/BaseLoading";
+import { IBaseImageProps } from "../../properties/ImageProperties";
+
+const BaseImage = (props: IBaseImageProps) => {
+  const {
+    ref,
+    size,
+    className,
+    widthClassName,
+    heightClassName,
+    src,
+    alt,
+    showLoading,
+    onLoad,
+    onClick,
+    dataToolTipId,
+    dataToolTipContent,
+    dataToolTipPlace,
+    dataToolTipVariant,
+    dataToolTipHTML,
+  } = props;
+  const [loading, setLoading] = useState(false);
+
+  const handleOnClick = (e: any) => {
+    e.preventDefault();
+    if (showLoading) {
+      setLoading(true);
+      onClick && onClick(e);
+      setLoading(false);
+    } else {
+      onClick && onClick(e);
+    }
+  };
+
+  if (!src) return null;
+
+  let currentClassName;
+  let currentWidthClassName;
+  let currentHeightClassName;
+  if (size === "xsmall") {
+    currentWidthClassName = "w-4";
+    currentHeightClassName = "h-4";
+  } else if (size === "small") {
+    currentWidthClassName = "w-6";
+    currentHeightClassName = "h-6";
+  } else if (size === "medium") {
+    currentWidthClassName = "w-8";
+    currentHeightClassName = "h-8";
+  } else if (size === "large") {
+    currentWidthClassName = "w-10";
+    currentHeightClassName = "h-10";
+  } else if (size === "xlarge") {
+    currentWidthClassName = "w-12";
+    currentHeightClassName = "h-12";
+  } else if (size === "2xlarge") {
+    currentWidthClassName = "w-14";
+    currentHeightClassName = "h-14";
+  } else if (size === "3xlarge") {
+    currentWidthClassName = "w-16";
+    currentHeightClassName = "h-16";
+  } else if (size === "custom") {
+    currentClassName = className;
+    currentWidthClassName = widthClassName;
+    currentHeightClassName = heightClassName;
+  }
+
+  return loading ? (
+    <BaseLoading size="small" primaryColor="#57C2D3" secondaryColor="#57C2D3" />
+  ) : (
+    <div
+      className={`${currentWidthClassName ? currentWidthClassName : ""} ${
+        currentHeightClassName ? currentHeightClassName : ""
+      } ${currentClassName ? currentClassName : ""} cursor-pointer`}
+      onClick={handleOnClick}
+    >
+      <img
+        ref={ref}
+        className="w-full"
+        src={src}
+        alt={alt}
+        onLoad={onLoad}
+        data-tooltip-id={dataToolTipId}
+        data-tooltip-content={dataToolTipContent}
+        data-tooltip-place={dataToolTipPlace}
+        data-tooltip-variant={dataToolTipVariant}
+        data-tooltip-html={dataToolTipHTML}
+      />
+    </div>
+  );
+};
+
+export default BaseImage;

package/src/components/loading/BaseLoading.tsx

@@ -0,0 +1,50 @@
+import { Oval } from "react-loader-spinner";
+import { IBaseLoadingProps } from "../../properties/LoadingProperties";
+
+const BaseLoading = ({
+  height,
+  width,
+  size,
+  primaryColor,
+  secondaryColor,
+}: IBaseLoadingProps) => {
+  let currentHeight;
+  let currentWidth;
+
+  if (size === "small") {
+    currentHeight = 18;
+    currentWidth = 18;
+  } else if (size === "medium") {
+    currentHeight = 48;
+    currentWidth = 48;
+  } else if (size === "large") {
+    currentHeight = 72;
+    currentWidth = 72;
+  } else if (size === "xlarge") {
+    currentHeight = 96;
+    currentWidth = 96;
+  } else {
+    currentHeight = height;
+    currentWidth = width;
+  }
+
+  // px-4 py-2
+  return (
+    <div className="flex justify-center items-center">
+      <Oval
+        height={currentHeight}
+        width={currentWidth}
+        wrapperStyle={{}}
+        wrapperClass=""
+        visible={true}
+        ariaLabel="oval-loading"
+        color={primaryColor}
+        secondaryColor={secondaryColor}
+        strokeWidth={2}
+        strokeWidthSecondary={2}
+      />
+    </div>
+  );
+};
+
+export default BaseLoading;