added header button with popover

enigmawun · enigmawun · commit 893927ada269 · 2024-12-31T11:14:43.000-05:00
diff --git a/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx b/app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx
@@ -42,7 +42,7 @@ const AddContextForm = ({
   setCurrentContext,
   errorMsg,
   errorStatus,
-  setErrorStatus,
+  setErrorStatus
 }) => {
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
@@ -66,7 +66,7 @@ const AddContextForm = ({
   // event handle for confirmation modal
   const handleClose = (
     event: React.SyntheticEvent | Event,
-    reason?: string,
+    reason?: string
   ) => {
     if (reason === 'clickaway') {
       return;
@@ -77,7 +77,7 @@ const AddContextForm = ({
 
   const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
     props,
-    ref,
+    ref
   ) {
     return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
   });
@@ -103,11 +103,11 @@ const AddContextForm = ({
       <Box sx={{ display: 'flex', gap: 2, mb: 4 }}>
         <TextField
           InputProps={{
-            style: { color: color },
+            style: { color: color }
           }}
           onChange={handleChange}
           sx={{
-            width: 425,
+            width: 425
           }}
           label="context"
           value={contextInput}
@@ -138,7 +138,7 @@ const AddContextForm = ({
             textTransform: 'capitalize',
             height: '50px',
             width: '100px',
-            fontSize: '15px',
+            fontSize: '15px'
           }}
         >
           Create
@@ -172,7 +172,7 @@ const AddContextForm = ({
             textTransform: 'capitalize',
             height: '50px',
             width: '100px',
-            fontSize: '15px',
+            fontSize: '15px'
           }}
         >
           Delete
diff --git a/app/src/components/left/ComponentDrag.tsx b/app/src/components/left/ComponentDrag.tsx
@@ -5,6 +5,7 @@ import { RootState } from '../../redux/store';
 import makeStyles from '@mui/styles/makeStyles';
 import { useSelector } from 'react-redux';
 import ComponentPanelItem from '../right/ComponentPanelItem';
+import HeaderButton from '../left/HeaderButton';
 
 const useStyles = makeStyles({
   panelWrapper: {
@@ -41,6 +42,10 @@ const ComponentDrag = ({
 }): JSX.Element | null => {
   const classes = useStyles();
   const state = useSelector((store: RootState) => store.appState);
+  let buttonTitle =
+    state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'
+      ? 'Pages'
+      : 'Root';
 
   const isFocus = (targetId: number) =>
     state.canvasFocus.componentId === targetId ? true : false;
@@ -50,11 +55,18 @@ const ComponentDrag = ({
   return (
     <div className={classes.panelWrapper}>
       <div className={classes.panelWrapperList}>
-        <h4 className={classes.darkThemeFontColor} style={{ color: '#f88e16' }}>
+        <HeaderButton
+          headerName={buttonTitle}
+          id={buttonTitle}
+          infoText={
+            'The root serves as the entry point for the rest of the app. Use a root component as the foundation from which all the rest of your hierarchy is nested.'
+          }
+        />
+        {/* <h4 className={classes.darkThemeFontColor} style={{ color: '#f88e16' }}>
           {state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'
             ? 'Pages'
             : 'Root Module(s)'}
-        </h4>
+        </h4> */}
         <Grid
           container
           direction="column"
diff --git a/app/src/components/left/CreatePanel.tsx b/app/src/components/left/CreatePanel.tsx
@@ -14,6 +14,7 @@ import MUIItem from './MUIItem';
 import HTMLItem from './HTMLItem';
 import HTMLPanel from './HTMLPanel';
 import ComponentDrag from './ComponentDrag';
+import HeaderButton from './HeaderButton';
 
 /**
  * Provides a user interface for managing HTMLitems & MUIItems in the application. It features accordions for different categories
@@ -191,7 +192,7 @@ const CreatePanel = (props): JSX.Element => {
     'Speed Dial'
   ]);
 
-  const makeMenuCategory = (typeArray, name, idx) =>
+  const makeMenuCategory = (typeArray, name, idx, infoText) =>
     name ? (
       <>
         <Box
@@ -219,7 +220,14 @@ const CreatePanel = (props): JSX.Element => {
 
   return (
     <div className={'MUIItems'}>
-      <Button component="label">{'Custom Elements'}</Button>
+      {/* <HeaderButton
+        isThemeLight={props.isThemeLight}
+        infoText={`Add more HTML elements to drag and drop onto your canvas. 
+        Each element requires a tag. For a list of all possible HTML elements,
+        please refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element.`}
+        headerName={'Custom Elements'}
+        id={'CustomElementsBtn'}
+      /> */}
       <HTMLPanel isThemeLight={props.isThemeLight} />
       {makeMenuCategory([
         state.HTMLTypes.filter((type) => type.id > 10000).map(
diff --git a/app/src/components/left/HTMLPanel.tsx b/app/src/components/left/HTMLPanel.tsx
@@ -11,6 +11,8 @@ import Snackbar from '@mui/material/Snackbar';
 import { addElement } from '../../redux/reducers/slice/appStateSlice';
 import { emitEvent } from '../../helperFunctions/socket';
 import { RootState } from '../../redux/store';
+import HelpIcon from '@mui/icons-material/Help';
+import Popover, { PopoverProps } from '@mui/material/Popover';
 
 /**
  * Provides a user interface for creating custom HTML elements in the application. It includes
@@ -27,6 +29,9 @@ import { RootState } from '../../redux/store';
  */
 const HTMLPanel = (props): JSX.Element => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] =
+    React.useState<PopoverProps['anchorEl']>(null);
+
   const [tag, setTag] = useState('');
   const [name, setName] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
@@ -143,7 +148,15 @@ const HTMLPanel = (props): JSX.Element => {
       document.removeEventListener('keydown', handleCreateElement);
     };
   }, []);
+  const handleClickPopover = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
 
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  const id = open ? open : undefined;
   const handleAlertClose = (
     event: React.SyntheticEvent | Event,
     reason?: string
@@ -174,6 +187,26 @@ const HTMLPanel = (props): JSX.Element => {
             onChange={handleNameChange}
             helperText={errorMsg}
           />
+          <HelpIcon
+            id={'helpicon'}
+            size="medium"
+            sx={{ alignSelf: 'center', marginLeft: '12px' }}
+            onClick={handleClickPopover}
+          />
+          <Popover
+            id={id}
+            open={open}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right'
+            }}
+            transformOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left'
+            }}
+          ></Popover>
         </div>
         <div className={classes.inputWrapper}>
           <TextField
diff --git a/app/src/components/left/HeaderButton.tsx b/app/src/components/left/HeaderButton.tsx
@@ -27,29 +27,28 @@ const HeaderButton = (props) => {
         aria-label={id}
         id={id}
         onClick={handleClickPopover}
+        key={props.headerName}
       >
-        {'Module Editor'}
+        {props.headerName}
         <Popover
           id={id}
           open={open}
           anchorEl={anchorEl}
           onClose={handleClose}
           anchorOrigin={{
             vertical: 'top',
-            horizontal: 'center'
+            horizontal: 'right'
           }}
           transformOrigin={{
             vertical: 'bottom',
-            horizontal: 'center'
+            horizontal: 'left'
           }}
         >
           <div className={classes.popover}>
-            {/* <div>
+            <div className={classes.popoverIcon}>
               <HelpIcon id={id} size="small" />
-            </div> */}
-            <div>
-              Add modules to create a canvas for grouping your components.
             </div>
+            <div>{props.infoText}</div>
           </div>
         </Popover>
       </Button>
@@ -58,12 +57,21 @@ const HeaderButton = (props) => {
 };
 
 const useStyles = makeStyles({
+  headerButton: {
+    alignSelf: 'center'
+  },
   popover: {
-    backgroundColor: 'white',
-    width: '200px',
+    backgroundColor: '#ffdbbb',
+    display: 'flex',
     color: 'black',
     fontSize: '0.8rem',
-    padding: '10px'
+    padding: '8px',
+    width: '300px'
+  },
+  popoverIcon: {
+    paddingRight: '10px',
+    paddingLeft: '8px',
+    paddingTop: '10px'
   }
 });
 export default HeaderButton;
diff --git a/app/src/components/left/ModulePanel.tsx b/app/src/components/left/ModulePanel.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
-import AddCircleIcon from '@mui/icons-material/AddCircle';
+
 import ComponentDrag from './ComponentDrag';
 import ComponentPanel from '../right/ComponentPanel';
 import { RootState } from '../../redux/store';
@@ -55,38 +55,25 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
       {isEditingModule ? (
         <CreatePanel />
       ) : (
-        <div className="createComponent">
+        <div
+          className="createComponent"
+          style={{
+            color: '#f88e16',
+            textAlign: 'center'
+          }}
+        >
           <HeaderButton
-            isThemeLight={true}
-            infoText={
-              'Add modules to create a canvas for grouping your components.'
-            }
-            headerName={'headerName'}
+            isThemeLight={'true'}
+            infoText={`Add modules to create a canvas for grouping your components.
+            Once created, you can drag modules into other modules to link them.
+              Each module will be exported as its own file.`}
+            headerName={'Add Modules'}
           />
           <ComponentPanel
             setIsCreatingModule={setIsCreatingModule}
             isThemeLight={false}
           />
-          <Grid container justifyContent="space-around" columnSpacing={2}>
-            {htmlTypesToRender.map((option) => {
-              if (
-                (option.name === 'Switch' ||
-                  option.name === 'LinkTo' ||
-                  option.name === 'Route') &&
-                state.projectType === 'Classic React'
-              ) {
-                return (
-                  <HTMLItem
-                    name={option.name}
-                    key={`html-${option.name}`}
-                    id={option.id}
-                    icon={option.icon}
-                    handleDelete={handleDelete}
-                  />
-                );
-              }
-            })}
-          </Grid>
+
           <ComponentDrag
             isVisible={true}
             isThemeLight={false}
@@ -97,16 +84,40 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
               <div
                 style={{
                   color: '#f88e16',
-                  textAlign: 'center',
-                  padding: '20px'
+                  textAlign: 'center'
+
                   //   border: '1px solid #101012'
                 }}
               >
-                Other Modules
+                <HeaderButton headerName="Other Modules" infoText="" />
               </div>
               <ComponentsContainer
                 handleClickEditModule={handleClickEditModule}
               />
+              <HeaderButton
+                headerName="Add Router"
+                infoText="Turn a module into a single page app with a router."
+              />
+              <Grid container justifyContent="space-around" columnSpacing={2}>
+                {htmlTypesToRender.map((option) => {
+                  if (
+                    (option.name === 'Switch' ||
+                      option.name === 'LinkTo' ||
+                      option.name === 'Route') &&
+                    state.projectType === 'Classic React'
+                  ) {
+                    return (
+                      <HTMLItem
+                        name={option.name}
+                        key={`html-${option.name}`}
+                        id={option.id}
+                        icon={option.icon}
+                        handleDelete={handleDelete}
+                      />
+                    );
+                  }
+                })}
+              </Grid>
             </div>
           )}
         </div>
diff --git a/app/src/components/right/ComponentPanel.tsx b/app/src/components/right/ComponentPanel.tsx
