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

• [React]
• [Redux]
• [Redux-form]
• [Semantic-UI]
• [Jest]
• [Enzyme]
• [Flow]

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:

1. Url: <your_API>/mailbuilder/templatesList
   Method: GET
   Description: return templatesList - array with templates(type of one template).

2. Url: <your_API>/mailbuilder/delete/${id}
   Method: POST
   Body: -
   Description: remove template by id.

3. Url: <your_API>/file/upload
   Method: POST
   Body: formData - data from window with selecting image file

4. 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
   }

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

Type of template - Object of Object with params:

|Name of field |Type | |:----------------|:---------------------| |name |string | |description |string | |id |number or string | |rows |rows type | |commonPlaceStyles|commonPlaceStyles type|

Demo