raphaelspimenta

{
  "_beagleComponent_": "beagle:container",
  "context": {
    "id": "myContext",
    "value": "Contexto Inicial"
  },
  "children": [
    {
      "_beagleComponent_": "beagle:text",
      "text": "@{myContext}"

raphaelspimenta

// Angular way
<beagle-remote-view [loadParams]={path: '/home'}></beagle-remote-view>

// React way
<BeagleRemoteView path="/home" />

raphaelspimenta

{
  "_beagleComponent_": "beagle:container",
  "children": [
    {
      "_beagleComponent_": "custom:filho1",
      "id": "1"
    },
    {
      "_beagleComponent_": "custom:filho2",
      "id": "2"

raphaelspimenta

<form>
  <input name="Nome" />
  <input type="number" name="Idade" />
  <button type="submit">Enviar</button>
</form>

raphaelspimenta

{
  "_beagleComponent_": "beagle:simpleform",
  "children": [
    {
      "_beagleComponent_": "beagle:input",
      "name": "Nome"
    },
    {
      "_beagleComponent_": "beagle:input",
      "name": "Idade",

raphaelspimenta

function camelCase(str) {
  return str.replace(/\W+(.)/g, function(match, chr) {
      return chr.toUpperCase()
  })
}

function translateStyle(uiTree) {
  if (uiTree.style) 
    uiTree.style.reduce((result, value, key) => {
      delete uiTree.style[key]

raphaelspimenta

{
  "_beagleType_":"container",
  "style": {
    "display": "flex",
    "flex-direction": "row",
    "justify-content": "center"
  }
}

raphaelspimenta

const config = {
  baseUrl: 'https://www.beagle-backend.com.br',
  components: myComponentsMap,
  headers: { 'access-token': myAccessToken },
  strategy: 'network-with-fallback-to-cache',
}

raphaelspimenta

const components = {
  beagle:loading: MyLoadingComponent,
  beagle:error: MyErrorComponent,
  custom:component: MyCustomComponent,
}

raphaelspimenta

{
  "_beagleType_":"container",
  "children": [
    {
      "_beagleType_":"title",
      "value":"Oh my! Beagle WEB actualy works..."
    }
  ]
}