@onereach/webform
v0.3.12
Published
Content Builder includes several views for: - Content builder view itself; - Web Form view; - Slack block-kit builder;
Downloads
280
Readme
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.
{
"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.
// Sample of usage of webform
<!DOCTYPE html>
<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
npm installnpm run dev(served dev and dev:lib)
or
or run [env] .
Build process
npm run build- build lib and app files- If you want to update lib version, in package.json increment version and run command:
npm publish
Deploy
or deploy [env] .