@zohoim/chat-components 0.0.11 → 0.0.14

package/es/im/IMReplyBubble/IMReplyBubble.js

@@ -1,86 +1,46 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useIMReplyBubble from '@zohoim/chat-components-hooks/es/im/IMReplyBubble/useIMReplyBubble';
 /** ** Constants *** */
+
 import imReplyBubbleDefaultProps from './props/defaultProps';
 import imReplyBubblePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Components *** */
 
-/** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
-
-/** ** Styles *** */
-import style from './css/IMReplyBubble.module.css';
 import ReplyBubble from '../../ReplyBubble/ReplyBubble';
-import useIMReplyBubble from '@zohoim/chat-components-hooks/es/im/IMReplyBubble/useIMReplyBubble';
-import IMAttachmentIcon from '../IMAttachmentIcon/IMAttachmentIcon';
 export default function IMReplyBubble(props) {
   const {
-    customStyle,
-    headerCustomStyle,
-    timeCustomStyle,
-    contentCustomStyle,
     replyText,
-    messageDetails
+    messageDetails,
+    customProps,
+    onClick: propOnClick
   } = props;
-
-  /* External customization */
-  const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
   const {
-    imReplyBubbleClass,
-    attachmentIconStyle
-  } = cssJSLogic(props, newStyle);
+    replyBubbleProps = dummyObject
+  } = customProps;
   const {
-    fileFormat,
     message,
     senderName,
     time,
-    isShowImage,
-    fileName,
-    attachmentURL
+    attachmentDetails,
+    onClick
   } = useIMReplyBubble({
-    messageDetails
+    messageDetails,
+    onClick: propOnClick
   });
-  function renderMessage() {
-    return /*#__PURE__*/React.createElement("span", {
-      dangerouslySetInnerHTML: {
-        __html: message
-      }
-    });
-  }
-  function renderIcon() {
-    return isShowImage ? /*#__PURE__*/React.createElement("div", {
-      className: newStyle.imageWrapper
-    }, /*#__PURE__*/React.createElement("img", {
-      className: newStyle.image,
-      src: attachmentURL,
-      alt: fileName
-    })) : fileFormat ? /*#__PURE__*/React.createElement(IMAttachmentIcon, {
-      customStyle: {
-        $icon: newStyle.attachmentIcon
-      },
-      fileFormat: fileFormat
-    }) : null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: imReplyBubbleClass
-  }, /*#__PURE__*/React.createElement(ReplyBubble, {
-    headerCustomStyle: headerCustomStyle,
-    timeCustomStyle: timeCustomStyle,
-    contentCustomStyle: contentCustomStyle,
-    senderName: senderName,
-    time: time,
+  return /*#__PURE__*/React.createElement(ReplyBubble, _extends({
+    attachmentDetails: attachmentDetails,
+    message: message,
+    onClick: onClick,
     replyText: replyText,
-    renderMessage: renderMessage,
-    renderIcon: renderIcon
-  }));
+    senderName: senderName,
+    time: time
+  }, replyBubbleProps));
 }
 IMReplyBubble.propTypes = imReplyBubblePropTypes;
 IMReplyBubble.defaultProps = imReplyBubbleDefaultProps;

package/es/im/IMReplyBubble/props/defaultProps.js

@@ -1,9 +1,7 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const imReplyBubbleDefaultProps = {
   customStyle: dummyObject,
-  headerCustomStyle: dummyObject,
-  timeCustomStyle: dummyObject,
-  contentCustomStyle: dummyObject
+  customProps: dummyObject
 };
 export default imReplyBubbleDefaultProps;

package/es/im/IMReplyBubble/props/propTypes.js

@@ -1,22 +1,24 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const imReplyBubblePropTypes = {
-  customStyle: PropTypes.object,
-  headerCustomStyle: PropTypes.object,
-  timeCustomStyle: PropTypes.object,
-  contentCustomStyle: PropTypes.object,
   messageDetails: PropTypes.shape({
-    displayMessage: PropTypes.string,
-    attachment: PropTypes.shape({
-      type: PropTypes.string
-    }),
-    createdTime: PropTypes.string,
     actor: PropTypes.shape({
-      name: PropTypes.string,
       contactName: PropTypes.string,
-      externalId: PropTypes.string
-    })
-  }),
-  replyText: PropTypes.string
+      externalId: PropTypes.string,
+      name: PropTypes.string
+    }).isRequired,
+    displayMessage: PropTypes.string.isRequired,
+    attachment: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      url: PropTypes.string
+    }),
+    createdTime: PropTypes.string
+  }).isRequired,
+  onClick: PropTypes.func.isRequired,
+  replyText: PropTypes.string.isRequired,
+  customProps: PropTypes.shape({
+    replyBubbleProps: PropTypes.object
+  })
 };
 export default imReplyBubblePropTypes;

package/es/im/IMTextBubble/IMTextBubble.js

@@ -1,53 +1,36 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /** ** Libraries *** */
 import React from 'react';
-
-/** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
-
 /** ** Constants *** */
+
 import imTextBubbleDefaultProps from './props/defaultProps';
 import imTextBubblePropTypes from './props/propTypes';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Components *** */
 
-/** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
-
-/** ** Styles *** */
-import style from './css/IMTextBubble.module.css';
 import TextBubble from '../../TextBubble/TextBubble';
+/** ** Hooks *** */
+
 import useIMTextBubble from '@zohoim/chat-components-hooks/es/im/IMTextBubble/useIMTextBubble';
-import QuoteIcon from '../../icons/iconSrc/common/Quote';
 export default function IMTextBubble(props) {
   const {
-    customStyle,
-    textBubbleCustomStyle,
-    moreText
+    moreText,
+    customProps
   } = props;
+  const {
+    textBubbleProps = dummyObject
+  } = customProps;
   const {
     onLoadFullMessage,
     sanitizedDisplayMessage,
-    isShowSeeMore,
-    isShowQuote
+    isShowSeeMore
   } = useIMTextBubble(props);
-
-  /* External customization */
-  const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    imTextBubbleWrapperClass
-  } = cssJSLogic(props, newStyle);
-  return /*#__PURE__*/React.createElement("div", {
-    className: imTextBubbleWrapperClass
-  }, isShowQuote ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(QuoteIcon, null)) : null, /*#__PURE__*/React.createElement(TextBubble, {
-    customStyle: textBubbleCustomStyle,
+  return /*#__PURE__*/React.createElement(TextBubble, _extends({
     message: sanitizedDisplayMessage,
-    isShowMoreText: isShowSeeMore,
-    onClickMore: onLoadFullMessage,
-    moreText: moreText
-  }));
+    moreText: isShowSeeMore ? moreText : '',
+    onClickMore: onLoadFullMessage
+  }, textBubbleProps));
 }
 IMTextBubble.propTypes = imTextBubblePropTypes;
 IMTextBubble.defaultProps = imTextBubbleDefaultProps;

package/es/im/IMTextBubble/props/defaultProps.js

@@ -1,14 +1,8 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 import { TEXT_MESSAGE_MAX_LENGTH } from '@zohoim/chat-components-utils/es/constants/messageConstants';
 const imTextBubbleDefaultProps = {
-  customStyle: dummyObject,
-  textBubbleCustomStyle: dummyObject,
-  message: '',
-  fullMessage: '',
-  messageMaxLength: TEXT_MESSAGE_MAX_LENGTH,
-  fullContentURL: '',
-  messageId: '',
-  sessionId: ''
+  customProps: dummyObject,
+  messageMaxLength: TEXT_MESSAGE_MAX_LENGTH
 };
 export default imTextBubbleDefaultProps;

package/es/im/IMTextBubble/props/propTypes.js

@@ -1,15 +1,29 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const imTextBubblePropTypes = {
-  customStyle: PropTypes.object,
-  textBubbleCustomStyle: PropTypes.object,
-  message: PropTypes.string,
-  fullMessage: PropTypes.string,
+  messageDetails: PropTypes.shape({
+    displayMessage: PropTypes.string.isRequired,
+    attachment: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string
+    }),
+    contentType: PropTypes.string,
+    fullContentURL: PropTypes.string,
+    fullMessage: PropTypes.string,
+    id: PropTypes.string
+  }).isRequired,
+  customProps: PropTypes.shape({
+    textBubbleProps: PropTypes.object
+  }),
   messageMaxLength: PropTypes.number,
-  fullContentURL: PropTypes.string,
-  messageId: PropTypes.string,
-  sessionId: PropTypes.string,
+  markDownOptions: PropTypes.shape({
+    applyLink: PropTypes.bool,
+    isRemoveUrl: PropTypes.bool
+  }),
+  moreText: PropTypes.string,
   onLoadFullMessage: PropTypes.func,
-  moreText: PropTypes.string
+  sessionDetails: PropTypes.shape({
+    id: PropTypes.string
+  })
 };
 export default imTextBubblePropTypes;

package/es/im/IMTicketLink/IMTicketLink.js

@@ -1,45 +1,45 @@
 /* eslint-disable @zohodesk/zsecurity/no-protocol-check */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
 
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Hooks *** */
+
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useIMTicketLink from '@zohoim/chat-components-hooks/es/im/IMTicketLink/useIMTicketLink';
-
 /** ** Constants *** */
+
 import imTicketLinkDefaultProps from './props/defaultProps';
 import imTicketLinkPropTypes from './props/propTypes';
-
 /** ** Methods *** */
-import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
-import cssJSLogic from './css/cssJSLogic';
-import { URLValidator } from '@zohoim/chat-components-utils/es/imUtils/security';
 
+import cssJSLogic from './css/cssJSLogic';
 /** ** Styles *** */
+
 import style from './css/IMTicketLink.module.css';
 export default function IMTicketLink(props) {
   const {
-    customStyle
+    customStyle,
+    isDisabled
   } = props;
   const {
-    ticketURL,
+    ticketUrl,
     onClick,
     ticketNumber
   } = useIMTicketLink(props);
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
   /* CSS classnames added based on logic */
+
   const {
     imTicketLinkClass
-  } = cssJSLogic(props, newStyle);
+  } = cssJSLogic({
+    isDisabled
+  }, newStyle);
   return ticketNumber ? /*#__PURE__*/React.createElement("a", {
     className: imTicketLinkClass,
+    href: ticketUrl,
     onClick: onClick,
-    href: ticketURL,
     rel: "noopener noreferrer"
   }, ticketNumber) : null;
 }

package/es/im/IMTicketLink/css/IMTicketLink.module.css

@@ -1,7 +1,7 @@
 .varClass {
-  --imTicketLink-top_gap: var(--imlib_size_5);
-  --imTicketLink-font_size: var(--imlib_size_12);
-  --imTicketLink-max_width: var(--imlib_size_150);
+  --imTicketLink-top_gap: var(--zd_size5);
+  --imTicketLink-font_size: var(--zd_font_size12);
+  --imTicketLink-max_width: var(--zd_size150);
 }
 
 .ticketNumber {
@@ -13,7 +13,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
   margin-top: var(--imTicketLink-top_gap);
   cursor: pointer;
 }

package/es/im/IMTicketLink/props/defaultProps.js

@@ -1,5 +1,5 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const imTicketLinkDefaultProps = {
   customStyle: dummyObject
 };

package/es/im/IMTicketLink/props/propTypes.js

@@ -1,10 +1,11 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const imTicketLinkPropTypes = {
+  ticketNumber: PropTypes.string.isRequired,
   customStyle: PropTypes.object,
-  ticketURL: PropTypes.string,
+  isDisabled: PropTypes.bool,
   onClick: PropTypes.func,
-  ticketNumber: PropTypes.string,
-  ticketId: PropTypes.string
+  ticketId: PropTypes.string,
+  ticketUrl: PropTypes.string
 };
 export default imTicketLinkPropTypes;

package/es/im/index.js

@@ -1,20 +1,10 @@
 export * from './IMIntegrationIcon';
-export * from './IMMessageActions';
-export * from './IMMessageAvatar';
-export * from './IMMessageStatus';
 export * from './IMMessage';
-export * from './IMDateTime';
 export * from './IMTicketLink';
 export * from './IMMessageMeta';
 export * from './IMAutoMessageInfo';
 export * from './IMMessageContent';
-export * from './IMAudioBubble';
-export * from './IMAttachmentBubble';
-export * from './IMVideoBubble';
 export * from './IMTextBubble';
 export * from './IMInfoBubble';
-export * from './IMAttachmentIcon';
 export * from './IMReplyBubble';
-export * from './IMImageBubble';
-export * from './IMLocationBubble';
-export * from './IMArticleBubble';
+export * from './ArticleBubble';

package/es/index.js

@@ -1,37 +1,33 @@
-export * from "./MessageBubble";
-
-// export * from './AvatarSpace';
-export * from "./MessageActions";
-export * from "./MessageBox";
-export * from "./MessageBoxHeader";
-export * from "./MessageBoxFooter";
-export * from "./ActionIcon";
-export * from "./MessageActionsMore";
-export * from "./TextMessage";
-export * from "./MessageAvatar";
-export * from "./MoreActionItem";
-export * from "./MessageAction";
-export * from "./Theme";
-export * from "./MessageWrapper";
-export * from "./Message";
-export * from "./AudioBubble";
-export * from "./AttachmentBubble";
-export * from "./VideoBubble";
-export * from "./ImageBubble";
-export * from "./TextBubble";
-export * from "./ArticleBubble";
-export * from "./LocationBubble";
-export * from "./InfoBubble";
-export * from "./AttachmentBubbleInfo";
-export * from "./Audio";
-export * from "./Video";
-export * from "./ReplyBubble";
-export * from "./ReplyBubbleHeader";
-export * from "./LazyLoadImage";
+export * from './MessageBubble';
+export * from './MessageActionsWrapper';
+export * from './MessageActions';
+export * from './MessageBox';
+export * from './ActionIcon';
+export * from './ActionIconWrapper';
+export * from './MessageActionsMore';
+export * from './MessageAvatar';
+export * from './MoreActionItem';
+export * from './MessageAction';
+export * from './Theme';
+export * from './Message';
+export * from './AudioBubble';
+export * from './AttachmentBubble';
+export * from './AttachmentIcon';
+export * from './VideoBubble';
+export * from './ImageBubble';
+export * from './TextBubble';
+export * from './LocationBubble';
+export * from './InfoBubble';
+export * from './AttachmentBubbleInfo';
+export * from './Audio';
+export * from './Video';
+export * from './ReplyBubble';
+export * from './ReplyBubbleHeader';
+export * from './LazyLoadImage';
 export * from './ReplyBubbleContent';
-export * from './im';
+export * from './MessageStatus';
+export * from './im'; // ... export other components
 
-// ... export other components
+/** * CONSTANTS ** */
 
-/*** CONSTANTS ***/
-export * from "./constants";
+export * from './constants';

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "description": "Chat Components",
   "main": "es/index.js",
   "module": "es/index.js",
   "scripts": {
     "build": "react-cli build:component:es",
-    "build_watch": "react-cli build:component:es -w",
+    "build_watch": "npm run build -- -w",
     "clean": "react-cli clean unittest coverage es result.json",
     "rtl": "react-cli rtl ./src ./es",
-    "prepare": "npm run clean && npm run build && npm run rtl",
+    "prepare": "npm run clean && npm run build && npm run rtl && npm run cssVariableConvert",
     "test": "react-cli test",
     "test:debug": "react-cli test --runInBand --watch",
-    "create-icons": "node ./src/icons/create-icon-components --sourucePath=./factory --targetPath=./iconSrc"
+    "create-icons": "node ./src/icons/create-icon-components --sourucePath=./factory --targetPath=./iconSrc",
+    "cssVariableConvert": "react-cli variableConverter ./es ./es",
+    "variable:addignore": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
+    "variable:convert": "node ../../node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
+    "variable:check": "node  ../../node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ../../node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
   },
   "author": "ZohoDesk - IM Team",
   "license": "ISC",
@@ -26,22 +30,36 @@
   ],
   "dependencies": {
     "@zohodesk/components": "1.0.0-alpha-259",
-    "@zohodesk/datetimejs": "1.0.0-beta.8",
     "@zohodesk/hooks": "1.3.12",
-    "@zohodesk/i18n": "1.0.0-beta.20",
     "@zohodesk/icon": "1.3.12",
-    "@zohodesk/icons": "1.0.0-beta.118",
-    "@zohodesk/theme": "1.3.2",
-    "@zohodesk/theme-defaults": "1.3.12",
     "@zohodesk/utils": "1.3.9",
     "@zohodesk/variables": "1.0.0-beta.30",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "^0.0.9",
-    "@zohoim/chat-components-utils": "^0.0.8"
+    "@zohoim/chat-components-hooks": "^0.0.12",
+    "@zohoim/chat-components-utils": "^0.0.11"
   },
   "devDependencies": {
-    "html-to-react": "^1.4.8",
-    "react-to-jsx": "^1.3.2"
+    "@zohodesk-private/css-variable-migrator": "1.0.1",
+    "html-to-react": "1.6.0 ",
+    "jsdom": "22.1.0",
+    "react-to-jsx": "1.3.2"
   },
-  "gitHead": "44251e037d721b4e14928c9c49028ea6d4080dc7"
+  "react-cli": {
+    "css": {
+      "plugins": {
+        "hasRTL": true,
+        "cssVariableReplacement": true
+      },
+      "patterns": {
+        "cssVariableReplacement": [
+          "**/src/**",
+          "**/lib/**",
+          "**/es/**",
+          "!**/node_modules/**"
+        ]
+      },
+      "cssVariableReplacementConfig": "../../node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
+    }
+  },
+  "gitHead": "de72d83a0b40cde9b34b122654601ec5c23c8e55"
 }

package/es/ActionIcon/css/cssJSLogic.js

@@ -1,10 +0,0 @@
-/** ** Methods *** */
-import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(props, style) {
-  const actionIconClass = compileClassNames({
-    [style.actionIcon]: true
-  });
-  return {
-    actionIconClass
-  };
-}

package/es/ArticleBubble/ArticleBubble.js

@@ -1,68 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
-/** ** Libraries *** */
-import React from "react";
-
-/** ** Hooks *** */
-import useMergeStyle from "@zohodesk/hooks/es/utils/useMergeStyle";
-
-/** ** Constants *** */
-import articleBubbleDefaultProps from "./props/defaultProps";
-import articleBubblePropTypes from "./props/propTypes";
-
-/** ** Methods *** */
-import renderHandler from "@zohoim/chat-components-utils/es/common/renderHandler";
-import cssJSLogic from "./css/cssJSLogic";
-import { Container, Box } from "@zohodesk/components/es/Layout";
-
-/** ** Styles *** */
-import style from "./css/ArticleBubble.module.css";
-import ArticleIcon from "../icons/iconSrc/common/Article";
-export default function ArticleBubble(props) {
-  const {
-    customStyle,
-    bubbleInfo,
-    title,
-    summary,
-    articleURL
-  } = props;
-
-  /* External customization */
-  const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    articleBubbleClass,
-    headerClass,
-    iconClass,
-    headerTextClass,
-    articleWrapperClass,
-    titleClass,
-    summaryClass
-  } = cssJSLogic(props, newStyle);
-  return /*#__PURE__*/React.createElement("div", {
-    className: articleBubbleClass
-  }, /*#__PURE__*/React.createElement(Container, {
-    isCover: false,
-    alignBox: "row",
-    align: "vertical",
-    className: headerClass
-  }, /*#__PURE__*/React.createElement("div", {
-    className: iconClass
-  }, /*#__PURE__*/React.createElement(ArticleIcon, {
-    customStyle: {
-      base: newStyle.articleIcon
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: headerTextClass
-  }, bubbleInfo)), /*#__PURE__*/React.createElement("div", {
-    className: articleWrapperClass
-  }, /*#__PURE__*/React.createElement("div", {
-    className: titleClass
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: summaryClass
-  }, summary)));
-}
-ArticleBubble.propTypes = articleBubblePropTypes;
-ArticleBubble.defaultProps = articleBubbleDefaultProps;
-ArticleBubble.displayName = "ArticleBubble";