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

package/components/DataLoader/DataLoader.stories.js

@@ -1,73 +1,196 @@
 "use strict";
 
-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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SimpleUsage = exports.FunctionUrl = void 0;
-var _react = _interopRequireWildcard(require("react"));
+exports["default"] = exports.WithErrorHandling = exports.WithCustomLoader = exports.MultipleRequests = exports.Interactive = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _DataLoader = _interopRequireDefault(require("./DataLoader"));
 var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-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); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 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."); }
 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; } }
 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; }
 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; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
-  _dataLoader["default"].addRequestConfig("getTodos", {
-    method: "GET",
-    url: "https://jsonplaceholder.typicode.com/todos"
-  });
-  var onDataLoaded = function onDataLoaded(_ref) {
-    var _ref2 = _slicedToArray(_ref, 1),
-      todos = _ref2[0];
-    console.log(todos);
-  };
-  var onDataFailed = function onDataFailed(e) {
-    console.log("Error ", e);
-  };
-  var requests = [{
-    requestId: "getTodos"
-  }];
-  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "Use the ", /*#__PURE__*/_react["default"].createElement("code", null, "DataLoader"), " component to make implicit API calls by wrapping the JSX content where you want the API data with this component. This would mostly be used for GET calls."), /*#__PURE__*/_react["default"].createElement(_DataLoader["default"], {
-    requests: requests,
-    onDataLoaded: onDataLoaded,
-    onDataFailed: onDataFailed
-  }, /*#__PURE__*/_react["default"].createElement("div", null, "Received the data")));
+// Set up all request configurations globally
+_dataLoader["default"].addRequestConfig('users', {
+  url: 'https://jsonplaceholder.typicode.com/users',
+  method: 'GET'
+});
+_dataLoader["default"].addRequestConfig('posts', {
+  url: 'https://jsonplaceholder.typicode.com/posts',
+  method: 'GET'
+});
+_dataLoader["default"].addRequestConfig('comments', {
+  url: 'https://jsonplaceholder.typicode.com/comments',
+  method: 'GET'
+});
+_dataLoader["default"].addRequestConfig('invalid', {
+  url: 'https://invalid-url.com/data',
+  method: 'GET'
+});
+
+// Mock API endpoints
+var mockRequests = [{
+  requestId: 'users',
+  urlParams: {},
+  params: {
+    page: 1
+  }
+}, {
+  requestId: 'posts',
+  urlParams: {},
+  params: {
+    limit: 5
+  }
+}];
+
+// Custom loader component example
+var CustomLoader = function CustomLoader() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px',
+      border: '1px solid #ccc',
+      borderRadius: '4px',
+      textAlign: 'center',
+      background: '#f5f5f5'
+    }
+  }, "Loading data...");
 };
-var FunctionUrl = exports.FunctionUrl = function FunctionUrl() {
-  _dataLoader["default"].addRequestConfig("getTodoById", {
-    method: "GET",
-    url: function url(params) {
-      return "https://jsonplaceholder.typicode.com/todos/".concat(params.id);
+
+// Custom error component example
+var ErrorDisplay = function ErrorDisplay(_ref) {
+  var error = _ref.error;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px',
+      border: '1px solid #ff6b6b',
+      borderRadius: '4px',
+      color: '#ff6b6b',
+      background: '#fff5f5',
+      textAlign: 'center'
     }
-  });
-  var onDataLoaded = function onDataLoaded(_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 1),
-      todo = _ref4[0];
-    console.log(todo);
-  };
-  var onDataFailed = function onDataFailed(e) {
-    console.log("Error ", e);
-  };
-  var requests = [{
-    requestId: "getTodoById",
-    urlParams: {
-      id: 1
+  }, "Error: ", error.message || 'Failed to load data');
+};
+var meta = {
+  title: 'Components/DataLoader',
+  component: _DataLoader["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    requests: {
+      control: 'object',
+      description: 'Array of request objects to be fetched'
+    },
+    onDataLoaded: {
+      action: 'data loaded',
+      description: 'Callback function called when data is loaded successfully'
+    },
+    onDataFailed: {
+      action: 'data failed',
+      description: 'Callback function called when data fetching fails'
+    },
+    Loader: {
+      control: 'object',
+      description: 'Custom loader component'
     }
-  }];
-  return /*#__PURE__*/_react["default"].createElement(_DataLoader["default"], {
-    requests: requests,
-    onDataLoaded: onDataLoaded,
-    onDataFailed: onDataFailed
-  }, /*#__PURE__*/_react["default"].createElement("div", null, "Recieved todo data"));
+  }
+};
+var _default = exports["default"] = meta; // Basic usage with default loader
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_DataLoader["default"], {
+      requests: mockRequests,
+      onDataLoaded: function onDataLoaded(results) {
+        return console.log('Data loaded:', results);
+      },
+      onDataFailed: function onDataFailed(error) {
+        return console.error('Error:', error);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Data loaded successfully!"));
+  }
+};
+
+// With custom loader
+var WithCustomLoader = exports.WithCustomLoader = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_DataLoader["default"], {
+      requests: mockRequests,
+      Loader: CustomLoader,
+      onDataLoaded: function onDataLoaded(results) {
+        return console.log('Data loaded:', results);
+      },
+      onDataFailed: function onDataFailed(error) {
+        return console.error('Error:', error);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Data loaded successfully!"));
+  }
 };
-FunctionUrl.story = {
-  name: "Function URL"
+
+// With error handling
+var WithErrorHandling = exports.WithErrorHandling = {
+  render: function render() {
+    var _React$useState = _react["default"].useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      error = _React$useState2[0],
+      setError = _React$useState2[1];
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_DataLoader["default"], {
+      requests: [{
+        requestId: 'invalid'
+      }],
+      onDataLoaded: function onDataLoaded(results) {
+        console.log('Data loaded:', results);
+        setError(null);
+      },
+      onDataFailed: function onDataFailed(err) {
+        console.error('Error:', err);
+        setError(err);
+      }
+    }, error ? /*#__PURE__*/_react["default"].createElement(ErrorDisplay, {
+      error: error
+    }) : /*#__PURE__*/_react["default"].createElement("div", null, "Data loaded successfully!")));
+  }
+};
+
+// With multiple requests
+var MultipleRequests = exports.MultipleRequests = {
+  render: function render() {
+    var requests = [{
+      requestId: 'users',
+      params: {
+        limit: 5
+      }
+    }, {
+      requestId: 'posts',
+      params: {
+        userId: 1
+      }
+    }, {
+      requestId: 'comments',
+      params: {
+        postId: 1
+      }
+    }];
+    return /*#__PURE__*/_react["default"].createElement(_DataLoader["default"], {
+      requests: requests,
+      onDataLoaded: function onDataLoaded(results) {
+        return console.log('Multiple requests loaded:', results);
+      },
+      onDataFailed: function onDataFailed(error) {
+        return console.error('Error:', error);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Multiple requests completed!"));
+  }
 };
-var _default = exports["default"] = {
-  title: "Data fetching|DataLoader (Component)"
+
+// Interactive example
+var Interactive = exports.Interactive = {
+  args: {
+    requests: mockRequests,
+    children: /*#__PURE__*/_react["default"].createElement("div", null, "Data loaded successfully!")
+  }
 };

package/components/Form/SearchableDropdown.js

@@ -297,6 +297,8 @@ var SearchableDropdown = function SearchableDropdown(props, ref) {
       setSelectedItems(arrayPostValue);
       if (arrayPostValue.length > 0) {
         setSearchQuery(arrayPostValue[0][nameAttribute]);
+      } else {
+        setSearchQuery("");
       }
     }
     postFormValueChange(postValue);

package/components/Form/stories/Checkbox.stories.js

@@ -1,51 +1,144 @@
 "use strict";
 
-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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports._Checkbox = void 0;
+exports["default"] = exports.Disabled = exports.Default = exports.ControlledCheckbox = exports.CheckboxGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Form = _interopRequireDefault(require("../Form"));
-var _Checkbox2 = _interopRequireDefault(require("../Checkbox"));
-var _Button = _interopRequireWildcard(require("../../Button"));
-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); }
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+var _Button = _interopRequireDefault(require("../../Button"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var _Checkbox = exports._Checkbox = function _Checkbox() {
-  var onSubmit = function onSubmit(formData) {
-    var data = formData.data;
-    console.log("Submitted data: ", data);
-  };
-  return /*#__PURE__*/_react["default"].createElement(_Form["default"], {
-    onSubmit: onSubmit
-  }, /*#__PURE__*/_react["default"].createElement(_Checkbox2["default"], {
-    name: "orange",
-    label: "Orange"
-  }), /*#__PURE__*/_react["default"].createElement(_Checkbox2["default"], {
-    name: "pineapple",
-    label: "Pineapple",
-    value: true,
-    onChange: function onChange() {}
-  }), /*#__PURE__*/_react["default"].createElement(_Checkbox2["default"], {
-    name: "grapes",
-    label: "Grapes"
-  }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    appearance: _Button.ButtonAppearance.PRIMARY,
-    className: "full-width-btn"
-  }, "Submit"));
-};
-_Checkbox.story = {
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+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."); }
+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; } }
+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; }
+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; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var meta = {
+  title: 'Components/Form/Checkbox',
+  component: _Checkbox["default"],
   parameters: {
-    info: {
-      propTables: [_Checkbox2["default"]]
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label text for the checkbox'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the checkbox is disabled'
+    },
+    value: {
+      control: 'boolean',
+      description: 'Whether the checkbox is checked'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
     }
   }
 };
-var _default = exports["default"] = {
-  title: "Form|Checkbox",
-  parameters: {
-    info: {
-      propTables: [_Checkbox2["default"]]
-    }
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Default checkbox",
+      onChange: function onChange(val) {
+        return console.log('Checkbox changed:', val);
+      }
+    });
+  }
+};
+var ControlledCheckbox = exports.ControlledCheckbox = {
+  render: function render() {
+    var _React$useState = _react["default"].useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      checked = _React$useState2[0],
+      setChecked = _React$useState2[1];
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Controlled checkbox",
+      value: checked,
+      onChange: function onChange(val) {
+        console.log('Checkbox changed:', val);
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return setChecked(!checked);
+      }
+    }, "Toggle Checkbox"));
+  }
+};
+var Disabled = exports.Disabled = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Disabled unchecked",
+      disabled: true,
+      onChange: function onChange(val) {
+        return console.log('Checkbox changed:', val);
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Disabled checked",
+      disabled: true,
+      value: true,
+      onChange: function onChange(val) {
+        return console.log('Checkbox changed:', val);
+      }
+    }));
+  }
+};
+var CheckboxGroup = exports.CheckboxGroup = {
+  render: function render() {
+    var _React$useState3 = _react["default"].useState(['option1']),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selected = _React$useState4[0],
+      setSelected = _React$useState4[1];
+    var handleChange = function handleChange(value) {
+      setSelected(function (prev) {
+        return prev.includes(value) ? prev.filter(function (item) {
+          return item !== value;
+        }) : [].concat(_toConsumableArray(prev), [value]);
+      });
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Option 1",
+      value: selected.includes('option1'),
+      onChange: function onChange() {
+        return handleChange('option1');
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Option 2",
+      value: selected.includes('option2'),
+      onChange: function onChange() {
+        return handleChange('option2');
+      }
+    }), /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Option 3",
+      value: selected.includes('option3'),
+      onChange: function onChange() {
+        return handleChange('option3');
+      }
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginTop: '10px'
+      }
+    }, "Selected options: ", selected.join(', ')));
   }
 };