oa-componentbook 0.18.8 → 0.18.10

package/build/widgets/oa-widget-chat/ChatWidget.js

@@ -5,11 +5,12 @@ require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledCustomDrawer = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
 var _lodash = require("lodash");
 var _react = _interopRequireWildcard(require("react"));
@@ -19,6 +20,7 @@ var _CustomButton = _interopRequireDefault(require("../../components/oa-componen
 var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _system = require("@material-ui/system");
+var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,14 +29,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 _dayjs.default.extend(_relativeTime.default);
+const StyledCustomDrawer = exports.StyledCustomDrawer = (0, _styledComponents.default)(_CustomDrawer.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  h3{\n    margin: 0 0 4px;\n  }\n  .ant-drawer-footer span{\n    margin: 0 0 4px;\n    display: block;\n  }\n  .ant-drawer-footer aside{\n    display: flex;\n    justify-content: end;\n    padding: 16px 0 0;\n  }\n"])));
 const stylesObj = {
   chatUi: {
-    padding: '10px 8px',
-    backgroundColor: '#DAF1FC',
+    padding: '16px',
+    backgroundColor: 'var(--color-background-info)',
     borderRadius: '4px',
-    maxWidth: '500px',
-    marginTop: '12px'
+    width: '440px',
+    marginTop: '20px',
+    marginBottom: '8px'
   },
   chatContainer: {
     display: 'flex',
@@ -65,74 +70,31 @@ function ChatWidget(_ref) {
     onMessageInput(message);
     onClearInput();
   };
-  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+  return /*#__PURE__*/_react.default.createElement(StyledCustomDrawer, {
     open: show,
     onClose: onClose,
     closeIcon: null,
     isBaseDrawer: true,
-    width: 700,
+    width: 860,
     customTitle: true,
     title: headerTitle,
     footer: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      style: {
-        fontSize: '12px'
-      }
+      className: "type-b2-400",
+      color: 'primary-content'
     }, "Reply to Query"), /*#__PURE__*/_react.default.createElement(_TextArea.default, {
       name: "message",
       value: message,
       placeholder: 'Type here...',
-      style: {
-        marginTop: '7px'
-      },
       onChange: e => setMessage(e.target.value)
-    }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    }), /*#__PURE__*/_react.default.createElement("aside", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
       onClick: onMsgSend,
-      style: {
-        width: '120px',
-        color: 'white',
-        float: 'right',
-        marginTop: '12px'
-      },
-      size: 'small',
+      size: 'medium',
       label: 'Send Reply'
-    })),
-    styles: {
-      body: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        overflow: 'hidden'
-      },
-      footer: {
-        backgroundColor: '#f6f6f6'
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    level: 5,
-    style: {
-      fontSize: '24px',
-      fontWeight: 'bold'
-    }
-  }, bodyTitle), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
-    style: {
-      margin: '12px'
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex flex-column",
-    style: {
-      gap: '35px',
-      overflow: 'auto',
-      flex: 9,
-      padding: '0 40px 20px 0'
-    }
-  }, isContentLoading ? [...Array((0, _lodash.random)(2, 5))].map((_, ind) => {
+    })))
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t1-500"
+  }, bodyTitle), /*#__PURE__*/_react.default.createElement("div", null, isContentLoading ? [...Array((0, _lodash.random)(2, 5))].map((_, ind) => {
     return ind % 2 ?
     /*#__PURE__*/
     // Info : This container is to show the loading of the chats (our chats) in the right side of chat body while chats are fetching.
@@ -140,24 +102,11 @@ function ChatWidget(_ref) {
       loading: isContentLoading,
       avatar: true,
       active: true,
-      title: false
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        display: 'flex',
-        gap: '10px'
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      maxWidth: "90%",
-      flexDirection: "column",
-      style: _objectSpread({}, stylesObj.chatUi),
-      gap: "2px"
-    }, /*#__PURE__*/_react.default.createElement(_Typography.default, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      title: false,
       style: {
-        fontSize: "10px",
-        alignSelf: "flex-end",
-        width: "fit-content"
+        backgroundColor: "red"
       }
-    }, (0, _dayjs.default)().fromNow())))) :
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, null, (0, _dayjs.default)().fromNow())))) :
     /*#__PURE__*/
     // Info : This container is to show the loading of the chats (other user) in the left side of chat body while chats are fetching.
     _react.default.createElement(_antd.Skeleton, {
@@ -169,7 +118,6 @@ function ChatWidget(_ref) {
         transform: "scale(-1, 1)"
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
-      maxWidth: "90%",
       flexDirection: "column",
       style: _objectSpread({}, stylesObj.chatUi),
       gap: "2px"
@@ -177,10 +125,9 @@ function ChatWidget(_ref) {
       style: _objectSpread({
         display: "flex",
         flexDirection: "column",
-        gap: '2px',
-        maxWidth: '90%'
+        gap: '2px'
       }, stylesObj.chatUi)
-    }, /*#__PURE__*/_react.default.createElement(_Typography.default, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       type: "secondary",
       style: {
         fontSize: "10px",
@@ -202,23 +149,16 @@ function ChatWidget(_ref) {
       style: _objectSpread(_objectSpread({
         display: "flex",
         flexDirection: "column",
-        gap: '2px',
-        maxWidth: '90%'
+        gap: '2px'
       }, stylesObj.chatUi), {}, {
         backgroundColor: '#f6f6f6'
       })
     }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      style: {
-        whiteSpace: "pre-line"
-      }
+      className: "type-b1-400",
+      color: 'primary-content'
     }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      color: 'lightgray',
-      style: {
-        marginTop: '10px',
-        fontSize: "10px",
-        alignSelf: "flex-end",
-        width: "fit-content"
-      }
+      className: "type-sl1-700",
+      color: 'secondary-content'
     }, message.createdAt))) :
     /*#__PURE__*/
     // Info : This is the chat box of left side which will show messages from other user.
@@ -232,20 +172,14 @@ function ChatWidget(_ref) {
       style: _objectSpread({
         display: 'flex',
         flexDirection: 'column',
-        gap: '2px',
-        maxWidth: '90%'
+        gap: '2px'
       }, stylesObj.chatUi)
     }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      style: {
-        whiteSpace: "pre-line"
-      }
+      className: "type-b1-400",
+      color: 'primary-content'
     }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      color: 'lightgray',
-      style: {
-        marginTop: '10px',
-        fontSize: "10px",
-        width: "fit-content"
-      }
+      className: "type-sl1-700",
+      color: 'secondary-content'
     }, message.createdAt));
   }) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
     type: "info",
@@ -269,8 +203,8 @@ ChatWidget.defaultProps = {
     !show;
   },
   isContentLoading: true,
-  headerTitle: 'Header Title',
-  bodyTitle: 'Body Title',
+  headerTitle: 'VIEW OR REPLY TO QUERY',
+  bodyTitle: 'Purchase Invoice',
   onMessageInput: msg => alert('This is your msg :' + msg),
   initialMsg: '',
   clearInput: true,

package/build/widgets/oa-widget-chat/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatUi = exports.ChatFooter = exports.ChatDrawer = exports.ChatContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const ChatUi = exports.ChatUi = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px;\n  background-color: var(--color-background-info);\n  border-radius: 4px;\n  max-width: 440px;\n  margin-top: 12px;\n"])));
+const ChatContainer = exports.ChatContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  flex: 9;\n  overflow: auto;\n"])));
+const ChatDrawer = exports.ChatDrawer = (0, _styledComponents.default)(CustomDrawer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  // Your CustomDrawer styles here\n"])));
+const ChatFooter = exports.ChatFooter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow: hidden;\n"])));
+
+// Add more styled components as needed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.8",
+  "version": "0.18.10",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",