Merge pull request #9 from oslabs-beta/feature/moreComps

Feature/more comps

Author: HM-Pfeiffer

app/src/components/left/ComponentDrag.tsx

@@ -5,7 +5,6 @@ import makeStyles from '@mui/styles/makeStyles';
 import { useSelector } from 'react-redux';
 import ComponentPanelItem from '../right/ComponentPanelItem';
 
-
 const useStyles = makeStyles({
   panelWrapper: {
     display: 'flex',
@@ -21,7 +20,7 @@ const useStyles = makeStyles({
     color: '#fff'
   },
   darkThemeFontColor: {
-    color: '#fff'
+    color: '#00008B,'
   }
 });
 
@@ -70,4 +69,3 @@ const ComponentDrag = ({ isVisible, isThemeLight }): JSX.Element | null => {
 };
 
 export default ComponentDrag;
-

app/src/components/main/CanvasContainer.tsx

@@ -38,7 +38,7 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
     backgroundSize: '8px 8px',
     backgroundPosition: '-19px -19px',
     borderBottom: 'none',
-    overflow: 'auto'
+    overflow: 'auto',
   };
 
   //containerRef references the container that will ultimately have the scroll functionality

app/src/components/main/DemoRender.tsx

@@ -42,6 +42,7 @@ import { RootState } from '../redux/store';
 import { emitEvent } from '../helperFunctions/socket';
 import { Number } from 'mongoose';
 
+
 // Previously named rightContainer, Renamed to Customizationpanel this now hangs on BottomTabs
 // need to pass in props to use the useHistory feature of react router
 const CustomizationPanel = ({ isThemeLight }): JSX.Element => {

app/src/containers/CustomizationPanel.tsx

@@ -53,14 +53,15 @@ const generateUnformattedCode = (
   // find the unique components that we need to import into this component file
   let imports: any = [];
   let muiImports = new Set();
+  let muiStateAndEventHandlers = new Set();
   let providers: string = '';
   let context: string = '';
   let links: boolean = false;
   let images: boolean = false;
   const isRoot = rootComponents.includes(componentId);
   let importReactRouter = false;
 
-  // returns an array of objects which may include components, html elements, and/or route links
+  // returns an array of objects which may include components, html elements, MaterialUI components, and/or route links
   const getEnrichedChildren = (currentComponent) => {
     const enrichedChildren = [];
 
@@ -125,14 +126,66 @@ const generateUnformattedCode = (
           if (muiComponent) {
             // Recursively process MUI components that can have children
             if (
-              ['mui button', 'card', 'typography', 'textfield'].includes(
-                muiComponent.tag
-              )
+              [
+                'autocomplete',
+                'mui button',
+                'btn group',
+                'checkbox',
+                'fab',
+                'radio group',
+                'rating',
+                'select',
+                'slider',
+                'switch',
+                'textfield',
+                'transfer-list',
+                'toggle-button',
+                'avatar',
+                'badge',
+                'chip',
+                'list',
+                'table',
+                'tooltip',
+                'typography',
+                'alert',
+                'backdrop',
+                'dialog',
+                'progress',
+                'skeleton',
+                'snackbar',
+                'accordion',
+                'appbar',
+                'card',
+                'paper',
+                'bottomNavigation',
+                'breadcrumbs',
+                'drawer',
+                'link',
+                'menu',
+                'pagination',
+                'speedDial',
+                'stepper',
+                'tabs',
+                'box',
+                'container',
+                'grid',
+                'stack',
+                'image-list',
+                'modal',
+                'popover',
+                'popper',
+                'transition'
+              ].includes(muiComponent.tag)
             ) {
               newChild.children = getEnrichedChildren({
                 children: child.children
               });
               collectMUIImports(child, MUITypes, muiImports);
+              collectStateAndEventHandlers(
+                child,
+                MUITypes,
+                muiStateAndEventHandlers
+              );
             }
           }
           break;
@@ -347,7 +400,7 @@ const generateUnformattedCode = (
     ].join('\n');
   }
 
-  function modifyAndIndentJsx(jsxAry, newProps, childId, name) {
+  function modifyAndIndentJsx(jsxAry, newProps, childId, name, key) {
     // Define a regular expression to match the start tag of the specified child element
     const tagRegExp = new RegExp(`^<${name}(\\s|>)`);
 
@@ -370,8 +423,15 @@ const generateUnformattedCode = (
             )} ${childId}${trimmedLine.substring(insertIndex)}`;
             // Adjust insertIndex for the next insertion
             insertIndex += childId.length + 1;
+          } else if (trimmedLine.includes(`id=`) && childId) {
+            // Define the insertion point for "{key} " right after `id="`
+            let idInsertIndex = trimmedLine.indexOf(`id="`) + 4;
+            // Insert "{key} " at the identified position within the existing id value
+            line = `${trimmedLine.substring(
+              0,
+              idInsertIndex
+            )}${key} ${trimmedLine.substring(idInsertIndex)}`;
           }
-
           // Insert newProps at the updated insertion index
           if (newProps) {
             line = `${line.substring(
@@ -413,6 +473,7 @@ const generateUnformattedCode = (
   const muiGenerator = (child, level = 0) => {
     let childId = '';
     let passedInPropsString = '';
+    let key = 0;
 
     const MUIComp = MUITypes.find((el) => el.tag === child.name);
     const MUIName = MUIComp.name;
@@ -427,6 +488,7 @@ const generateUnformattedCode = (
 
     if (child.childId) {
       childId = `id="${+child.childId}"`;
+      key = +child.childId;
     }
 
     // Indent the JSX generated for MUI components based on the provided level
@@ -437,7 +499,8 @@ const generateUnformattedCode = (
       indentedJSX,
       passedInPropsString,
       childId,
-      MUIName
+      MUIName,
+      key
     );
 
     // Handle nested components, if any
@@ -521,6 +584,46 @@ const generateUnformattedCode = (
     return Array.from(muiImports).join('\n');
   }
 
+  // Function to collect state and event handler snippets from components
+  function collectStateAndEventHandlers(
+    component,
+    MUITypes,
+    handlersCollection
+  ) {
+    console.log('collectStateAndEventHandlers invoked');
+    if (component.type === 'MUI Component') {
+      console.log('collectStateAndEventHandlers MUI check');
+      const muiComponent = MUITypes.find((m) => m.id === component.typeId);
+
+      console.log('muiComponent found:', JSON.stringify(muiComponent)); // Check what muiComponent is found
+      console.log(
+        'StateAndEventHandlers:',
+        muiComponent?.stateAndEventHandlers
+      ); // Direct check
+
+      if (muiComponent && Array.isArray(muiComponent.stateAndEventHandlers)) {
+        console.log('collectStateAndEventHandlers hasState');
+        muiComponent.stateAndEventHandlers.forEach((handlerSnippet) => {
+          handlersCollection.add(handlerSnippet);
+        });
+      } else {
+        console.log('No stateAndEventHandlers found or not an array');
+      }
+    }
+
+    // Recursively collect handlers from child components if they exist
+    if (component.children) {
+      component.children.forEach((child) =>
+        collectStateAndEventHandlers(child, MUITypes, handlersCollection)
+      );
+    }
+  }
+
+  // Function to generate code for state and event handlers
+  function generateStateAndEventHandlerCode(handlersCollection) {
+    return Array.from(handlersCollection).join('\n');
+  }
+
   const writeNestedElements = (enrichedChildren, level = 0) => {
     return enrichedChildren.flatMap((child) => {
       if (child.type === 'Component') {
@@ -660,6 +763,10 @@ const generateUnformattedCode = (
       return importStr;
     };
     const muiImportStatements = generateMUIImportStatements(muiImports);
+    const stateAndEventHandlers = generateStateAndEventHandlerCode(
+      muiStateAndEventHandlers
+    );
+    console.log('stateAndEventHandlers', stateAndEventHandlers);
     let generatedCode =
       "import React, { useState, useEffect, useContext} from 'react';\n\n";
     generatedCode += currComponent.name === 'App' ? contextImports : '';
@@ -671,6 +778,7 @@ const generateUnformattedCode = (
     generatedCode += muiImportStatements ? `${muiImportStatements}\n\n` : '';
     // below is the return statement of the codepreview
     generatedCode += `const ${currComponent.name} = (props) => {\n`;
+    generatedCode += stateAndEventHandlers ? `${stateAndEventHandlers}` : '';
     generatedCode += writeStateProps(currComponent.useStateCodes)
       ? `\t${writeStateProps(currComponent.useStateCodes)}\n`
       : '';

app/src/helperFunctions/generateCode.ts

@@ -122,7 +122,46 @@ const renderChildren = (children: ChildElement[]) => {
           passedInProps={[]}
         />
       );
-    } else if (type === 'MUI Component' && typeId === 31) {
+    } else if (
+      type === 'MUI Component' &&
+      (typeId === 21 ||
+        typeId === 22 ||
+        typeId === 24 ||
+        typeId === 26 ||
+        typeId === 27 ||
+        typeId === 28 ||
+        typeId === 29 ||
+        typeId === 30 ||
+        typeId === 31 ||
+        typeId === 33 ||
+        typeId === 32 ||
+        typeId === 34 ||
+        typeId === 35 ||
+        typeId === 36 ||
+        typeId === 37 ||
+        typeId === 40 ||
+        typeId === 41 ||
+        typeId === 42 ||
+        typeId === 44 ||
+        typeId === 46 ||
+        typeId === 47 ||
+        typeId === 51 ||
+        typeId === 53 ||
+        typeId === 54 ||
+        typeId === 55 ||
+        typeId === 56 ||
+        typeId === 57 ||
+        typeId === 58 ||
+        typeId === 59 ||
+        typeId === 60 ||
+        typeId === 61 ||
+        typeId === 62 ||
+        typeId === 68 ||
+        typeId === 69 ||
+        typeId === 73 ||
+        typeId === 75 ||
+        typeId === 76)
+    ) {
       return (
         <DirectChildMUI
           childId={childId}
@@ -141,7 +180,18 @@ const renderChildren = (children: ChildElement[]) => {
     // child is a nestable type of HTML element (divs, forms, OrderedLists, UnorderedLists, menus)
     else if (
       type === 'MUI Component' &&
-      (typeId === 21 || typeId === 41 || typeId === 51)
+      (typeId === 23 ||
+        typeId === 25 ||
+        typeId === 43 ||
+        typeId === 45 ||
+        typeId === 48 ||
+        typeId === 49 ||
+        typeId === 50 ||
+        typeId === 52 ||
+        typeId === 63 ||
+        typeId === 64 ||
+        typeId === 65 ||
+        typeId === 79)
     ) {
       return (
         <DirectChildMUINestable

app/src/helperFunctions/renderChildren.tsx

@@ -114,10 +114,12 @@ export interface MUIType {
   icon?: any;
   framework: string;
   nestable: boolean;
-  imports: any[];
-  propOptions: any[];
-  defaultProps: any[];
-  jsx: any[];
+  stateAndEventHandlers: string[];
+  imports: string[];
+  propOptions: string[];
+  defaultProps: string[];
+  jsx: string[];
+  componentData: object;
   children: [];
 }
 export interface DragItem extends DragObjectWithType {