From 3f0276a0277ddd8b287690356d4c95c9c450e07c Mon Sep 17 00:00:00 2001 From: Michael Ng Date: Thu, 10 Mar 2022 02:52:22 -0800 Subject: [PATCH] ReacType v.11.0.0 is ready --- app/src/components/main/DemoRender.tsx | 4 +- app/src/components/right/ComponentPanel.tsx | 5 +- app/src/containers/CustomizationPanel.tsx | 100 ++++++++++++-------- app/src/helperFunctions/generateCode.ts | 4 +- server/server.js | 2 - 5 files changed, 69 insertions(+), 46 deletions(-) diff --git a/app/src/components/main/DemoRender.tsx b/app/src/components/main/DemoRender.tsx index 79f3a5c8c..3635215a2 100644 --- a/app/src/components/main/DemoRender.tsx +++ b/app/src/components/main/DemoRender.tsx @@ -25,8 +25,6 @@ const DemoRender = (): JSX.Element => { border: '2px Solid grey', }; - // let code = useSelector((state) => state.code); - const html = ` @@ -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; diff --git a/app/src/components/right/ComponentPanel.tsx b/app/src/components/right/ComponentPanel.tsx index a6520ffb3..16476a0ef 100644 --- a/app/src/components/right/ComponentPanel.tsx +++ b/app/src/components/right/ComponentPanel.tsx @@ -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', diff --git a/app/src/containers/CustomizationPanel.tsx b/app/src/containers/CustomizationPanel.tsx index fef93a364..ae96f7dac 100644 --- a/app/src/containers/CustomizationPanel.tsx +++ b/app/src/containers/CustomizationPanel.tsx @@ -380,7 +380,33 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => { document.removeEventListener('keydown', keyBindedFunc); }; }, []); - + + if(state.canvasFocus.childId === null) { + return ( +
+ +
+
+
+

+ Parent Component: +
+
+ {configTarget.name} +

+
+
+
+ +
+ ) + } return (
@@ -388,38 +414,23 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
- {configTarget.child ? ( -

- Instance of - {configTarget.child.type === 'component' - ? ' component' - : ' element'}{' '} -
-
- - {configTarget.child.name} - -

- ) : ( -

+ Instance of + {configTarget.child.type === 'component' + ? ' component' + : ' element'}{' '} +
+
+ - Parent Component: -
-
- {configTarget.name} -

- )} + {configTarget.child.name} + +
@@ -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' } @@ -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' } ]} @@ -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' }, @@ -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' }, @@ -494,8 +506,9 @@ 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%' } ]} @@ -503,15 +516,16 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
@@ -785,6 +799,9 @@ const useStyles = makeStyles({ compName: { fontSize: '1rem' }, + rootCompName: { + fontSize: '1.75rem' + }, // 'Parent Component' font size configHeader: { height: '70px', @@ -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' }, diff --git a/app/src/helperFunctions/generateCode.ts b/app/src/helperFunctions/generateCode.ts index f6dfd4ed3..9104330a7 100644 --- a/app/src/helperFunctions/generateCode.ts +++ b/app/src/helperFunctions/generateCode.ts @@ -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("INITIAL VALUE"); return ( <> @@ -326,7 +326,7 @@ const generateUnformattedCode = ( ); } - export default ${currComponent.name}; + export default ${currComponent.name[0].toUpperCase() + currComponent.name.slice(1)}; `; } else { // gatsby component code diff --git a/server/server.js b/server/server.js index 04362ce13..7a5c9ea8e 100644 --- a/server/server.js +++ b/server/server.js @@ -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());