@onereach/webform
Version:
Content Builder includes several views for: - Content builder view itself; - Web Form view; - Slack block-kit builder;
146 lines (115 loc) ā¢ 4.11 kB
Markdown
# Content Builder App
Content Builder includes several views for:
- Content builder view itself;
- Web Form view;
- Slack block-kit builder;
## Structure of project source:
- ./src/**assets** - scss, fonts, images files (static stuff)
- ./src/**components** - for each view / channel create specific folder. You could use components from common folder in any view or component
š¦ components
ā£ š common
ā£ š content-builder
ā£ š slack
ā š webform
- ./src/**constants** - labels and texts constants.
// TODO - all labels and text have to be brought to constants
- ./src/**data** - Static data. Channels components structure.
```javascript
{
"web": [
{
"type": "input", // name of auto imported component field.
"props": {
"icon": "input", // (1) name of icon from https://material.io/
"label": "Input", // (2) just a visible lable for user
"helpText": "Input element", // (3) help text (visible on hover)
"codeMode": true // (4) ability to use codemode for one field
}
},
...
],
"slack": [
...
],
...
}
```
- ./src/**helpers** - just js helpers.
- ./src/**mixins** - just vue helpers mixins.
- ./src/**router** - just Vue router (https://router.vuejs.org/). If you want to create a new view, don't forget to add the path to the router and restart dev server.
- ./src/**store** - app vuex.
- ./src/**utils** - just js helpers.
// TODO merge this folder with **helpers**.
- ./src/**views** - this app is created for several projects which connected to content builder.
- ./src/**lib.js** - this file create wrapper around webform view and published as npm package for usage as library in html scripts or in vue / reac component.
```html
// Sample of usage of webform
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Google icons css file -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Container for rendering app -->
<div id="form"></div>
<!-- Sample of submit button -->
<div>
<button id="submitButton">
Submit
</button>
</div>
<!-- Webform script -->
<script src="https://unpkg.com/@onereach/webform@latest"></script>
<script>
// You can use this app in simple html file or any js component
const options = {
selector: '#form',
formUrl: 'https://cbuilder.staging.onereach.ai/webform/3da948b0-15cc-459e-8dae-a6673d0b2b40/ZGIwMTc3MTctN2UwYy00ZmJlLWI0NjYtZDQwMTc1ZDM3MTNm',
hideSubmitButton: false // show or hide submit button in webform App
}
// Create new instance and pass options
const form = new oneReachWebForm.default(options);
// Callbacks for events
const loaded = () => {
console.log('Loaded');
}
const onSubmit = () => {
console.log('onSubmit');
}
const onSubmitSuccess = ({ result, formData }) => {
console.log('onSubmitSuccess', { result, formData });
}
const onSubmitError = (error) => {
console.log('onSubmitError', error);
}
// Subscrine on events
form.on('on-webform-loaded', loaded);
form.on('on-webform-submit', onSubmit);
form.on('on-webform-submit-success', onSubmitSuccess);
form.on('on-webform-submit-error', onSubmitError);
// Emit event
const submitButton = document.querySelector('#submitButton');
submitButton.addEventListener('click', () => {
form.emit('emit-webform-submit')
})
</script>
</body>
</html>
```
- ./src/**main.ts** - app start point. We try to integrate ts.
// TODO: intergate ts to components.
## Dev process
1) ```npm install```
2) ```npm run dev``` (served dev and dev:lib)
or
2) ``` or run [env] .```
## Build process
1) ```npm run build``` - build lib and app files
2) If you want to update lib version, in package.json increment version and run command: ```npm publish```
## Deploy
1) ```or deploy [env] .```