Merge pull request #1 from oslabs-beta/contextTab

Context tab

Author: huypham048

app/src/components/bottom/BottomTabs.tsx

@@ -7,6 +7,7 @@ import CodePreview from './CodePreview';
 import StylesEditor from './StylesEditor';
 import CustomizationPanel from '../../containers/CustomizationPanel'
 import CreationPanel from './CreationPanel'
+import ContextManager from './ContextManager'
 import Box from '@material-ui/core/Box';
 import Tree from '../../tree/TreeChart';
 import FormControl from '@material-ui/core/FormControl';
@@ -78,6 +79,11 @@ const BottomTabs = (props): JSX.Element => {
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Component Tree"
           />
+          <Tab
+            disableRipple
+            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+            label="Context Manager"
+          />
         </Tabs>
         <div className={classes.projectTypeWrapper}> 
          <FormControl size='small'>
@@ -101,6 +107,7 @@ const BottomTabs = (props): JSX.Element => {
       {tab === 2 && <StylesEditor theme={theme} setTheme={setTheme} />}
       {tab === 3 && <CodePreview theme={theme} setTheme={setTheme} />}
       {tab === 4 && <Tree data={components} />}
+      {tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
     </div>
   );
 };

app/src/components/bottom/ContextInput.tsx

@@ -0,0 +1 @@
+import ContextAssigner from 'app/src/components/right/ContextAssigner.tsx';

app/src/components/bottom/ContextManager.tsx

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+import ComponentPanel from '../right/ComponentPanel';
+import ContextAssigner from '../right/ContextAssigner';
+import ContextMenu from '../right/ContextMenu';
+import ContextTree from '../right/ContextTree';
+import HTMLPanel from '../left/HTMLPanel';
+import { styleContext } from '../../containers/AppContainer';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import { styled } from '@mui/material/styles';
+
+
+
+const ContextManager= (props): JSX.Element => {
+  // const {style} = useContext(styleContext);
+  return (
+    <React.Fragment>
+    {/* <CssBaseline /> */}
+    <Container style={{"backgroundColor": "white", "height" : "100%", "width": "100%"}} >
+      <Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={0}>
+        <Box gridColumn="span 4" style={{"border": "1px solid black", "height": "100%"}}>
+          <Box style={{"height" : "50em", "border": "1px solid black"}}>
+            <ContextMenu />
+          </Box>
+          <Box style={{"height" : "50em", "border": "1px solid black"}}>
+            <ContextAssigner/>
+          </Box>
+        </Box>
+        <Box gridColumn="span 8"  style={{"border": "1px solid black"}}>
+          <ContextTree/>
+        </Box>
+      </Box>
+    </Container>
+  </React.Fragment>
+
+  );
+};
+
+export default ContextManager;

app/src/components/bottom/CreationPanel.tsx

@@ -10,6 +10,7 @@ const CreationPanel = (props): JSX.Element => {
   const {style} = useContext(styleContext);
   return (
     <div className="creation-panel" style={style}>
+
       <ComponentPanel isThemeLight={props.isThemeLight}/>
       <HTMLPanel isThemeLight={props.isThemeLight}/>
       <StatePropsPanel isThemeLight={props.isThemeLight}/>

app/src/components/right/ContextAssigner.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import StateContext from '../../context/context';
+
+export default function ContextAssigner() {
+  const [age, setAge] = React.useState('');
+  const [componentList, dispatch] = React.useContext(StateContext);
+
+  console.log(componentList);
+  const handleChange = (event: SelectChangeEvent) => {
+    setAge(event.target.value as string);
+  };
+
+  return (
+
+    <Box sx={{ minWidth:100 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">Select Component</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={age}
+          label="Age"
+          onChange={handleChange}
+        >
+          {componentList.components.map((component) => {
+           return <MenuItem value={component.name}>{component.name}</MenuItem>
+          })}
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

app/src/components/right/ContextMenu.tsx

@@ -0,0 +1,14 @@
+/* imput component
+input component
+button component
+*/
+import React from 'react';
+
+
+const ContextMenu = () => {
+  return (
+    <h1>This is from context menu</h1>
+  )
+}
+
+export default ContextMenu;

app/src/components/right/ContextTree.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ContextTree = () => {
+  return (
+    <h1>Our beautiful tree is here</h1>
+  )
+}
+
+export default ContextTree;