Portion of the Tutorial Updates. Added comments. Fixed side scroll of reusable components. Restored focus feature.

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/bottom/CreationPanel.tsx

@@ -3,6 +3,8 @@ import ComponentPanel from '../right/ComponentPanel'
 import StatePropsPanel from '../right/StatePropsPanel'
 import HTMLPanel from '../left/HTMLPanel'
 
+// Creation panel holds all of the creation functionality of the application. ComponentPanel, HTMLPanel, and StatePropsPanel are all hanged here.
+// This allows users to create all aspects of this application in one place.
 const CreationPanel = (props): JSX.Element => {
   return (
     <div className="creation-panel" >

app/src/components/left/DragDropPanel.tsx

@@ -5,7 +5,7 @@ import HTMLItem from './HTMLItem';
 import { makeStyles } from '@material-ui/core/styles';
 
 /*
-DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
+DESCRIPTION: This is the top half of the left panel, starting from the 'HTML
   Elements' header. The boxes containing each HTML element are rendered in
   HTMLItem, which itself is rendered by this component.
 
@@ -16,7 +16,7 @@ Central state contains all available HTML elements (stored in the HTMLTypes prop
 Hook state:
   -tag: 
 */
-
+// Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
 const DragDropPanel = (props): JSX.Element => {
   // const classes = useStyles();
   const [state, dispatch] = useContext(StateContext);

app/src/components/main/DemoRender.tsx

@@ -7,6 +7,8 @@ import Box from '@material-ui/core/Box';
 import StateContext from '../../context/context';
 import cssRefresher from '../../helperFunctions/cssRefresh';
 
+// DemoRender is the full sandbox demo of our user's custom built React components. DemoRender references the design specifications stored in state to construct
+// real react components that utilize hot module reloading to depict the user's prototype application.
 const DemoRender = (props): JSX.Element => {
   const [components, setComponents] = useState([]);
   const [state, dispatch] = useContext(StateContext);
@@ -16,7 +18,9 @@ const DemoRender = (props): JSX.Element => {
     border: '2px Solid grey',
   };
 
-  const componentBuilder = (array, key = 0) => {
+  // This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
+  // Material UI is utilized to incorporate the apporpriate tags with specific configuration designs as necessitated by HTML standards.
+  const componentBuilder = (array: object, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
       if (element.name !== 'separator') {

app/src/components/right/ComponentPanel.tsx

@@ -125,10 +125,6 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
     }
   }, []);
 
-  const isFocus = (targetId: Number) => {
-    return state.canvasFocus.componentId === targetId ? true : false;
-  };
-
   return (
     <div className={classes.panelWrapper}>
       {/* Add a new component*/}

app/src/components/right/ComponentPanelItem.tsx

@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import StateContext from '../../context/context';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
+import { wrap } from 'module';
 
 /*
 DESCRIPTION: This component is each box beneath the 'root components' and
@@ -71,17 +72,19 @@ const ComponentPanelItem: React.FC<{
       ref={drag}
       xs={8}
       style={{
+        display: 'grid',
         color: '#262626',
         backgroundColor: 'transparent',
         border: root
           ? '2px dotted #186BB4'
           : '2px solid #186BB4',
         borderRadius: '4px',
         borderColor: '#000000',
+        margin: '5px 0px'
       }}
     >
+      {isFocus && <div className={classes.focusMark}></div>}  
       <div className="compPanelItem" onClick={handleClick}>
-        {isFocus && <div className={classes.focusMark}></div>}
         <h3 >{name}</h3>
       </div>
     </Grid>
@@ -93,13 +96,11 @@ const useStyles = makeStyles({
     backgroundColor: 'rgba(1,212,109,0.3)'
   },
   focusMark: {
-    backgroundColor: '#808080',
-    position: 'absolute',
+    backgroundColor: 'red',
+    justifySelf: 'left',
     width: '12px',
     height: '12px',
-    borderRadius: '12px',
-    left: '-35px',
-    top: '30px'
+    borderRadius: '25px',
   }
 });
 

app/src/containers/CustomizationPanel.tsx

@@ -31,7 +31,7 @@ import FormSelector from '../components/form/Selector';
 // Caret
 //import Arrow from '../components/main/Arrow';
 import { config } from 'ace-builds';
-
+// 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 => {
   const classes = useStyles(isThemeLight);

app/src/helperFunctions/componentNestValidation.ts

@@ -1,4 +1,8 @@
-const componentNest = (children: any, nestId: Number) => {
+
+// This function is used in both DirectChildHTMLNestable and SeparatorChild to ensure that user created components do not nest within themselves.
+// To allow such nesting would be a certain paradox and locks the application.
+// This check is done right after the drag functionality resolves and releases. Nothing is done if a component is found trying to nest within itself.
+const componentNest = (children: object, nestId: Number) => {
   console.log('Made it to this point')
   let notNested = true;
   for (const element of children) {

app/src/helperFunctions/generateCode.ts

@@ -98,18 +98,20 @@ const generateUnformattedCode = (
     return customizationDetails;
   };
 
-  // function to dynamically generate a complete html (& also other library type) elements
+  // function to fix the spacing of the ace editor for new lines of added content. This was breaking on nested components, leaving everything right justified.
   const tabSpacer = (level: number) => {
     let tabs = ''
     for (let i = 0; i < level; i++) tabs += '  ';
     return tabs;
   }
-
+  
+  // function to dynamically generate the appropriate levels for the code preview
   const levelSpacer = (level: number, spaces: number) => {
     if (level === 2 ) return `\n${tabSpacer(spaces)}`;
     else return ''
   }
-
+  
+  // function to dynamically generate a complete html (& also other library type) elements
   const elementGenerator = (childElement: object, level: number = 2) => {
     let innerText = '';
     let activeLink = '';
@@ -162,7 +164,8 @@ const generateUnformattedCode = (
       .filter(element => !!element)
       .join('')}`;
   };
-    
+  
+  // function to properly incorporate the user created state that is stored in the application state
   const writeStateProps = (stateArray: any) => {
     let stateToRender = '';
     for (const element of stateArray) {
@@ -211,7 +214,7 @@ const generateUnformattedCode = (
     }
       ${
         stateful && !classBased
-          ? `const [value, setValue] = useState<any | undefined>("INITIAL VALUE");${writeStateProps(currentComponent.useStateCodes)};
+          ? `const [value, setValue] = useState<any | undefined>("INITIAL VALUE")${writeStateProps(currentComponent.useStateCodes)};
           `
           : ``
       }

app/src/public/styles/style.css

@@ -130,7 +130,9 @@ LEFT COLUMN
 }
 
 #CompBottomHalf{
+  flex-grow: 1;
   overflow-y: auto;
+  margin-bottom: 50%;
 }
 
 .HTMLElements {
@@ -372,10 +374,9 @@ RIGHT COLUMN
 
 .compPanelItem {
   height: 100%;
-  position: center;
+  display: flex;
   justify-content: center;
   align-content: center;
-  display: flex;
   word-wrap: break-word;
 }
 

app/src/tutorial/ReusableComponents.tsx

@@ -12,12 +12,12 @@ const ReusableComponents: React.FC<{
     <div className={classes.wrapper}>
       <h1 className={classes.title}>Reusable Components</h1>
       <hr/>
-      <p className={classes.text}>To add a Reusable Component, use the top right input form to name a Component. Leave the Root/Page checkbox unchecked. Then select add to create a new Reusable Component.</p>
+      <p className={classes.text}>To add a Reusable Component, use the New Component input form in the Creation Panel to name a Component. Leave the Root/Page checkbox unchecked. Then click Create to add a new Reusable Component.</p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={reusableComponents1} />
       </div>
       <hr/>
-      <p className={classes.text}>The Components you create will populate the right container under the section 'Reusable Components'.</p>
+      <p className={classes.text}>The Components you create will populate on the left panel under the section 'Reusable Components'.</p>
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={reusableComponents2} />
       </div>
@@ -28,7 +28,7 @@ const ReusableComponents: React.FC<{
       <div className={classes.imgWrapper}>
         <img className={classes.img} src={reusableComponents3} />
       </div>
-      <p className={classes.text}>You can place a reusable component inside <span className={classes.notLink} onClick={() => setPage('Pages')} >Pages</span> and populate the component itself with the <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Elements</span>.</p>
+      <p className={classes.text}>You can place a reusable component inside <span className={classes.notLink} onClick={() => setPage('Pages')} >Pages</span> and populate the component itself with other <span className={classes.notLink} onClick={() => setPage('HTML_Elements')} >HTML Elements</span>.</p>
       <hr/>
     </div>
   );