changed theme.js to theme.ts with interfaces

Author: ChristianEdwardPadilla

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

@@ -1,44 +1,43 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { compose } from "redux";
-import { withStyles } from "@material-ui/core/styles";
-import TextField from "@material-ui/core/TextField";
-import IconButton from "@material-ui/core/IconButton";
-import ImageIcon from "@material-ui/icons/Image";
-import FormIcon from "@material-ui/icons/Description";
-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 React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import IconButton from '@material-ui/core/IconButton';
+import ImageIcon from '@material-ui/icons/Image';
+import FormIcon from '@material-ui/icons/Description';
+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 Typography from '@material-ui/core/Typography';
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import theme from './theme.ts';
 // import {HTMLelements,getSize} from "../utils/htmlElements.util";
 
-
 class HTMLComponentPanel extends Component {
   state = {
-    HtmlComponentName: ""
+    HtmlComponentName: '',
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.setState({
-      HtmlComponentName: event.target.value
+      HtmlComponentName: event.target.value,
     });
   };
 
-  handleCreateHTMLChild = type => {
+  handleCreateHTMLChild = (type) => {
     this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
   };
 
   render() {
     const { addChild } = this.props;
     return (
-      <Paper className={"htmlPanelz"}>
+      <Paper className={'htmlPanelz'}>
         <Typography variant="title" component="h3">
-         Add HTML elements
-         </Typography>
+          Add HTML elements
+        </Typography>
         {/* <TextField
           id="title-input"
           label="Add HTML component"
@@ -61,7 +60,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Image"
               onClick={() => {
-                this.handleCreateHTMLChild("Image");
+                this.handleCreateHTMLChild('Image');
               }}
 
               // onClick={() => {
@@ -76,7 +75,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Form"
               onClick={() => {
-                this.handleCreateHTMLChild("Form");
+                this.handleCreateHTMLChild('Form');
               }}
             >
               <FormIcon />
@@ -86,7 +85,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Button"
               onClick={() => {
-                this.handleCreateHTMLChild("Button");
+                this.handleCreateHTMLChild('Button');
               }}
             >
               <ButtonIcon />
@@ -96,7 +95,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Link"
               onClick={() => {
-                this.handleCreateHTMLChild("Link");
+                this.handleCreateHTMLChild('Link');
               }}
             >
               <LinkIcon />
@@ -106,7 +105,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="List"
               onClick={() => {
-                this.handleCreateHTMLChild("List");
+                this.handleCreateHTMLChild('List');
               }}
             >
               <ListIcon />
@@ -116,7 +115,7 @@ class HTMLComponentPanel extends Component {
             <IconButton
               aria-label="Paragraph"
               onClick={() => {
-                this.handleCreateHTMLChild("Paragraph");
+                this.handleCreateHTMLChild('Paragraph');
               }}
             >
               <ParagraphIcon />

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

@@ -2,7 +2,16 @@ import { createMuiTheme } from '@material-ui/core/styles';
 // import teal from '@material-ui/core/colors/teal';
 import indigo from '@material-ui/core/colors/indigo';
 
-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,9 +1,6 @@
-const componentRender = (component) => {
+const componentRender = (component, data) => {
   const {
-    stateful,
-    children,
-    title,
-    props,
+    stateful, children, title, props,
   } = component;
 
   if (stateful) {
@@ -21,14 +18,22 @@ 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')}
+          ${children
+    .map(
+      child => `<${child.title} ${child.props
+        .map(prop => `${prop.key}={${prop.value}}`)
+        .join(' ')}/>`,
+    )
+    .join('\n')}
           </div>
         )
         }
       }
 
       ${title}.propTypes = {
-        ${props.map(p => `${p.key}: PropTypes.${p.type}${p.required ? '.isRequired' : ''},`).join('\n')}
+        ${props
+    .map(p => `${p.key}: PropTypes.${p.type}${p.required ? '.isRequired' : ''},`)
+    .join('\n')}
       }
 
       export default ${title};
@@ -42,12 +47,20 @@ const componentRender = (component) => {
   
     const ${title} = props => (
       <div>
-        ${children.map(child => `<${child.title} ${child.props.map(prop => `${prop.key}={${prop.value}}`).join(' ')}/>`).join('\n')}
+        ${children
+    .map(
+      child => `<${child.title} ${child.props
+        .map(prop => `${prop.key}={${prop.value}}`)
+        .join(' ')}/>`,
+    )
+    .join('\n')}
       </div>
     );
 
     ${title}.propTypes = {
-      ${props.map(p => `${p.key}: PropTypes.${p.type}${p.required ? '.isRequired' : ''},`).join('\n')}
+      ${props
+    .map(p => `${p.key}: PropTypes.${p.type}${p.required ? '.isRequired' : ''},`)
+    .join('\n')}
     }
 
     export default ${title};

src/utils/createFiles.util.js

@@ -16,7 +16,8 @@ const createFiles = (data, path) => {
   const promises = [];
   data.forEach((component) => {
     const newPromise = new Promise((resolve, reject) => {
-      fs.writeFile(`${dir}/${component.title}.tsx`,
+      fs.writeFile(
+        `${dir}/${component.title}.tsx`,
         format(componentRender(component, data), {
           singleQuote: true,
           trailingComma: 'es5',
@@ -27,7 +28,8 @@ const createFiles = (data, path) => {
         (err) => {
           if (err) return reject(err.message);
           return resolve(path);
-        });
+        },
+      );
     });
 
     promises.push(newPromise);