@unbxd-ui/unbxd-react-components 0.2.145-beta.3 → 0.2.145-beta.5

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 (32) hide show
  1. package/README.md +1 -1
  2. package/components/Accordian/Accordian.stories.js +140 -116
  3. package/components/Button/Button.stories.js +166 -59
  4. package/components/DataLoader/DataLoader.stories.js +176 -53
  5. package/components/Form/SearchableDropdown.js +2 -0
  6. package/components/Form/stories/Checkbox.stories.js +131 -38
  7. package/components/Form/stories/Dropdown.stories.js +321 -91
  8. package/components/Form/stories/FileUploader.stories.js +177 -18
  9. package/components/Form/stories/Input.stories.js +112 -0
  10. package/components/Form/stories/RangeSlider.stories.js +160 -62
  11. package/components/Form/stories/SearchableDropdown.stories.js +189 -0
  12. package/components/Form/stories/ServerPaginatedDropdown.stories.js +370 -0
  13. package/components/Form/stories/Textarea.stories.js +112 -32
  14. package/components/Form/stories/Toggle.stories.js +191 -13
  15. package/components/InlineModal/InlineModal.stories.js +238 -43
  16. package/components/List/List.stories.js +238 -0
  17. package/components/Modal/Modal.stories.js +274 -36
  18. package/components/NotificationComponent/NotificationComponent.stories.js +169 -18
  19. package/components/ProgressBar/ProgressBar.css +0 -0
  20. package/components/ProgressBar/ProgressBar.stories.js +202 -9
  21. package/components/TabsComponent/TabsComponent.stories.js +290 -52
  22. package/components/Tooltip/Tooltip.stories.js +208 -14
  23. package/package.json +24 -18
  24. package/components/Button/DropdownButton.stories.js +0 -48
  25. package/components/Form/stories/DragDropFileUploader.stories.js +0 -25
  26. package/components/Form/stories/FormDefault.stories.js +0 -114
  27. package/components/Form/stories/RadioList.stories.js +0 -52
  28. package/components/Form/stories/TextInput.stories.js +0 -75
  29. package/components/Form/stories/form.stories.js +0 -232
  30. package/components/List/list.stories.js +0 -35
  31. package/components/Table/Table.stories.js +0 -197
  32. package/core/dataLoader.stories.js +0 -118
@@ -1,48 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = exports.DefaultDropdownButton = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _DropdownButton = _interopRequireDefault(require("./DropdownButton"));
10
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
11
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
12
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
13
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
14
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
15
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
16
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
17
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
18
- var DROPDOWN_OPTIONS = [{
19
- id: "PrintApple",
20
- name: "Print Apple",
21
- message: "Apple"
22
- }, {
23
- id: "PrintMango",
24
- name: "Print Mango",
25
- message: "Mango"
26
- }, {
27
- id: "PrintGrapes",
28
- name: "Print Grapes",
29
- message: "Grapes"
30
- }];
31
- var DefaultDropdownButton = exports.DefaultDropdownButton = function DefaultDropdownButton() {
32
- var _useState = (0, _react.useState)(),
33
- _useState2 = _slicedToArray(_useState, 2),
34
- message = _useState2[0],
35
- setMessage = _useState2[1];
36
- var printMessage = function printMessage(data) {
37
- var message = data.message;
38
- setMessage(message);
39
- };
40
- return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_DropdownButton["default"], {
41
- label: "Actions",
42
- options: DROPDOWN_OPTIONS,
43
- onClick: printMessage
44
- }), /*#__PURE__*/_react["default"].createElement("div", null, "Message is ".concat(message)));
45
- };
46
- var _default = exports["default"] = {
47
- title: "Dropdown Button"
48
- };
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = exports.SimpleUsage = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _DragDropFileUploader = _interopRequireDefault(require("../DragDropFileUploader"));
9
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
10
- var _default = exports["default"] = {
11
- title: "DragDropFileUploader"
12
- };
13
- var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
14
- var onFileChange = function onFileChange() {
15
- var files = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
16
- console.log("SELECTED FILES");
17
- for (var i = 0; i < files.length; i++) {
18
- console.log(files[i].name);
19
- }
20
- };
21
- return /*#__PURE__*/_react["default"].createElement(_DragDropFileUploader["default"], {
22
- onChange: onFileChange,
23
- appearance: "block"
24
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Drag & drop files into this area"));
25
- };
@@ -1,114 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = exports.FormExample = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _Form = _interopRequireDefault(require("../Form"));
10
- var _Dropdown = _interopRequireDefault(require("../Dropdown"));
11
- var _Input = _interopRequireDefault(require("../Input"));
12
- var _Textarea = _interopRequireDefault(require("../Textarea"));
13
- var _RadioList = _interopRequireDefault(require("../RadioList"));
14
- var _Checkbox = _interopRequireDefault(require("../Checkbox"));
15
- var _Toggle = _interopRequireDefault(require("../Toggle"));
16
- var _RangeSlider = _interopRequireDefault(require("../RangeSlider"));
17
- var _Button = _interopRequireWildcard(require("../../Button"));
18
- var _Constants = require("../../../../public/Constants");
19
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
20
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
21
- var formValues = {
22
- email: "anuhosad@gmail.com",
23
- description: "This is some temporary description",
24
- yesNoOption: "NO",
25
- fruits: ["pineapple"],
26
- fruit: _Constants.FRUITS_LIST.find(function (obj) {
27
- return obj.id === 4;
28
- }),
29
- isActive: true,
30
- price: 75
31
- };
32
- var FormExample = exports.FormExample = function FormExample() {
33
- var onSubmit = function onSubmit(formData) {
34
- var data = formData.data;
35
- console.log("On submit ----> ", data);
36
- };
37
- var onChange = function onChange(formData) {
38
- var data = formData.data;
39
- console.log("On change ----> ", data);
40
- };
41
- return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
42
- onSubmit: onSubmit,
43
- onChange: onChange
44
- }, /*#__PURE__*/_react["default"].createElement(_Input["default"], {
45
- defaultValue: formValues["email"],
46
- type: "text",
47
- name: "email",
48
- label: "Name",
49
- placeholder: "Enter your email",
50
- appearance: "block"
51
- }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
52
- defaultValue: formValues["description"],
53
- name: "description",
54
- label: "Description",
55
- placeholder: "Enter your description",
56
- appearance: "block"
57
- }), /*#__PURE__*/_react["default"].createElement(_RadioList["default"], {
58
- defaultValue: formValues["yesNoOption"],
59
- name: "yesNoOption",
60
- label: "Are you sure?",
61
- options: [{
62
- id: "YES",
63
- name: "Yes"
64
- }, {
65
- id: "NO",
66
- name: "No"
67
- }],
68
- appearance: "block"
69
- }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
70
- name: "orange",
71
- label: "Orange",
72
- defaultValue: formValues["fruits"].includes("orange")
73
- }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
74
- name: "pineapple",
75
- label: "Pineapple",
76
- defaultValue: formValues["fruits"].includes("pineapple")
77
- }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
78
- name: "grapes",
79
- label: "Grapes",
80
- defaultValue: formValues["fruits"].includes("grapes")
81
- }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
82
- name: "fruit",
83
- defaultValue: formValues["fruit"],
84
- label: "Select fruit",
85
- options: _Constants.FRUITS_LIST,
86
- appearance: "block"
87
- }), /*#__PURE__*/_react["default"].createElement(_Toggle["default"], {
88
- name: "isActive",
89
- defaultValue: formValues["isActive"],
90
- label: "Is Active?",
91
- appearance: "block"
92
- }), /*#__PURE__*/_react["default"].createElement(_RangeSlider["default"], {
93
- defaultValue: formValues["price"],
94
- name: "price",
95
- label: "Select price range",
96
- min: "10",
97
- max: "100",
98
- appearance: "block"
99
- }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
100
- appearance: _Button.ButtonAppearance.PRIMARY,
101
- className: "full-width-btn"
102
- }, "Submit"));
103
- };
104
- FormExample.story = {
105
- name: "Form"
106
- };
107
- var _default = exports["default"] = {
108
- title: "Form|Form",
109
- parameters: {
110
- info: {
111
- propTables: [_Form["default"]]
112
- }
113
- }
114
- };
@@ -1,52 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = exports._RadioList = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _Form = _interopRequireDefault(require("../Form"));
10
- var _RadioList2 = _interopRequireDefault(require("../RadioList"));
11
- var _Button = _interopRequireWildcard(require("../../Button"));
12
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
13
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
14
- var _RadioList = exports._RadioList = function _RadioList() {
15
- var onSubmit = function onSubmit(formData) {
16
- var data = formData.data;
17
- console.log("Submitted data: ", data);
18
- };
19
- return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
20
- onSubmit: onSubmit
21
- }, /*#__PURE__*/_react["default"].createElement(_RadioList2["default"], {
22
- name: "yesNoOption",
23
- label: "Are you sure?",
24
- options: [{
25
- id: "YES",
26
- name: "Yes"
27
- }, {
28
- id: "NO",
29
- name: "No"
30
- }],
31
- appearance: "block"
32
- }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
33
- appearance: _Button.ButtonAppearance.PRIMARY,
34
- className: "full-width-btn"
35
- }, "Submit"));
36
- };
37
- _RadioList.story = {
38
- name: "RadioList",
39
- parameters: {
40
- info: {
41
- propTables: [_RadioList2["default"]]
42
- }
43
- }
44
- };
45
- var _default = exports["default"] = {
46
- title: "Form|RadioList",
47
- parameters: {
48
- info: {
49
- propTables: [_RadioList2["default"]]
50
- }
51
- }
52
- };
@@ -1,75 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = exports.TextInput = exports.RefUsage = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _Form = _interopRequireDefault(require("../Form"));
10
- var _Input = _interopRequireDefault(require("../Input"));
11
- var _Button = _interopRequireWildcard(require("../../Button"));
12
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
13
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
14
- var TextInput = exports.TextInput = function TextInput() {
15
- var onSubmit = function onSubmit(formData) {
16
- var data = formData.data,
17
- _formData$errors = formData.errors,
18
- errors = _formData$errors === void 0 ? {} : _formData$errors;
19
- if (Object.keys(errors).length) {
20
- console.log("ERRORS FOUND : ");
21
- console.log(errors);
22
- } else {
23
- console.log("Submitted data: ", data);
24
- }
25
- };
26
- return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
27
- onSubmit: onSubmit
28
- }, /*#__PURE__*/_react["default"].createElement(_Input["default"], {
29
- type: "text",
30
- name: "email",
31
- label: "Name",
32
- placeholder: "Enter your email",
33
- appearance: "block",
34
- validations: [{
35
- type: "EMAIL",
36
- message: "Please enter a valid email address"
37
- }]
38
- }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
39
- appearance: _Button.ButtonAppearance.PRIMARY,
40
- className: "full-width-btn"
41
- }, "Submit"));
42
- };
43
- TextInput.story = {
44
- parameters: {
45
- info: {
46
- propTables: [_Input["default"]]
47
- }
48
- }
49
- };
50
- var RefUsage = exports.RefUsage = function RefUsage() {
51
- var inputRef = (0, _react.useRef)();
52
- var focusInput = function focusInput() {
53
- inputRef.current.focus();
54
- };
55
- return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
56
- appearance: _Button.ButtonAppearance.SECONDARY,
57
- className: "full-width-btn",
58
- onClick: focusInput
59
- }, "Focus input"), /*#__PURE__*/_react["default"].createElement(_Input["default"], {
60
- ref: inputRef,
61
- type: "text",
62
- name: "email",
63
- label: "Name",
64
- placeholder: "Enter your email",
65
- appearance: "block"
66
- }));
67
- };
68
- var _default = exports["default"] = {
69
- title: "Form|Text Input",
70
- parameters: {
71
- info: {
72
- propTables: [TextInput]
73
- }
74
- }
75
- };
@@ -1,232 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = exports._Toggle = exports._FileUploader = exports._Dropdown = exports._DragDropFileUploader = exports.GetFormData = exports.FormExample = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _Form = _interopRequireDefault(require("../Form"));
10
- var _Dropdown2 = _interopRequireDefault(require("../Dropdown"));
11
- var _Input = _interopRequireDefault(require("../Input"));
12
- var _Textarea = _interopRequireDefault(require("../Textarea"));
13
- var _RadioList = _interopRequireDefault(require("../RadioList"));
14
- var _Checkbox = _interopRequireDefault(require("../Checkbox"));
15
- var _FileUploader2 = _interopRequireDefault(require("../FileUploader"));
16
- var _DragDropFileUploader2 = _interopRequireDefault(require("../DragDropFileUploader"));
17
- var _Toggle2 = _interopRequireDefault(require("../Toggle"));
18
- var _RangeSlider = _interopRequireDefault(require("../RangeSlider"));
19
- var _Button = _interopRequireWildcard(require("../../Button"));
20
- var _Constants = require("../../../../public/Constants");
21
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
22
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
23
- var FormExample = exports.FormExample = function FormExample() {
24
- var onSubmit = function onSubmit(formData) {
25
- var data = formData.data,
26
- _formData$errors = formData.errors,
27
- errors = _formData$errors === void 0 ? {} : _formData$errors;
28
- if (Object.keys(errors).length) {
29
- console.log("ERRORS FOUND : ");
30
- console.log(errors);
31
- } else {
32
- console.log("Submitted data: ", data);
33
- }
34
- };
35
- return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
36
- onSubmit: onSubmit
37
- }, /*#__PURE__*/_react["default"].createElement(_Input["default"], {
38
- type: "text",
39
- name: "email",
40
- label: "Name",
41
- placeholder: "Enter your email",
42
- appearance: "block"
43
- }), /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
44
- name: "description",
45
- label: "Description",
46
- placeholder: "Enter your description",
47
- appearance: "block"
48
- }), /*#__PURE__*/_react["default"].createElement(_RadioList["default"], {
49
- name: "yesNoOption",
50
- label: "Are you sure?",
51
- options: [{
52
- id: "YES",
53
- name: "Yes"
54
- }, {
55
- id: "NO",
56
- name: "No"
57
- }],
58
- appearance: "block"
59
- }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
60
- name: "orange",
61
- label: "Orange"
62
- }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
63
- name: "pineapple",
64
- label: "Pineapple",
65
- value: true,
66
- onChange: function onChange() {}
67
- }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
68
- name: "grapes",
69
- label: "Grapes"
70
- }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Dropdown2["default"], {
71
- name: "fruit",
72
- label: "Select fruit",
73
- options: _Constants.FRUITS_LIST,
74
- appearance: "block",
75
- validations: [{
76
- type: "REQUIRED",
77
- message: "Please select a fruit"
78
- }]
79
- }), /*#__PURE__*/_react["default"].createElement(_Toggle2["default"], {
80
- label: "Is Active?",
81
- name: "isActive",
82
- appearance: "block"
83
- }), /*#__PURE__*/_react["default"].createElement(_RangeSlider["default"], {
84
- name: "price",
85
- label: "Select price range",
86
- min: "10",
87
- max: "100",
88
- appearance: "block",
89
- defaultValue: "10"
90
- }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
91
- appearance: _Button.ButtonAppearance.PRIMARY,
92
- className: "full-width-btn"
93
- }, "Submit"));
94
- };
95
- FormExample.story = {
96
- name: "Form"
97
- };
98
- var _Dropdown = exports._Dropdown = function _Dropdown() {
99
- var onSubmit = function onSubmit(formData) {
100
- var data = formData.data;
101
- var fruit = data.fruit;
102
- console.log("Selected Fruit: ", fruit);
103
- };
104
- return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
105
- onSubmit: onSubmit
106
- }, /*#__PURE__*/_react["default"].createElement(_Dropdown2["default"], {
107
- name: "fruit",
108
- label: "Select fruit",
109
- options: _Constants.FRUITS_LIST,
110
- appearance: "block"
111
- }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
112
- appearance: _Button.ButtonAppearance.PRIMARY,
113
- className: "full-width-btn"
114
- }, "Submit"));
115
- };
116
- _Dropdown.story = {
117
- name: "Dropdown ",
118
- parameters: {
119
- info: {
120
- propTables: [_Dropdown2["default"]]
121
- }
122
- }
123
- };
124
- var _FileUploader = exports._FileUploader = function _FileUploader() {
125
- var onSubmit = function onSubmit(formData) {
126
- var data = formData.data;
127
- var file = data.file;
128
- console.log("Selected file: ", file[0].name);
129
- };
130
- return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
131
- onSubmit: onSubmit
132
- }, /*#__PURE__*/_react["default"].createElement(_FileUploader2["default"], {
133
- name: "file",
134
- appearance: "block"
135
- }, /*#__PURE__*/_react["default"].createElement("a", {
136
- href: "javascript:void(0)"
137
- }, "Upload File")), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
138
- appearance: _Button.ButtonAppearance.PRIMARY,
139
- className: "full-width-btn"
140
- }, "Submit"));
141
- };
142
- _FileUploader.story = {
143
- name: "File Uploader ",
144
- parameters: {
145
- info: {
146
- propTables: [_FileUploader2["default"]]
147
- }
148
- }
149
- };
150
- var _DragDropFileUploader = exports._DragDropFileUploader = function _DragDropFileUploader() {
151
- var onSubmit = function onSubmit(formData) {
152
- var data = formData.data;
153
- var filesList = data.filesList;
154
- console.log("Selected file: ", filesList[0].name);
155
- };
156
- return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
157
- onSubmit: onSubmit
158
- }, /*#__PURE__*/_react["default"].createElement(_DragDropFileUploader2["default"], {
159
- name: "filesList",
160
- appearance: "block"
161
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Drag & drop files into this area")), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
162
- appearance: _Button.ButtonAppearance.PRIMARY,
163
- className: "full-width-btn"
164
- }, "Submit"));
165
- };
166
- _DragDropFileUploader.story = {
167
- name: "DragDrop File Uploader ",
168
- parameters: {
169
- info: {
170
- propTables: [_DragDropFileUploader2["default"]]
171
- }
172
- }
173
- };
174
- var _Toggle = exports._Toggle = function _Toggle() {
175
- var onSubmit = function onSubmit(formData) {
176
- var data = formData.data;
177
- var isActive = data.isActive;
178
- console.log("isActive: ", isActive);
179
- };
180
- return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
181
- onSubmit: onSubmit
182
- }, /*#__PURE__*/_react["default"].createElement(_Toggle2["default"], {
183
- label: "Is Active?",
184
- name: "isActive",
185
- appearance: "block"
186
- }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
187
- appearance: _Button.ButtonAppearance.PRIMARY,
188
- className: "full-width-btn"
189
- }, "Submit"));
190
- };
191
- _Toggle.story = {
192
- name: "Toggle ",
193
- parameters: {
194
- info: {
195
- propTables: [_Toggle2["default"]]
196
- }
197
- }
198
- };
199
- var GetFormData = exports.GetFormData = function GetFormData() {
200
- var formRef = (0, _react.useRef)();
201
- var submitFormData = function submitFormData() {
202
- var formData = formRef.current.getFormData();
203
- var data = formData.data;
204
- console.log("Got data", data);
205
- };
206
- return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_Form["default"], {
207
- ref: formRef
208
- }, /*#__PURE__*/_react["default"].createElement(_Input["default"], {
209
- name: "name",
210
- label: "Enter name"
211
- }), /*#__PURE__*/_react["default"].createElement(_Input["default"], {
212
- name: "email",
213
- label: "Enter Email ID"
214
- }), /*#__PURE__*/_react["default"].createElement(_Dropdown2["default"], {
215
- name: "fruit",
216
- label: "Select fruit",
217
- options: _Constants.FRUITS_LIST,
218
- appearance: "block"
219
- })), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
220
- appearance: _Button.ButtonAppearance.PRIMARY,
221
- className: "full-width-btn",
222
- onClick: submitFormData
223
- }, "Click to submit"));
224
- };
225
- var _default = exports["default"] = {
226
- title: "Form|Miscellanious",
227
- parameters: {
228
- info: {
229
- propTables: [_Form["default"]]
230
- }
231
- }
232
- };
@@ -1,35 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = exports.SimpleUsage = exports.CustomListItem = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _Constants = require("../../../public/Constants");
9
- var _List = _interopRequireDefault(require("./List"));
10
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
11
- var _default = exports["default"] = {
12
- title: "List"
13
- };
14
- var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
15
- return /*#__PURE__*/_react["default"].createElement(_List["default"], {
16
- items: _Constants.FRUITS_LIST
17
- });
18
- };
19
- var CustomListItem = exports.CustomListItem = function CustomListItem() {
20
- /* eslint-disable react/prop-types */
21
- var ListItem = function ListItem(_ref) {
22
- var itemData = _ref.itemData;
23
- var name = itemData.name;
24
- return /*#__PURE__*/_react["default"].createElement("li", null, "Custom ListItem ---> ".concat(name));
25
- };
26
- /* eslint-enable react/prop-types */
27
-
28
- return /*#__PURE__*/_react["default"].createElement(_List["default"], {
29
- items: _Constants.FRUITS_LIST,
30
- ListItem: ListItem
31
- });
32
- };
33
- CustomListItem.story = {
34
- name: "Custom ListItem"
35
- };