@vendorflow/components 2.0.44 → 2.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/components/material-ui/ChatInterface/ActionsMenu.d.ts +4 -0
  2. package/lib/components/material-ui/ChatInterface/ActionsMenu.js +42 -0
  3. package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts +2 -0
  4. package/lib/components/material-ui/ChatInterface/ChatInterface.story.js +21 -1
  5. package/lib/components/material-ui/ChatInterface/MessageInput.js +6 -2
  6. package/lib/components/material-ui/ChatInterface/MessageItem.js +4 -4
  7. package/package.json +4 -2
package/lib/components/material-ui/ChatInterface/ActionsMenu.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /** @jsxRuntime classic */
2
+ /** @jsx jsx */
3
+ import { jsx } from '@emotion/react';
4
+ export default function ActionsMenu(): jsx.JSX.Element;
package/lib/components/material-ui/ChatInterface/ActionsMenu.js ADDED
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
17
+ var __importDefault = (this && this.__importDefault) || function (mod) {
18
+ return (mod && mod.__esModule) ? mod : { "default": mod };
19
+ };
20
+ Object.defineProperty(exports, "__esModule", { value: true });
21
+ /** @jsxRuntime classic */
22
+ /** @jsx jsx */
23
+ var react_1 = require("@emotion/react");
24
+ var short_uuid_1 = __importDefault(require("short-uuid"));
25
+ var hooks_1 = require("material-ui-popup-state/hooks");
26
+ var material_1 = require("@mui/material");
27
+ var icons_material_1 = require("@mui/icons-material");
28
+ var react_2 = require("react");
29
+ function ActionsMenu() {
30
+ var popupId = (0, react_2.useRef)(short_uuid_1.default.generate());
31
+ var popupState = (0, hooks_1.usePopupState)({ variant: 'popover', popupId: popupId.current });
32
+ return ((0, react_1.jsx)("div", null,
33
+ (0, react_1.jsx)(material_1.Tooltip, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: 0.875rem;\n background-color: #555;\n "], ["\n font-size: 0.875rem;\n background-color: #555;\n "]))), placement: "top", title: "Actions" },
34
+ (0, react_1.jsx)(material_1.IconButton, __assign({ css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: transparent;\n "], ["\n background-color: transparent;\n "]))) }, (0, hooks_1.bindTrigger)(popupState)),
35
+ (0, react_1.jsx)(icons_material_1.MapsUgc, null))),
36
+ (0, react_1.jsx)(material_1.Menu, __assign({}, (0, hooks_1.bindMenu)(popupState), { anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { vertical: 'bottom', horizontal: 'right' } }),
37
+ (0, react_1.jsx)(material_1.MenuItem, null, "Template 1"),
38
+ (0, react_1.jsx)(material_1.MenuItem, null, "Template 2"),
39
+ (0, react_1.jsx)(material_1.MenuItem, null, "Template 3"))));
40
+ }
41
+ exports.default = ActionsMenu;
42
+ var templateObject_1, templateObject_2;
package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts CHANGED
@@ -3,6 +3,8 @@ export interface Message {
3
3
  id: string;
4
4
  userId: string;
5
5
  username: string;
6
+ /** use for building chat icon */
7
+ initials: string;
6
8
  timestamp: string;
7
9
  content: string;
8
10
  }
package/lib/components/material-ui/ChatInterface/ChatInterface.story.js CHANGED
@@ -40,6 +40,7 @@ var react_2 = require("react");
40
40
  var faker_1 = __importDefault(require("faker"));
41
41
  var short_uuid_1 = __importDefault(require("short-uuid"));
42
42
  var ChatInterface_1 = __importDefault(require("./ChatInterface"));
43
+ var Workspaces_constants_1 = require("@vendorflow/common/lib/constants/Workspaces.constants");
43
44
  // tslint:disable-next-line:no-console
44
45
  function ChatInterface() {
45
46
  var _a = __read((0, react_2.useState)(true), 2), isLoading = _a[0], setLoading = _a[1];
@@ -48,7 +49,7 @@ function ChatInterface() {
48
49
  var _d = __read((0, react_2.useState)([]), 2), messages = _d[0], setMessages = _d[1];
49
50
  var _e = __read((0, react_2.useState)(true), 2), hasMore = _e[0], setHasMore = _e[1];
50
51
  (0, react_2.useEffect)(function () {
51
- setMessages(new Array(5).fill(null).map(generateMessage));
52
+ setMessages(new Array(5).fill(null).map(generateMessage).concat([generateSystemMessage()]));
52
53
  setLoading(false);
53
54
  setFetching(false);
54
55
  }, []);
@@ -58,21 +59,39 @@ function ChatInterface() {
58
59
  function generateId() {
59
60
  return short_uuid_1.default.generate();
60
61
  }
62
+ function generateSystemMessage() {
63
+ return {
64
+ id: generateId(),
65
+ userId: Workspaces_constants_1.SYSTEM_IDENTITY_ID,
66
+ username: 'System',
67
+ initials: 'S',
68
+ timestamp: generateTimestamp(),
69
+ content: faker_1.default.lorem.sentence(5, 2),
70
+ };
71
+ }
61
72
  function generateMessage() {
62
73
  var user = faker_1.default.random.arrayElement([
63
74
  {
64
75
  id: 'user1',
65
76
  name: 'Socorro Aguilar',
77
+ initials: 'SA',
66
78
  },
67
79
  {
68
80
  id: 'user2',
69
81
  name: 'Greg Bujak',
82
+ initials: 'GB',
83
+ },
84
+ {
85
+ id: 'user3',
86
+ name: 'xinyi@vendorflow.co',
87
+ initials: 'X',
70
88
  },
71
89
  ]);
72
90
  return {
73
91
  id: generateId(),
74
92
  userId: user.id,
75
93
  username: user.name,
94
+ initials: user.initials,
76
95
  timestamp: generateTimestamp(),
77
96
  content: faker_1.default.lorem.sentence(5, 2),
78
97
  };
@@ -97,6 +116,7 @@ function ChatInterface() {
97
116
  id: generateId(),
98
117
  userId: 'user1',
99
118
  username: 'Socorro Aguilar',
119
+ initials: 'SA',
100
120
  timestamp: generateTimestamp(),
101
121
  content: message,
102
122
  }
package/lib/components/material-ui/ChatInterface/MessageInput.js CHANGED
@@ -14,6 +14,7 @@ var react_2 = require("react");
14
14
  var react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize"));
15
15
  var material_1 = require("@mui/material");
16
16
  var icons_material_1 = require("@mui/icons-material");
17
+ var ActionsMenu_1 = __importDefault(require("./ActionsMenu"));
17
18
  var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
18
19
  var handleClickSend = _a.handleClickSend, message = _a.message, placeholder = _a.placeholder, setMessage = _a.setMessage, isSubmitting = _a.isSubmitting;
19
20
  function handleOnChange(_a) {
@@ -42,8 +43,11 @@ var MessageInput = (0, react_2.forwardRef)(function (_a, ref) {
42
43
  var _a, _b;
43
44
  return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n resize: none;\n width: calc(100% - 3.5rem);\n outline: 0 none transparent;\n font-size: 16px;\n margin: 0.5rem;\n padding: 0.5rem;\n box-sizing: border-box;\n border-radius: 5px;\n border-color: ", ";\n "], ["\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n resize: none;\n width: calc(100% - 3.5rem);\n outline: 0 none transparent;\n font-size: 16px;\n margin: 0.5rem;\n padding: 0.5rem;\n box-sizing: border-box;\n border-radius: 5px;\n border-color: ", ";\n "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(0, 0%, 89%)');
44
45
  }, placeholder: placeholder || 'Type your message here...', value: message, onChange: handleOnChange, onKeyDown: handleOnKeyDown, minRows: 3, maxRows: 8 }),
45
- (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 2rem;\n width: 2rem;\n padding-right: ", ";\n "], ["\n height: 2rem;\n width: 2rem;\n padding-right: ", ";\n "])), isSubmitting ? '0.5rem' : '0.25rem') }, isSubmitting ? ((0, react_1.jsx)(material_1.CircularProgress, { size: "2rem" })) : ((0, react_1.jsx)(material_1.IconButton, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n "], ["\n height: 100%;\n width: 100%;\n "]))), onClick: handleOnClickSend, disabled: isSubmitting },
46
- (0, react_1.jsx)(icons_material_1.Send, null))))));
46
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding-right: 0.5rem;\n overflow: hidden;\n "], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding-right: 0.5rem;\n overflow: hidden;\n "]))) },
47
+ (0, react_1.jsx)(ActionsMenu_1.default, null),
48
+ isSubmitting ? ((0, react_1.jsx)(material_1.CircularProgress, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 8px;\n "], ["\n margin: 8px;\n "]))), size: "1.5rem" })) : ((0, react_1.jsx)(material_1.Tooltip, { title: "Send Now", placement: "bottom" },
49
+ (0, react_1.jsx)(material_1.IconButton, { onClick: handleOnClickSend, disabled: isSubmitting },
50
+ (0, react_1.jsx)(icons_material_1.Send, null)))))));
47
51
  });
48
52
  exports.default = MessageInput;
49
53
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/lib/components/material-ui/ChatInterface/MessageItem.js CHANGED
@@ -27,6 +27,7 @@ var date_fns_1 = require("date-fns");
27
27
  var icons_material_1 = require("@mui/icons-material");
28
28
  var material_1 = require("@mui/material");
29
29
  var react_2 = require("react");
30
+ var Workspaces_constants_1 = require("@vendorflow/common/lib/constants/Workspaces.constants");
30
31
  function MessageItem(_a) {
31
32
  var userId = _a.userId, message = _a.message, colors = _a.colors;
32
33
  var _b = __read((0, react_2.useState)(getUnixTimestamp()), 2), displayUpdateAt = _b[0], setDisplayUpdateAt = _b[1];
@@ -56,16 +57,15 @@ function MessageItem(_a) {
56
57
  return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background: white;\n margin-top: 0.5rem;\n border-radius: 4px;\n display: flex;\n flex-direction: row;\n "], ["\n width: 100%;\n background: white;\n margin-top: 0.5rem;\n border-radius: 4px;\n display: flex;\n flex-direction: row;\n "]))) },
57
58
  (0, react_1.jsx)(material_1.Avatar, { css: function (theme) {
58
59
  var _a, _b, _c, _d, _e;
59
- return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n && {\n height: 2rem;\n width: 2rem;\n margin-right: 0.5rem;\n background-color: ", ";\n }\n "], ["\n && {\n height: 2rem;\n width: 2rem;\n margin-right: 0.5rem;\n background-color: ", ";\n }\n "])), userId === message.userId
60
+ return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n && {\n font-size: 1rem;\n height: 2rem;\n width: 2rem;\n margin-right: 0.5rem;\n visibility: ", ";\n background-color: ", ";\n }\n "], ["\n && {\n font-size: 1rem;\n height: 2rem;\n width: 2rem;\n margin-right: 0.5rem;\n visibility: ", ";\n background-color: ", ";\n }\n "])), message.userId === Workspaces_constants_1.SYSTEM_IDENTITY_ID ? 'hidden' : 'visible', userId === message.userId
60
61
  ? (colors === null || colors === void 0 ? void 0 : colors.user) || ((_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.custom) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.tertiary) === null || _c === void 0 ? void 0 : _c.main) || 'hsl(0, 0%, 89%)'
61
62
  : (colors === null || colors === void 0 ? void 0 : colors.others) || ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e.main) || 'hsl(0, 0%, 47%)');
62
- } },
63
- (0, react_1.jsx)(icons_material_1.Person, null)),
63
+ } }, message.initials === '' ? (0, react_1.jsx)(icons_material_1.Person, null) : message.initials),
64
64
  (0, react_1.jsx)("div", null,
65
65
  (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n "], ["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n "]))) },
66
66
  (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 0.75rem;\n display: inline-block;\n margin-right: 0.25rem;\n "], ["\n font-weight: 700;\n font-size: 0.75rem;\n display: inline-block;\n margin-right: 0.25rem;\n "]))) }, message.username),
67
67
  (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 0.75rem;\n display: inline-block;\n "], ["\n font-size: 0.75rem;\n display: inline-block;\n "]))) }, timeDisplay)),
68
- (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 0.875rem;\n white-space: break-spaces;\n "], ["\n font-size: 0.875rem;\n white-space: break-spaces;\n "]))) }, message.content))));
68
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n font-size: 0.875rem;\n white-space: break-spaces;\n "], ["\n color: ", ";\n font-size: 0.875rem;\n white-space: break-spaces;\n "])), message.userId === Workspaces_constants_1.SYSTEM_IDENTITY_ID ? 'hsl(0, 0%, 65%)' : 'inherit') }, message.content))));
69
69
  }
70
70
  exports.default = MessageItem;
71
71
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "2.0.44",
3
+ "version": "2.0.48",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -46,7 +46,7 @@
46
46
  "@emotion/babel-plugin": "^11.3.0",
47
47
  "@emotion/react": "^11.4.0",
48
48
  "@emotion/styled": "^11.3.0",
49
- "@mui/icons-material": "^5.0.3",
49
+ "@mui/icons-material": "^5.2.1",
50
50
  "@mui/lab": "^5.0.0-alpha.50",
51
51
  "@mui/material": "^5.0.3",
52
52
  "@mui/styles": "^5.0.1",
@@ -62,6 +62,7 @@
62
62
  "@types/react-table": "^7.7.6",
63
63
  "@typescript-eslint/eslint-plugin": "^4.32.0",
64
64
  "@typescript-eslint/parser": "^4.32.0",
65
+ "@vendorflow/common": "^1.0.36",
65
66
  "babel-eslint": "10.1.0",
66
67
  "babel-jest": "^24.9.0",
67
68
  "babel-loader": "^8.2.2",
@@ -96,6 +97,7 @@
96
97
  "jest-resolve": "24.9.0",
97
98
  "jest-watch-typeahead": "0.4.2",
98
99
  "lodash": "^4.17.15",
100
+ "material-ui-popup-state": "^2.0.0",
99
101
  "mini-css-extract-plugin": "0.9.0",
100
102
  "nanoid": "^3.1.30",
101
103
  "optimize-css-assets-webpack-plugin": "5.0.3",