research demoRender

Author: HM-Pfeiffer

app/src/components/left/ComponentDrag.tsx

@@ -5,14 +5,15 @@ import makeStyles from '@mui/styles/makeStyles';
 import { useSelector } from 'react-redux';
 import ComponentPanelItem from '../right/ComponentPanelItem';
 
+console.log('line 8 ComponentDrag')
 
 const useStyles = makeStyles({
   panelWrapper: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     flexGrow: 1,
-    overflow: 'auto'
+    overflow: 'auto',
   },
   panelWrapperList: {
     minHeight: 'auto'
@@ -28,6 +29,12 @@ const useStyles = makeStyles({
 const ComponentDrag = ({ isVisible, isThemeLight }): JSX.Element | null => {
   const classes = useStyles();
   const state = useSelector((store: RootState) => store.appState);
+  console.log("isVisible", isVisible)
+  console.log("isThemeLight", isThemeLight)
+  console.log("isVisible", isVisible)
+  console.log("state", state)
+  console.log("stateMUI", state.MUITypes)
+
 
   const isFocus = (targetId: Number) => {
     console.log('targetID line 33', targetId)
@@ -73,3 +80,19 @@ const ComponentDrag = ({ isVisible, isThemeLight }): JSX.Element | null => {
 
 export default ComponentDrag;
 
+
+const propsArray4 = [
+  { Name: "align", 
+  Type: "'center' | 'inherit' | 'justify' | 'left' | 'right'", 
+  Default: "'inherit'", 
+  Description: "Set the text-align on the component." },
+  { Name: "children", Type: "node" },
+  { Name: "classes", Type: "object" },
+  { Name: "component", Type: "elementType", Description: "The component used for the root node." },
+  { Name: "gutterBottom", Type: "bool", Default: "false", Description: "If true, the text will have a bottom margin." },
+  { Name: "noWrap", Type: "bool", Default: "false", Description: "If true, the text will not wrap, but instead will truncate with a text overflow ellipsis." },
+  { Name: "paragraph", Type: "bool", Default: "false", Description: "If true, the element will be a paragraph element." },
+  { Name: "sx", Type: "Array<func | object | bool> | func | object" },
+  { Name: "variant", Type: "'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'inherit' | 'overline' | 'subtitle1' | 'subtitle2' | string", Default: "'body1'", Description: "Applies the theme typography styles." },
+  { Name: "variantMapping", Type: "object", Default: "{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p', inherit: 'p' }", Description: "The component maps the variant prop to a range of different HTML element types." }
+];

app/src/components/main/DemoRender.tsx

@@ -85,7 +85,6 @@ const DemoRender = (): JSX.Element => {
     if (!event.data || typeof event.data.data !== 'string') return;
 
     const component: string = event.data.data.split('/').at(-1);
-    console.log('component', component)
     // If components aren't defined or component isn't a string, return early
     if (!state.components || !component) return;
 
@@ -110,6 +109,7 @@ const DemoRender = (): JSX.Element => {
         const elementType = element.name;
         const childId = element.childId;
         const elementStyle = element.style;
+        console.log("elementType", elementType)
         console.log("elementStyle", elementStyle)
         const innerText = element.attributes.compText;
         const classRender = element.attributes.cssClasses;
@@ -167,7 +167,7 @@ const DemoRender = (): JSX.Element => {
             >
               {innerText}
               {renderedChildren}
-            </Box>
+            </Box>,
           );
         else if (elementType === 'Switch')
           componentsToRender.push(<Switch>{renderedChildren}</Switch>);
@@ -214,7 +214,7 @@ const DemoRender = (): JSX.Element => {
       return;
     }
   });
-  console.log('code line 215', code)
+  console.log('This is the CODE on line 215 of DemoRender', code)
   //writes our stylesheet from state to the code
   code += `<style>${stylesheet}</style>`;
 

app/src/containers/CustomizationPanel.tsx

@@ -42,6 +42,7 @@ import { RootState } from '../redux/store';
 import { emitEvent } from '../helperFunctions/socket';
 import { Number } from 'mongoose';
 
+
 // Previously named rightContainer, Renamed to Customizationpanel this now hangs on BottomTabs
 // need to pass in props to use the useHistory feature of react router
 const CustomizationPanel = ({ isThemeLight }): JSX.Element => {

app/src/helperFunctions/generateCode.ts

@@ -47,6 +47,7 @@ const generateUnformattedCode = (
   contextParam: any
 ) => {
   const components = [...comps];
+  console.log("hi from line 50 in the generateCode")
   // find the component that we're going to generate code for
   const currComponent = components.find((elem) => elem.id === componentId);
   // find the unique components that we need to import into this component file