MVP

main.js

@@ -44,6 +44,7 @@ function exportComponents() {
 ipcMain.on('choose_app_dir', (event) => {
   const directory = dialog.showOpenDialog(mainWindow, {
     properties: ['openDirectory'],
+    buttonLabel: 'Export',
   });
 
   if (!directory) return;

package.json

@@ -75,15 +75,17 @@
     ]
   },
   "dependencies": {
-    "@material-ui/core": "^1.4.1",
+    "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^2.0.0",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
+    "@types/react-redux": "^7.0.8",
     "autoprefixer": "^9.0.1",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",
     "cli-spinner": "^0.2.8",
     "commander": "^2.17.1",
+    "d3": "^5.9.2",
     "electron": "^2.0.7",
     "electron-reload": "^1.4.0",
     "enzyme": "^3.4.1",
@@ -93,6 +95,7 @@
     "prettier": "^1.14.2",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
+    "react-d3-tree": "^1.12.3",
     "react-dom": "^16.4.1",
     "react-draggable": "^3.0.5",
     "react-konva": "^1.7.12",

src/actionTypes/index.js

@@ -25,3 +25,4 @@ export const DELETE_PROP = 'DELETE_PROP';
 export const ADD_PROP = 'ADD_PROP';
 export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
 export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
+export const UPDATE_HTML_ATTR = 'UPDATE_HTML_ATTR';

src/actions/components.js

@@ -26,6 +26,7 @@ import {
   ADD_PROP,
   DELETE_ALL_DATA,
   CHANGE_IMAGE_PATH,
+  UPDATE_HTML_ATTR,
 } from '../actionTypes/index';
 
 import { loadState } from '../localStorage';
@@ -74,12 +75,9 @@ export const deleteChild = ({}) => (dispatch) => {
 };
 
 export const deleteComponent = ({ componentId, stateComponents }) => (dispatch) => {
-  console.log('Hello from component.js delete component.componentId= ', componentId);
-
   // find all places where the "to be delted" is a child and do what u gotta do
   stateComponents.forEach((parent) => {
-    parent.childrenArray.filter(child => child.childComponentId == componentId).forEach((child) => {
-      // console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
+    parent.childrenArray.filter(child => child.childComponentId === componentId).forEach((child) => {
       dispatch({
         type: DELETE_CHILD,
         payload: {
@@ -133,8 +131,8 @@ export const changeFocusComponent = ({ title }) => (dispatch) => {
 };
 
 // make sure childId is being sent in
-export const changeFocusChild = ({ title, childId }) => (dispatch) => {
-  dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
+export const changeFocusChild = ({ childId }) => (dispatch) => {
+  dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
 };
 
 export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
@@ -144,12 +142,15 @@ export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch
   });
 };
 
-export const exportFiles = ({ components, path }) => (dispatch) => {
+export const exportFiles = ({
+  components, path, appName, exportAppBool,
+}) => (dispatch) => {
+  // this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
   dispatch({
     type: EXPORT_FILES,
   });
 
-  createFiles(components, path)
+  createFiles(components, path, appName, exportAppBool)
     .then(dir => dispatch({
       type: EXPORT_FILES_SUCCESS,
       payload: { status: true, dir: dir[0] },
@@ -183,26 +184,42 @@ export const createApplication = ({
   path,
   components = [],
   genOption,
-  appName = 'proto_app',
-  repoUrl,
+  appName = 'reactype_app',
+  exportAppBool,
 }) => (dispatch) => {
   if (genOption === 0) {
-    dispatch(exportFiles({ path, components }));
+    exportAppBool = false;
+    dispatch(
+      exportFiles({
+        appName,
+        path,
+        components,
+        exportAppBool,
+      }),
+    );
   } else if (genOption) {
+    exportAppBool = true;
     dispatch({
       type: CREATE_APPLICATION,
     });
     createApplicationUtil({
       path,
       appName,
       genOption,
-      repoUrl,
+      exportAppBool,
     })
       .then(() => {
         dispatch({
           type: CREATE_APPLICATION_SUCCESS,
         });
-        dispatch(exportFiles({ path: `${path}/${appName}`, components }));
+        dispatch(
+          exportFiles({
+            appName,
+            path,
+            components,
+            exportAppBool,
+          }),
+        );
       })
       .catch(err => dispatch({
         type: CREATE_APPLICATION_ERROR,
@@ -228,3 +245,10 @@ export const addProp = prop => ({
   type: ADD_PROP,
   payload: { ...prop },
 });
+
+export const updateHtmlAttr = ({ attr, value }) => (dispatch) => {
+  dispatch({
+    type: UPDATE_HTML_ATTR,
+    payload: { attr, value },
+  });
+};

src/components/App.jsx → src/components/App.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import '../public/styles/style.css';
 import { MuiThemeProvider } from '@material-ui/core/styles';
-import theme from './theme';
-import AppContainer from '../containers/AppContainer.jsx';
+import theme from './theme.ts';
+import AppContainer from '../containers/AppContainer.tsx';
 
 class App extends Component {
   render() {

src/components/BottomPanel.jsx

@@ -1,26 +1,23 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import {
-  handleClose,
-  deleteCompProp,
-  addCompProp
-} from "../actions/components";
-import RightTabs from "./RightTabs.jsx";
-import { some } from "bluebird-lst";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { some } from 'bluebird-lst';
+import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
+import RightTabs from './RightTabs.jsx';
 
-const IPC = require("electron").ipcRenderer;
+const IPC = require('electron').ipcRenderer;
 
 const mapDispatchToProps = dispatch => ({
   handleNotificationClose: () => dispatch(handleClose()),
   deleteProp: ({ id, index }) => dispatch(deleteCompProp({ id, index })),
-  addProp: prop => dispatch(addCompProp(prop))
+  addProp: prop => dispatch(addCompProp(prop)),
 });
 
 const mapStateToProps = store => ({
   // successOpen: store.workspace.successOpen,
   // errorOpen: store.workspace.errorOpen,
   // appDir: store.workspace.appDir,
-  focusChild: store.workspace.focusChild
+  focusChild: store.workspace.focusChild,
+  components: store.workspace.components,
 });
 
 class BottomPanel extends Component {
@@ -30,7 +27,7 @@ class BottomPanel extends Component {
   // };
 
   viewAppDir = () => {
-    IPC.send("view_app_dir", this.props.appDir);
+    IPC.send('view_app_dir', this.props.appDir);
   };
 
   render() {
@@ -43,12 +40,12 @@ class BottomPanel extends Component {
       focusComponent,
       deleteProp,
       addProp,
-      focusChild
+      focusChild,
       // rightColumnOpen
     } = this.props;
 
     return (
-      <div className="bottom-panel" style={{ width: "100%" }}>
+      <div className="bottom-panel" style={{ width: '100%' }}>
         <RightTabs
           components={components}
           focusComponent={focusComponent}
@@ -71,5 +68,5 @@ class BottomPanel extends Component {
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(BottomPanel);

src/components/DataTable.jsx

@@ -1,25 +1,25 @@
-import React from "react";
+import React from 'react';
 // import PropTypes from 'prop-types';
-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 Button from "@material-ui/core/Button";
-import DeleteIcon from "@material-ui/icons/Delete";
-import { IconButton } from "@material-ui/core";
+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 Button from '@material-ui/core/Button';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { IconButton } from '@material-ui/core';
 
 const styles = theme => ({
   root: {
-    width: "80%",
+    width: '80%',
     marginTop: theme.spacing.unit * 3,
-    overflowX: "auto"
+    // overflowX: "auto"
   },
   table: {
-    minWidth: 500
-  }
+    minWidth: 500,
+  },
 });
 
 /** **************************
@@ -28,7 +28,9 @@ const styles = theme => ({
  * ****************************** */
 
 function dataTable(props) {
-  const { classes, rowData, rowHeader, deletePropHandler } = props;
+  const {
+    classes, rowData, rowHeader, deletePropHandler,
+  } = props;
 
   const renderHeader = rowHeader.map((col, idx) => (
     <TableCell key={`head_+${idx}`}>{col}</TableCell>
@@ -38,23 +40,19 @@ function dataTable(props) {
     if (!row) return;
     // for some reason we must put each value in a div.
     return rowHeader.map((header, idx) => (
-      <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}}
+  // style={{height: 30}}
   const renderRows = rowData.map(row => (
     <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> */}
@@ -64,7 +62,7 @@ function dataTable(props) {
 
   return (
     <Paper className={classes.root}>
-      <Table className={classes.table} selectable={"true"}>
+      <Table className={classes.table} selectable={'true'}>
         <TableHead>
           <TableRow>{renderHeader}</TableRow>
         </TableHead>