@eztrak/shared 0.8.1 → 0.11.0

package/dist/components/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/index.ts
 var components_exports = {};
 __export(components_exports, {
+  CardSkeleton: () => CardSkeleton,
   CustomCellEditor: () => CustomCellEditor,
   CustomPagination: () => CustomPagination,
   EztrakTabs: () => EztrakTabs,
@@ -265,18 +266,92 @@ var import_react_router_dom = require("react-router-dom");
 // src/utils/handleApiError.ts
 var import_react_hot_toast = __toESM(require("react-hot-toast"));
 var import_sweetalert2 = __toESM(require("sweetalert2"));
+var BRAND_ORANGE = "#FF7335";
+var CANCEL_RED = "#ff0000";
+function getConfirmErrorMessage(error) {
+  if (error && typeof error === "object") {
+    const err = error;
+    return err.data?.message || err.data?.title || err.message || "Something went wrong. Please try again.";
+  }
+  return "Something went wrong. Please try again.";
+}
 function confirmationAlert(onConfirm, options = {}) {
-  void import_sweetalert2.default.fire({
-    title: options.title ?? "Are you sure?",
-    text: options.text,
-    icon: options.icon ?? "warning",
+  const {
+    title = options.inputExpectedValue ? "Confirmation Required" : "Are you sure?",
+    text,
+    html,
+    icon = "warning",
+    confirmButtonText = "Yes",
+    cancelButtonText = "Cancel",
+    confirmButtonColor = BRAND_ORANGE,
+    cancelButtonColor = CANCEL_RED,
+    showLoaderOnConfirm = false,
+    inputExpectedValue,
+    inputPlaceholder = "Type confirmation text to proceed",
+    reverseButtons,
+    focusCancel,
+    zIndex
+  } = options;
+  const hasInput = Boolean(inputExpectedValue);
+  const useLoader = showLoaderOnConfirm || hasInput;
+  const inputHtml = html ?? (hasInput ? `
+      ${text ? `<p style="margin-bottom: 15px;">${text}</p>` : ""}
+      <p style="margin-bottom: 10px; font-weight: bold; color: #666;">
+        Please type "<span style="color: ${BRAND_ORANGE}; font-weight: bold;">${inputExpectedValue}</span>" to confirm:
+      </p>
+    ` : void 0);
+  const swalOptions = {
+    title,
+    icon,
     showCancelButton: true,
-    confirmButtonText: options.confirmButtonText ?? "Yes",
-    cancelButtonText: options.cancelButtonText ?? "Cancel",
-    confirmButtonColor: "#FF7335"
-  }).then((result) => {
-    if (result.isConfirmed) {
-      onConfirm();
+    confirmButtonText,
+    cancelButtonText,
+    confirmButtonColor,
+    cancelButtonColor,
+    reverseButtons,
+    focusCancel,
+    allowOutsideClick: () => !import_sweetalert2.default.isLoading(),
+    allowEscapeKey: () => !import_sweetalert2.default.isLoading(),
+    didOpen: () => {
+      if (zIndex == null) return;
+      const container = import_sweetalert2.default.getContainer();
+      if (container) container.style.zIndex = String(zIndex);
+    }
+  };
+  if (hasInput) {
+    swalOptions.html = inputHtml;
+    swalOptions.input = "text";
+    swalOptions.inputPlaceholder = inputPlaceholder;
+    swalOptions.inputValidator = (value) => {
+      if (!value?.trim()) return "You need to enter the confirmation text!";
+      if (value.trim() !== inputExpectedValue.trim()) {
+        return `Please type "${inputExpectedValue}" exactly as shown!`;
+      }
+      return null;
+    };
+  } else if (html) {
+    swalOptions.html = html;
+  } else {
+    swalOptions.text = text;
+  }
+  if (useLoader) {
+    swalOptions.showLoaderOnConfirm = true;
+    swalOptions.preConfirm = (inputValue) => {
+      if (hasInput && inputValue?.trim() !== inputExpectedValue.trim()) {
+        import_sweetalert2.default.showValidationMessage(
+          `Please type "${inputExpectedValue}" exactly as shown!`
+        );
+        return false;
+      }
+      return Promise.resolve().then(() => onConfirm()).catch((error) => {
+        import_sweetalert2.default.showValidationMessage(getConfirmErrorMessage(error));
+        throw error;
+      });
+    };
+  }
+  void import_sweetalert2.default.fire(swalOptions).then((result) => {
+    if (result.isConfirmed && !useLoader) {
+      void Promise.resolve(onConfirm());
     }
   });
 }
@@ -980,10 +1055,106 @@ function Modal({
   return (0, import_react_dom.createPortal)(modalContent, modalRoot);
 }
 
+// src/components/skeleton/CardSkeleton.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DEFAULT_LINE_WIDTHS = ["w-32", "w-48"];
+function shouldShowAvatar(variant, showAvatar) {
+  return showAvatar ?? variant === "profile";
+}
+function shouldShowImage(variant, showImage) {
+  return showImage ?? variant === "image";
+}
+function AvatarSkeleton({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    {
+      className: cn("w-10 h-10 text-gray-200 dark:text-gray-700", className),
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" })
+    }
+  );
+}
+function SkeletonBlock({
+  widthClass,
+  className,
+  isFirst
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: cn(
+        isFirst ? "h-2.5 mb-2" : "h-2",
+        "bg-gray-200 rounded-full dark:bg-gray-700",
+        widthClass,
+        className
+      )
+    }
+  );
+}
+function CardSkeleton({
+  variant = "profile",
+  count = 1,
+  lines = 2,
+  lineWidths = DEFAULT_LINE_WIDTHS,
+  showAvatar,
+  showImage,
+  animationDuration = "0.7s",
+  className,
+  style,
+  avatarClassName,
+  imageClassName,
+  contentClassName,
+  lineClassName,
+  srLabel = "Loading...",
+  ...props
+}) {
+  const skeletons = Array.from({ length: Math.max(1, count) }, (_, index) => {
+    const renderAvatar = shouldShowAvatar(variant, showAvatar);
+    const renderImage = shouldShowImage(variant, showImage);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: cn("animate-pulse md:p-6 dark:border-gray-700", className),
+        style: { animationDuration, ...style },
+        ...props,
+        children: [
+          renderImage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "div",
+            {
+              className: cn(
+                "mb-4 h-32 w-full rounded-xl bg-gray-200 dark:bg-gray-700",
+                imageClassName
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex items-center mt-4 gap-4", contentClassName), children: [
+            renderAvatar ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AvatarSkeleton, { className: avatarClassName }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: Array.from({ length: Math.max(1, lines) }, (_2, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              SkeletonBlock,
+              {
+                widthClass: lineWidths[lineIndex] ?? lineWidths[lineWidths.length - 1] ?? DEFAULT_LINE_WIDTHS[1],
+                className: lineClassName,
+                isFirst: lineIndex === 0
+              },
+              lineIndex
+            )) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: srLabel })
+        ]
+      },
+      index
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: skeletons });
+}
+
 // src/components/tooltip/ToolTip.tsx
 var import_react4 = require("react");
 var import_react_tooltip = require("react-tooltip");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var defaultTooltipStyle = {
   color: "#fff",
   borderRadius: "5px",
@@ -1010,10 +1181,10 @@ function ToolTip({
   const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
   const tooltipText = String(text ?? "");
   if (disabled || !tooltipText) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "span",
       {
         className,
@@ -1023,7 +1194,7 @@ function ToolTip({
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_react_tooltip.Tooltip,
       {
         id: tooltipId,
@@ -1067,7 +1238,7 @@ var toDateInputValue = (date) => {
 };
 
 // src/components/tooltip/TooltipText.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function TooltipText({
   text = "",
   maxLength = 20,
@@ -1087,7 +1258,7 @@ function TooltipText({
   const displayText = truncateText(fullText, maxLength);
   const isTruncated = displayText !== fullText;
   const tooltipDisabled = !showTooltip || !hasValue || tooltipWhenTruncatedOnly && !isTruncated;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     ToolTip,
     {
       text: fullText,
@@ -1099,7 +1270,7 @@ function TooltipText({
       tooltipStyle,
       wrapperTabIndex: tooltipDisabled ? void 0 : 0,
       disabled: tooltipDisabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
     }
   );
 }
@@ -1107,9 +1278,9 @@ function TooltipText({
 // src/components/cell-editor/CustomCellEditor.tsx
 var import_react5 = require("react");
 var import_react_hot_toast2 = __toESM(require("react-hot-toast"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ButtonSpinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "svg",
     {
       className: "animate-spin",
@@ -1119,7 +1290,7 @@ function ButtonSpinner() {
       fill: "none",
       "aria-hidden": true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "circle",
           {
             cx: "12",
@@ -1130,7 +1301,7 @@ function ButtonSpinner() {
             strokeOpacity: "0.25"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "path",
           {
             d: "M12 2a10 10 0 0 1 10 10",
@@ -1266,7 +1437,7 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
     const defaultInputClass = "w-48 px-2 py-1 text-sm border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-400";
     const defaultSaveBtnClass = "px-3 py-1 text-sm font-medium text-white bg-green-500 rounded-md hover:bg-green-600 disabled:opacity-50 whitespace-nowrap shrink-0";
     const defaultCancelBtnClass = "px-3 py-1 text-sm font-medium text-white bg-red-500 rounded-md hover:bg-red-600 disabled:opacity-50 whitespace-nowrap shrink-0";
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
       {
         className: cn(
@@ -1275,7 +1446,7 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
         ),
         style: containerStyle,
         children: [
-          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          isDropdown ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "select",
             {
               ref: selectRef,
@@ -1285,11 +1456,11 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
               className: inputClassName ?? defaultInputClass,
               disabled: isLoading,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
-                normalizedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", disabled: true, children: "Select option..." }),
+                normalizedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "input",
             {
               ref: inputRef,
@@ -1302,7 +1473,7 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
               disabled: isLoading
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -1311,10 +1482,10 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
               className: saveButtonClassName ?? (saveButtonStyle ? void 0 : defaultSaveBtnClass),
               style: saveButtonStyle,
               title: "Save (Enter)",
-              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
+              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ButtonSpinner, {}) : saveButtonContent ?? "Save"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -1334,6 +1505,7 @@ var CustomCellEditor = (0, import_react5.forwardRef)(
 CustomCellEditor.displayName = "CustomCellEditor";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CardSkeleton,
   CustomCellEditor,
   CustomPagination,
   EztrakTabs,