@sustaina/shared-ui 1.12.0 → 1.13.0

package/dist/index.js

@@ -18,6 +18,9 @@ var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var reactTable = require('@tanstack/react-table');
 var SheetPrimitive = require('@radix-ui/react-dialog');
+var i18n = require('i18next');
+var reactI18next = require('react-i18next');
+var zustand = require('zustand');
 var zod$1 = require('@hookform/resolvers/zod');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
@@ -25,7 +28,6 @@ var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 var zod = require('zod');
-var zustand = require('zustand');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var lexical = require('lexical');
 var LexicalComposer = require('@lexical/react/LexicalComposer');
@@ -80,6 +82,7 @@ var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitiv
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
@@ -4760,9 +4763,11 @@ var buttonVariants2 = classVarianceAuthority.cva(
       variant: {
         default: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground  dark:border-input dark:hover:bg-input/50",
         success: "bg-sus-primary-1 text-primary-foreground shadow-xs hover:bg-sus-primary/90",
-        error: "border border-[#BB0B0E] bg-[#BB0B0E] shadow-xs hover:bg-accent hover:text-accent-foreground text-white",
+        error: "border border-[#BB0B0E] text-[#BB0B0E] bg-white shadow-xs hover:bg-accent hover:text-accent-foreground",
         warning: "bg-yellow-500 text-black shadow-xs hover:bg-yellow-600 dark:hover:bg-yellow-400",
-        cancel: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:hover:bg-input/50"
+        cancel: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:hover:bg-input/50",
+        confirm: "border border-[#BB0B0E] text-[#BB0B0E] bg-white shadow-xs hover:bg-accent hover:text-accent-foreground",
+        "confirm-green": "border border-[#379A2A] text-[#379A2A] bg-white shadow-xs hover:bg-accent hover:text-accent-foreground"
       },
       size: {
         default: "h-9 px-4 has-[>svg]:px-3",
@@ -4804,6 +4809,154 @@ function Button2({
     }
   );
 }
+
+// src/components/dialog-alert/lib/constants.ts
+var DIALOG_ALERT_I18N_NAMESPACE = "dialog_alert";
+
+// src/components/dialog-alert/locale/default.ts
+var defaultResource = {
+  sharedui: {
+    [DIALOG_ALERT_I18N_NAMESPACE]: {
+      cancel: "Cancel",
+      close: "Close",
+      "success.saved": {
+        title: "Successfully",
+        description: "Data has been successfully saved"
+      },
+      "success.deleted": {
+        title: "Successfully",
+        description: "Data has been successfully deleted"
+      },
+      "success.removed": {
+        title: "Successfully",
+        description: "Data has been successfully removed"
+      },
+      "error.api_db_error": {
+        title: "API/Database Error",
+        description: "Failed to connect to the system. Please check API or database connection."
+      },
+      "error.permission_denied": {
+        title: "Permission Denied",
+        description: "You do not have permission to delete this data.",
+        confirm_text: "Discard"
+      },
+      "error.session_expired": {
+        title: "Session Expired",
+        description: "Your session has expired or you have been logged out. Please sign in again.",
+        confirm_text: "Logout"
+      },
+      "error.user_not_found": {
+        title: "User Not Found",
+        description: "The system could not locate the user account.",
+        confirm_text: "Logout"
+      },
+      "error.data_not_found": {
+        title: "Data Not Found",
+        description: "The data has already been deleted or does not exist in the system."
+      },
+      "error.data_restrict_editing": {
+        title: "Data Status Restricts Editing",
+        description: "Data status does not allow editing."
+      },
+      "error.network_timeout_error": {
+        title: "Network Error / Timeout",
+        description: "The system could not connect to the network or the request took too long to process."
+      },
+      "error.queue_full": {
+        title: "Queue Full",
+        description: "The notification queue has reached its limit. Please try again later."
+      },
+      "error.invalid_data_format": {
+        title: "Invalid Data Format",
+        description: "Data creation failed due to invalid or incorrectly formatted data."
+      },
+      "error.data_linked_to_system_data": {
+        title: "Data Linked to System Data",
+        description: "Cannot delete data because they are linked to existing system data."
+      },
+      "error.pending_workflow_conflict": {
+        title: "Pending Workflow Conflict ",
+        description: "The data is currently involved in a pending workflow or approval process and cannot be deactivated."
+      },
+      "error.invalid_incomplete_data": {
+        title: "Invalid or Incomplete Data",
+        description: "Data status cannot be changed due to incomplete or invalid information."
+      },
+      "error.client_side_error": {
+        title: "Client-Side Error",
+        description: "An error occurred on the client side. Please refresh the page or try again."
+      },
+      "error.system_limitation": {
+        title: "System Limitation",
+        description: "The search cannot be completed due to system limitations. Please simplify your query."
+      },
+      "error.timeout": {
+        title: "Timeout",
+        description: "Request failed due to a system error or timeout. Please try again."
+      },
+      "error.duplicate_data": {
+        title: "Duplicate Data",
+        description: "The data you entered already exists in the system."
+      },
+      "error.something_went_wrong": {
+        title: "Something Went Wrong",
+        description: "An unknown error occurred."
+      },
+      "confirm.delete": {
+        title: "Confirmation",
+        description: "Are you sure you want to delete this item?",
+        confirm_text: "Delete"
+      },
+      "confirm.inactive": {
+        title: "Confirmation",
+        description: "Are you sure you want to inactive this item?",
+        confirm_text: "Inactive"
+      },
+      "confirm.active": {
+        variant: "confirm-green",
+        title: "Confirmation",
+        description: "Are you sure you want to active this item?",
+        confirm_text: "Active"
+      },
+      "confirm.leave_page": {
+        title: "Confirmation",
+        description: "Unsaved changes. Do you want to leave this page?",
+        confirm_text: "Leave"
+      },
+      "confirm.remove": {
+        title: "Confirmation",
+        description: "Are you sure you want to remove this item?",
+        confirm_text: "Remove"
+      },
+      "confirm.logout": {
+        title: "Confirmation",
+        description: "Do you want to log out?",
+        confirm_text: "Logout"
+      }
+    }
+  }
+};
+
+// src/components/dialog-alert/locale/i18n.ts
+i18n__default.default.use(reactI18next.initReactI18next).init({
+  resources: defaultResource,
+  lng: "sharedui",
+  fallbackLng: "sharedui",
+  defaultNS: DIALOG_ALERT_I18N_NAMESPACE,
+  interpolation: {
+    escapeValue: false
+    // react already safes from xss
+  }
+});
+var i18n_default = i18n__default.default;
+var titleColorVariant = {
+  default: "",
+  success: "text-green-600",
+  error: "text-red-600",
+  warning: "text-yellow-600",
+  confirm: "text-red-600",
+  "confirm-green": "text-red-600"
+};
 function DialogAlert({
   open,
   onOpenChange,
@@ -4811,7 +4964,7 @@ function DialogAlert({
   description,
   variant = "default",
   confirmText,
-  cancelText = "Cancel",
+  cancelText = "cancel",
   onConfirm,
   onCancel,
   showCancel = true,
@@ -4820,6 +4973,7 @@ function DialogAlert({
   persistent = false
 }) {
   const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
+  const { t } = reactI18next.useTranslation(DIALOG_ALERT_I18N_NAMESPACE);
   const handleCancel = React4.useCallback(() => {
     onCancel?.();
     onOpenChange(false);
@@ -4830,28 +4984,261 @@ function DialogAlert({
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange: persistent ? () => {
   } : onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader2, { children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx(DialogTitle2, { className: variantClass(variant), children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription2, { children: description })
+      title && /* @__PURE__ */ jsxRuntime.jsx(DialogTitle2, { className: titleColorVariant[variant], children: t(title) }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription2, { children: t(description) })
     ] }),
     outlet && outlet,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-3 mt-3 ${alignClass}`, children: [
-      showCancel && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "cancel", onClick: handleCancel, children: cancelText }),
-      confirmText && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant, onClick: handleConfirm, children: confirmText })
+      showCancel && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "cancel", onClick: handleCancel, children: t(cancelText) }),
+      confirmText && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant, onClick: handleConfirm, children: t(confirmText) })
     ] })
   ] }) });
 }
-function variantClass(variant) {
-  switch (variant) {
-    case "success":
-      return "text-green-600";
-    case "error":
-      return "text-red-600";
-    case "warning":
-      return "text-yellow-600";
-    default:
-      return "";
+
+// src/components/dialog-alert/templates/index.ts
+var getDialogTemplates = ({ setOpen = () => {
+} }) => ({
+  "success.saved": {
+    variant: "success",
+    title: "success.saved.title",
+    description: "success.saved.description",
+    cancelText: "close"
+  },
+  "success.deleted": {
+    variant: "success",
+    title: "success.deleted.title",
+    description: "success.deleted.description",
+    cancelText: "close"
+  },
+  "success.removed": {
+    variant: "success",
+    title: "success.removed.title",
+    description: "success.removed.description",
+    cancelText: "close"
+  },
+  "error.api_db_error": {
+    variant: "error",
+    title: "error.api_db_error.title",
+    description: "error.api_db_error.description",
+    cancelText: "close"
+  },
+  "error.permission_denied": {
+    variant: "error",
+    title: "error.permission_denied.title",
+    description: "error.permission_denied.description",
+    confirmText: "error.permission_denied.confirm_text",
+    showCancel: false,
+    onConfirm: () => setOpen(false)
+  },
+  "error.session_expired": {
+    variant: "error",
+    title: "error.session_expired.title",
+    description: "error.session_expired.description",
+    confirmText: "error.session_expired.confirm_text",
+    showCancel: false
+  },
+  "error.user_not_found": {
+    variant: "error",
+    title: "error.user_not_found.title",
+    description: "error.user_not_found.description",
+    confirmText: "error.user_not_found.confirm_text",
+    showCancel: false
+  },
+  "error.data_not_found": {
+    variant: "error",
+    title: "error.data_not_found.title",
+    description: "error.data_not_found.description",
+    cancelText: "close"
+  },
+  "error.data_restrict_editing": {
+    variant: "error",
+    title: "error.data_restrict_editing.title",
+    description: "error.data_restrict_editing.description",
+    cancelText: "close"
+  },
+  "error.network_timeout_error": {
+    variant: "error",
+    title: "error.network_timeout_error.title",
+    description: "error.network_timeout_error.description",
+    cancelText: "close"
+  },
+  "error.queue_full": {
+    variant: "error",
+    title: "error.queue_full.title",
+    description: "error.queue_full.description",
+    cancelText: "close"
+  },
+  "error.invalid_data_format": {
+    variant: "error",
+    title: "error.invalid_data_format.title",
+    description: "error.invalid_data_format.description",
+    cancelText: "close"
+  },
+  "error.data_linked_to_system_data": {
+    variant: "error",
+    title: "error.data_linked_to_system_data.title",
+    description: "error.data_linked_to_system_data.description",
+    cancelText: "close"
+  },
+  "error.pending_workflow_conflict": {
+    variant: "error",
+    title: "error.pending_workflow_conflict.title",
+    description: "error.pending_workflow_conflict.description",
+    cancelText: "close"
+  },
+  "error.invalid_incomplete_data": {
+    variant: "error",
+    title: "error.invalid_incomplete_data.title",
+    description: "error.invalid_incomplete_data.description",
+    cancelText: "close"
+  },
+  "error.client_side_error": {
+    variant: "error",
+    title: "error.client_side_error.title",
+    description: "error.client_side_error.description",
+    cancelText: "close"
+  },
+  "error.system_limitation": {
+    variant: "error",
+    title: "error.system_limitation.title",
+    description: "error.system_limitation.description",
+    cancelText: "close"
+  },
+  "error.timeout": {
+    variant: "error",
+    title: "error.timeout.title",
+    description: "error.timeout.description",
+    cancelText: "close"
+  },
+  "error.duplicate_data": {
+    variant: "error",
+    title: "error.duplicate_data.title",
+    description: "error.duplicate_data.description",
+    cancelText: "close"
+  },
+  "error.something_went_wrong": {
+    variant: "error",
+    title: "error.something_went_wrong.title",
+    description: "error.something_went_wrong.description",
+    cancelText: "close"
+  },
+  "confirm.delete": {
+    variant: "confirm",
+    title: "confirm.delete.title",
+    description: "confirm.delete.description",
+    confirmText: "confirm.delete.confirm_text"
+  },
+  "confirm.inactive": {
+    variant: "confirm",
+    title: "confirm.inactive.title",
+    description: "confirm.inactive.description",
+    confirmText: "confirm.inactive.confirm_text"
+  },
+  "confirm.active": {
+    variant: "confirm-green",
+    title: "confirm.active.title",
+    description: "confirm.active.description",
+    confirmText: "confirm.active.confirm_text"
+  },
+  "confirm.leave_page": {
+    variant: "confirm",
+    title: "confirm.leave_page.title",
+    description: "confirm.leave_page.description",
+    confirmText: "confirm.leave_page.confirm_text"
+  },
+  "confirm.remove": {
+    variant: "confirm",
+    title: "confirm.remove.title",
+    description: "confirm.remove.description",
+    confirmText: "confirm.remove.confirm_text"
+  },
+  "confirm.logout": {
+    variant: "confirm",
+    title: "confirm.logout.title",
+    description: "confirm.logout.description",
+    confirmText: "confirm.logout.confirm_text"
   }
-}
+});
+var useDialogAlertStore = zustand.create((set, get) => ({
+  open: false,
+  dialogProps: {},
+  setOpen: (data) => set({ open: data }),
+  setDialogProps: (data) => set({ dialogProps: data }),
+  openDialogAlert: (payload) => {
+    let templateVal;
+    if (payload?.template) {
+      templateVal = getDialogTemplates({ setOpen: get().setOpen })[payload.template];
+    }
+    get().setDialogProps({ ...templateVal, ...payload?.props });
+    get().setOpen(true);
+  },
+  closeDialogAlert: () => {
+    set({ open: false });
+  }
+}));
+var DialogAlertProvider = ({ children, i18nResource, i18nLang }) => {
+  const open = useDialogAlertStore((state) => state.open);
+  const setOpen = useDialogAlertStore((state) => state.setOpen);
+  const dialogProps = useDialogAlertStore((state) => state.dialogProps);
+  React4.useEffect(() => {
+    if (!i18nResource) {
+      i18n_default.changeLanguage("sharedui");
+      return;
+    }
+    const langs = Object.keys(i18nResource);
+    for (const lang of langs) {
+      i18n_default.addResourceBundle(
+        lang,
+        DIALOG_ALERT_I18N_NAMESPACE,
+        i18nResource[lang][DIALOG_ALERT_I18N_NAMESPACE],
+        false,
+        true
+      );
+    }
+    i18n_default.changeLanguage(i18nLang);
+  }, [i18nLang, i18nResource]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(DialogAlert, { open, onOpenChange: setOpen, ...dialogProps })
+  ] });
+};
+var openDialogAlert = useDialogAlertStore.getState().openDialogAlert;
+var closeDialogAlert = useDialogAlertStore.getState().closeDialogAlert;
+var openErrorDialogAlert = (error) => {
+  if (error instanceof Error) {
+    openDialogAlert({ template: "error.something_went_wrong", props: { description: error.message } });
+  } else if (error.isAxiosError) {
+    let template = "error.something_went_wrong";
+    switch (error.response?.status) {
+      case 400:
+        template = "error.invalid_incomplete_data";
+        break;
+      case 401:
+        template = "error.session_expired";
+        break;
+      case 403:
+        template = "error.permission_denied";
+        break;
+      case 404:
+        template = "error.data_not_found";
+        break;
+      case 409:
+        template = "error.duplicate_data";
+        break;
+      case 500:
+        template = "error.api_db_error";
+        break;
+    }
+    openDialogAlert({ template });
+  } else {
+    openDialogAlert({ template: "error.something_went_wrong" });
+  }
+};
+var getDialogAlertControls = () => ({
+  openDialogAlert,
+  closeDialogAlert,
+  openErrorDialogAlert
+});
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -7762,10 +8149,38 @@ async function getCroppedImg(imageSrc, pixelCrop, desiredDimension) {
     }, "image/png");
   });
 }
+async function getCroppedSVG(imageSrc, pixelCrop, desiredDimension) {
+  let svgString;
+  const parts = imageSrc.split(",");
+  const meta = parts[0];
+  const data = parts[1];
+  if (meta.includes("base64")) {
+    svgString = atob(data);
+  } else {
+    svgString = decodeURIComponent(data);
+  }
+  const parser = new DOMParser();
+  const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
+  const svgElement = svgDoc.documentElement;
+  if (svgElement.tagName.toLowerCase() !== "svg") {
+    throw new Error("The file is not a valid SVG document root.");
+  }
+  const newViewBox = `${pixelCrop.x} ${pixelCrop.y} ${pixelCrop.width} ${pixelCrop.height}`;
+  svgElement.setAttribute("viewBox", newViewBox);
+  const outputWidth = desiredDimension?.width ?? pixelCrop.width;
+  const outputHeight = desiredDimension?.height ?? pixelCrop.height;
+  svgElement.setAttribute("width", String(outputWidth));
+  svgElement.setAttribute("height", String(outputHeight));
+  const serializer = new XMLSerializer();
+  const croppedSvgString = serializer.serializeToString(svgElement);
+  const blob = new Blob([croppedSvgString], { type: "image/svg+xml" });
+  return URL.createObjectURL(blob);
+}
 var CropperModal = ({
   open,
   onOpenChange,
   imageSrc,
+  isSVG,
   onConfirm,
   onCancel,
   onError,
@@ -7807,7 +8222,7 @@ var CropperModal = ({
     setIsLoading(true);
     try {
       const desiredDimension = outputExactCropSize ? cropSize : void 0;
-      const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels, desiredDimension);
+      const croppedImage = isSVG ? await getCroppedSVG(imageSrc, croppedAreaPixels, desiredDimension) : await getCroppedImg(imageSrc, croppedAreaPixels, desiredDimension);
       onConfirm({ crop, croppedAreaPixels, croppedImageBlobUrl: croppedImage });
     } catch (e) {
       if (onError) {
@@ -7872,7 +8287,7 @@ var CropperModal = ({
                 ...props?.cropper
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full py-4 px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full py-4 px-8 min-h-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "cancel", onClick: handleCancel, disabled: isLoading, children: "Cancel" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex gap-x-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "default", onClick: handleConfirm, disabled: isLoading, children: "Confirm" }) })
             ] }) })
@@ -7895,10 +8310,12 @@ exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
 exports.CropperModal = CropperModal;
+exports.DIALOG_ALERT_I18N_NAMESPACE = DIALOG_ALERT_I18N_NAMESPACE;
 exports.DataTable = DataTable_default;
 exports.DatePicker = DatePicker2;
 exports.Dialog = Dialog;
 exports.DialogAlert = DialogAlert;
+exports.DialogAlertProvider = DialogAlertProvider;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
 exports.DialogFooter = DialogFooter;
@@ -7999,6 +8416,8 @@ exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.compareAlphanumeric = compareAlphanumeric;
 exports.debounce = debounce;
+exports.getDialogAlertControls = getDialogAlertControls;
+exports.getDialogTemplates = getDialogTemplates;
 exports.inputVariants = inputVariants;
 exports.isDefined = isDefined;
 exports.isEmptyObject = isEmptyObject;