Merge pull request #196 from open-source-labs/staging14

Merging Reactype 14.0 to master

Author: wang9hu

CHANGE_LOG.md

@@ -3,6 +3,41 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+**Version 14.0.0 Changes**
+
+Changes:<br>
+- Added functionality & improvements:
+  - Event listeners:
+    - Added ability to assign event listeners to elements in the bottom customization tab
+    - Can name the function on the event or use the default name provided
+    - Updates reflected in the code preview render
+  - Live code preview: Bottom tool tabs code preview box updates immediately and automatically to reflect the latest changes in state
+  - Converted the annotation button into a delete button on the canvas elements and reusable components
+  - Code preview render: The formatting for generated code has been corrected for improved readability
+- Major UI changes:
+  - Left panel:
+    - Only display when mouse hovered over
+    - When extended, floats in front of the canvas without affecting the main window formatting
+  - Bottom panel
+    - Retractable feature added
+    - Has internal scroll ability in the tabs
+    - Resized functionality is stable
+  - Added indicator tabs to each signifying to the user their presence
+  - Canvas container (upper left):
+    - Changed the formatting to a center column with readable size and label orientation
+    - Standardized the size of components and rate of growth when nesting
+  - Tutorial:
+    - Users can now reference tutorials in split-screen mode without the canvas being auto-cleared when going back and forth from the tutorial
+- Bug fixes:
+  - Reusable component: The drag-and-drop feature for reusable components is now functioning smoothly and without bugs
+
+Recommendations for Future Enhancements:<br>
+- Add function content in the current event listeners' function skeleton.
+- The code output formatting in generateCode.ts is currently difficult to read, and could be improved for better readability.
+- Currently, the project uses two sets of state management tools: useReducer/useContext and Redux. useReducer/useContext is used for handling the customization state, and Redux for managing the code preview, context manager, and dark mode reducer state. However, there seems to be some confusion around how to integrate these two tools effectively. For instance, both tools are used for managing the code preview state, and changing the useReducer/useContext state would replace the corresponding redux state. Need to clean up the logic and find a solution to solve this issue.
+- Some of the files structure is not accurate (e.g., customizationPanel.tsx is in the containers folder instead of the bottom folder), need to rearrange the file hierarchy.
+- Update packages and resolve package dependency issues.
+
 **Version 13.0.0 Changes**
 
 New Functionality:<br>

README.md

@@ -6,16 +6,16 @@
 
 <!-- <p align="center">
   <img width="1000" src="https://i.imgur.com/enAcYvB.png">
-</p>
- -->
+</p> -->
+
 <div align="left">
-  
+
 [![StarShield][stars]][stars-url]
 [![ContributorShield][contributors]][contributors-url]
 [![ForksShield][forks]][forks-url]
 ![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)
-![Version: 13.0.0](https://img.shields.io/badge/version-13.0.0-orange)
-  
+![Version: 14.0.0](https://img.shields.io/badge/version-14.0.0-orange)
+
 </div>
 <!-- <p align="center">
   <img width="1000" src="https://i.imgur.com/FPizsat.png">
@@ -28,11 +28,10 @@
 
 
 <p align="center">
-  <img width="1000" src="https://i.imgur.com/Tuyjd4e.png">
+  <img width="1000" src="https://i.imgur.com/jR53ySV.png">
 </p>
 
 
-
 **ReacType** is a rapid prototyping tool built on Electron that allows users _visualize_ their application architecture dynamically, employing a _drag-and-drop canvas display_ and an interactive, _real-time component code preview_ that can be exported as a **React** app for developers employing React component architecture alongside the comprehensive type-checking of **TypeScript**. In other words, **you can draw prototypes and export React / TypeScript code!**
 
 Visit [reactype.io](https://reactype.io/) to learn more about the product.
@@ -41,7 +40,7 @@ Follow [@ReacType](https://twitter.com/reactype) on Twitter for important announ
 
 ### Documentation
 
-If you want to read about using ReacType, the [User Manual](https://reactype-1.herokuapp.com/#/tutorial) is free and available online now. 
+If you want to read about using ReacType, the [User Manual](https://reactype-1.herokuapp.com/#/tutorial) is free and available online now.
 
 ### Installing
 
@@ -54,24 +53,37 @@ If you are given a warning that Apple could not scan the app. Please follow thes
 Download the latest [release](https://github.com/open-source-labs/ReacType/releases)
 
 
-## New with version 13.0.0
+## Changes with version 14.0.0
+
+- **Added event listeners**: Users can now add event listeners to elements in the customization tab and view a list of added events. The list can be edited to remove events, and the live code preview will show the events being added and updated.
+- **Delete buttons added**: Delete buttons have been added to canvas components and elements for easier removal. Users can now delete elements or components directly by focusing on them and mouse-clicking the delete button.
+- **Live code preview and component tree update**: When users drag-and-drop components and elements, the live code preview and component tree are automatically updated to reflect the changes in real-time.
+- **Major UI enhancement**: The user interface has undergone a major change, including a sliding effect for the left and bottom panels to maximize user visibility. The styling has been unified and the display of the canvas hierarchy has been made more prominent for improved clarity.
+- **And more:** See [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous versions as well as plans for upcoming features!
 
-- **Manage state locally**: Users can now manage state dynamically within nested components using React Hooks within the state manager tab.
-- **Add/delete props**: For a selected component, users can see a list of available props from the parent, add props, and delete props in case they are not required later on.
-- **State/props flow**: If state or props are deleted upstream, it will automatically update the state for its children components.
-- **Visualize state/props flow**: Within the display sub-tab of the state manager tab, users can visualize an interactive tree diagram depicting the state initialized in the current component and passed down props from the parent component.
-- **And more:** See [change log](https://github.com/open-source-labs/ReacType/blob/master/CHANGE_LOG.md) for more details on what was changed from the previous version as well as plans for upcoming features!
+## (_New_) File Structure
+
+Here is the main file structure:
+<p align="center">
+  <img width="1000" src="https://i.imgur.com/RdK8QzW.jpg">
+</p>
+Please refer to the link: https://excalidraw.com/#json=JKwzVD5qx6lsfiHW1_pQ9,XJ6uDoehVu-1bsx0SMlC6w for more details.
 
 
 ## Run ReacType using CLI
 
 - **Fork** and **Clone** Repository.
 - Open project directory
-- Install dependencies
+- Install dependencies.
 
 ```bash
 npm install
 ```
+- If there is a dependency issue during installation, try switching to Node version v16.0.0 and then install. If the dependency issue still persists, try using the `--legacy-peer-deps` flag instead.
+
+```bash
+npm install --legacy-peer-deps
+```
 
 - To run the production build
 

__tests__/__snapshots__/enzyme.test.tsx.snap

@@ -644,6 +644,11 @@ exports[`Test the BottomTabs component Matches snapshot 1`] = `
         size="small"
       >
         <WithStyles(ForwardRef(Select))
+          MenuProps={
+            Object {
+              "disablePortal": true,
+            }
+          }
           className="makeStyles-projectSelector-12"
           id="demo-simple-select"
           labelId="project-type-label"
@@ -684,7 +689,11 @@ exports[`Test the BottomTabs component Matches snapshot 1`] = `
       </WithStyles(ForwardRef(FormControl))>
     </div>
   </Styled(MuiBox)>
-  <CreationPanel />
+  <div
+    className="tab-content"
+  >
+    <CreationPanel />
+  </div>
 </div>
 `;
 
@@ -694,6 +703,7 @@ exports[`Test the CanvasContainer component Matches snapshot 1`] = `
     Object {
       "backgroundColor": "lightgrey",
       "border": "2px Solid grey",
+      "overflow": "auto",
       "width": "100%",
     }
   }

app/src/components/App.tsx

@@ -83,6 +83,8 @@ export const App = (): JSX.Element => {
       }, 15000);
     }
   }, [state]);
+  // uncomment below to log state
+  // console.log('STATE!!!!: ', state);
   return (
     <div className="app">
       <DndProvider backend={HTML5Backend}>

app/src/components/ContextAPIManager/ContextManager.tsx

@@ -13,7 +13,7 @@ import DisplayContainer from './DisplayTab/DisplayContainer';
 const useStyles = makeStyles({
   contextContainer: {
     backgroundColor: 'white',
-    height: '100%'
+    height: 'fit-content'
   }
 });
 

app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

@@ -23,12 +23,6 @@ const AddContextForm = ({
   const handleClick = () => {
     if (contextInput === '' || contextInput === null) return;
     handleClickSelectContext();
-
-    //need to trigger the generate code functionality to update the code preview tab. Sending dummy data to trigger with a DELELTE ELEMENT dispatch method
-    dispatch({
-      type: 'DELETE ELEMENT',
-      payload: 'FAKE_ID'
-    });
   };
 
   const onChange = (event, newValue) => {

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";
@@ -203,6 +203,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
               className={isThemeLight ? `${classes.selectEmpty} ${classes.rootUnderlineLight} ${classes.inputTextLight}` : `${classes.selectEmpty} ${classes.rootUnderlineDark} ${classes.inputTextDark}`}
               value={inputType}
               onChange={(event, index) => setInputType(index.props.value)}
+              MenuProps={{ disablePortal: true }}
               style={ isThemeLight
                 ? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'}
                 : {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
@@ -237,44 +238,47 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
                 Required
             </FormHelperText>
           </FormControl>
-          <br></br>
-          <MyButton
-          type="submit"
-          onClick={submitNewState}
-          className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
+          <br />
+          <Button
+            variant='contained'
+            color='primary'
+            type="submit"
+            onClick={submitNewState}
+            className={isThemeLight ? `${classes.addComponentButton} ${classes.lightThemeFontColor}` : `${classes.addComponentButton} ${classes.darkThemeFontColor}`}
           >
             Save
-          </MyButton>
-          <br></br>
+          </Button>
+          <br />
 
         </FormControl>
       </div>
-       <br></br>
-      <div style={{display: 'flex', overflowX: 'scroll', width: '1700px'}}>
+       <br />
+      <div style={{display: 'flex', overflowX: 'scroll'}}>
         <div style={{display: 'flex', flexDirection: 'column'}}>
-        <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
-          Current Component State: {state.components[state.canvasFocus.componentId - 1].name}
-        </h4>
-        <TableStateProps rows1={rows1} setRows1={setRows1} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
+          <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
+            Current Component State: {state.components[state.canvasFocus.componentId - 1].name}
+          </h4>
+          <TableStateProps rows1={rows1} setRows1={setRows1} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
         </div>
 
         <div style={{display: 'flex', flexDirection: 'column'}}>
-        <h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
-          Available Props from Parent: {parentName ? parentName : 'No Parents'}
-        </h4>
-        <TableParentProps parentPassedInProps = {parentPassedInProps} parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
+          <h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
+            Available Props from Parent: {parentName ? parentName : 'No Parents'}
+          </h4>
+          <TableParentProps parentPassedInProps = {parentPassedInProps} parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
         </div>
+
         <div style={{display: 'flex', flexDirection: 'column', width: `${40}px`, color: 'black', justifyContent: 'center'}}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
-  <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
-</svg>
-      </div>
+          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" className="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
+            <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
+          </svg>
+        </div>
 
         <div style={{display: 'flex', flexDirection: 'column'}}>
-        <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
-        Passed in Props from Parent: {parentName ? parentName : 'No Parents'}
-        </h4>
-        <TablePassedInProps canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
+          <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
+            Passed in Props from Parent: {parentName ? parentName : 'No Parents'}
+          </h4>
+          <TablePassedInProps canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
         </div>
       </div>
     </div>
@@ -368,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",
@@ -437,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/StateManagement/StateManagement.tsx

@@ -13,7 +13,9 @@ import DisplayContainer from './DisplayTab/DisplayContainer';
 const useStyles = makeStyles({
   contextContainer: {
     backgroundColor: 'white',
-    height: '100%'
+    height: 'fit-content',
+    width: 'fit-content',
+    minWidth: '100%'
   }
 });
 

app/src/components/bottom/BottomPanel.tsx

@@ -1,19 +1,45 @@
-import React from 'react';
+import React, { RefObject, useEffect, useRef } from 'react';
 import BottomTabs from './BottomTabs';
-import { Resizable } from 're-resizable';
 
 const BottomPanel = (props): JSX.Element => {
+  let y: number = 0;
+  let h: number = 0;
+
+  const node = useRef() as React.MutableRefObject<HTMLDivElement>;
+
+  const mouseDownHandler = (e): void => {
+    y = e.clientY;
+
+    const styles = window.getComputedStyle(node.current);
+    h = parseInt(styles.height, 10);
+
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+  }
+
+  const mouseMoveHandler = function (e: MouseEvent): void {
+    // How far the mouse has been moved
+    const dy = y - e.clientY;
+
+    // Adjust the dimension of element
+    node.current.style.height = `${h + dy}px`;
+  };
+
+  const mouseUpHandler = function () {
+      // Remove the handlers of `mousemove` and `mouseup`
+      document.removeEventListener('mousemove', mouseMoveHandler);
+      document.removeEventListener('mouseup', mouseUpHandler);
+  };
+
+  useEffect(() => {
+    node.current.style.height = '50vh';
+  },[]);
+
   return (
-    <Resizable
-      enable={{
-        top: true
-      }}
-      minHeight={'50%'}
-    >
-      <div className="bottom-panel" >
-        <BottomTabs isThemeLight={props.isThemeLight}/>
-      </div>
-    </Resizable>
+    <div className="bottom-panel" id='resize' ref={node}>
+      <div id='resize-drag' onMouseDown={mouseDownHandler} tabIndex = {0} >......</div>
+      <BottomTabs isThemeLight={props.isThemeLight}/>
+    </div>
   );
 };