merged with PRs #1,2,3,4

Author: williamdyoon

app/src/components/form/Selector.tsx

@@ -0,0 +1,35 @@
+// 100% Caret
+import React from 'react';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+
+const FormSelector = (props): JSX.Element => {
+  const items = [];
+  props.items.forEach(el => {
+    items.push(<MenuItem value={el.value}>{el.text}</MenuItem>);
+  })
+  return (
+    <div className={props.classes.configRow}>
+      <div className={props.isThemeLight ? `${props.classes.configType} ${props.classes.lightThemeFontColor}` : `${props.classes.configType} ${props.classes.darkThemeFontColor}`}>
+        <h3>{props.title}</h3>
+      </div>
+      <div className={props.classes.configValue}>
+        <FormControl variant="filled" className={props.classes.formControl}>
+          <Select
+            value={props.selectValue}
+            name={props.name}
+            onChange={props.handleChange}
+            displayEmpty
+            className={props.classes.select}
+            inputProps={{ className: props.isThemeLight ? `${props.classes.selectInput} ${props.classes.lightThemeFontColor}` : `${props.classes.selectInput} ${props.classes.darkThemeFontColor}` }}
+          >
+            {items}
+          </Select>
+        </FormControl>
+      </div>
+    </div>
+  );
+};
+
+export default FormSelector;

app/src/components/left/HTMLItem.tsx

@@ -119,14 +119,14 @@ const HTMLItem : React.FC<{
       })
     );
   };
-
+  // Caret updated the id's to reflect the new element types input and label
   return ( // HTML Elements
     <Grid item xs={5} key={`html-g${name}`}>
-      { id <= 11 &&
+      { id <= 13 &&
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>
         </div>}
-      {id > 11 &&
+      {id > 13 &&
       <span id="customHTMLElement">
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>

app/src/components/main/DemoRender.tsx

@@ -0,0 +1,56 @@
+// 100% Caret
+import React, {
+  useState, useCallback, useContext, useEffect,
+} from 'react';
+import Button from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
+import './renderDemo.css';
+import StateContext from '../../context/context';
+
+
+const DemoRender = (props): JSX.Element => {
+  const [components, setComponents] = useState([]);
+  const [state, dispatch] = useContext(StateContext);
+  const demoContainerStyle = {
+    width: '100%',
+    backgroundColor: 'lightgrey',
+    border: '2px Solid grey',
+  };
+
+  const componentBuilder = (array, key = 0) => {
+    const componentsToRender = [];
+    for (const element of array) {
+      if (element.name !== 'separator') {
+        console.log('detail from children array', element);
+        const elementType = element.name;
+        const childId = element.childId;
+        const elementStyle = element.style;
+        const innerText = element.attributes.compText;
+        const classRender = element.attributes.cssClasses;
+        let renderedChildren;
+        if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
+          renderedChildren = componentBuilder(element.children);
+        }
+        if (elementType === 'input' || elementType === 'img') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}</Box>);
+        else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}{renderedChildren}</Box>);
+        key += 1;
+      }
+    }
+    return componentsToRender;
+  };
+
+  useEffect(() => {
+    const childrenArray = state.components[0].children;
+    console.log('Refrenced Children in State!!!', childrenArray);
+    const renderedComponents = componentBuilder(childrenArray);
+    setComponents(renderedComponents);
+  }, [state.components]);
+
+  return (
+    <div id={'renderFocus'} style={demoContainerStyle}>
+      {components.map((component, index) => component)}
+    </div>
+  );
+};
+
+export default DemoRender;

app/src/components/main/renderDemo.css

@@ -0,0 +1,8 @@
+.text-color { 
+  color: #cc0707;
+}
+.btn {
+  height: 20px;
+  width: 100px;
+  background-color: #cc0707;
+}

app/src/containers/MainContainer.tsx

@@ -1,14 +1,19 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
 import { styleContext } from './AppContainer';
+import DemoRender from '../components/main/DemoRender';
 
 const MainContainer = () => {
   const { style } = useContext(styleContext);
+
+
   return (
     <div className="main-container" style={style} >
       <div className="main">
         <CanvasContainer />
+        {/* Caret Component Render */}
+        <DemoRender />
       </div>
       <BottomPanel />
     </div>