merged with export bug fixes

Author: tolgamizrakci

LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2018 ReacType
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,2 +1,70 @@
 # ReacType
-Prototyping Tool for React/Typescript Applications
+
+**ReacType** is a prototyping tool for developers employing **React** component architecture while utilizing the comprehensive type checking of **TypeScript**.
+
+**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _component code preview_. The user can create components and load _instances_ of these components, as well as nested HTML elements, onto the canvas. These visual representations quickly reveal parent-child relationships between components and the embedded instances, with component views that can be toggled between and draggable representations that resized on the canvas itself. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
+
+Download for [MacOS](), [Windows](), [Linux]().
+
+### How to use
+
+- Open the application to start a new project. It will open in the root App component, with its name listed in the left panel and the component represented by the white box on the canvas.
+- To add a new component, type its name in the upper right panel, in the field '**Add class component**', and press the plus button.
+- To render a component **_instance_** to the screen, first select the component, or _parent_, that the instance will be rendered within. This selected component will be represented in a new canvas view, with its own white box. Then press the plus button next to the component name. An instance, or _child_, representation will appear on the canvas.
+- To add draggable HTML elements, select the image icons on the lower left panel.
+- The bottom panel allows the user to toggle between 4 different views: a tree diagram of the application, a preview of the code, a form to enter component props, and a form to add HTML attributes.
+- **_Props_** can be added to each component within its tab on bottom panel. Enter in a _key-value pair_, select its data _type_ and press the bottom 'ADD PROP'.
+- **_HTML Element Attributes_** of class name and ID can be added to each HTML element after an HTML element has been rendered to the canvas.
+- To **_delete_** a _child_ or instance from the canvas, select the desired instance and either press the _delete_ key or click the 'DELETE CHILD' button.
+- To **_delete_** a _component_, click the 'DELETE' button of the desired component in the left panel.
+- To _start over_, select the blue 'CLEAR WORKSPACE' button in the left panel. This will **clear the entire application**.
+
+### To Export Files
+
+- Once finished setting up the application template, press the green 'EXPORT PROJECT' button at the bottom of the left panel and choose between two options to export your files:
+  1. Export the component files into a src folder. This option will allow a developer to add these files to an existing project.
+  1. Export a new project with TypeScript config files and the component files. This option will allow a developer to immediately begin a new project.
+
+#### Authors
+
+[Christian Padilla](linkedin.com/in/ChristianEdwardPadilla) [@ChristianEdwardPadilla](https://github.com/ChristianEdwardPadilla)
+
+[Tolga Mizrakci](linkedin.com/in/tolga-mizrakci) [@tolgamizrakci](https://github.com/tolgamizrakci)
+
+[Shlomo Porges](linkedin.com/shlomoporges) [@shlomoporges](https://github.com/ShlomoPorges)
+
+[Adam Singer](linkedin.com/in/adsing) [@spincycle01](https://github.com/spincycle01)
+
+## To Run Your Own Version
+
+- **Fork** and **Clone** Repository.
+- Open project directory
+- Install dependencies
+
+```bash
+yarn install
+```
+
+- Run application
+
+```bash
+yarn start
+```
+
+- For development experience, in one terminal...
+
+```bash
+yarn run dev
+```
+
+- and on another terminal
+
+```bash
+yarn run electron
+```
+
+### Logo Design
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md]() file for details.

main.js

@@ -65,6 +65,10 @@ const createWindow = () => {
   mainWindow = new BrowserWindow({
     width,
     height,
+    webPreferences: {
+      zoomFactor: 0.8,
+      'node-Integration': false,
+    },
     show: false,
   });
 

src/components/BottomTabs.jsx

@@ -162,13 +162,13 @@ class BottomTabs extends Component {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="Component State"
+            label={`HTML Element Attributes ${htmlAttribCount ? `(${htmlAttribCount})` : ''} `}
           />
-          <Tab
+          {/* <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label={`HTML Element Attributes ${htmlAttribCount ? `(${htmlAttribCount})` : ''} `}
-          />
+            label="Component State"
+          /> */}
         </Tabs>
 
         {value === 0 && (

src/components/HTMLComponentPanel.jsx

@@ -33,9 +33,9 @@ class HTMLComponentPanel extends Component {
   };
 
   render() {
-    const { addChild } = this.props;
+    const { classes } = this.props;
     return (
-      <div className={'htmlPanel'} alignItems="flex-start" align="center">
+      <div align="center">
         <Tab
           disableRipple
           classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
@@ -67,7 +67,7 @@ class HTMLComponentPanel extends Component {
                 variant="outlined"
                 style={{
                   color: 'white',
-                  fontSize: '50%',
+                  fontSize: '80%',
                   margin: 0,
                   padding: 0,
                 }}
@@ -94,7 +94,7 @@ class HTMLComponentPanel extends Component {
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '80%',
               }}
             />
           </Grid>
@@ -118,7 +118,7 @@ class HTMLComponentPanel extends Component {
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '80%',
               }}
             />
           </Grid>
@@ -142,7 +142,7 @@ class HTMLComponentPanel extends Component {
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '80%',
               }}
             />
           </Grid>
@@ -166,11 +166,18 @@ class HTMLComponentPanel extends Component {
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '80%',
               }}
             />
           </Grid>
-          <Grid item xs={4}>
+          <Grid
+            item
+            xs={4}
+            style={{
+              margin: 0,
+              padding: 0,
+            }}
+          >
             <IconButton
               className="htmlicons"
               aria-label="Paragraph"
@@ -182,15 +189,19 @@ class HTMLComponentPanel extends Component {
                 padding: 0,
               }}
             >
-              <ParagraphIcon style={{ color: '#e0e0e0' }} />
+              <ParagraphIcon
+                style={{ color: '#e0e0e0', paddingRight: '0px', marginRight: '0px' }}
+              />
             </IconButton>
             <Chip
               label="Paragraph"
               className={classes.chip}
               variant="outlined"
               style={{
                 color: 'white',
-                fontSize: '50%',
+                fontSize: '62%',
+                padding: '0px',
+                margin: '0px',
               }}
             />
           </Grid>

src/components/HtmlAttr.jsx

@@ -81,7 +81,7 @@ class HtmlAttr extends Component {
                 notchedOutline: classes.notchedOutline,
               },
             }}
-            style={{ background: '#424242', height: '80%' }}
+            style={{ background: '#424242', height: '70%' }}
             label={attr}
             variant="outlined"
             id={attr}
@@ -92,7 +92,7 @@ class HtmlAttr extends Component {
         <Grid item xs={1}>
           <Fab
             variant="extended"
-            size="large"
+            size="small"
             color="default"
             aria-label="Save"
             style={{
@@ -107,7 +107,7 @@ class HtmlAttr extends Component {
           </Fab>
         </Grid>
         <Grid item xs={4}>
-          <Paper className={classes.root} style={{ height: '80%' }}>
+          <Paper className={classes.root} style={{ height: '70%' }}>
             <p style={{ color: 'black' }}>
               {focusChild.HTMLInfo[attr] ? focusChild.HTMLInfo[attr] : ' no attribute assigned'}
             </p>

src/components/KonvaStage.tsx

@@ -147,19 +147,7 @@ class KonvaStage extends Component {
         }}
         tabIndex="0" // required for keydown event to be heard by this.container
       >
-        {/* <Button
-          onClick={deleteChild}
-          style={{
-            width: '150px',
-            position: 'relative',
-            float: 'right',
-            background: '#dbdbdb',
-            zIndex: 2,
-          }}
-        >
-          delete child
-        </Button> */}
-        <Fab
+        {/* <Fab
           variant="extended"
           size="small"
           color="inherit"
@@ -179,7 +167,7 @@ class KonvaStage extends Component {
         >
           <DeleteIcon />
           Delete Child
-        </Fab>
+        </Fab> */}
         <Stage
           className={'canvasStage'}
           ref={node => {

src/components/LeftColExpansionPanel.jsx

@@ -1,14 +1,14 @@
-import React, { Fragment } from "react";
-import { withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import IconButton from "@material-ui/core/IconButton";
-import Grid from "@material-ui/core/Grid";
-import AddIcon from "@material-ui/icons/Add";
-import DeleteIcon from "@material-ui/icons/Delete";
-import Fab from "@material-ui/core/Fab";
+import React, { Fragment } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import Grid from '@material-ui/core/Grid';
+import AddIcon from '@material-ui/icons/Add';
+import DeleteIcon from '@material-ui/icons/Delete';
+import Button from '@material-ui/core/Button';
 
 const LeftColExpansionPanel = props => {
   const {
@@ -82,49 +82,51 @@ const LeftColExpansionPanel = props => {
                 {directParents ? (
                   <p
                     style={{
-                      marginLeft: "10px",
-                      color: "white",
-                      fontSize: "12px",
-                      marginTop: "1px"
+                      padding: '0px',
+                      marginTop: '0px',
+                      marginLeft: '15px',
+                      color: '#D3D3D3',
+                      fontSize: '12px',
                     }}
                   >
                     Used in: {directParents}
                   </p>
                 ) : (
                   <p
                     style={{
-                      marginLeft: "10px",
-                      color: "white",
-                      fontSize: "12px",
-                      marginTop: "1px"
+                      padding: '0px',
+                      marginTop: '0px',
+                      marginLeft: '15px',
+                      color: '#D3D3D3',
+                      fontSize: '12px',
                     }}
                   >
                     Not used
                   </p>
                 )}
               </span>
-              <Fab
-                variant="extended"
+              <Button
+                variant="text"
                 size="small"
-                color="inherit"
+                color="default"
                 aria-label="Delete"
                 className={classes.margin}
+                onClick={() => deleteComponent({
+                  componentId: id,
+                  stateComponents: components,
+                })
+                }
                 style={{
-                  marginLeft: "10px",
-                  marginTop: "5px",
-                  marginBottom: "10px"
+                  color: '#D3D3D3',
+                  marginBottom: '10px',
+                  marginTop: '0px',
+                  marginLeft: '11px',
+                  padding: '0px',
                 }}
-                // style={{ maxWidth: "20px" }}
-                onClick={() =>
-                  deleteComponent({
-                    componentId: id,
-                    stateComponents: components
-                  })
-                }
               >
-                <DeleteIcon />
+                <DeleteIcon style={{ color: '#D3D3D3' }} />
                 Delete
-              </Fab>
+              </Button>
               {/* <IconButton
                 style={{ display: "inline-block" }}
                 onClick={() =>

src/components/MainContainerHeader.jsx

@@ -103,18 +103,4 @@ const MainContainerHeader = (props) => {
   );
 };
 
-// MainContainerHeader.propTypes = {
-//   image: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-//   classes: PropTypes.object.isRequired,
-//   increaseHeight: PropTypes.func.isRequired,
-//   decreaseHeight: PropTypes.func.isRequired,
-//   showImageDeleteModal: PropTypes.func.isRequired,
-//   updateImage: PropTypes.func.isRequired,
-//   showGenerateAppModal: PropTypes.func.isRequired,
-//   totalComponents: PropTypes.number.isRequired,
-//   collapseColumn: PropTypes.func.isRequired,
-//   rightColumnOpen: PropTypes.bool.isRequired,
-//   toggleClass: PropTypes.bool.isRequired,
-// };
-
 export default withStyles(styles)(MainContainerHeader);

src/components/SimpleModal.jsx

@@ -78,7 +78,7 @@ const SimpleModal = (props) => {
           <div>
             {secBtnLabel ? (
               <Button
-                variant="extendedFab"
+                variant="contained"
                 color="secondary"
                 className={classes.button}
                 onClick={secBtnAction}
@@ -88,7 +88,7 @@ const SimpleModal = (props) => {
             ) : null}
             {primBtnLabel ? (
               <Button
-                variant="extendedFab"
+                variant="contained"
                 color="primary"
                 className={classes.button}
                 onClick={primBtnAction}