@cloudbusiness/mailbuilder NPM

MailBuilder

by @cloudbusiness

About MailBuilder

Mailbuilder it's a library with UI components, with which you can create simple to understand and useful application for creating e-mails.

Technologies

Installation

npm i @cloudbusiness/mailbuilder

For update library

npm i @cloudbusiness/mailbuilder@latest

Getting started

1 First of all. Create your back-end with urls:

Url: <your_API>/mailbuilder/templatesList
Method: GET
Description: return templatesList - array with templates(type of one template).
Url: <your_API>/mailbuilder/delete/${id}
Method: POST
Body: -
Description: remove template by id.
Url: <your_API>/file/upload
Method: POST
Body: formData - data from window with selecting image file
Url <your_API>/mailbuilder/template/${formId}
Method: PUT
Body:
{
id - personal id,
commonPlaceStyles - settings with special common place styles type description - text with description of template; string
name - name of template; string
rows - array of data with special rows type stringHTML - HTML from edit place
}
Url: <your_API>/mailbuilder/template
Method: POST
Body:
{
id - personal id,
commonPlaceStyles - settings with special common place styles type
description - text with description of template; string
name - name of template; string
rows - array of data with special rows type stringHTML - HTML from edit place
}

2 Next you can create page with MailBuilders simple ReactComponent.

EditMailTemplateSideBar
Component with Sidebar, which has settings to change view of email

Props:

Name of props	Required	Type	Description
setActiveLoader	true	Function	Function runs Loader which you create in your project
setInactiveLoader	true	Function	Function stops Loader which you create in your project
serverUrl	false	string	Url which uses to send requests for server
jwtToken	false	string	Token to insert at params in fetch

import {EditMailTemplateSideBar} from '@cloudbusiness/mailbuilder/lib';

<EditMailTemplateSideBar setActiveLoader={[Function]}
                         setInactiveLoader={[Function]}
                         serverUrl={[string]}
                         jwtToken={[string]}
/>

EditMailTemplateViewer
Component with Place, which has view of email

import {EditMailTemplateViewer} from '@cloudbusiness/mailbuilder/lib';

<EditMailTemplateViewer/>

MailTemplateList
Component with list of templates, which has cards of template with name and description

Props:

Name of props	Required	Type	Description
setActiveLoader	true	Function	Function runs Loader which you create in your project
setInactiveLoader	true	Function	Function stops Loader which you create in your project
clickOnTemplate	true	Function	Function run when user click on template
serverUrl	false	string	Url which uses to send requests for server
jwtToken	false	string	Token to insert at params in fetch

import {EditMailTemplateSideBar} from '@cloudbusiness/mailbuilder/lib';

<MailTemplateList setActiveLoader={[Function]}
                  setInactiveLoader={[Function]}
                  clickOnTemplate={[Funciton]}
                  serverUrl={[string]}
                  jwtToken={[string]}
/>

MainTableTemplatesComponent
Analog of MailTemplateList with different view. Component with list of templates, which has cards of template with name and description

Props:

Name of props	Required	Type	Description
setActiveLoader	true	Function	Function runs Loader which you create in your project
setInactiveLoader	true	Function	Function stops Loader which you create in your project
clickOnTemplate	true	Function	Function run when user click on template
serverUrl	false	string	Url which uses to send requests for server
jwtToken	false	string	Token to insert at params in fetch

import {EditMailTemplateSideBar} from '@cloudbusiness/mailbuilder/lib';

<MainTableTemplatesComponent setActiveLoader={[Function]}
                             setInactiveLoader={[Function]}
                             clickOnTemplate={[Funciton]}
                             serverUrl={[string]}
                             jwtToken={[string]}
/>

SidebarHeaderContent
Component with header, which has button for return to list templates and for return to main app(if you use routing - pathname should be '/editMailTemplate' ).

Props:

Name of props	Required	Type	Description
clickGoToApp	true	Function	Function for button 'Back to App'
clickGoToTemplates	true	Function	Function for button 'Back to list'

import {SidebarHeaderContent} from '@cloudbusiness/mailbuilder/lib';

<SidebarHeaderContent clickGoToApp={[Function]}
                      clickGoToTemplates={[Function]}
/>

3 Merge mailbuilder reducer to your app

Mailbuilder ruducer is:

Name of field mailbuilder reducer	Description
templates	list of templates
activeTab	name of active tab in sidebar with settings
activeBlockForChangeSettings	controlling clicked block, has number of row and column by active block
allViewerRowsByActiveTemplate	data by active template
isOpenSidebarSettings	controlling sidebar with settings
droppingBlockData	controlling dropped blocks from sidebar

Example of merge:

import {mailbuilderReducer} from '@cloudbusiness/mailbuilder/lib';

export default combineReducers({
    ...your data,
    mailbuilderReducer
});

Types

Type of commonPlaceStyles - Object with params:

Name of field	Type
width	string
borderColor	string
borderSize	string
borderStyle	backgroundColor

Type of rows - Array of Object with params:

Name of field	Type
columns	Columns type

Type of columns - Array of Object with params:

Name of field	Type
text	string
width	string
height	string
textColor	string
textWidthAlign	string
textVerticalAlign	string
backgroundColor	string
fontSize	string
fontFamily	string
italic	boolean
bold	boolean
underline	boolean
borderColor	string
borderSize	string
borderStyle	string
imageWidth	string
imageHeight	string
img	string
buttonColor	string
sizeOfButton	string
linkTo	string
type	string
isBasicButton	string or boolean
editor	string