oa-componentbook 0.18.9 → 0.18.11

package/build/components/oa-component-loader/CustomLoader.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
-const _excluded = ["children", "contentHeight", "size", "spinning"];
+const _excluded = ["children", "contentHeight", "delay", "size", "spinning"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -18,6 +18,7 @@ function CustomLoader(_ref) {
   let {
       children,
       contentHeight,
+      delay,
       size,
       spinning
     } = _ref,
@@ -34,7 +35,7 @@ function CustomLoader(_ref) {
       }
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Spin, _extends({
-    delay: 500,
+    delay: delay,
     size: size,
     spinning: spinning
   }, antDesignProps), children));
@@ -42,11 +43,13 @@ function CustomLoader(_ref) {
 CustomLoader.propTypes = {
   children: _propTypes.default.node.isRequired,
   contentHeight: _propTypes.default.string,
+  delay: _propTypes.default.number,
   size: _propTypes.default.oneOf(['small', 'default', 'large']),
   spinning: _propTypes.default.bool.isRequired
 };
 CustomLoader.defaultProps = {
   contentHeight: 'none',
+  delay: 500,
   size: 'default'
 };
 var _default = exports.default = CustomLoader;

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

@@ -1,37 +1,45 @@
 "use strict";
 
+require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+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 _icons = require("@material-ui/icons");
+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"));
 var _TextArea = _interopRequireDefault(require("../../components/oa-component-textarea/TextArea"));
+var _icons = require("@material-ui/icons");
 var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
 var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
-// import dayjs from 'dayjs';
-// import relativeTime from 'dayjs/plugin/relativeTime';
-// import { random } from 'lodash';
-
-// import { fontSize, fontWeight } from '@material-ui/system';
-
-// dayjs.extend(relativeTime);
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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',
@@ -54,240 +62,130 @@ function ChatWidget(_ref) {
     onMessageInput,
     clearInput
   } = _ref;
-} //   const [message, setMessage] = useState(initialMsg || '');
-//   const onClearInput = () => {
-//     clearInput && setMessage('');
-//   };
-//   const onMsgSend = () => {
-//     onMessageInput(message);
-//     onClearInput();
-//   };
-//   return (
-//     <CustomDrawer
-//       open={show}
-//       onClose={onClose}
-//       closeIcon={null}
-//       isBaseDrawer
-//       width={700}
-//       customTitle
-//       title={headerTitle}
-//       footer={(
-//         <div>
-//           <Typography style={{ fontSize: '12px' }}>Reply to Query</Typography>
-//           <TextArea
-//             name="message"
-//             value={message}
-//             placeholder="Type here..."
-//             style={{ marginTop: '7px' }}
-//             onChange={(e) => setMessage(e.target.value)}
-//           />
-//           <CustomButton
-//             onClick={onMsgSend}
-//             style={{
-//               width: '120px', color: 'white', float: 'right', marginTop: '12px',
-//             }}
-//             size="small"
-//             label="Send Reply"
-//           />
-//         </div>
-// )}
-//       styles={{
-//         body: {
-//           display: 'flex',
-//           flexDirection: 'column',
-//           gap: '8px',
-//           overflow: 'hidden',
-//         },
-//         footer: {
-//           backgroundColor: '#f6f6f6',
-//         },
-//       }}
-//     >
-//       <div
-//         style={{
-//           display: 'flex',
-//           flexDirection: 'column',
-//           width: '100%',
-//           height: '100%',
-//         }}
-//       >
-
-//         <Typography level={5} style={{ fontSize: '24px', fontWeight: 'bold' }}>
-//           {bodyTitle}
-//         </Typography>
-
-//         <Divider style={{ margin: '12px' }} />
-
-//         <div
-//           className="flex flex-column"
-//           style={{
-//             gap: '35px',
-//             overflow: 'auto',
-//             flex: 9,
-//             padding: '0 40px 20px 0',
-//           }}
-//         >
-//           {isContentLoading ? (
-//             [...Array(random(2, 5))].map((_, ind) => (ind % 2 ? (
-// /*
-// Info :
-// This container is to show the loading of the chats
-// (our chats) in the right side of chat body while chats are fetching.
-// */
-//               <Skeleton
-//                 loading={isContentLoading}
-//                 avatar
-//                 active
-//                 title={false}
-//               >
-//                 <div style={{ display: 'flex', gap: '10px' }}>
-//                   <div
-//                     maxWidth="90%"
-//                     flexDirection="column"
-//                     style={{ ...stylesObj.chatUi }}
-//                     gap="2px"
-//                   >
-//                     <Typography />
-//                     <Typography
-//                       style={{
-//                         fontSize: '10px',
-//                         alignSelf: 'flex-end',
-//                         width: 'fit-content',
-//                       }}
-//                     >
-//                       {dayjs().fromNow()}
-//                     </Typography>
-//                   </div>
-//                 </div>
-//               </Skeleton>
-//             ) : (
-// /*
-// Info :
-// This container is to show the loading of the chats (other user)
-// in the left side of chat body while chats are fetching.
-// */
-//               <Skeleton
-//                 loading={isContentLoading}
-//                 avatar
-//                 active
-//                 title={false}
-//                 style={{ transform: 'scale(-1, 1)' }}
-//               >
-//                 <div
-//                   maxWidth="90%"
-//                   flexDirection="column"
-//                   style={{ ...stylesObj.chatUi }}
-//                   gap="2px"
-//                 >
-//                   <div
-//                     style={{
-//                       display: 'flex',
-//                       flexDirection: 'column',
-//                       gap: '2px',
-//                       maxWidth: '90%',
-//                       ...stylesObj.chatUi,
-//                     }}
-//                   >
-//                     <Typography />
-//                     <Typography
-//                       type="secondary"
-//                       style={{
-//                         fontSize: '10px',
-//                         alignSelf: 'flex-end',
-//                         width: 'fit-content',
-//                       }}
-//                     >
-//                       {dayjs().fromNow()}
-//                     </Typography>
-//                   </div>
-
-//                 </div>
-//               </Skeleton>
-//             )))
-//           ) : queryMessages?.length ? (
-//             queryMessages.map((message) => (message.isUser ? (
-//             // Info : This is the chat box of right side which will show messages from user.
-//               <div
-//                 style={{
-//                   display: 'flex',
-//                   alignItems: 'flex-start',
-//                   justifyContent: 'flex-end',
-//                 }}
-//               >
-//                 <div>
-//                   <div
-//                     style={{
-//                       display: 'flex',
-//                       flexDirection: 'column',
-//                       gap: '2px',
-//                       maxWidth: '90%',
-//                       ...stylesObj.chatUi,
-//                       backgroundColor: '#f6f6f6',
-//                     }}
-//                   >
-//                     <Typography style={{ whiteSpace: 'pre-line' }}>
-//                       {message.message}
-//                     </Typography>
-
-//                   </div>
-//                   <Typography
-//                     color="lightgray"
-//                     style={{
-//                       marginTop: '10px',
-//                       fontSize: '10px',
-//                       alignSelf: 'flex-end',
-//                       width: 'fit-content',
-//                     }}
-//                   >
-//                     {message.createdAt}
-//                   </Typography>
-
-//                 </div>
-//               </div>
-//             ) : (
-// // Info : This is the chat box of left side which will show messages from other user.
-//               <div style={{
-//                 display: 'flex',
-//                 alignItems: 'flex-start',
-//                 flexDirection: 'column',
-//               }}
-//               >
-//                 <div
-//                   style={{
-//                     display: 'flex',
-//                     flexDirection: 'column',
-//                     gap: '2px',
-//                     maxWidth: '90%',
-//                     ...stylesObj.chatUi,
-//                   }}
-//                 >
-//                   <Typography style={{ whiteSpace: 'pre-line' }}>
-//                     {message.message}
-//                   </Typography>
-//                 </div>
-//                 <Typography
-//                   color="lightgray"
-//                   style={{
-//                     marginTop: '10px',
-//                     fontSize: '10px',
-//                     width: 'fit-content',
-//                   }}
-//                 >
-//                   {message.createdAt}
-//                 </Typography>
-//               </div>
-//             )))
-//           ) : (
-//             <Alert
-//               type="info"
-//               message="Send a chat to start your chat history for this ticket."
-//             />
-//           )}
-//         </div>
-//       </div>
-
-//     </CustomDrawer>
-//   );
+  const [message, setMessage] = (0, _react.useState)(initialMsg || '');
+  const onClearInput = () => {
+    clearInput && setMessage('');
+  };
+  const onMsgSend = () => {
+    onMessageInput(message);
+    onClearInput();
+  };
+  return /*#__PURE__*/_react.default.createElement(StyledCustomDrawer, {
+    open: show,
+    onClose: onClose,
+    closeIcon: null,
+    isBaseDrawer: true,
+    width: 860,
+    customTitle: true,
+    title: headerTitle,
+    footer: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b2-400",
+      color: 'primary-content'
+    }, "Reply to Query"), /*#__PURE__*/_react.default.createElement(_TextArea.default, {
+      name: "message",
+      value: message,
+      placeholder: 'Type here...',
+      onChange: e => setMessage(e.target.value)
+    }), /*#__PURE__*/_react.default.createElement("aside", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      onClick: onMsgSend,
+      size: 'medium',
+      label: 'Send Reply'
+    })))
+  }, /*#__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.
+    _react.default.createElement(_antd.Skeleton, {
+      loading: isContentLoading,
+      avatar: true,
+      active: true,
+      title: false,
+      style: {
+        backgroundColor: "red"
+      }
+    }, /*#__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, {
+      loading: isContentLoading,
+      avatar: true,
+      active: true,
+      title: false,
+      style: {
+        transform: "scale(-1, 1)"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      flexDirection: "column",
+      style: _objectSpread({}, stylesObj.chatUi),
+      gap: "2px"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: _objectSpread({
+        display: "flex",
+        flexDirection: "column",
+        gap: '2px'
+      }, stylesObj.chatUi)
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      type: "secondary",
+      style: {
+        fontSize: "10px",
+        alignSelf: "flex-end",
+        width: "fit-content"
+      }
+    }, (0, _dayjs.default)().fromNow()))));
+  }) : queryMessages !== null && queryMessages !== void 0 && queryMessages.length ? queryMessages.map(message => {
+    return message.isUser ?
+    /*#__PURE__*/
+    // Info : This is the chat box of right side which will show messages from user.
+    _react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-end'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      style: _objectSpread(_objectSpread({
+        display: "flex",
+        flexDirection: "column",
+        gap: '2px'
+      }, stylesObj.chatUi), {}, {
+        backgroundColor: '#f6f6f6'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b1-400",
+      color: 'primary-content'
+    }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      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.
+    _react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: _objectSpread({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2px'
+      }, stylesObj.chatUi)
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b1-400",
+      color: 'primary-content'
+    }, message.message)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-sl1-700",
+      color: 'secondary-content'
+    }, message.createdAt));
+  }) : /*#__PURE__*/_react.default.createElement(_antd.Alert, {
+    type: "info",
+    message: "Send a chat to start your chat history for this ticket."
+  }))));
+}
 ChatWidget.propTypes = {
   show: _propTypes.default.bool,
   onClose: _propTypes.default.func,
@@ -303,9 +201,9 @@ ChatWidget.defaultProps = {
   show: false,
   onClose: () => {},
   isContentLoading: true,
-  headerTitle: 'Header Title',
-  bodyTitle: 'Body Title',
-  onMessageInput: msg => alert("This is your msg :".concat(msg)),
+  headerTitle: 'VIEW OR REPLY TO QUERY',
+  bodyTitle: 'Purchase Invoice',
+  onMessageInput: msg => alert('This is your msg :' + msg),
   initialMsg: '',
   clearInput: true,
   queryMessages: [{

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/build/widgets/oa-widget-custom-details/CustomDetails.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _templateObject;
+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 Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px;\n  border: 1px solid var(--color-divider);\n  background: var(--color-secondary-background);\n"])));
+function CustomDetails(_ref) {
+  let {
+    text
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, text));
+}
+var _default = exports.default = CustomDetails;

package/package.json

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