Skip to content

Commit 39ee7be

Browse files
MadinventorZerojonocrbuddhajjigaexkevinparkwilliamdyoon
committed
Massive fix to codepreview. Added ul/ol/menu.
Co-authored-by: jonocr <[email protected]> Co-authored-by: buddhajjigae <[email protected]> Co-authored-by: xkevinpark <[email protected]> Co-authored-by: williamdyoon <[email protected]>
1 parent ded1cb4 commit 39ee7be

File tree

6 files changed

+123
-108
lines changed

6 files changed

+123
-108
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const CodePreview: React.FC<{
3434
useEffect(() => {
3535
setDivHeight(height);
3636
}, [height])
37-
37+
console.log(currentComponent.code);
3838
return (
3939
<div
4040
ref={wrapper}

‎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/context/HTMLTypes.tsx

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const HTMLTypes: HTMLType[] = [
3535
tag: 'img',
3636
name: 'Image',
3737
style: {},
38-
placeHolderShort: 'Image',
38+
placeHolderShort: 'image',
3939
placeHolderLong: '',
4040
icon: ImageIcon
4141
},
@@ -44,25 +44,25 @@ const HTMLTypes: HTMLType[] = [
4444
tag: 'form',
4545
name: 'Form',
4646
style: {},
47-
placeHolderShort: 'Form',
47+
placeHolderShort: 'form',
4848
placeHolderLong: '',
4949
icon: FormIcon
5050
},
5151
{
5252
id: 4,
5353
tag: 'button',
5454
name: 'Button',
55-
style: { textAlign: 'center', border: 'none' },
56-
placeHolderShort: <button>Button</button>,
55+
style: {},
56+
placeHolderShort: 'button',
5757
placeHolderLong: '',
5858
icon: ButtonIcon
5959
},
6060
{
6161
id: 6,
6262
tag: 'a',
6363
name: 'Link',
64-
style: { border: 'none' },
65-
placeHolderShort: <a href="#">Link</a>,
64+
style: {},
65+
placeHolderShort: 'link',
6666
placeHolderLong: '',
6767
icon: LinkIcon
6868
},
@@ -71,84 +71,88 @@ const HTMLTypes: HTMLType[] = [
7171
tag: 'p',
7272
name: 'Paragraph',
7373
style: {},
74-
placeHolderShort:
75-
'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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu',
74+
placeHolderShort: 'paragraph',
7675
placeHolderLong: '',
7776
icon: ParagraphIcon
7877
},
7978
{
8079
id: 9,
8180
tag: 'h1',
8281
name: 'Header 1',
83-
style: { fontSize: '2em' },
84-
placeHolderShort: 'Header 1',
82+
style: {},
83+
placeHolderShort: 'header 1',
8584
placeHolderLong: '',
8685
icon: HeaderIcon
8786
},
8887
{
8988
id: 10,
9089
tag: 'h2',
9190
name: 'Header 2',
92-
style: { fontSize: '1.5em' },
93-
placeHolderShort: 'Header 2',
91+
style: {},
92+
placeHolderShort: 'header 2',
9493
placeHolderLong: '',
9594
icon: HeaderIcon
9695
},
9796
{
9897
id: 5,
9998
tag: 'span',
10099
name: 'Span',
101-
style: { fontSize: '1em' },
102-
placeHolderShort: 'Span',
100+
style: {},
101+
placeHolderShort: 'span',
103102
placeHolderLong: '',
104103
icon: HeaderIcon
105104
},
106105
{
107106
id: 12,
108107
tag: 'input',
109108
name: 'Input',
110-
style: { fontSize: '1em' },
111-
placeHolderShort: 'Input',
109+
style: {},
110+
placeHolderShort: 'input',
112111
placeHolderLong: '',
113112
icon: HeaderIcon
114113
},
115114
{
116115
id: 13,
117116
tag: 'label',
118117
name: 'Label',
119-
style: { fontSize: '1em' },
120-
placeHolderShort: <label>Label</label>,
118+
style: {},
119+
placeHolderShort: 'label',
121120
placeHolderLong: '',
122121
icon: HeaderIcon
123122
},
124-
{
125-
id: 3,
126-
tag: 'li',
127-
name: 'List',
128-
style: { color: 'purple' },
129-
placeHolderShort: (
130-
<ul>
131-
<li>item 1</li>
132-
<li>item 2</li>
133-
<li>item 3</li>
134-
</ul>
135-
),
136-
placeHolderLong: '',
137-
icon: ListIcon
138-
},
139123
{
140124
id: 14,
141125
tag: 'ol',
142126
name: 'Ordered List',
143-
placeHolderShort: 'ol',
127+
style: {},
128+
placeHolderShort: 'ordered list',
144129
placeHolderLong: '',
145130
icon: ListIcon
146131
},
147132
{
148133
id: 15,
149134
tag: 'ul',
150135
name: 'Unordered List',
151-
placeHolderShort: 'ul',
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',
152156
placeHolderLong: '',
153157
icon: ListIcon
154158
}

‎app/src/helperFunctions/generateCode.ts

Lines changed: 73 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,13 @@ const generateUnformattedCode = (
5555
if (
5656
referencedHTML.tag === 'div' ||
5757
referencedHTML.tag === 'separator' ||
58-
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
5965
) {
6066
child.children = getEnrichedChildren(child);
6167
}
@@ -92,45 +98,51 @@ const generateUnformattedCode = (
9298
return customizationDetails;
9399
};
94100

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 => {
107+
let tabs = ''
108+
for (let i = 0; i < level; i++) tabs += ' ';
109+
return tabs;
110+
}
111+
112+
const nestable = childElement.tag === 'div' ||
113+
childElement.tag === 'form' ||
114+
childElement.tag === 'ol' ||
115+
childElement.tag === 'ul' ||
116+
childElement.tag === 'menu' ||
117+
childElement.tag === 'li';
118+
119+
if (childElement.tag === 'img') {
120+
return `<${childElement.tag} src="" ${elementTagDetails(childElement)}/>`;
121+
} else if (childElement.tag === 'a') {
122+
return `<${childElement.tag} href=""${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>`;
123+
} else if (childElement.tag === 'input') {
124+
return `<${childElement.tag}${elementTagDetails(childElement)}></${childElement.tag}>`;
125+
} else if (nestable && level === 2) {
126+
return `\n${tabSpacer(5)}<${childElement.tag}${elementTagDetails(childElement)}>${innerText}
127+
${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
128+
${tabSpacer(level - 1)}</${childElement.tag}>`;
129+
} else if (nestable && level > 2) {
130+
return `<${childElement.tag}${elementTagDetails(childElement)}>${innerText}
131+
${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
132+
${tabSpacer(level - 1)}</${childElement.tag}>`;
133+
} else if (childElement.tag !== 'separator'){
134+
return `<${childElement.tag}${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>`;
135+
}
136+
}
137+
95138
// write all code that will be under the "return" of the component
96-
const writeNestedElements = (enrichedChildren: any) => {
139+
const writeNestedElements = (enrichedChildren: any, level: number = 2) => {
97140
return `${enrichedChildren
98141
.map((child: any) => {
99-
console.log("What is in this child", child);
100-
let innerText = '';
101-
if (child.attributes && child.attributes.compText) innerText = child.attributes.compText;
102142
if (child.type === 'Component') {
103143
return `<${child.name} ${elementTagDetails(child)} />`;
104144
} else if (child.type === 'HTML Element') {
105-
if (child.tag === 'img') {
106-
return `<${child.tag} src="" ${elementTagDetails(child)}/>`;
107-
} else if (child.tag === 'a') {
108-
return `<${child.tag} href=""${elementTagDetails(child)}>${innerText}</${child.tag}>`;
109-
} else if (child.tag === 'div') {
110-
return `<${child.tag}${elementTagDetails(child)}>${innerText}\n${writeNestedElements(child.children)}</${child.tag}>`;
111-
} else if (child.tag === 'h1') {
112-
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
113-
} else if (child.tag === 'h2') {
114-
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
115-
} else if (child.tag === 'form') {
116-
return `<${child.tag}${elementTagDetails(child)}>${innerText}\n${writeNestedElements(child.children)}</${child.tag}>`;
117-
} else if (child.tag === 'input') {
118-
return `<${child.tag}${elementTagDetails(child)}></${child.tag}>`;
119-
} else if (child.tag === 'label') {
120-
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
121-
} else if (child.tag === 'p') {
122-
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
123-
} else if (child.tag === 'ol') {
124-
return `<${child.tag} ${elementTagDetails(child)}>${innerText}\n${writeNestedElements(child.children)}</${child.tag}>`;
125-
} else if (child.tag === 'ul') {
126-
return `<${child.tag} ${elementTagDetails(child)}>${innerText}\n${writeNestedElements(child.children)}</${child.tag}>`;
127-
} else if (child.tag === 'li') {
128-
return `<${child.tag} ${elementTagDetails(child)}></${child.tag}>`;
129-
} else if (child.tag === 'button') {
130-
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
131-
} else if (child.tag !== 'separator') {
132-
return `<${child.tag}${elementTagDetails(child)}>${innerText}</${child.tag}>`;
133-
}
145+
return elementGenerator(child, level);
134146
}
135147
// 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
136148
else if (child.type === 'Route Link') {
@@ -145,9 +157,9 @@ const generateUnformattedCode = (
145157
}
146158
})
147159
.filter(element => !!element)
148-
.join('\n')}`;
160+
.join('')}`;
149161
};
150-
162+
// Caret End
151163

152164
const enrichedChildren: any = getEnrichedChildren(currentComponent);
153165

@@ -180,11 +192,11 @@ const generateUnformattedCode = (
180192
${classBased ? `import React, {Component} from 'react';` : ''}
181193
${!stateful && !classBased ? `import React from 'react';` : ''}
182194
${importsMapped}
183-
${
184-
classBased
185-
? `class ${currentComponent.name} extends Component {`
186-
: `const ${currentComponent.name} = (props): JSX.Element => {`
187-
}
195+
${
196+
classBased
197+
? `class ${currentComponent.name} extends Component {`
198+
: `const ${currentComponent.name} = (props): JSX.Element => {`
199+
}
188200
${
189201
stateful && !classBased
190202
? `const [value, setValue] = useState<any | undefined>("INITIAL VALUE");`
@@ -195,20 +207,20 @@ const generateUnformattedCode = (
195207
? `constructor(props) {
196208
super(props);
197209
this.state = {}
198-
}`
210+
}`
199211
: ``
200212
}
201213
202214
${classBased ? `render(): JSX.Element {` : ``}
203215
204216
return (
205217
<div className="${currentComponent.name}" style={props.style}>
206-
${writeNestedElements(enrichedChildren)}
218+
${writeNestedElements(enrichedChildren)}
207219
</div>
208220
);
209221
}
210-
${classBased ? `}` : ``}
211-
export default ${currentComponent.name};
222+
${classBased ? `}` : ``}
223+
export default ${currentComponent.name};
212224
`;
213225
}
214226
// next.js component code
@@ -219,27 +231,27 @@ const generateUnformattedCode = (
219231
import Head from 'next/head'
220232
${links ? `import Link from 'next/link'` : ``}
221233
222-
const ${currentComponent.name} = (props): JSX.Element => {
234+
const ${currentComponent.name} = (props): JSX.Element => {
223235
224-
const [value, setValue] = useState<any | undefined>("INITIAL VALUE");
236+
const [value, setValue] = useState<any | undefined>("INITIAL VALUE");
225237
226238
return (
227-
<>
228-
${
229-
isRoot
230-
? `<Head>
231-
<title>${currentComponent.name}</title>
232-
</Head>`
233-
: ``
234-
}
235-
<div className="${currentComponent.name}" style={props.style}>
236-
${writeNestedElements(enrichedChildren)}
237-
</div>
238-
</>
239-
);
239+
<>
240+
${
241+
isRoot
242+
? `<Head>
243+
<title>${currentComponent.name}</title>
244+
</Head>`
245+
: ``
240246
}
247+
<div className="${currentComponent.name}" style={props.style}>
248+
${writeNestedElements(enrichedChildren)}
249+
</div>
250+
</>
251+
);
252+
}
241253
242-
export default ${currentComponent.name};
254+
export default ${currentComponent.name};
243255
`;
244256
} else {
245257
// 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)