@nobak/design-system 1.0.0

package/lib/shared/components/Form/context/Form.js

@@ -0,0 +1,164 @@
+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); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof Symbol ? Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return Object.defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = Object.getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(l); function g(t) { ["next", "throw", "return"].forEach(function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], t.forEach(w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = Object.create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+e.slice(1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+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; }
+import React from 'react';
+import { getFields } from "../utils";
+import { Debug } from "../../Debug";
+// Import FormField
+
+export var FormContext = /*#__PURE__*/React.createContext({});
+export var FormProvider = function FormProvider(_ref) {
+  var children = _ref.children,
+    fields = _ref.fields,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'action' : _ref$mode,
+    actionUrl = _ref.actionUrl,
+    action = _ref.action,
+    FormComponent = _ref.component,
+    _ref$preventDefault = _ref.preventDefault,
+    preventDefault = _ref$preventDefault === void 0 ? true : _ref$preventDefault,
+    debug = _ref.debug;
+  var formRef = /*#__PURE__*/React.createRef();
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    formState = _React$useState2[0],
+    updateFormState = _React$useState2[1];
+  // Assuming getFields correctly processes FormField[][]
+  var fieldsState = React.useMemo(function () {
+    return getFields(fields);
+  }, [fields]);
+  var updateForm = React.useCallback(function () {
+    updateFormState(getFormData());
+  }, [formRef]); // Added dependency
+
+  var getFormData = React.useCallback(function () {
+    if (!formRef.current) return [];
+    var currentFormData = new FormData(formRef.current);
+    var data = [];
+    currentFormData.forEach(function (value, key) {
+      // Handle potential multiple values for checkboxes/multi-select if needed
+      data.push({
+        id: key,
+        value: value
+      });
+    });
+    // Alternative: manual iteration like before if FormData doesn't capture everything
+    // Consider inputs managed by React state outside the form if needed
+    return data;
+  }, [formRef]); // Added dependency
+
+  React.useEffect(function () {
+    updateFormState(getFormData());
+  }, [getFormData]); // Updated dependencies
+
+  // This effect might cause infinite loops if updateForm isn't stable
+  // Consider if it's still necessary or how to make it safer
+  // React.useEffect(() => {
+  //   const newState = getFormData();
+  //   if (JSON.stringify(newState) !== JSON.stringify(formState)) {
+  //     updateFormState(newState);
+  //   }
+  // }, [formState, getFormData]);
+
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+      var currentFormState, formDataObject;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            currentFormState = getFormData(); // Get latest data on submit
+            updateFormState(currentFormState);
+            if (!(mode === 'action')) {
+              _context.next = 20;
+              break;
+            }
+            event.preventDefault(); // Prevent default only in action mode
+            if (!debug) {
+              _context.next = 8;
+              break;
+            }
+            console.log('DEBUG FORM ON 🐛:', currentFormState);
+            _context.next = 18;
+            break;
+          case 8:
+            if (!(typeof action === 'function')) {
+              _context.next = 18;
+              break;
+            }
+            _context.prev = 9;
+            // Convert array state to object for the action function
+            formDataObject = currentFormState.reduce(function (acc, _ref3) {
+              var id = _ref3.id,
+                value = _ref3.value;
+              acc[id] = value;
+              return acc;
+            }, {});
+            _context.next = 13;
+            return action(formDataObject);
+          case 13:
+            _context.next = 18;
+            break;
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](9);
+            console.error('There has been a problem with the form action:', _context.t0);
+            // Handle action errors appropriately (e.g., display message to user)
+          case 18:
+            _context.next = 21;
+            break;
+          case 20:
+            if (mode === 'form') {
+              // Allow default form submission to actionUrl
+              if (debug) {
+                console.log('DEBUG FORM ON (native submit) 🐛:', currentFormState);
+              }
+            }
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[9, 15]]);
+    }));
+    return function handleSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var providerValue = React.useMemo(function () {
+    return {
+      fieldsState: fieldsState,
+      updateForm: updateForm,
+      formState: formState
+    };
+  }, [fieldsState, updateForm, formState]); // Memoize context value
+
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: providerValue
+  }, FormComponent ? /*#__PURE__*/React.createElement(FormComponent, {
+    method: "post",
+    action: actionUrl || '',
+    ref: formRef,
+    onSubmit: handleSubmit
+  }, children) : /*#__PURE__*/React.createElement("form", {
+    method: "post",
+    action: actionUrl || '',
+    ref: formRef,
+    onSubmit: handleSubmit
+  }, children), debug && formState && /*#__PURE__*/React.createElement(Debug, null, formState.map(function (_ref4, index) {
+    var id = _ref4.id,
+      value = _ref4.value;
+    // Added key
+    return /*#__PURE__*/React.createElement("div", {
+      key: id || index
+    }, " ", id, ": ", String(value), " ");
+  })));
+};
+export var useForm = function useForm() {
+  return React.useContext(FormContext);
+};

package/lib/shared/components/Form/context/index.js

@@ -0,0 +1 @@
+export { useForm, FormContext, FormProvider } from "./Form";

package/lib/shared/components/Form/index.js

@@ -0,0 +1 @@
+export { Form } from "./Form";

package/lib/shared/components/Form/types.d.js

@@ -0,0 +1 @@
+export {};

package/lib/shared/components/Form/utils/index.js

@@ -0,0 +1,31 @@
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+export var getFields = function getFields(fields) {
+  return fields.map(function (item) {
+    var isArr = Object.prototype.toString.call(item) == '[object Array]';
+    if (isArr) {
+      var output = item.map(function (_ref) {
+        var field = _ref.field,
+          title = _ref.title,
+          description = _ref.description;
+        return _objectSpread(_objectSpread({}, field), {}, {
+          title: title,
+          description: description
+        });
+      });
+      return output;
+    } else {
+      var field = item.field,
+        title = item.title,
+        description = item.description;
+      return [_objectSpread(_objectSpread({}, field), {}, {
+        title: title,
+        description: description
+      })];
+    }
+  });
+};

package/lib/shared/components/GroupItems/GroupItems.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Icon } from "../Icon";
+export var GroupItems = function GroupItems(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-2 gap-4 content-start p-[8px]"
+  }, items === null || items === void 0 ? void 0 : items.map(function (item, key) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: "flex space-x-[4px] text-neutral-800"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+      name: item[0]
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "text-p3-bold text-neutral-900"
+    }, item[1]));
+  }));
+};

package/lib/shared/components/GroupItems/index.js

@@ -0,0 +1 @@
+export { GroupItems } from "./GroupItems";

package/lib/shared/components/Header/Header.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from "../Button";
+export var Header = function Header(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'SECTION' : _ref$type,
+    section = _ref.section,
+    page = _ref.page;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sm:flex sm:items-center sm:justify-between h-v8 text-neutral-800"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-4xl font-bold leading-6 text-primary"
+  }, section === null || section === void 0 ? void 0 : section.title), /*#__PURE__*/React.createElement("div", {
+    className: "mt-3 flex sm:mt-0 sm:ml-4"
+  }, (section === null || section === void 0 ? void 0 : section.navOptions) && section.navOptions.map(function (_ref2, key) {
+    var title = _ref2.title,
+      action = _ref2.action,
+      icon = _ref2.icon;
+    return /*#__PURE__*/React.createElement(Button, {
+      key: key,
+      text: title,
+      icon: icon,
+      size: "small",
+      onClick: action
+    });
+  })));
+};

package/lib/shared/components/Header/index.js

@@ -0,0 +1 @@
+export { Header } from "./Header";

package/lib/shared/components/Heading/Heading.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export var Heading = function Heading(_ref) {
+  var variant = _ref.variant;
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};

package/lib/shared/components/Heading/index.js

@@ -0,0 +1 @@
+export { Heading } from "./Heading";

package/lib/shared/components/Icon/Icon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import { icons } from "../../../assets/icons";
+var Path = function Path(_ref) {
+  var name = _ref.name;
+  return /*#__PURE__*/React.createElement("path", {
+    d: icons["".concat(name)],
+    className: "w-full",
+    fill: "currentColor"
+  });
+};
+export var Icon = function Icon(_ref2) {
+  var name = _ref2.name,
+    color = _ref2.color,
+    _ref2$viewBox = _ref2.viewBox,
+    viewBox = _ref2$viewBox === void 0 ? "0 0 64 64" : _ref2$viewBox,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'small' : _ref2$size,
+    customCss = _ref2.customCss;
+  var iconStyle = clsx(size === 'tiny' && 'w-[18px] h-[18px]', size === 'small' && 'w-[22px] h-[22px]', size === 'medium' && 'w-[30px] h-[30px]', size === 'large' && 'w-[36px] h-[36px]', size === 'xlarge' && 'w-[48px] h-[48px] flex justify-center', "".concat(customCss));
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: viewBox,
+    className: iconStyle,
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement(Path, {
+    name: name
+  }));
+};

package/lib/shared/components/Icon/index.js

@@ -0,0 +1 @@
+export { Icon } from "./Icon";

package/lib/shared/components/Identicons/Identicons.js

@@ -0,0 +1,6 @@
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+import React from 'react';
+export var Identicons = function Identicons(_ref) {
+  _objectDestructuringEmpty(_ref);
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};

package/lib/shared/components/Identicons/index.js

@@ -0,0 +1 @@
+export { Identicons } from "./Identicons";

package/lib/shared/components/Image/Image.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import clsx from 'clsx';
+export var Image = function Image(_ref) {
+  var imageUrl = _ref.imageUrl,
+    customCss = _ref.customCss,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$fullHeight = _ref.fullHeight,
+    fullHeight = _ref$fullHeight === void 0 ? false : _ref$fullHeight;
+  var style = clsx('bg-cover bg-center w-full h-full object-center object-cover', "".concat(customCss));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-[200px] ".concat(fullHeight ? 'h-full' : 'h-[200px]')
+  }, /*#__PURE__*/React.createElement("img", {
+    style: {
+      height: "".concat(height, "px"),
+      width: "".concat(width, "px")
+    },
+    className: style,
+    src: imageUrl,
+    alt: ""
+  }));
+};

package/lib/shared/components/Image/index.js

@@ -0,0 +1 @@
+export { Image } from "./Image";

package/lib/shared/components/Input/Input.js

@@ -0,0 +1,201 @@
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof Symbol ? Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return Object.defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = Object.getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(l); function g(t) { ["next", "throw", "return"].forEach(function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], t.forEach(w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = Object.create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+e.slice(1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+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; }
+import React from 'react';
+import { useForm } from "../Form/context";
+import { UploadFileInput, TextInput, TextAreaInput, SelectInput, DefaultInput, CheckBoxInput, RadioboxInput, NumberInput, PickerInput, RCInput, FileReaderInput, DateInput } from "./components";
+import { DatePicker, TimePicker } from '..';
+export var Input = function Input(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 'text' : _ref$id,
+    variant = _ref.variant,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+    label = _ref.label,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    populateOptions = _ref.populateOptions,
+    maxLength = _ref.maxLength,
+    uploadFile = _ref.uploadFile,
+    defaultValue = _ref.defaultValue,
+    belongs_to = _ref.belongs_to,
+    validation = _ref.validation,
+    icon = _ref.icon,
+    afterChange = _ref.afterChange,
+    options = _ref.options,
+    hidden = _ref.hidden,
+    _ref$debug = _ref.debug,
+    debug = _ref$debug === void 0 ? false : _ref$debug,
+    required = _ref.required,
+    multiple = _ref.multiple;
+  var _useForm = useForm(),
+    fieldsState = _useForm.fieldsState,
+    formState = _useForm.formState;
+  var _React$useState = React.useState(defaultValue),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dependencies = _React$useState4[0],
+    setDependencies = _React$useState4[1];
+  React.useEffect(function () {
+    var field = fieldsState.map(function (fields) {
+      return fields.find(function (e) {
+        return e.id === id;
+      });
+    }).filter(function (e) {
+      return !!e;
+    })[0];
+    field.value && setValue(field.value);
+  }, []);
+  React.useEffect(function () {
+    if (belongs_to && populateOptions && formState) {
+      _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var parentValue, options;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              parentValue = formState.map(function (field) {
+                return field.id === belongs_to ? field.value : undefined;
+              }).filter(function (item) {
+                return typeof item === 'string';
+              })[0];
+              _context.next = 3;
+              return populateOptions({
+                value: parentValue,
+                name: ''
+              });
+            case 3:
+              options = _context.sent;
+              setDependencies(options);
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }))();
+    }
+  }, [formState]);
+  if (!options && !dependencies && type === 'select') return /*#__PURE__*/React.createElement(React.Fragment, null, "You are missing the options for Select");
+  if (!options && !dependencies && type === 'radiobox') return /*#__PURE__*/React.createElement(React.Fragment, null, "You are missing the options for Radiobox");
+  var config = {
+    id: id,
+    debug: debug,
+    autoComplete: autoComplete,
+    variant: variant,
+    validation: validation,
+    afterChange: afterChange,
+    defaultValue: value,
+    maxLength: maxLength,
+    populateOptions: populateOptions,
+    label: label,
+    disabled: disabled,
+    icon: icon,
+    placeholder: placeholder,
+    hidden: hidden,
+    uploadFile: uploadFile,
+    options: options ? options : dependencies,
+    required: required,
+    belongs_to: belongs_to,
+    multiple: multiple
+  };
+  switch (type) {
+    case 'text':
+      return /*#__PURE__*/React.createElement(TextInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+    case 'textarea':
+      return /*#__PURE__*/React.createElement(TextAreaInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+    case 'select':
+      return /*#__PURE__*/React.createElement(SelectInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+    case 'time':
+      return /*#__PURE__*/React.createElement(PickerInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        }),
+        component: TimePicker
+      });
+    case 'number':
+      return /*#__PURE__*/React.createElement(NumberInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+    case 'upload':
+      return /*#__PURE__*/React.createElement(UploadFileInput, {
+        uploadFile: uploadFile,
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+    case 'datepicker':
+      return /*#__PURE__*/React.createElement(PickerInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        }),
+        component: DatePicker
+      });
+    case 'date':
+      return /*#__PURE__*/React.createElement(DateInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+    case 'checkbox':
+      return /*#__PURE__*/React.createElement(CheckBoxInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+    case 'radiobox':
+      return /*#__PURE__*/React.createElement(RadioboxInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+    case 'rci':
+      return /*#__PURE__*/React.createElement(RCInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+    case 'file_reader':
+      return /*#__PURE__*/React.createElement(FileReaderInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        }),
+        uploadFile: uploadFile
+      });
+    default:
+      return /*#__PURE__*/React.createElement(DefaultInput, {
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          type: type
+        })
+      });
+  }
+};