Merge branch 'dev' into readmeUpdate

Author: yijunliu90

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -4,14 +4,14 @@ import {
   styled,
   Theme
 } from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
 import {
   FormControl,
   FormHelperText,
   MenuItem,
   InputLabel,
   Select,
-  TextField
+  TextField,
+  Button
 } from "@material-ui/core";
 import StateContext from "../../../../context/context";
 import TableStateProps from "./TableStateProps";
@@ -239,13 +239,15 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
             </FormHelperText>
           </FormControl>
           <br />
-          <MyButton
-          type="submit"
-          onClick={submitNewState}
-          className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
+          <Button
+            variant='contained'
+            color='primary'
+            type="submit"
+            onClick={submitNewState}
+            className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
           >
             Save
-          </MyButton>
+          </Button>
           <br />
 
         </FormControl>
@@ -370,7 +372,7 @@ const useStyles = makeStyles((theme: Theme) =>
       margin: "-20px 0px 5px 150px",
       borderStyle: "none",
       transition: "0.3s",
-      borderRadius: "25px",
+      // borderRadius: "25px",
     },
     rootToggle: {
       color: "#696969",
@@ -439,14 +441,15 @@ const useStyles = makeStyles((theme: Theme) =>
     }
   })
 );
-const MyButton = styled(Button)({
-  background: "#0099E6",
-  border: 0,
-  borderRadius: 3,
-  boxShadow: "0 0px 0px 2px #1a1a1a",
-  color: "white",
-  height: 24,
-  width: 40,
-  padding: "0 30px",
-});
+// change to Button to keep styling consistent
+// const MyButton = styled(Button)({
+  // background: "#0099E6",
+  // border: 0,
+  // borderRadius: 3,
+  // boxShadow: "0 0px 0px 2px #1a1a1a",
+  // color: "white",
+  // height: 24,
+  // width: 40,
+  // padding: "0 30px",
+// });
 export default StatePropsPanel;

app/src/components/bottom/CodePreview.tsx

@@ -38,7 +38,6 @@ const CodePreview: React.FC<{
 
   const [state] = useContext(StateContext);
   const [, setDivHeight] = useState(0);
-  const components = state.components;
   let currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
@@ -59,7 +58,7 @@ const CodePreview: React.FC<{
       type: 'CODE_PREVIEW_INPUT',
       payload: currentComponent.code
     });
-  }, [currentComponent, components]); // Lillian added another dependency here to utilize useEffect
+  }, [currentComponent, state.components]);
 
   /**
    * Handler thats listens to changes in code editor

app/src/components/left/HTMLPanel.tsx

@@ -5,8 +5,9 @@ import { makeStyles, styled } from '@material-ui/core/styles';
 import {
   Button,
   InputLabel,
-  TextField,
+  // TextField,
 } from "@material-ui/core";
+import TextField from '@mui/material/TextField';
 
 /*
 DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -163,8 +164,9 @@ const HTMLPanel = (props): JSX.Element => {
               Tag:
             </InputLabel>
               <TextField
-                color={'primary'}
-                variant={'outlined'}
+                // label='Tag'
+                color='primary'
+                variant='outlined'
                 type="text"
                 name="Tag"
                 value={tag}
@@ -189,8 +191,9 @@ const HTMLPanel = (props): JSX.Element => {
               Element Name:
             </InputLabel>
             <TextField
-              color={'primary'}
-              variant={'outlined'}
+              // label='Element Name'
+              color='primary'
+              variant='outlined'
               type="text"
               name="Tag Name"
               value={name}
@@ -204,19 +207,20 @@ const HTMLPanel = (props): JSX.Element => {
                 }
               }}
             />
-            
-
             {(!name.charAt(0).match(/[A-Za-z]/) || !alphanumeric(name) || name.trim() === '' || name.length > 10 || checkNameDupe(name))
               && <span className={isThemeLight ? `${classes.errorMessage} ${classes.errorMessageLight}` : `${classes.errorMessage} ${classes.errorMessageDark}`}>
                               <em>{errorMsg}</em>
                             </span>}           
-            <AddElementButton
+            <br></br>
+            <Button
               className={isThemeLight ? `${classes.addElementButton} ${classes.lightThemeFontColor}` : `${classes.addElementButton} ${classes.darkThemeFontColor}`}
               id="submitButton"
               type="submit"
+              color='primary'
+              variant='contained'
               value="Add Element"
             >Add Element
-            </AddElementButton>
+            </Button>
           </form>
         </div>
       </div>
@@ -267,13 +271,14 @@ const useStyles = makeStyles({
   addElementButton: {
     backgroundColor: 'transparent',
     height: '40px',
-    width: '105px',
+    width: '200px',
     fontFamily: 'Roboto, Raleway, sans-serif',
     fontSize: '85%',
     textAlign: 'center',
     borderStyle: 'none',
     transition: '0.3s',
     borderRadius: '4px',
+    alignSelf: 'center'
   },
   lightThemeFontColor: {
     color: '#155084',
@@ -288,10 +293,11 @@ const useStyles = makeStyles({
     }
   },
   errorMessage: {
+    display: 'flex',
+    alignSelf: 'center',
     fontSize:"11px", 
     marginTop: "10px",
     width: "150px",
-    marginLeft: "-15px"
   },
   errorMessageLight: {
     color: '#6B6B6B'
@@ -301,16 +307,17 @@ const useStyles = makeStyles({
   }
 });
 
-const AddElementButton = styled(Button)({
-  background: "#0099E6",
-  border: 0,
-  borderRadius: 3,
-  boxShadow: "0 0px 0px 2px #1a1a1a",
-  color: "white",
-  height: 24,
-  width: 160,
-  padding: "0px 30px",
-  alignSelf: 'center',
-});
+// changed to Button component to keep styling consistent
+// const AddElementButton = styled(Button)({
+//   background: "#0099E6",
+//   border: 0,
+//   borderRadius: 3,
+//   boxShadow: "0 0px 0px 2px #1a1a1a",
+//   color: "white",
+//   height: 24,
+//   width: 160,
+//   padding: "0px 30px",
+//   alignSelf: 'center',
+// });
 
 export default HTMLPanel;

app/src/components/main/Canvas.tsx

@@ -146,6 +146,7 @@ function Canvas(props): JSX.Element {
               childId: null
             }
           });
+          // comment out below, not sure what the previous team want to do for this
         // } else {
         //   alert('something is wrong');
           // able to duplicate a component in dev only does not work for prod
@@ -199,9 +200,6 @@ function Canvas(props): JSX.Element {
   // const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   const darkCombinedCanvasStyle = combineStyles(darkCanvasStyle, currentComponent.style);
-  // console.log('CURRENTCOMPONENT.CHILDREN : ', currentComponent.children)
-  // console.log('STATE: ', state.components);
-  // console.log('CURRENTCOMPONENT : ', currentComponent);
   return (
     <div className={'componentContainer'} ref={drop} style={props.isThemeLight ? canvasStyle : darkCombinedCanvasStyle} onClick={onClickHandler}>
        {renderChildren(currentComponent.children)}

app/src/components/main/Annotation.tsx renamed to app/src/components/main/DeleteButton.tsx

@@ -1,13 +1,11 @@
 import React, { useRef, useState, useContext, useEffect } from 'react';
-import { Annotations } from '../../interfaces/Interfaces';
+import { DeleteButtons } from '../../interfaces/Interfaces';
 import Modal from '@material-ui/core/Modal';
 import StateContext from '../../context/context';
 
-function Annotation({ id, name }: Annotations) {
+function DeleteButton({ id, name }: DeleteButtons) {
   const [state, dispatch] = useContext(StateContext);
 
-  // -------------------------------- NEW CODE for DELETE BUTTONS, REPLACING ANNOTATIONS ---------------------------------------
-
   const deleteHTMLtype = (id: number) => {
     dispatch({
       type: 'DELETE CHILD',
@@ -18,18 +16,17 @@ function Annotation({ id, name }: Annotations) {
   return (
     <div style={{ padding: '1px', float: 'right' }}>
       <button
-        className="annotate-button-empty" // NOTE:  This className no longer accurate --> to update to delete button, same w/ Annotation export throughout
+        className="delete-button-empty"
         id={'btn' + id}
         onClick={(event) => {
           event.stopPropagation();
           deleteHTMLtype(id);
         }}
-        // ref={ref}
       >
         x
       </button>
     </div>
   );
 }
 
-export default Annotation;
+export default DeleteButton;

app/src/components/main/DirectChildComponent.tsx

@@ -1,21 +1,23 @@
-import React, {  useContext, } from 'react';
-import {
-  Component,
-  ChildElement
-} from '../../interfaces/Interfaces';
+import React, { useContext } from 'react';
+import { Component, ChildElement } from '../../interfaces/Interfaces';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
-import Annotation from './Annotation'
+import DeleteButton from './DeleteButton';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 
-function DirectChildComponent({ childId, type, typeId, style, name }: ChildElement) {
+function DirectChildComponent({
+  childId,
+  type,
+  typeId,
+  style,
+  name
+}: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
 
   // find the top-level component corresponding to this instance of the component
   // find the current component to render on the canvas
-
   const referencedComponent: Component = state.components.find(
     (elem: Component) => elem.id === typeId
   );
@@ -29,7 +31,7 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
       instanceType: type,
       instanceTypeId: typeId
     },
-    collect: monitor => ({
+    collect: (monitor) => ({
       isDragging: !!monitor.isDragging()
     })
   });
@@ -54,7 +56,7 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
 
   const combinedStyle = combineStyles(
     combineStyles(
-      combineStyles(globalDefaultStyle, referencedComponent.style),
+      combineStyles(globalDefaultStyle, referencedComponent.style)
       // style
     ),
     interactiveStyle
@@ -69,12 +71,7 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
     >
         <span>
           <strong>{name}</strong>
-
-          <Annotation
-              id={childId}
-              name={name}
-              // annotations={annotations}
-              />
+          <DeleteButton id={childId} name={name} />  
         </span>
 
     </div>

app/src/components/main/DirectChildHTML.tsx

@@ -5,18 +5,11 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
-import Annotation from './Annotation';
+import DeleteButton from './DeleteButton';
 
 import { styleContext } from '../../containers/AppContainer';
 
-function DirectChildHTML({
-  childId,
-  name,
-  type,
-  typeId,
-  style,
-  annotations
-}: ChildElement) {
+function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const { isThemeLight } = useContext(styleContext);
 
@@ -95,10 +88,9 @@ function DirectChildHTML({
         <strong style={{ color: isThemeLight ? 'black' : 'white' }}>
           {HTMLType.placeHolderShort}
         </strong>
-        <Annotation
+        <DeleteButton
           id={childId}
           name={name[0].toLowerCase() + name.slice(1)}
-          annotations={annotations}
         />
       </span>
     </div>