@knovator/pagecreator-admin 0.0.7 → 0.0.8

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 : {};
@@ -3617,7 +3617,8 @@ const Form = /*#__PURE__*/forwardRef(({
     setValue,
     control,
     setError,
-    watch
+    watch,
+    getValues
   } = useForm(); // setting update data in form
 
   useEffect(() => {
@@ -3655,7 +3656,7 @@ const Form = /*#__PURE__*/forwardRef(({
   }, [data, reset, schema]);
 
   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,15 +3700,26 @@ const Form = /*#__PURE__*/forwardRef(({
           break;
 
         case 'select':
-          input = jsx(Input.Select, {
-            options: schema.options,
-            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",
-            disabled: _isUpdating && typeof schema.editable !== 'undefined' && !schema.editable || !_enable,
-            required: schema.required,
-            wrapperClassName: schema.wrapperClassName
+          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;
 
@@ -3718,7 +3730,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,114 +3804,6 @@ const Form = /*#__PURE__*/forwardRef(({
   }));
 });
 
-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 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,
@@ -3936,79 +3840,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 +3907,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 +4094,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 +4251,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 +4486,6 @@ const Page = ({
       })
     }, {
       children: jsx(PageForm, {
-        open: formState === 'ADD' || formState === 'UPDATE',
-        onClose: onCloseForm,
-        formState: formState,
         formRef: formRef
       })
     })), itemData && jsx(DeleteModal, {
@@ -4804,28 +4802,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,7 +6611,6 @@ const TileItemsAccordian = ({
 };
 
 const WidgetForm = ({
-  formState,
   formRef
 }) => {
   const {
@@ -6621,6 +6623,7 @@ const WidgetForm = ({
     canAdd,
     canUpdate,
     tilesList,
+    formState,
     widgetTypes,
     selectionTypes,
     onTileFormSubmit,
@@ -6918,7 +6921,8 @@ const WidgetForm = ({
     }), !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 +7161,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/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 {

package/package.json

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