@zohoim/chat-components 0.0.13 → 0.0.14

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/IMTicketLink/IMTicketLink.js

@@ -1,42 +1,44 @@
 /* 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 cssJSLogic from './css/cssJSLogic';
 
+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,
+    href: ticketUrl,
     onClick: onClick,
     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,18 +1,10 @@
 export * from './IMIntegrationIcon';
-export * from './IMMessageAvatar';
 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,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.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.11",
-    "@zohoim/chat-components-utils": "^0.0.10"
+    "@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": "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": "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,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/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
-  };
-}

package/es/AudioBubble/css/AudioBubble.module.css

@@ -1,3 +0,0 @@
-.header{
-    margin-bottom: var(--imlib_size_5);
-}

package/es/AudioBubble/css/cssJSLogic.js

@@ -1,20 +0,0 @@
-/** ** Methods *** */
-import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(props, style) {
-  const {
-    headerCustomStyle: propHeaderCustomStyle
-  } = props;
-  const audioBubbleClass = compileClassNames({
-    [style.audioBubble]: true
-  });
-  const headerCustomStyle = compileClassNames({
-    [style.header]: true
-  });
-  return {
-    audioBubbleClass,
-    headerCustomStyle: {
-      attachmentBubbleInfo: headerCustomStyle,
-      ...propHeaderCustomStyle
-    }
-  };
-}

package/es/ImageBubble/css/cssJSLogic.js

@@ -1,22 +0,0 @@
-/** ** Methods *** */
-import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(props, style) {
-  const imageBubbleWrapperClass = compileClassNames({
-    [style.imageBubbleWrapper]: true
-  });
-  const imageClass = compileClassNames({
-    [style.image]: true
-  });
-  const blurImageClass = compileClassNames({
-    [style.blurImage]: true
-  });
-  return {
-    imageBubbleWrapperClass,
-    blurImageStyle: {
-      lazyLoadImage: blurImageClass
-    },
-    imageStyle: {
-      lazyLoadImage: imageClass
-    }
-  };
-}

package/es/LazyLoadImage/css/cssJSLogic.js

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

package/es/LocationBubble/css/cssJSLogic.js

@@ -1,30 +0,0 @@
-/** ** Methods *** */
-import { compileClassNames } from '@zohodesk/utils';
-export default function cssJSLogic(props, style) {
-  const locationBubbleClass = compileClassNames({
-    [style.locationBubble]: true
-  });
-  const imageWrapperClass = compileClassNames({
-    [style.imageWrapper]: true
-  });
-  const imageClass = compileClassNames({
-    [style.image]: true
-  });
-  const imageLinkClass = compileClassNames({
-    [style.imageLink]: true
-  });
-  const textWrapperClass = compileClassNames({
-    [style.textWrapper]: true
-  });
-  const textLinkClass = compileClassNames({
-    [style.textLink]: true
-  });
-  return {
-    locationBubbleClass,
-    imageWrapperClass,
-    imageClass,
-    imageLinkClass,
-    textWrapperClass,
-    textLinkClass
-  };
-}