@knovator/pagecreator-admin 0.0.7 → 0.0.9

package/README.md

@@ -1,7 +1,207 @@
-# admin
+<a name="readme-top"></a>
 
-This library was generated with [Nx](https://nx.dev).
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
 
-## Running unit tests
 
-Run `nx test admin` to execute the unit tests via [Jest](https://jestjs.io).
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <!-- <a href="https://github.com/knovator/pagecreator">
+    <img src="images/logo.png" alt="Logo" width="80" height="80">
+  </a> -->
+
+<h3 align="center">@knovator/pagecreator-admin</h3>
+
+  <p align="center">
+    Plug & Play functionality to Build dynamic pages on the fly.
+    <br />
+    <a href="https://github.com/knovator/pagecreator"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://github.com/knovator/pagecreator">View Demo</a>
+    ·
+    <a href="https://github.com/knovator/pagecreator/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/knovator/pagecreator/issues">Request Feature</a>
+  </p>
+</div>
+
+
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#usage">Usage</a></li>
+    <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+    <li><a href="#acknowledgments">Acknowledgments</a></li>
+  </ol>
+</details>
+
+
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+<!-- [![Product Name Screen Shot][product-screenshot]](https://example.com) -->
+`@knovator/pagecreator-admin` provides `Widget` and `Page` components to integrate in UI to builds view that manage **widgets** and **page** data.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+### Built With
+
+* [ReatJS](https://reactjs.org/)
+* [Nx](https://nx.dev/)
+* [TailwindCSS](https://tailwindcss.com/)
+* [react-hook-form](https://www.npmjs.com/package/react-hook-form)
+* [react-transition-group](https://www.npmjs.com/package/react-transition-group)
+* [react-beautiful-dnd](https://www.npmjs.com/package/react-beautiful-dnd)
+* [react-dropzone](https://www.npmjs.com/package/react-dropzone)
+* [react-select](https://react-select.com/)
+* [@knovator/api](https://www.npmjs.com/package/@knovator/api)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+`@knovator/pagecreator-admin` is designed to be used in ReactJS/NextJS project.
+
+### Prerequisites
+
+We can use `@knovator/pagecreator-admin` in React/Next application, we can create one using following commands
+* Project
+  ```sh
+  npx create-react-app my-app
+  # or
+  npx create-next-app@latest
+  ```
+* API
+    - Keep your backend application ready according to the steps mentioned in [@knovator/pagecreator-node](https://github.com/knovator/pagecreator/tree/main/libs/node)
+
+
+### Installation
+
+
+1. Install NPM packages
+   ```sh
+   npm install @knovator/pagecreator-admin
+   # or
+   yarn add @knovator/pagecreator-admin
+   ```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- USAGE EXAMPLES -->
+## Usage
+
+### Provider
+
+`@knovator/pagecreator-admin` uses **Context API**, to support communication between components. So, `Widget`/`Page` components should be wrapped by Provider.
+```jsx
+import { Provider } from '@knovator/pagecreator-admin';
+
+<Provider
+    ...
+>
+    ...
+</Provider>
+```
+**Props**
+- `token`
+    - JWT token to be sent along the requests
+- `baseUrl`
+    - Base API url, without forward slash at end i.e. `https://api.xyz.in`
+- `onError(callback_code, code, message) (optional)`
+    - callback to execute on error
+- `onSuccess(callback_code, code, message) (optional)`
+    - callback to execute on success
+- `onLogout (optional)`
+    - callback to execute on API request with unauthorized code in body
+- `switchClass`
+    - `class` name to apply to `Toggle` component, default is `khb_switch`
+- `widgetRoutesPrefix`
+    - Prefix to apply after `baseUrl` while calling `widget` API
+- `tilesRoutesPrefix`
+    - Prefix to apply after `baseUrl` while calling `tiles` API
+- `pageRoutesPrefix`
+    - Prefix to apply after `baseUrl` while calling `page` API
+
+### [Widget](widget.md)
+### [Page](page.md)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+<!-- CONTRIBUTING -->
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+
+
+<!-- LICENSE -->
+## License
+
+Distributed under the MIT License. See `LICENSE.txt` for more information.
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+
+<!-- CONTACT -->
+## Contact
+
+Knovator Technologies
+- Twitter [@knovator](https://twitter.com/knovator)
+- Web [https://knovator.com/](https://knovator.com/)
+
+Project Link: [https://github.com/knovator/masters-admin](https://github.com/knovator/masters-admin)
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+[contributors-shield]: https://img.shields.io/github/contributors/knovator/pagecreator.svg?style=for-the-badge
+[contributors-url]: https://github.com/knovator/pagecreator/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/knovator/pagecreator.svg?style=for-the-badge
+[forks-url]: https://github.com/knovator/pagecreator/network/members
+[stars-shield]: https://img.shields.io/github/stars/knovator/pagecreator.svg?style=for-the-badge
+[stars-url]: https://github.com/knovator/pagecreator/stargazers
+[issues-shield]: https://img.shields.io/github/issues/knovator/pagecreator.svg?style=for-the-badge
+[issues-url]: https://github.com/knovator/pagecreator/issues
+[product-screenshot]: images/screenshot.png

package/index.js

@@ -4,8 +4,8 @@ import fetchUrl, { setAPIConfig } from '@knovator/api';
 import classNames from 'classnames';
 import ReactSelect from 'react-select';
 import { useForm, Controller } from 'react-hook-form';
-import CSSTransition from 'react-transition-group/CSSTransition';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import CSSTransition from 'react-transition-group/CSSTransition';
 import { useDropzone } from 'react-dropzone';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -3472,6 +3472,45 @@ const PageSearch = () => {
   });
 };
 
+var call$7 = functionCall;
+var hasOwn$1 = hasOwnProperty_1;
+var isPrototypeOf$2 = objectIsPrototypeOf;
+var regExpFlags = regexpFlags$1;
+
+var RegExpPrototype$1 = RegExp.prototype;
+
+var regexpGetFlags = function (R) {
+  var flags = R.flags;
+  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$1(R, 'flags') && isPrototypeOf$2(RegExpPrototype$1, R)
+    ? call$7(regExpFlags, R) : flags;
+};
+
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var defineBuiltIn$2 = defineBuiltIn$7;
+var anObject$5 = anObject$f;
+var $toString = toString$6;
+var fails$3 = fails$n;
+var getRegExpFlags = regexpGetFlags;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var nativeToString = RegExpPrototype[TO_STRING];
+
+var NOT_GENERIC = fails$3(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name != TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  defineBuiltIn$2(RegExp.prototype, TO_STRING, function toString() {
+    var R = anObject$5(this);
+    var pattern = $toString(R.source);
+    var flags = $toString(getRegExpFlags(R));
+    return '/' + pattern + '/' + flags;
+  }, { unsafe: true });
+}
+
 var aCallable$6 = aCallable$8;
 var toObject = toObject$5;
 var IndexedObject = indexedObject;
@@ -3515,11 +3554,11 @@ var arrayReduce = {
   right: createMethod(true)
 };
 
-var fails$3 = fails$n;
+var fails$2 = fails$n;
 
 var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
   var method = [][METHOD_NAME];
-  return !!method && fails$3(function () {
+  return !!method && fails$2(function () {
     // eslint-disable-next-line no-useless-call -- required for testing
     method.call(null, argument || function () { return 1; }, 1);
   });
@@ -3550,45 +3589,6 @@ $$7({ target: 'Array', proto: true, forced: !STRICT_METHOD || CHROME_BUG }, {
   }
 });
 
-var call$7 = functionCall;
-var hasOwn$1 = hasOwnProperty_1;
-var isPrototypeOf$2 = objectIsPrototypeOf;
-var regExpFlags = regexpFlags$1;
-
-var RegExpPrototype$1 = RegExp.prototype;
-
-var regexpGetFlags = function (R) {
-  var flags = R.flags;
-  return flags === undefined && !('flags' in RegExpPrototype$1) && !hasOwn$1(R, 'flags') && isPrototypeOf$2(RegExpPrototype$1, R)
-    ? call$7(regExpFlags, R) : flags;
-};
-
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var defineBuiltIn$2 = defineBuiltIn$7;
-var anObject$5 = anObject$f;
-var $toString = toString$6;
-var fails$2 = fails$n;
-var getRegExpFlags = regexpGetFlags;
-
-var TO_STRING = 'toString';
-var RegExpPrototype = RegExp.prototype;
-var nativeToString = RegExpPrototype[TO_STRING];
-
-var NOT_GENERIC = fails$2(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
-// FF44- RegExp#toString has a wrong name
-var INCORRECT_NAME = PROPER_FUNCTION_NAME && nativeToString.name != TO_STRING;
-
-// `RegExp.prototype.toString` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
-if (NOT_GENERIC || INCORRECT_NAME) {
-  defineBuiltIn$2(RegExp.prototype, TO_STRING, function toString() {
-    var R = anObject$5(this);
-    var pattern = $toString(R.source);
-    var flags = $toString(getRegExpFlags(R));
-    return '/' + pattern + '/' + flags;
-  }, { unsafe: true });
-}
-
 var $$6 = _export;
 var $parseInt = numberParseInt;
 
@@ -3642,20 +3642,10 @@ const Form = /*#__PURE__*/forwardRef(({
         setValue(key, updates[key]);
       });
     }
-  }, [setValue, updates]); // setting default values
-
-  useEffect(() => {
-    if (isEmpty(data)) {
-      const defaultValues = schema.reduce((values, schemaItem) => {
-        if (typeof schemaItem.defaultValue !== 'undefined') values[schemaItem.accessor] = schemaItem.defaultValue;
-        return values;
-      }, {});
-      reset(defaultValues);
-    }
-  }, [data, reset, schema]);
+  }, [setValue, updates]);
 
   const inputRenderer = schema => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
 
     let input;
     if (typeof schema.show !== 'undefined' && !schema.show) return null;
@@ -3699,18 +3689,191 @@ const Form = /*#__PURE__*/forwardRef(({
           break;
 
         case 'select':
-          input = jsx(Input.Select, {
-            options: schema.options,
+          input = jsx(Controller, {
+            control: control,
+            name: schema.accessor,
+            render: ({
+              field
+            }) => {
+              var _a, _b;
+
+              return jsx(Input.Select, {
+                options: schema.options,
+                label: schema.label,
+                error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
+                onChange: e => field.onChange(e.target.value),
+                value: field.value,
+                className: "w-full",
+                disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
+                required: schema.required,
+                wrapperClassName: schema.wrapperClassName
+              });
+            }
+          });
+          break;
+
+        case 'text':
+        case 'number':
+        case 'url':
+        default:
+          input = jsx(Input, {
+            rest: register(schema.accessor, schema.validations || {}),
             label: schema.label,
             error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
-            rest: register(schema.accessor, schema.validations || {}),
-            className: "w-full",
+            type: schema.type,
+            className: "w-full p-2",
+            placeholder: schema.placeholder,
             disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
             required: schema.required,
+            onInput: schema.onInput,
+            wrapperClassName: schema.wrapperClassName
+          });
+          break;
+      }
+    } else if (schema.Input) {
+      input = jsxs("div", Object.assign({
+        className: "kms_input-wrapper"
+      }, {
+        children: [jsx("label", Object.assign({
+          className: "kms_input-label"
+        }, {
+          children: schema.label
+        })), jsx(Controller, {
+          control: control,
+          name: schema.accessor,
+          rules: schema.validations,
+          render: ({
+            field
+          }) => {
+            var _a, _b; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+
+            return schema.Input({
+              field,
+              error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
+              disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
+              setError: msg => setError.call(null, schema.accessor, {
+                type: 'custom',
+                message: msg
+              })
+            });
+          }
+        })]
+      }));
+    } else throw new Error(`Please provide Input or type prop to render input Labeled ${schema.label}`);
+
+    return input;
+  };
+
+  const onFormSubmit = e => __awaiter(void 0, void 0, void 0, function* () {
+    e.preventDefault();
+    handleSubmit(data => {
+      const formattedData = schema.reduce((values, schemaItem) => {
+        // Do not add field if editing is disabled for it
+        if (_isUpdating && typeof schemaItem.editable !== 'undefined' && !schemaItem.editable) return values;
+
+        if (schemaItem.type === 'number') {
+          values[schemaItem.accessor] = data[schemaItem.accessor] === '' ? null : parseInt(data[schemaItem.accessor]);
+        } else values[schemaItem.accessor] = data[schemaItem.accessor];
+
+        return values;
+      }, {});
+      onSubmit(formattedData);
+    })();
+  });
+
+  return jsx("form", Object.assign({
+    onSubmit: onFormSubmit,
+    ref: ref,
+    className: "khb-form-items"
+  }, {
+    children: schema.map((schema, i) => jsx(React.Fragment, {
+      children: inputRenderer(schema)
+    }, i))
+  }));
+});
+
+const SimpleForm = /*#__PURE__*/forwardRef(({
+  schema,
+  onSubmit,
+  isUpdating: _isUpdating = false,
+  enable: _enable = true,
+  register,
+  errors,
+  handleSubmit,
+  setValue,
+  control,
+  setError
+}, ref) => {
+  const inputRenderer = schema => {
+    var _a, _b, _c, _d, _e, _f;
+
+    let input;
+    if (typeof schema.show !== 'undefined' && !schema.show) return null;
+
+    if (schema.type) {
+      switch (schema.type) {
+        case 'ReactSelect':
+          input = jsx(CustomReactSelect, {
+            options: schema.options,
+            disabled: !_enable,
+            label: schema.label,
+            error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
+            onChange: value => {
+              if (value) {
+                setValue(schema.accessor, Array.isArray(value) ? value.map(item => item.value) : value.value);
+                if (schema.onChange) schema.onChange(value);
+              }
+            },
+            selectedOptions: schema.selectedOptions,
+            required: schema.required,
+            isMulti: schema.isMulti,
+            isSearchable: schema.isSearchable,
+            onSearch: schema.onSearch,
+            isLoading: schema.isLoading,
+            placeholder: schema.placeholder,
+            wrapperClassName: schema.wrapperClassName,
+            formatOptionLabel: schema.formatOptionLabel
+          });
+          break;
+
+        case 'checkbox':
+          input = jsx(Input.Checkbox, {
+            error: (_d = (_c = errors[schema.accessor]) === null || _c === void 0 ? void 0 : _c.message) === null || _d === void 0 ? void 0 : _d.toString(),
+            switchClass: schema.switchClass,
+            label: schema.label,
+            rest: register(schema.accessor, schema.validations || {}),
+            className: "block",
+            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable,
             wrapperClassName: schema.wrapperClassName
           });
           break;
 
+        case 'select':
+          input = jsx(Controller, {
+            control: control,
+            name: schema.accessor,
+            render: ({
+              field
+            }) => {
+              var _a, _b;
+
+              return jsx(Input.Select, {
+                options: schema.options,
+                label: schema.label,
+                error: (_b = (_a = errors[schema.accessor]) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.toString(),
+                // onChange={(e) => field.onChange(e.target.value)}
+                rest: field,
+                // value={field.value}
+                className: "w-full",
+                disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
+                required: schema.required,
+                wrapperClassName: schema.wrapperClassName
+              });
+            }
+          });
+          break;
+
         case 'text':
         case 'number':
         case 'url':
@@ -3718,7 +3881,7 @@ const Form = /*#__PURE__*/forwardRef(({
           input = jsx(Input, {
             rest: register(schema.accessor, schema.validations || {}),
             label: schema.label,
-            error: (_h = (_g = errors[schema.accessor]) === null || _g === void 0 ? void 0 : _g.message) === null || _h === void 0 ? void 0 : _h.toString(),
+            error: (_f = (_e = errors[schema.accessor]) === null || _e === void 0 ? void 0 : _e.message) === null || _f === void 0 ? void 0 : _f.toString(),
             type: schema.type,
             className: "w-full p-2",
             placeholder: schema.placeholder,
@@ -3792,125 +3955,17 @@ const Form = /*#__PURE__*/forwardRef(({
   }));
 });
 
-const Close = ({
-  srText,
-  className
+const DNDItemsList = ({
+  onDragEnd,
+  items,
+  formatItem,
+  listCode
 }) => {
-  return jsxs(Fragment, {
-    children: [srText ? jsx("span", Object.assign({
-      className: "khb_sr-only"
-    }, {
-      children: srText
-    })) : null, jsx("svg", Object.assign({
-      className: className,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "-6 -6 24 24",
-      width: "24",
-      fill: "currentColor"
-    }, {
-      children: jsx("path", {
-        d: "M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"
-      })
-    }))]
-  });
-};
-
-const Drawer = ({
-  children,
-  open,
-  onClose,
-  title,
-  footerContent
-}) => {
-  const nodeRef = useRef(null);
-  return jsx(CSSTransition, Object.assign({
-    ref: nodeRef,
-    in: open,
-    timeout: {
-      enter: 250,
-      exit: 350
-    },
-    classNames: "khb_drawer",
-    mountOnEnter: true,
-    unmountOnExit: true
-  }, {
-    children: jsx("div", Object.assign({
-      className: "khb_drawer-wrapper-1",
-      "aria-labelledby": "modal",
-      role: "dialog",
-      "aria-modal": "true",
-      ref: nodeRef,
-      "data-testid": "drawer"
-    }, {
-      children: jsxs("div", Object.assign({
-        className: "khb_drawer-wrapper-2"
-      }, {
-        children: [jsx("div", {
-          className: "khb_drawer-backdrop",
-          role: "button",
-          onClick: onClose,
-          onKeyDown: onClose,
-          tabIndex: 0
-        }), jsx("div", Object.assign({
-          className: "khb_drawer-container-1"
-        }, {
-          children: jsxs("div", Object.assign({
-            className: "khb_drawer-container-2"
-          }, {
-            children: [jsx("div", Object.assign({
-              className: "khb_drawer-close-section"
-            }, {
-              children: jsxs("button", Object.assign({
-                type: "button",
-                className: "khb_drawer-close-btn",
-                onClick: onClose,
-                "data-testid": "drawer-close"
-              }, {
-                children: [jsx("span", Object.assign({
-                  className: "khb_sr-only"
-                }, {
-                  children: "Close panel"
-                })), jsx(Close, {})]
-              }))
-            })), jsxs("div", Object.assign({
-              className: "khb_drawer-main"
-            }, {
-              children: [jsx("div", Object.assign({
-                className: "khb_drawer-header"
-              }, {
-                children: jsx("p", Object.assign({
-                  className: "khb_drawer-header-title"
-                }, {
-                  children: title
-                }))
-              })), jsx("div", Object.assign({
-                className: "relative flex-1 px-6 py-6 overflow-auto"
-              }, {
-                children: children
-              })), footerContent && jsx("div", Object.assign({
-                className: "khb_drawer-footer"
-              }, {
-                children: footerContent
-              }))]
-            }))]
-          }))
-        }))]
-      }))
-    }))
-  }));
-};
-
-const DNDItemsList = ({
-  onDragEnd,
-  items,
-  formatItem,
-  listCode
-}) => {
-  return jsx(DragDropContext, Object.assign({
-    onDragEnd: onDragEnd
-  }, {
-    children: jsx(Droppable, Object.assign({
-      droppableId: "droppable"
+  return jsx(DragDropContext, Object.assign({
+    onDragEnd: onDragEnd
+  }, {
+    children: jsx(Droppable, Object.assign({
+      droppableId: "droppable"
     }, {
       children: droppableProvided => jsxs("div", Object.assign({
         className: "khb_DND-items",
@@ -3936,79 +3991,13 @@ const DNDItemsList = ({
   }));
 };
 
-const FormActions = ({
-  loading: _loading = false,
-  primaryLabel: _primaryLabel = 'Submit',
-  secondaryLabel: _secondaryLabel = 'Cancel',
-  onPrimaryButtonClick,
-  onSecondaryButtonClick
-}) => {
-  return jsxs(Fragment, {
-    children: [jsx(Button, Object.assign({
-      type: "secondary",
-      disabled: _loading,
-      onClick: onSecondaryButtonClick
-    }, {
-      children: _secondaryLabel
-    })), jsx(Button, Object.assign({
-      onClick: onPrimaryButtonClick,
-      disabled: _loading
-    }, {
-      children: _primaryLabel
-    }))]
-  });
-};
-
-const PageFormActions = ({
-  formRef
-}) => {
-  const {
-    onError
-  } = useProviderState();
-  const {
-    closeForm,
-    loading,
-    canAdd,
-    canUpdate,
-    t
-  } = usePageState();
-
-  const onSubmitClick = e => {
-    var _a;
-
-    if (!formRef) {
-      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
-    } else if (!formRef.current) {
-      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'ref' prop to the form!`);
-    } // formRef is provided
-
-
-    e === null || e === void 0 ? void 0 : e.preventDefault();
-    (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
-      cancelable: true,
-      bubbles: true
-    }));
-  };
-
-  if (!canAdd && !canUpdate) return null;
-  return jsx(FormActions, {
-    loading: loading,
-    primaryLabel: t('saveButtonText'),
-    onPrimaryButtonClick: onSubmitClick,
-    onSecondaryButtonClick: closeForm,
-    secondaryLabel: t('cancelButtonText')
-  });
-};
-
 const PageForm = ({
-  onClose,
-  open,
-  formState,
   formRef
 }) => {
   const {
     t,
     data,
+    formState,
     onPageFormSubmit,
     selectedWidgets,
     setSelectedWidgets,
@@ -4069,31 +4058,22 @@ const PageForm = ({
     onChange: widgets => setSelectedWidgets(widgets)
   }];
   if (!canAdd && !canUpdate) return null;
-  return jsx(Drawer, Object.assign({
-    open: open,
-    onClose: onClose,
-    title: formState === 'ADD' ? t('page.addPageTitle') : formState === 'UPDATE' ? t('page.updatePageTitle') : '',
-    footerContent: jsx(PageFormActions, {
-      formRef: formRef
-    })
+  return jsxs("div", Object.assign({
+    className: "khb_form"
   }, {
-    children: jsxs("div", Object.assign({
-      className: "khb_form"
-    }, {
-      children: [jsx(Form, {
-        schema: pageFormSchema,
-        onSubmit: onPageFormSubmit,
-        ref: formRef,
-        data: data,
-        isUpdating: formState === 'UPDATE',
-        updates: {
-          widgets: selectedWidgets.map(widget => widget.value)
-        }
-      }), jsx(DNDItemsList, {
-        onDragEnd: onDragEnd,
-        items: selectedWidgets
-      })]
-    }))
+    children: [jsx(Form, {
+      schema: pageFormSchema,
+      onSubmit: onPageFormSubmit,
+      ref: formRef,
+      data: data,
+      isUpdating: formState === 'UPDATE',
+      updates: {
+        widgets: selectedWidgets.map(widget => widget.value)
+      }
+    }), jsx(DNDItemsList, {
+      onDragEnd: onDragEnd,
+      items: selectedWidgets
+    })]
   }));
 };
 
@@ -4265,6 +4245,29 @@ const PagePagination = () => {
   });
 };
 
+const Close = ({
+  srText,
+  className
+}) => {
+  return jsxs(Fragment, {
+    children: [srText ? jsx("span", Object.assign({
+      className: "khb_sr-only"
+    }, {
+      children: srText
+    })) : null, jsx("svg", Object.assign({
+      className: className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "-6 -6 24 24",
+      width: "24",
+      fill: "currentColor"
+    }, {
+      children: jsx("path", {
+        d: "M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"
+      })
+    }))]
+  });
+};
+
 const Modal = ({
   open,
   onClose,
@@ -4399,6 +4402,155 @@ const DeleteModal = ({
   })) : null;
 };
 
+const Drawer = ({
+  children,
+  open,
+  onClose,
+  title,
+  footerContent
+}) => {
+  const nodeRef = useRef(null);
+  return jsx(CSSTransition, Object.assign({
+    ref: nodeRef,
+    in: open,
+    timeout: {
+      enter: 250,
+      exit: 350
+    },
+    classNames: "khb_drawer",
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, {
+    children: jsx("div", Object.assign({
+      className: "khb_drawer-wrapper-1",
+      "aria-labelledby": "modal",
+      role: "dialog",
+      "aria-modal": "true",
+      ref: nodeRef,
+      "data-testid": "drawer"
+    }, {
+      children: jsxs("div", Object.assign({
+        className: "khb_drawer-wrapper-2"
+      }, {
+        children: [jsx("div", {
+          className: "khb_drawer-backdrop",
+          role: "button",
+          onClick: onClose,
+          onKeyDown: onClose,
+          tabIndex: 0
+        }), jsx("div", Object.assign({
+          className: "khb_drawer-container-1"
+        }, {
+          children: jsxs("div", Object.assign({
+            className: "khb_drawer-container-2"
+          }, {
+            children: [jsx("div", Object.assign({
+              className: "khb_drawer-close-section"
+            }, {
+              children: jsxs("button", Object.assign({
+                type: "button",
+                className: "khb_drawer-close-btn",
+                onClick: onClose,
+                "data-testid": "drawer-close"
+              }, {
+                children: [jsx("span", Object.assign({
+                  className: "khb_sr-only"
+                }, {
+                  children: "Close panel"
+                })), jsx(Close, {})]
+              }))
+            })), jsxs("div", Object.assign({
+              className: "khb_drawer-main"
+            }, {
+              children: [jsx("div", Object.assign({
+                className: "khb_drawer-header"
+              }, {
+                children: jsx("p", Object.assign({
+                  className: "khb_drawer-header-title"
+                }, {
+                  children: title
+                }))
+              })), jsx("div", Object.assign({
+                className: "relative flex-1 px-6 py-6 overflow-auto"
+              }, {
+                children: children
+              })), footerContent && jsx("div", Object.assign({
+                className: "khb_drawer-footer"
+              }, {
+                children: footerContent
+              }))]
+            }))]
+          }))
+        }))]
+      }))
+    }))
+  }));
+};
+
+const FormActions = ({
+  loading: _loading = false,
+  primaryLabel: _primaryLabel = 'Submit',
+  secondaryLabel: _secondaryLabel = 'Cancel',
+  onPrimaryButtonClick,
+  onSecondaryButtonClick
+}) => {
+  return jsxs(Fragment, {
+    children: [jsx(Button, Object.assign({
+      type: "secondary",
+      disabled: _loading,
+      onClick: onSecondaryButtonClick
+    }, {
+      children: _secondaryLabel
+    })), jsx(Button, Object.assign({
+      onClick: onPrimaryButtonClick,
+      disabled: _loading
+    }, {
+      children: _primaryLabel
+    }))]
+  });
+};
+
+const PageFormActions = ({
+  formRef
+}) => {
+  const {
+    onError
+  } = useProviderState();
+  const {
+    closeForm,
+    loading,
+    canAdd,
+    canUpdate,
+    t
+  } = usePageState();
+
+  const onSubmitClick = e => {
+    var _a;
+
+    if (!formRef) {
+      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is required to submit the form!`);
+    } else if (!formRef.current) {
+      return onError(CALLBACK_CODES.INTERNAL, 'error', `formRef is empty, make sure it's passed as 'ref' prop to the form!`);
+    } // formRef is provided
+
+
+    e === null || e === void 0 ? void 0 : e.preventDefault();
+    (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('submit', {
+      cancelable: true,
+      bubbles: true
+    }));
+  };
+
+  if (!canAdd && !canUpdate) return null;
+  return jsx(FormActions, {
+    loading: loading,
+    primaryLabel: t('saveButtonText'),
+    onPrimaryButtonClick: onSubmitClick,
+    onSecondaryButtonClick: closeForm,
+    secondaryLabel: t('cancelButtonText')
+  });
+};
+
 const PageFormWrapper = ({
   children
 }) => {
@@ -4485,9 +4637,6 @@ const Page = ({
       })
     }, {
       children: jsx(PageForm, {
-        open: formState === 'ADD' || formState === 'UPDATE',
-        onClose: onCloseForm,
-        formState: formState,
         formRef: formRef
       })
     })), itemData && jsx(DeleteModal, {
@@ -4804,28 +4953,33 @@ const useWidget = ({
 
 
   const onWidgetFormSubmit = data => __awaiter(void 0, void 0, void 0, function* () {
-    setLoading(true);
-    const code = formState === 'ADD' ? CALLBACK_CODES.CREATE : CALLBACK_CODES.UPDATE;
-    const api = getApiType({
-      routes,
-      action: formState === 'ADD' ? 'CREATE' : 'UPDATE',
-      prefix: widgetRoutesPrefix,
-      id: itemData === null || itemData === void 0 ? void 0 : itemData['_id']
-    });
-    const response = yield commonApi({
-      baseUrl,
-      token,
-      data,
-      url: api.url,
-      method: api.method,
-      onError: handleError(code)
-    });
+    try {
+      setLoading(true);
+      const code = formState === 'ADD' ? CALLBACK_CODES.CREATE : CALLBACK_CODES.UPDATE;
+      const api = getApiType({
+        routes,
+        action: formState === 'ADD' ? 'CREATE' : 'UPDATE',
+        prefix: widgetRoutesPrefix,
+        id: itemData === null || itemData === void 0 ? void 0 : itemData['_id']
+      });
+      const response = yield commonApi({
+        baseUrl,
+        token,
+        data,
+        url: api.url,
+        method: api.method,
+        onError: handleError(code)
+      });
 
-    if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
+      if ((response === null || response === void 0 ? void 0 : response.code) === 'SUCCESS') {
+        setLoading(false);
+        onSuccess(code, response === null || response === void 0 ? void 0 : response.code, response === null || response === void 0 ? void 0 : response.message);
+        getWidgets();
+        onCloseForm();
+      }
+    } catch (error) {
       setLoading(false);
-      onSuccess(code, response === null || response === void 0 ? void 0 : response.code, response === null || response === void 0 ? void 0 : response.message);
-      getWidgets();
-      onCloseForm();
+      onError(CALLBACK_CODES.UPDATE, INTERNAL_ERROR_CODE, error.message);
     }
   });
 
@@ -6608,9 +6762,20 @@ const TileItemsAccordian = ({
 };
 
 const WidgetForm = ({
-  formState,
   formRef
 }) => {
+  const {
+    register,
+    formState: {
+      errors
+    },
+    handleSubmit,
+    reset,
+    setValue,
+    control,
+    watch,
+    setError
+  } = useForm();
   const {
     baseUrl,
     switchClass
@@ -6621,6 +6786,7 @@ const WidgetForm = ({
     canAdd,
     canUpdate,
     tilesList,
+    formState,
     widgetTypes,
     selectionTypes,
     onTileFormSubmit,
@@ -6680,6 +6846,11 @@ const WidgetForm = ({
       setTilesEnabled(true);
     }
   }, [formState]);
+  useEffect(() => {
+    if (!isEmpty(data)) {
+      reset(data);
+    }
+  }, [data, reset]);
 
   const onChangeSearch = str => {
     if (callerRef.current) clearTimeout(callerRef.current);
@@ -6744,8 +6915,14 @@ const WidgetForm = ({
         return temporaryData;
       });
     }
-  }; // Schemas
+  };
 
+  useEffect(() => {
+    const subscription = watch((value, {
+      name
+    }) => onWidgetFormInputChange(value, name));
+    return () => subscription.unsubscribe();
+  }, [watch, onWidgetFormInputChange]); // Schemas
 
   const widgetFormSchema = [{
     label: `${t('widget.name')}`,
@@ -6908,17 +7085,22 @@ const WidgetForm = ({
   return jsxs("div", Object.assign({
     className: "khb_form"
   }, {
-    children: [jsx(Form, {
+    children: [jsx(SimpleForm, {
       schema: widgetFormSchema,
       onSubmit: onFormSubmit,
       ref: formRef,
-      data: data,
       isUpdating: formState === 'UPDATE',
-      watcher: onWidgetFormInputChange
+      register: register,
+      errors: errors,
+      handleSubmit: handleSubmit,
+      setValue: setValue,
+      control: control,
+      setError: setError
     }), !tilesEnabled && jsx(DNDItemsList, {
       items: selectedCollectionItems,
       onDragEnd: onCollectionIndexChange,
-      formatItem: formatListItem
+      formatItem: formatListItem,
+      listCode: selectedWidgetType === null || selectedWidgetType === void 0 ? void 0 : selectedWidgetType.value
     }), tilesEnabled && jsx(Fragment, {
       children: jsx(TileItemsAccordian, {
         collapseId: "imageItems",
@@ -7157,9 +7339,6 @@ const Widget = ({
       })
     }, {
       children: jsx(WidgetForm, {
-        open: formState === 'ADD' || formState === 'UPDATE',
-        onClose: onCloseForm,
-        formState: formState,
         formRef: widgetFormRef
       })
     })), itemData && jsx(DeleteModal, {

package/lib/components/Page/Form/PageForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormProps } from '../../../types';
-declare const PageForm: ({ onClose, open, formState, formRef }: FormProps) => JSX.Element | null;
+declare const PageForm: ({ formRef }: FormProps) => JSX.Element | null;
 export default PageForm;

package/lib/components/Page/Page/Page.d.ts

@@ -4,7 +4,7 @@ declare const Page: {
     ({ t, loader, explicitForm, children, permissions, }: PageProps): JSX.Element;
     Table: () => JSX.Element | null;
     Search: () => JSX.Element;
-    Form: ({ onClose, open, formState, formRef }: import("../../../types").FormProps) => JSX.Element | null;
+    Form: ({ formRef }: import("../../../types").FormProps) => JSX.Element | null;
     AddButton: () => JSX.Element;
     Pagination: () => JSX.Element;
     FormActions: ({ formRef }: import("../../../types").FormActionWrapperProps) => JSX.Element | null;

package/lib/components/Widget/Form/WidgetForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormProps } from '../../../types';
-declare const WidgetForm: ({ formState, formRef }: FormProps) => JSX.Element | null;
+declare const WidgetForm: ({ formRef }: FormProps) => JSX.Element | null;
 export default WidgetForm;

package/lib/components/Widget/Widget/Widget.d.ts

@@ -3,7 +3,7 @@ import { WidgetProps } from '../../../types';
 declare const Widget: {
     ({ t, routes, loader, explicitForm, permissions, preConfirmDelete, formatListItem, formatOptionLabel, children, }: WidgetProps): JSX.Element;
     Table: () => JSX.Element | null;
-    Form: ({ formState, formRef }: import("../../../types").FormProps) => JSX.Element | null;
+    Form: ({ formRef }: import("../../../types").FormProps) => JSX.Element | null;
     AddButton: () => JSX.Element;
     Search: () => JSX.Element;
     Pagination: () => JSX.Element;

package/lib/components/common/Form/SimpleForm.d.ts

@@ -0,0 +1,17 @@
+import React, { MutableRefObject } from 'react';
+import { CombineObjectType, SchemaType } from '../../../types';
+interface SimpleFormProps {
+    schema: SchemaType[];
+    isUpdating?: boolean;
+    onSubmit: (data: CombineObjectType) => void;
+    enable?: boolean;
+    ref: MutableRefObject<HTMLFormElement | null>;
+    register: any;
+    errors: any;
+    handleSubmit: any;
+    setValue: any;
+    control: any;
+    setError: any;
+}
+declare const SimpleForm: React.ForwardRefExoticComponent<Pick<SimpleFormProps, "schema" | "onSubmit" | "isUpdating" | "enable" | "register" | "errors" | "handleSubmit" | "setValue" | "control" | "setError"> & React.RefAttributes<HTMLFormElement | null>>;
+export default SimpleForm;

package/lib/components/common/Form/index.d.ts

@@ -1,2 +1,4 @@
 import Form from "./Form";
+import SimpleForm from "./SimpleForm";
 export default Form;
+export { SimpleForm };

package/lib/types/components.d.ts

@@ -125,9 +125,6 @@ export interface SchemaType extends ReactSelectProps {
     wrapperClassName?: string;
 }
 export interface FormProps {
-    open: boolean;
-    onClose: () => void;
-    formState: FormActionTypes | undefined;
     formRef: MutableRefObject<HTMLFormElement | null>;
 }
 export interface InputRendererProps {
@@ -176,7 +173,6 @@ export interface SchemaType extends ReactSelectProps {
         label: string;
     }[];
     isMulti?: boolean;
-    defaultValue?: string | number | boolean;
     placeholder?: string;
     required?: boolean;
     onChange?: (e: any) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator-admin",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "dependencies": {
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.0",