Skip to content

Commit

Permalink
ReacType v.11.0.0 is ready
Browse files Browse the repository at this point in the history
  • Loading branch information
@MikoGome
MikoGome committed Mar 10, 2022
1 parent d27c423 commit 3f0276a
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 46 deletions.
4 changes: 1 addition & 3 deletions app/src/components/main/DemoRender.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ const DemoRender = (): JSX.Element => {
border: '2px Solid grey',
};

// let code = useSelector((state) => state.code);

const html = `
<html>
<head>
Expand Down Expand Up @@ -59,7 +57,7 @@ const DemoRender = (): JSX.Element => {
//Switch between components when clicking on a link in the live render
window.onmessage = (event) => {
if(event.data === undefined) return;
const component = event.data?.split('/').at(-1);
const component:string = event.data?.split('/').at(-1);
const componentId = component && state.components?.find((el) => {
return el.name.toLowerCase() === component.toLowerCase();
}).id;
Expand Down
5 changes: 3 additions & 2 deletions app/src/components/right/ComponentPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,9 @@ const ComponentPanel = ({isThemeLight}): JSX.Element => {
const createOption = (inputName: String) => {
// format name so first letter is capitalized and there are no white spaces
let inputNameClean = inputName.replace(/\s+/g, ''); // removes spaces
const formattedName =
inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1); // capitalizes first letter
const formattedName = state.projectType === 'Classic React'
? inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1) // capitalizes first letter
: inputNameClean;
// add new component to state
dispatch({
type: 'ADD COMPONENT',
Expand Down
100 changes: 63 additions & 37 deletions app/src/containers/CustomizationPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,46 +380,57 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
document.removeEventListener('keydown', keyBindedFunc);
};
}, []);


if(state.canvasFocus.childId === null) {
return (
<div className="column right" id="rightContainer" style={style}>
<ProjectManager />
<div className="rightPanelWrapper">
<div>
<div className={classes.rootConfigHeader}>
<h4
className={
isThemeLight
? classes.lightThemeFontColor
: classes.darkThemeFontColor
}
>
Parent Component:
<br />
<br />
<span className={classes.rootCompName}>{configTarget.name}</span>
</h4>
</div>
</div>
</div>
<ProjectManager />
</div>
)
}
return (
<div className="column right" id="rightContainer" style={style}>
<ProjectManager />
{/* -----------------------------MOVED PROJECT MANAGER-------------------------------------- */}
<div className="rightPanelWrapper">
<div>
<div className={classes.configHeader}>
{configTarget.child ? (
<h4>
Instance of
{configTarget.child.type === 'component'
? ' component'
: ' element'}{' '}
<br />
<br />
<span
className={
isThemeLight
? `${classes.compName} ${classes.lightThemeFontColor}`
: `${classes.compName} ${classes.darkThemeFontColor}`
}
>
{configTarget.child.name}
</span>
</h4>
) : (
<h4
<h4>
Instance of
{configTarget.child.type === 'component'
? ' component'
: ' element'}{' '}
<br />
<br />
<span
className={
isThemeLight
? classes.lightThemeFontColor
: classes.darkThemeFontColor
? `${classes.compName} ${classes.lightThemeFontColor}`
: `${classes.compName} ${classes.darkThemeFontColor}`
}
>
Parent Component:
<br />
<br />
<span className={classes.compName}>{configTarget.name}</span>
</h4>
)}
{configTarget.child.name}
</span>
</h4>
</div>
<section className={'customization-section'}>
<div>
Expand All @@ -431,7 +442,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
title="Display:"
name="display"
items={[
{ value: '', text: 'none' },
{ value: '', text: 'default' },
{ value: 'none', text: 'none' },
{ value: 'block', text: 'block' },
{ value: 'inline-block', text: 'inline-block' },
{ value: 'flex', text: 'flex' }
Expand All @@ -447,7 +459,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
title="Flex direction:"
name="flexdir"
items={[
{ value: '', text: 'none' },
{ value: '', text: 'default' },
{ value: 'row', text: 'row' },
{ value: 'column', text: 'column' }
]}
Expand All @@ -460,7 +472,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
title="Justify content:"
name="flexjust"
items={[
{ value: '', text: 'none' },
{ value: '', text: 'default' },
{ value: 'flex-start', text: 'flex-start' },
{ value: 'flex-end', text: 'flex-end' },
{ value: 'center', text: 'center' },
Expand All @@ -477,7 +489,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
title="Align items:"
name="flexalign"
items={[
{ value: '', text: 'none' },
{ value: '', text: 'default' },
{ value: 'stretch', text: 'stretch' },
{ value: 'flex-start', text: 'flex-start' },
{ value: 'flex-end', text: 'flex-end' },
Expand All @@ -494,24 +506,26 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
title="Width:"
name="width"
items={[
{ value: '', text: 'none' },
{ value: '', text: 'default' },
{ value: 'auto', text: 'auto' },
{ value: '100%', text: '100%'},
{ value: '50%', text: '50%' },
{ value: '25%', text: '25%' }
]}
/>
<FormSelector
classes={classes}
isThemeLight={isThemeLight}
selectValue={compWidth}
selectValue={compHeight}
handleChange={handleChange}
title="Height:"
name="height"
items={[
{ value: '', text: 'none' },
{ value: '', text: 'default' },
{ value: 'auto', text: 'auto' },
{ value: '100%', text: '100%' },
{ value: '50%', text: '50%' }
{ value: '50%', text: '50%' },
{ value: '25%', text: '25%' }
]}
/>
<div className={classes.configRow}>
Expand Down Expand Up @@ -785,6 +799,9 @@ const useStyles = makeStyles({
compName: {
fontSize: '1rem'
},
rootCompName: {
fontSize: '1.75rem'
},
// 'Parent Component' font size
configHeader: {
height: '70px',
Expand All @@ -795,6 +812,15 @@ const useStyles = makeStyles({
marginTop: '10px'
}
},
rootConfigHeader: {
height: '70px',
'& > h4': {
fontSize: '1.75rem',
letterSpacing: '0.5px',
marginBottom: '0',
marginTop: '30px'
}
},
lightThemeFontColor: {
color: '#155084'
},
Expand Down
4 changes: 2 additions & 2 deletions app/src/helperFunctions/generateCode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ const generateUnformattedCode = (
${links ? `import Link from 'next/link'` : ``}
${images ? `import Image from 'next/image'` : ``}
const ${currComponent.name} = (props): JSX.Element => {
const ${currComponent.name[0].toUpperCase() + currComponent.name.slice(1)} = (props): JSX.Element => {
const [value, setValue] = useState<any | undefined>("INITIAL VALUE");
return (
<>
Expand All @@ -326,7 +326,7 @@ const generateUnformattedCode = (
</>
);
}
export default ${currComponent.name};
export default ${currComponent.name[0].toUpperCase() + currComponent.name.slice(1)};
`;
} else {
// gatsby component code
Expand Down
2 changes: 0 additions & 2 deletions server/server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ const isDev = process.env.NODE_ENV === 'development';
const isProd = process.env.NODE_ENV === 'production';
const isTest = process.env.NODE_ENV === 'test';

console.log('process.env.NODE_ENV', process.env.NODE_ENV);

app.use(express.json({ limit: '100mb' }));
app.use(express.urlencoded({ limit: '100mb', extended: true }));
app.use(cookieParser());
Expand Down

0 comments on commit 3f0276a

Please sign in to comment.