@bigbinary/neeto-templates-frontend 1.1.16 → 1.1.18

package/README.md

@@ -1,18 +1,144 @@
 # neeto-templates-nano
+The `neeto-templates-nano` facilitates the administration of templates and template settings within neeto applications. The nano exports the `@bigbinary/neeto-templates-frontend` NPM package and `neeto-templates-engine` Rails engine for development.
 
-To manage templates across the neeto products.
+# Contents
+1. [Development with Host Application](#development-with-host-application)
+    - [Engine](#engine)
+      * [Installation](#installation)
+      * [Usage](#usage)
+    - [Frontend package](#frontend-package)
+      * [Installation](#installation-1)
+      * [Components](#components)
+      * [Other Functions](#other-functions)
 
-# Local Development Setup
+2. [Instructions for Publishing](#instructions-for-publishing)
 
-1. Setup
-   [Instructions](https://github.com/bigbinary/neeto-engineering/tree/main/Local-Development-Setup).
+# Development with Host Application
+## Engine
+The engine is used to manage templates and template settings across neeto products.
 
-2. Run `yarn build` to bundle the app.
+### Installation
+1. Add this line to your application's Gemfile:
+   ```ruby
+   source "NEETO_GEM_SERVER_URL" do
+     # ..existing gems
 
-3. Visit http://spinkart.lvh.me:9100 and login with email `oliver@example.com`
-   and password `welcome`.
+     gem 'neeto-templates-engine'
+   end
+   ```
+2. And then execute:
+   ```shell
+   bundle install
+   ```
+3. Run the command to bring in all migrations, routes, models, associations, and controllers required from the engine to the host application:
+   ```shell
+   bundle exec rails neeto_templates_engine:install
+   ```
+   This will prompt the user to enter the resource model name. The resource model name is the name of the model that will be used as a template. For example, if the resource model name is `Form`, this will dynamically generate all necessary associations, routes, and controllers required for the `neeto_templates_engine` to work with the `Form` model.
 
-# Publish instructions
+   > **_Note:_** _You might need to re-arrange the associations statements which
+   > are normally inserted to top most lines of the file, to satisfy the Rails
+   > standards._
 
-1. [Engine and package installation](./docs/engine-and-package-installation.md)
-2. [Building and releasing](./docs/building-and-releasing.md)
+4. Add the migrations to the database:
+   ```shell
+   bundle exec rails db:migrate
+   ```
+
+### Usage
+
+The `neeto_templates_engine` whitelists the `templates` subdomain for creation of the templates. All the entities (sites/forms) created in the `templates` subdomain are fetched as templates in the other subdomains.
+
+You can learn more about the setup and usage here:
+1. [Models](./docs/engine/models.md)
+2. [Controllers](./docs/engine/controllers.md)
+
+## Frontend package
+
+To seamlessly integrate `NeetoTemplatesNano` into your host app, it iss essential to whitelist the `templates` subdomain. The entities built under this subdomain will be the listed as templates in the `CreateTemplateModal` component.
+
+### Installation
+Install the latest `NeetoTemplatesNano` package using the below command:
+
+```shell
+yarn add @bigbinary/neeto-templates-frontend
+```
+
+Install the dependency package:
+
+```shell
+yarn add @tailwindcss/line-clamp
+```
+Once installed add the plugin to your `tailwind.config.js` file:
+
+```js
+ plugins: [require("@tailwindcss/line-clamp")]
+```
+
+### Components
+#### `CreateTemplateModal` ([source code](https://github.com/bigbinary/neeto-templates-nano/blob/aec3368475c252284a25820c08ff151c1cdd254c/app/javascript/src/components/CreateTemplateModal/index.jsx))
+The CreateTemplateModal component is a React component used for creating and previewing templates within a web application. It provides a user interface for users to create templates and view their details.
+
+##### Props
+- `isOpen`: A boolean indicating whether the modal is open or closed.
+- `onClose`: A function to close the modal.
+- `isCreating`: A boolean flag indicating whether a template is currently being created.
+- `refetchResource`: A function to refetch template resources.
+- `onCreate`: A function to handle template creation.
+- `afterCreate`: A function to perform actions after template creation.
+
+##### Usage
+```jsx
+import React from "react";
+
+import { CreateTemplateModal } from "@bigbinary/neeto-templates-frontend";
+
+const App = () => {
+  return (
+    <CreateTemplateModal
+      isOpen
+      onClose={() => {}}
+      isCreating={false}
+      refetchResource={() => {}}
+      onCreate={() => {}}
+      afterCreate={() => {}}
+    />
+  );
+};
+```
+
+#### `TemplateSettings` ([source code](https://github.com/bigbinary/neeto-templates-nano/blob/aec3368475c252284a25820c08ff151c1cdd254c/app/javascript/src/components/TemplateSettings/index.jsx))
+The TemplateSettings component is a React component used for configuring and editing template settings within a web application. It provides a user interface for users to customize various aspects of a template, including its image, tags, and preview.
+
+##### Props
+- `onCancelTemplatePreview`: A function to handle canceling the template preview.
+- `breadcrumbs`: An array of breadcrumb items for navigation.
+- `className`: A CSS class name for styling.
+
+##### Usage
+```jsx
+import React from "react";
+
+import { TemplateSettings } from "@bigbinary/neeto-templates-frontend";
+
+const App = () => {
+  const breadcrumbs = [
+    {
+      link: "/forms",
+      text: "Forms",
+    },
+  ];
+  return (
+    <TemplateSettings
+      onCancelTemplatePreview={() => {}}
+      breadcrumbs={breadcrumbs}
+    />
+  );
+};
+```
+
+Use the `PrivateRoute` component to conditionally render this component only for the `templates` subdomain.
+
+# Instructions for Publishing
+
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

package/app/javascript/src/translations/en.json

@@ -8,7 +8,7 @@
   "neetoTemplate": {
     "templates": {
       "createNewEntity": "Create new {{taxonomies.entity.singular}}",
-      "description": "Select template as a starting point",
+      "description": "Select a template to get started with building your {{taxonomies.entity.singular}}.",
       "blankCard": {
         "title": "Start from scratch",
         "description": "A blank slate"

package/dist/index.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var neetoCist = require('@bigbinary/neeto-cist');
+var neetocist = require('neetocist');
 var neetoui = require('@bigbinary/neetoui');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var Search = require('@bigbinary/neeto-molecules/Search');
@@ -1889,7 +1889,6 @@ var arrayPrefixGenerators = {
 };
 
 var isArray$1 = Array.isArray;
-var split = String.prototype.split;
 var push = Array.prototype.push;
 var pushToArray = function (arr, valueOrArray) {
     push.apply(arr, isArray$1(valueOrArray) ? valueOrArray : [valueOrArray]);
@@ -1991,14 +1990,6 @@ var stringify$1 = function stringify(
     if (isNonNullishPrimitive(obj) || utils$1.isBuffer(obj)) {
         if (encoder) {
             var keyValue = encodeValuesOnly ? prefix : encoder(prefix, defaults$1.encoder, charset, 'key', format);
-            if (generateArrayPrefix === 'comma' && encodeValuesOnly) {
-                var valuesArray = split.call(String(obj), ',');
-                var valuesJoined = '';
-                for (var i = 0; i < valuesArray.length; ++i) {
-                    valuesJoined += (i === 0 ? '' : ',') + formatter(encoder(valuesArray[i], defaults$1.encoder, charset, 'value', format));
-                }
-                return [formatter(keyValue) + (commaRoundTrip && isArray$1(obj) && valuesArray.length === 1 ? '[]' : '') + '=' + valuesJoined];
-            }
             return [formatter(keyValue) + '=' + formatter(encoder(obj, defaults$1.encoder, charset, 'value', format))];
         }
         return [formatter(prefix) + '=' + formatter(String(obj))];
@@ -2013,6 +2004,9 @@ var stringify$1 = function stringify(
     var objKeys;
     if (generateArrayPrefix === 'comma' && isArray$1(obj)) {
         // we need to join elements in
+        if (encodeValuesOnly && encoder) {
+            obj = utils$1.maybeMap(obj, encoder);
+        }
         objKeys = [{ value: obj.length > 0 ? obj.join(',') || null : void undefined }];
     } else if (isArray$1(filter)) {
         objKeys = filter;
@@ -2045,7 +2039,7 @@ var stringify$1 = function stringify(
             commaRoundTrip,
             strictNullHandling,
             skipNulls,
-            encoder,
+            generateArrayPrefix === 'comma' && encodeValuesOnly && isArray$1(obj) ? null : encoder,
             filter,
             sort,
             allowDots,
@@ -2244,7 +2238,8 @@ var isoSentinel = 'utf8=%26%2310003%3B'; // encodeURIComponent('&#10003;')
 var charsetSentinel = 'utf8=%E2%9C%93'; // encodeURIComponent('✓')
 
 var parseValues = function parseQueryStringValues(str, options) {
-    var obj = {};
+    var obj = { __proto__: null };
+
     var cleanStr = options.ignoreQueryPrefix ? str.replace(/^\?/, '') : str;
     var limit = options.parameterLimit === Infinity ? undefined : options.parameterLimit;
     var parts = cleanStr.split(options.delimiter, limit);
@@ -2595,14 +2590,14 @@ var BlankCard = function BlankCard(_ref) {
     title = _ref.title,
     description = _ref.description,
     _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
+    onClick = _ref$onClick === void 0 ? neetocist.noop : _ref$onClick,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-rounded-lg neeto-ui-bg-white hover:neeto-ui-bg-white neeto-ui-border-primary-500 outline-none flex cursor-pointer flex-col items-center justify-center border border-dashed p-6 transition-all duration-300 ease-in-out hover:border-solid focus:border-solid",
     "data-cy": "start-from-scratch-button",
     tabIndex: 0,
-    onClick: !disabled ? onClick : neetoCist.noop
+    onClick: !disabled ? onClick : neetocist.noop
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-text-primary-500 mb-4"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -2756,7 +2751,8 @@ var List = function List(_ref) {
     hasNextPage = _useFetchTemplates$ha === void 0 ? false : _useFetchTemplates$ha,
     fetchNextPage = _useFetchTemplates.fetchNextPage,
     isTemplatesLoading = _useFetchTemplates.isLoading,
-    data = _useFetchTemplates.data;
+    _useFetchTemplates$da = _useFetchTemplates.data,
+    data = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da;
   var _useInfiniteScroll = useInfiniteScroll({
       loading: isTemplatesLoading,
       hasNextPage: hasNextPage,
@@ -2774,9 +2770,12 @@ var List = function List(_ref) {
   if (isTemplatesLoading) {
     return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
   }
-  var tags = data.tags,
-    templates = data.templates,
-    templatesCount = data.templatesCount;
+  var _data$tags = data.tags,
+    tags = _data$tags === void 0 ? [] : _data$tags,
+    _data$templates = data.templates,
+    templates = _data$templates === void 0 ? [] : _data$templates,
+    _data$templatesCount = data.templatesCount,
+    templatesCount = _data$templatesCount === void 0 ? 0 : _data$templatesCount;
   var categories = [_objectSpread$2(_objectSpread$2({}, DEFAULT_CATEGORY), {}, {
     count: templatesCount
   })].concat(_toConsumableArray(tags));
@@ -2839,7 +2838,7 @@ var List = function List(_ref) {
     icon: isCreating ? neetoui.Spinner : SvgCustom,
     title: t("neetoTemplate.templates.blankCard.title"),
     onClick: onCreate
-  }), templates === null || templates === void 0 ? void 0 : templates.map(function (template, index) {
+  }), templates.map(function (template, index) {
     return /*#__PURE__*/React__default["default"].createElement(Card, {
       key: index,
       template: template,
@@ -2917,9 +2916,9 @@ var CreateTemplateModal = function CreateTemplateModal(_ref) {
     isCreating = _ref.isCreating,
     refetchResource = _ref.refetchResource,
     _ref$onCreate = _ref.onCreate,
-    onCreate = _ref$onCreate === void 0 ? neetoCist.noop : _ref$onCreate,
+    onCreate = _ref$onCreate === void 0 ? neetocist.noop : _ref$onCreate,
     _ref$afterCreate = _ref.afterCreate,
-    afterCreate = _ref$afterCreate === void 0 ? neetoCist.noop : _ref$afterCreate;
+    afterCreate = _ref$afterCreate === void 0 ? neetocist.noop : _ref$afterCreate;
   var _useState = React.useState(TEMPLATE_SCREENS.LIST),
     _useState2 = _slicedToArray(_useState, 2),
     currentScreen = _useState2[0],
@@ -3054,7 +3053,7 @@ var Tags = function Tags(_ref) {
     return onUpdate([].concat(_toConsumableArray(selectedTags), [newTag]));
   };
   var handleTagRemove = function handleTagRemove(removedTag) {
-    var updatedTags = neetoCist.removeBy({
+    var updatedTags = neetocist.removeBy({
       value: removedTag.value
     }, selectedTags);
     onUpdate(updatedTags);
@@ -3121,7 +3120,7 @@ var buildSelectOptionsBy = function buildSelectOptionsBy(labelField, options) {
 };
 var buildTagOptions = function buildTagOptions() {
   var tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return neetoCist.renameKeys({
+  return neetocist.renameKeys({
     id: "value",
     name: "label"
   }, tags);