JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script type="text/ractive" id="reflection">
  {{#if err}}
  <div id="err" style="border: solid 1px red; color: red">
    <p>{{err.message}}</p>
  </div>
  {{else}}
  <div id='component-spec' style="border:solid 1px #c0c0c0; color: #191970; display: flex; flex-wrap: wrap; flex-direction: column">
    <h2>{{comp.name}}</h2>
    <div id="settings">
	    				<h4 style="background: #FFE; color: #87CEFA">SETTINGS<h4>
	    				<ul>
	    				{{#comp.settings: key}}
	    					<li>
	    						<p>{{key}}</p>
                  {{#.: key}}
                  <ul>
                  	<li>{{key}}:{{.}}</li>
                  </ul>
                  {{/.}}
	    					</li>
	    				{{/comp.states}}
	    				</ul>
	    			</div>
    <div id="data">
      <h4 style="background: #FFE; color: #87CEFA">DATA<h4>
	    				<ul>
	    				{{#comp.data: key}}
	    					<li>
	    						<p>{{key}}</p>
	    						<ul>
	    						{{#.: key}}
	    							<li>{{key}}:{{.}}</li>
	    						{{/.}}
	    						</ul>
	    					</li>
	    				{{/comp.data}}
	    				</ul>
	    			</div>
	    			<div id="actions">
	    				<h4 style="background: #FFE; color: #87CEFA">ACTIONS<h4>
	    				<ul>
	    				{{#comp.actions: key}}
	    					<li>
	    						<p>{{key}}</p>
	    					</li>
	    				{{/comp.actions}}
	    				</ul>
	    			</div>
	    			<div id="states">
	    				<h4 style="background: #FFE; color: #87CEFA">STATES<h4>
	    				<ul>
	    				{{#comp.states: key}}
	    					<li>
	    						<p>{{key}}</p>
	    					</li>
	    				{{/comp.states}}
	    				</ul>
	    			</div>
	    			
        		</div>
        	{{/if}}
        </script>

JavaScript

var Widget = Ractive.extend({
  template: '#reflection',
  data: {
    comp: {
      "name": "MY_INFO_MENU",
      "data": {
        "fullName": {
          "type": "Description",
          "isBuiltInType": true
        },
        "userLanguagePreferenceOption": {
          "type": "List",
          "itemType": "Description",
          "isBuiltInType": true
        },
        "userLanguagePreference": {
          "type": "Description",
          "isBuiltInType": true
        }
      },
      "actions": {
        "requestMyInfoMenu": true,
        "requestMyProfile ":true,
        "exitMyInfoMenu": true,
        "requestMyProfilePersonalDetails": true,
        "requestMyProfileAccounts": true,
        "requestMyProfileAlerts": true,
        "requestMyProfileSettings": true,
        "requestChangeInLanguagePreference": true,
        "restrictTabMovementAda": true
      },
      "states": {
        "myInfoMenuOptionSelected": true
      },
      "settings": {
        "requestMyProfilePersonalDetailsLabel": {
          "value": "Personal details"
        },
        "requestMyProfileAccountsLabel": {
          "value": "Accounts"
        },
        "requestMyProfileAlertsLabel": {
          "value": "Alerts"
        },
        "requestMyProfileSettingsLabel": {
          "value": "More settings"
        },
        "languageOptions": {
          "value": "Content"
        },
        "requestMyProfileNavigation": {
          "value": "My profile"
        },
        "requestMyInfoMenuAda": {
          "value": "My profile and language: opens menu"
        },
        "exitMyInfoMenuAda": {
          "value": "My profile and language: closes menu"
        },
        "requestMyProfileAda": {
          "value": "opens menu"
        },
        "_init": {
          "value": "Content"
        }
      }
    },
    err: {}
  }
});

var ractive = new Ractive({
  'el': 'body',
  'template': '<Widget/>',
  'components': {
    'Widget': Widget
  }
})