Merge pull request #18 from sean1292/staging

Merging changes from two branches

Author: ibeeliot

main.js

@@ -73,7 +73,7 @@ const createWindow = () => {
       'node-Integration': false
     },
     show: false,
-    icon: path.join(__dirname, '/src/public/icons/mac/icon.icns'),
+    icon: path.join(__dirname, '/src/public/icons/png/256x256.png'),
     win: {
       icon: path.join(__dirname, '/src/public/icons/win/icon.ico'),
       target: ['portable']

package.json

@@ -88,9 +88,11 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^2.0.0",
+    "@types/prettier": "^1.19.0",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
     "@types/react-redux": "^7.0.8",
+    "@types/react-syntax-highlighter": "^11.0.4",
     "autoprefixer": "^9.0.1",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",

src/components/BottomPanel.tsx

@@ -1,20 +1,15 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import {
-  handleClose,
-  deleteCompProp,
-  addCompProp
-} from "../actions/components.ts";
-import BottomTabs from "./BottomTabs.tsx";
-import { ComponentInt, ComponentsInt, ChildInt } from "../utils/Interfaces.ts";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { handleClose, deleteProp, addProp } from '../actions/components';
+import BottomTabs from './BottomTabs';
+import { ComponentInt, ComponentsInt, ChildInt } from '../utils/Interfaces';
 
-const IPC = require("electron").ipcRenderer;
+const IPC = require('electron').ipcRenderer;
 
 const mapDispatchToProps = (dispatch: any) => ({
   handleNotificationClose: () => dispatch(handleClose()),
-  deleteProp: ({ id, index }: { id: number; index: number }) =>
-    dispatch(deleteCompProp({ id, index })),
-  addProp: (prop: any) => dispatch(addCompProp(prop))
+  deleteProp: (id: number) => dispatch(deleteProp(id)),
+  addProp: (prop: any) => dispatch(addProp(prop))
 });
 
 const mapStateToProps = (store: any) => ({
@@ -32,16 +27,10 @@ interface PropsInt {
 
 class BottomPanel extends Component<PropsInt> {
   render() {
-    const {
-      components,
-      focusComponent,
-      deleteProp,
-      addProp,
-      focusChild
-    } = this.props;
+    const { components, focusComponent, deleteProp, addProp, focusChild } = this.props;
 
     return (
-      <div className="bottom-panel" style={{ width: "100%" }}>
+      <div className="bottom-panel" style={{ width: '100%' }}>
         <BottomTabs
           components={components}
           focusComponent={focusComponent}
@@ -54,7 +43,4 @@ class BottomPanel extends Component<PropsInt> {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(BottomPanel);
+export default connect(mapStateToProps, mapDispatchToProps)(BottomPanel);

src/components/Props.tsx

@@ -8,9 +8,9 @@ import Button from '@material-ui/core/Button';
 import Select from '@material-ui/core/Select';
 import Switch from '@material-ui/core/Switch';
 import InputLabel from '@material-ui/core/InputLabel';
-import { addProp, deleteProp } from '../actions/components.ts';
-import DataTable from './DataTable.tsx';
-import { ComponentInt } from '../utils/Interfaces.ts';
+import { addProp, deleteProp } from '../actions/components';
+import DataTable from './DataTable';
+import { ComponentInt } from '../utils/Interfaces';
 
 const styles = theme => ({
   root: {
@@ -94,8 +94,8 @@ const availablePropTypes = {
   boolean: 'BOOL',
   function: 'FUNC',
   // symbol: 'SYM',
-  node: 'NODE',
-  element: 'ELEM',
+  // node: 'NODE',
+  // element: 'ELEM',
   any: 'ANY',
   tuple: 'TUP',
   enum: 'ENUM'

src/containers/MainContainer.tsx

@@ -53,12 +53,7 @@ const mapDispatchToProps = (dispatch: any) => ({
   handleTransformation: (
     componentId: number,
     childId: number,
-    {
-      x,
-      y,
-      width,
-      height
-    }: { x: number; y: number; width: number; height: number }
+    { x, y, width, height }: { x: number; y: number; width: number; height: number }
   ) =>
     dispatch(
       handleTransform(componentId, childId, {
@@ -68,25 +63,18 @@ const mapDispatchToProps = (dispatch: any) => ({
         height
       })
     ),
-    //this doesn't do anything here
+  //this doesn't do anything here
   // changeImagePath: (imageSource: string) =>
   //   dispatch(actions.changeImagePath(imageSource)),
 
-
   //this function changes the focus of the child within the focused component, thereby binding it to the transformer as a node
-  changeFocusChild: ({ childId }: { childId: number }) =>
-    dispatch(changeFocusChild({ childId })),
+  changeFocusChild: ({ childId }: { childId: number }) => dispatch(changeFocusChild({ childId })),
 
   //the difference between this dispatch function and the one above, is that this once alters the focused child status within the array of components,
   //vs the one above changes the focusChild property in the state
-  changeComponentFocusChild: ({
-    componentId,
-    childId
-  }: {
-    componentId: number;
-    childId: number;
-  }) => dispatch(changeComponentFocusChild({ componentId, childId })),
-  deleteChild: ({}) => dispatch(deleteChild({})) // if u send no prms, function will delete focus child. <-- This comment was already here, unsure what exactly it means. 
+  changeComponentFocusChild: ({ componentId, childId }: { componentId: number; childId: number }) =>
+    dispatch(changeComponentFocusChild({ componentId, childId })),
+  deleteChild: ({}) => dispatch(deleteChild({})) // if u send no prms, function will delete focus child. <-- This comment was already here, unsure what exactly it means.
 });
 
 const mapStateToProps = (store: any) => ({
@@ -109,7 +97,7 @@ class MainContainer extends Component<PropsInt, StateInt> {
   // };
 
   render() {
-    //const { draggable, modal } = this.state; //this is being destructured but never read. 
+    //const { draggable, modal } = this.state; //this is being destructured but never read.
     const {
       components,
       handleTransformation,
@@ -126,9 +114,10 @@ class MainContainer extends Component<PropsInt, StateInt> {
 
     return (
       <MuiThemeProvider theme={theme}>
-        <div className='main-container'>
+        <div className="main-container">
           {/* {modal} */}
-          <div className='main' //ref={main} **no function, commenting out**
+          <div
+            className="main" //ref={main} **no function, commenting out**
           >
             <KonvaStage
               image={image}

src/utils/componentRender.util.ts

@@ -1,16 +1,7 @@
-import {
-  ComponentInt,
-  ComponentsInt,
-  ChildInt,
-  ChildrenInt,
-  PropInt
-} from './Interfaces';
+import { ComponentInt, ComponentsInt, ChildInt, ChildrenInt, PropInt } from './Interfaces';
 import cloneDeep from './cloneDeep';
 
-const componentRender = (
-  component: ComponentInt,
-  components: ComponentsInt
-) => {
+const componentRender = (component: ComponentInt, components: ComponentsInt) => {
   const {
     childrenArray,
     title,
@@ -130,10 +121,7 @@ const componentRender = (
 
     ${childrenArray
       .filter(child => child.childType !== 'HTML')
-      .map(
-        child =>
-          `import ${child.componentName} from './${child.componentName}.tsx'`
-      )
+      .map(child => `import ${child.componentName} from './${child.componentName}.tsx'`)
       .reduce((acc: Array<string>, child) => {
         if (!acc.includes(child)) {
           acc.push(child);
@@ -147,11 +135,7 @@ const componentRender = (
       ${props.map(prop => `${prop.key}: ${typeSwitcher(prop.type)}\n`)}
     };
 
-      ${
-        classBased
-          ? `class ${title} extends Component {`
-          : `const ${title} = (props: Props) => {`
-      }
+      ${classBased ? `class ${title} extends Component {` : `const ${title} = (props: Props) => {`}
       ${
         stateful && !classBased
           ? `const  [prop, setProp] = useState("INITIAL VALUE FOR PROP");`
@@ -165,11 +149,9 @@ const componentRender = (
        }`
           : ``
       }
-
       ${classBased ? `render(): JSX.Element {` : ``}
-      const {${props.map(el => el.key).join(', ')}} = ${
-    classBased ? `this.props` : `props`
-  };
+      const {${props.map(el => el.key).join(', ')}} = ${classBased ? `this.props` : `props`};
+      
       return (
         <div>
         ${cloneDeep(childrenArray)
@@ -178,14 +160,12 @@ const componentRender = (
             //console.log('this is childrenArray', child.HTMLInfo); //Did someone leave this here?//
             if (child.componentName == 'Button') {
               return `
-              <${componentNameGenerator(child)} ${propDrillTextGenerator(
-                child
-              )}>${child.HTMLInfo.value}</${componentNameGenerator(child)}>`;
+              <${componentNameGenerator(child)} ${propDrillTextGenerator(child)}>${
+                child.HTMLInfo.value
+              }</${componentNameGenerator(child)}>`;
             } else
               return `
-              <${componentNameGenerator(child)} ${propDrillTextGenerator(
-                child
-              )}/>`;
+              <${componentNameGenerator(child)} ${propDrillTextGenerator(child)}/>`;
           })
           .join('\n')}
         </div>