@capillarytech/cap-ui-utils 1.4.13-alpha.0 → 1.4.13-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "1.4.13-alpha.0",
+  "version": "1.4.13-alpha.1",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {

package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ResizableBox } from "react-resizable";
+// 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";
@@ -13,11 +13,11 @@ import { CapLabel } from "@capillarytech/cap-ui-library";
 const ResizablePIP = ({
   children,
   width = 400,
-  height = 310,
+  height = 250,
   showMaximised = false,
   handleShowMaximised,
-  minConstraints = [400, 310],
-  maxConstraints = [1104, 722],
+  // minConstraints = [400, 310],
+  // maxConstraints = [1104, 722],
   closePIPContainer = () => {},
   footerContent = {},
 }) => {
@@ -28,8 +28,8 @@ const ResizablePIP = ({
   const handleMouseLeave = () => setIsHovering(false);
   const handleMaximiseView = () => {
     if (!showMaximised) {
-      setPipWidth(1104);
-      setPipHeight(722);
+      setPipWidth(1100);
+      setPipHeight(690);
     } else {
       setPipWidth(width);
       setPipHeight(height);
@@ -45,7 +45,7 @@ const ResizablePIP = ({
           zIndex: "1000",
           position: "absolute",
           left: showMaximised ? 168 : 24,
-          top: showMaximised ? 60 : 450,
+          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%)",
@@ -60,8 +60,8 @@ const ResizablePIP = ({
             type="close"
             style={{
               position: "fixed",
-              top: showMaximised ? "-10px" : "10px",
-              left: showMaximised ? "1093px" : "365px",
+              top: showMaximised ? -10 : 10,
+              left: showMaximised ? 1088 : 365,
               backgroundColor: showMaximised ? "#dfe2e7" : "unset",
               borderRadius: 48,
               zIndex: 10001,
@@ -70,7 +70,7 @@ const ResizablePIP = ({
             onMouseLeave={handleMouseLeave}
           />
         )}
-        <ResizableBox
+        {/* <ResizableBox
           onMouseDown={(e) => {
             e.stopPropagation();
           }}
@@ -78,52 +78,49 @@ const ResizablePIP = ({
           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}
         >
-          <div
+          {children}
+        </div>
+        <CapRow style={{ height: 56 }}>
+          <CapColumn span={17}>
+            <CapHeading style={{ margin: 18 }} type="h3">
+              {footerContent.videoTitle}
+            </CapHeading>
+          </CapColumn>
+          <CapLink
             style={{
-              height: "calc(100% - 56px)",
-              opacity: isHovering ? 0.3 : 1,
-              color: "#000",
-              backgroundColor: "rgba(0, 0, 0, 0.3)",
-              transition: "opacity 0.5s ease-in-out",
+              float: "right",
+              margin: "18px 18px 18px 0",
             }}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            {children}
-          </div>
-          <CapRow style={{ height: 56 }}>
-            <CapColumn span={17}>
-              <CapHeading style={{ margin: 18 }} type="h3">
-                {footerContent.videoTitle}
+            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>
-            </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>
+            }
+          />
+        </CapRow>
+        {/* </ResizableBox> */}
         {isHovering && (
           <div
             style={{ position: "fixed" }}
@@ -133,26 +130,28 @@ const ResizablePIP = ({
             <CapIcon
               onClick={handleMaximiseView}
               size="s"
-              type="expander"
+              type={showMaximised ? "minimizer" : "expander"}
               style={{
                 float: "right",
                 position: "fixed",
-                top: showMaximised ? 635 : 224,
+                top: showMaximised ? 660 : 224,
                 right: 12,
               }}
             />
-            <button type="button">
-              <CapIcon
-                size="s"
-                type="draggable"
-                style={{
-                  float: "right",
-                  position: "fixed",
-                  top: showMaximised ? 635 : 224,
-                  right: 40,
-                }}
-              />
-            </button>
+            {!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>
@@ -164,8 +163,8 @@ ResizablePIP.propTypes = {
   children: PropTypes.any,
   width: PropTypes.number,
   height: PropTypes.number,
-  minConstraints: PropTypes.array,
-  maxConstraints: PropTypes.array,
+  // minConstraints: PropTypes.array,
+  // maxConstraints: PropTypes.array,
   closePIPContainer: PropTypes.func,
   handleShowMaximised: PropTypes.func,
   showMaximised: PropTypes.bool,

package/utils/withDemoVideosAndLinkHOC/index.js

@@ -1,49 +1,8 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import ResizablePIP from "./ResizablePIP";
+import { getElementByXpath } from "./utils";
 
-/** Sample targetElementsData
- target_elements: {
-            '.loyalty-graph-header': {
-              support_link: {
-                target_url: {
-                  default: {
-                    label: 'Help default',
-                    href: 'https://app.storylane.io/share/v1ilsyhwno8m',
-                  },
-                  en: {
-                    label: 'Help',
-                    href: 'https://app.storylane.io/share/v1ilsyhwno8m',
-                  },
-                },
-                // icon: '',
-                // position: 'right',
-                // target_opening: '_blank',
-              },
-            },
-            '.performance-time-head-title': {
-              support_video: {
-                target_url: {
-                  default: {
-                    label: 'Demo',
-                    href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
-                  },
-                  en: {
-                    label: 'Demo',
-                    href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
-                  },
-                  'zh-CN': {
-                    label: '演示',
-                    href: ' https://www.youtube.com/embed/JJI4eR-G5AM',
-                  },
-                },
-                // icon: 'play',
-                // position: 'right', // right | left | top | bottom
-                // target_opening: '_blank',
-              },
-            },
-          },
- */
 const WithDemoVideosAndLinks = (props) => {
   const { children, targetElements, locale = "en" } = props;
   const [showPIP, setShowPIP] = useState(false);
@@ -68,7 +27,7 @@ const WithDemoVideosAndLinks = (props) => {
       locale,
       cssSelector,
     } = selector || {};
-    let matchedNodes = document.querySelectorAll(selector.cssSelector);
+    let matchedNodesXpath = !!cssSelector && getElementByXpath(cssSelector);
     const handleOnClickVideoLink = () => {
       setPIPContentLink(videoTargetUrl?.[locale]?.href);
       setPIPFooterContent({
@@ -81,58 +40,65 @@ const WithDemoVideosAndLinks = (props) => {
       window.open(linkTargetUrl?.[locale]?.href, "_blank");
 
     if (selector?.support_video?.target_url?.default?.href) {
-      matchedNodes.forEach((node) => {
-        if (!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.onclick = handleOnClickVideoLink;
+      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">
+        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";
-          node.appendChild(videoIconElement);
-          node.appendChild(videoAnchor);
-        }
-      });
+        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) {
-      matchedNodes.forEach((node) => {
-        if (!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.onclick = handleOpenSupportLink;
+      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">
+        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";
+        helpIconElement.onclick = handleOpenSupportLink;
+        helpIconElement.style.marginLeft = "2px";
+        helpIconElement.style.cursor = "pointer";
+        helpIconElement.style.fontSize = "16px";
+        helpIconElement.style.color = "#2466eb";
 
-          node.appendChild(helpIconElement);
-          node.appendChild(linkAnchor);
-        }
-      });
+        matchedNodesXpath.appendChild(helpIconElement);
+        matchedNodesXpath.appendChild(linkAnchor);
+      }
     }
   });
 

package/utils/withDemoVideosAndLinkHOC/utils.js

@@ -0,0 +1,22 @@
+export const getElementByXpath = (path) =>
+  document.evaluate(
+    path,
+    document,
+    null,
+    XPathResult.FIRST_ORDERED_NODE_TYPE,
+    null
+  ).singleNodeValue;
+
+export const replaceDynamicAndCompare = (actualStr, templateStr) => {
+  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;
+}