tenjin-ui-kit 0.1.0-dev.2 → 0.1.0-dev.4

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 (5) hide show
  1. package/components/layout/topBar/UserAvatar.js +5 -4
  2. package/components/select/SimpleSelect.js +13 -41
  3. package/components/simpleSelect/index.js +7 -73
  4. package/package.json +2 -2
  5. package/README.md +0 -13
package/components/layout/topBar/UserAvatar.js CHANGED
@@ -28,7 +28,6 @@ var StyledMenu = (0, _styles.withStyles)({
28
28
  }
29
29
  })(function (props) {
30
30
  return /*#__PURE__*/_react.default.createElement(_material.Menu, _extends({
31
- getContentAnchorEl: null,
32
31
  disableAutoFocusItem: true,
33
32
  anchorOrigin: {
34
33
  vertical: "bottom",
@@ -66,7 +65,7 @@ var UserAvatar = function UserAvatar(_ref) {
66
65
  style: {
67
66
  width: "14rem"
68
67
  }
69
- }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.name) && (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.email) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
68
+ }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.name) && (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.email) && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
70
69
  onClick: function onClick() {
71
70
  handleCloseMenu();
72
71
  if (onViewProfileClick) {
@@ -89,8 +88,10 @@ var UserAvatar = function UserAvatar(_ref) {
89
88
  className: "name"
90
89
  }, loggedInUser.name), /*#__PURE__*/_react.default.createElement(_text.default, {
91
90
  className: "email"
92
- }, loggedInUser.email)))), !!(avatarItems !== null && avatarItems !== void 0 && avatarItems.length) && (avatarItems === null || avatarItems === void 0 ? void 0 : avatarItems.map(function (item) {
91
+ }, loggedInUser.email)))), !!(avatarItems !== null && avatarItems !== void 0 && avatarItems.length) && (avatarItems === null || avatarItems === void 0 ? void 0 : avatarItems.map(function (item, index) {
93
92
  return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
93
+ key: index // Add key prop for mapped items
94
+ ,
94
95
  onClick: function onClick() {
95
96
  handleCloseMenu();
96
97
  if (item.onClick) {
@@ -112,7 +113,7 @@ var UserAvatar = function UserAvatar(_ref) {
112
113
  height: 30
113
114
  }
114
115
  }, item.icon)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_text.default, null, item.title))));
115
- }))), (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.name) && /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
116
+ })), (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.name) && /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
116
117
  onClick: function onClick() {
117
118
  handleCloseMenu();
118
119
  if (onLogout) {
package/components/select/SimpleSelect.js CHANGED
@@ -4,16 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _reactFinalForm = require("react-final-form");
9
7
  var _material = require("@mui/material");
8
+ var _react = require("react");
10
9
  var _text = _interopRequireDefault(require("../text"));
11
- var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
12
- var _iconsMaterial = require("@mui/icons-material");
13
10
  var _excluded = ["options", "errorMessage", "error", "fullWidth", "isDisabled", "label", "isRequired", "helperText", "isSearch", "isClearOption", "loading", "isSort", "placeholder"];
14
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
12
  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); }
18
13
  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
19
14
  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -25,9 +20,6 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
25
20
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
26
21
  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; }
27
22
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
28
- // import { Form } from "react-final-form";
29
- // import { Input } from "tenjin-ui-kit";
30
-
31
23
  var SimpleSelect = function SimpleSelect(_ref) {
32
24
  var _isSort, _isSearch, _isClearOption;
33
25
  var options = _ref.options,
@@ -119,6 +111,7 @@ var SimpleSelect = function SimpleSelect(_ref) {
119
111
  value: option === null || option === void 0 ? void 0 : option.value
120
112
  };
121
113
  });
114
+ // eslint-disable-next-line react-hooks/exhaustive-deps
122
115
  }, [options, searchText, isSearch]);
123
116
  var recommendedOptions = isSearch ? displayedOptions : options;
124
117
  var typingTimer;
@@ -133,7 +126,7 @@ var SimpleSelect = function SimpleSelect(_ref) {
133
126
  }, 500);
134
127
  }
135
128
  };
136
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.FormControl, {
129
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_material.FormControl, {
137
130
  sx: {
138
131
  minWidth: 120
139
132
  },
@@ -143,26 +136,18 @@ var SimpleSelect = function SimpleSelect(_ref) {
143
136
  style: {
144
137
  margin: "0rem !important"
145
138
  }
146
- }, label && /*#__PURE__*/_react.default.createElement(_material.FormLabel, {
139
+ }, label && /*#__PURE__*/React.createElement(_material.FormLabel, {
147
140
  htmlFor: "my-input",
148
141
  sx: {
149
142
  fontSize: "0.8rem",
150
143
  fontWeight: 500,
151
144
  paddingBottom: "0.2rem"
152
145
  }
153
- }, /*#__PURE__*/_react.default.createElement(_text.default, null, label, isRequired ? /*#__PURE__*/_react.default.createElement("span", {
146
+ }, /*#__PURE__*/React.createElement(_text.default, null, label, isRequired ? /*#__PURE__*/React.createElement("span", {
154
147
  style: {
155
148
  color: "red"
156
149
  }
157
- }, " * ") : "")), /*#__PURE__*/_react.default.createElement(_material.Select, _extends({}, rest, {
158
- // displayEmpty // To display the placeholder
159
- // renderValue={(selected) => {
160
- // if (!selected) {
161
- // return <span style={{ color: "#acacac" }}>{placeholder || "Select an option"}</span>;
162
- // }
163
- // const selectedOption = options?.find((option) => option?.value === selected);
164
- // return selectedOption?.label;
165
- // }}
150
+ }, " * ") : "")), /*#__PURE__*/React.createElement(_material.Select, _extends({}, rest, {
166
151
  fullWidth: true,
167
152
  onClose: function onClose() {
168
153
  return setSearchText("");
@@ -174,7 +159,7 @@ var SimpleSelect = function SimpleSelect(_ref) {
174
159
  }
175
160
  }
176
161
  }
177
- }), isSearch && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
162
+ }), isSearch && /*#__PURE__*/React.createElement("input", {
178
163
  id: "search-box",
179
164
  type: "text",
180
165
  autoFocus: true,
@@ -192,32 +177,19 @@ var SimpleSelect = function SimpleSelect(_ref) {
192
177
  width: "100%",
193
178
  border: "1px solid #949494",
194
179
  borderRadius: "4px"
195
- // paddingLeft: "2.5rem",
196
- // background:
197
- // "white url('https://static.thenounproject.com/png/101791-200.png') no-repeat left center",
198
- // backgroundSize: "1.125rem",
199
- // position: "sticky",
200
- // top: 0,
201
- // zIndex: 9999,
202
- // height: "2.188rem",
203
- // margin: 0,
204
- // width: "100%",
205
- // border: "1px solid #949494",
206
- // borderRadius: "4px",
207
180
  },
208
-
209
181
  placeholder: "Type to search...",
210
182
  onChange: function onChange(e) {
211
183
  return setSearchText(e.target.value);
212
184
  },
213
185
  onKeyDown: handleKeyDown
214
- })), isClearOption && !loading && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
186
+ }), isClearOption && !loading && /*#__PURE__*/React.createElement(_material.MenuItem, {
215
187
  value: ""
216
- }, /*#__PURE__*/_react.default.createElement("em", {
188
+ }, /*#__PURE__*/React.createElement("em", {
217
189
  style: {
218
190
  color: "#888"
219
191
  }
220
- }, "Clear the option")), loading ? /*#__PURE__*/_react.default.createElement(_text.default, {
192
+ }, "Clear the option")), loading ? /*#__PURE__*/React.createElement(_text.default, {
221
193
  variant: "span",
222
194
  color: "secondary",
223
195
  sx: {
@@ -225,14 +197,14 @@ var SimpleSelect = function SimpleSelect(_ref) {
225
197
  display: "flex",
226
198
  padding: "0.5rem 0rem 0rem 1rem"
227
199
  }
228
- }, "Fetching Options...") : noDataAvailable ? /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
200
+ }, "Fetching Options...") : noDataAvailable ? /*#__PURE__*/React.createElement(_material.MenuItem, {
229
201
  disabled: true
230
202
  }, "No Data Available") : recommendedOptions === null || recommendedOptions === void 0 ? void 0 : recommendedOptions.map(function (option) {
231
- return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
203
+ return /*#__PURE__*/React.createElement(_material.MenuItem, {
232
204
  key: option.value,
233
205
  value: option.value
234
206
  }, option.label);
235
- })), error && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, errorMessage), helperText && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, helperText)));
207
+ })), error && /*#__PURE__*/React.createElement(_material.FormHelperText, null, errorMessage), helperText && /*#__PURE__*/React.createElement(_material.FormHelperText, null, helperText)));
236
208
  };
237
209
  var _default = SimpleSelect;
238
210
  exports.default = _default;
package/components/simpleSelect/index.js CHANGED
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _reactFinalForm = require("react-final-form");
9
7
  var _material = require("@mui/material");
10
8
  var _text = _interopRequireDefault(require("../text"));
11
9
  var _excluded = ["options", "errorMessage", "error", "fullWidth", "isDisabled", "label", "isRequired"];
@@ -13,9 +11,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
13
11
  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); }
14
12
  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; }
15
13
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
16
- // import { Form } from "react-final-form";
17
- // import { Input } from "tenjin-ui-kit";
18
-
19
14
  var SimpleSelect = function SimpleSelect(_ref) {
20
15
  var options = _ref.options,
21
16
  errorMessage = _ref.errorMessage,
@@ -26,7 +21,7 @@ var SimpleSelect = function SimpleSelect(_ref) {
26
21
  isRequired = _ref.isRequired,
27
22
  rest = _objectWithoutProperties(_ref, _excluded);
28
23
  console.log(errorMessage, error, "error");
29
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.FormControl, {
24
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_material.FormControl, {
30
25
  sx: {
31
26
  m: 1,
32
27
  minWidth: 120
@@ -37,86 +32,25 @@ var SimpleSelect = function SimpleSelect(_ref) {
37
32
  style: {
38
33
  margin: "0rem !important"
39
34
  }
40
- }, label && /*#__PURE__*/_react.default.createElement(_material.FormLabel, {
35
+ }, label && /*#__PURE__*/React.createElement(_material.FormLabel, {
41
36
  htmlFor: "my-input",
42
37
  sx: {
43
38
  fontSize: "0.8rem",
44
39
  fontWeight: 500,
45
40
  paddingBottom: "0.2rem"
46
41
  }
47
- }, /*#__PURE__*/_react.default.createElement(_text.default, null, label, isRequired ? /*#__PURE__*/_react.default.createElement("span", {
42
+ }, /*#__PURE__*/React.createElement(_text.default, null, label, isRequired ? /*#__PURE__*/React.createElement("span", {
48
43
  style: {
49
44
  color: "red"
50
45
  }
51
- }, " * ") : "")), /*#__PURE__*/_react.default.createElement(_material.Select, _extends({}, rest, {
46
+ }, " * ") : "")), /*#__PURE__*/React.createElement(_material.Select, _extends({}, rest, {
52
47
  fullWidth: true
53
48
  }), options.map(function (option) {
54
- return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
49
+ return /*#__PURE__*/React.createElement(_material.MenuItem, {
55
50
  key: option.value,
56
51
  value: option.value
57
52
  }, option.label);
58
- })), error && /*#__PURE__*/_react.default.createElement(_material.FormHelperText, null, errorMessage)));
53
+ })), error && /*#__PURE__*/React.createElement(_material.FormHelperText, null, errorMessage)));
59
54
  };
60
- var _default = SimpleSelect; // const options = [
61
- // { value: "option1", label: "Option 1" },
62
- // { value: "option2", label: "Option 2" },
63
- // // ... other options
64
- // ];
65
- // export const MyForm = () => {
66
- // const validateForm = (values, mandatoryFields) => {
67
- // let errors = {};
68
- // if (mandatoryFields) {
69
- // mandatoryFields.forEach((field) => {
70
- // if (!values[field]) errors[field] = "Required";
71
- // });
72
- // }
73
- // return errors;
74
- // };
75
- // const validate = (values) => {
76
- // const errors = validateForm(values, ["text", "select"]);
77
- // return errors;
78
- // };
79
- // const Submit = (values) => {
80
- // console.log(values, "values");
81
- // };
82
- // return (
83
- // <Form onSubmit={Submit} validate={validate}>
84
- // {({ handleSubmit }) => (
85
- // <form onSubmit={handleSubmit}>
86
- // {/* Other form fields */}
87
- // <Field
88
- // name="text"
89
- // render={({ input, meta }) => (
90
- // <Input
91
- // autoFocus="autofocus"
92
- // isRequired
93
- // {...input}
94
- // // isDisabled={props.type === 'edit' && true}
95
- // size="normal"
96
- // placeholder="Test Cycle Name"
97
- // fullWidth
98
- // label="Name"
99
- // error={meta.touched && meta.error ? true : false}
100
- // errorMessage={meta.touched && meta.error ? meta.error : null}
101
- // />
102
- // )}
103
- // />
104
- // <Field
105
- // name="select"
106
- // render={({ input, meta }) => (
107
- // <MUISelectField
108
- // {...input}
109
- // // isDisabled={props.type === 'edit' && true}
110
- // options={options}
111
- // error={meta.touched && meta.error}
112
- // errorMessage={meta.touched && meta.error ? meta.error : null}
113
- // />
114
- // )}
115
- // />
116
- // <button type="submit">Submit</button>
117
- // </form>
118
- // )}
119
- // </Form>
120
- // );
121
- // };
55
+ var _default = SimpleSelect;
122
56
  exports.default = _default;
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "tenjin-ui-kit",
3
- "version": "0.1.0-dev.2",
3
+ "version": "0.1.0-dev.4",
4
4
  "repository": {
5
- "url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
5
+ "url": "git+https://gitlab.com/yethi/react/tenjin-ui-kit.git"
6
6
  },
7
7
  "dependencies": {
8
8
  "@floating-ui/dom": "^1.2.1",
package/README.md DELETED
@@ -1,13 +0,0 @@
1
- # Tenjin UI Kit
2
-
3
- The Tenjin UI kit ships a set of pre-built components that can be used while building user interfaces for Tenjin.
4
-
5
- ## Installation
6
-
7
- In the project directory, you can run:
8
-
9
- npm install tenjin-ui-kit
10
-
11
- ## Usage
12
-
13
- The [Tenjin UI Kit](https://tenjin-ui-kit.netlify.app) storybook gives clear documentation on how to use the Tenjin UI Kit.