Merge branch 'dev' into Brett/AnnotationCleanup

brett-webster · web-flow · commit 8fcfbee616af · 2023-02-24T22:21:37.000-05:00
diff --git a/CHANGE_LOG.md b/CHANGE_LOG.md
@@ -3,6 +3,38 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+**Version 14.0.0 Changes**
+
+Changes:<br>
+- Added functionalities & improvements:
+  - Add 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 renderings update immediately and automatically to reflect the state
+  - Converted the notation 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
+  - Add indicator tabs to each to signify to the user they are there
+  - Canvas container:
+    - 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 from the tutorial
+- Bug fixes:
+  - Reusable component: The drag-and-drop feature for reusable components is now functioning smoothly and without bugs
+
+What's next:<br>
+
+A note for future contributors:<br>
+
 **Version 13.0.0 Changes**
 
 New Functionality:<br>
diff --git a/README.md b/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">
@@ -41,7 +41,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 +54,29 @@ 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
 
-- **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.
+- **Add 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 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 changes**: 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 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 version as well as plans for upcoming features!
 
 
 ## Run ReacType using CLI
 
 - **Fork** and **Clone** Repository.
 - Open project directory
-- Install dependencies
+- Install dependencies.
 
 ```bash
 npm install
 ```
+- If there's any issue with the installation, try using `--legacy-peer-deps` flag instead.
+
+```bash
+npm install --legacy-peer-deps
+```
 
 - To run the production build
 
diff --git a/app/src/components/main/DirectChildComponent.tsx b/app/src/components/main/DirectChildComponent.tsx
@@ -64,6 +64,7 @@ function DirectChildComponent({
   );
   // Renders name and not children of subcomponents to clean up Canvas view when dragging components
   // into the main canvas.  To render html elements on canvas, import and invoke renderChildren
+
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={drag}>
       <strong>{name}</strong>
diff --git a/app/src/components/main/DirectChildHTML.tsx b/app/src/components/main/DirectChildHTML.tsx
@@ -86,7 +86,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
     >
       <span>
         <strong style={{ color: isThemeLight ? 'black' : 'white' }}>
-          {HTMLType.placeHolderShort + ' nonNestable'}
+          {HTMLType.placeHolderShort}
         </strong>
         <DeleteButton
           id={childId}
diff --git a/app/src/components/main/DirectChildHTMLNestable.tsx b/app/src/components/main/DirectChildHTMLNestable.tsx
@@ -138,57 +138,16 @@ function DirectChildHTMLNestable({
         ? '3px solid #186BB4'
         : '1px solid grey'
   };
-
-  // incoporated this logic into my nesting check below caused i new error
-  // if (isOver) defaultNestableStyle['yellow'];
-  // defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : defaultNestableStyle['backgroundColor'];//globalDefaultStyle['backgroundColor']
-
-  // if component is not in APP children array, it's a nested component, and should have a differend background color
-  // defaultNestableStyle['backgroundColor'] = state.components[0].children.includes(childId) ? 'blue' : globalDefaultStyle['backgroundColor'];
-
-  // console.log('APP DIRECT KIDS: ', state.components[0].children);
+  
+  // interactive style to change color when nested element is hovered over
+  if (isOver) defaultNestableStyle['yellow'];
+  defaultNestableStyle['backgroundColor'] = isOver ? 'yellow' : defaultNestableStyle['backgroundColor'];
 
   const combinedStyle = combineStyles(
     combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),
     interactiveStyle
   );
 
-  // WHAT THE CHILDREN ARRAY LOOKS LIKE - LW
-  //  ARRAY OF OBJS
-  // {type: 'HTML Element', typeId: 1000, name: 'separator', childId: 1000, style: {…}, …}
-  // tried adding a conditional to only run this reassignment if state.components[0]['name'] === 'App' DON'T WORK
-
-  // state.components[0].children?.forEach(obj => {
-  //     // console.log('childId : ', obj['childId'], 'childId : ', childId);
-  //     if (obj['childId'] === childId) {
-  //       combinedStyle['backgroundColor'] = isOver ? 'yellow' : 'grey';
-  //     } else {
-  //       combinedStyle['backgroundColor'] = isOver ? 'yellow' : globalDefaultStyle['backgroundColor'];
-  //     }
-  // });
-
-  // trying to render components with diff background colors based on how deeply nested they were - doesnt' work as on now
-  //   state.components.forEach(component => {
-  //   // console.log('state.components : ', state.components)
-  //     let color = 'rgb(63, 154,';
-  //     let counter = -10;
-  //     component.children?.forEach(obj => {
-  //     // if (obj['childId'] === childId) {
-  //       counter += 10;
-  //       color = color + counter.toString() + ')'
-  //       combinedStyle['backgroundColor'] = isOver ? 'yellow' : color;
-  //     } else {
-  //       combinedStyle['backgroundColor'] = isOver ? 'yellow' : globalDefaultStyle['backgroundColor'];
-  //     }
-  //   })
-  // });
-
-  // console.log('state: ', state);
-  // helper func i created below does not work now because it cannot reference combined style from its file. - LW
-  // adjustComponentColor(children, childId, state);
-
-  //console.log('combinedStyle : ', combinedStyle);
-
   drag(drop(ref));
 
   const routeButton = [];
@@ -216,12 +175,8 @@ function DirectChildHTMLNestable({
       id={`canv${childId}`}
     >
       <span>
-        <strong style={{ color: isThemeLight ? 'black' : 'white' }}>
-          {HTMLType.placeHolderShort + ' nestable'}
-        </strong>
-        <strong style={{ color: '#0099E6' }}>
-          {attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}
-        </strong>
+        <strong style={ {color: isThemeLight ? 'black' : 'white'} }>{HTMLType.placeHolderShort}</strong>
+        <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
         {routeButton}
         <DeleteButton id={childId} name={name} />
       </span>
diff --git a/app/src/components/main/IndirectChild.tsx b/app/src/components/main/IndirectChild.tsx
@@ -36,7 +36,9 @@ function IndirectChild({
   return (
     <div style={combinedStyle}>
       {`  ( ${childId} )`}
-      <DeleteButton id={childId} name={name} />
+      <span>
+        <DeleteButton id={childId} name={name} />
+      </span>
       {linkId ? (
         <div onClick={onClickHandlerRoute}>{linkName}</div>
       ) : (
diff --git a/contributors.md b/contributors.md
@@ -18,6 +18,8 @@ Ben Cauffman [LinkedIn](https://www.linkedin.com/in/benjamin-cauffman/) [Github]
 
 [Bianca Picasso](https://www.linkedin.com/in/bianca-picasso) [@BiancaPicasso](https://github.com/BiancaPicasso)
 
+[Brett Webster](https://www.linkedin.com/in/brett-webster-cfa-383b961) [@brett-webster](https://github.com/brett-webster)
+
 [Brian Han](https://www.linkedin.com/in/brianjisoohan/) [@brianjshan](https://github.com/brianjshan)
 
 [Bryan Chau](https://www.linkedin.com/in/chaubryan1/) [@bchauu](https://github.com/bchauu)
@@ -72,6 +74,8 @@ Darin Ngau [LinkedIn](https://www.linkedin.com/in/darin-ngau/) [Github](https://
 
 [Khuong Nguyen](https://www.linkedin.com/in/khuong-nguyen/) [@khuongdn16](https://github.com/khuongdn16)
 
+[Lillian Wimberly](https://www.linkedin.com/in/lillianwimberly/) [@lillwimberly](https://github.com/lillwimberly)
+
 [Linh Tran](https://www.linkedin.com/in/linhtran51/) [@Linhatran](https://github.com/Linhatran)
 
 [Luke Madden](https://www.linkedin.com/in/lukemadden/) [@lukemadden](https://github.com/lukemadden)
@@ -96,6 +100,8 @@ Darin Ngau [LinkedIn](https://www.linkedin.com/in/darin-ngau/) [Github](https://
 
 [Shana Hoehn](https://www.linkedin.com/in/shana-hoehn-70297b169/) [@slhoehn](https://github.com/slhoehn)
 
+[Shirley Liu](https://www.linkedin.com/in/yijunliu/) [@yijunliu90](https://github.com/yijunliu90)
+
 [Shlomo Porges](https://linkedin.com/shlomoporges) [@shlomoporges](https://github.com/ShlomoPorges)
 
 [Sophia Huttner](https://www.linkedin.com/in/sophia-huttner-68315975/) [@sophjean](https://github.com/sophjean)
@@ -120,4 +126,6 @@ Thomas Lukasiewicz [LinkedIn](https://www.linkedin.com/in/thomas-lukasiewicz-276
 
 [William Yoon](https://www.linkedin.com/in/williamdyoon/) [@williamdyoon](https://github.com/williamdyoon)
 
+[Xiao Wang](https://www.linkedin.com/in/xiao-wang-03183285/) [@wang9hu](https://github.com/wang9hu)
+
 [Yuanji Huang](https://www.linkedin.com/in/yuanjihuang/) [@kr1spybacon](https://github.com/kr1spybacon)
diff --git a/electron-builder.yml b/electron-builder.yml
@@ -1,5 +1,5 @@
 appId: com.electron.reactype
-copyright: Copyright © 2022
+copyright: Copyright © 2023
 productName: ReacType
 directories:
   buildResources: resources
diff --git a/package-lock 2.json b/package-lock 2.json
@@ -1,12 +1,12 @@
 {
   "name": "reactype",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "reactype",
-      "version": "13.0.0",
+      "version": "14.0.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package-lock 3.json b/package-lock 3.json
@@ -1,12 +1,12 @@
 {
   "name": "reactype",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "reactype",
-      "version": "13.0.0",
+      "version": "14.0.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
@@ -1,11 +1,15 @@
 {
   "name": "reactype",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "Prototyping tool for React/Typescript Applications.",
   "private": true,
   "main": "app/electron/main.js",
   "author": "OS Labs",
   "contributors": [
+    "Brett Webster",
+    "Lillian Wimberly",
+    "Shirley Liu",
+    "Xiao Wang",
     "Ahsan Rao",
     "Benjamin Cauffman",
     "Carly Jackson",

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {`
`86`	`86`	`>`
`87`	`87`	`<span>`
`88`	`88`	`<strong style={{ color: isThemeLight ? 'black' : 'white' }}>`
`89`		`- {HTMLType.placeHolderShort + ' nonNestable'}`
	`89`	`+ {HTMLType.placeHolderShort}`
`90`	`90`	`</strong>`
`91`	`91`	`<DeleteButton`
`92`	`92`	`id={childId}`