JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

JavaScript

const base = {
  selectedView: 'basicAccount',
  context: {},
  elements: [{
    "name": "email",
    "component": "TextInput",
    "validations": [{
        "type": "required",
        "message": "error.required"
      },
      {
        "type": "email",
        "message": "error.email"
      }
    ],
    "attributes": {
      "type": "email",
      "name": "email",
      "autoComplete": true,
      "label": "basicAccount.email.placeholder"
    }
  }, {
     "name": "nested",
     "type": "group",
     "elements": [{"name": "address", "elements": ["email", "password"]}]
  }],
  views: [{
    "name": "basicAccount",
    "layout": "layoutType",
    "elements": ["email", "firstName"],
  }, {
    "name": "info",
    "elements": ["header", "name"]
  }],
  "action": {
    data: [],
    error: [],
    path: "uob"
  },
  order: 0
}


const toExtend1 = {
  selectedView: 'basicAccount',
  context: {},
  elements: [{
    "name": "firstName",
    "component": "TextInput",
    "attributes": {
      "type": "text",
      "name": "firstName",
      "autoComplete": true,
      "label": "basicAccount.name.placeholder"
    }
  },{
     "name": "nested",
     "type": "group",
     "elements": [{"name": "address", "elements": ["name", "age"]}]
  }],
  views: [{
    "name": "basicAccount",
    "layout": "layoutType",
    "elements": ["middleName", "lastName"],
  },{
     "name": "addressInfo",
     "elements": ["docUploader", "nextButton"]
  }],
  "action": {
    data: [],
    error: [],
    path: "uob"
  },
  order: 1
}


/* const customerizer = (objValue, srcValue, key, object, source, stack) => {
   return _.isArray(objValue) ? objValue.concat(srcValue) : undefined
}
_.mergeWith({}, [base, toExtend1]) */

const templateConfig = [base, toExtend1]

/* const template = templateConfig.reduce((acc, value) => {
  if (Object.keys(acc).length) {
    acc.elements = acc.elements.map(elem => Object.assign({}, elem, value.elements.find(item => item.name == elem.name)))
    acc.views =...