everbee-landing-page-builder 1.0.0

package/.storybook/main.js

@@ -0,0 +1,20 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "everbee-landing-page-builder",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build-lib": "rollup -c"
+  },
+  "author": "abhay-everbee",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/preset-react": "^7.24.1",
+    "@chromatic-com/storybook": "^1.3.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-interactions": "^8.0.6",
+    "@storybook/addon-links": "^8.0.6",
+    "@storybook/addon-onboarding": "^8.0.6",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.0.6",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-webpack5": "^8.0.6",
+    "@storybook/test": "^8.0.6",
+    "grapesjs": "^0.21.9",
+    "grapesjs-blocks-basic": "^1.0.2",
+    "grapesjs-custom-code": "^1.0.2",
+    "grapesjs-navbar": "^1.0.2",
+    "grapesjs-parser-postcss": "^1.0.3",
+    "grapesjs-plugin-export": "^1.0.12",
+    "grapesjs-plugin-forms": "^2.0.6",
+    "grapesjs-preset-webpage": "^1.0.3",
+    "grapesjs-style-bg": "^2.0.2",
+    "grapesjs-tabs": "^1.0.6",
+    "grapesjs-tooltip": "^0.1.8",
+    "grapesjs-tui-image-editor": "^1.0.2",
+    "grapesjs-typed": "^2.0.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^2.79.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^8.0.6"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,42 @@
+import babel from "rollup-plugin-babel";
+import resolve from "@rollup/plugin-node-resolve";
+import external from "rollup-plugin-peer-deps-external";
+import { terser } from "rollup-plugin-terser";
+import postcss from 'rollup-plugin-postcss';
+import commonjs from '@rollup/plugin-commonjs';
+
+export default [
+  {
+    context: 'window',
+    input: "./src/index.js",
+    external: ['dist/css/grapes.min.css'],
+    output: [
+      {
+        file: "dist/index.js",
+        format: "cjs",
+      },
+      {
+        file: "dist/index.es.js",
+        format: "es",
+        exports: "named",
+      },
+    ],
+    plugins: [
+      babel({
+        exclude: "node_modules/**",
+        presets: ["@babel/preset-react"],
+      }),
+      external(),
+      resolve(),
+      terser(),
+      postcss({
+        // Include any postcss plugins or options here
+        extract: true, // Extract CSS to a separate file
+        minimize: true, // Minimize CSS output
+        modules: true, // Enable CSS modules if needed
+        // Add any other postcss plugins or options here as needed
+      }),
+      commonjs()
+    ],
+  },
+];

package/src/components/Editor.js

@@ -0,0 +1,552 @@
+import React from "react";
+import "grapesjs/dist/css/grapes.min.css";
+import grapesjs from "grapesjs";
+import { useEffect, useState } from "react";
+import grapesjsPresetWebpage from "grapesjs-preset-webpage";
+import blocksBasic from "grapesjs-blocks-basic";
+import tuiImageEditor from "grapesjs-tui-image-editor";
+import navbarEditor from "grapesjs-navbar";
+import typed from "grapesjs-typed";
+import gjsForms from "grapesjs-plugin-forms";
+
+const LandingPageEditor = ({ cssContent = "", htmlContent = "" }) => {
+  // const [htmlComponents, setHtmlComponents] = useState(false);
+  const [editorState, setEditorState] = useState(null);
+  const script = function () {
+    alert("This is a custom component test");
+    // `this` is bound to the component element
+    console.log("the element", this);
+  };
+
+  const mergeTags = editor => {
+    const newType = 'var-placeholder';
+    // Define a component with `textable` property
+    editor.DomComponents.addType(newType, {
+      model: {
+        defaults: {
+          textable: 1,
+          placeholder: 'VARIABLE-1',
+        },
+        toHTML() {
+          return `{{ ${this.get('placeholder')} }}`;
+        },
+      },
+    // The view below it's just an example of creating a different UX
+      view: {
+        tagName: 'span',
+        events: {
+          'change': 'updatePlh',
+        },
+        // Update the model once the select is changed
+        updatePlh(ev) {
+          this.model.set({ placeholder: ev.target.value });
+          this.updateProps();
+        },
+        // When we blur from a TextComponent, all its children components are
+        // flattened via innerHTML and parsed by the editor. So to keep the state
+        // of our props in sync with the model so we need to expose props in the HTML
+        updateProps() {
+          const { el, model } = this;
+          el.setAttribute('data-gjs-placeholder',  model.get('placeholder'));
+        },
+        onRender() {
+          const { model, el } = this;
+          const currentPlh = model.get('placeholder');
+          const select = document.createElement('select');
+          const options = [ 'VARIABLE-1', 'VARIABLE-2', 'VARIABLE-3' ];
+          select.innerHTML = options.map(item => `<option value="${item}" ${item === currentPlh ? 'selected' : ''}>
+      ${item}
+      </option>`).join('');
+          while (el.firstChild) el.removeChild(el.firstChild);
+          el.appendChild(select);
+          select.setAttribute('style', 'padding: 5px; border-radius: 3px; border: none; -webkit-appearance: none;border: 2px solid black; background: aliceblue; border-radius:9px;');
+          this.updateProps();
+        },
+      }
+    });
+
+    // Use the component in blocks
+    editor.BlockManager.add(newType, {
+      label: 'Merge Tags',
+      content: { type: newType },
+    });
+
+    // const extendedTextType = 'extended-cmp' 
+    // editor.Components.addType(extendedTextType, {
+    //   extend: "text",
+    //   model: {
+    //     defaults: {
+    //       tagName: 'p',
+    //       style: {padding: "25px"},
+    //       droppable: true,
+    //       components: "Hello extended text component World!!"
+    //     },
+    //   },
+    // });
+    // editor.Blocks.add(extendedTextType, {
+    //   label: 'Extended Text component',
+    //   content: { type: extendedTextType },
+    //   select: true,
+    // });
+
+
+  }
+  const myNewComponentTypes = editor => {
+    editor.DomComponents.addType('my-input-type', {
+      // Make the editor understand when to bind `my-input-type`
+      isComponent: el => el.tagName === 'INPUT',
+    
+      // Model definition
+      model: {
+        // Default properties
+        defaults: {
+          tagName: 'input',
+          //draggable: 'form, form *', // Can be dropped only inside `form` elements
+          //droppable: false, // Can't drop other elements inside
+          attributes: { // Default attributes
+            type: 'text',
+            name: 'default-name',
+            placeholder: 'Insert text here',
+          },
+          traits: [
+            'name',
+            'placeholder',
+            { type: 'checkbox', name: 'required' },
+            'id'
+          ],
+        }
+      }
+    });
+
+    // Define a new custom component
+    editor.Components.addType("img-text-col", {
+      model: {
+        defaults: {
+          attributes: { class: 'cmp-css' },
+          components: `
+            <div type='wrapper'>
+              <div class='gjs-row'> 
+                <div class='gjs-cell' style='text-align:center'> 
+                  I'm a text node 
+                  <span>Component with styles<span>
+                  <div class="cmp-css-a">Component A</div>
+                  <div class="cmp-css-b">Component B</div>
+                  <input type='my-input-type' /> 
+                </div> 
+                <div class='gjs-cell'><img alt="Image here"/></div>   
+              </div>
+            </div>
+          `, 
+          styles: `
+            .cmp-css { color: red }
+            .cmp-css-a { color: green }
+            .cmp-css-b { color: blue }
+            .gjs-row {display:flex;}
+            .gjs-cell {min-height:75px; flex-grow:1;  flex-basis:100%; border:1px solid green; padding: 2px; }
+            @media (max-width: 992px) {
+              .cmp-css{ color: darkred; }
+              .cmp-css-a { color: darkgreen }
+              .cmp-css-b { color: darkblue }
+            }
+          `, 
+        },
+      },
+    });
+
+  };
+
+  const btnScript = function(props) {
+    console.log('My lib options: ');
+  
+    //console.log('My lib options: ',props);
+  };
+
+  
+  const btnss = (editor) => {
+    var newType = 'my-button';
+    editor.DomComponents.addType(newType, {
+      // ...
+      model: {
+        defaults: {
+          attributes: {itemsCounter: 0},
+          script: btnScript, 
+          // Define traits, in order to change your properties
+          // traits: [
+          //  {
+          //     type: 'number',
+          //     name: 'itemsCounter',
+          //     changeProp: true,
+          //     min: 0, // Minimum number value
+          //     max: 100, // Maximum number value
+          //     step: 1, // Number of steps
+          //   }
+          // ],
+        },
+        toHTML() {
+          console.log('this',this);
+          return `<div>${this.get('itemsCounter')}</div>`;
+        },
+        'script-props': ['itemsCounter'],
+      },
+      view: {
+        // Be default, the tag of the element is the same of the model
+        tagName: 'div',
+    
+        // Add easily component specific listeners with `events`
+        // Being component specific (eg. you can't attach here listeners to window)
+        // you don't need to care about removing them when the component is removed,
+        // they will be managed automatically by the editor
+        events: {
+          click: 'clickOnElement',
+          // You can also make use of event delegation
+          // and listen to events bubbled from some inner element
+          'dblclick .inner-el': 'innerElClick',
+        },
+    
+        innerElClick(ev) {
+          ev.stopPropagation();
+          // ...
+    
+          // If you need you can access the model from any function in the view
+          this.model.components('Update inner components');
+        },
+    
+        // On init you can create listeners, like in the model, or start some other
+        // function at the beginning
+        init({ model }) {
+          var itemCount = 0;
+          // Do something in view on model property change
+          this.listenTo(model, 'change:itemsCounter', this.handlePropChange);
+          this.on('change:attributes:itemsCounter', this.handlePropChange);
+    
+          // If you attach listeners on outside objects remember to unbind
+          // them in `removed` function in order to avoid memory leaks
+          //this.onDocClick = this.onDocClick.bind(this);
+          document.addEventListener('click', this.onDocClick)
+        },
+        handlePropChange(e) { 
+          console.log('handlePropChange',e);
+          const btn = this.el.querySelector('#add_to_cart'); 
+          btn.innerHTML = `+ ${e.get('itemsCounter')}`;
+           
+        },
+        // Callback triggered when the element is removed from the canvas
+        removed() {
+          document.removeEventListener('click', this.onDocClick)
+        },
+    
+        // Do something with the content once the element is rendered.
+        // The DOM element is passed as `el` in the argument object,
+        // but you can access it from any function via `this.el`
+        async onRender({ el, model }) { 
+          var itemsCounter = this.model.attributes.itemsCounter;
+          const btn = document.createElement('button');
+          const label = document.createElement('button');
+          label.innerHTML =  `${itemsCounter}`;
+          label.id='add_to_cart'
+          btn.value = '+';
+          btn.innerHTML = '+'; 
+          btn.addEventListener('click', () => {  
+            var itemsCounter = this.model.attributes.itemsCounter; 
+            this.model.attributes.itemsCounter = itemsCounter + 1;
+            const btn = this.el.querySelector('#add_to_cart'); 
+            btn.innerHTML = ` ${this.model.attributes.itemsCounter}`;
+             
+            //const component = editor.getSelected();
+            // console.log(component.getTrait('itemsCounter').props());
+            // const component = editor.getSelected(); // Component selected in canvas
+            // const traits = component.get('traits'); 
+            //var trait = component.getTrait('itemsCounter'); 
+            //console.log('trait',trait); 
+            //trait.set('itemsCounter', parseInt(this.model.attributes.itemsCounter) + 1); 
+            //trait.set({name: 'itemsCounter', itemsCounter: parseInt(this.model.attributes.itemsCounter) + 1}); 
+            //console.log('after update', this.model.getTrait('itemsCounter'));
+             
+            //this.model.dispatchEvent(new CustomEvent('change'));
+            // trait.attributes.itemsCounter = parseInt(this.model.attributes.itemsCounter) + 1;
+          }); 
+          el.appendChild(btn);
+          el.appendChild(label);
+
+          const btn1 = document.createElement('button');
+          btn1.id='remove_to_cart'
+          btn1.value = '-'; 
+          btn1.innerHTML =  '-';;
+          btn1.addEventListener('click', () => {  
+            var itemsCounter = this.model.attributes.itemsCounter; 
+            this.model.attributes.itemsCounter = itemsCounter - 1;
+            const btn = this.el.querySelector('#add_to_cart'); 
+            btn.innerHTML = ` ${this.model.attributes.itemsCounter}`; 
+          });
+          el.appendChild(btn1);
+
+
+          fetch("https://email.everbee.com/api/v1/shops/best_products?category=newest", {
+            method: "GET",headers: {
+              'Authorization-Token': 'b86e5a9b-8678-41fe-b3b9-0d156ad45938',
+            }, }).then((response) => response.json())
+            .then((json) =>{
+              console.log(json);
+              json.products.map((product,index)=>{
+                var child = document.createElement('img');
+                child.title = `Product ${index}`; 
+                child.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+'
+                el.appendChild(child);
+              })
+            });
+        },
+    
+        // Example of async content
+        // async onRender({ el, model }) {
+        //   const asyncContent = await fetchSomething({
+        //     someDataFromModel: model.get('someData'),
+        //   });
+        //   // Remember, these changes exist only inside the editor canvas
+        //   // None of the DOM change is stored in your template data,
+        //   // if you need to store something, update the model properties
+        //   el.appendChild(asyncContent);
+        // }
+      },
+    });
+
+        // Use the component in blocks
+        editor.BlockManager.add(newType, {
+          label: 'ADD to CART',
+          asd: '11',
+          content: { type: newType, itemsCounter: 0 },
+        });
+
+  }
+  
+  useEffect(() => {
+    console.log("useEff");
+    const editor = grapesjs.init({
+      richTextEditor: {
+        actions: [
+          'bold',
+          'italic',
+          'underline',
+          'strikethrough',
+          'link',
+          'wrap',
+          {
+            name: 'custom-vars',
+            icon: `<select class="gjs-rte-action" style='min-width:100px;'>
+                    <option value="">- Select -</option>
+                    <option value="{{firstname}}">FirstName</option>
+                    <option value="{{lastname}}">LastName</option>
+                    <option value="{{age}}">Age</option>
+                  </select>`,
+            // Bind the 'result' on 'change' listener
+            event: 'change',
+            result: (rte, action) => rte.insertHTML(action.btn.firstChild.value),
+            // Reset the select on change
+            update: (rte, action) => {
+              action.btn.firstChild.value = ''
+            },
+          },
+        ],
+      },  
+      container: "#gjs",
+      components: htmlContent,
+      style: cssContent,
+      height: "700px",
+      width: "100%",
+      plugins: [
+        blocksBasic,
+        grapesjsPresetWebpage,
+        tuiImageEditor,
+        navbarEditor,
+        typed,
+        gjsForms,
+        myNewComponentTypes,
+        mergeTags,
+        btnss
+      ],
+      storageManager: false,
+      deviceManager: {
+        devices: [
+          {
+            id: "desktop",
+            name: "Desktop",
+            width: "",
+          },
+          {
+            id: "tablet",
+            name: "Tablet",
+            width: "768px",
+            widthMedia: "992px",
+          },
+          {
+            id: "mobilePortrait",
+            name: "Mobile portrait",
+            width: "320px",
+            widthMedia: "575px",
+          },
+        ],
+      },
+      pluginsOpts: {
+        [blocksBasic]: { flexGrid: true, labelImage: "null" },
+        [grapesjsPresetWebpage]: {},
+        [tuiImageEditor]: {
+          script: [
+            // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
+            "https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js",
+            "https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js",
+            "https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js",
+          ],
+          style: [
+            "https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css",
+            "https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css",
+          ],
+        },
+        gjsForms: { category: "Forms" },
+        [typed]: {
+          block: {
+            category: "Extra",
+            content: {
+              type: "typed",
+              "type-speed": 40,
+              strings: ["Text row one", "Text row two", "Text row three"],
+            },
+          },
+        },
+        [grapesjsPresetWebpage]: {
+          modalImportTitle: "Import Template",
+          modalImportLabel:
+            '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
+          modalImportContent: function (editor) {
+            return editor.getHtml() + "<style>" + editor.getCss() + "</style>";
+          },
+        },
+      },
+    });
+
+
+    // Define a new custom component
+    editor.Components.addType("comp-with-js", {
+      model: {
+        defaults: {
+          script,
+          // Add some style, just to make the component visible
+          style: {
+            width: "100px",
+            height: "100px",
+            background: "green",
+          },
+        },
+      },
+    });
+
+    // Create a block for the component, so we can drop it easily
+    editor.Blocks.add("test-block", {
+      label: "Custom Component test",
+      attributes: { class: "fa fa-text" },
+      content: [
+        { type: "comp-with-js" },
+        `<div style="color:red">Hello this is a custom component. <div>Hello this is a custom component</div> </div>`,
+      ],
+    }); 
+    
+  editor.Blocks.add("img-text-col-block", {
+    label: "Custom Div", 
+    attributes: { class: "fa fa-text" },
+    content: [
+      { type: 'img-text-col'},
+      //`<div type='wrapper'><div class='gjs-row'> <div class='gjs-cell'> I'm a text node <input/> </div> <div class='gjs-cell'><img alt="Image here"/></div>   </div></div>`
+    ],
+  });
+
+
+  // editor.addComponents(`<div> 
+  //   <span title="foo" >Hello world!!!</span>
+  //   <span title="foo" type='var-placeholder'>{{ VARIABLE-1 }}</span>
+  // </div>`);
+
+
+  setEditorState(editor);
+    return () => {};
+  }, []);
+
+  const downloadEditor = () => {
+    const jsonData = {
+      html: editorState.getHtml(),
+      css: editorState.getCss(),
+      components: editorState.getComponents(),
+    };
+
+    const html = editorState.getHtml();
+    console.log("everything", jsonData);
+    console.log("html editor", html);
+  };
+  var htmlContent1 = {
+      "html": "<body id=\"igmq\"><div id=\"i4af\">Hi {{ VARIABLE-1 }},<br/>How are you<br/><br/>Thanks,<br/>Dave</div></body>",
+      "css": "* { box-sizing: border-box; } body {margin: 0;}#i4af{padding:10px;}",
+      "components": [
+          {
+              "type": "text",
+              "attributes": {
+                  "id": "i4af"
+              },
+              "components": [
+                  {
+                      "type": "textnode",
+                      "content": "Hi "
+                  },
+                  {
+                      "tagName": "span",
+                      "type": "var-placeholder",
+                      "attributes": {
+                          "id": "ix3w"
+                      }
+                  },
+                  {
+                      "type": "textnode",
+                      "content": ","
+                  },
+                  {
+                      "tagName": "br",
+                      "void": true
+                  },
+                  {
+                      "type": "textnode",
+                      "content": "How are you"
+                  },
+                  {
+                      "tagName": "br",
+                      "void": true
+                  },
+                  {
+                      "tagName": "br",
+                      "void": true
+                  },
+                  {
+                      "type": "textnode",
+                      "content": "Thanks,"
+                  },
+                  {
+                      "tagName": "br",
+                      "void": true
+                  },
+                  {
+                      "type": "textnode",
+                      "content": "Dave"
+                  }
+              ]
+          }
+      ]
+  }
+  const importHTML = () => {
+   editorState?.setComponents(htmlContent1);
+  };
+  return (
+    <>
+      <div id="gjs"></div>
+      <div id="blocks"></div>
+      <button onClick={downloadEditor}>Console details</button>
+      <button onClick={importHTML(htmlContent)}>import html</button>
+    </>
+  );
+};
+
+export default LandingPageEditor;

package/src/components/PageBuilder.js

@@ -0,0 +1,5 @@
+import React from "react"
+import LandingPageEditor from "./Editor";
+export const PageBuilder = () => {
+    return <div><LandingPageEditor/></div>
+}

package/src/index.js

@@ -0,0 +1 @@
+export * from './components/PageBuilder'

package/src/stories/PageBuilder.stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { PageBuilder } from "../components/PageBuilder";
+
+export default {
+  title: "PageBuilder",
+  component: PageBuilder,
+};
+
+export const pagebuilder = () => <PageBuilder />;