Merge pull request #28 from MadinventorZero/organization

Organization

Author: xkevinpark

app/src/components/bottom/BottomPanel.tsx

@@ -3,7 +3,7 @@ import BottomTabs from './BottomTabs';
 import { Resizable } from 're-resizable';
 
 
-const BottomPanel = () => {
+const BottomPanel = (props): JSX.Element => {
   return (
     <Resizable
       enable={{
@@ -12,7 +12,7 @@ const BottomPanel = () => {
       minHeight={'50%'}
     >
       <div className="bottom-panel" >
-        <BottomTabs  />
+        <BottomTabs isThemeLight={props.isThemeLight}/>
       </div>
     </Resizable>
   );

app/src/components/bottom/BottomTabs.tsx

@@ -5,6 +5,8 @@ import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import CodePreview from './CodePreview';
 import StylesEditor from './StylesEditor';
+import CustomizationPanel from '../../containers/CustomizationPanel'
+import CreationPanel from './CreationPanel'
 import Box from '@material-ui/core/Box';
 import Tree from '../../tree/TreeChart';
 import { emitKeypressEvents } from 'readline';
@@ -14,7 +16,7 @@ import { styleContext } from '../../containers/AppContainer';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 
-const BottomTabs = () => {
+const BottomTabs = (props): JSX.Element => {
   // state that controls which tab the user is on
   const [state, dispatch] = useContext(StateContext);
   const [tab, setTab] = useState(0);
@@ -56,18 +58,28 @@ const BottomTabs = () => {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="Code Preview"
+            label="Creation Panel"
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="Component Tree"
+            label="Customization"
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="CSS Editor"
           />
+          <Tab
+            disableRipple
+            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+            label="Code Preview"
+          />
+          <Tab
+            disableRipple
+            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+            label="Component Tree"
+          />
         </Tabs>
         <div className={classes.projectTypeWrapper}> 
          <FormControl size='small'>
@@ -86,9 +98,11 @@ const BottomTabs = () => {
           </FormControl>
         </div>
       </Box>
-      {tab === 0 && <CodePreview theme={theme} setTheme={setTheme} />}
-      {tab === 1 && <Tree data={components} />}
+      {tab === 0 && <CreationPanel isThemeLight={props.isThemeLight} />}
+      {tab === 1 && <CustomizationPanel isThemeLight={props.isThemeLight} />}
       {tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
+      {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />}
+      {tab === 4 && <Tree data={components} />}
     </div>
   );
 };

app/src/components/bottom/CodePreview.tsx

@@ -38,7 +38,7 @@ const CodePreview: React.FC<{
     <div
     ref={wrapper}
       style={{
-        height: '40vh',
+        height: '100%',
         maxWidth: '100%',
         justifyContent: 'center',
       }}

app/src/components/bottom/CreationPanel.tsx

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+import ComponentPanel from '../right/ComponentPanel'
+import StatePropsPanel from '../right/StatePropsPanel'
+import HTMLPanel from '../left/HTMLPanel'
+
+const CreationPanel = (props): JSX.Element => {
+  return (
+    <div className="creation-panel" >
+      <ComponentPanel isThemeLight={props.isThemeLight}/>
+      <HTMLPanel isThemeLight={props.isThemeLight}/>
+      <StatePropsPanel isThemeLight={props.isThemeLight}/>
+    </div>
+  );
+};
+
+export default CreationPanel;

app/src/components/bottom/StylesEditor.tsx

@@ -70,7 +70,7 @@ const StylesEditor: React.FC<{
       className='text-editor'
       ref={wrapper}
       style={{
-        height: '40vh',
+        height: '100%',
         maxWidth: '100%',
         justifyContent: 'center',
       }}
@@ -89,7 +89,7 @@ const StylesEditor: React.FC<{
         enableBasicAutocompletion={true}
         enableLiveAutocompletion={true}
       />
-      <Fab className='btn' onClick={saveCss} color="secondary" aria-label="add">
+      <Fab className='bttn' onClick={saveCss} color="secondary" aria-label="add">
         <SaveIcon />
       </Fab>
     </div>

app/src/components/left/DragDropPanel.tsx

@@ -0,0 +1,66 @@
+import React, { useState, useCallback, useContext, useEffect } from 'react';
+import Grid from '@material-ui/core/Grid';
+import StateContext from '../../context/context';
+import HTMLItem from './HTMLItem';
+import { makeStyles } from '@material-ui/core/styles';
+
+/*
+DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
+  Elements' header. The boxes containing each HTML element are rendered in
+  HTMLItem, which itself is rendered by this component.
+
+Central state contains all available HTML elements (stored in the HTMLTypes property).
+  The data for HTMLTypes is stored in HTMLTypes.tsx and is added to central state in
+  initialState.tsx.
+
+Hook state:
+  -tag: 
+*/
+
+const DragDropPanel = (props): JSX.Element => {
+  // const classes = useStyles();
+  const [state, dispatch] = useContext(StateContext);
+  const {isThemeLight} = props;
+
+  // const useStyles = makeStyles({
+  //   lightThemeFontColor: {
+  //     color: '#186BB4'
+  //   },
+  //   darkThemeFontColor: {
+  //     color: '#ffffff'
+  //   },
+  // });
+
+  const handleDelete = (id: number): void => {
+    dispatch({
+      type: 'DELETE ELEMENT',
+      payload: id
+    });
+  };
+  
+  // filter out separator so that it will not appear on the html panel
+  const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator');
+  console.log('Types', htmlTypesToRender)
+  return (
+    <div className="HTMLItems">
+      <div id="HTMLItemsTopHalf">
+        <Grid
+            id="HTMLItemsGrid"
+          >
+            {htmlTypesToRender.map(option => (
+              <HTMLItem
+                name={option.name}
+                key={`html-${option.name}`}
+                id={option.id}
+                Icon={option.icon}
+                handleDelete={handleDelete}
+                isThemeLight={isThemeLight}
+              />
+            ))}
+          </Grid>
+      </div>
+    </div>
+  );
+};
+
+export default DragDropPanel;