intelicoreact 0.0.31 → 0.0.41

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 (37) hide show
  1. package/dist/Atomic/FormElements/Calendar/Calendar.js +134 -0
  2. package/dist/Atomic/FormElements/Calendar/Calendar.scss +543 -0
  3. package/dist/Atomic/FormElements/Calendar/Calendar.stories.js +75 -0
  4. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +1 -1
  5. package/dist/Atomic/FormElements/Input/Input.js +91 -99
  6. package/dist/Atomic/FormElements/Input/Input.scss +16 -5
  7. package/dist/Atomic/FormElements/Input/Input.stories.js +32 -25
  8. package/dist/Atomic/UI/Accordion/Accordion.stories.js +1 -1
  9. package/dist/Atomic/UI/AdvancedTag/AdvancedTags.stories.js +1 -1
  10. package/dist/Atomic/UI/Alert/Alert.stories.js +1 -1
  11. package/dist/Atomic/UI/Button/Button.js +1 -12
  12. package/dist/Atomic/UI/Button/Button.stories.js +5 -19
  13. package/dist/Atomic/UI/Hint/Hint.stories.js +1 -1
  14. package/dist/Atomic/UI/Price/Price.js +32 -0
  15. package/dist/Atomic/UI/Price/Price.stories.js +42 -0
  16. package/dist/Atomic/UI/Status/Status.stories.js +1 -1
  17. package/dist/Functions/useClickOutside.js +25 -0
  18. package/dist/scss/main.scss +2 -2
  19. package/package.json +7 -5
  20. package/src/Atomic/FormElements/Calendar/Calendar.js +106 -0
  21. package/src/Atomic/FormElements/Calendar/Calendar.scss +543 -0
  22. package/src/Atomic/FormElements/Calendar/Calendar.stories.js +38 -0
  23. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +1 -1
  24. package/src/Atomic/FormElements/Input/Input.js +73 -72
  25. package/src/Atomic/FormElements/Input/Input.scss +16 -5
  26. package/src/Atomic/FormElements/Input/Input.stories.js +23 -27
  27. package/src/Atomic/UI/Accordion/Accordion.stories.js +1 -1
  28. package/src/Atomic/UI/AdvancedTag/AdvancedTags.stories.js +1 -1
  29. package/src/Atomic/UI/Alert/Alert.stories.js +1 -1
  30. package/src/Atomic/UI/Button/Button.js +1 -3
  31. package/src/Atomic/UI/Button/Button.stories.js +4 -19
  32. package/src/Atomic/UI/Hint/Hint.stories.js +1 -1
  33. package/src/Atomic/UI/Price/Price.js +19 -0
  34. package/src/Atomic/UI/Price/Price.stories.js +30 -0
  35. package/src/Atomic/UI/Status/Status.stories.js +1 -1
  36. package/src/Functions/useClickOutside.js +15 -0
  37. package/src/scss/main.scss +2 -2
@@ -0,0 +1,75 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.CalendarSimple = exports.default = void 0;
11
+
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _yup = require("yup");
17
+
18
+ var _useClickOutside = require("../../../Functions/useClickOutside");
19
+
20
+ var _Calendar = _interopRequireDefault(require("./Calendar"));
21
+
22
+ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
23
+
24
+ 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); }
25
+
26
+ 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; }
27
+
28
+ global.lng = 'en';
29
+ var _default = {
30
+ title: 'Form Elements/Calendar',
31
+ component: _Calendar.default
32
+ };
33
+ exports.default = _default;
34
+
35
+ var Template = function Template(args) {
36
+ var _useState = (0, _react.useState)(args.date),
37
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
38
+ date = _useState2[0],
39
+ _setDate = _useState2[1];
40
+
41
+ var _useState3 = (0, _react.useState)(false),
42
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
43
+ isOpened = _useState4[0],
44
+ setIsOpened = _useState4[1];
45
+
46
+ var calendarRef = (0, _react.useRef)(null);
47
+ (0, _useClickOutside.useClickOutside)(calendarRef, function () {
48
+ return setIsOpened(false);
49
+ });
50
+ return /*#__PURE__*/_react.default.createElement("div", {
51
+ className: "calendar-container",
52
+ ref: calendarRef
53
+ }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
54
+ mask: "99/99/9999",
55
+ value: date,
56
+ onChange: function onChange(e) {
57
+ return _setDate(e.target.value);
58
+ },
59
+ className: "calendar-dropdown",
60
+ onFocus: function onFocus() {
61
+ return setIsOpened(!isOpened);
62
+ }
63
+ }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
64
+ date: date,
65
+ setDate: function setDate(newDate) {
66
+ return _setDate(newDate);
67
+ }
68
+ }) : null);
69
+ };
70
+
71
+ var CalendarSimple = Template.bind({});
72
+ exports.CalendarSimple = CalendarSimple;
73
+ CalendarSimple.args = {
74
+ date: '10/11/2021'
75
+ };
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
23
23
 
24
24
  global.lng = 'en';
25
25
  var _default = {
26
- title: 'CheckboxInput',
26
+ title: 'Form Elements/CheckboxInput',
27
27
  component: _CheckboxInput.default
28
28
  };
29
29
  exports.default = _default;
@@ -9,13 +9,11 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports.default = void 0;
11
11
 
12
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
13
 
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
14
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
17
15
 
18
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
17
 
20
18
  var _react = _interopRequireWildcard(require("react"));
21
19
 
@@ -23,40 +21,36 @@ var _classnames = _interopRequireDefault(require("classnames"));
23
21
 
24
22
  var _reactFeather = require("react-feather");
25
23
 
26
- var _Label = _interopRequireDefault(require("../Label/Label"));
24
+ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
27
25
 
28
26
  require("./Input.scss");
29
27
 
30
- var _excluded = ["error", "onChange", "disabled", "withDelete", "isNumeric", "min", "max", "value", "placeholder", "hint", "label", "hintSide", "className", "isLabelBold", "type", "onBlur", "icon", "isRequired"];
31
-
32
28
  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); }
33
29
 
34
30
  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; }
35
31
 
36
32
  var Input = function Input(_ref) {
37
- var error = _ref.error,
38
- onChange = _ref.onChange,
33
+ var onChange = _ref.onChange,
39
34
  disabled = _ref.disabled,
40
35
  withDelete = _ref.withDelete,
41
36
  isNumeric = _ref.isNumeric,
42
- min = _ref.min,
37
+ _ref$numStep = _ref.numStep,
38
+ numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
39
+ _ref$min = _ref.min,
40
+ min = _ref$min === void 0 ? 0 : _ref$min,
43
41
  max = _ref.max,
44
- _ref$value = _ref.value,
45
- value = _ref$value === void 0 ? min : _ref$value,
42
+ value = _ref.value,
46
43
  placeholder = _ref.placeholder,
47
- hint = _ref.hint,
48
- label = _ref.label,
49
- hintSide = _ref.hintSide,
50
44
  className = _ref.className,
51
- isLabelBold = _ref.isLabelBold,
52
45
  _ref$type = _ref.type,
53
46
  type = _ref$type === void 0 ? 'text' : _ref$type,
54
- _ref$onBlur = _ref.onBlur,
55
- _onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
56
- icon = _ref.icon,
57
- isRequired = _ref.isRequired,
58
- props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
47
+ onBlur = _ref.onBlur,
48
+ onFocus = _ref.onFocus,
49
+ onKeyUp = _ref.onKeyUp,
50
+ mask = _ref.mask,
51
+ error = _ref.error;
59
52
 
53
+ // STATES
60
54
  var _useState = (0, _react.useState)(false),
61
55
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
62
56
  isFocused = _useState2[0],
@@ -64,98 +58,96 @@ var Input = function Input(_ref) {
64
58
 
65
59
  var _useState3 = (0, _react.useState)(false),
66
60
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
67
- onInputHover = _useState4[0],
68
- setOnInputHover = _useState4[1];
61
+ isEditing = _useState4[0],
62
+ setEditing = _useState4[1];
69
63
 
70
- var _useState5 = (0, _react.useState)(false),
71
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
72
- isEditing = _useState6[0],
73
- setEditing = _useState6[1];
64
+ var inputRef = (0, _react.useRef)(null); // HANDLES
74
65
 
75
- var inputRef = (0, _react.useRef)(null);
66
+ var handle = {
67
+ change: function change(event) {
68
+ var inputValue = event.target.value;
76
69
 
77
- var changeHandler = function changeHandler(inputValue) {
78
- if (isNumeric || type === 'number' && inputValue !== '') {
79
- var totalValue = Number(+inputValue);
80
- if (totalValue >= (min !== null && min !== void 0 ? min : -Infinity) && totalValue <= (max !== null && max !== void 0 ? max : Infinity)) onChange(totalValue);
81
- return;
82
- }
70
+ if (isNumeric || type === 'number' && inputValue !== '') {
71
+ inputValue = parseFloat(inputValue) || '';
83
72
 
84
- onChange(inputValue);
85
- };
86
-
87
- var toggleEditing = function toggleEditing() {
88
- setEditing(!isEditing);
89
- };
73
+ if (min && +min > inputValue) {
74
+ inputValue = min;
75
+ } else if (max && +max < inputValue) inputValue = max;
76
+ }
90
77
 
91
- (0, _react.useEffect)(function () {
92
- if (isEditing) {
93
- inputRef.current.focus();
94
- }
95
- }, [isEditing, isFocused]);
96
- return /*#__PURE__*/_react.default.createElement("div", {
97
- className: (0, _classnames.default)('input-classic', className)
98
- }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
99
- className: "input-classic-label",
100
- isBold: isLabelBold,
101
- label: label,
102
- hint: hint,
103
- hintSide: hintSide,
104
- isRequired: isRequired
105
- }), /*#__PURE__*/_react.default.createElement("div", {
106
- onMouseEnter: function onMouseEnter() {
107
- return setOnInputHover(true);
78
+ onChange(inputValue.toString());
108
79
  },
109
- onMouseLeave: function onMouseLeave() {
110
- return setOnInputHover(false);
80
+ toggleEdit: function toggleEdit() {
81
+ setEditing(!isEditing);
82
+ onChange('');
111
83
  },
112
- className: (0, _classnames.default)("input-classic__wrap", (0, _defineProperty2.default)({}, "input-classic__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input-classic__wrap_error", error), (0, _defineProperty2.default)({}, "input-classic__wrap_disabled", disabled))
113
- }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
114
- ref: inputRef,
115
- className: "input-classic__input",
116
- type: isNumeric ? 'number' : type,
117
- onChange: function onChange(e) {
118
- return changeHandler(e.target.value);
84
+ focus: function focus() {
85
+ setIsFocused(true);
86
+ if (onFocus) onFocus();
119
87
  },
120
- value: value || '',
121
- disabled: disabled,
122
- onBlur: function onBlur() {
88
+ blur: function blur() {
123
89
  setIsFocused(false);
124
90
  setEditing(false);
125
-
126
- _onBlur();
91
+ if (onBlur) onBlur();
127
92
  },
128
- onFocus: function onFocus() {
129
- return setIsFocused(true);
130
- },
131
- placeholder: placeholder
132
- }, props)), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
133
- className: "input-classic__nums"
134
- }, /*#__PURE__*/_react.default.createElement("button", {
135
- onClick: function onClick() {
136
- return changeHandler(value - 1);
137
- },
138
- className: (0, _classnames.default)("input-classic__num-btn", {
139
- disabled: value === min
140
- })
141
- }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
142
- onClick: function onClick() {
143
- return changeHandler(value + 1);
144
- },
145
- className: (0, _classnames.default)("input-classic__num-btn", {
146
- disabled: value === max
147
- })
148
- }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))), withDelete && onInputHover && !isNumeric && /*#__PURE__*/_react.default.createElement("button", {
93
+ keyUp: function keyUp(e) {
94
+ return onKeyUp ? onKeyUp(e.keyCode) : null;
95
+ }
96
+ };
97
+ (0, _react.useEffect)(function () {
98
+ if (isEditing) inputRef.current.focus();
99
+ }, [isEditing, isFocused]);
100
+ var uniProps = {
101
+ className: "input-classic ".concat(className),
102
+ placeholder: placeholder,
103
+ value: value || '',
104
+ disabled: disabled,
105
+ onChange: handle.change,
106
+ onFocus: handle.focus,
107
+ onBlur: handle.blur,
108
+ onKeyUp: handle.keyUp,
109
+ min: min,
110
+ max: max
111
+ };
112
+
113
+ function renderInput() {
114
+ if (mask) {
115
+ return /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, uniProps, {
116
+ ref: inputRef,
117
+ mask: mask
118
+ }));
119
+ }
120
+
121
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
122
+ ref: inputRef,
123
+ type: isNumeric ? 'number' : type
124
+ })), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
125
+ className: "input-classic__nums"
126
+ }, /*#__PURE__*/_react.default.createElement("button", {
127
+ onClick: function onClick() {
128
+ return handle.change(value - numStep);
129
+ },
130
+ className: (0, _classnames.default)("input-classic__num-btn", {
131
+ disabled: value <= min
132
+ })
133
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
134
+ onClick: function onClick() {
135
+ return handle.change(+value + +numStep);
136
+ },
137
+ className: (0, _classnames.default)("input-classic__num-btn", {
138
+ disabled: value >= max
139
+ })
140
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
141
+ }
142
+
143
+ return /*#__PURE__*/_react.default.createElement("div", {
144
+ className: (0, _classnames.default)("input-classic__wrap", (0, _defineProperty2.default)({}, "input-classic__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input-classic__wrap_error", error), (0, _defineProperty2.default)({}, "input-classic__wrap_disabled", disabled))
145
+ }, renderInput(), withDelete && !isNumeric && /*#__PURE__*/_react.default.createElement("span", {
149
146
  className: (0, _classnames.default)("input-classic__close", {
150
147
  hidden: !value
151
148
  }),
152
- onClick: function onClick() {
153
- toggleEditing();
154
- onChange('');
155
- }
156
- }), icon !== null && icon !== void 0 ? icon : null), error && /*#__PURE__*/_react.default.createElement("span", {
157
- className: "input-classic__error"
158
- }, error));
149
+ onClick: handle.toggleEdit
150
+ }));
159
151
  };
160
152
 
161
153
  var _default = Input;
@@ -1,9 +1,12 @@
1
1
  .input-classic {
2
2
  position: relative;
3
3
  word-break: break-all;
4
-
5
- input::-webkit-outer-spin-button,
6
- input::-webkit-inner-spin-button {
4
+ border: none;
5
+ background: none;
6
+ padding: 0 10px;
7
+ width: 100%;
8
+ &::-webkit-outer-spin-button,
9
+ &::-webkit-inner-spin-button {
7
10
  -webkit-appearance: none;
8
11
  }
9
12
 
@@ -77,7 +80,8 @@
77
80
  background: none;
78
81
  cursor: pointer;
79
82
  margin-right: 4px;
80
-
83
+ visibility: hidden;
84
+ pointer-events: none;
81
85
  &:hover {
82
86
  opacity: 1;
83
87
  }
@@ -121,7 +125,9 @@
121
125
  background: none;
122
126
  font-size: 20px;
123
127
  user-select: none;
124
-
128
+ &.disabled {
129
+ opacity: 0.3;
130
+ }
125
131
  svg {
126
132
  margin-right: 0;
127
133
  }
@@ -131,3 +137,8 @@
131
137
  margin-bottom: 5px;
132
138
  }
133
139
  }
140
+
141
+ .input-classic__wrap:hover .input-classic__close {
142
+ visibility: visible;
143
+ pointer-events: all;
144
+ }
@@ -23,49 +23,57 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
23
23
 
24
24
  global.lng = 'en';
25
25
  var _default = {
26
- title: 'Input',
26
+ title: 'Form Elements/Input',
27
27
  component: _Input.default,
28
28
  argTypes: {
29
- hintSide: {
30
- description: 'string: ["right", "bottom", "top", "left"]',
31
- control: {
32
- type: 'select',
33
- options: ['right', 'bottom', 'top', 'left']
34
- }
35
- },
36
- hint: {
37
- description: 'string'
38
- },
39
29
  disabled: {
40
30
  description: 'boolean'
41
31
  },
42
32
  error: {
43
- description: 'text'
33
+ description: 'text - coloring input if is errored'
44
34
  },
45
35
  withDelete: {
46
- description: 'boolean'
36
+ description: 'boolean - add clear-cross by hover'
47
37
  },
48
38
  isNumeric: {
49
- description: 'boolean'
39
+ description: 'boolean - add plus/minus buttons, force input to numeric type'
40
+ },
41
+ numStep: {
42
+ description: 'number/text - plus/minus buttons factor (default: 1)'
50
43
  },
51
44
  min: {
52
- description: 'number'
45
+ description: 'number/text - minimal number for numeric input'
53
46
  },
54
47
  max: {
55
- description: 'number'
48
+ description: 'number/text - maximal number for numeric input'
56
49
  },
57
50
  placeholder: {
58
51
  description: 'text'
59
52
  },
60
- label: {
61
- description: 'text'
62
- },
63
53
  type: {
64
- description: 'string: any input type',
54
+ description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
65
55
  control: {
66
56
  type: 'select',
67
- options: ['text', 'number']
57
+ options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
68
58
  }
59
+ },
60
+ value: {
61
+ description: '(* - required prop)'
62
+ },
63
+ className: {
64
+ description: 'string'
65
+ },
66
+ mask: {
67
+ description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
68
+ },
69
+ onBlur: {
70
+ description: 'custom callback on blur'
71
+ },
72
+ onFocus: {
73
+ description: 'custom callback on focus'
74
+ },
75
+ onKeyUp: {
76
+ description: 'custom callback on keyup, returns event keyCode'
69
77
  }
70
78
  }
71
79
  };
@@ -91,10 +99,9 @@ InputTemplate.args = {
91
99
  error: '',
92
100
  withDelete: true,
93
101
  isNumeric: false,
102
+ numStep: 1,
94
103
  min: '0',
95
- max: 5,
104
+ max: '5',
96
105
  placeholder: 'Placeholder',
97
- label: 'label',
98
- hint: 'hint',
99
- hintSide: 'bottom'
106
+ mask: ''
100
107
  };
@@ -13,7 +13,7 @@ var _Accordion = _interopRequireDefault(require("./Accordion"));
13
13
 
14
14
  global.lng = 'en';
15
15
  var _default = {
16
- title: 'Accordion',
16
+ title: 'UI/Accordion',
17
17
  component: _Accordion.default
18
18
  };
19
19
  exports.default = _default;
@@ -13,7 +13,7 @@ var _AdvancedTags = _interopRequireDefault(require("./AdvancedTags"));
13
13
 
14
14
  global.lng = 'en';
15
15
  var _default = {
16
- title: 'AdvancedTags',
16
+ title: 'UI/AdvancedTags',
17
17
  component: _AdvancedTags.default
18
18
  };
19
19
  exports.default = _default;
@@ -13,7 +13,7 @@ var _Alert = _interopRequireDefault(require("./Alert"));
13
13
 
14
14
  global.lng = 'en';
15
15
  var _default = {
16
- title: 'Alert',
16
+ title: 'UI/Alert',
17
17
  component: _Alert.default,
18
18
  argTypes: {
19
19
  variant: {
@@ -2,8 +2,6 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
@@ -15,14 +13,8 @@ var _react = _interopRequireDefault(require("react"));
15
13
 
16
14
  var _classnames = _interopRequireDefault(require("classnames"));
17
15
 
18
- var Icons = _interopRequireWildcard(require("react-feather"));
19
-
20
16
  require("./Button.scss");
21
17
 
22
- 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); }
23
-
24
- 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; }
25
-
26
18
  var Button = function Button(_ref) {
27
19
  var label = _ref.label,
28
20
  _ref$variant = _ref.variant,
@@ -33,15 +25,12 @@ var Button = function Button(_ref) {
33
25
  className = _ref.className,
34
26
  children = _ref.children,
35
27
  style = _ref.style;
36
- var Icon = Icons[icon];
37
28
  return /*#__PURE__*/_react.default.createElement("button", {
38
29
  style: style,
39
30
  className: (0, _classnames.default)(className, 'button', (0, _defineProperty2.default)({}, "button_".concat(variant), variant)),
40
31
  onClick: onClick,
41
32
  disabled: disabled
42
- }, icon && /*#__PURE__*/_react.default.createElement(Icon, {
43
- className: "button__icon"
44
- }), label && /*#__PURE__*/_react.default.createElement("div", {
33
+ }, icon, label && /*#__PURE__*/_react.default.createElement("div", {
45
34
  className: "button__text"
46
35
  }, label), !label && children ? children : null);
47
36
  };
@@ -9,11 +9,13 @@ exports.ButtonTemplate = exports.default = void 0;
9
9
 
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
+ var _reactFeather = require("react-feather");
13
+
12
14
  var _Button = _interopRequireDefault(require("./Button"));
13
15
 
14
16
  global.lng = 'en';
15
17
  var _default = {
16
- title: 'Button',
18
+ title: 'UI/Button',
17
19
  component: _Button.default,
18
20
  argTypes: {
19
21
  variant: {
@@ -39,22 +41,6 @@ var _default = {
39
41
  options: ['Check', 'Edit3', 'Plus', 'Tool', 'UploadCloud', 'X', 'ArrowLeft']
40
42
  }
41
43
  }
42
- },
43
- label: {
44
- description: 'string'
45
- },
46
- disabled: {
47
- description: 'boolean'
48
- },
49
- onClick: {
50
- description: 'function'
51
- },
52
- icon: {
53
- description: 'svg icon code',
54
- control: {
55
- type: 'select',
56
- options: ['Check', 'Edit3', 'Plus', 'Tool', 'UploadCloud', 'X']
57
- }
58
44
  }
59
45
  };
60
46
  exports.default = _default;
@@ -70,6 +56,6 @@ ButtonTemplate.args = {
70
56
  onClick: function onClick() {
71
57
  return null;
72
58
  },
73
- text: 'Button',
74
- icon: 'Check'
59
+ label: 'Button',
60
+ icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)
75
61
  };
@@ -13,7 +13,7 @@ var _Hint = _interopRequireDefault(require("./Hint"));
13
13
 
14
14
  global.lng = 'en';
15
15
  var _default = {
16
- title: 'Hint',
16
+ title: 'UI/Hint',
17
17
  component: _Hint.default,
18
18
  argTypes: {
19
19
  side: {
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var Price = function Price(_ref) {
13
+ var value = _ref.value,
14
+ _ref$unit = _ref.unit,
15
+ unit = _ref$unit === void 0 ? '$' : _ref$unit,
16
+ unitAfter = _ref.unitAfter,
17
+ className = _ref.className;
18
+ var formatted;
19
+
20
+ if (value.length <= 3) {
21
+ formatted = parseFloat(value).toFixed(2);
22
+ } else {
23
+ formatted = Number(value.toString().replace(/[+*?$^(,)]/g, '')).toLocaleString('en-US');
24
+ }
25
+
26
+ return /*#__PURE__*/_react.default.createElement("div", {
27
+ className: "price ".concat(className)
28
+ }, !unitAfter && unit, formatted, unitAfter && unit);
29
+ };
30
+
31
+ var _default = Price;
32
+ exports.default = _default;