Merge pull request #114 from team-reactype/development

1.0 merge

Author: ChristianEdwardPadilla

main.js

@@ -1,8 +1,6 @@
 const path = require('path');
 
-const {
-  app, BrowserWindow, Menu, shell, dialog, ipcMain,
-} = require('electron');
+const { app, BrowserWindow, Menu, shell, dialog, ipcMain } = require('electron');
 
 // Uncomment below for hot reloading during development
 // require('electron-reload')(__dirname);
@@ -36,7 +34,7 @@ function openFile() {
 }
 
 // Choose directory
-ipcMain.on('choose_app_dir', (event) => {
+ipcMain.on('choose_app_dir', event => {
   const directory = dialog.showOpenDialog(mainWindow, {
     properties: ['openDirectory'],
     buttonLabel: 'Export',
@@ -63,11 +61,15 @@ const createWindow = () => {
     width,
     height,
     webPreferences: {
-      zoomFactor: 0.9,
+      zoomFactor: 0.7,
       'node-Integration': false,
     },
     show: false,
     icon: path.join(__dirname, '/src/public/icons/mac/icon.icns'),
+    win: {
+      icon: path.join(__dirname, '/src/public/icons/win/icon.ico'),
+      target: ['portable'],
+    },
   });
 
   // and load the index.html of the app.
@@ -200,11 +202,7 @@ const createWindow = () => {
 // Some APIs can only be used after this event occurs.
 app.on('ready', () => {
   if (isDev) {
-    const {
-      default: installExtension,
-      REACT_DEVELOPER_TOOLS,
-      REDUX_DEVTOOLS,
-    } = require('electron-devtools-installer');
+    const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');
 
     installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
       .then(() => {

src/components/DataTable.tsx

@@ -1,23 +1,23 @@
-import React from "react";
-import { withStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import Paper from "@material-ui/core/Paper";
-import DeleteIcon from "@material-ui/icons/Delete";
-import { IconButton } from "@material-ui/core";
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { IconButton } from '@material-ui/core';
 
 const styles = (theme: any) => ({
   root: {
-    width: "80%",
-    marginTop: theme.spacing.unit * 3
+    width: '80%',
+    marginTop: theme.spacing.unit * 3,
     // overflowX: "auto"
   },
   table: {
-    minWidth: 500
-  }
+    minWidth: 500,
+  },
 });
 
 /** **************************
@@ -28,31 +28,25 @@ const styles = (theme: any) => ({
 function dataTable(props: any) {
   const { classes, rowData, rowHeader, deletePropHandler } = props;
 
-  const renderHeader = rowHeader.map((col: any, idx: number) => (
-    <TableCell key={`head_+${idx}`}>{col}</TableCell>
-  ));
+  const renderHeader = rowHeader.map((col: any, idx: number) => <TableCell key={`head_+${idx}`}>{col}</TableCell>);
 
   function renderRowCells(row: any) {
     if (!row) return;
     // for some reason we must put each value in a div.
     return rowHeader.map((header: string, idx: number) => (
-      <TableCell align={"center"} key={`td_${idx}`}>
+      <TableCell align={'center'} key={`td_${idx}`}>
         {/* <div  align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
         {/* {row[header]} */}
-        {typeof row[header] === "string" ? row[header] : row[header].toString()}
+        {typeof row[header] === 'string' ? row[header] : row[header].toString()}
       </TableCell>
     ));
   }
   // style={{height: 30}}
   const renderRows = rowData.map((row: any) => (
     <TableRow key={`row-${row.id}`}>
       {renderRowCells(row)}
-      <TableCell align={"center"} padding={"none"}>
-        <IconButton
-          color="default"
-          fontSize="small"
-          onClick={() => deletePropHandler(row.id)}
-        >
+      <TableCell align={'center'} padding={'none'}>
+        <IconButton color="default" fontSize="small" onClick={() => deletePropHandler(row.id)}>
           <DeleteIcon />
         </IconButton>
         {/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
@@ -62,7 +56,7 @@ function dataTable(props: any) {
 
   return (
     <Paper className={classes.root}>
-      <Table className={classes.table} selectable={"true"}>
+      <Table className={classes.table} selectable={'true'}>
         <TableHead>
           <TableRow>{renderHeader}</TableRow>
         </TableHead>

src/components/Props.jsx

@@ -73,8 +73,8 @@ const styles = theme => ({
   },
 });
 
-const mapDispatchToProps = dispatch => ({
-  addProp: ({ key, value, required, type }) =>
+const mapDispatchToProps = (dispatch: any) => ({
+  addProp: ({ key, value, required, type }: { key: string, value: string, required: boolean, type: string }) =>
     dispatch(
       addProp({
         key,
@@ -83,10 +83,10 @@ const mapDispatchToProps = dispatch => ({
         type,
       }),
     ),
-  deleteProp: propId => dispatch(deleteProp(propId)),
+  deleteProp: (propId: number) => dispatch(deleteProp(propId)),
 });
 
-const mapStateToProps = store => ({
+const mapStateToProps = (store: any) => ({
   focusComponent: store.workspace.focusComponent,
 });
 
@@ -95,10 +95,9 @@ const availablePropTypes = {
   number: 'NUM',
   object: 'OBJ',
   array: 'ARR',
-  number: 'NUM',
   boolean: 'BOOL',
   function: 'FUNC',
-  symbol: 'SYM',
+  // symbol: 'SYM',
   node: 'NODE',
   element: 'ELEM',
   any: 'ANY',
@@ -190,7 +189,7 @@ class Props extends Component {
           <Fragment>
             <div className="props-container" style={{ marginTop: '20px', width: '90%', height: '80%' }}>
               <Grid container spacing={8}>
-                <Grid item xs={4}>
+                <Grid item xs={3}>
                   <form className="props-input" onSubmit={this.handleAddProp}>
                     <Grid container spacing={8}>
                       <Grid item xs={6}>
@@ -275,6 +274,7 @@ class Props extends Component {
                 <Grid item xs={8}>
                   <DataTable rowHeader={rowHeader} rowData={propsRows} deletePropHandler={deleteProp} />
                 </Grid>
+                <Grid item xs={1} />
               </Grid>
             </div>
           </Fragment>

src/components/TransformerComponent.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Transformer } from 'react-konva';
-import { ChildInt } from '../utils/interfaces.ts';
+import { ChildInt } from '../utils/interfaces';
 
 export default class TransformerComponent extends Component {
   componentDidMount() {

src/public/styles/style.css

@@ -12,7 +12,7 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Open sans', sans-serif;
+  font-family: "Open sans", sans-serif;
   font-weight: 400;
   overflow: hidden;
 }
@@ -206,6 +206,7 @@ RIGHT COLUMN
   flex-direction: row; */
   background-color: #fcfcfc;
   /* box-shadow: 0 -5px 7px 2px rgb(255, 0, 0); */
+  margin-right: 100px;
 }
 
 .htmlattr {