converted App to App.tsx and theme to theme.ts.

Author: spincycle01

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;

src/components/App.jsx renamed to src/components/App.tsx

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

src/components/HTMLComponentPanel.jsx

@@ -10,7 +10,7 @@ import ButtonIcon from "@material-ui/icons/EditAttributes";
 import LinkIcon from "@material-ui/icons/Link";
 import ListIcon from "@material-ui/icons/List";
 import ParagraphIcon from "@material-ui/icons/LocalParking";
-import theme from "../components/theme";
+import theme from "../components/theme.ts";
 import Typography from '@material-ui/core/Typography';
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";

src/components/__tests__/App.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 // import '../../setupTests';
 import { shallow } from 'enzyme';
-import App from '../App.jsx';
+import App from '../App.tsx';
 import AppContainer from '../../containers/AppContainer.jsx';
 
 it('contains a AppContainer', () => {

src/components/theme.js renamed to src/components/theme.ts

@@ -1,8 +1,18 @@
 import { createMuiTheme } from '@material-ui/core/styles';
 // import teal from '@material-ui/core/colors/teal';
 import indigo from '@material-ui/core/colors/indigo';
+import { Palette } from '@material-ui/core/styles/createPalette';
 
-const theme = createMuiTheme({
+interface palette {
+  primary: object;
+  secondary: any;
+}
+
+interface theme {
+  palette: palette;
+}
+
+const theme: theme = createMuiTheme({
   palette: {
     primary: {
       light: '#00e676',

src/containers/AppContainer.jsx

@@ -7,7 +7,7 @@ import LeftContainer from './LeftContainer.jsx';
 import MainContainer from './MainContainer.jsx';
 import RightContainer from './RightContainer.jsx';
 import convertIdsToObjs from '../utils/convertIdsToObjs.util';
-import theme from '../components/theme';
+import theme from '../components/theme.ts';
 import { loadInitData } from '../actions/components';
 
 const mapStateToProps = store => ({

src/containers/MainContainer.jsx

@@ -6,7 +6,7 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import BottomPanel from '../components/BottomPanel.jsx';
-import theme from '../components/theme';
+import theme from '../components/theme.ts';
 import {
   openExpansionPanel,
   handleTransform,

src/index.js

@@ -2,7 +2,7 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import App from './components/App.jsx';
+import App from './components/App.tsx';
 import store from './store';
 
 ReactDOM.render(

src/utils/componentRender.util.js

@@ -1,7 +1,9 @@
-const componentRender = (component) => {
+const componentRender = (component, data) => {
   const {
     stateful,
-    children,
+    id,
+    position,
+    childrenArray,
     title,
     props,
   } = component;
@@ -10,8 +12,8 @@ const componentRender = (component) => {
     return `
       import React, { Component } from 'react';
       import PropTypes from 'prop-types';
-      ${children.map(child => `import ${child.title} from './${child.title}.tsx'`).join('\n')}
-
+      ${childrenArray.map(child => `import ${child.componentName} from './${child.componentName}.tsx'`).join('\n')}
+      
       class ${title} extends Component {
       constructor(props) {
         super(props);
@@ -21,7 +23,7 @@ const componentRender = (component) => {
         const { ${props.map(p => `${p.key}`).join(', ')} } = this.props;
         return (
           <div>
-          ${children.map(child => `<${child.title} ${child.props.map(prop => `${prop.key}={${prop.value}}`).join(' ')}/>`).join('\n')}
+          ${childrenArray.map(child => `<${child.componentName}/>`).join('\n')}
           </div>
         )
         }
@@ -38,11 +40,15 @@ const componentRender = (component) => {
   return `
     import React from 'react';
     import PropTypes from 'prop-types';
-    ${children.map(child => `import ${child.title} from './${child.title}.tsx'`).join('\n')}
-  
+    ${childrenArray.map(child => `import ${child.componentName} from './${child.componentName}.tsx'`).join('\n')}
+    
+
+    type Props = {
+      
+    }
     const ${title} = props => (
       <div>
-        ${children.map(child => `<${child.title} ${child.props.map(prop => `${prop.key}={${prop.value}}`).join(' ')}/>`).join('\n')}
+        ${childrenArray.map(child => `<${child.componentName}/>`).join('\n')}
       </div>
     );