feat(in progress): migrating to the @mui

package.json

@@ -22,18 +22,18 @@
     "prepare": "git rev-parse --git-dir && git config core.hooksPath ./.git-hooks || true"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/material": "^5.16.7",
     "@emotion/react": "11.13.0",
     "@emotion/styled": "11.13.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/x-tree-view": "^7.12.1",
     "@sasjs/adapter": "^4.11.0",
     "@sasjs/core": "^4.52.4",
     "@sasjs/utils": "^3.4.0",
     "axios": "^0.27.2",
+    "install": "^0.13.0",
     "moment": "^2.29.1",
+    "npm": "^10.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-highlight": "^0.15.0",
@@ -67,10 +67,10 @@
     "ts-loader": "^9.2.6",
     "typedoc": "0.26.5",
     "typescript": "^5.5.4",
-    "webpack": "5.68.0",
-    "webpack-cli": "4.9.1",
-    "webpack-dev-server": "4.9.2",
-    "webpack-merge": "^5.8.0"
+    "webpack": "5.93.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "5.0.4",
+    "webpack-merge": "^6.0.1"
   },
   "eslintConfig": {
     "extends": "react-app",

src/components/abortModal.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 
-import Typography from '@material-ui/core/Typography'
 import { styled } from '@mui/material/styles'
 import Dialog from '@mui/material/Dialog'
 import DialogTitle from '@mui/material/DialogTitle'
 import DialogContent from '@mui/material/DialogContent'
 import IconButton from '@mui/material/IconButton'
-import CloseIcon from '@mui/icons-material/Close'
 
 import { AbortModalPayload } from '../types'
+import { Typography } from '@mui/material'
+import { Close } from '@mui/icons-material'
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   '& .MuiDialogContent-root': {
@@ -42,7 +42,7 @@ const BootstrapDialogTitle = (props: DialogTitleProps) => {
             color: (theme) => theme.palette.grey[500]
           }}
         >
-          <CloseIcon />
+          <Close />
         </IconButton>
       ) : null}
     </DialogTitle>

src/components/data-page.component.tsx

@@ -5,18 +5,18 @@ import React, {
   useContext,
   useCallback
 } from 'react'
-import CircularProgress from '@material-ui/core/CircularProgress'
-
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
-import Button from '@material-ui/core/Button'
-import Table from '@material-ui/core/Table'
-import TableBody from '@material-ui/core/TableBody'
-import TableCell from '@material-ui/core/TableCell'
-import TableContainer from '@material-ui/core/TableContainer'
-import TableHead from '@material-ui/core/TableHead'
-import TableRow from '@material-ui/core/TableRow'
-import Paper from '@material-ui/core/Paper'
+import { CircularProgress, SelectChangeEvent } from '@mui/material'
+
+import { MenuItem } from '@mui/material'
+import { Select } from '@mui/material'
+import { Button } from '@mui/material'
+import { Table } from '@mui/material'
+import { TableBody } from '@mui/material'
+import { TableCell } from '@mui/material'
+import { TableContainer } from '@mui/material'
+import { TableHead } from '@mui/material'
+import { TableRow } from '@mui/material'
+import { Paper } from '@mui/material'
 
 import { SASContext } from '../context/sasContext'
 import { AbortModalPayload } from '../types'
@@ -83,12 +83,9 @@ const DataPageComponent = () => {
   }, [sasContext.isUserLoggedIn, prevLoggedIn, currentRequest, executeRequest])
 
   const areaOnChange = (
-    event: React.ChangeEvent<{
-      name?: string | undefined
-      value: unknown
-    }>
+    event: SelectChangeEvent<string>
   ) => {
-    setSelectedArea(event.target.value as string)
+    setSelectedArea(event.target.value)
   }
 
   const submitArea = () => {

src/components/file-uploader.component.tsx

@@ -1,50 +1,49 @@
 import React, { useState, useEffect, useContext } from 'react'
 import { bytesToSize } from '@sasjs/utils/utils/bytesToSize'
-import { makeStyles } from '@material-ui/core/styles'
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
-import CircularProgress from '@material-ui/core/CircularProgress'
-import Table from '@material-ui/core/Table'
-import TableBody from '@material-ui/core/TableBody'
-import TableCell from '@material-ui/core/TableCell'
-import TableContainer from '@material-ui/core/TableContainer'
-import TableHead from '@material-ui/core/TableHead'
-import TableRow from '@material-ui/core/TableRow'
-import Paper from '@material-ui/core/Paper'
+import { TextField, useTheme } from '@mui/material'
+import { Button } from '@mui/material'
+import { CircularProgress } from '@mui/material'
+import { Table } from '@mui/material'
+import { TableBody } from '@mui/material'
+import { TableCell } from '@mui/material'
+import { TableContainer } from '@mui/material'
+import { TableHead } from '@mui/material'
+import { TableRow } from '@mui/material'
+import { Paper } from '@mui/material'
 
 import { SASContext } from '../context/sasContext'
 import { AbortModalPayload } from '../types'
 import { getAbortModalPayload } from '../utils'
 import AbortModal from './abortModal'
 
-const useStyles = makeStyles((theme) => ({
-  pageLayout: {
-    padding: '16px',
-    display: 'flex',
-    flexDirection: 'column' as 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  input: {
-    marginTop: '10px',
-    width: '300px'
-  },
-  uploadButton: {
-    marginTop: '20px'
-  },
-  circularProgress: {
-    marginTop: '10px'
-  },
-  table: {
-    marginTop: '20px'
-  },
-  errorTitle: {
-    color: theme.palette.error.main
-  }
-}))
-
 export default function FileUploaderComponent() {
-  const classes = useStyles()
+  const theme = useTheme()
+
+  const styles = {
+    pageLayout: {
+      padding: '16px',
+      display: 'flex',
+      flexDirection: 'column' as 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    input: {
+      marginTop: '10px',
+      width: '300px'
+    },
+    uploadButton: {
+      marginTop: '20px'
+    },
+    circularProgress: {
+      marginTop: '10px'
+    },
+    table: {
+      marginTop: '20px'
+    },
+    errorTitle: {
+      color: theme.palette.error.main
+    }
+  }
 
   const sasContext = useContext(SASContext)
 
@@ -121,14 +120,14 @@ export default function FileUploaderComponent() {
   }
 
   return (
-    <div className={classes.pageLayout}>
+    <div style={styles.pageLayout}>
       <h1>This is a template file uploader component</h1>
       <p>
         You can use it to upload a local file to a directory on your Viya server
       </p>
 
       <TextField
-        className={classes.input}
+        style={styles.input}
         id="uploadPath"
         variant="outlined"
         label="Where to upload"
@@ -137,7 +136,7 @@ export default function FileUploaderComponent() {
         onChange={handleChange}
       />
       <TextField
-        className={classes.input}
+        style={styles.input}
         id="myFile"
         variant="outlined"
         type="file"
@@ -149,18 +148,18 @@ export default function FileUploaderComponent() {
       <Button
         variant="contained"
         color="primary"
-        className={classes.uploadButton}
+        style={styles.uploadButton}
         disabled={uploadDisabled}
         onClick={handleUpload}
       >
         Upload
       </Button>
       {isUploading ? (
-        <CircularProgress className={classes.circularProgress} />
+        <CircularProgress style={styles.circularProgress} />
       ) : null}
 
       {dirList && dirList.length > 0 && !isUploading ? (
-        <TableContainer component={Paper} className={classes.table}>
+        <TableContainer component={Paper} style={styles.table}>
           <Table aria-label="simple table">
             <TableHead>
               <TableRow>

src/components/home-page.component.tsx

@@ -1,34 +1,34 @@
+import { useTheme } from '@mui/material/styles'
 import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-
-const useStyles = makeStyles((theme) => ({
-  homePage: {
-    padding: '16px',
-    color: '#1c1c1c',
-    display: 'flex',
-    flexDirection: 'column' as 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  code: {
-    fontFamily: 'Monaco, Courier, monospace',
-    border: '1px solid #d9d9d9',
-    padding: '5px',
-    borderRadius: '3px',
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.secondary.main,
-    fontWeight: 'bold'
-  },
-  sasjsLink: {
-    marginLeft: '5px'
-  }
-}))
 
 const HomePageComponent = () => {
-  const classes = useStyles()
+  const theme = useTheme()
+
+  const styles = {
+    homePage: {
+      padding: '16px',
+      color: '#1c1c1c',
+      display: 'flex',
+      flexDirection: 'column' as 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    code: {
+      fontFamily: 'Monaco, Courier, monospace',
+      border: '1px solid #d9d9d9',
+      padding: '5px',
+      borderRadius: '3px',
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.secondary.main,
+      fontWeight: 'bold'
+    },
+    sasjsLink: {
+      marginLeft: '5px'
+    }
+  }
 
   return (
-    <div className={classes.homePage}>
+    <div style={styles.homePage}>
       <h1>
         Hello!{' '}
         <span role="img" aria-label="wave">
@@ -37,12 +37,12 @@ const HomePageComponent = () => {
       </h1>
       <h3>
         Welcome to the React Seed App for{' '}
-        <span className={classes.code}>SASjs</span>.
+        <span style={styles.code}>SASjs</span>.
       </h3>
       <div>
         App Source Code:{' '}
         <a
-          className={classes.sasjsLink}
+          style={styles.sasjsLink}
           target="_blank"
           rel="noopener noreferrer"
           href="https://github.com/sasjs/react-seed-app"
@@ -52,9 +52,9 @@ const HomePageComponent = () => {
       </div>
       <br />
       <div>
-        <span className={classes.code}>SASjs</span> Source Code:
+        <span style={styles.code}>SASjs</span> Source Code:
         <a
-          className={classes.sasjsLink}
+          style={styles.sasjsLink}
           target="_blank"
           rel="noopener noreferrer"
           href="https://github.com/sasjs"
@@ -64,9 +64,9 @@ const HomePageComponent = () => {
       </div>
       <br />
       <div>
-        <span className={classes.code}>SASjs</span> on NPM:
+        <span style={styles.code}>SASjs</span> on NPM:
         <a
-          className={classes.sasjsLink}
+          style={styles.sasjsLink}
           target="_blank"
           rel="noopener noreferrer"
           href="https://www.npmjs.com/package/@sasjs/adapter"