sspart-fe-lib 1.0.0

package/dist/components/alerts.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+interface AlertProps {
+    id: string;
+    className?: string;
+}
+declare const Alerts: FC<AlertProps>;
+
+export { Alerts as default };

package/dist/components/alerts.js

@@ -0,0 +1,53 @@
+// src/components/alerts.tsx
+import { useEffect, useState, useCallback } from "react";
+import Collapse from "@mui/material/Collapse";
+import Stack from "@mui/material/Stack";
+import Alert from "@mui/material/Alert";
+import { NOTIFICATION_SERVICES, ns } from "sspart-common-lib";
+import { jsx } from "react/jsx-runtime";
+var Alerts = ({ id, className }) => {
+  const [alertState, setAlertState] = useState({
+    open: false,
+    alertType: "info",
+    alertText: ""
+  });
+  const onClose = useCallback(() => {
+    setAlertState((prevState) => ({ ...prevState, open: false }));
+  }, []);
+  const renderAlertMessages = useCallback(() => {
+    const { alertText } = alertState;
+    if (!alertText) return null;
+    return Array.isArray(alertText) ? /* @__PURE__ */ jsx("div", { children: alertText.map((alert, index) => /* @__PURE__ */ jsx("li", { children: alert }, `${alertState.alertType}-${index}`)) }) : /* @__PURE__ */ jsx("div", { children: alertText });
+  }, [alertState]);
+  const showAlert = useCallback(
+    (alertData) => {
+      if (id) {
+        if ((alertData.id === void 0 || alertData.id === id) && alertData.alert) {
+          setAlertState({
+            open: true,
+            alertType: alertData.alert?.alertType ?? "info",
+            alertText: alertData.alert?.alertText ?? ""
+          });
+        } else if (alertData.id === id && !alertData.alert) {
+          onClose();
+        }
+      } else {
+        if (!alertData.alert) {
+          onClose();
+        }
+      }
+    },
+    [id, onClose]
+  );
+  useEffect(() => {
+    ns.addObserver(NOTIFICATION_SERVICES.DISPLAY_ALERT, id, showAlert);
+    return () => {
+      ns.removeObserver(id, NOTIFICATION_SERVICES.DISPLAY_ALERT);
+    };
+  }, [id, showAlert]);
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Collapse, { in: alertState.open, children: /* @__PURE__ */ jsx(Stack, { sx: { width: "100%" }, spacing: 2, children: /* @__PURE__ */ jsx(Alert, { severity: alertState.alertType, onClose, children: renderAlertMessages() }) }) }) });
+};
+var alerts_default = Alerts;
+export {
+  alerts_default as default
+};

package/dist/components/are-you-sure-model.d.ts

@@ -0,0 +1,9 @@
+import React__default from 'react';
+
+interface AreYouSureModalProps {
+    text: string;
+    callback: (data: any) => Promise<void>;
+}
+declare const AreYouSureModal: React__default.FC<AreYouSureModalProps>;
+
+export { AreYouSureModal as default };

package/dist/components/are-you-sure-model.js

@@ -0,0 +1,111 @@
+// src/components/are-you-sure-model.tsx
+import { useState, useEffect, useCallback as useCallback2 } from "react";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/components/css/button.css
+styleInject(".btn-p {\n  white-space: nowrap;\n  width: 100%;\n  font-weight: 600 !important;\n  background: var(--primary-color) !important;\n  color: var(--neutral-color);\n}\n.btn-p:hover {\n  background: var(--primary-color-hover) !important;\n}\n.btn-p:disabled {\n  background: var(--disabled-color) !important;\n}\n.btn-p.MuiButton-outlined {\n  color: var(--primary-color);\n  border-color: var(--primary-color) !important;\n  background: var(--background-color) !important;\n}\n.btn-p.MuiButton-outlined:hover {\n  color: var(--primary-color-hover);\n  border-color: var(--primary-color-hover) !important;\n}\n.btn-p.MuiButton-text {\n  color: var(--primary-color);\n  border-color: var(--background-color) !important;\n  background: var(--background-color) !important;\n}\n.btn-p.MuiButton-text:hover {\n  color: var(--primary-color-hover) !important;\n}\n");
+
+// src/components/button.tsx
+import Button from "@mui/material/Button";
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var ButtonComponent = ({
+  id,
+  name,
+  text,
+  className = "",
+  variant = "contained",
+  disabled = false,
+  type = "button",
+  onClick,
+  ...otherProps
+}) => {
+  const combinedClassName = useMemo(() => `btn-p noselect ${className || ""}`, [className]);
+  const handleClick = useCallback(
+    (event) => {
+      if (onClick) onClick(name);
+    },
+    [name, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      id,
+      name,
+      variant,
+      type,
+      fullWidth: true,
+      disableElevation: true,
+      disabled,
+      className: combinedClassName,
+      onClick: handleClick,
+      ...otherProps,
+      sx: { boxShadow: 0 },
+      children: text
+    }
+  );
+};
+var button_default = ButtonComponent;
+
+// src/components/are-you-sure-model.tsx
+import Dialog from "@mui/material/Dialog";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { NOTIFICATION_SERVICES, ns } from "sspart-common-lib";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var AreYouSureModal = ({ text, callback }) => {
+  const [show, setShow] = useState(false);
+  const [data, setData] = useState([]);
+  const openModal = useCallback2((modalData) => {
+    setShow(true);
+    setData(modalData);
+  }, []);
+  useEffect(() => {
+    ns.addObserver(NOTIFICATION_SERVICES.CONFIRM_ACTION_MODAL, null, openModal);
+    return () => {
+      ns.removeObserver(null, NOTIFICATION_SERVICES.CONFIRM_ACTION_MODAL);
+    };
+  }, [openModal]);
+  const handleClose = () => {
+    setShow(false);
+  };
+  const onSureModal = async () => {
+    setShow(false);
+    await callback(data);
+  };
+  return /* @__PURE__ */ jsx2(Dialog, { open: show, onClose: handleClose, fullWidth: true, maxWidth: "xs", children: /* @__PURE__ */ jsxs("div", { className: "modal-content", children: [
+    /* @__PURE__ */ jsx2("div", { className: "cloud-modal-header", children: /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", noWrap: true, children: "Are you sure?" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "modal-body", children: [
+      text,
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, marginTop: 2, children: [
+        /* @__PURE__ */ jsx2(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsx2(button_default, { name: "Cancel", text: "Cancel", onClick: handleClose }) }),
+        /* @__PURE__ */ jsx2(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsx2(button_default, { name: "Confirm", text: "Confirm", onClick: onSureModal }) })
+      ] })
+    ] })
+  ] }) });
+};
+var are_you_sure_model_default = AreYouSureModal;
+export {
+  are_you_sure_model_default as default
+};

package/dist/components/button.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+interface ButtonComponentProps {
+    id?: string;
+    name?: string;
+    text: string;
+    className?: string;
+    disabled?: boolean;
+    variant?: "text" | "contained" | "outlined";
+    type?: "button" | "submit";
+    onClick?: (name?: string) => void;
+    [key: string]: any;
+}
+declare const ButtonComponent: FC<ButtonComponentProps>;
+
+export { ButtonComponent as default };

package/dist/components/button.js

@@ -0,0 +1,69 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/components/css/button.css
+styleInject(".btn-p {\n  white-space: nowrap;\n  width: 100%;\n  font-weight: 600 !important;\n  background: var(--primary-color) !important;\n  color: var(--neutral-color);\n}\n.btn-p:hover {\n  background: var(--primary-color-hover) !important;\n}\n.btn-p:disabled {\n  background: var(--disabled-color) !important;\n}\n.btn-p.MuiButton-outlined {\n  color: var(--primary-color);\n  border-color: var(--primary-color) !important;\n  background: var(--background-color) !important;\n}\n.btn-p.MuiButton-outlined:hover {\n  color: var(--primary-color-hover);\n  border-color: var(--primary-color-hover) !important;\n}\n.btn-p.MuiButton-text {\n  color: var(--primary-color);\n  border-color: var(--background-color) !important;\n  background: var(--background-color) !important;\n}\n.btn-p.MuiButton-text:hover {\n  color: var(--primary-color-hover) !important;\n}\n");
+
+// src/components/button.tsx
+import Button from "@mui/material/Button";
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var ButtonComponent = ({
+  id,
+  name,
+  text,
+  className = "",
+  variant = "contained",
+  disabled = false,
+  type = "button",
+  onClick,
+  ...otherProps
+}) => {
+  const combinedClassName = useMemo(() => `btn-p noselect ${className || ""}`, [className]);
+  const handleClick = useCallback(
+    (event) => {
+      if (onClick) onClick(name);
+    },
+    [name, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      id,
+      name,
+      variant,
+      type,
+      fullWidth: true,
+      disableElevation: true,
+      disabled,
+      className: combinedClassName,
+      onClick: handleClick,
+      ...otherProps,
+      sx: { boxShadow: 0 },
+      children: text
+    }
+  );
+};
+var button_default = ButtonComponent;
+export {
+  button_default as default
+};

package/dist/components/checkbox.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+interface CheckboxProps {
+    name: string;
+    value: boolean;
+    onChange: (name: string, value: boolean) => void;
+    validation?: string;
+    label?: any;
+    onlyCheckbox?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
+declare const CheckboxComponent: FC<CheckboxProps>;
+
+export { CheckboxComponent as default };

package/dist/components/checkbox.js

@@ -0,0 +1,30 @@
+// src/components/checkbox.tsx
+import Checkbox from "@mui/material/Checkbox";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormGroup from "@mui/material/FormGroup";
+import FormHelperText from "@mui/material/FormHelperText";
+import { jsx, jsxs } from "react/jsx-runtime";
+var styleData = {
+  color: "var(--primary-color)",
+  "&.Mui-checked": {
+    color: "var(--primary-color)"
+  },
+  "&.MuiCheckbox-indeterminate": {
+    color: "var(--primary-color)"
+  }
+};
+var CheckboxComponent = ({ value, onChange, name, validation, label, onlyCheckbox = false, disabled = false, indeterminate = false }) => {
+  const handleToggle = (event) => {
+    onChange(name, event.target.checked);
+  };
+  if (onlyCheckbox) return /* @__PURE__ */ jsx(Checkbox, { sx: styleData, disabled, size: "small", checked: value, onChange: handleToggle, indeterminate });
+  return /* @__PURE__ */ jsx(FormGroup, { children: /* @__PURE__ */ jsxs(FormControl, { error: !!validation, children: [
+    /* @__PURE__ */ jsx(FormControlLabel, { label, control: /* @__PURE__ */ jsx(Checkbox, { sx: styleData, disabled, size: "small", checked: value, onChange: handleToggle, indeterminate }) }),
+    validation && /* @__PURE__ */ jsx(FormHelperText, { children: validation })
+  ] }) });
+};
+var checkbox_default = CheckboxComponent;
+export {
+  checkbox_default as default
+};

package/dist/components/cookie-consent.d.ts

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface CookieConsentProps {
+    navigate: ReturnType<typeof useNavigate>;
+}
+declare const CookieConsent: React__default.FC<CookieConsentProps>;
+
+export { CookieConsent as default };

package/dist/components/cookie-consent.js

@@ -0,0 +1,94 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/components/css/cookie.css
+styleInject(".cookie-wrapper {\n  box-shadow: -1px -1px 20px 0.2px rgba(0, 0, 0, 0.25);\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  background-color: var(--neutral-color);\n  padding: 10px;\n  text-align: center;\n  color: var(--text-color);\n}\n.cookie {\n  position: relative;\n  bottom: 0px;\n  left: 30px;\n  font-size: 18px;\n}\n.second-cookie {\n  position: relative;\n  bottom: -5px;\n  left: 5px;\n  font-size: 18px;\n}\n.cookie-button {\n  border-radius: 8px;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  padding-left: 12px;\n  padding-right: 12px;\n  border: none;\n  font-weight: 800;\n  background: var(--primary-color);\n  color: var(--neutral-color);\n  box-shadow: 2px 3px 10px 0px rgba(0, 0, 0, 0.15);\n  transition: all 0.2s ease-in-out;\n  cursor: pointer;\n}\n.cookie-button:hover {\n  background-color: var(--primary-color-hover);\n}\n");
+
+// src/components/cookie-consent.tsx
+import { useEffect } from "react";
+
+// src/components/css/link-button.css
+styleInject(".btn-link-p {\n  background: none;\n  border: none;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  color: var(--primary-color) !important;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n}\n.btn-link-p:hover {\n  color: var(--text-color) !important;\n}\n.btn-link-p:disabled {\n  cursor: not-allowed;\n  color: var(--disabled-color);\n}\n");
+
+// src/components/link-button.tsx
+import { useCallback, useMemo } from "react";
+import { jsxs } from "react/jsx-runtime";
+var LinkButtonComponent = ({ id, name, text, className = "", disabled = false, onClick, children }) => {
+  const combinedClassName = useMemo(() => `btn-link-p noselect ${className || ""}`, [className]);
+  const handleClick = useCallback(
+    (event) => {
+      if (onClick) onClick(name);
+    },
+    [name, onClick]
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      id,
+      name,
+      disabled,
+      className: combinedClassName,
+      type: "button",
+      onClick: handleClick,
+      children: [
+        text,
+        children
+      ]
+    }
+  );
+};
+var link_button_default = LinkButtonComponent;
+
+// src/components/cookie-consent.tsx
+import { getCookie, setCookieExpiry } from "sspart-common-lib";
+import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
+var CookieConsent = ({ navigate }) => {
+  useEffect(() => {
+    if (getCookie("cnstacptnce") !== "true") {
+      closeConsent("block");
+    }
+  }, []);
+  const closeConsent = (display) => {
+    const consentElement = document.getElementById("cookie-consent");
+    if (consentElement) consentElement.style.display = display;
+  };
+  const handleAccept = () => {
+    setCookieExpiry("cnstacptnce", "true", 86400);
+    closeConsent("none");
+  };
+  const onClick = (name) => {
+    if (name) navigate(`/${name}`);
+  };
+  return /* @__PURE__ */ jsxs2("div", { id: "cookie-consent", className: "cookie-wrapper", style: { display: "none" }, children: [
+    /* @__PURE__ */ jsx("span", { className: "me-2 cookie", role: "img", "aria-label": "Cookies", children: "\u{1F36A}" }),
+    /* @__PURE__ */ jsx("span", { className: "me-2 second-cookie", role: "img", "aria-label": "Cookies", children: "\u{1F36A}" }),
+    "We use cookies to personalize your experience. By continuing to visit our website, you agree to our use of cookies.",
+    /* @__PURE__ */ jsxs2("div", { className: "mt-2 mb-2", children: [
+      /* @__PURE__ */ jsx("button", { id: "accept-cookie", className: "me-2 cookie-button", onClick: handleAccept, children: "Got it!" }),
+      /* @__PURE__ */ jsx(link_button_default, { name: "cookie-policy", text: "Read our cookie policy", onClick })
+    ] })
+  ] });
+};
+var cookie_consent_default = CookieConsent;
+export {
+  cookie_consent_default as default
+};

package/dist/components/currency-textbox.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+interface CurrencyTextBoxProps {
+    id?: string;
+    name: string;
+    placeholder?: string;
+    mandate?: boolean;
+    value?: string;
+    onChange: (name: string, value: string) => void;
+    size?: 'small' | 'medium';
+    className?: string;
+    validation?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    currency?: string;
+    decimals?: number;
+    locale?: string;
+    [key: string]: any;
+}
+declare const CurrencyTextBox: FC<CurrencyTextBoxProps>;
+
+export { CurrencyTextBox as default };

package/dist/components/currency-textbox.js

@@ -0,0 +1,146 @@
+// src/components/currency-textbox.tsx
+import { useCallback, useMemo, useState, useEffect } from "react";
+import TextField from "@mui/material/TextField";
+
+// src/components/styles.tsx
+var TEXTBOX_STYLE = {
+  "&.txtbox-p": {
+    "& label.Mui-focused": {
+      color: "var(--primary-color)"
+    },
+    "& .MuiOutlinedInput-root": {
+      "&:hover fieldset": {
+        borderColor: "var(--primary-color-hover)"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "var(--primary-color)"
+      }
+    },
+    "& .MuiInputBase-root ": {
+      minHeight: 40,
+      "&:hover": {
+        borderColor: "var(--primary-color)"
+      },
+      "&:hover:before": {
+        borderBottom: "1px solid var(--primary-color)"
+      },
+      "&.Mui-focused:before": {
+        borderBottom: "2px solid var(--primary-color-hover)"
+      },
+      "&:after": {
+        borderBottom: "none",
+        transition: "none"
+      }
+    },
+    "& .Mui-disabled": {
+      "&:hover fieldset": {
+        borderColor: "var(--disabled-color)"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "var(--alert-error)"
+      }
+    }
+  },
+  "&.txtbox-p-validation": {
+    "& label.Mui-focused": {
+      color: "var(--alert-error)"
+    },
+    "& .MuiOutlinedInput-root": {
+      "&:hover fieldset": {
+        borderColor: "var(--alert-error-hover)"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "var(--alert-error)"
+      }
+    },
+    "& .MuiInputBase-root": {
+      "&:before": {
+        borderBottom: "2px solid var(--alert-error-hover)"
+      },
+      "&.Mui-focused:before": {
+        borderBottom: "2px solid var(--alert-error)"
+      }
+    }
+  }
+};
+
+// src/components/currency-textbox.tsx
+import { jsx } from "react/jsx-runtime";
+var localStringToNumber = (s) => {
+  const num = Number(s.replace(/[^0-9.-]+/g, ""));
+  return isNaN(num) ? 0 : num;
+};
+var CurrencyTextBox = ({
+  id,
+  name,
+  placeholder,
+  mandate,
+  value = "0",
+  onChange,
+  className = "",
+  decimals = 2,
+  locale = "en-IN",
+  validation,
+  size = "small",
+  disabled,
+  autoFocus,
+  autoComplete,
+  currency = "INR",
+  ...otherProps
+}) => {
+  const options = useMemo(() => ({
+    maximumFractionDigits: decimals,
+    currency,
+    style: "currency",
+    currencyDisplay: "symbol"
+  }), [currency, decimals]);
+  const [formattedValue, setFormattedValue] = useState(localStringToNumber(value).toLocaleString(locale, options));
+  useEffect(() => {
+    const formatted = localStringToNumber(value).toLocaleString(locale, options);
+    setFormattedValue(formatted);
+  }, [value, options]);
+  const combinedClassName = useMemo(
+    () => `txtbox-p ${className || ""} ${validation ? "txtbox-p-validation" : ""}`,
+    [className, validation]
+  );
+  const handleFocus = useCallback((e) => {
+    setFormattedValue(localStringToNumber(e.target.value).toString());
+  }, []);
+  const handleBlur = useCallback((e) => {
+    const { name: name2, value: value2 } = e.target;
+    onChange(name2, localStringToNumber(value2).toFixed(decimals));
+    setFormattedValue(localStringToNumber(value2).toLocaleString(locale, options));
+  }, [decimals, options, onChange]);
+  const handleChange = useCallback((event) => {
+    const { value: value2 } = event.target;
+    setFormattedValue(value2);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      id,
+      name,
+      label: placeholder,
+      required: mandate,
+      value: formattedValue,
+      onChange: handleChange,
+      className: combinedClassName,
+      error: !!validation,
+      disabled,
+      helperText: validation,
+      fullWidth: true,
+      size,
+      variant: "outlined",
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      autoFocus,
+      sx: TEXTBOX_STYLE,
+      autoComplete,
+      ...otherProps
+    }
+  );
+};
+var currency_textbox_default = CurrencyTextBox;
+export {
+  currency_textbox_default as default
+};

package/dist/components/dropdown-multi.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+interface MultiDropdownProps {
+    id?: string;
+    name: string;
+    options: Array<{
+        [key: string]: string;
+    }>;
+    texts?: string[];
+    optionKey: string;
+    optionValue: string;
+    placeholder?: string;
+    mandate?: boolean;
+    value: string[];
+    onChange: (name: string, value: string[]) => void;
+    className?: string;
+    validation?: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+declare const MultiDropdown: FC<MultiDropdownProps>;
+
+export { MultiDropdown as default };