@capillarytech/cap-ui-utils 1.4.16 → 1.4.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "1.4.16",
+  "version": "1.4.17",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {
@@ -8,15 +8,12 @@
   },
   "author": "Rajshekar",
   "dependencies": {
-    "@capillarytech/cap-ui-library": "4.1.15",
-    "prop-types": "^15.8.1",
     "react": "^16.13.0",
     "react-ga": "^2.7.0",
     "tti-polyfill": "^0.2.2",
     "moment-timezone": "^0.5.25",
     "react-intl": "2.7.2",
     "lodash": "4.17.11",
-    "react-resizable": "^3.0.4",
     "handlebars": "4.0.11"
   }
 }

package/utils/formatter.js

@@ -113,6 +113,13 @@ function truncateNumber(num, places) {
   return Math.trunc(num * numPower) / numPower;
 }
 
+function localeBasedNumberFormatting(locale, value) {
+  const formattedValue = new Intl.NumberFormat(locale || "en-IN", {
+    maximumFractionDigits: 2,
+  }).format(value);
+  return formattedValue;
+}
+
 export default {
   truncateNumber,
   numberScaleINR,
@@ -121,4 +128,5 @@ export default {
   formatNumberWithSymbol,
   camelize,
   snakeCaseToCamelCase,
+  localeBasedNumberFormatting,
 };

package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js

@@ -1,173 +0,0 @@
-import React, { useState } from "react";
-// import { ResizableBox } from "react-resizable";
-import PropTypes from "prop-types";
-import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
-import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
-import CapLink from "@capillarytech/cap-ui-library/CapLink";
-import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
-import CapRow from "@capillarytech/cap-ui-library/CapRow";
-import Draggable from "react-draggable";
-import "react-resizable/css/styles.css";
-import { CapLabel } from "@capillarytech/cap-ui-library";
-
-const ResizablePIP = ({
-  children,
-  width = 400,
-  height = 250,
-  showMaximised = false,
-  handleShowMaximised,
-  // minConstraints = [400, 310],
-  // maxConstraints = [1104, 722],
-  closePIPContainer = () => {},
-  footerContent = {},
-}) => {
-  const [pipWidth, setPipWidth] = useState(width);
-  const [pipHeight, setPipHeight] = useState(height);
-  const [isHovering, setIsHovering] = useState(false);
-  const handleMouseEnter = () => setIsHovering(true);
-  const handleMouseLeave = () => setIsHovering(false);
-  const handleMaximiseView = () => {
-    if (!showMaximised) {
-      setPipWidth(1100);
-      setPipHeight(690);
-    } else {
-      setPipWidth(width);
-      setPipHeight(height);
-    }
-    handleShowMaximised(!showMaximised);
-  };
-
-  const handleOpenDoc = () => window.open(footerContent.supportDoc, "_blank");
-  return (
-    <Draggable handle="button">
-      <div
-        style={{
-          zIndex: "1000",
-          position: "absolute",
-          left: showMaximised ? 168 : 24,
-          top: showMaximised ? 60 : 495,
-          boxSizing: "content-box",
-          boxShadow:
-            "1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)",
-          borderRadius: 4,
-          backgroundColor: "#fff",
-        }}
-      >
-        {(isHovering || showMaximised) && (
-          <CapIcon
-            onClick={closePIPContainer}
-            size="m"
-            type="close"
-            style={{
-              position: "fixed",
-              top: showMaximised ? -10 : 10,
-              left: showMaximised ? 1088 : 365,
-              backgroundColor: showMaximised ? "#dfe2e7" : "unset",
-              borderRadius: 48,
-              zIndex: 10001,
-            }}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          />
-        )}
-        {/* <ResizableBox
-          onMouseDown={(e) => {
-            e.stopPropagation();
-          }}
-          width={pipWidth}
-          height={pipHeight}
-          minConstraints={minConstraints}
-          maxConstraints={maxConstraints}
-        > */}
-        <div
-          style={{
-            height: pipHeight,
-            width: pipWidth,
-            opacity: isHovering ? 0.3 : 1,
-            color: "#000",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            transition: "opacity 0.5s ease-in-out",
-          }}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          {children}
-        </div>
-        <CapRow style={{ height: 56 }}>
-          <CapColumn span={17}>
-            <CapHeading style={{ margin: 18 }} type="h3">
-              {footerContent.videoTitle}
-            </CapHeading>
-          </CapColumn>
-          <CapLink
-            style={{
-              float: "right",
-              margin: "18px 18px 18px 0",
-            }}
-            onClick={handleOpenDoc}
-            title={
-              <CapHeading
-                type="h5"
-                style={{
-                  display: "flex",
-                  alignItems: "baseline",
-                  marginTop: 4,
-                }}
-              >
-                <CapLabel type="label15">View docs</CapLabel>
-                <CapIcon onClick={handleOpenDoc} size="s" type="open-in-new" />
-              </CapHeading>
-            }
-          />
-        </CapRow>
-        {/* </ResizableBox> */}
-        {isHovering && (
-          <div
-            style={{ position: "fixed" }}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            <CapIcon
-              onClick={handleMaximiseView}
-              size="s"
-              type={showMaximised ? "minimizer" : "expander"}
-              style={{
-                float: "right",
-                position: "fixed",
-                top: showMaximised ? 660 : 224,
-                right: 12,
-              }}
-            />
-            {!showMaximised && (
-              <button type="button" style={{ cursor: "pointer" }}>
-                <CapIcon
-                  size="s"
-                  type="draggable"
-                  style={{
-                    float: "right",
-                    position: "fixed",
-                    top: showMaximised ? 660 : 224,
-                    right: 40,
-                  }}
-                />
-              </button>
-            )}
-          </div>
-        )}
-      </div>
-    </Draggable>
-  );
-};
-
-ResizablePIP.propTypes = {
-  children: PropTypes.any,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  // minConstraints: PropTypes.array,
-  // maxConstraints: PropTypes.array,
-  closePIPContainer: PropTypes.func,
-  handleShowMaximised: PropTypes.func,
-  showMaximised: PropTypes.bool,
-  footerContent: PropTypes.object,
-};
-export default ResizablePIP;

package/utils/withDemoVideosAndLinkHOC/index.js

@@ -1,146 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import ResizablePIP from "./ResizablePIP";
-import { getElementByXpath } from "./utils";
-
-const WithDemoVideosAndLinks = (props) => {
-  const { children, targetElements, locale = "en" } = props;
-  const [showPIP, setShowPIP] = useState(false);
-  const [PIPContentLink, setPIPContentLink] = useState("");
-  const [PIPFooterContent, setPIPFooterContent] = useState({});
-  const [showMaximised, setShowMaximised] = useState(false);
-  const cssSelectors = [];
-  if (Object.keys(targetElements || {})?.length) {
-    Object.keys(targetElements).map((targetElement) => {
-      cssSelectors.push({
-        cssSelector: targetElement,
-        locale,
-        ...targetElements[targetElement],
-      });
-    });
-  }
-
-  cssSelectors.forEach((selector) => {
-    const {
-      support_link: { target_url: linkTargetUrl = {} } = {},
-      support_video: { target_url: videoTargetUrl = {} } = {},
-      locale,
-      cssSelector,
-    } = selector || {};
-    let matchedNodesXpath = !!cssSelector && getElementByXpath(cssSelector);
-    const handleOnClickVideoLink = () => {
-      setPIPContentLink(videoTargetUrl?.[locale]?.href);
-      setPIPFooterContent({
-        videoTitle: videoTargetUrl?.[locale]?.videoTitle,
-        supportDoc: videoTargetUrl?.[locale]?.supportDoc,
-      });
-      setShowPIP(true);
-    };
-    const handleOpenSupportLink = () =>
-      window.open(linkTargetUrl?.[locale]?.href, "_blank");
-
-    if (selector?.support_video?.target_url?.default?.href) {
-      if (
-        !!matchedNodesXpath &&
-        !document.getElementById(`demo-video-${cssSelector}`)
-      ) {
-        let videoAnchor = document.createElement("a");
-        videoAnchor.textContent = videoTargetUrl?.[locale].label;
-        videoAnchor.id = `demo-video-${cssSelector}`;
-        videoAnchor.style.marginLeft = "2px";
-        videoAnchor.style.marginTop = "2px";
-        videoAnchor.style.fontSize = "14px";
-        videoAnchor.onclick = handleOnClickVideoLink;
-
-        const videoIconElement = document.createElement("i");
-        videoIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
-            <path
-              d="M14.756 11.032a1.194 1.194 0 0 1 0 1.921l-2.937 2.17a1.194 1.194 0 0 1-1.904-.96v-4.34a1.194 1.194 0 0 1 1.904-.96l2.937 2.17zM12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm0 2a9 9 0 1 1 0-18 9 9 0 0 1 0 18z"
-              id="play_svg__a"
-            ></path>
-          </svg>`;
-        videoIconElement.onclick = handleOnClickVideoLink;
-        videoIconElement.style.marginLeft = "2px";
-        videoIconElement.style.cursor = "pointer";
-        videoIconElement.style.color = "#2466eb";
-        videoIconElement.style.fontSize = "18px";
-
-        matchedNodesXpath.appendChild(videoIconElement);
-        matchedNodesXpath.appendChild(videoAnchor);
-      }
-    } else if (selector?.support_link?.target_url?.default?.href) {
-      if (
-        !!matchedNodesXpath &&
-        !document.getElementById(`support-link-${cssSelector}`)
-      ) {
-        let linkAnchor = document.createElement("a");
-        linkAnchor.href = linkTargetUrl?.[locale]?.href;
-        linkAnchor.textContent = linkTargetUrl?.[locale].label;
-        linkAnchor.target = "_blank";
-        linkAnchor.id = `support-link-${cssSelector}`;
-        linkAnchor.style.marginLeft = "2px";
-        linkAnchor.style.marginTop = "2px";
-        linkAnchor.style.fontSize = "14px";
-        linkAnchor.onclick = handleOpenSupportLink;
-
-        const helpIconElement = document.createElement("i");
-        helpIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
-          <path
-            id="help_svg__a"
-            d="M9 16h2v-2H9v2zm1-16C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14C7.79 4 6 5.79 6 8h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-          ></path>
-        </svg>`;
-        helpIconElement.onclick = handleOpenSupportLink;
-        helpIconElement.style.marginLeft = "2px";
-        helpIconElement.style.cursor = "pointer";
-        helpIconElement.style.fontSize = "16px";
-        helpIconElement.style.color = "#2466eb";
-
-        matchedNodesXpath.appendChild(helpIconElement);
-        matchedNodesXpath.appendChild(linkAnchor);
-      }
-    }
-  });
-
-  const handleOpenInNew = () => {
-    window.open(PIPContentLink, "_blank");
-  };
-  const handleShowMaximised = (value) => {
-    setShowMaximised(value);
-  };
-  const handleClosePIPContainer = () => {
-    setShowMaximised(false);
-    setShowPIP(false);
-  };
-  return (
-    <div>
-      {showPIP && (
-        <ResizablePIP
-          closePIPContainer={handleClosePIPContainer}
-          handleOpenInNew={handleOpenInNew}
-          handleShowMaximised={handleShowMaximised}
-          showMaximised={showMaximised}
-          footerContent={PIPFooterContent}
-        >
-          <iframe
-            width="100%"
-            height="100%"
-            src={`${PIPContentLink}?controls=0`}
-            title="YouTube video player"
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            style={{ borderRadius: 4 }}
-          />
-        </ResizablePIP>
-      )}
-      {children}
-    </div>
-  );
-};
-
-WithDemoVideosAndLinks.propTypes = {
-  children: PropTypes.any,
-  locale: PropTypes.string,
-  targetElements: PropTypes.object,
-};
-export default WithDemoVideosAndLinks;

package/utils/withDemoVideosAndLinkHOC/utils.js

@@ -1,29 +0,0 @@
-export const getElementByXpath = (path) =>
-  document.evaluate(
-    path,
-    document,
-    null,
-    XPathResult.FIRST_ORDERED_NODE_TYPE,
-    null
-  ).singleNodeValue;
-
-export const replaceDynamicAndCompare = (actualStr, templateStr) => {
-  templateStr = templateStr.endsWith("/")
-    ? templateStr.slice(0, templateStr.length - 1)
-    : templateStr;
-  actualStr = actualStr.endsWith("/")
-    ? actualStr.slice(0, actualStr.length - 1)
-    : actualStr;
-
-  const templateParts = templateStr.split("/");
-  const actualParts = actualStr.split("/");
-  if (templateParts.length !== actualParts.length) {
-    return false;
-  }
-  for (let i = 0; i < templateParts.length; i++) {
-    if (templateParts[i].startsWith("{{") && templateParts[i].endsWith("}}")) {
-      actualParts[i] = templateParts[i];
-    }
-  }
-  return actualParts.join("/") === templateStr;
-};