sspart-fe-lib 1.0.0

package/dist/components/market-textbox.js

@@ -0,0 +1,231 @@
+// src/components/market-textbox.tsx
+import { useCallback as useCallback2 } from "react";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Typography from "@mui/material/Typography";
+import CircleOutlinedIcon from "@mui/icons-material/CircleOutlined";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+
+// 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;
+
+// src/components/market-textbox.tsx
+import { setCookieExpiry, STOCK_ORDER_TYPES } from "sspart-common-lib";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var styleData = {
+  color: "var(--primary-color)",
+  "&.Mui-checked": {
+    color: "var(--primary-color)"
+  }
+};
+var MarketTextBox = ({
+  id,
+  name,
+  placeholder,
+  mandate,
+  value = "0",
+  checked = true,
+  onChange,
+  size = "small",
+  className = "",
+  decimals = 2,
+  locale = "en-IN",
+  currency = "INR",
+  validation,
+  autoFocus,
+  autoComplete
+}) => {
+  const handleValueChange = useCallback2((name2, val) => {
+    onChange(name2, checked, val);
+  }, [checked, onChange]);
+  const handleToggle = useCallback2((event) => {
+    const isChecked = event.target.checked;
+    const type = isChecked ? STOCK_ORDER_TYPES.MARKET : STOCK_ORDER_TYPES.LIMIT;
+    setCookieExpiry("ordertype", type, 1e5);
+    onChange(name, isChecked, isChecked ? "0" : value);
+  }, [name, value, onChange]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx2(
+      currency_textbox_default,
+      {
+        id,
+        className,
+        mandate,
+        validation,
+        size,
+        autoFocus,
+        name,
+        value,
+        placeholder,
+        decimals,
+        locale,
+        currency,
+        onChange: handleValueChange,
+        autoComplete,
+        disabled: checked
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ jsx2(
+          Checkbox,
+          {
+            sx: styleData,
+            size: "small",
+            checked,
+            onChange: handleToggle,
+            icon: /* @__PURE__ */ jsx2(CircleOutlinedIcon, {}),
+            checkedIcon: /* @__PURE__ */ jsx2(CheckCircleIcon, {})
+          }
+        ),
+        label: /* @__PURE__ */ jsx2(Typography, { paddingTop: "3px", variant: "caption", fontSize: "9px", fontWeight: "800", display: "block", gutterBottom: true, children: "Place at MKT" })
+      }
+    )
+  ] });
+};
+var market_textbox_default = MarketTextBox;
+export {
+  market_textbox_default as default
+};

package/dist/components/page-spinner.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+
+declare const PageSpinner: FC;
+
+export { PageSpinner as default };

package/dist/components/page-spinner.js

@@ -0,0 +1,36 @@
+// src/components/page-spinner.tsx
+import { useEffect, useState, useCallback } from "react";
+import CircularProgress from "@mui/material/CircularProgress";
+import { NOTIFICATION_SERVICES, ns } from "sspart-common-lib";
+import { jsx } from "react/jsx-runtime";
+var observerId = "PageSpinnerObserver";
+var PAGE_SPINNER_STYLE = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.7)",
+  zIndex: 9999
+};
+var PageSpinner = () => {
+  const [show, setShow] = useState(false);
+  const toggleSpinner = useCallback((isVisible) => {
+    setShow(isVisible);
+  }, []);
+  useEffect(() => {
+    ns.addObserver(NOTIFICATION_SERVICES.PAGE_SPINNER, observerId, toggleSpinner);
+    return () => {
+      ns.removeObserver(observerId, NOTIFICATION_SERVICES.PAGE_SPINNER);
+    };
+  }, [toggleSpinner]);
+  if (!show) return null;
+  return /* @__PURE__ */ jsx("div", { style: PAGE_SPINNER_STYLE, children: /* @__PURE__ */ jsx(CircularProgress, {}) });
+};
+var page_spinner_default = PageSpinner;
+export {
+  page_spinner_default as default
+};

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

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+interface PasswordTextBoxProps {
+    id: string;
+    name: string;
+    placeholder?: string;
+    mandate?: boolean;
+    value: string;
+    onChange: (name: string, value: string) => void;
+    size?: 'small' | 'medium';
+    className?: string;
+    validation?: string;
+}
+declare const PasswordTextBox: FC<PasswordTextBoxProps>;
+
+export { PasswordTextBox as default };

package/dist/components/password-textbox.js

@@ -0,0 +1,125 @@
+// src/components/password-textbox.tsx
+import { useCallback, useMemo, useState } from "react";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import InputLabel from "@mui/material/InputLabel";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+
+// 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/password-textbox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PasswordTextBox = ({
+  id,
+  name,
+  placeholder,
+  mandate,
+  value,
+  onChange,
+  className = "",
+  size = "small",
+  validation
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const combinedClassName = useMemo(
+    () => `txtbox-p ${className || ""} ${validation ? "txtbox-p-validation" : ""}`,
+    [className, validation]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      const { name: name2, value: value2 } = event.target;
+      onChange(name2, value2);
+    },
+    [onChange]
+  );
+  const handleClickShowPassword = useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+  const handleMouseDownPassword = useCallback((event) => {
+    event.preventDefault();
+  }, []);
+  return /* @__PURE__ */ jsxs(FormControl, { className: combinedClassName, error: !!validation, variant: "outlined", size, required: mandate, fullWidth: true, sx: TEXTBOX_STYLE, children: [
+    /* @__PURE__ */ jsx(InputLabel, { htmlFor: id, children: placeholder }),
+    /* @__PURE__ */ jsx(
+      OutlinedInput,
+      {
+        name,
+        id,
+        type: showPassword ? "text" : "password",
+        value,
+        label: placeholder,
+        onChange: handleChange,
+        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { onClick: handleClickShowPassword, onMouseDown: handleMouseDownPassword, edge: "end", children: showPassword ? /* @__PURE__ */ jsx(VisibilityOffIcon, {}) : /* @__PURE__ */ jsx(VisibilityIcon, {}) }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(FormHelperText, { children: validation })
+  ] });
+};
+var password_textbox_default = PasswordTextBox;
+export {
+  password_textbox_default as default
+};

package/dist/components/radio-group.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+
+interface RadioOption {
+    value: string;
+    text: string;
+}
+interface RadioGroupBoxProps {
+    name: string;
+    label?: string;
+    value: string;
+    options: RadioOption[];
+    onChange: (name: string, value: string) => void;
+    mandate?: boolean;
+    validation?: string;
+    row?: boolean;
+    disabled?: boolean;
+    [key: string]: any;
+}
+declare const RadioGroupBox: FC<RadioGroupBoxProps>;
+
+export { RadioGroupBox as default };

package/dist/components/radio-group.js

@@ -0,0 +1,45 @@
+// src/components/radio-group.tsx
+import { useCallback } from "react";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormLabel from "@mui/material/FormLabel";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormHelperText from "@mui/material/FormHelperText";
+import { jsx, jsxs } from "react/jsx-runtime";
+var labelStyle = {
+  color: "var(--text-color)",
+  "&.Mui-focused": { color: "var(--text-color)" }
+};
+var radioStyle = {
+  color: "var(--primary-color)",
+  "&.Mui-checked": { color: "var(--primary-color)" }
+};
+var RadioGroupBox = ({
+  name,
+  label,
+  value,
+  options,
+  onChange,
+  mandate,
+  validation,
+  row = false,
+  disabled = false,
+  ...otherProps
+}) => {
+  const handleChange = useCallback((event) => {
+    onChange(name, event.target.value);
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsxs(FormControl, { component: "fieldset", error: !!validation, disabled, ...otherProps, children: [
+    label && /* @__PURE__ */ jsxs(FormLabel, { component: "legend", sx: labelStyle, children: [
+      label,
+      mandate && " *"
+    ] }),
+    /* @__PURE__ */ jsx(RadioGroup, { row, name, value, onChange: handleChange, children: options.map(({ value: value2, text }) => /* @__PURE__ */ jsx(FormControlLabel, { value: value2, control: /* @__PURE__ */ jsx(Radio, { size: "small", sx: radioStyle }), label: text }, value2)) }),
+    validation && /* @__PURE__ */ jsx(FormHelperText, { children: validation })
+  ] });
+};
+var radio_group_default = RadioGroupBox;
+export {
+  radio_group_default as default
+};

package/dist/components/resize-element.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+
+interface ResizeElementProps {
+    maxWidth: number;
+    ShortElement: ReactNode;
+    LongElement: ReactNode;
+}
+declare const ResizeElement: FC<ResizeElementProps>;
+
+export { ResizeElement as default };

package/dist/components/resize-element.js

@@ -0,0 +1,21 @@
+// src/components/resize-element.tsx
+import { useState, useEffect } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var ResizeElement = ({ maxWidth, ShortElement, LongElement }) => {
+  const [showElement, setShowElement] = useState(window.innerWidth > maxWidth);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(`(min-width: ${maxWidth}px)`);
+    const handleResize = (e) => {
+      setShowElement(e.matches);
+    };
+    mediaQuery.addEventListener("change", handleResize);
+    return () => {
+      mediaQuery.removeEventListener("change", handleResize);
+    };
+  }, [maxWidth]);
+  return /* @__PURE__ */ jsx(Fragment, { children: showElement ? LongElement : ShortElement });
+};
+var resize_element_default = ResizeElement;
+export {
+  resize_element_default as default
+};

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+
+interface DropdownProps {
+    name: string;
+    value: string;
+    options: {
+        value: string;
+        text: string;
+    }[];
+    onChange: (name: string, value: string) => void;
+}
+declare const Dropdown: React__default.FC<DropdownProps>;
+
+export { Dropdown as default };

package/dist/components/small-dropdown.js

@@ -0,0 +1,28 @@
+// src/components/small-dropdown.tsx
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var dropdownStyle = {
+  width: "80px",
+  height: "20px",
+  fontSize: "10px",
+  border: "1px solid rgba(0, 0, 0, 0.3)",
+  borderRadius: "4px",
+  color: "var(--text-color)",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  padding: "0 4px"
+};
+var Dropdown = ({ name, value, options, onChange }) => {
+  const handleChange = useCallback(
+    (event) => {
+      onChange(name, event.target.value);
+    },
+    [onChange, name]
+  );
+  return /* @__PURE__ */ jsx("select", { style: dropdownStyle, value, onChange: handleChange, children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.text }, option.value)) });
+};
+var small_dropdown_default = Dropdown;
+export {
+  small_dropdown_default as default
+};

package/dist/components/snackbar.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+interface SnackbarProps {
+}
+declare const SnackbarComponent: FC<SnackbarProps>;
+
+export { SnackbarComponent as default };

package/dist/components/snackbar.js

@@ -0,0 +1,42 @@
+// src/components/snackbar.tsx
+import { useEffect, useState, useCallback } from "react";
+import Alert from "@mui/material/Alert";
+import Snackbar from "@mui/material/Snackbar";
+import { NOTIFICATION_SERVICES, ns } from "sspart-common-lib";
+import { jsx } from "react/jsx-runtime";
+var observerId = "SnackbarObserver";
+var SnackbarComponent = () => {
+  const [alertState, setAlertState] = useState({
+    open: false,
+    alertType: "info",
+    alertText: ""
+  });
+  const onClose = useCallback(() => {
+    setAlertState((prevState) => ({ ...prevState, open: false }));
+  }, []);
+  const showAlert = useCallback(
+    (alertData) => {
+      if (!alertData.alert) {
+        onClose();
+      } else {
+        setAlertState({
+          open: true,
+          alertType: alertData.alert.alertType,
+          alertText: alertData.alert.alertText
+        });
+      }
+    },
+    [onClose]
+  );
+  useEffect(() => {
+    ns.addObserver(NOTIFICATION_SERVICES.DISPLAY_SNACKBAR, observerId, showAlert);
+    return () => {
+      ns.removeObserver(observerId, NOTIFICATION_SERVICES.DISPLAY_SNACKBAR);
+    };
+  }, [showAlert]);
+  return /* @__PURE__ */ jsx(Snackbar, { open: alertState.open, autoHideDuration: 3e3, onClose, children: /* @__PURE__ */ jsx(Alert, { onClose, severity: alertState.alertType, sx: { width: "100%" }, children: alertState.alertText }) });
+};
+var snackbar_default = SnackbarComponent;
+export {
+  snackbar_default as default
+};

package/dist/components/switch.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+
+interface SwitchProps {
+    name: string;
+    value: boolean;
+    onChange: (name: string, value: boolean) => void;
+}
+declare const SwitchComponent: FC<SwitchProps>;
+
+export { SwitchComponent as default };

package/dist/components/switch.js

@@ -0,0 +1,23 @@
+// src/components/switch.tsx
+import Switch from "@mui/material/Switch";
+import { jsx } from "react/jsx-runtime";
+var styleData = {
+  "& .MuiSwitch-switchBase": {
+    "&.Mui-checked": {
+      color: "var(--primary-color)"
+    },
+    "&.Mui-checked + .MuiSwitch-track": {
+      backgroundColor: "var(--primary-color)"
+    }
+  }
+};
+var SwitchComponent = ({ value, onChange, name }) => {
+  const handleToggle = (event) => {
+    onChange(name, event.target.checked);
+  };
+  return /* @__PURE__ */ jsx(Switch, { sx: styleData, size: "small", checked: value, onChange: handleToggle });
+};
+var switch_default = SwitchComponent;
+export {
+  switch_default as default
+};

package/dist/components/tab.d.ts

@@ -0,0 +1,10 @@
+import React__default from 'react';
+
+interface CloudTabProps {
+    children?: React__default.ReactNode;
+    value: number;
+    index: number;
+}
+declare const _default: React__default.NamedExoticComponent<CloudTabProps>;
+
+export { _default as default };

package/dist/components/tab.js

@@ -0,0 +1,22 @@
+// src/components/tab.tsx
+import React from "react";
+import Box from "@mui/material/Box";
+import { jsx } from "react/jsx-runtime";
+var CloudTab = ({ children, value, index, ...other }) => {
+  const isActive = value === index;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: !isActive,
+      id: `cloud-tabpanel-${index}`,
+      "aria-labelledby": `cloud-tab-${index}`,
+      ...other,
+      children: isActive && /* @__PURE__ */ jsx(Box, { children })
+    }
+  );
+};
+var tab_default = React.memo(CloudTab);
+export {
+  tab_default as default
+};