Added Caret Comments

Co-authored-by: jonocr <[email protected]>
Co-authored-by: buddhajjigae <[email protected]>
Co-authored-by: xkevinpark <[email protected]>
Co-authored-by: williamdyoon <[email protected]>

Author: 5 people

app/src/components/main/DemoRender.tsx

@@ -1,3 +1,4 @@
+// 100% Caret
 import React, {
   useState, useCallback, useContext, useEffect,
 } from 'react';

app/src/containers/MainContainer.tsx

@@ -9,6 +9,7 @@ import DemoRender from '../components/main/DemoRender';
 
 const MainContainer = () => {
   const { style } = useContext(styleContext);
+  // Caret Start
   const [state, dispatch] = useContext(StateContext);
   const componentsToRender = [];
   useEffect(() => {
@@ -31,11 +32,13 @@ const MainContainer = () => {
       }
     }
   }, [state.components]);
+  // Caret End
 
   return (
     <div className="main-container" style={style} >
       <div className="main">
         <CanvasContainer />
+        {/* Caret Component Render */}
         {console.log('Completed Components to Render', componentsToRender)}
         <DemoRender demo={componentsToRender}/>
       </div>

app/src/containers/RightContainer.tsx

@@ -38,6 +38,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
   const [flexJustify, setFlexJustify] = useState('');
   const [flexAlign, setFlexAlign] = useState('');
   const [BGColor, setBGColor] = useState('');
+  // Caret
   const [compText, setCompText] = useState('');
   const [compWidth, setCompWidth] = useState('');
   const [compHeight, setCompHeight] = useState('');
@@ -48,6 +49,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
   const [modal, setModal] = useState(null);
 
   const resetFields = () => {
+    // Caret Start
     const childrenArray = state.components[0].children;
     let attributes;
     for (const element of childrenArray) {
@@ -57,6 +59,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
       }
     }
     console.log('Attributes: ', configTarget.child);
+    // Caret End
     const style = configTarget.child
       ? configTarget.child.style
       : configTarget.style;
@@ -101,7 +104,8 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
       case 'bgcolor':
         setBGColor(inputVal);
         break;
-      case 'compText':
+      // Caret
+        case 'compText':
         setCompText(inputVal);
         break;
     }
@@ -202,6 +206,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
     if (compHeight !== '') styleObj.height = compHeight;
     if (BGColor !== '') styleObj.backgroundColor = BGColor;
 
+    // Caret
     const attributesObj: any = {};
     if (compText !== '') attributesObj.compText = compText;
 
@@ -210,6 +215,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
       payload: { style: styleObj },
     });
 
+    // Caret
     dispatch({
       type: 'UPDATE ATTRIBUTES',
       payload: { attributes: attributesObj },
@@ -517,6 +523,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
               </FormControl>
             </div>
           </div>
+          {/* Caret Start */}
           <div className={classes.configRow}>
             <div className={isThemeLight ? `${classes.configType} ${classes.lightThemeFontColor}` : `${classes.configType} ${classes.darkThemeFontColor}`}>
               <h3>Text:</h3>
@@ -535,6 +542,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
               </FormControl>
             </div>
           </div>
+          {/* Caret End */}
           <div className={classes.buttonRow}>
             <Button
               color="primary"

app/src/interfaces/Interfaces.ts

@@ -28,6 +28,7 @@ export interface Component {
   id: number;
   name: string;
   style: object;
+  // Caret
   attributes?: object;
   code: string;
   children: ChildElement[];

app/src/reducers/componentReducer.ts

@@ -207,6 +207,7 @@ const reducer = (state: State, action: Action) => {
         name: action.payload.componentName,
         nextChildId: 1,
         style: {},
+        // Caret
         attributes: {},
         code: '',
         children: [],
@@ -289,6 +290,7 @@ const reducer = (state: State, action: Action) => {
         name: newName,
         childId: state.nextChildId,
         style: {},
+        // Caret
         attributes: {},
         children: componentChildren,
 
@@ -299,6 +301,7 @@ const reducer = (state: State, action: Action) => {
         name: 'separator',
         childId: state.nextTopSeparatorId,
         style: separator.style,
+        // Caret
         attributes: {},
         children: []
       };
@@ -428,6 +431,7 @@ const reducer = (state: State, action: Action) => {
 
       return { ...state, components };
     }
+    // Caret
     case 'UPDATE ATTRIBUTES': {
       const { attributes } = action.payload;
       const components = [...state.components];