Add Material UI demo (#173)

Adds working example with Material UI

src/client/dialog-demo-mui/components/SheetEditor.jsx

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Typography } from '@mui/material';
+
+import FormInput from './FormInput';
+import SheetTable from './SheetTable';
+
+
+// This is a wrapper for google.script.run that lets us use promises.
+import { serverFunctions } from '../../utils/serverFunctions';
+
+const SheetEditor = () => {
+  const [names, setNames] = useState([]);
+
+  useEffect(() => {
+    serverFunctions.getSheetsData().then(setNames).catch(alert);
+  }, []);
+
+  const deleteSheet = (sheetIndex) => {
+    serverFunctions.deleteSheet(sheetIndex).then(setNames).catch(alert);
+  };
+
+  const setActiveSheet = (sheetName) => {
+    serverFunctions.setActiveSheet(sheetName).then(setNames).catch(alert);
+  };
+
+  const submitNewSheet = async (newSheetName) => {
+    try {
+      const response = await serverFunctions.addSheet(newSheetName);
+      setNames(response);
+    } catch (error) {
+      // eslint-disable-next-line no-alert
+      alert(error);
+    }
+  };
+
+  return (
+    <div style={{ padding: '3px', overflowX: 'hidden' }}>
+      <Typography variant="h4" gutterBottom>
+        ☀️ MUI demo! ☀️
+      </Typography>
+
+      <Typography variant="body1" gutterBottom sx={{ marginBottom: '30px' }}>
+        This is a sample app that uses the <code>mui</code> library
+        to help us build a simple React app. Enter a name for a new sheet, hit
+        enter and the new sheet will be created. Click the red button next to the sheet name to
+        delete it.
+      </Typography>
+      <FormInput submitNewSheet={submitNewSheet} />
+
+      {names.length > 0 &&
+        <SheetTable rows={names.map((name) => {
+          return {
+            sheetName: name.name,
+            goToButton: <Button
+              variant="outlined"
+              disabled={name?.isActive}
+              onClick={() => setActiveSheet(name.name)}
+            >Go To Sheet</Button>,
+            deleteButton: <Button
+              variant="contained"
+              color="error"
+              onClick={() => deleteSheet(name.index)}
+            >Delete</Button>
+          }
+        })} />}
+    </div>
+  );
+};
+
+export default SheetEditor;