@bigbinary/neeto-templates-frontend NPM

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.

Development with Host Application
- Engine
  - Installation
  - Usage
- Frontend package
Instructions for Publishing

Development with Host Application

Engine

The engine is used to manage templates and template settings across neeto products.

Installation

Add this line to your application's Gemfile:

source "NEETO_GEM_SERVER_URL" do
  # ..existing gems

  gem 'neeto-templates-engine'
end

And then execute:
```
bundle install
```
Run the command to bring in all migrations, routes, models, associations, and controllers required from the engine to the host application:
```
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.
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.
Add the migrations to the database:
```
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 2. Controllers

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:

yarn add @bigbinary/neeto-templates-frontend

Instructions for development

Check the Frontend package development guide for step-by-step instructions to develop the

Components

`CreateTemplateModal` (source code)

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

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)

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

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.

`TemplateTags` (source code)

The TemplateTags component is a React component used for displaying and managing tags within a web application. It provides a user interface for users to add, remove, edit and merge tags.

Props

breadcrumbs: An array of breadcrumb items for navigation.
tagsPath: A string representing the path to the frontend route for tags page.

otherProps: Additional props to be passed to the component.

Usage

import React from "react";
import { TemplateTags } from "@bigbinary/neeto-templates-frontend";

const App = () => {
  const breadcrumbs = [
    {
      link: "/forms",
      text: "Forms",
    },
  ];
  return (
    <TemplateTags
      breadcrumbs={breadcrumbs}
      tagsPath="/settings/templates/tags"
    />
  );
};

Use the PrivateRoute component (no need to add exact) to conditionally render this component only for the templates subdomain.