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.

Contents

1. Development with Host Application

   • Engine
     • Installation
     • Usage
   • Frontend package
     • Installation
     • Instructions for development
     • Components
     • Other Functions

2. Instructions for Publishing

Development with Host Application

Engine

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

Installation

1. Add this line to your application's Gemfile:

   source "NEETO_GEM_SERVER_URL" do
     # ..existing gems
   
     gem 'neeto-templates-engine'
   end
   

2. And then execute:

   bundle install
   

3. 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.

4. 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.
• title: An optional prop to override the default pane title.
• description: An optional prop to override the default pane description.

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.
• resourceId: A string (eg: formId, siteId), to specify the route of the entity. It is 'id' by default.

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.

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.