Skip to content

Commit e67d018

Browse files
GarrettHutsonGarrettHutson
committed
adds mvp functionality with reguards to tailwind
1 parent 2933dae commit e67d018

File tree

8 files changed

+212
-79
lines changed

8 files changed

+212
-79
lines changed

‎app/src/components/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const App = (): JSX.Element => {
9393
>
9494
ReacType
9595
</header>
96-
<StateContext.Provider value={[state, dispatch]}>
96+
<StateContext.Provider value = {[state, dispatch]}>
9797
<AppContainer />
9898
</StateContext.Provider>
9999
</DndProvider>

‎app/src/components/main/Canvas.tsx

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -11,53 +11,57 @@ import { getRowsStateFromCache } from '@mui/x-data-grid/hooks/features/rows/grid
1111

1212
function Canvas(props): JSX.Element {
1313
const [state, dispatch] = useContext(StateContext);
14-
const [newComp, setNewComp] = useState(false);
15-
const [copiedChildrenArr, setCopiedChildrenArr] = useState([]);
16-
const [copiedComp, setCopiedComp] = useState({});
17-
18-
useEffect(()=> {
19-
if (newComp) {
20-
// find updated comp
21-
const copy = state.components.find(comp => comp.name === copiedComp.name)
22-
// make a array of copied children from the copied component
23-
if (copy.children.length){
24-
const masterArr = [];
25-
const children = copy.children;
26-
function deepChildCopy(children, parentId) {
27-
for (let i = 0; i < children.length; i++) {
28-
const child = children[i];
29-
let id = (parentId) ? parentId : null;
30-
if (child.typeId < 1000){
31-
masterArr.push({
32-
type: "HTML Element",
33-
typeId: child.typeId,
34-
childId: id
35-
})
36-
if (child.children.length) {
37-
deepChildCopy(child.children, child.childId);
38-
}
39-
}
40-
}
41-
}
42-
deepChildCopy(children, null);
43-
setCopiedChildrenArr(masterArr);
44-
}
45-
46-
const components = state.components
47-
48-
// find the ID of the newly created component
49-
const newId = components[components.length -1]['id']
50-
dispatch({
51-
type: 'ADD CHILD',
52-
payload: {
53-
type: "Component",
54-
typeId: newId,
55-
childId: null
56-
}
57-
});
58-
}
59-
setNewComp(false) // initially set to false
60-
}, [newComp])
14+
// const [newComp, setNewComp] = useState(false);
15+
// const [copiedChildrenArr, setCopiedChildrenArr] = useState([]);
16+
// const [copiedComp, setCopiedComp] = useState({});
17+
18+
// useEffect(()=> {
19+
// console.log(state.componenets)
20+
// console.log(newComp)
21+
// if (newComp) {
22+
23+
// // find updated comp
24+
// const copy = state.components.find(comp => comp.name === copiedComp.name)
25+
26+
// // make a array of copied children from the copied component
27+
// if (copy.children.length){
28+
// const masterArr = [];
29+
// const children = copy.children;
30+
// function deepChildCopy(children, parentId) {
31+
// for (let i = 0; i < children.length; i++) {
32+
// const child = children[i];
33+
// let id = (parentId) ? parentId : null;
34+
// if (child.typeId < 1000){
35+
// masterArr.push({
36+
// type: "HTML Element",
37+
// typeId: child.typeId,
38+
// childId: id
39+
// })
40+
// if (child.children.length) {
41+
// deepChildCopy(child.children, child.childId);
42+
// }
43+
// }
44+
// }
45+
// }
46+
// deepChildCopy(children, null);
47+
// setCopiedChildrenArr(masterArr);
48+
// }
49+
50+
// const components = state.components
51+
52+
// // find the ID of the newly created component
53+
// const newId = components[components.length -1]['id']
54+
// dispatch({
55+
// type: 'ADD CHILD',
56+
// payload: {
57+
// type: "Component",
58+
// typeId: newId,
59+
// childId: null
60+
// }
61+
// });
62+
// }
63+
// setNewComp(false) // initially set to false
64+
// }, [newComp])
6165

6266
// Caret start
6367
Arrow.deleteLines();
@@ -97,6 +101,7 @@ function Canvas(props): JSX.Element {
97101
if (didDrop) {
98102
return;
99103
}
104+
console.log(currentComponent)
100105
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
101106
if (item.newInstance && item.instanceType !== "Component") {
102107
dispatch({

‎app/src/containers/CustomizationPanel.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,14 +305,62 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
305305
payload: { event: selectedEvent }
306306
});
307307
};
308+
const handleTailwind = (): Object => {
309+
console.log('stateusedobj',stateUsedObj)
310+
dispatch({ type: 'CHANGE TAILWIND', payload: true });
311+
dispatch({
312+
type: 'UPDATE STATE USED',
313+
payload: {stateUsedObj: stateUsedObj}
314+
})
315+
316+
317+
dispatch({
318+
type: 'UPDATE USE CONTEXT',
319+
payload: { useContextObj: useContextObj}
320+
})
321+
322+
const styleObj: any = {};
323+
if (displayMode !== '') styleObj.display = displayMode;
324+
if (flexDir !== '') styleObj.flexDirection = flexDir;
325+
if (flexJustify !== '') styleObj.justifyContent = flexJustify;
326+
if (flexAlign !== '') styleObj.alignItems = flexAlign;
327+
if (compWidth !== '') styleObj.width = compWidth;
328+
if (compHeight !== '') styleObj.height = compHeight;
329+
if (BGColor !== '') styleObj.backgroundColor = BGColor;
330+
dispatch({
331+
type: 'UPDATE CSS',
332+
payload: { style: styleObj }
333+
});
334+
335+
const attributesObj: any = {};
336+
if (compText !== '') attributesObj.compText = compText;
337+
if (compLink !== '') attributesObj.compLink = compLink;
338+
if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
339+
dispatch({
340+
type: 'UPDATE ATTRIBUTES',
341+
payload: { attributes: attributesObj }
342+
});
343+
344+
const eventsObj: any = {};
345+
if (eventAll[0] !== '') eventsObj[eventAll[0]] = eventAll[1];
346+
dispatch({
347+
type: 'UPDATE EVENTS',
348+
payload: { events: eventsObj }
349+
});
350+
351+
return styleObj;
308352

309353

354+
}
355+
310356
const handleSave = (): Object => {
357+
console.log('stateusedobj',stateUsedObj)
311358
dispatch({
312359
type: 'UPDATE STATE USED',
313360
payload: {stateUsedObj: stateUsedObj}
314361
})
315362

363+
316364
dispatch({
317365
type: 'UPDATE USE CONTEXT',
318366
payload: { useContextObj: useContextObj}
@@ -795,6 +843,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
795843
SAVE
796844
</Button>
797845
</div>
846+
<div onClick={handleTailwind}>tailwind</div>
798847
{configTarget.child ? (
799848
<div className={classes.buttonRow}>
800849
<Button

‎app/src/context/initialState.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const initialState: State = {
1717
future: [],
1818
stateProps: [],
1919
useStateCodes: [], // array of strings for each useState codes
20+
2021
}
2122
],
2223
projectType: 'Classic React',
@@ -25,6 +26,7 @@ const initialState: State = {
2526
nextComponentId: 2,
2627
nextChildId: 1,
2728
nextTopSeparatorId: 1000,
28-
HTMLTypes
29+
HTMLTypes,
30+
tailwind:false
2931
};
3032
export default initialState;

‎app/src/helperFunctions/generateCode.ts

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import {
77
HTMLType
88
} from '../interfaces/Interfaces';
99

10+
import initialState from '../context/initialState'
11+
// let tailwind = initialState.tailwind;
12+
1013
declare global {
1114
interface Window {
1215
api: any;
@@ -18,14 +21,17 @@ const generateCode = (
1821
componentId: number,
1922
rootComponents: number[],
2023
projectType: string,
21-
HTMLTypes: HTMLType[]
24+
HTMLTypes: HTMLType[],
25+
tailwind:boolean
2226
) => {
2327
const code = generateUnformattedCode(
2428
components,
2529
componentId,
2630
rootComponents,
2731
projectType,
28-
HTMLTypes
32+
HTMLTypes,
33+
tailwind
34+
2935
);
3036
return formatCode(code);
3137
};
@@ -36,8 +42,10 @@ const generateUnformattedCode = (
3642
componentId: number,
3743
rootComponents: number[],
3844
projectType: string,
39-
HTMLTypes: HTMLType[]
45+
HTMLTypes: HTMLType[],
46+
tailwind: boolean
4047
) => {
48+
console.log(tailwind)
4149
const components = [...comps];
4250
// find the component that we're going to generate code for
4351
const currComponent = components.find((elem) => elem.id === componentId);
@@ -124,6 +132,7 @@ const generateUnformattedCode = (
124132
// function to dynamically add classes, ids, and styles to an element if it exists.
125133
//LEGACY PD: CAN ADD PROPS HERE AS JSX ATTRIBUTE
126134
const elementTagDetails = (childElement: object) => {
135+
console.log('from the style area',tailwind)
127136
let customizationDetails = '';
128137
let passedInPropsString = '';
129138
if (childElement.type === 'Component') {
@@ -145,8 +154,46 @@ const generateUnformattedCode = (
145154
customizationDetails +=
146155
' ' + `className="${childElement.attributes.cssClasses}"`;
147156
}
148-
if (childElement.style && Object.keys(childElement.style).length > 0)
149-
customizationDetails += ' ' + formatStyles(childElement);
157+
if (childElement.style && Object.keys(childElement.style).length > 0 && tailwind === false) customizationDetails += ' ' + formatStyles(childElement);
158+
if (childElement.style && Object.keys(childElement.style).length > 0 && tailwind === true){
159+
console.log(childElement.style, 'shouldsaytrue',tailwind)
160+
let {height, alignItems, backgroundColor, display, flexDirection,width, justifyContent} = childElement.style;
161+
let w , h , items , bg , d , flexDir , justCon;
162+
if(childElement.style.alignItems){
163+
// let alignItems = childElement.style.alignItems
164+
if( alignItems === "center") items = "items-center, ";
165+
else if( alignItems === "flex-end") items = "items-end, ";
166+
}
167+
if(childElement.style.backgroundColor){
168+
// let backgroundColor = childElement.style.backgroundColor;
169+
bg = `bg-[${backgroundColor}], `
170+
}
171+
if(childElement.style.display){
172+
// let display = childElement.style.display;
173+
if(display === "flex") d = "flex, "
174+
}
175+
if(childElement.style.flexDirection){
176+
// let flexDirection = childElement.style.flexDirection
177+
if(flexDirection === "column") flexDir = "flex-col, "
178+
}
179+
if(childElement.style.height){
180+
// let height = childElement.style.height;
181+
if(height === "100%") h = "h-full, "
182+
}
183+
if(childElement.style.justifyContent){
184+
// let justifyContent = childElement.style.justifyContent
185+
if(justifyContent === "center") justCon = "justify-center, "
186+
187+
}
188+
if(childElement.style.width){
189+
// let width = childElement.style.width;
190+
if(width === "100%") w = "w-full, "
191+
192+
}
193+
194+
customizationDetails += ' ' + `className = "${w ? w: '' }${h ? h : ''}${justCon ? justCon: ''}${flexDir ? flexDir: ''}${d ? d : ''}${bg ? bg : ''}${items ? items : ''}"`;
195+
}
196+
150197

151198
if (childElement.events && Object.keys(childElement.events).length > 0) {
152199
// SPACE BETWEEN ATTRIBUTE EXPRESSIONS

‎app/src/interfaces/Interfaces.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export interface State {
1414
nextBottomSeparatorId: number;
1515
nextChildId: number;
1616
HTMLTypes: HTMLType[];
17+
tailwind: boolean;
1718
}
1819

1920
export interface ChildElement {

0 commit comments

Comments
 (0)