@zohoim/chat-components 0.0.13 → 0.0.15

package/es/im/IMReplyBubble/IMReplyBubble.js

@@ -1,85 +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 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
-  } = 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() {
-    // eslint-disable-next-line no-nested-ternary
-    return isShowImage ? /*#__PURE__*/React.createElement("div", {
-      className: newStyle.imageWrapper
-    }, /*#__PURE__*/React.createElement("img", {
-      alt: fileName,
-      className: newStyle.image,
-      src: attachmentURL
-    })) : fileFormat ? /*#__PURE__*/React.createElement(IMAttachmentIcon, {
-      customStyle: {
-        $icon: newStyle.attachmentIcon
-      },
-      fileFormat: fileFormat
-    }) : null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: imReplyBubbleClass
-  }, /*#__PURE__*/React.createElement(ReplyBubble, {
-    contentCustomStyle: contentCustomStyle,
-    headerCustomStyle: headerCustomStyle,
-    renderIcon: renderIcon,
-    renderMessage: renderMessage,
+  return /*#__PURE__*/React.createElement(ReplyBubble, _extends({
+    attachmentDetails: attachmentDetails,
+    message: message,
+    onClick: onClick,
     replyText: replyText,
     senderName: senderName,
-    time: time,
-    timeCustomStyle: timeCustomStyle
-  }));
+    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,52 +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 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,
-    isShowMoreText: isShowSeeMore,
+  return /*#__PURE__*/React.createElement(TextBubble, _extends({
     message: sanitizedDisplayMessage,
-    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/css/common.module.css

@@ -0,0 +1,6 @@
+.dotted {
+    overflow: hidden;
+    white-space: nowrap;
+    word-wrap: normal;
+    text-overflow: ellipsis;
+}

package/es/im/index.js

@@ -1,18 +1,10 @@
 export * from './IMIntegrationIcon';
-export * from './IMMessageAvatar';
 export * from './IMMessage';
-export * from './IMDateTime';
-export * from './IMTicketLink';
+export * from './IMPermaLink';
 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,10 +1,9 @@
 export * from './MessageBubble';
-
-// export * from './AvatarSpace';
 export * from './MessageActionsWrapper';
 export * from './MessageActions';
 export * from './MessageBox';
 export * from './ActionIcon';
+export * from './ActionIconWrapper';
 export * from './MessageActionsMore';
 export * from './MessageAvatar';
 export * from './MoreActionItem';
@@ -13,10 +12,10 @@ 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 './ArticleBubble';
 export * from './LocationBubble';
 export * from './InfoBubble';
 export * from './AttachmentBubbleInfo';
@@ -27,9 +26,8 @@ export * from './ReplyBubbleHeader';
 export * from './LazyLoadImage';
 export * from './ReplyBubbleContent';
 export * from './MessageStatus';
-export * from './im';
-
-// ... export other components
+export * from './im'; // ... export other components
 
 /** * CONSTANTS ** */
+
 export * from './constants';

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "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.11",
-    "@zohoim/chat-components-utils": "^0.0.10"
+    "@zohoim/chat-components-hooks": "^0.0.13",
+    "@zohoim/chat-components-utils": "^0.0.12"
   },
   "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": "a17ea9881b19b8533d05d1ea4334b47d6aa86797"
+  "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": "0b3fa05803c74cad58e84613fc54c979493192c0"
 }

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,70 +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 cssJSLogic from './css/cssJSLogic';
-
-/** ** Components *** */
-import { Container } from '@zohodesk/components/es/Layout';
-
-/** ** Styles *** */
-import style from './css/ArticleBubble.module.css';
-
-/** ** Icons *** */
-import ArticleIcon from '../icons/iconSrc/common/Article';
-export default function ArticleBubble(props) {
-  const {
-    customStyle,
-    bubbleInfo,
-    title,
-    summary
-  } = 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, {
-    align: "vertical",
-    alignBox: "row",
-    className: headerClass,
-    isCover: false
-  }, /*#__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';

package/es/ArticleBubble/css/ArticleBubble.module.css

@@ -1,48 +0,0 @@
-.icon {
-  display: flex;
-}
-
-.articleWrapper {
-  padding: var(--imlib_size_8) var(--imlib_size_10);
-  background-color: var(--imlib_chat_components_articleBubble_bg_color);
-  border-radius: var(--imlib_size_3);
-  cursor: pointer;
-  border: var(--imlib_size_1) solid
-    var(--imlib_chat_components_articleBubble_border_color);
-  margin: var(--imlib_size_4) 0 var(--imlib_size_2);
-}
-
-.title {
-  color: var(--imlib_chat_components_articleBubble_color);
-  font-size: var(--imlib_size_15);
-  line-height: 1.5;
-  overflow: hidden;
-  white-space: nowrap;
-  word-wrap: normal;
-  text-overflow: ellipsis;
-}
-
-.summary {
-  color: var(--imlib_chat_components_articleBubble_color);
-  font-size: var(--imlib_size_13);
-  line-height: 1.5;
-  max-height: var(--imlib_size_40);
-  -webkit-line-clamp: 2;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  word-break: break-word;
-  overflow: hidden;
-}
-
-.articleIcon {
-  width: var(--imlib_size_16);
-  height: var(--imlib_size_16);
-}
-
-.articleIcon :global(.path-0) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path0_color);
-}
-
-.articleIcon :global(.path-1) {
-  fill: var(--imlib_chat_components_imIntegrationIcon_path1_color);
-}

package/es/ArticleBubble/css/cssJSLogic.js

@@ -1,34 +0,0 @@
-/** ** Methods *** */
-import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(props, style) {
-  const articleBubbleClass = compileClassNames({
-    [style.articleBubble]: true
-  });
-  const headerClass = compileClassNames({
-    [style.header]: true
-  });
-  const iconClass = compileClassNames({
-    [style.icon]: true
-  });
-  const headerTextClass = compileClassNames({
-    [style.headerText]: true
-  });
-  const articleWrapperClass = compileClassNames({
-    [style.articleWrapper]: true
-  });
-  const titleClass = compileClassNames({
-    [style.title]: true
-  });
-  const summaryClass = compileClassNames({
-    [style.summary]: true
-  });
-  return {
-    articleBubbleClass,
-    headerClass,
-    iconClass,
-    headerTextClass,
-    articleWrapperClass,
-    titleClass,
-    summaryClass
-  };
-}

package/es/ArticleBubble/props/propTypes.js

@@ -1,10 +0,0 @@
-/** ** Libraries *** */
-import PropTypes from 'prop-types';
-const articleBubblePropTypes = {
-  customStyle: PropTypes.object,
-  bubbleInfo: PropTypes.string,
-  title: PropTypes.string,
-  summary: PropTypes.string,
-  articleURL: PropTypes.string
-};
-export default articleBubblePropTypes;

package/es/AttachmentBubble/css/cssJSLogic.js

@@ -1,18 +0,0 @@
-/** ** Methods *** */
-import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(props, style) {
-  const attachmentBubbleClass = compileClassNames({
-    [style.attachmentBubble]: true
-  });
-  const attachmentBubbleIconClass = compileClassNames({
-    [style.attachmentBubbleIcon]: true
-  });
-  const attachmentBubbleContentClass = compileClassNames({
-    [style.attachmentBubbleContent]: true
-  });
-  return {
-    attachmentBubbleClass,
-    attachmentBubbleIconClass,
-    attachmentBubbleContentClass
-  };
-}

package/es/AttachmentBubbleInfo/css/cssJSLogic.js

@@ -1,18 +0,0 @@
-/** ** Methods *** */
-import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(props, style) {
-  const attachmentBubbleInfoClass = compileClassNames({
-    [style.attachmentBubbleInfo]: true
-  });
-  const fileNameClass = compileClassNames({
-    [style.fileName]: true
-  });
-  const fileSizeClass = compileClassNames({
-    [style.fileSize]: true
-  });
-  return {
-    attachmentBubbleInfoClass,
-    fileNameClass,
-    fileSizeClass
-  };
-}

package/es/Audio/css/cssJSLogic.js

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