Merge pull request #7 from oslabs-beta/feature/MUItab

Jesse 4/25, MUI Props Tab added in file BottomTabs.tsx,re-adjust the …

Author: sfryan95

app/src/components/bottom/BottomPanel.tsx

@@ -33,11 +33,13 @@ const BottomPanel = (props): JSX.Element => {
     if (!props.bottomShow) return; // prevent drag calculation to occur when bottom menu is not showing
 
     const dy = y - e.clientY;
+    const newHeight = h + dy;
 
-    const newVal = h + dy;
-    const styles = window.getComputedStyle(node.current);
-    const min = parseInt(styles.minHeight, 10);
-    node.current.style.height = newVal > min ? `${h + dy}px` : `${min}px`;
+  const styles = window.getComputedStyle(node.current);
+  const minHeight = parseInt(styles.minHeight, 10);
+  const maxHeight = window.innerHeight * 0.8; // Set a maximum height, e.g., 90% of window height
+
+  node.current.style.height = `${Math.max(minHeight, Math.min(maxHeight, newHeight))}px`;
   };
 
   const mouseUpHandler = function () {
@@ -49,13 +51,18 @@ const BottomPanel = (props): JSX.Element => {
   };
 
   useEffect(() => {
-    node.current.style.height = '50vh';
-    node.current.style.minHeight = '50vh';
-  }, []);
+    if (props.bottomShow) {
+      node.current.style.height = '50vh'; // Initial height when bottom panel is open
+      node.current.style.minHeight = '20vh'; // Minimum height when bottom panel is open
+    } else {
+      node.current.style.height = '0.1'; // Initial height when bottom panel is closed
+      node.current.style.minHeight = '0.1'; // Minimum height when bottom panel is closed
+    }
+  }, [props.bottomShow]);
 
   return (
     <>
-      <div className="bottom-panel" id="resize" ref={node}>
+      <div className="bottom-panel" id="resize" ref={node} >
         <div
           id="resize-drag"
           onMouseDown={mouseDownHandler}

app/src/components/bottom/BottomTabs.tsx

@@ -1,24 +1,26 @@
 import React, { useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import StylesEditor from './StylesEditor';
-import CustomizationPanel from '../../containers/CustomizationPanel';
+import { useDispatch, useSelector } from 'react-redux';
+import { changeProjectType } from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
+import { MeetingProvider } from '@videosdk.live/react-sdk';
+const videoSDKToken = `${import.meta.env.VITE_VIDEOSDK_TOKEN}`;
+import Chatroom from './ChatRoom';
 import CreationPanel from './CreationPanel';
+import CustomizationPanel from '../../containers/CustomizationPanel';
+import StylesEditor from './StylesEditor';
+import Tree from '../../tree/TreeChart';
 import ContextManager from '../ContextAPIManager/ContextManager';
 import StateManager from '../StateManagement/StateManagement';
-import Chatroom from './ChatRoom';
+import MUIProps from './MUIProps';
+import makeStyles from '@mui/styles/makeStyles';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
-import Tree from '../../tree/TreeChart';
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import arrow from '../main/Arrow';
-import { useDispatch, useSelector } from 'react-redux';
-import { changeProjectType } from '../../redux/reducers/slice/appStateSlice';
-import { RootState } from '../../redux/store';
-import { MeetingProvider } from '@videosdk.live/react-sdk';
-const videoSDKToken = `${import.meta.env.VITE_VIDEOSDK_TOKEN}`;
+
 
 const BottomTabs = (props): JSX.Element => {
   const { setBottomShow, isThemeLight } = props;
@@ -73,54 +75,52 @@ const BottomTabs = (props): JSX.Element => {
               indicator: classes.tabsIndicator
             }}
             variant="scrollable"
-            scrollButtons="auto"
+            scrollButtons="auto" 
           >
-            <Tab
-              disableRipple
+            <Tab 
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="Live Chat"
               onClick={showBottomPanel}
               sx={{ borderTop: '2px solid #191919' }}
             />
             <Tab
-              disableRipple
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="Creation Panel"
               onClick={showBottomPanel}
               sx={{ borderTop: '2px solid #191919' }}
             />
             <Tab
-              disableRipple
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="Customization"
               onClick={showBottomPanel}
               sx={{ borderTop: '2px solid #191919' }}
             />
             <Tab
-              disableRipple
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="CSS Editor"
               onClick={showBottomPanel}
               sx={{ borderTop: '2px solid #191919' }}
             />
             <Tab
-              disableRipple
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="Component Tree"
               onClick={showBottomPanel}
             />
             <Tab
-              disableRipple
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="Context Manager"
               onClick={showBottomPanel}
             />
             <Tab
-              disableRipple
               classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
               label="State Manager"
               onClick={showBottomPanel}
             />
+            <Tab
+              classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+              label="MUI Props"
+              onClick={showBottomPanel}
+            />
           </Tabs>
 
           <div className={classes.projectTypeWrapper}>
@@ -161,13 +161,8 @@ const BottomTabs = (props): JSX.Element => {
           {tab === 3 && <StylesEditor theme={theme} setTheme={setTheme} />}
           {tab === 4 && <Tree data={components} />}
           {tab === 5 && <ContextManager theme={theme} setTheme={setTheme} />}
-          {tab === 6 && (
-            <StateManager
-              theme={theme}
-              setTheme={setTheme}
-              isThemeLight={isThemeLight}
-            />
-          )}
+          {tab === 6 && (<StateManager theme={theme} setTheme={setTheme} isThemeLight={isThemeLight} />)}
+          {tab === 7 && <MUIProps theme={theme} setTheme={setTheme} />}  
         </div>
       </div>
     </MeetingProvider>

app/src/components/bottom/MUIProps.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Button, TextField } from "@mui/material";
+import { Send } from "@mui/icons-material";
+import MUITypes from "../../redux/MUITypes";
+import { MUIType } from '../../interfaces/Interfaces';
+import { emitEvent } from '../../helperFunctions/socket';
+
+const MUIProps = (props): JSX.Element => {
+  const [selectedComponent, setSelectedComponent] = useState<MUIType | null>(null);
+
+  const handleComponentSelect = (component: MUIType) => {
+    setSelectedComponent(component);
+  };
+
+  const handleSend = () => {
+    if (selectedComponent) {
+      emitEvent("add-component", selectedComponent, {placeholder: "Placeholder"});
+    }
+  };
+
+  return (
+    <div>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {MUITypes.map((component) => (
+          <Button
+            key={component.id}
+            onClick={() => handleComponentSelect(component)}
+            sx={{ marginBottom: "0.5rem" }}
+          >
+            {component.name}
+          </Button>
+        ))}
+      </div>
+      <Button
+        onClick={handleSend}
+        variant="contained"
+        endIcon={<Send />}
+        sx={{ marginTop: "1rem" }}
+      >
+        Save
+      </Button>
+    </div>
+  );
+};
+
+export default MUIProps;
+