Skip to content

Commit fd328bf

Browse files
andrewjcho84andrewjcho84
authored
Merge pull request #24 from oslabs-beta/staging-faast
Add export project functionality by Fredo
2 parents 9051c69 + 4f756a9 commit fd328bf

File tree

10 files changed

+103
-101
lines changed

10 files changed

+103
-101
lines changed

‎src/components/left/ComponentPanelNew.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ const useStyles = makeStyles({
2020
height: '110px',
2121
textAlign: 'center',
2222
display: 'flex',
23-
justifyContent: 'flex-end'
23+
justifyContent: 'center',
24+
paddingLeft: '35px'
2425
},
2526
panelWrapper: {
2627
marginTop: '35px',
@@ -30,7 +31,8 @@ const useStyles = makeStyles({
3031
maxHeight: '675px',
3132
minHeight: '120px',
3233
overflowY: 'auto',
33-
marginLeft: '-15px'
34+
marginLeft: '-15px',
35+
marginRight: '-15px'
3436
},
3537
input: {
3638
color: '#fff',

‎src/containers/LeftContainerNew.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,24 @@ const IPC = require('electron').ipcRenderer;
2222
const useStyles = makeStyles({
2323
btnGroup: {
2424
display: 'flex',
25+
flexDirection: 'column',
26+
alignItems: 'center',
2527
justifyContent: 'center',
2628
width: '100%',
2729
position: 'absolute',
28-
bottom: '65px',
30+
bottom: '40px',
2931
left: '0px'
3032
},
3133
exportBtn: {
3234
width: '55%',
3335
backgroundColor: 'rgba(1,212,109,0.1)',
3436
fontSize: '1em'
37+
},
38+
clearBtn: {
39+
width: '55%',
40+
fontSize: '1em',
41+
marginTop: '15px',
42+
color: 'red'
3543
}
3644
});
3745

@@ -116,10 +124,11 @@ const LeftContainer = (): JSX.Element => {
116124
setGenOption(genOpt);
117125
console.log('Gen option is ', genOpt);
118126
// closeModal
127+
exportProject('/Users', 'NEW PROJECT', genOpt, state.components);
119128
closeModal();
120129
// Choose app dir
121130
// NOTE: This functionality isn't working right now. Will upgrade Electron and see if that fixes it
122-
// chooseAppDir();
131+
//chooseAppDir();
123132

124133
// exportProject('/Users/tylersullberg/', 'NEW PROJECT', 1);
125134
};
@@ -140,16 +149,7 @@ const LeftContainer = (): JSX.Element => {
140149
console.log('app directory selected!!!');
141150
});
142151

143-
// createModal({
144-
// closeModal,
145-
// children,
146-
// message: 'Choose export preference:',
147-
// primBtnLabel: null,
148-
// primBtnAction: null,
149-
// secBtnAction: null,
150-
// secBtnLabel: null,
151-
// open: true
152-
// });
152+
153153
setModal(
154154
createModal({
155155
closeModal,
@@ -165,7 +165,7 @@ const LeftContainer = (): JSX.Element => {
165165
};
166166

167167
return (
168-
<div className="column left" style={{ minWidth: '375px' }}>
168+
<div className="column left">
169169
<Grid container direction="row" alignItems="center">
170170
<ComponentPanel />
171171
<HTMLPanel />
@@ -179,6 +179,9 @@ const LeftContainer = (): JSX.Element => {
179179
>
180180
EXPORT PROJECT
181181
</Button>
182+
<Button className={classes.clearBtn}>
183+
CLEAR WORKSPACE
184+
</Button>
182185
</div>
183186
</Grid>
184187
{modal}

‎src/context/HTMLTypes.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ const HTMLTypes: HTMLType[] = [
3535
style: { color: 'purple' },
3636
placeHolderShort: (
3737
<ul>
38-
<li>List item 1</li>
39-
<li>List item 2</li>
40-
<li>List item 3</li>
38+
<li>item 1</li>
39+
<li>item 2</li>
40+
<li>item 3</li>
4141
</ul>
4242
),
4343
placeHolderLong: '',

‎src/context/initialState.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const initialState: State = {
44
components: [
55
{
66
id: 1,
7-
name: 'index',
7+
name: 'App',
88
style: {},
99
code:'<div>This is the CODE!!!!</div>',
1010
children: []

‎src/helperFunctions/generateCode.ts

Lines changed: 17 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,65 +2,7 @@ import { format } from 'prettier';
22
import { Component, State, ChildElement } from '../interfaces/InterfacesNew';
33
import HTMLTypes from '../context/HTMLTypes';
44

5-
// const initialState: State = {
6-
// components: [
7-
// {
8-
// id: 1,
9-
// name: 'index',
10-
// style: { backgroundColor: 'white' },
11-
// code: '',
12-
// children: [
13-
// {
14-
// type: 'Component',
15-
// typeId: 2,
16-
// childId: 1,
17-
// children: [],
18-
// style: { color: 'yello' }
19-
// },
20-
// {
21-
// type: 'Component',
22-
// typeId: 2,
23-
// childId: 2,
24-
// children: [],
25-
// style: {}
26-
// },
27-
// // {
28-
// // type: 'HTML Element',
29-
// // typeId: 1,
30-
// // childId: 3,
31-
// // children: [],
32-
// // style: {}
33-
// // },
34-
// {
35-
// type: 'HTML Element',
36-
// typeId: 11,
37-
// childId: 4,
38-
// children: [
39-
// {
40-
// type: 'Component',
41-
// typeId: 2,
42-
// childId: 2,
43-
// children: [],
44-
// style: { height: '90%' }
45-
// }
46-
// ],
47-
// style: { width: '100%' }
48-
// }
49-
// ]
50-
// },
51-
// {
52-
// id: 2,
53-
// name: 'Section',
54-
// style: {},
55-
// code: '',
56-
// children: []
57-
// }
58-
// ],
59-
// rootComponents: [1],
60-
// canvasFocus: { componentId: 1, childId: null },
61-
// nextComponentId: 2,
62-
// nextChildId: 1
63-
// };
5+
646

657
// generate code based on the component heirarchy
668
const generateUnformattedCode = (comps: Component[], componentId: number) => {
@@ -103,11 +45,25 @@ const generateUnformattedCode = (comps: Component[], componentId: number) => {
10345
if (child.tag === 'img') {
10446
return `<${child.tag} src=""${formatStyles(child.style)} />`;
10547
} else if (child.tag === 'a') {
106-
return `<${child.tag} href=""${formatStyles(child.style)} />`;
48+
return `<${child.tag} href=""${formatStyles(child.style)}>[LINK]</${child.tag}>`;
10749
} else if (child.tag === 'div') {
10850
return `<${child.tag}${formatStyles(
10951
child.style
11052
)}>${writeNestedElements(child.children)}</${child.tag}>`;
53+
} else if (child.tag === 'h1') {
54+
return `<${child.tag}${formatStyles(child.style)}>HEADER 1</${child.tag}>`;
55+
} else if (child.tag === 'h2') {
56+
return `<${child.tag}${formatStyles(child.style)}>HEADER 2</${child.tag}>`;
57+
} else if (child.tag === 'form') {
58+
return `<${child.tag}${formatStyles(child.style)}>FORM</${child.tag}>`;
59+
} else if (child.tag === 'p') {
60+
return `<${child.tag}${formatStyles(child.style)}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</${child.tag}>`;
61+
} else if (child.tag === 'li') {
62+
return `<ul${formatStyles(child.style)}><li>item 1</li>
63+
<li>item 2</li>
64+
<li>item 3</li></ul>`;
65+
} else if (child.tag === 'button'){
66+
return `<${child.tag}${formatStyles(child.style)}>BUTTON</${child.tag}>`;
11167
} else {
11268
return `<${child.tag}${formatStyles(child.style)}></${child.tag}>`;
11369
}
@@ -195,5 +151,4 @@ const generateCode = (components: Component[], componentId: number) => {
195151
};
196152

197153
export default generateCode;
198-
// console.log(generateUnformattedCode(initialState.components, 1));
199-
// console.log(generateCode(initialState.components, 1));
154+

‎src/public/styles/style.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@ LEFT COLUMN
9090

9191
.left {
9292
padding: 10px;
93-
width: 20%;
94-
min-width: 310px;
9593
display: flex;
94+
width: 380px;
95+
min-width: 380px;
9696
flex-direction: column;
9797
position: relative;
9898
overflow-x: hidden;

‎src/public/styles/styleNew.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,6 @@ h3 {
5151

5252
.right {
5353
padding-top: 35px;
54+
width: 420px;
5455
}
5556

‎src/utils/createApplication.util.ts

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import fs from 'fs';
2+
import createFiles from './createFiles.util';
23

34
function createIndexHtml(path, appName) {
45
let dir = path;
@@ -47,6 +48,7 @@ export const createIndexTsx = (path, appName) => {
4748
import React from 'react';
4849
import ReactDOM from 'react-dom';
4950
import App from './components/App';
51+
import './default.css';
5052
5153
ReactDOM.render(<App />, document.getElementById('root'));
5254
`;
@@ -59,6 +61,27 @@ ReactDOM.render(<App />, document.getElementById('root'));
5961
});
6062
};
6163

64+
export const createDefaultCSS = (path, appName) => {
65+
const filePath = `${path}/${appName}/src/default.css`;
66+
const data = `
67+
#root div {
68+
box-sizing: border-box;
69+
width: 100%;
70+
border: 1px solid rgba(0,0,0,0.25);
71+
padding: 12px;
72+
text-align: center;
73+
font-family: Helvetica, Arial;
74+
}
75+
`;
76+
fs.writeFile(filePath, data, err => {
77+
if (err) {
78+
console.log('default.css error:', err.message);
79+
} else {
80+
console.log('default.css written successfully');
81+
}
82+
});
83+
}
84+
6285
export const createPackage = (path, appName) => {
6386
const filePath = `${path}/${appName}/package.json`;
6487
const data = `
@@ -165,6 +188,13 @@ module.exports = {
165188
'sass-loader', // compiles Sass to CSS, using Node Sass by default
166189
],
167190
},
191+
{
192+
test: /\.css$/,
193+
use: [
194+
'style-loader',
195+
'css-loader'
196+
]
197+
}
168198
],
169199
},
170200
};
@@ -285,22 +315,24 @@ app.listen(8080, () => {
285315
async function createApplicationUtil({
286316
path,
287317
appName,
288-
genOption
318+
components
289319
}: {
290320
path: string;
291321
appName: string;
292-
genOption: number;
322+
components: any;
293323
}) {
294324
console.log('in the createApplication util');
295-
if (genOption === 1) {
296-
await createIndexHtml(path, appName);
297-
await createIndexTsx(path, appName);
298-
await createPackage(path, appName);
299-
await createWebpack(path, appName);
300-
await createBabel(path, appName);
301-
await createTsConfig(path, appName);
302-
await createTsLint(path, appName);
303-
await createServer(path, appName);
304-
}
325+
326+
await createIndexHtml(path, appName);
327+
await createIndexTsx(path, appName);
328+
await createDefaultCSS(path, appName);
329+
await createPackage(path, appName);
330+
await createWebpack(path, appName);
331+
await createBabel(path, appName);
332+
await createTsConfig(path, appName);
333+
await createTsLint(path, appName);
334+
await createServer(path, appName);
335+
await createFiles(components, path, appName, true);
336+
305337
}
306338
export default createApplicationUtil;

‎src/utils/createFiles.util.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import fs from 'fs';
22
import { format } from 'prettier';
33
import componentRender from './componentRender.util';
44

5+
56
const createFiles = (
67
components: any,
78
path: string,
@@ -28,9 +29,9 @@ const createFiles = (
2829
const promises: Array<any> = [];
2930
components.forEach((component: any) => {
3031
const newPromise = new Promise((resolve, reject) => {
31-
fs.writeFile(
32-
`${dir}/${component.title}.tsx`,
33-
format(componentRender(component, components), {
32+
fs.writeFileSync(
33+
`${dir}/${component.name}.tsx`,
34+
format(component.code, {
3435
singleQuote: true,
3536
trailingComma: 'es5',
3637
bracketSpacing: true,

‎src/utils/exportProjectNew.util.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
import createApplicationUtil from './createApplication.util';
2+
import createFiles from './createFiles.util';
23

3-
const exportProject = (path: string, appName: string, genOption: number) => {
4+
const exportProject = (path: string, appName: string, genOption: number, components: any) => {
45
console.log('in the export project file ');
5-
createApplicationUtil({ path, appName, genOption })
6-
.then(() => console.log('CreateApplicationUtil has finished'))
6+
if (genOption === 1) {
7+
createApplicationUtil({ path, appName, components})
8+
.then(() => {
9+
console.log('CreateApplicationUtil has finished');
10+
})
711
.catch(err => console.log(err));
12+
} else if (genOption === 0) {
13+
createFiles(components, path, appName, false);
14+
}
15+
816
};
917

1018
export default exportProject;

0 commit comments

Comments
 (0)