Skip to content

Commit 7fbdb39

Browse files
fredosaucefredosauce
committed
export project functionality fleshed out
1 parent 683850b commit 7fbdb39

File tree

7 files changed

+83
-95
lines changed

7 files changed

+83
-95
lines changed

‎src/containers/LeftContainerNew.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -124,10 +124,11 @@ const LeftContainer = (): JSX.Element => {
124124
setGenOption(genOpt);
125125
console.log('Gen option is ', genOpt);
126126
// closeModal
127+
exportProject('/Users', 'NEW PROJECT', genOpt, state.components);
127128
closeModal();
128129
// Choose app dir
129130
// NOTE: This functionality isn't working right now. Will upgrade Electron and see if that fixes it
130-
// chooseAppDir();
131+
//chooseAppDir();
131132

132133
// exportProject('/Users/tylersullberg/', 'NEW PROJECT', 1);
133134
};
@@ -148,16 +149,7 @@ const LeftContainer = (): JSX.Element => {
148149
console.log('app directory selected!!!');
149150
});
150151

151-
// createModal({
152-
// closeModal,
153-
// children,
154-
// message: 'Choose export preference:',
155-
// primBtnLabel: null,
156-
// primBtnAction: null,
157-
// secBtnAction: null,
158-
// secBtnLabel: null,
159-
// open: true
160-
// });
152+
161153
setModal(
162154
createModal({
163155
closeModal,

‎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/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)