catchup-library-web 1.0.0

package/dist/index.mjs

@@ -0,0 +1,641 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/components/buttons/PrimaryButton.tsx
+import { useState as useState2 } from "react";
+
+// src/components/images/BaseImage.tsx
+import { useState } from "react";
+
+// src/components/loading/BaseLoading.tsx
+import { Oval } from "react-loader-spinner";
+import { jsx } from "react/jsx-runtime";
+var BaseLoading = ({
+  height,
+  width,
+  size,
+  primaryColor,
+  secondaryColor
+}) => {
+  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;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx(
+    Oval,
+    {
+      height: currentHeight,
+      width: currentWidth,
+      wrapperStyle: {},
+      wrapperClass: "",
+      visible: true,
+      ariaLabel: "oval-loading",
+      color: primaryColor,
+      secondaryColor,
+      strokeWidth: 2,
+      strokeWidthSecondary: 2
+    }
+  ) });
+};
+var BaseLoading_default = BaseLoading;
+
+// src/components/images/BaseImage.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BaseImage = (props) => {
+  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) => {
+    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 ? /* @__PURE__ */ jsx2(BaseLoading_default, { size: "small", primaryColor: "#57C2D3", secondaryColor: "#57C2D3" }) : /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer`,
+      onClick: handleOnClick,
+      children: /* @__PURE__ */ jsx2(
+        "img",
+        {
+          ref,
+          className: "w-full",
+          src,
+          alt,
+          onLoad,
+          "data-tooltip-id": dataToolTipId,
+          "data-tooltip-content": dataToolTipContent,
+          "data-tooltip-place": dataToolTipPlace,
+          "data-tooltip-variant": dataToolTipVariant,
+          "data-tooltip-html": dataToolTipHTML
+        }
+      )
+    }
+  );
+};
+var BaseImage_default = BaseImage;
+
+// src/components/buttons/PrimaryButton.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var PrimaryButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly
+}) => {
+  const [loading, setLoading] = useState2(false);
+  const internalOnClick = () => __async(void 0, null, function* () {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    yield 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 /* @__PURE__ */ jsx3(
+    "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,
+      children: loading ? /* @__PURE__ */ jsx3(
+        BaseLoading_default,
+        {
+          height: currentLoadingSize,
+          width: currentLoadingSize,
+          primaryColor: "#ffffff",
+          secondaryColor: "#ffffff"
+        }
+      ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx3(
+          BaseImage_default,
+          {
+            src: "/icons/new/primary-button-arrow-left.png",
+            alt: "arrow-left",
+            size: "xsmall"
+          }
+        ) : null,
+        iconOnly ? null : /* @__PURE__ */ jsx3("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx3(
+          BaseImage_default,
+          {
+            src: "/icons/primary-button-arrow-right.png",
+            alt: "arrow-right",
+            size: "xsmall"
+          }
+        )
+      ] })
+    }
+  );
+};
+var PrimaryButton_default = PrimaryButton;
+
+// src/components/buttons/SecondaryButton.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var SecondaryButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly
+}) => {
+  const [loading, setLoading] = useState3(false);
+  const [isHovered, setIsHovered] = useState3(false);
+  const internalOnClick = () => __async(void 0, null, function* () {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    yield 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 /* @__PURE__ */ jsx4(
+    "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);
+      },
+      children: loading ? /* @__PURE__ */ jsx4(
+        BaseLoading_default,
+        {
+          height: currentLoadingSize,
+          width: currentLoadingSize,
+          primaryColor: "#55777f",
+          secondaryColor: "#55777f"
+        }
+      ) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx4(
+          BaseImage_default,
+          {
+            src: "/icons/new/secondary-button-arrow-left.png",
+            alt: "arrow-left",
+            size: "xsmall"
+          }
+        ) : null,
+        iconOnly ? null : /* @__PURE__ */ jsx4("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx4(
+          BaseImage_default,
+          {
+            src: "/icons/secondary-button-arrow-right.png",
+            alt: "arrow-right",
+            size: "xsmall"
+          }
+        )
+      ] })
+    }
+  );
+};
+var SecondaryButton_default = SecondaryButton;
+
+// src/components/buttons/CreateButton.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var CreateButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly
+}) => {
+  const [loading, setLoading] = useState4(false);
+  const internalOnClick = () => __async(void 0, null, function* () {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    yield 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 /* @__PURE__ */ jsx5(
+    "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,
+      children: loading ? /* @__PURE__ */ jsx5(
+        BaseLoading_default,
+        {
+          height: currentLoadingSize,
+          width: currentLoadingSize,
+          primaryColor: "#ffffff",
+          secondaryColor: "#ffffff"
+        }
+      ) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx5(
+          BaseImage_default,
+          {
+            src: "/icons/primary-button-create-white.png",
+            alt: "create",
+            size: "xsmall"
+          }
+        ) : null,
+        iconOnly ? null : /* @__PURE__ */ jsx5("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx5(
+          BaseImage_default,
+          {
+            src: "/icons/primary-button-create-white.png",
+            alt: "create",
+            size: "xsmall"
+          }
+        )
+      ] })
+    }
+  );
+};
+var CreateButton_default = CreateButton;
+
+// src/components/buttons/DeleteButton.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var DeleteButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly
+}) => {
+  const [loading, setLoading] = useState5(false);
+  const [isHovered, setIsHovered] = useState5(false);
+  const internalOnClick = () => __async(void 0, null, function* () {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    yield 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 /* @__PURE__ */ jsx6(
+    "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);
+      },
+      children: loading ? /* @__PURE__ */ jsx6(
+        BaseLoading_default,
+        {
+          height: currentLoadingSize,
+          width: currentLoadingSize,
+          primaryColor: "#55777f",
+          secondaryColor: "#55777f"
+        }
+      ) : /* @__PURE__ */ jsxs4("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx6(
+          BaseImage_default,
+          {
+            src: `${isHovered ? "/icons/remove-white.png" : "/icons/remove-red.png"}`,
+            alt: "remove-white",
+            size: "xsmall"
+          }
+        ) : null,
+        iconOnly ? null : /* @__PURE__ */ jsx6("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx6(
+          BaseImage_default,
+          {
+            src: `${isHovered ? "/icons/remove-white.png" : "/icons/remove-red.png"}`,
+            alt: "remove-white",
+            size: "xsmall"
+          }
+        )
+      ] })
+    }
+  );
+};
+var DeleteButton_default = DeleteButton;
+
+// src/components/buttons/CancelButton.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var CancelButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly
+}) => {
+  const [loading, setLoading] = useState6(false);
+  const [isHovered, setIsHovered] = useState6(false);
+  const internalOnClick = () => __async(void 0, null, function* () {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    yield 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 /* @__PURE__ */ jsx7(
+    "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);
+      },
+      children: loading ? /* @__PURE__ */ jsx7(
+        BaseLoading_default,
+        {
+          height: currentLoadingSize,
+          width: currentLoadingSize,
+          primaryColor: "#55777f",
+          secondaryColor: "#55777f"
+        }
+      ) : /* @__PURE__ */ jsxs5("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx7(
+          BaseImage_default,
+          {
+            src: `${isHovered ? "/icons/cancel-button-arrow-left-white.png" : "/icons/cancel-button-arrow-left.png"}`,
+            alt: "arrow-left",
+            size: "xsmall"
+          }
+        ) : null,
+        iconOnly ? null : /* @__PURE__ */ jsx7("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx7(
+          BaseImage_default,
+          {
+            src: `${isHovered ? "/icons/cancel-button-arrow-left-white.png" : "/icons/cancel-button-arrow-left.png"}`,
+            alt: "arrow-left",
+            size: "xsmall"
+          }
+        )
+      ] })
+    }
+  );
+};
+var CancelButton_default = CancelButton;
+
+// src/components/buttons/ApproveButton.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var ApproveButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+  iconPosition,
+  textOnly,
+  iconOnly
+}) => {
+  const [loading, setLoading] = useState7(false);
+  const internalOnClick = () => __async(void 0, null, function* () {
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    yield 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 /* @__PURE__ */ jsx8(
+    "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,
+      children: loading ? /* @__PURE__ */ jsx8(
+        BaseLoading_default,
+        {
+          height: currentLoadingSize,
+          width: currentLoadingSize,
+          primaryColor: "#ffffff",
+          secondaryColor: "#ffffff"
+        }
+      ) : /* @__PURE__ */ jsxs6("div", { className: "flex flex-row justify-center items-center gap-x-2 px-4", children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsx8(
+          BaseImage_default,
+          {
+            src: "/icons/primary-button-arrow-left.png",
+            alt: "arrow-left",
+            size: "xsmall"
+          }
+        ) : null,
+        iconOnly ? null : /* @__PURE__ */ jsx8("p", { className: "", children: title }),
+        textOnly || iconPosition === "left" ? null : /* @__PURE__ */ jsx8(
+          BaseImage_default,
+          {
+            src: "/icons/primary-button-arrow-right.png",
+            alt: "arrow-right",
+            size: "xsmall"
+          }
+        )
+      ] })
+    }
+  );
+};
+var ApproveButton_default = ApproveButton;
+export {
+  ApproveButton_default as ApproveButton,
+  BaseImage_default as BaseImage,
+  BaseLoading_default as BaseLoading,
+  CancelButton_default as CancelButton,
+  CreateButton_default as CreateButton,
+  DeleteButton_default as DeleteButton,
+  PrimaryButton_default as PrimaryButton,
+  SecondaryButton_default as SecondaryButton
+};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "catchup-library-web",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsup src/index.ts --format esm,cjs --dts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-loader-spinner": "^6.1.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3"
+  }
+}