Skip to content

Commit 2b3dd68

Browse files
MadinventorZeroMadinventorZero
authored
Merge pull request #10 from MadinventorZero/codepreview
Codepreview
2 parents 3cd21dc + 8bf7711 commit 2b3dd68

File tree

7 files changed

+154
-119
lines changed

7 files changed

+154
-119
lines changed

‎app/src/components/bottom/CodePreview.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useContext, useState, useRef, useEffect } from 'react';
22
import StateContext from '../../context/context';
33
import AceEditor from 'react-ace';
4+
import 'ace-builds/src-min-noconflict/ext-searchbox';
45
import 'ace-builds/src-noconflict/mode-javascript';
56
import 'ace-builds/src-noconflict/theme-monokai';
67
import 'ace-builds/src-noconflict/theme-github';
@@ -33,19 +34,19 @@ const CodePreview: React.FC<{
3334
useEffect(() => {
3435
setDivHeight(height);
3536
}, [height])
36-
37+
console.log(currentComponent.code);
3738
return (
3839
<div
3940
ref={wrapper}
4041
style={{
41-
height: '100%',
42+
height: '40vh',
4243
maxWidth: '100%',
4344
justifyContent: 'center',
4445
}}
4546
>
4647
<AceEditor
4748
mode="javascript"
48-
theme={theme}
49+
theme="solarized_dark"
4950
width="100%"
5051
height="100%"
5152
onChange={handleCodeSnipChange}

‎app/src/components/left/HTMLItem.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,11 +122,11 @@ const HTMLItem : React.FC<{
122122
// Caret updated the id's to reflect the new element types input and label
123123
return ( // HTML Elements
124124
<Grid item xs={5} key={`html-g${name}`}>
125-
{ id <= 13 &&
125+
{ id <= 16 &&
126126
<div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
127127
<h3>{name}</h3>
128128
</div>}
129-
{id > 13 &&
129+
{id > 16 &&
130130
<span id="customHTMLElement">
131131
<div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
132132
<h3>{name}</h3>

‎app/src/components/right/ComponentPanel.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
109109
};
110110

111111
const keyBindCreateComponent = useCallback((e) => {
112+
112113
// Caret
113114
if(e.key === 'Enter' && e.target.tagName !== "TEXTAREA") {
114115
e.preventDefault();

‎app/src/context/HTMLTypes.tsx

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,6 @@ const HTMLTypes: HTMLType[] = [
4848
placeHolderLong: '',
4949
icon: FormIcon
5050
},
51-
{
52-
id: 3,
53-
tag: 'li',
54-
name: 'List',
55-
style: {},
56-
placeHolderShort: 'list item',
57-
placeHolderLong: '',
58-
icon: ListIcon
59-
},
6051
{
6152
id: 4,
6253
tag: 'button',
@@ -128,6 +119,42 @@ const HTMLTypes: HTMLType[] = [
128119
placeHolderShort: 'label',
129120
placeHolderLong: '',
130121
icon: HeaderIcon
122+
},
123+
{
124+
id: 14,
125+
tag: 'ol',
126+
name: 'Ordered List',
127+
style: {},
128+
placeHolderShort: 'ordered list',
129+
placeHolderLong: '',
130+
icon: ListIcon
131+
},
132+
{
133+
id: 15,
134+
tag: 'ul',
135+
name: 'Unordered List',
136+
style: {},
137+
placeHolderShort: 'unordered list',
138+
placeHolderLong: '',
139+
icon: ListIcon
140+
},
141+
{
142+
id: 16,
143+
tag: 'menu',
144+
name: 'Menu',
145+
style: {},
146+
placeHolderShort: 'menu',
147+
placeHolderLong: '',
148+
icon: ListIcon
149+
},
150+
{
151+
id: 3,
152+
tag: 'li',
153+
name: 'List',
154+
style: {},
155+
placeHolderShort: 'list item',
156+
placeHolderLong: '',
157+
icon: ListIcon
131158
}
132159
];
133160

‎app/src/helperFunctions/generateCode.ts

Lines changed: 103 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { element } from 'prop-types';
12
import {
23
Component,
34
State,
@@ -54,7 +55,13 @@ const generateUnformattedCode = (
5455
if (
5556
referencedHTML.tag === 'div' ||
5657
referencedHTML.tag === 'separator' ||
57-
referencedHTML.tag === 'form'
58+
// Caret Start
59+
referencedHTML.tag === 'form' ||
60+
referencedHTML.tag === 'ul' ||
61+
referencedHTML.tag === 'ol' ||
62+
referencedHTML.tag === 'menu' ||
63+
referencedHTML.tag === 'li'
64+
// Caret End
5865
) {
5966
child.children = getEnrichedChildren(child);
6067
}
@@ -63,70 +70,80 @@ const generateUnformattedCode = (
6370
links = true;
6471
child.name = components.find(
6572
(comp: Component) => comp.id === child.typeId
66-
).name;
67-
return child;
68-
}
69-
});
70-
return enrichedChildren;
73+
).name;
74+
return child;
75+
}
76+
});
77+
return enrichedChildren;
78+
};
79+
// Caret Start
80+
// Raised formatStyles so that it is declared before it is referenced. It was backwards.
81+
// format styles stored in object to match React inline style format
82+
const formatStyles = (styleObj: any) => {
83+
if (Object.keys(styleObj).length === 0) return ``;
84+
const formattedStyles = [];
85+
for (let i in styleObj) {
86+
const styleString = i + ': ' + "'" + styleObj[i] + "'";
87+
formattedStyles.push(styleString);
88+
}
89+
return ' style={{' + formattedStyles.join(',') + '}}';
7190
};
91+
92+
// function to dynamically add classes, ids, and styles to an element if it exists.
93+
const elementTagDetails = (childElement: object) => {
94+
let customizationDetails = "";
95+
if (childElement.childId) customizationDetails += (' ' + `id=${childElement.childId}`);
96+
if (childElement.attributes && childElement.attributes.cssClasses) customizationDetails += (' ' + `className=${childElement.attributes.cssClasses}`);
97+
if (childElement.style && Object.keys(childElement.style).length > 0) customizationDetails +=(' ' + formatStyles(childElement));
98+
return customizationDetails;
99+
};
100+
101+
// function to dynamically generate a complete html (& also other library type) elements
102+
const elementGenerator = (childElement: object, level: number = 2) => {
103+
let innerText = '';
104+
if (childElement.attributes && childElement.attributes.compText) innerText = childElement.attributes.compText;
105+
106+
const tabSpacer = (level: number) => {
107+
let tabs = ''
108+
for (let i = 0; i < level; i++) tabs += ' ';
109+
return tabs;
110+
}
111+
112+
const levelSpacer = (level: number, spaces: number) => {
113+
if (level === 2 ) return `\n${tabSpacer(spaces)}`;
114+
else return ''
115+
}
116+
117+
const nestable = childElement.tag === 'div' ||
118+
childElement.tag === 'form' ||
119+
childElement.tag === 'ol' ||
120+
childElement.tag === 'ul' ||
121+
childElement.tag === 'menu' ||
122+
childElement.tag === 'li';
123+
124+
if (childElement.tag === 'img') {
125+
return `${levelSpacer(level, 5)}<${childElement.tag} src="" ${elementTagDetails(childElement)}/>${levelSpacer(2, (3 + level))}`;
126+
} else if (childElement.tag === 'a') {
127+
return `${levelSpacer(level, 5)}<${childElement.tag} href=""${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
128+
} else if (childElement.tag === 'input') {
129+
return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}></${childElement.tag}>${levelSpacer(2, (3 + level))}`;
130+
} else if (nestable) {
131+
return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}>${innerText}
132+
${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
133+
${tabSpacer(level - 1)}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
134+
} else if (childElement.tag !== 'separator'){
135+
return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
136+
}
137+
}
138+
72139
// write all code that will be under the "return" of the component
73-
const writeNestedElements = (enrichedChildren: any) => {
140+
const writeNestedElements = (enrichedChildren: any, level: number = 2) => {
74141
return `${enrichedChildren
75142
.map((child: any) => {
76143
if (child.type === 'Component') {
77-
return `<${child.name}${formatStyles(child.style)} />`;
144+
return `<${child.name} ${elementTagDetails(child)} />`;
78145
} else if (child.type === 'HTML Element') {
79-
if (child.tag === 'img') {
80-
return `<${child.tag} src=""${formatStyles(child.style)} />`;
81-
} else if (child.tag === 'a') {
82-
return `<${child.tag} href=""${formatStyles(child.style)}>[LINK]</${
83-
child.tag
84-
}>`;
85-
} else if (child.tag === 'div') {
86-
return `<${child.tag}${formatStyles(
87-
child.style
88-
)}>${writeNestedElements(child.children)}</${child.tag}>`;
89-
} else if (child.tag === 'h1') {
90-
return `<${child.tag}${formatStyles(child.style)}>HEADER 1</${
91-
child.tag
92-
}>`;
93-
} else if (child.tag === 'h2') {
94-
return `<${child.tag}${formatStyles(child.style)}>HEADER 2</${
95-
child.tag
96-
}>`;
97-
} else if (child.tag === 'form') {
98-
return `<${child.tag}${formatStyles(
99-
child.style
100-
)}>${writeNestedElements(child.children)}</${child.tag}>`;
101-
}
102-
// Caret Start
103-
else if (child.tag === 'input') {
104-
return `<${child.tag}${formatStyles(child.style)}>Input</${
105-
child.tag
106-
}>`;
107-
} else if (child.tag === 'label') {
108-
return `<${child.tag}${formatStyles(child.style)}>Label</${
109-
child.tag
110-
}>`;
111-
}
112-
// Caret End
113-
else if (child.tag === 'p') {
114-
return `<${child.tag}${formatStyles(
115-
child.style
116-
)}>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.</${
117-
child.tag
118-
}>`;
119-
} else if (child.tag === 'li') {
120-
return `<ul${formatStyles(child.style)}><li>item 1</li>
121-
<li>item 2</li>
122-
<li>item 3</li></ul>`;
123-
} else if (child.tag === 'button') {
124-
return `<${child.tag}${formatStyles(child.style)}>BUTTON</${
125-
child.tag
126-
}>`;
127-
} else if (child.tag !== 'separator') {
128-
return `<${child.tag}${formatStyles(child.style)}></${child.tag}>`;
129-
}
146+
return elementGenerator(child, level);
130147
}
131148
// route links are for gatsby.js and next.js feature. if the user creates a route link and then switches projects, generate code for a normal link instead
132149
else if (child.type === 'Route Link') {
@@ -141,19 +158,9 @@ const generateUnformattedCode = (
141158
}
142159
})
143160
.filter(element => !!element)
144-
.join('\n')}`;
145-
};
146-
147-
// format styles stored in object to match React inline style format
148-
const formatStyles = (styleObj: any) => {
149-
if (Object.keys(styleObj).length === 0) return ``;
150-
const formattedStyles = [];
151-
for (let i in styleObj) {
152-
const styleString = i + ': ' + "'" + styleObj[i] + "'";
153-
formattedStyles.push(styleString);
154-
}
155-
return ' style={{' + formattedStyles.join(',') + '}}';
161+
.join('')}`;
156162
};
163+
// Caret End
157164

158165
const enrichedChildren: any = getEnrichedChildren(currentComponent);
159166

@@ -186,11 +193,11 @@ const generateUnformattedCode = (
186193
${classBased ? `import React, {Component} from 'react';` : ''}
187194
${!stateful && !classBased ? `import React from 'react';` : ''}
188195
${importsMapped}
189-
${
190-
classBased
191-
? `class ${currentComponent.name} extends Component {`
192-
: `const ${currentComponent.name} = (props): JSX.Element => {`
193-
}
196+
${
197+
classBased
198+
? `class ${currentComponent.name} extends Component {`
199+
: `const ${currentComponent.name} = (props): JSX.Element => {`
200+
}
194201
${
195202
stateful && !classBased
196203
? `const [value, setValue] = useState<any | undefined>("INITIAL VALUE");`
@@ -201,20 +208,20 @@ const generateUnformattedCode = (
201208
? `constructor(props) {
202209
super(props);
203210
this.state = {}
204-
}`
211+
}`
205212
: ``
206213
}
207214
208215
${classBased ? `render(): JSX.Element {` : ``}
209216
210217
return (
211218
<div className="${currentComponent.name}" style={props.style}>
212-
${writeNestedElements(enrichedChildren)}
219+
${writeNestedElements(enrichedChildren)}
213220
</div>
214221
);
215222
}
216-
${classBased ? `}` : ``}
217-
export default ${currentComponent.name};
223+
${classBased ? `}` : ``}
224+
export default ${currentComponent.name};
218225
`;
219226
}
220227
// next.js component code
@@ -225,27 +232,27 @@ const generateUnformattedCode = (
225232
import Head from 'next/head'
226233
${links ? `import Link from 'next/link'` : ``}
227234
228-
const ${currentComponent.name} = (props): JSX.Element => {
235+
const ${currentComponent.name} = (props): JSX.Element => {
229236
230-
const [value, setValue] = useState<any | undefined>("INITIAL VALUE");
237+
const [value, setValue] = useState<any | undefined>("INITIAL VALUE");
231238
232239
return (
233-
<>
234-
${
235-
isRoot
236-
? `<Head>
237-
<title>${currentComponent.name}</title>
238-
</Head>`
239-
: ``
240-
}
241-
<div className="${currentComponent.name}" style={props.style}>
242-
${writeNestedElements(enrichedChildren)}
243-
</div>
244-
</>
245-
);
240+
<>
241+
${
242+
isRoot
243+
? `<Head>
244+
<title>${currentComponent.name}</title>
245+
</Head>`
246+
: ``
246247
}
248+
<div className="${currentComponent.name}" style={props.style}>
249+
${writeNestedElements(enrichedChildren)}
250+
</div>
251+
</>
252+
);
253+
}
247254
248-
export default ${currentComponent.name};
255+
export default ${currentComponent.name};
249256
`;
250257
} else {
251258
// gatsby component code

‎app/src/helperFunctions/manageSeparators.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ manageSeparators.handleSeparators = (arr: object[], str: string) => {
4949
// this function replaces separators onto which an element is dropped with the element itself
5050
manageSeparators.mergeSeparator = (arr: object[], index: number) => {
5151
return arr.map((child) => {
52-
if ((child.name === 'div' || child.name === 'form') && child.children.length) {
52+
// Caret Added additional nested types for lists
53+
if ((child.name === 'div' || child.name === 'form' || child.name === 'ol' || child.name === 'ul') && child.children.length) {
5354
const divContents = manageSeparators.mergeSeparator(child.children, index);
5455
return { ...child, children: divContents }
5556
}

0 commit comments

Comments
 (0)