@knovator/pagecreator 0.0.1 → 0.0.2

package/README.md

@@ -1,7 +1,212 @@
-# user
+<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 -->
+<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]
+[![MIT License][license-shield]][license-url]
 
-## Running unit tests
 
-Run `nx test user` 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</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="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ol>
+</details>
+
+
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+`@knovator/pagecreator` is built with intent to build pages that are depend on backend data, and admin can change how page will look like.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+### Built With
+
+* [React.js](https://reactjs.org/)
+* [react-slick](https://www.npmjs.com/package/react-slick)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+To integrate `@knovator/pagecreator` is designed to be used in ReactJS/NextJS project.
+
+### Prerequisites
+
+We can use `@knovator/pagecreator` 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
+  ```
+
+### Installation
+
+1. Install NPM packages
+   ```sh
+   npm install @knovator/pagecreator
+   # or
+   yarn add @knovator/pagecreator
+   ```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+<!-- USAGE EXAMPLES -->
+## Usage
+
+### Widget
+```jsx
+import { Widget } from '@knovator/pagecreator';
+
+<Widget
+    apiBaseUrl=''
+    widgetData={}
+    onClick={...}
+>
+```
+**Props**
+- `widgetData`
+    - [widgetData](data-formats.md#widgetdata)
+- `apiBaseUrl`
+    - baseUrl to start prefix image urls
+- `formatItem` (optional): `(item: TileData) => JSX.Element`
+    - Customize look of Items
+- `onClick` (optional): `(item: TileData) => void;`
+    - OnItem click handler
+
+### Page
+```jsx
+import { Page } from '@knovator/pagecreator';
+
+<Page
+    apiBaseUrl=''
+    pageData={...}
+    onClick={...}
+>
+```
+**Props**
+- `title` (optional)
+    - Title to show on page
+- `apiBaseUrl`
+    - baseUrl to start prefix image urls
+- `pageData`
+    - [PageData](data-formats.md#pagedata)
+- `formatItem` (optional): `(CODE: string, item: TileData) => JSX.Element;`
+    - Customize look of Items
+- `onClick` (optional): `(CODE: string, item: TileData) => JSX.Element;`
+    - On Item click handler
+
+### getData
+It's possible to fetch data by yourself and pass them to `Widget` or `Page` components, but if you need easy solution you can use `getData` function.
+```js
+const pageData = await getData({
+    url: '...',
+    code: 'HOMEPAGE',
+});
+```
+
+<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
+[license-shield]: https://img.shields.io/github/license/knovator/pagecreator.svg?style=for-the-badge
+[license-url]: https://github.com/knovator/pagecreator/blob/main/LICENSE.txt

package/index.js

@@ -1,20 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Slider from 'react-slick';
 
 function FixedWidget(_ref) {
   var widgetData = _ref.widgetData,
-      formatTile = _ref.formatTile,
       formatItem = _ref.formatItem;
-  return jsxs("div", Object.assign({
+  return jsx("div", Object.assign({
     className: "grid grid-cols-".concat(widgetData.mobilePerRow, " md:grid-cols-").concat(widgetData.tabletPerRow, " lg:grid-cols-").concat(widgetData.webPerRow)
   }, {
-    children: [widgetData.widgetType === 'Image' ? widgetData.tiles.map(function (tile) {
-      return formatTile(tile);
+    children: widgetData.widgetType === 'Image' ? widgetData.tiles.map(function (tile) {
+      return formatItem(tile);
     }) : widgetData.collectionItems.map(function (item) {
       return formatItem(item);
-    }), widgetData.tiles.map(function (tile) {
-      return formatTile(tile);
-    })]
+    })
   }));
 }
 
@@ -117,7 +114,7 @@ var SlickArrowRight = function SlickArrowRight(_a) {
 
 function CarouselWidget(_ref) {
   var widgetData = _ref.widgetData,
-      formatTile = _ref.formatTile,
+      formatItem = _ref.formatItem,
       settings = _ref.settings;
   var defaultSettings = {
     dots: false,
@@ -144,57 +141,14 @@ function CarouselWidget(_ref) {
   };
   if (!widgetData) return null;
   return jsx(Slider, Object.assign({}, settings ? settings : defaultSettings, {
-    children: widgetData.tiles.map(function (tile) {
-      return formatTile(tile);
+    children: widgetData.widgetType === 'Image' ? widgetData.tiles.map(function (tile) {
+      return formatItem(tile);
+    }) : widgetData.collectionItems.map(function (item) {
+      return formatItem(item);
     })
   }));
 }
 
-function SimpleCard(_ref) {
-  var imageUrl = _ref.imageUrl,
-      imageAltText = _ref.imageAltText,
-      subTitle = _ref.subTitle,
-      label = _ref.label,
-      title = _ref.title,
-      _onClick = _ref.onClick;
-  return jsxs("div", Object.assign({
-    className: "kpc_simple-card",
-    onClick: function onClick() {
-      return _onClick && _onClick();
-    }
-  }, {
-    children: [jsx("div", Object.assign({
-      className: "kpc_simple-card-heading"
-    }, {
-      children: jsx("img", {
-        src: imageUrl,
-        className: "kpc_simple-card-image",
-        alt: imageAltText
-      })
-    })), jsxs("div", Object.assign({
-      className: "kpc_simple-card-body"
-    }, {
-      children: [label && jsx("p", Object.assign({
-        className: "kpc_simple-card-label"
-      }, {
-        children: label
-      })), jsxs("div", Object.assign({
-        className: "kpc_simple-card-content"
-      }, {
-        children: [jsx("h4", Object.assign({
-          className: "kpc_simple-card-title"
-        }, {
-          children: title
-        })), subTitle && jsx("p", Object.assign({
-          className: "kpc_simple-card-subtitle"
-        }, {
-          children: subTitle
-        }))]
-      }))]
-    }))]
-  }));
-}
-
 function Banner(_ref) {
   var imageAltText = _ref.imageAltText,
       imageUrl = _ref.imageUrl,
@@ -214,9 +168,13 @@ function Banner(_ref) {
 }
 
 function CollectionItem(_ref) {
-  var name = _ref.name;
+  var name = _ref.name,
+      _onClick = _ref.onClick;
   return jsx("div", Object.assign({
-    className: "kpc_item"
+    className: "kpc_item",
+    onClick: function onClick() {
+      return _onClick && _onClick();
+    }
   }, {
     children: jsx("p", Object.assign({
       className: "kpc_item-text"
@@ -230,26 +188,25 @@ function Widget(_ref) {
   var widgetData = _ref.widgetData,
       apiBaseUrl = _ref.apiBaseUrl,
       formatItem = _ref.formatItem,
-      _onClick = _ref.onClick;
+      _onClick = _ref.onClick,
+      settings = _ref.settings;
 
   var formatTile = function formatTile(tile) {
-    var _a, _b;
+    var _a;
 
     if (typeof formatItem === 'function' && formatItem) return formatItem(tile);else if (widgetData.widgetType === 'Image') return jsx(Banner, {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       imageUrl: "".concat(apiBaseUrl).concat((_a = tile.img) === null || _a === void 0 ? void 0 : _a.uri),
-      imageAltText: tile.altText
-    }, tile._id);else return jsx(SimpleCard, {
+      imageAltText: tile._id,
       onClick: function onClick() {
         return _onClick && _onClick(tile);
-      },
-      title: tile.title,
-      imageUrl: "".concat(apiBaseUrl).concat((_b = tile.img) === null || _b === void 0 ? void 0 : _b.uri),
-      imageAltText: tile.altText
-    }, tile._id);
-  };
-
-  var formatCollectionItem = function formatCollectionItem(item) {
-    return jsx(CollectionItem, Object.assign({}, item), item._id);
+      }
+    }, tile._id);else return jsx(CollectionItem, Object.assign({
+      onClick: function onClick() {
+        return _onClick && _onClick(tile);
+      }
+    }, tile), tile._id);
   };
 
   if (!widgetData) return null;
@@ -264,15 +221,14 @@ function Widget(_ref) {
       className: "kpc_widget-body"
     }, {
       children: widgetData.selectionType === 'Carousel' ? jsx(CarouselWidget, {
+        settings: settings,
         apiBaseUrl: apiBaseUrl,
         widgetData: widgetData,
-        formatItem: formatCollectionItem,
-        formatTile: formatTile
+        formatItem: formatTile
       }) : jsx(FixedWidget, {
         apiBaseUrl: apiBaseUrl,
         widgetData: widgetData,
-        formatItem: formatCollectionItem,
-        formatTile: formatTile
+        formatItem: formatTile
       })
     }))]
   }));

package/lib/components/common/collection-item/collection-item.d.ts

@@ -1,3 +1,3 @@
 import { CollectionItemProps } from '../../../types';
-export declare function CollectionItem({ name }: CollectionItemProps): JSX.Element;
+export declare function CollectionItem({ name, onClick }: CollectionItemProps): JSX.Element;
 export default CollectionItem;

package/lib/components/widget/carousel-widget/carousel-widget.d.ts

@@ -1,3 +1,3 @@
 import { WidgetTypeProps } from '../../../types';
-export declare function CarouselWidget({ widgetData, formatTile, settings }: WidgetTypeProps): JSX.Element | null;
+export declare function CarouselWidget({ widgetData, formatItem, settings, }: WidgetTypeProps): JSX.Element | null;
 export default CarouselWidget;

package/lib/components/widget/fixed-widget/fixed-widget.d.ts

@@ -1,3 +1,3 @@
 import { WidgetTypeProps } from '../../../types';
-export declare function FixedWidget({ widgetData, formatTile, formatItem, }: WidgetTypeProps): JSX.Element;
+export declare function FixedWidget({ widgetData, formatItem }: WidgetTypeProps): JSX.Element;
 export default FixedWidget;

package/lib/components/widget/widget.d.ts

@@ -1,3 +1,3 @@
 import { WidgetProps } from '../../types';
-export declare function Widget({ widgetData, apiBaseUrl, formatItem, onClick, }: WidgetProps): JSX.Element | null;
+export declare function Widget({ widgetData, apiBaseUrl, formatItem, onClick, settings, }: WidgetProps): JSX.Element | null;
 export default Widget;

package/lib/types/components.d.ts

@@ -33,22 +33,22 @@ export interface ReviewCardProps extends UserCardProps {
 export interface WidgetProps {
     widgetData: WidgetData;
     apiBaseUrl: string;
-    formatItem?: (item: TileData) => JSX.Element;
-    onClick?: (item: TileData) => void;
+    formatItem?: (item: TileData | CollectionItemType) => JSX.Element;
+    onClick?: (item: TileData | CollectionItemType) => void;
+    settings?: Settings;
 }
 export interface WidgetTypeProps extends WidgetProps {
-    formatTile: (item: TileData) => JSX.Element;
-    formatItem: (item: CollectionItemType) => JSX.Element;
-    settings?: Settings;
+    formatItem: (item: CollectionItemType | TileData) => JSX.Element;
 }
 export interface PageProps {
     title?: string;
     apiBaseUrl: string;
     pageData: PageData;
-    formatItem?: (CODE: string, item: TileData) => JSX.Element;
-    onClick?: (CODE: string, item: TileData) => JSX.Element;
+    formatItem?: (CODE: string, item: TileData | CollectionItemType) => JSX.Element;
+    onClick?: (CODE: string, item: TileData | CollectionItemType) => JSX.Element;
 }
 export interface CollectionItemProps {
     name?: string;
+    onClick?: () => void;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knovator/pagecreator",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "repository": {
     "type": "git",
     "url": "git@github.com:knovator/pagecreator.git"