npm - @erpsquad/common - Versions diffs - 1.8.45 → 1.8.46 - Mend

@erpsquad/common 1.8.45 → 1.8.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1471) hide show

package/dist/components/calculation-summary/components/total-summary/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/calculation-summary/components/total-summary.tsx"],"sourcesContent":["import { Box } from '@mui/material';\n\nimport Accordion from '../../accordion/accordion';\nimport Typography from '../../typography/typography';\n\nexport interface ITotalSummary {\n\ttotal: string \| number;\n\troundOffDifferenceAmount: number \| string;\n\tcurrencySymbol: string;\n}\ninterface ITotalSummaryProps {\n\tdata: ITotalSummary;\n}\n\nconst TotalSummary: React.FC<ITotalSummaryProps> = ({ data }) => {\n\treturn (\n\t\t<Accordion\n\t\t\ttitle={\n\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\tTotal\n\t\t\t\t</Typography>\n\t\t\t}\n\t\t\taccordionProps={{\n\t\t\t\tdefaultExpanded: true,\n\t\t\t\tsx: {\n\t\t\t\t\tborderBottomWidth: 1,\n\t\t\t\t\t'& .MuiAccordionSummary-root': { borderBottomWidth: 1 }\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t<Box className='calculationSummary--SummaryContainer'>\n\t\t\t\t<Box className='calculationSummary--SummaryItem'>\n\t\t\t\t\t<Typography type='s5' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\tGrand Total\n\t\t\t\t\t</Typography>\n\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t{data.currencySymbol} {data.total}\n\t\t\t\t\t</Typography>\n\t\t\t\t</Box>\n\t\t\t\t{Number(data.roundOffDifferenceAmount) > 0 && \n\t\t\t\t\t<Box className='calculationSummary--SummaryItem'>\n\t\t\t\t\t\t<Typography type='s5' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\t\tRound Off Difference\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t\t{data.currencySymbol} {data.roundOffDifferenceAmount}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t</Box>\n\t\t</Accordion>\n\t);\n};\n\nexport default TotalSummary;\n"],"names":["data","jsx","Accordion","title","Typography","type","weight","color","children","accordionProps","defaultExpanded","sx","borderBottomWidth","jsxs","Box","className","currencySymbol","total","Number","roundOffDifferenceAmount"],"mappings":"oSAcmD,EAAGA,yBAEpDC,EAAAA,IAACC,EAAAA,~~QAAA~~,CACAC,2BACEC,aAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAAuBC,SAAA,UAIpEC,eAAgB,CACfC,iBAAiB,EACjBC,GAAI,CACHC,kBAAmB,EACnB,8BAA+B,CAAEA,kBAAmB,KAGtDJ,0BAAAK,KAACC,EAAAA,QAAA,CAAIC,UAAU,uCACdP,SAAA;iBAAAK,KAACC,EAAAA,QAAA,CAAIC,UAAU,kCACdP,SAAA;eAAAP,EAAAA,IAACG,EAAAA,YAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,sBAAsBC,SAAA;sBAGjEJ,EAAAA,WAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAC1CC,SAAA,CAAAR,EAAKgB,eAAe,IAAEhB,EAAKiB,YAG7BC,OAAOlB,EAAKmB,0BAA4B,kBACxCN,OAACC,EAAAA,QAAA,CAAIC,UAAU,kCACdP,SAAA;eAAAP,EAAAA,IAACG,EAAAA,YAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,sBAAsBC,SAAA;sBAGjEJ,EAAAA,WAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAC1CC,SAAA,CAAAR,EAAKgB,eAAe,IAAEhB,EAAKmB"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/calculation-summary/components/total-summary.tsx"],"sourcesContent":["import { Box } from '@mui/material';\n\nimport Accordion from '../../accordion/accordion';\nimport Typography from '../../typography/typography';\n\nexport interface ITotalSummary {\n\ttotal: string \| number;\n\troundOffDifferenceAmount: number \| string;\n\tcurrencySymbol: string;\n}\ninterface ITotalSummaryProps {\n\tdata: ITotalSummary;\n}\n\nconst TotalSummary: React.FC<ITotalSummaryProps> = ({ data }) => {\n\treturn (\n\t\t<Accordion\n\t\t\ttitle={\n\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\tTotal\n\t\t\t\t</Typography>\n\t\t\t}\n\t\t\taccordionProps={{\n\t\t\t\tdefaultExpanded: true,\n\t\t\t\tsx: {\n\t\t\t\t\tborderBottomWidth: 1,\n\t\t\t\t\t'& .MuiAccordionSummary-root': { borderBottomWidth: 1 }\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t<Box className='calculationSummary--SummaryContainer'>\n\t\t\t\t<Box className='calculationSummary--SummaryItem'>\n\t\t\t\t\t<Typography type='s5' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\tGrand Total\n\t\t\t\t\t</Typography>\n\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t{data.currencySymbol} {data.total}\n\t\t\t\t\t</Typography>\n\t\t\t\t</Box>\n\t\t\t\t{Number(data.roundOffDifferenceAmount) > 0 && \n\t\t\t\t\t<Box className='calculationSummary--SummaryItem'>\n\t\t\t\t\t\t<Typography type='s5' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\t\tRound Off Difference\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t\t{data.currencySymbol} {data.roundOffDifferenceAmount}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t</Box>\n\t\t</Accordion>\n\t);\n};\n\nexport default TotalSummary;\n"],"names":["data","jsx","Accordion","title","Typography","type","weight","color","children","accordionProps","defaultExpanded","sx","borderBottomWidth","jsxs","Box","className","currencySymbol","total","Number","roundOffDifferenceAmount"],"mappings":"oSAcmD,EAAGA,yBAEpDC,EAAAA,IAACC,EAAAA,UAAA,CACAC,2BACEC,aAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAAuBC,SAAA,UAIpEC,eAAgB,CACfC,iBAAiB,EACjBC,GAAI,CACHC,kBAAmB,EACnB,8BAA+B,CAAEA,kBAAmB,KAGtDJ,0BAAAK,KAACC,EAAAA,QAAA,CAAIC,UAAU,uCACdP,SAAA;iBAAAK,KAACC,EAAAA,QAAA,CAAIC,UAAU,kCACdP,SAAA;eAAAP,EAAAA,IAACG,EAAAA,YAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,sBAAsBC,SAAA;sBAGjEJ,EAAAA,WAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAC1CC,SAAA,CAAAR,EAAKgB,eAAe,IAAEhB,EAAKiB,YAG7BC,OAAOlB,EAAKmB,0BAA4B,kBACxCN,OAACC,EAAAA,QAAA,CAAIC,UAAU,kCACdP,SAAA;eAAAP,EAAAA,IAACG,EAAAA,YAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,sBAAsBC,SAAA;sBAGjEJ,EAAAA,WAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAC1CC,SAAA,CAAAR,EAAKgB,eAAe,IAAEhB,EAAKmB"}

package/dist/components/card-wrapper/card-wrapper/index.esm.js CHANGED Viewed

@@ -5,6 +5,7 @@ const CardWrapper = ({ children, ...rest }) => {
   return /* @__PURE__ */ jsx(Box, { className: "card-wrapper", ...rest, children });
 };
 export {
+  CardWrapper,
   CardWrapper as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/card-wrapper/card-wrapper/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../src/components/card-wrapper/card-wrapper.tsx"],"sourcesContent":["import { Box } from \"@mui/material\";\nimport \"./card-wrapper.scss\";\nimport React from \"react\";\n\ninterface CardWrapperPropsType {\n children: React.ReactNode;\n}\n\nconst CardWrapper = ({ children, ...rest }: CardWrapperPropsType) => {\n return (\n <Box className=\"card-wrapper\" {...rest}>\n {children}\n </Box>\n );\n};\n\nexport default CardWrapper;\n"],"names":[],"mappings":";;;AAQA,MAAM,cAAc,CAAC,EAAE,UAAU,GAAG,WAAiC;AACnE,6BACG,KAAA,EAAI,WAAU,gBAAgB,GAAG,MAC/B,UACH;AAEJ;"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../src/components/card-wrapper/card-wrapper.tsx"],"sourcesContent":["import { Box } from \"@mui/material\";\nimport \"./card-wrapper.scss\";\nimport React from \"react\";\n\ninterface CardWrapperPropsType {\n children: React.ReactNode;\n}\n\nconst CardWrapper = ({ children, ...rest }: CardWrapperPropsType) => {\n return (\n <Box className=\"card-wrapper\" {...rest}>\n {children}\n </Box>\n );\n};\n\nexport { CardWrapper };\nexport default CardWrapper;\n"],"names":[],"mappings":";;;AAQA,MAAM,cAAc,CAAC,EAAE,UAAU,GAAG,WAAiC;AACnE,6BACG,KAAA,EAAI,WAAU,gBAAgB,GAAG,MAC/B,UACH;AAEJ;"}

package/dist/components/card-wrapper/card-wrapper/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");;/* empty css                          */var r=;/* empty css                                                 */exports.default=({children:s,...a})=>/* @__PURE__ */e.jsx(r.default,{className:"card-wrapper",...a,children:s});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");;/* empty css                          */var r=;/* empty css                                                 */const s=({children:s,...a})=>/* @__PURE__ */e.jsx(r.default,{className:"card-wrapper",...a,children:s});exports.CardWrapper=s,exports.default=s;
 //# sourceMappingURL=index.js.map

package/dist/components/card-wrapper/card-wrapper/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/card-wrapper/card-wrapper.tsx"],"sourcesContent":["import { Box } from \"@mui/material\";\nimport \"./card-wrapper.scss\";\nimport React from \"react\";\n\ninterface CardWrapperPropsType {\n children: React.ReactNode;\n}\n\nconst CardWrapper = ({ children, ...rest }: CardWrapperPropsType) => {\n return (\n <Box className=\"card-wrapper\" {...rest}>\n {children}\n </Box>\n );\n};\n\nexport default CardWrapper;\n"],"names":["children","rest","Box","className"],"mappings":"~~sOAQoB~~,~~EAAGA~~,cAAaC,0BAE/BC,EAAAA,QAAA,CAAIC,UAAU,kBAAmBF,EAC/BD"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/card-wrapper/card-wrapper.tsx"],"sourcesContent":["import { Box } from \"@mui/material\";\nimport \"./card-wrapper.scss\";\nimport React from \"react\";\n\ninterface CardWrapperPropsType {\n children: React.ReactNode;\n}\n\nconst CardWrapper = ({ children, ...rest }: CardWrapperPropsType) => {\n return (\n <Box className=\"card-wrapper\" {...rest}>\n {children}\n </Box>\n );\n};\n\nexport { CardWrapper };\nexport default CardWrapper;\n"],"names":["CardWrapper","children","rest","Box","className"],"mappings":"sNAQA,MAAMA,EAAc,EAAGC,cAAaC,0BAE/BC,EAAAA,QAAA,CAAIC,UAAU,kBAAmBF,EAC/BD"}

package/dist/components/card-wrapper/card-wrapper.d.ts CHANGED Viewed

@@ -4,4 +4,5 @@ interface CardWrapperPropsType {
     children: React.ReactNode;
 }
 declare const CardWrapper: ({ children, ...rest }: CardWrapperPropsType) => import("react/jsx-runtime").JSX.Element;
+export { CardWrapper };
 export default CardWrapper;

package/dist/components/change-user-password-modal/change-user-password-modal/index.esm.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import Modal from "../../modal/modal/index.esm.js";
+import { Modal } from "../../modal/modal/index.esm.js";
 import { useForm } from "react-hook-form";
 import { yupResolver as o } from "../../../node_modules/@hookform/resolvers/yup/dist/yup/index.esm.js";
 import * as Yup from "yup";
 import { useAuth } from "../../../hooks/useAuth/index.esm.js";
 import { Typography } from "../../typography/typography/index.esm.js";
-import DynamicInput from "../../form-control/form-builder/form-builder-element/text/index.esm.js";
-import Button from "../../button/button/index.esm.js";
-import Toast from "../../toast/toast/index.esm.js";
+import { DynamicInput } from "../../form-control/form-builder/form-builder-element/text/index.esm.js";
+import { Button } from "../../button/button/index.esm.js";
+import { Toast } from "../../toast/toast/index.esm.js";
 import styled from "../../../node_modules/@mui/system/esm/styled/index.esm.js";
 import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import { Eye } from "../../icons/eye/index.esm.js";
@@ -115,6 +115,7 @@ const ChangeUserPasswordModal = ({ showModal, setShowModal, userId }) => {
   ] });
 };
 export {
+  ChangeUserPasswordModal,
   ChangeUserPasswordModal as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/change-user-password-modal/change-user-password-modal/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n login: Yup.object({\r\n password: Yup.string()\r\n .required(\"Please enter password\")\r\n .min(8, \"Password must be at least 8 characters\")\r\n .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n .matches(/[!@#$%^&*(),.?\":{}\|<>]/, \"Password must contain at least one special character\"),\r\n }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n const { changeUserPasswordByAdmin } = useAuth();\r\n const [isNotify, setIsNotify] = useState(false);\r\n const [toast, setToast] = useState<IToast \| null>(null);\r\n\r\n interface FormValeus {\r\n login: LoginFormValues;\r\n }\r\n\r\n const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n resolver: yupResolver(validationSchema),\r\n mode: \"all\",\r\n });\r\n\r\n const onSubmit = async (values: FormValeus) => {\r\n values.login.id = userId;\r\n values.login.isNotify = isNotify;\r\n await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n if (type) {\r\n setToast({ message: message, type: \"normal\" });\r\n setShowModal(false);\r\n reset({\r\n login: {\r\n password: \"\",\r\n id: \"\",\r\n isNotify: false\r\n },\r\n });\r\n } else {\r\n setToast({ message: message, type: \"alert\" });\r\n }\r\n });\r\n return values; \r\n };\r\n\r\n const [showPassword, setShowPassword] = useState<boolean>(false);\r\n const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n const FlexBox = styled(Box)(() => ({\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n }));\r\n\r\n return (\r\n <>\r\n <Modal \r\n open={showModal}\r\n onClose={() => setShowModal(false)} \r\n children={\r\n <>\r\n <form onSubmit={handleSubmit(onSubmit)}>\r\n <FlexBox gap={4} className=\"popup-change-pass\">\r\n <FlexBox gap={2}>\r\n <Box>\r\n <Typography\r\n align=\"center\"\r\n type=\"h1\"\r\n weight=\"medium\"\r\n color=\"theme.secondary.1000\"\r\n >\r\n Change Password\r\n </Typography>\r\n </Box>\r\n <FlexBox gap={2}>\r\n <Box>\r\n <DynamicInput\r\n formControl={control}\r\n label=\"Enter New Password\"\r\n name=\"password\"\r\n type={showPassword ? \"text\" : \"password\"}\r\n placeholder=\"Enter New Password\"\r\n fieldArrayName=\"login\"\r\n endIcon={\r\n <>\r\n {showPassword ? (\r\n <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n ) : (\r\n <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n )}\r\n </>\r\n }\r\n onIconClick={handleShowPassword}\r\n />\r\n </Box>\r\n <Box>\r\n <FormControlLabel control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n '&.Mui-checked': {\r\n color: '#2EB273',\r\n },\r\n }} />} label=\"Notify User of Password Change\" sx={{ \r\n '& .MuiFormControlLabel-label': {\r\n fontSize: '14px',\r\n },\r\n }}/>\r\n </Box>\r\n </FlexBox>\r\n </FlexBox>\r\n <FlexBox gap={2}>\r\n <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n Change Password\r\n </Button>\r\n </FlexBox>\r\n </FlexBox>\r\n </form> \r\n </>\r\n }\r\n />\r\n <Toast\r\n open={Boolean(toast)}\r\n message={toast?.message}\r\n type={toast?.type}\r\n handleClose={() => setToast(null)}\r\n anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n autoHideDuration={3000}\r\n />\r\n </>\r\n );\r\n}\r\n\r\nexport default ChangeUserPasswordModal;"],"names":["yupResolver"],"mappings":"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"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n login: Yup.object({\r\n password: Yup.string()\r\n .required(\"Please enter password\")\r\n .min(8, \"Password must be at least 8 characters\")\r\n .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n .matches(/[!@#$%^&*(),.?\":{}\|<>]/, \"Password must contain at least one special character\"),\r\n }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n const { changeUserPasswordByAdmin } = useAuth();\r\n const [isNotify, setIsNotify] = useState(false);\r\n const [toast, setToast] = useState<IToast \| null>(null);\r\n\r\n interface FormValeus {\r\n login: LoginFormValues;\r\n }\r\n\r\n const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n resolver: yupResolver(validationSchema),\r\n mode: \"all\",\r\n });\r\n\r\n const onSubmit = async (values: FormValeus) => {\r\n values.login.id = userId;\r\n values.login.isNotify = isNotify;\r\n await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n if (type) {\r\n setToast({ message: message, type: \"normal\" });\r\n setShowModal(false);\r\n reset({\r\n login: {\r\n password: \"\",\r\n id: \"\",\r\n isNotify: false\r\n },\r\n });\r\n } else {\r\n setToast({ message: message, type: \"alert\" });\r\n }\r\n });\r\n return values; \r\n };\r\n\r\n const [showPassword, setShowPassword] = useState<boolean>(false);\r\n const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n const FlexBox = styled(Box)(() => ({\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n }));\r\n\r\n return (\r\n <>\r\n <Modal \r\n open={showModal}\r\n onClose={() => setShowModal(false)} \r\n children={\r\n <>\r\n <form onSubmit={handleSubmit(onSubmit)}>\r\n <FlexBox gap={4} className=\"popup-change-pass\">\r\n <FlexBox gap={2}>\r\n <Box>\r\n <Typography\r\n align=\"center\"\r\n type=\"h1\"\r\n weight=\"medium\"\r\n color=\"theme.secondary.1000\"\r\n >\r\n Change Password\r\n </Typography>\r\n </Box>\r\n <FlexBox gap={2}>\r\n <Box>\r\n <DynamicInput\r\n formControl={control}\r\n label=\"Enter New Password\"\r\n name=\"password\"\r\n type={showPassword ? \"text\" : \"password\"}\r\n placeholder=\"Enter New Password\"\r\n fieldArrayName=\"login\"\r\n endIcon={\r\n <>\r\n {showPassword ? (\r\n <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n ) : (\r\n <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n )}\r\n </>\r\n }\r\n onIconClick={handleShowPassword}\r\n />\r\n </Box>\r\n <Box>\r\n <FormControlLabel control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n '&.Mui-checked': {\r\n color: '#2EB273',\r\n },\r\n }} />} label=\"Notify User of Password Change\" sx={{ \r\n '& .MuiFormControlLabel-label': {\r\n fontSize: '14px',\r\n },\r\n }}/>\r\n </Box>\r\n </FlexBox>\r\n </FlexBox>\r\n <FlexBox gap={2}>\r\n <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n Change Password\r\n </Button>\r\n </FlexBox>\r\n </FlexBox>\r\n </form> \r\n </>\r\n }\r\n />\r\n <Toast\r\n open={Boolean(toast)}\r\n message={toast?.message}\r\n type={toast?.type}\r\n handleClose={() => setToast(null)}\r\n anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n autoHideDuration={3000}\r\n />\r\n </>\r\n );\r\n}\r\n\r\nexport { ChangeUserPasswordModal };\nexport default ChangeUserPasswordModal;"],"names":["yupResolver"],"mappings":"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"}

package/dist/components/change-user-password-modal/change-user-password-modal/index.js CHANGED Viewed

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../modal/modal/index.js"),s=require("react-hook-form"),t=require("../../../node_modules/@hookform/resolvers/yup/dist/yup/index.js"),a=require("yup"),n=require("../../../hooks/useAuth/index.js"),l=require("../../typography/typography/index.js"),i=require("../../form-control/form-builder/form-builder-element/text/index.js"),d=require("../../button/button/index.js"),u=require("../../toast/toast/index.js"),c=require("../../../node_modules/@mui/system/esm/styled/index.js"),m=require("../../../node_modules/@mui/material/Box/Box/index.js"),h=require("../../icons/eye/index.js"),x=require("../../icons/eye-off/index.js"),f=require("../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),p=require("../../../node_modules/@mui/material/Checkbox/Checkbox/index.js");function j(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=/* @__PURE__ */Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:function(){return e[o]}})}}),r.default=e,r}var g=/* @__PURE__ */j(a);const y=g.object({login:g.object({password:g.string().required("Please enter password").min(8,"Password must be at least 8 characters").matches(/[A-Z]/,"Password must contain at least one uppercase letter").matches(/[!@#$%^&*(),.?":{}|<>]/,"Password must contain at least one special character")})});exports.default=({showModal:a,setShowModal:j,userId:g})=>{const{changeUserPasswordByAdmin:b}=n.useAuth(),[w,q]=r.useState(!1),[C,P]=r.useState(null),{control:v,handleSubmit:k,reset:S}=s.useForm({resolver:t.yupResolver(y),mode:"all"}),[O,F]=r.useState(!1),N=c.default(m.default)(()=>({display:"flex",flexDirection:"column"}));/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../modal/modal/index.js"),s=require("react-hook-form"),t=require("../../../node_modules/@hookform/resolvers/yup/dist/yup/index.js"),a=require("yup"),n=require("../../../hooks/useAuth/index.js"),l=require("../../typography/typography/index.js"),i=require("../../form-control/form-builder/form-builder-element/text/index.js"),d=require("../../button/button/index.js"),u=require("../../toast/toast/index.js"),c=require("../../../node_modules/@mui/system/esm/styled/index.js"),m=require("../../../node_modules/@mui/material/Box/Box/index.js"),h=require("../../icons/eye/index.js"),x=require("../../icons/eye-off/index.js"),p=require("../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),j=require("../../../node_modules/@mui/material/Checkbox/Checkbox/index.js");function f(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=/* @__PURE__ */Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:function(){return e[o]}})}}),r.default=e,r}var g=/* @__PURE__ */f(a);const y=g.object({login:g.object({password:g.string().required("Please enter password").min(8,"Password must be at least 8 characters").matches(/[A-Z]/,"Password must contain at least one uppercase letter").matches(/[!@#$%^&*(),.?":{}|<>]/,"Password must contain at least one special character")})}),b=({showModal:a,setShowModal:f,userId:g})=>{const{changeUserPasswordByAdmin:b}=n.useAuth(),[w,q]=r.useState(!1),[C,P]=r.useState(null),{control:v,handleSubmit:k,reset:S}=s.useForm({resolver:t.yupResolver(y),mode:"all"}),[O,F]=r.useState(!1),M=c.default(m.default)(()=>({display:"flex",flexDirection:"column"}));/* @__PURE__ */
 return e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(o.default,{open:a,onClose:()=>j(!1),children:/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsx("form",{onSubmit:k(async e=>(e.login.id=g,e.login.isNotify=w,await b(e.login,(e,r)=>{r?(P({message:e,type:"normal"}),j(!1),S({login:{password:"",id:"",isNotify:!1}})):P({message:e,type:"alert"})}),e)),children:/* @__PURE__ */e.jsxs(N,{gap:4,className:"popup-change-pass",children:[
-/* @__PURE__ */e.jsxs(N,{gap:2,children:[
+/* @__PURE__ */e.jsx(o.Modal,{open:a,onClose:()=>f(!1),children:/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsx("form",{onSubmit:k(async e=>(e.login.id=g,e.login.isNotify=w,await b(e.login,(e,r)=>{r?(P({message:e,type:"normal"}),f(!1),S({login:{password:"",id:"",isNotify:!1}})):P({message:e,type:"alert"})}),e)),children:/* @__PURE__ */e.jsxs(M,{gap:4,className:"popup-change-pass",children:[
+/* @__PURE__ */e.jsxs(M,{gap:2,children:[
 /* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(l.Typography,{align:"center",type:"h1",weight:"medium",color:"theme.secondary.1000",children:"Change Password"})}),
-/* @__PURE__ */e.jsxs(N,{gap:2,children:[
-/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(i.default,{formControl:v,label:"Enter New Password",name:"password",type:O?"text":"password",placeholder:"Enter New Password",fieldArrayName:"login",endIcon:/* @__PURE__ */e.jsx(e.Fragment,{children:O?/* @__PURE__ */e.jsx(h.Eye,{fontSize:"small",htmlColor:"#292D32"}):/* @__PURE__ */e.jsx(x.EyeOff,{fontSize:"small",htmlColor:"#292D32"})}),onIconClick:()=>F(!O)})}),
-/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(f.default,{control:/* @__PURE__ */e.jsx(p.default,{size:"small",onChange:e=>q(e.target.checked),sx:{"&.Mui-checked":{color:"#2EB273"}}}),label:"Notify User of Password Change",sx:{"& .MuiFormControlLabel-label":{fontSize:"14px"}}})})]})]}),
-/* @__PURE__ */e.jsx(N,{gap:2,children:/* @__PURE__ */e.jsx(d.default,{type:"submit",size:"large",variant:"contained",children:"Change Password"})})]})})})}),
-/* @__PURE__ */e.jsx(u.default,{open:Boolean(C),message:null==C?void 0:C.message,type:null==C?void 0:C.type,handleClose:()=>P(null),anchorOrigin:{horizontal:"right",vertical:"bottom"},autoHideDuration:3e3})]})};
+/* @__PURE__ */e.jsxs(M,{gap:2,children:[
+/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(i.DynamicInput,{formControl:v,label:"Enter New Password",name:"password",type:O?"text":"password",placeholder:"Enter New Password",fieldArrayName:"login",endIcon:/* @__PURE__ */e.jsx(e.Fragment,{children:O?/* @__PURE__ */e.jsx(h.Eye,{fontSize:"small",htmlColor:"#292D32"}):/* @__PURE__ */e.jsx(x.EyeOff,{fontSize:"small",htmlColor:"#292D32"})}),onIconClick:()=>F(!O)})}),
+/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(p.default,{control:/* @__PURE__ */e.jsx(j.default,{size:"small",onChange:e=>q(e.target.checked),sx:{"&.Mui-checked":{color:"#2EB273"}}}),label:"Notify User of Password Change",sx:{"& .MuiFormControlLabel-label":{fontSize:"14px"}}})})]})]}),
+/* @__PURE__ */e.jsx(M,{gap:2,children:/* @__PURE__ */e.jsx(d.Button,{type:"submit",size:"large",variant:"contained",children:"Change Password"})})]})})})}),
+/* @__PURE__ */e.jsx(u.Toast,{open:Boolean(C),message:null==C?void 0:C.message,type:null==C?void 0:C.type,handleClose:()=>P(null),anchorOrigin:{horizontal:"right",vertical:"bottom"},autoHideDuration:3e3})]})};exports.ChangeUserPasswordModal=b,exports.default=b;
 //# sourceMappingURL=index.js.map

package/dist/components/change-user-password-modal/change-user-password-modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n login: Yup.object({\r\n password: Yup.string()\r\n .required(\"Please enter password\")\r\n .min(8, \"Password must be at least 8 characters\")\r\n .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n .matches(/[!@#$%^&*(),.?\":{}\|<>]/, \"Password must contain at least one special character\"),\r\n }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n const { changeUserPasswordByAdmin } = useAuth();\r\n const [isNotify, setIsNotify] = useState(false);\r\n const [toast, setToast] = useState<IToast \| null>(null);\r\n\r\n interface FormValeus {\r\n login: LoginFormValues;\r\n }\r\n\r\n const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n resolver: yupResolver(validationSchema),\r\n mode: \"all\",\r\n });\r\n\r\n const onSubmit = async (values: FormValeus) => {\r\n values.login.id = userId;\r\n values.login.isNotify = isNotify;\r\n await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n if (type) {\r\n setToast({ message: message, type: \"normal\" });\r\n setShowModal(false);\r\n reset({\r\n login: {\r\n password: \"\",\r\n id: \"\",\r\n isNotify: false\r\n },\r\n });\r\n } else {\r\n setToast({ message: message, type: \"alert\" });\r\n }\r\n });\r\n return values; \r\n };\r\n\r\n const [showPassword, setShowPassword] = useState<boolean>(false);\r\n const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n const FlexBox = styled(Box)(() => ({\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n }));\r\n\r\n return (\r\n <>\r\n <Modal \r\n open={showModal}\r\n onClose={() => setShowModal(false)} \r\n children={\r\n <>\r\n <form onSubmit={handleSubmit(onSubmit)}>\r\n <FlexBox gap={4} className=\"popup-change-pass\">\r\n <FlexBox gap={2}>\r\n <Box>\r\n <Typography\r\n align=\"center\"\r\n type=\"h1\"\r\n weight=\"medium\"\r\n color=\"theme.secondary.1000\"\r\n >\r\n Change Password\r\n </Typography>\r\n </Box>\r\n <FlexBox gap={2}>\r\n <Box>\r\n <DynamicInput\r\n formControl={control}\r\n label=\"Enter New Password\"\r\n name=\"password\"\r\n type={showPassword ? \"text\" : \"password\"}\r\n placeholder=\"Enter New Password\"\r\n fieldArrayName=\"login\"\r\n endIcon={\r\n <>\r\n {showPassword ? (\r\n <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n ) : (\r\n <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n )}\r\n </>\r\n }\r\n onIconClick={handleShowPassword}\r\n />\r\n </Box>\r\n <Box>\r\n <FormControlLabel control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n '&.Mui-checked': {\r\n color: '#2EB273',\r\n },\r\n }} />} label=\"Notify User of Password Change\" sx={{ \r\n '& .MuiFormControlLabel-label': {\r\n fontSize: '14px',\r\n },\r\n }}/>\r\n </Box>\r\n </FlexBox>\r\n </FlexBox>\r\n <FlexBox gap={2}>\r\n <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n Change Password\r\n </Button>\r\n </FlexBox>\r\n </FlexBox>\r\n </form> \r\n </>\r\n }\r\n />\r\n <Toast\r\n open={Boolean(toast)}\r\n message={toast?.message}\r\n type={toast?.type}\r\n handleClose={() => setToast(null)}\r\n anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n autoHideDuration={3000}\r\n />\r\n </>\r\n );\r\n}\r\n\r\nexport default ChangeUserPasswordModal;"],"names":["validationSchema","Yup","object","login","password","string","required","min","matches","showModal","setShowModal","userId","changeUserPasswordByAdmin","useAuth","isNotify","setIsNotify","useState","toast","setToast","control","handleSubmit","reset","useForm","resolver","yupResolver","mode","showPassword","setShowPassword","FlexBox","styled","Box","display","flexDirection","jsxs","Fragment","children","jsx","Modal","open","onClose","onSubmit","async","values","id","message","type","gap","className","Typography","align","weight","color","DynamicInput","formControl","label","name","placeholder","fieldArrayName","endIcon","Eye","fontSize","htmlColor","EyeOff","onIconClick","FormControlLabel","Checkbox","size","onChange","e","target","checked","sx","Button","variant","Toast","Boolean","handleClose","anchorOrigin","horizontal","vertical","autoHideDuration"],"mappings":"uuCAiBA,MAAMA,EAAmBC,EAAIC,OAAO,CAClCC,MAAOF,EAAIC,OAAO,CACdE,SAAUH,EAAII,SACHC,SAAS,yBACTC,IAAI,EAAG,0CACPC,QAAQ,QAAS,uDACjBA,QAAQ,yBAA0B,~~4EAMnB~~,EAAEC,YAAWC,eAAcC,aACtD,MAAMC,0BAAEA,GAA8BC,aAC/BC,EAAUC,GAAeC,EAAAA,UAAS,IACnCC,EAAOC,GAAYF,EAAAA,SAAwB,OAM5CG,QAAEA,EAAAC,aAASA,EAAAC,MAAcA,GAAUC,EAAAA,QAAoB,CAC3DC,SAAUC,EAAAA,~~YAAYxB~~,~~GACtByB~~,KAAM,SAwBDC,EAAcC,GAAmBX,EAAAA,UAAkB,GAGnDY,EAAUC,EAAAA,QAAOC,EAAAA,QAAPD,CAAY,KAAA,CACzBE,QAAS,OACTC,cAAe;AAGnB,OACIC,EAAAA,KAAAC,WAAA,CACAC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,~~QAAA~~,CACDC,KAAM7B,EACN8B,QAAS,IAAM7B,GAAa,GAC5ByB,wBACEC,EAAAA,IAAAF,EAAAA,SAAA,CACEC,wBAAAC,EAAAA,IAAC,OAAA,CAAKI,SAAUpB,EApCPqB,MAAOC,IACpBA,~~EAAOvC~~,~~MAAMwC~~,GAAKhC,EAClB+B,~~EAAOvC~~,~~MAAMW~~,SAAWA,QACpBF,EAA0B8B,~~EAAOvC~~,MAAO,~~CAACyC~~,EAASC,KAClDA,GACF3B,EAAS,CAAE0B,UAAkBC,KAAM,WACnCnC,GAAa,GACbW,EAAM,~~CACJlB~~,MAAO,CACHC,SAAU,~~GACVuC~~,GAAI,GACJ7B,UAAU,MAIhBI,EAAS,CAAE0B,UAAkBC,KAAM,YAGhCH,IAmBGP,wBAAAF,EAAAA,KAACL,EAAA,CAAQkB,IAAK,EAAGC,UAAU,oBACzBZ,SAAA;iBAAAF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACY,EAAAA,WAAA,CACCC,MAAM,SACNJ,KAAK,KACLK,OAAO,SACPC,MAAM,uBACPhB,SAAA;iBAIHF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACgB,EAAAA,~~QAAA~~,CACCC,YAAalC,EACbmC,MAAM,qBACNC,KAAK,WACLV,KAAMnB,EAAe,OAAS,WAC9B8B,YAAY,qBACZC,eAAe,QACfC,uBACEtB,EAAAA,IAAAF,EAAAA,SAAA,CACGC,SAAAT,iBACCU,MAACuB,EAAAA,IAAA,CAAIC,SAAS,QAAQC,UAAU,iCAE/BC,SAAA,CAAOF,SAAS,QAAQC,UAAU,cAIzCE,YA7CK,IAAMpC,GAAiBD;qBAgD/BI,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAAC4B,EAAAA,QAAA,CAAkB7C,6BAAU8C,UAAA,CAASC,KAAK,QAAQC,SAAWC,GAAMrD,EAAYqD,EAAEC,OAAOC,SAAUC,GAAI,CACnG,gBAAiB,CACjBpB,MAAO,cAEJG,MAAM,iCAAiCiB,GAAI,CAC9C,+BAAgC,CAChCX,SAAU;eAMpBxB,EAAAA,IAACR,EAAA,CAAQkB,IAAK,EACZX,wBAAAC,EAAAA,IAACoC,~~UAAA~~,CAAO3B,KAAK,SAASqB,KAAK,QAAQO,QAAQ,YAAYtC;eASnEC,EAAAA,IAACsC,EAAAA,~~QAAA~~,CACGpC,KAAMqC,QAAQ1D,GACd2B,QAAS3B,MAAAA,OAAAA,EAAAA,EAAO2B,QAChBC,KAAM5B,MAAAA,OAAAA,EAAAA,EAAO4B,KACb+B,YAAa,IAAM1D,EAAS,MAC5B2D,aAAc,CAAEC,WAAY,QAASC,SAAU,UAC/CC,iBAAkB"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n login: Yup.object({\r\n password: Yup.string()\r\n .required(\"Please enter password\")\r\n .min(8, \"Password must be at least 8 characters\")\r\n .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n .matches(/[!@#$%^&*(),.?\":{}\|<>]/, \"Password must contain at least one special character\"),\r\n }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n const { changeUserPasswordByAdmin } = useAuth();\r\n const [isNotify, setIsNotify] = useState(false);\r\n const [toast, setToast] = useState<IToast \| null>(null);\r\n\r\n interface FormValeus {\r\n login: LoginFormValues;\r\n }\r\n\r\n const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n resolver: yupResolver(validationSchema),\r\n mode: \"all\",\r\n });\r\n\r\n const onSubmit = async (values: FormValeus) => {\r\n values.login.id = userId;\r\n values.login.isNotify = isNotify;\r\n await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n if (type) {\r\n setToast({ message: message, type: \"normal\" });\r\n setShowModal(false);\r\n reset({\r\n login: {\r\n password: \"\",\r\n id: \"\",\r\n isNotify: false\r\n },\r\n });\r\n } else {\r\n setToast({ message: message, type: \"alert\" });\r\n }\r\n });\r\n return values; \r\n };\r\n\r\n const [showPassword, setShowPassword] = useState<boolean>(false);\r\n const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n const FlexBox = styled(Box)(() => ({\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n }));\r\n\r\n return (\r\n <>\r\n <Modal \r\n open={showModal}\r\n onClose={() => setShowModal(false)} \r\n children={\r\n <>\r\n <form onSubmit={handleSubmit(onSubmit)}>\r\n <FlexBox gap={4} className=\"popup-change-pass\">\r\n <FlexBox gap={2}>\r\n <Box>\r\n <Typography\r\n align=\"center\"\r\n type=\"h1\"\r\n weight=\"medium\"\r\n color=\"theme.secondary.1000\"\r\n >\r\n Change Password\r\n </Typography>\r\n </Box>\r\n <FlexBox gap={2}>\r\n <Box>\r\n <DynamicInput\r\n formControl={control}\r\n label=\"Enter New Password\"\r\n name=\"password\"\r\n type={showPassword ? \"text\" : \"password\"}\r\n placeholder=\"Enter New Password\"\r\n fieldArrayName=\"login\"\r\n endIcon={\r\n <>\r\n {showPassword ? (\r\n <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n ) : (\r\n <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n )}\r\n </>\r\n }\r\n onIconClick={handleShowPassword}\r\n />\r\n </Box>\r\n <Box>\r\n <FormControlLabel control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n '&.Mui-checked': {\r\n color: '#2EB273',\r\n },\r\n }} />} label=\"Notify User of Password Change\" sx={{ \r\n '& .MuiFormControlLabel-label': {\r\n fontSize: '14px',\r\n },\r\n }}/>\r\n </Box>\r\n </FlexBox>\r\n </FlexBox>\r\n <FlexBox gap={2}>\r\n <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n Change Password\r\n </Button>\r\n </FlexBox>\r\n </FlexBox>\r\n </form> \r\n </>\r\n }\r\n />\r\n <Toast\r\n open={Boolean(toast)}\r\n message={toast?.message}\r\n type={toast?.type}\r\n handleClose={() => setToast(null)}\r\n anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n autoHideDuration={3000}\r\n />\r\n </>\r\n );\r\n}\r\n\r\nexport { ChangeUserPasswordModal };\nexport default ChangeUserPasswordModal;"],"names":["validationSchema","Yup","object","login","password","string","required","min","matches","ChangeUserPasswordModal","showModal","setShowModal","userId","changeUserPasswordByAdmin","useAuth","isNotify","setIsNotify","useState","toast","setToast","control","handleSubmit","reset","useForm","resolver","yupResolver","mode","showPassword","setShowPassword","FlexBox","styled","Box","display","flexDirection","jsxs","Fragment","children","jsx","Modal","open","onClose","onSubmit","async","values","id","message","type","gap","className","Typography","align","weight","color","DynamicInput","formControl","label","name","placeholder","fieldArrayName","endIcon","Eye","fontSize","htmlColor","EyeOff","onIconClick","FormControlLabel","Checkbox","size","onChange","e","target","checked","sx","Button","variant","Toast","Boolean","handleClose","anchorOrigin","horizontal","vertical","autoHideDuration"],"mappings":"uuCAiBA,MAAMA,EAAmBC,EAAIC,OAAO,CAClCC,MAAOF,EAAIC,OAAO,CACdE,SAAUH,EAAII,SACHC,SAAS,yBACTC,IAAI,EAAG,0CACPC,QAAQ,QAAS,uDACjBA,QAAQ,yBAA0B,4DAM7CC,EAA0B,EAAEC,YAAWC,eAAcC,aACtD,MAAMC,0BAAEA,GAA8BC,aAC/BC,EAAUC,GAAeC,EAAAA,UAAS,IACnCC,EAAOC,GAAYF,EAAAA,SAAwB,OAM5CG,QAAEA,EAAAC,aAASA,EAAAC,MAAcA,GAAUC,EAAAA,QAAoB,CAC3DC,SAAUC,EAAAA,YAAYzB,GACtB0B,KAAM,SAwBDC,EAAcC,GAAmBX,EAAAA,UAAkB,GAGnDY,EAAUC,EAAAA,QAAOC,EAAAA,QAAPD,CAAY,KAAA,CACzBE,QAAS,OACTC,cAAe;AAGnB,OACIC,EAAAA,KAAAC,WAAA,CACAC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,MAAA,CACDC,KAAM7B,EACN8B,QAAS,IAAM7B,GAAa,GAC5ByB,wBACEC,EAAAA,IAAAF,EAAAA,SAAA,CACEC,wBAAAC,EAAAA,IAAC,OAAA,CAAKI,SAAUpB,EApCPqB,MAAOC,IACpBA,EAAOxC,MAAMyC,GAAKhC,EAClB+B,EAAOxC,MAAMY,SAAWA,QACpBF,EAA0B8B,EAAOxC,MAAO,CAAC0C,EAASC,KAClDA,GACF3B,EAAS,CAAE0B,UAAkBC,KAAM,WACnCnC,GAAa,GACbW,EAAM,CACJnB,MAAO,CACHC,SAAU,GACVwC,GAAI,GACJ7B,UAAU,MAIhBI,EAAS,CAAE0B,UAAkBC,KAAM,YAGhCH,IAmBGP,wBAAAF,EAAAA,KAACL,EAAA,CAAQkB,IAAK,EAAGC,UAAU,oBACzBZ,SAAA;iBAAAF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACY,EAAAA,WAAA,CACCC,MAAM,SACNJ,KAAK,KACLK,OAAO,SACPC,MAAM,uBACPhB,SAAA;iBAIHF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACgB,EAAAA,aAAA,CACCC,YAAalC,EACbmC,MAAM,qBACNC,KAAK,WACLV,KAAMnB,EAAe,OAAS,WAC9B8B,YAAY,qBACZC,eAAe,QACfC,uBACEtB,EAAAA,IAAAF,EAAAA,SAAA,CACGC,SAAAT,iBACCU,MAACuB,EAAAA,IAAA,CAAIC,SAAS,QAAQC,UAAU,iCAE/BC,SAAA,CAAOF,SAAS,QAAQC,UAAU,cAIzCE,YA7CK,IAAMpC,GAAiBD;qBAgD/BI,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAAC4B,EAAAA,QAAA,CAAkB7C,6BAAU8C,UAAA,CAASC,KAAK,QAAQC,SAAWC,GAAMrD,EAAYqD,EAAEC,OAAOC,SAAUC,GAAI,CACnG,gBAAiB,CACjBpB,MAAO,cAEJG,MAAM,iCAAiCiB,GAAI,CAC9C,+BAAgC,CAChCX,SAAU;eAMpBxB,EAAAA,IAACR,EAAA,CAAQkB,IAAK,EACZX,wBAAAC,EAAAA,IAACoC,SAAA,CAAO3B,KAAK,SAASqB,KAAK,QAAQO,QAAQ,YAAYtC;eASnEC,EAAAA,IAACsC,EAAAA,MAAA,CACGpC,KAAMqC,QAAQ1D,GACd2B,QAAS3B,MAAAA,OAAAA,EAAAA,EAAO2B,QAChBC,KAAM5B,MAAAA,OAAAA,EAAAA,EAAO4B,KACb+B,YAAa,IAAM1D,EAAS,MAC5B2D,aAAc,CAAEC,WAAY,QAASC,SAAU,UAC/CC,iBAAkB"}

package/dist/components/change-user-password-modal/change-user-password-modal.d.ts CHANGED Viewed

@@ -3,4 +3,5 @@ declare const ChangeUserPasswordModal: ({ showModal, setShowModal, userId }: {
     setShowModal: any;
     userId: any;
 }) => import("react/jsx-runtime").JSX.Element;
+export { ChangeUserPasswordModal };
 export default ChangeUserPasswordModal;

package/dist/components/charts/areaLinerChart/index.esm.js CHANGED Viewed

@@ -105,6 +105,7 @@ const AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelTyp
   ] });
 };
 export {
+  AreaLineChart,
   AreaLineChart as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/charts/areaLinerChart/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n height: number,\n yAxisLabelType?: 'inPercent' \| 'inValue' \| 'custom';\n customLabelFormatter?: (value: number) => string;\n currency?: string;\n colors?: string[];\n customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n if (labelType === 'inPercent') {\n return `${d3.format(\".0%\")(num / 100)}`;\n } else if (labelType === 'inValue') {\n return `${symbol \|\| ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n }\n return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n const svgRef = useRef<SVGSVGElement \| null>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState<number>(0);\n const [tooltipData, setTooltipData] = useState<any>(null);\n useEffect(() => {\n const wrapper = wrapperRef.current;\n\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries[0]) {\n const newWidth = entries[0].contentRect.width;\n setContainerWidth(newWidth);\n }\n });\n\n if (wrapper) {\n resizeObserver.observe(wrapper);\n }\n\n return () => {\n if (wrapper) {\n resizeObserver.unobserve(wrapper);\n }\n };\n }, []);\n\n useEffect(() => {\n if (containerWidth === 0) return; // Wait for the container width\n\n const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n const width = containerWidth - margin.left - margin.right;\n const chartHeight = height - margin.top - margin.bottom;\n\n // Clear the SVG\n d3.select(svgRef.current).selectAll('*').remove();\n\n const svg = d3\n .select(svgRef.current)\n .attr('width', containerWidth)\n .attr('height', height)\n .append('g')\n .attr('transform', `translate(${margin.left},${margin.top})`);\n\n // Define scales\n const x = d3\n .scalePoint()\n .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n .range([0, width]);\n\n const y = d3\n .scaleLinear()\n .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n .range([chartHeight, 0]);\n\n // Limit x-axis ticks dynamically based on width\n const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n const xAxisGroup = svg.append('g')\n .attr('transform', `translate(0,${chartHeight})`)\n .call(xAxis);\n\n xAxisGroup.selectAll(\"text\")\n .attr(\"transform\", \"translate(0, 10)\")\n .attr('color', '#8E8E93')\n .style(\"text-anchor\", \"middle\");\n\n // Y Axis\n const yAxis = svg.append('g')\n yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n customLabelFormatter\n ? customLabelFormatter(d)\n : formatNumber(d, currency, yAxisLabelType)\n ).tickSizeOuter(0) as any)\n .selectAll('line')\n .attr('stroke-dasharray', '3,3')\n .attr('stroke', '#D3D3D4');\n\n xAxisGroup.selectAll(\".tick line\").remove();\n yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n // Define color scale for lines\n // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n // Line and area generators\n const line = (isSmooth: boolean) => d3.line<any>()\n .x(d => x(d.month)!)\n .y(d => y(d.value))\n .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear); // Conditionally smooth the line\n\n const area = d3.area<any>()\n .x(d => x(d.month)!)\n .y0(chartHeight)\n .y1(d => y(d.value));\n\n // Iterate over each dataset to create lines and areas\n data.forEach((dataset, i) => {\n // const datasetColor = color(i.toString());\n\n // Create gradient for each area\n const gradient = svg.append('defs')\n .append('linearGradient')\n .attr('id', `area-gradient-${i}`)\n .attr('x1', '0%')\n .attr('x2', '0%')\n .attr('y1', '0%')\n .attr('y2', '100%');\n\n gradient.append('stop')\n .attr('offset', '0%')\n .attr('stop-color', colors[i])\n .attr('stop-opacity', 0.4);\n\n gradient.append('stop')\n .attr('offset', '100%')\n .attr('stop-color', colors[i])\n .attr('stop-opacity', 0.1);\n\n // Append the area with gradient\n svg.append('path')\n .datum(dataset.values)\n .attr('fill', `url(#area-gradient-${i})`)\n .attr('d', area);\n\n // Append the line with smoothness condition\n svg.append('path')\n .datum(dataset.values)\n .attr('fill', 'none')\n .attr('stroke', colors[i])\n .attr('stroke-width', 2)\n .attr('d', line(dataset.isSmooth \|\| false)); // Use smoothness from the dataset\n\n // Append circles for hover effect\n {\n dataset?.showCircle &&\n svg.selectAll(`circle-${i}`)\n .data(dataset.values)\n .enter()\n .append('circle')\n .attr('cx', d => x(d.month)!)\n .attr('cy', d => y(d.value))\n .attr('r', 5)\n .attr('fill', colors[i])\n .attr('stroke', '#fff')\n .style('cursor', 'pointer')\n .on('mouseover', function (event, d) {\n setTooltipData({\n x: `${event.pageX + 10}px`,\n y: `${event.pageY - 30}px`,\n content: `${dataset.name}: ${d.value}`\n });\n d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n })\n .on('mouseout', function () {\n setTooltipData(null);\n d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n });\n }\n\n });\n\n }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n return (\n <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n <div style={{ position: 'relative' }}>\n <svg ref={svgRef} width=\"100%\" height={height} />\n {\n customLegend &&\n customLegend\n\n }\n </div>\n {tooltipData &&\n <Box sx={{\n position: 'absolute',\n left: tooltipData.x,\n top: tooltipData.y,\n pointerEvents: 'none',\n backgroundColor: '#2EB273',\n zIndex: '99999',\n border: 'none',\n borderRadius: '3px',\n transform: 'translate(-50%, -100%)',\n padding: '2px 6px 2px 6px',\n gap: '10px'\n }}>\n <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n {tooltipData.content}\n </span>\n </Box>\n }\n </div>\n );\n};\n\nexport default AreaLineChart;\n"],"names":["d3.format","d3.select","d3.scalePoint","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft","line","d3.line","d3.curveMonotoneX","d3.curveLinear","area","d3.area"],"mappings":"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"}
1	+ {"version":3,"file":"index.esm.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n height: number,\n yAxisLabelType?: 'inPercent' \| 'inValue' \| 'custom';\n customLabelFormatter?: (value: number) => string;\n currency?: string;\n colors?: string[];\n customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n if (labelType === 'inPercent') {\n return `${d3.format(\".0%\")(num / 100)}`;\n } else if (labelType === 'inValue') {\n return `${symbol \|\| ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n }\n return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n const svgRef = useRef<SVGSVGElement \| null>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState<number>(0);\n const [tooltipData, setTooltipData] = useState<any>(null);\n useEffect(() => {\n const wrapper = wrapperRef.current;\n\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries[0]) {\n const newWidth = entries[0].contentRect.width;\n setContainerWidth(newWidth);\n }\n });\n\n if (wrapper) {\n resizeObserver.observe(wrapper);\n }\n\n return () => {\n if (wrapper) {\n resizeObserver.unobserve(wrapper);\n }\n };\n }, []);\n\n useEffect(() => {\n if (containerWidth === 0) return; // Wait for the container width\n\n const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n const width = containerWidth - margin.left - margin.right;\n const chartHeight = height - margin.top - margin.bottom;\n\n // Clear the SVG\n d3.select(svgRef.current).selectAll('*').remove();\n\n const svg = d3\n .select(svgRef.current)\n .attr('width', containerWidth)\n .attr('height', height)\n .append('g')\n .attr('transform', `translate(${margin.left},${margin.top})`);\n\n // Define scales\n const x = d3\n .scalePoint()\n .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n .range([0, width]);\n\n const y = d3\n .scaleLinear()\n .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n .range([chartHeight, 0]);\n\n // Limit x-axis ticks dynamically based on width\n const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n const xAxisGroup = svg.append('g')\n .attr('transform', `translate(0,${chartHeight})`)\n .call(xAxis);\n\n xAxisGroup.selectAll(\"text\")\n .attr(\"transform\", \"translate(0, 10)\")\n .attr('color', '#8E8E93')\n .style(\"text-anchor\", \"middle\");\n\n // Y Axis\n const yAxis = svg.append('g')\n yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n customLabelFormatter\n ? customLabelFormatter(d)\n : formatNumber(d, currency, yAxisLabelType)\n ).tickSizeOuter(0) as any)\n .selectAll('line')\n .attr('stroke-dasharray', '3,3')\n .attr('stroke', '#D3D3D4');\n\n xAxisGroup.selectAll(\".tick line\").remove();\n yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n // Define color scale for lines\n // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n // Line and area generators\n const line = (isSmooth: boolean) => d3.line<any>()\n .x(d => x(d.month)!)\n .y(d => y(d.value))\n .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear); // Conditionally smooth the line\n\n const area = d3.area<any>()\n .x(d => x(d.month)!)\n .y0(chartHeight)\n .y1(d => y(d.value));\n\n // Iterate over each dataset to create lines and areas\n data.forEach((dataset, i) => {\n // const datasetColor = color(i.toString());\n\n // Create gradient for each area\n const gradient = svg.append('defs')\n .append('linearGradient')\n .attr('id', `area-gradient-${i}`)\n .attr('x1', '0%')\n .attr('x2', '0%')\n .attr('y1', '0%')\n .attr('y2', '100%');\n\n gradient.append('stop')\n .attr('offset', '0%')\n .attr('stop-color', colors[i])\n .attr('stop-opacity', 0.4);\n\n gradient.append('stop')\n .attr('offset', '100%')\n .attr('stop-color', colors[i])\n .attr('stop-opacity', 0.1);\n\n // Append the area with gradient\n svg.append('path')\n .datum(dataset.values)\n .attr('fill', `url(#area-gradient-${i})`)\n .attr('d', area);\n\n // Append the line with smoothness condition\n svg.append('path')\n .datum(dataset.values)\n .attr('fill', 'none')\n .attr('stroke', colors[i])\n .attr('stroke-width', 2)\n .attr('d', line(dataset.isSmooth \|\| false)); // Use smoothness from the dataset\n\n // Append circles for hover effect\n {\n dataset?.showCircle &&\n svg.selectAll(`circle-${i}`)\n .data(dataset.values)\n .enter()\n .append('circle')\n .attr('cx', d => x(d.month)!)\n .attr('cy', d => y(d.value))\n .attr('r', 5)\n .attr('fill', colors[i])\n .attr('stroke', '#fff')\n .style('cursor', 'pointer')\n .on('mouseover', function (event, d) {\n setTooltipData({\n x: `${event.pageX + 10}px`,\n y: `${event.pageY - 30}px`,\n content: `${dataset.name}: ${d.value}`\n });\n d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n })\n .on('mouseout', function () {\n setTooltipData(null);\n d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n });\n }\n\n });\n\n }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n return (\n <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n <div style={{ position: 'relative' }}>\n <svg ref={svgRef} width=\"100%\" height={height} />\n {\n customLegend &&\n customLegend\n\n }\n </div>\n {tooltipData &&\n <Box sx={{\n position: 'absolute',\n left: tooltipData.x,\n top: tooltipData.y,\n pointerEvents: 'none',\n backgroundColor: '#2EB273',\n zIndex: '99999',\n border: 'none',\n borderRadius: '3px',\n transform: 'translate(-50%, -100%)',\n padding: '2px 6px 2px 6px',\n gap: '10px'\n }}>\n <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n {tooltipData.content}\n </span>\n </Box>\n }\n </div>\n );\n};\n\nexport { AreaLineChart };\nexport default AreaLineChart;\n"],"names":["d3.format","d3.select","d3.scalePoint","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft","line","d3.line","d3.curveMonotoneX","d3.curveLinear","area","d3.area"],"mappings":"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"}

package/dist/components/charts/areaLinerChart/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../node_modules/d3-scale/src/linear/index.js"),a=require("../../../node_modules/d3-array/src/max/index.js"),n=require("../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../node_modules/d3-selection/src/select/index.js"),s=require("../../../node_modules/d3-scale/src/band/index.js"),l=require("../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../node_modules/d3-shape/src/area/index.js"),d=require("../../../node_modules/d3-shape/src/line/index.js"),u=require("../../../node_modules/d3-format/src/defaultLocale/index.js"),c=require("../../../node_modules/d3-shape/src/curve/monotone/index.js"),p=require("../../../node_modules/d3-shape/src/curve/linear/index.js");exports.default=({data:f,height:m=400,customLabelFormatter:x,yAxisLabelType:h="inValue",currency:v,colors:g,customLegend:y})=>{const j=t.useRef(null),k=t.useRef(null),[q,_]=t.useState(0),[b,$]=t.useState(null);return t.useEffect(()=>{const e=k.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;_(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===q)return;const e=q-40-30,t=m-20-30;o.default(j.current).selectAll("*").remove();const n=o.default(j.current).attr("width",q).attr("height",m).append("g").attr("transform","translate(40,20)"),y=s.point().domain(f[0].values.map(e=>e.month)).range([0,e]),k=r.default().domain([0,a.default(f,e=>a.default(e.values,e=>e.value))]).range([t,0]),_=Math.floor(e/80),b=l.axisBottom(y).ticks(_),E=n.append("g").attr("transform",`translate(0,${t})`).call(b);E.selectAll("text").attr("transform","translate(0, 10)").attr("color","#8E8E93").style("text-anchor","middle");const w=n.append("g");w.append("g").attr("color","#8E8E93").attr("transform","translate(-10,0)").call(l.axisLeft(k).tickSize(-e).tickFormat(e=>{return x?x(e):(t=e,r=v,"inPercent"===(a=h)?`${u.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${u.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0)).selectAll("line").attr("stroke-dasharray","3,3").attr("stroke","#D3D3D4"),E.selectAll(".tick line").remove(),w.select(".domain").attr("stroke","none"),E.select(".domain").attr("stroke","none");const S=i.default().x(e=>y(e.month)).y0(t).y1(e=>k(e.value));f.forEach((e,t)=>{const r=n.append("defs").append("linearGradient").attr("id",`area-gradient-${t}`).attr("x1","0%").attr("x2","0%").attr("y1","0%").attr("y2","100%");var a;r.append("stop").attr("offset","0%").attr("stop-color",g[t]).attr("stop-opacity",.4),r.append("stop").attr("offset","100%").attr("stop-color",g[t]).attr("stop-opacity",.1),n.append("path").datum(e.values).attr("fill",`url(#area-gradient-${t})`).attr("d",S),n.append("path").datum(e.values).attr("fill","none").attr("stroke",g[t]).attr("stroke-width",2).attr("d",(a=e.isSmooth||!1,d.default().x(e=>y(e.month)).y(e=>k(e.value)).curve(a?c.monotoneX:p.default))),(null==e?void 0:e.showCircle)&&n.selectAll(`circle-${t}`).data(e.values).enter().append("circle").attr("cx",e=>y(e.month)).attr("cy",e=>k(e.value)).attr("r",5).attr("fill",g[t]).attr("stroke","#fff").style("cursor","pointer").on("mouseover",function(t,r){$({x:`${t.pageX+10}px`,y:t.pageY-30+"px",content:`${e.name}: ${r.value}`}),o.default(this).transition().attr("r",7).attr("fill","#ff4500")}).on("mouseout",function(){$(null),o.default(this).transition().attr("r",5).attr("fill",g[t])})})},[f,q,m,x,h,v,g,y]),/* @__PURE__ */e.jsxs("div",{ref:k,style:{width:"100%",height:"100%"},children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../node_modules/d3-scale/src/linear/index.js"),a=require("../../../node_modules/d3-array/src/max/index.js"),n=require("../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../node_modules/d3-selection/src/select/index.js"),s=require("../../../node_modules/d3-scale/src/band/index.js"),l=require("../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../node_modules/d3-shape/src/area/index.js"),d=require("../../../node_modules/d3-shape/src/line/index.js"),u=require("../../../node_modules/d3-format/src/defaultLocale/index.js"),c=require("../../../node_modules/d3-shape/src/curve/monotone/index.js"),p=require("../../../node_modules/d3-shape/src/curve/linear/index.js");const f=({data:f,height:m=400,customLabelFormatter:x,yAxisLabelType:h="inValue",currency:v,colors:g,customLegend:y})=>{const j=t.useRef(null),k=t.useRef(null),[q,_]=t.useState(0),[b,$]=t.useState(null);return t.useEffect(()=>{const e=k.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;_(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===q)return;const e=q-40-30,t=m-20-30;o.default(j.current).selectAll("*").remove();const n=o.default(j.current).attr("width",q).attr("height",m).append("g").attr("transform","translate(40,20)"),y=s.point().domain(f[0].values.map(e=>e.month)).range([0,e]),k=r.default().domain([0,a.default(f,e=>a.default(e.values,e=>e.value))]).range([t,0]),_=Math.floor(e/80),b=l.axisBottom(y).ticks(_),E=n.append("g").attr("transform",`translate(0,${t})`).call(b);E.selectAll("text").attr("transform","translate(0, 10)").attr("color","#8E8E93").style("text-anchor","middle");const w=n.append("g");w.append("g").attr("color","#8E8E93").attr("transform","translate(-10,0)").call(l.axisLeft(k).tickSize(-e).tickFormat(e=>{return x?x(e):(t=e,r=v,"inPercent"===(a=h)?`${u.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${u.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0)).selectAll("line").attr("stroke-dasharray","3,3").attr("stroke","#D3D3D4"),E.selectAll(".tick line").remove(),w.select(".domain").attr("stroke","none"),E.select(".domain").attr("stroke","none");const A=i.default().x(e=>y(e.month)).y0(t).y1(e=>k(e.value));f.forEach((e,t)=>{const r=n.append("defs").append("linearGradient").attr("id",`area-gradient-${t}`).attr("x1","0%").attr("x2","0%").attr("y1","0%").attr("y2","100%");var a;r.append("stop").attr("offset","0%").attr("stop-color",g[t]).attr("stop-opacity",.4),r.append("stop").attr("offset","100%").attr("stop-color",g[t]).attr("stop-opacity",.1),n.append("path").datum(e.values).attr("fill",`url(#area-gradient-${t})`).attr("d",A),n.append("path").datum(e.values).attr("fill","none").attr("stroke",g[t]).attr("stroke-width",2).attr("d",(a=e.isSmooth||!1,d.default().x(e=>y(e.month)).y(e=>k(e.value)).curve(a?c.monotoneX:p.default))),(null==e?void 0:e.showCircle)&&n.selectAll(`circle-${t}`).data(e.values).enter().append("circle").attr("cx",e=>y(e.month)).attr("cy",e=>k(e.value)).attr("r",5).attr("fill",g[t]).attr("stroke","#fff").style("cursor","pointer").on("mouseover",function(t,r){$({x:`${t.pageX+10}px`,y:t.pageY-30+"px",content:`${e.name}: ${r.value}`}),o.default(this).transition().attr("r",7).attr("fill","#ff4500")}).on("mouseout",function(){$(null),o.default(this).transition().attr("r",5).attr("fill",g[t])})})},[f,q,m,x,h,v,g,y]),/* @__PURE__ */e.jsxs("div",{ref:k,style:{width:"100%",height:"100%"},children:[
 /* @__PURE__ */e.jsxs("div",{style:{position:"relative"},children:[
-/* @__PURE__ */e.jsx("svg",{ref:j,width:"100%",height:m}),y&&y]}),b&&/* @__PURE__ */e.jsx(n.default,{sx:{position:"absolute",left:b.x,top:b.y,pointerEvents:"none",backgroundColor:"#2EB273",zIndex:"99999",border:"none",borderRadius:"3px",transform:"translate(-50%, -100%)",padding:"2px 6px 2px 6px",gap:"10px"},children:/* @__PURE__ */e.jsx("span",{style:{fontSize:"16px",weight:"500",color:"#ffff"},children:b.content})})]})};
+/* @__PURE__ */e.jsx("svg",{ref:j,width:"100%",height:m}),y&&y]}),b&&/* @__PURE__ */e.jsx(n.default,{sx:{position:"absolute",left:b.x,top:b.y,pointerEvents:"none",backgroundColor:"#2EB273",zIndex:"99999",border:"none",borderRadius:"3px",transform:"translate(-50%, -100%)",padding:"2px 6px 2px 6px",gap:"10px"},children:/* @__PURE__ */e.jsx("span",{style:{fontSize:"16px",weight:"500",color:"#ffff"},children:b.content})})]})};exports.AreaLineChart=f,exports.default=f;
 //# sourceMappingURL=index.js.map

package/dist/components/charts/areaLinerChart/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n height: number,\n yAxisLabelType?: 'inPercent' \| 'inValue' \| 'custom';\n customLabelFormatter?: (value: number) => string;\n currency?: string;\n colors?: string[];\n customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n if (labelType === 'inPercent') {\n return `${d3.format(\".0%\")(num / 100)}`;\n } else if (labelType === 'inValue') {\n return `${symbol \|\| ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n }\n return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n const svgRef = useRef<SVGSVGElement \| null>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState<number>(0);\n const [tooltipData, setTooltipData] = useState<any>(null);\n useEffect(() => {\n const wrapper = wrapperRef.current;\n\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries[0]) {\n const newWidth = entries[0].contentRect.width;\n setContainerWidth(newWidth);\n }\n });\n\n if (wrapper) {\n resizeObserver.observe(wrapper);\n }\n\n return () => {\n if (wrapper) {\n resizeObserver.unobserve(wrapper);\n }\n };\n }, []);\n\n useEffect(() => {\n if (containerWidth === 0) return; // Wait for the container width\n\n const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n const width = containerWidth - margin.left - margin.right;\n const chartHeight = height - margin.top - margin.bottom;\n\n // Clear the SVG\n d3.select(svgRef.current).selectAll('*').remove();\n\n const svg = d3\n .select(svgRef.current)\n .attr('width', containerWidth)\n .attr('height', height)\n .append('g')\n .attr('transform', `translate(${margin.left},${margin.top})`);\n\n // Define scales\n const x = d3\n .scalePoint()\n .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n .range([0, width]);\n\n const y = d3\n .scaleLinear()\n .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n .range([chartHeight, 0]);\n\n // Limit x-axis ticks dynamically based on width\n const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n const xAxisGroup = svg.append('g')\n .attr('transform', `translate(0,${chartHeight})`)\n .call(xAxis);\n\n xAxisGroup.selectAll(\"text\")\n .attr(\"transform\", \"translate(0, 10)\")\n .attr('color', '#8E8E93')\n .style(\"text-anchor\", \"middle\");\n\n // Y Axis\n const yAxis = svg.append('g')\n yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n customLabelFormatter\n ? customLabelFormatter(d)\n : formatNumber(d, currency, yAxisLabelType)\n ).tickSizeOuter(0) as any)\n .selectAll('line')\n .attr('stroke-dasharray', '3,3')\n .attr('stroke', '#D3D3D4');\n\n xAxisGroup.selectAll(\".tick line\").remove();\n yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n // Define color scale for lines\n // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n // Line and area generators\n const line = (isSmooth: boolean) => d3.line<any>()\n .x(d => x(d.month)!)\n .y(d => y(d.value))\n .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear); // Conditionally smooth the line\n\n const area = d3.area<any>()\n .x(d => x(d.month)!)\n .y0(chartHeight)\n .y1(d => y(d.value));\n\n // Iterate over each dataset to create lines and areas\n data.forEach((dataset, i) => {\n // const datasetColor = color(i.toString());\n\n // Create gradient for each area\n const gradient = svg.append('defs')\n .append('linearGradient')\n .attr('id', `area-gradient-${i}`)\n .attr('x1', '0%')\n .attr('x2', '0%')\n .attr('y1', '0%')\n .attr('y2', '100%');\n\n gradient.append('stop')\n .attr('offset', '0%')\n .attr('stop-color', colors[i])\n .attr('stop-opacity', 0.4);\n\n gradient.append('stop')\n .attr('offset', '100%')\n .attr('stop-color', colors[i])\n .attr('stop-opacity', 0.1);\n\n // Append the area with gradient\n svg.append('path')\n .datum(dataset.values)\n .attr('fill', `url(#area-gradient-${i})`)\n .attr('d', area);\n\n // Append the line with smoothness condition\n svg.append('path')\n .datum(dataset.values)\n .attr('fill', 'none')\n .attr('stroke', colors[i])\n .attr('stroke-width', 2)\n .attr('d', line(dataset.isSmooth \|\| false)); // Use smoothness from the dataset\n\n // Append circles for hover effect\n {\n dataset?.showCircle &&\n svg.selectAll(`circle-${i}`)\n .data(dataset.values)\n .enter()\n .append('circle')\n .attr('cx', d => x(d.month)!)\n .attr('cy', d => y(d.value))\n .attr('r', 5)\n .attr('fill', colors[i])\n .attr('stroke', '#fff')\n .style('cursor', 'pointer')\n .on('mouseover', function (event, d) {\n setTooltipData({\n x: `${event.pageX + 10}px`,\n y: `${event.pageY - 30}px`,\n content: `${dataset.name}: ${d.value}`\n });\n d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n })\n .on('mouseout', function () {\n setTooltipData(null);\n d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n });\n }\n\n });\n\n }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n return (\n <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n <div style={{ position: 'relative' }}>\n <svg ref={svgRef} width=\"100%\" height={height} />\n {\n customLegend &&\n customLegend\n\n }\n </div>\n {tooltipData &&\n <Box sx={{\n position: 'absolute',\n left: tooltipData.x,\n top: tooltipData.y,\n pointerEvents: 'none',\n backgroundColor: '#2EB273',\n zIndex: '99999',\n border: 'none',\n borderRadius: '3px',\n transform: 'translate(-50%, -100%)',\n padding: '2px 6px 2px 6px',\n gap: '10px'\n }}>\n <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n {tooltipData.content}\n </span>\n </Box>\n }\n </div>\n );\n};\n\nexport default AreaLineChart;\n"],"names":["data","height","customLabelFormatter","yAxisLabelType","currency","colors","customLegend","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","tooltipData","setTooltipData","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartHeight","d3.select","selectAll","remove","svg","attr","append","x","d3.scalePoint","domain","values","map","d","month","range","y","d3.scaleLinear","d3.max","dataset","value","numTicks","Math","floor","xAxis","d3.axisBottom","ticks","xAxisGroup","call","style","yAxis","d3.axisLeft","tickSize","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","area","d3.area","y0","y1","forEach","i","gradient","isSmooth","datum","d3.line","curve","d3.curveMonotoneX","d3.curveLinear","showCircle","enter","on","event","pageX","pageY","content","name","this","transition","jsxs","ref","children","position","jsx","Box","sx","left","top","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","padding","gap","fontSize","weight","color"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n height: number,\n yAxisLabelType?: 'inPercent' \| 'inValue' \| 'custom';\n customLabelFormatter?: (value: number) => string;\n currency?: string;\n colors?: string[];\n customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n if (labelType === 'inPercent') {\n return `${d3.format(\".0%\")(num / 100)}`;\n } else if (labelType === 'inValue') {\n return `${symbol \|\| ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n }\n return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n const svgRef = useRef<SVGSVGElement \| null>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState<number>(0);\n const [tooltipData, setTooltipData] = useState<any>(null);\n useEffect(() => {\n const wrapper = wrapperRef.current;\n\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries[0]) {\n const newWidth = entries[0].contentRect.width;\n setContainerWidth(newWidth);\n }\n });\n\n if (wrapper) {\n resizeObserver.observe(wrapper);\n }\n\n return () => {\n if (wrapper) {\n resizeObserver.unobserve(wrapper);\n }\n };\n }, []);\n\n useEffect(() => {\n if (containerWidth === 0) return; // Wait for the container width\n\n const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n const width = containerWidth - margin.left - margin.right;\n const chartHeight = height - margin.top - margin.bottom;\n\n // Clear the SVG\n d3.select(svgRef.current).selectAll('*').remove();\n\n const svg = d3\n .select(svgRef.current)\n .attr('width', containerWidth)\n .attr('height', height)\n .append('g')\n .attr('transform', `translate(${margin.left},${margin.top})`);\n\n // Define scales\n const x = d3\n .scalePoint()\n .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n .range([0, width]);\n\n const y = d3\n .scaleLinear()\n .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n .range([chartHeight, 0]);\n\n // Limit x-axis ticks dynamically based on width\n const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n const xAxisGroup = svg.append('g')\n .attr('transform', `translate(0,${chartHeight})`)\n .call(xAxis);\n\n xAxisGroup.selectAll(\"text\")\n .attr(\"transform\", \"translate(0, 10)\")\n .attr('color', '#8E8E93')\n .style(\"text-anchor\", \"middle\");\n\n // Y Axis\n const yAxis = svg.append('g')\n yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n customLabelFormatter\n ? customLabelFormatter(d)\n : formatNumber(d, currency, yAxisLabelType)\n ).tickSizeOuter(0) as any)\n .selectAll('line')\n .attr('stroke-dasharray', '3,3')\n .attr('stroke', '#D3D3D4');\n\n xAxisGroup.selectAll(\".tick line\").remove();\n yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n // Define color scale for lines\n // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n // Line and area generators\n const line = (isSmooth: boolean) => d3.line<any>()\n .x(d => x(d.month)!)\n .y(d => y(d.value))\n .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear); // Conditionally smooth the line\n\n const area = d3.area<any>()\n .x(d => x(d.month)!)\n .y0(chartHeight)\n .y1(d => y(d.value));\n\n // Iterate over each dataset to create lines and areas\n data.forEach((dataset, i) => {\n // const datasetColor = color(i.toString());\n\n // Create gradient for each area\n const gradient = svg.append('defs')\n .append('linearGradient')\n .attr('id', `area-gradient-${i}`)\n .attr('x1', '0%')\n .attr('x2', '0%')\n .attr('y1', '0%')\n .attr('y2', '100%');\n\n gradient.append('stop')\n .attr('offset', '0%')\n .attr('stop-color', colors[i])\n .attr('stop-opacity', 0.4);\n\n gradient.append('stop')\n .attr('offset', '100%')\n .attr('stop-color', colors[i])\n .attr('stop-opacity', 0.1);\n\n // Append the area with gradient\n svg.append('path')\n .datum(dataset.values)\n .attr('fill', `url(#area-gradient-${i})`)\n .attr('d', area);\n\n // Append the line with smoothness condition\n svg.append('path')\n .datum(dataset.values)\n .attr('fill', 'none')\n .attr('stroke', colors[i])\n .attr('stroke-width', 2)\n .attr('d', line(dataset.isSmooth \|\| false)); // Use smoothness from the dataset\n\n // Append circles for hover effect\n {\n dataset?.showCircle &&\n svg.selectAll(`circle-${i}`)\n .data(dataset.values)\n .enter()\n .append('circle')\n .attr('cx', d => x(d.month)!)\n .attr('cy', d => y(d.value))\n .attr('r', 5)\n .attr('fill', colors[i])\n .attr('stroke', '#fff')\n .style('cursor', 'pointer')\n .on('mouseover', function (event, d) {\n setTooltipData({\n x: `${event.pageX + 10}px`,\n y: `${event.pageY - 30}px`,\n content: `${dataset.name}: ${d.value}`\n });\n d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n })\n .on('mouseout', function () {\n setTooltipData(null);\n d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n });\n }\n\n });\n\n }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n return (\n <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n <div style={{ position: 'relative' }}>\n <svg ref={svgRef} width=\"100%\" height={height} />\n {\n customLegend &&\n customLegend\n\n }\n </div>\n {tooltipData &&\n <Box sx={{\n position: 'absolute',\n left: tooltipData.x,\n top: tooltipData.y,\n pointerEvents: 'none',\n backgroundColor: '#2EB273',\n zIndex: '99999',\n border: 'none',\n borderRadius: '3px',\n transform: 'translate(-50%, -100%)',\n padding: '2px 6px 2px 6px',\n gap: '10px'\n }}>\n <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n {tooltipData.content}\n </span>\n </Box>\n }\n </div>\n );\n};\n\nexport { AreaLineChart };\nexport default AreaLineChart;\n"],"names":["AreaLineChart","data","height","customLabelFormatter","yAxisLabelType","currency","colors","customLegend","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","tooltipData","setTooltipData","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartHeight","d3.select","selectAll","remove","svg","attr","append","x","d3.scalePoint","domain","values","map","d","month","range","y","d3.scaleLinear","d3.max","dataset","value","numTicks","Math","floor","xAxis","d3.axisBottom","ticks","xAxisGroup","call","style","yAxis","d3.axisLeft","tickSize","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","area","d3.area","y0","y1","forEach","i","gradient","isSmooth","datum","d3.line","curve","d3.curveMonotoneX","d3.curveLinear","showCircle","enter","on","event","pageX","pageY","content","name","this","transition","jsxs","ref","children","position","jsx","Box","sx","left","top","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","padding","gap","fontSize","weight","color"],"mappings":"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"}

package/dist/components/charts/areaLinerChart.d.ts CHANGED Viewed

@@ -15,4 +15,5 @@ interface IChartProps {
     customLegend: React.ReactNode;
 }
 declare const AreaLineChart: ({ data, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend }: IChartProps) => import("react/jsx-runtime").JSX.Element;
+export { AreaLineChart };
 export default AreaLineChart;

package/dist/components/charts/{line-chart/line-chart → bar-chart/bar-chart}/index.esm.js RENAMED Viewed

@@ -1,10 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, Fragment } from "react/jsx-runtime";
 import { useRef, useMemo, useEffect } from "react";
 import band from "../../../../node_modules/d3-scale/src/band/index.esm.js";
 import linear from "../../../../node_modules/d3-scale/src/linear/index.esm.js";
-import max from "../../../../node_modules/d3-array/src/max/index.esm.js";
 import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
-import line from "../../../../node_modules/d3-shape/src/line/index.esm.js";
 import { axisBottom, axisLeft } from "../../../../node_modules/d3-axis/src/axis/index.esm.js";
 const formatNumber = (num) => {
   if (num >= 1e9) return (num / 1e9).toFixed(1) + "B";
@@ -12,14 +10,14 @@ const formatNumber = (num) => {
   if (num >= 1e3) return (num / 1e3).toFixed(1) + "K";
   return num;
 };
-const LineChart = ({
+const BarChart = ({
   data,
   numOfLines = 5,
   width = 500,
-  height = 300
+  height = 300,
+  line = false
 }) => {
   const svgRef = useRef(null);
-  const wrapperRef = useRef(null);
   const maxValue = useMemo(() => {
     return Math.max(...data.map((d) => d.value));
   }, [data]);
@@ -34,35 +32,24 @@ const LineChart = ({
     }
     return ticks;
   }, [yAxisMaxValue, numOfLines]);
-  const needsHorizontalScroll = data.length > 12;
-  const minGroupWidth = 120;
-  const calculatedChartWidth = needsHorizontalScroll ? Math.max(data.length * minGroupWidth, width) : width;
-  useEffect(() => {
-    const wrapper = wrapperRef.current;
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (entries[0]) {
-        const newWidth = entries[0].contentRect.width;
-        setContainerWidth(newWidth);
-      }
-    });
-    if (wrapper) {
-      resizeObserver.observe(wrapper);
-    }
-    return () => {
-      if (wrapper) {
-        resizeObserver.unobserve(wrapper);
-      }
-    };
-  }, []);
   useEffect(() => {
+    if (!svgRef.current) return;
     const svg = select(svgRef.current);
     svg.selectAll("*").remove();
     const margin = { top: 20, right: 20, bottom: 70, left: 40 };
-    const barWidth = calculatedChartWidth - margin.left - margin.right;
+    const barWidth = width - margin.left - margin.right;
     const barHeight = height - margin.top - margin.bottom;
     const mousemove = (event, d) => {
-      const xPosition = event.offsetX + margin.left - 25;
+      var _a, _b;
+      let xPosition = event.offsetX + margin.left - 25;
       const yPosition = event.offsetY + margin.top - 40;
+      const tooltipWidth = (_b = (_a = tooltip.node()) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.width;
+      const rightOffset = tooltipWidth ? xPosition + tooltipWidth : xPosition;
+      if (rightOffset > width) {
+        xPosition = Math.floor(
+          tooltipWidth ? xPosition - tooltipWidth - 20 : xPosition - 20
+        );
+      }
       const text = `${d.label} - ${d.value}`;
       tooltip.attr("x", xPosition).attr("y", yPosition).style("opacity", 9).style("height", text.length >= 16 ? 50 : 35);
       tooltipText.html(text);
@@ -71,38 +58,29 @@ const LineChart = ({
       tooltip.style("opacity", 0);
     };
     const x = band().domain(data.map((d) => d.label)).range([0, barWidth]).padding(0.1);
-    const y = linear().domain([0, max(data, (d) => d.value)]).range([barHeight, 0]);
+    const y = linear().domain([0, yAxisMaxValue]).range([barHeight, 0]);
     const chart = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-    const line$1 = line().x((d) => x(d.label) + x.bandwidth() / 2).y((d) => y(d.value));
-    chart.append("path").datum(data).attr("class", "line").attr("d", line$1).style("fill", "none").style("stroke", "#357AF6").style("stroke-width", 2);
-    chart.selectAll(".point").data(data).enter().append("circle").attr("class", "point").attr("cx", (d) => x(d.label) + x.bandwidth() / 2).attr("cy", (d) => y(d.value)).attr("r", 4).style("fill", "#357AF6").on("mousemove", mousemove).on("mouseleave", mouseleave);
-    yAxisTicks.slice(1).forEach((tick) => {
-      chart.append("line").attr("class", "dotted-line").attr("x1", 0).attr("y1", y(tick)).attr("x2", width).attr("y2", y(tick)).style("stroke", "gray").style("stroke-dasharray", "3,3");
-    });
+    if (line) {
+      yAxisTicks.slice(1).forEach((tick) => {
+        chart.append("line").attr("class", "dotted-line").attr("x1", 0).attr("y1", y(tick)).attr("x2", barWidth).attr("y2", y(tick)).style("stroke", "gray").style("stroke-dasharray", "3,3").style("opacity", 1);
+      });
+    }
+    chart.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", (d) => x(d.label)).attr("y", (d) => y(d.value)).attr("width", x.bandwidth()).attr("height", (d) => barHeight - y(d.value)).style("fill", "#357AF6").style("opacity", "1").on("mousemove", mousemove).on("mouseleave", mouseleave);
     const xAxis = chart.append("g").attr("class", "x-axis").attr("transform", `translate(0, ${barHeight})`).call(axisBottom(x));
     xAxis.selectAll(".tick line").remove();
     const yAxis = chart.append("g").attr("class", "y-axis").call(
       axisLeft(y).tickValues(yAxisTicks).tickFormat((d) => {
         return formatNumber(d);
-      }).tickSizeOuter(0),
-      0
+      }).tickSizeOuter(0)
     );
-    yAxis.selectAll(".domain").remove();
     yAxis.selectAll(".tick line").remove();
     const tooltip = svg.append("foreignObject").attr("class", "tooltip").attr("width", 120).attr("height", 20).style("opacity", 0).style("position", "absolute").style("background-color", "white").style("border", "none").style("box-shadow", "0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)").style("border-radius", "0.313rem").style("padding", "0.625rem").style("font-size", "0.75rem");
     const tooltipText = tooltip.append("xhtml:div").style("font-size", "0.75rem").style("color", "black");
-  }, [data, height, width, yAxisMaxValue, yAxisTicks, calculatedChartWidth]);
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
-    "svg",
-    {
-      ref: svgRef,
-      width: calculatedChartWidth,
-      height,
-      viewBox: `0 0 ${calculatedChartWidth} ${height}`
-    }
-  ) });
+  }, [data, height, width, line, yAxisMaxValue, yAxisTicks]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width, height }) });
 };
 export {
-  LineChart as default
+  BarChart,
+  BarChart as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/charts/bar-chart/bar-chart/index.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/bar-chart/bar-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n label: string;\n value: number;\n}\n\ninterface BarChartProps {\n data: DataPoint[];\n numOfLines?: number;\n width?: number;\n height?: number;\n line?: boolean;\n}\n\nconst formatNumber = (num: number) => {\n if (num >= 1e9) return (num / 1e9).toFixed(1) + \"B\";\n if (num >= 1e6) return (num / 1e6).toFixed(1) + \"M\";\n if (num >= 1e3) return (num / 1e3).toFixed(1) + \"K\";\n return num;\n};\n\nconst BarChart: React.FC<BarChartProps> = ({\n data,\n numOfLines = 5,\n width = 500,\n height = 300,\n line = false,\n}) => {\n const svgRef = useRef<SVGSVGElement>(null);\n\n const maxValue = useMemo(() => {\n return Math.max(...data.map((d) => d.value));\n }, [data]);\n\n const yAxisMaxValue = useMemo(() => {\n return maxValue * 1.25;\n }, [maxValue]);\n\n const yAxisTicks = useMemo(() => {\n const ticks = [];\n const interval = yAxisMaxValue / numOfLines;\n for (let i = 0; i <= numOfLines; i++) {\n ticks.push(interval * i);\n }\n return ticks;\n }, [yAxisMaxValue, numOfLines]);\n\n useEffect(() => {\n if (!svgRef.current) return;\n\n const svg = d3.select(svgRef.current);\n\n svg.selectAll(\"*\").remove();\n\n const margin = { top: 20, right: 20, bottom: 70, left: 40 };\n const barWidth = width - margin.left - margin.right;\n const barHeight = height - margin.top - margin.bottom;\n\n const mousemove = (event: MouseEvent, d: DataPoint) => {\n let xPosition = event.offsetX + margin.left - 25;\n const yPosition = event.offsetY + margin.top - 40;\n const tooltipWidth = tooltip.node()?.getBoundingClientRect()?.width;\n const rightOffset = tooltipWidth ? xPosition + tooltipWidth : xPosition;\n if (rightOffset > width) {\n xPosition = Math.floor(\n tooltipWidth ? xPosition - tooltipWidth - 20 : xPosition - 20,\n );\n }\n\n const text = `${d.label} - ${d.value}`;\n tooltip\n .attr(\"x\", xPosition)\n .attr(\"y\", yPosition)\n .style(\"opacity\", 9)\n .style(\"height\", text.length >= 16 ? 50 : 35);\n\n tooltipText.html(text);\n };\n\n const mouseleave = () => {\n tooltip.style(\"opacity\", 0);\n };\n\n const x = d3\n .scaleBand()\n .domain(data.map((d) => d.label))\n .range([0, barWidth])\n .padding(0.1);\n\n const y = d3.scaleLinear().domain([0, yAxisMaxValue]).range([barHeight, 0]);\n\n const chart = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n if (line) {\n yAxisTicks.slice(1).forEach((tick) => {\n chart\n .append(\"line\")\n .attr(\"class\", \"dotted-line\")\n .attr(\"x1\", 0)\n .attr(\"y1\", y(tick))\n .attr(\"x2\", barWidth)\n .attr(\"y2\", y(tick))\n .style(\"stroke\", \"gray\")\n .style(\"stroke-dasharray\", \"3,3\")\n .style(\"opacity\", 1);\n });\n }\n\n chart\n .selectAll(\".bar\")\n .data(data)\n .enter()\n .append(\"rect\")\n .attr(\"class\", \"bar\")\n //@ts-expect-error not applicable\n .attr(\"x\", (d: any) => x(d.label))\n .attr(\"y\", (d: any) => y(d.value))\n .attr(\"width\", x.bandwidth())\n .attr(\"height\", (d: any) => barHeight - y(d.value))\n .style(\"fill\", \"#357AF6\")\n .style(\"opacity\", \"1\")\n .on(\"mousemove\", mousemove)\n .on(\"mouseleave\", mouseleave);\n\n const xAxis = chart\n .append(\"g\")\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0, ${barHeight})`)\n .call(d3.axisBottom(x) as any);\n\n xAxis.selectAll(\".tick line\").remove();\n\n const yAxis = chart\n .append(\"g\")\n .attr(\"class\", \"y-axis\")\n .call(\n d3\n .axisLeft(y)\n .tickValues(yAxisTicks)\n //@ts-expect-error not applicable\n .tickFormat((d: any) => {\n return formatNumber(d);\n })\n .tickSizeOuter(0) as any,\n );\n\n yAxis.selectAll(\".tick line\").remove();\n\n const tooltip = svg\n .append(\"foreignObject\")\n .attr(\"class\", \"tooltip\")\n .attr(\"width\", 120)\n .attr(\"height\", 20)\n .style(\"opacity\", 0)\n .style(\"position\", \"absolute\")\n .style(\"background-color\", \"white\")\n .style(\"border\", \"none\")\n .style(\"box-shadow\", \"0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)\")\n .style(\"border-radius\", \"0.313rem\")\n .style(\"padding\", \"0.625rem\")\n .style(\"font-size\", \"0.75rem\");\n\n const tooltipText = tooltip\n .append(\"xhtml:div\")\n .style(\"font-size\", \"0.75rem\")\n .style(\"color\", \"black\");\n }, [data, height, width, line, yAxisMaxValue, yAxisTicks]);\n\n return (\n <>\n <svg ref={svgRef} width={width} height={height}></svg>\n </>\n );\n};\n\nexport { BarChart };\nexport default BarChart;\n"],"names":["d3.select","d3.scaleBand","d3.scaleLinear","d3.axisBottom","d3.axisLeft"],"mappings":"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"}

package/dist/components/charts/bar-chart/bar-chart/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),a=require("../../../../node_modules/d3-scale/src/linear/index.js"),s=require("../../../../node_modules/d3-selection/src/select/index.js"),l=require("../../../../node_modules/d3-axis/src/axis/index.js");const o=({data:o,numOfLines:i=5,width:n=500,height:d=300,line:c=!1})=>{const u=t.useRef(null),m=t.useMemo(()=>Math.max(...o.map(e=>e.value)),[o]),y=t.useMemo(()=>1.25m,[m]),p=t.useMemo(()=>{const e=[],t=y/i;for(let r=0;r<=i;r++)e.push(tr);return e},[y,i]);return t.useEffect(()=>{if(!u.current)return;const e=s.default(u.current);e.selectAll("").remove();const t=n-40-20,i=d-20-70,m=r.default().domain(o.map(e=>e.label)).range([0,t]).padding(.1),h=a.default().domain([0,y]).range([i,0]),x=e.append("g").attr("transform","translate(40,20)");c&&p.slice(1).forEach(e=>{x.append("line").attr("class","dotted-line").attr("x1",0).attr("y1",h(e)).attr("x2",t).attr("y2",h(e)).style("stroke","gray").style("stroke-dasharray","3,3").style("opacity",1)}),x.selectAll(".bar").data(o).enter().append("rect").attr("class","bar").attr("x",e=>m(e.label)).attr("y",e=>h(e.value)).attr("width",m.bandwidth()).attr("height",e=>i-h(e.value)).style("fill","#357AF6").style("opacity","1").on("mousemove",(e,t)=>{var r,a;let s=e.offsetX+40-25;const l=e.offsetY+20-40,o=null==(a=null==(r=f.node())?void 0:r.getBoundingClientRect())?void 0:a.width;(o?s+o:s)>n&&(s=Math.floor(o?s-o-20:s-20));const i=`${t.label} - ${t.value}`;f.attr("x",s).attr("y",l).style("opacity",9).style("height",i.length>=16?50:35),g.html(i)}).on("mouseleave",()=>{f.style("opacity",0)}),x.append("g").attr("class","x-axis").attr("transform",`translate(0, ${i})`).call(l.axisBottom(m)).selectAll(".tick line").remove(),x.append("g").attr("class","y-axis").call(l.axisLeft(h).tickValues(p).tickFormat(e=>{return(t=e)>=1e9?(t/1e9).toFixed(1)+"B":t>=1e6?(t/1e6).toFixed(1)+"M":t>=1e3?(t/1e3).toFixed(1)+"K":t;var t}).tickSizeOuter(0)).selectAll(".tick line").remove();const f=e.append("foreignObject").attr("class","tooltip").attr("width",120).attr("height",20).style("opacity",0).style("position","absolute").style("background-color","white").style("border","none").style("box-shadow","0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)").style("border-radius","0.313rem").style("padding","0.625rem").style("font-size","0.75rem"),g=f.append("xhtml:div").style("font-size","0.75rem").style("color","black")},[o,d,n,c,y,p]),/ @__PURE__ /e.jsx(e.Fragment,{children:/ @__PURE__ */e.jsx("svg",{ref:u,width:n,height:d})})};exports.BarChart=o,exports.default=o;
2	+ //# sourceMappingURL=index.js.map