app: remove MUI dependency, use diagram components

src/app/App.tsx

@@ -14,8 +14,6 @@ import {
 } from '@firebase/auth';
 
 import { useLocation, Route, RouteComponentProps, Switch, Redirect } from 'wouter';
-import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 
 import { defined } from '@system-dynamics/core/common';
 import { HostedWebEditor } from '@system-dynamics/diagram/HostedWebEditor';
@@ -40,13 +38,6 @@ interface EditorMatchParams {
   readonly [paramName: string | number]: string | undefined;
 }
 
-const theme = createTheme({
-  palette: {
-    /* primary: purple,
-     * secondary: green, */
-  },
-});
-
 class UserInfoSingleton {
   private resultPromise?: Promise<[User | undefined, number]>;
   private result?: [User | undefined, number];
@@ -253,7 +244,6 @@ class InnerApp extends React.PureComponent<{}, AppState> {
 
     return (
       <React.Fragment>
-        <CssBaseline />
         <Switch>
           <div className={styles.inner}>
             <Route path="/" component={this.home} />
@@ -270,11 +260,7 @@ export class App extends React.PureComponent {
   render(): React.JSX.Element {
     return (
       <React.StrictMode>
-        <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            <InnerApp />
-          </ThemeProvider>
-        </StyledEngineProvider>
+        <InnerApp />
       </React.StrictMode>
     );
   }

src/app/Home.module.css

@@ -66,3 +66,10 @@
 
 .newProjectForm {
 }
+
+.centeredFlex {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}

src/app/Home.tsx

@@ -6,28 +6,29 @@ import * as React from 'react';
 
 import { Link } from 'wouter';
 import clsx from 'clsx';
-import AppBar from '@mui/material/AppBar';
-import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Paper from '@mui/material/Paper';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Avatar from '@mui/material/Avatar';
 import { List } from 'immutable';
-import { PopoverOrigin } from '@mui/material/Popover';
-import AccountCircle from '@mui/icons-material/AccountCircle';
-import MenuIcon from '@mui/icons-material/Menu';
+
+import {
+  AppBar,
+  Button,
+  ImageList,
+  ImageListItem,
+  IconButton,
+  Menu,
+  MenuItem,
+  Paper,
+  Toolbar,
+  Avatar,
+  AccountCircleIcon,
+  MenuIcon,
+} from '@system-dynamics/diagram';
 
 import { NewProject } from './NewProject';
 import { Project } from './Project';
 import { User } from './User';
 
 import styles from './Home.module.css';
+import typography from './typography.module.css';
 
 interface HomeState {
   anchorEl?: HTMLElement;
@@ -40,9 +41,9 @@ interface HomeProps {
   onNewProjectDone?: () => void;
 }
 
-const AnchorOrigin: PopoverOrigin = {
-  vertical: 'bottom',
-  horizontal: 'right',
+const AnchorOrigin = {
+  vertical: 'bottom' as const,
+  horizontal: 'right' as const,
 };
 
 class Home extends React.Component<HomeProps, HomeState> {
@@ -97,11 +98,11 @@ class Home extends React.Component<HomeProps, HomeState> {
   newProjectForm() {
     return (
       <div className={styles.newProjectForm}>
-        <Grid container direction="row" justifyContent="center" alignItems="center">
-          <Grid item>
+        <div className={styles.centeredFlex}>
+          <div>
             <NewProject user={this.props.user} onProjectCreated={this.handleProjectCreated} />
-          </Grid>
-        </Grid>
+          </div>
+        </div>
       </div>
     );
   }
@@ -118,10 +119,8 @@ class Home extends React.Component<HomeProps, HomeState> {
                   <div className={styles.preview}>
                     <img src={`/api/preview/${project.id}`} alt="model preview" className={styles.previewImg} />
                   </div>
-                  <Typography variant="h5" component="h3">
-                    {project.displayName}
-                  </Typography>
-                  <Typography component="p">{project.description}&nbsp;</Typography>
+                  <h3 className={typography.heading5}>{project.displayName}</h3>
+                  <p>{project.description}&nbsp;</p>
                 </Paper>
               </Link>
             </ImageListItem>
@@ -139,7 +138,7 @@ class Home extends React.Component<HomeProps, HomeState> {
     const account = photoUrl ? (
       <Avatar alt={this.props.user.displayName} src={photoUrl} className={styles.avatar} />
     ) : (
-      <AccountCircle />
+      <AccountCircleIcon />
     );
 
     const content = this.props.isNewProject ? this.newProjectForm() : this.projects();
@@ -151,15 +150,11 @@ class Home extends React.Component<HomeProps, HomeState> {
             <IconButton className={styles.menuButton} color="inherit" aria-label="Menu">
               <MenuIcon />
             </IconButton>
-            <Typography variant="h6" color="inherit" className={styles.flex}>
+            <h6 className={clsx(typography.heading6, typography.colorInherit, styles.flex)}>
               <Link to="/" className={styles.modelLink}>
                 Simlin
               </Link>
-              {/*&nbsp;*/}
-              {/*<span className={classes.sdTitle}>*/}
-              {/*  System Dynamics*/}
-              {/*</span>*/}
-            </Typography>
+            </h6>
             <div>
               <Link to="/new" className={styles.modelLink}>
                 <Button variant="outlined" className={styles.newProjectButton}>
@@ -178,7 +173,7 @@ class Home extends React.Component<HomeProps, HomeState> {
               </IconButton>
               <Menu
                 id="menu-appbar"
-                anchorEl={anchorEl}
+                anchorEl={anchorEl ?? null}
                 anchorOrigin={AnchorOrigin}
                 transformOrigin={AnchorOrigin}
                 open={open}

src/app/Login.tsx

@@ -16,19 +16,22 @@ import {
   signInWithEmailAndPassword,
 } from '@firebase/auth';
 import clsx from 'clsx';
-import AppleIcon from '@mui/icons-material/Apple';
-import EmailIcon from '@mui/icons-material/Email';
-import Button from '@mui/material/Button';
-import SvgIcon from '@mui/material/SvgIcon';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-import TextField from '@mui/material/TextField';
 
+import {
+  AppleIcon,
+  EmailIcon,
+  Button,
+  SvgIcon,
+  Card,
+  CardActions,
+  CardContent,
+  TextLink,
+  TextField,
+} from '@system-dynamics/diagram';
 import { ModelIcon } from '@system-dynamics/diagram/ModelIcon';
 
+import typography from './typography.module.css';
+
 import styles from './Login.module.css';
 
 type EmailLoginStates = 'showEmail' | 'showPassword' | 'showSignup' | 'showProviderRedirect' | 'showRecover';
@@ -161,13 +164,13 @@ export class Login extends React.Component<LoginProps, LoginState> {
 
     const fullName = this.state.fullName.trim();
     if (!fullName) {
-      this.setState({ emailError: 'Enter your email address to continue' });
+      this.setState({ fullNameError: 'Enter your name to continue' });
       return;
     }
 
     const password = this.state.password.trim();
     if (!password) {
-      this.setState({ passwordError: 'Enter your email address to continue' });
+      this.setState({ passwordError: 'Enter a password to continue' });
       return;
     }
 
@@ -220,12 +223,14 @@ export class Login extends React.Component<LoginProps, LoginState> {
       switch (this.state.emailLoginFlow) {
         case 'showEmail':
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Sign in with email
-                  </Typography>
+                  <h6 className={typography.heading6}>Sign in with email</h6>
                   <TextField
                     label="Email"
                     value={this.state.email}
@@ -240,7 +245,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
                   />
                 </CardContent>
                 <CardActions>
-                  <Button sx={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
+                  <Button style={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
                     Cancel
                   </Button>
                   <Button type="submit" variant="contained" onClick={this.onSubmitEmail}>
@@ -253,12 +258,14 @@ export class Login extends React.Component<LoginProps, LoginState> {
           break;
         case 'showPassword':
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Sign in
-                  </Typography>
+                  <h6 className={typography.heading6}>Sign in</h6>
                   <TextField
                     label="Email"
                     value={this.state.email}
@@ -285,11 +292,11 @@ export class Login extends React.Component<LoginProps, LoginState> {
                   />
                 </CardContent>
                 <CardActions>
-                  <Typography sx={{ marginRight: 'auto' }} variant="body2">
-                    <Link sx={{ cursor: 'help' }} underline="hover" onClick={this.onEmailHelp}>
+                  <span className={typography.body2} style={{ marginRight: 'auto' }}>
+                    <TextLink style={{ cursor: 'help' }} underline="hover" onClick={this.onEmailHelp}>
                       Trouble signing in?
-                    </Link>
-                  </Typography>
+                    </TextLink>
+                  </span>
                   <Button type="submit" variant="contained" onClick={this.onEmailLogin}>
                     Sign in
                   </Button>
@@ -300,12 +307,14 @@ export class Login extends React.Component<LoginProps, LoginState> {
           break;
         case 'showSignup':
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Create account
-                  </Typography>
+                  <h6 className={typography.heading6}>Create account</h6>
                   <TextField
                     label="Email"
                     value={this.state.email}
@@ -342,7 +351,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
                   />
                 </CardContent>
                 <CardActions>
-                  <Button sx={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
+                  <Button style={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
                     Cancel
                   </Button>
                   <Button type="submit" variant="contained" onClick={this.onSubmitNewUser}>
@@ -356,20 +365,22 @@ export class Login extends React.Component<LoginProps, LoginState> {
         case 'showProviderRedirect':
           const provider = this.state.provider === 'google.com' ? 'Google' : 'Apple';
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Sign in - you already have an account
-                  </Typography>
-                  <Typography className={styles.recoverInstructions}>
+                  <h6 className={typography.heading6}>Sign in - you already have an account</h6>
+                  <p className={styles.recoverInstructions}>
                     You've already used {provider} to sign up with <b>{this.state.email}</b>. Sign in with {provider} to
                     continue.
-                  </Typography>
+                  </p>
                 </CardContent>
                 <CardActions>
                   <Button
-                    sx={{ marginLeft: 'auto' }}
+                    style={{ marginLeft: 'auto' }}
                     type="submit"
                     variant="contained"
                     onClick={this.state.provider === 'google.com' ? this.googleLoginClick : this.appleLoginClick}
@@ -383,15 +394,17 @@ export class Login extends React.Component<LoginProps, LoginState> {
           break;
         case 'showRecover':
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Recover password
-                  </Typography>
-                  <Typography className={styles.recoverInstructions}>
+                  <h6 className={typography.heading6}>Recover password</h6>
+                  <p className={styles.recoverInstructions}>
                     Get instructions sent to this email that explain how to reset your password
-                  </Typography>
+                  </p>
                   <TextField
                     label="Email"
                     value={this.state.email}
@@ -406,7 +419,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
                   />
                 </CardContent>
                 <CardActions>
-                  <Button sx={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
+                  <Button style={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
                     Cancel
                   </Button>
                   <Button type="submit" variant="contained" onClick={this.onSubmitRecovery}>
@@ -422,7 +435,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
             <div className={styles.optionsButtons}>
               <Button
                 variant="contained"
-                sx={{ backgroundColor: 'black' }}
+                style={{ backgroundColor: 'black' }}
                 startIcon={<AppleIcon />}
                 onClick={this.appleLoginClick}
               >
@@ -435,7 +448,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
               <br />
               <Button
                 variant="contained"
-                sx={{ backgroundColor: '#db4437' }}
+                style={{ backgroundColor: '#db4437' }}
                 startIcon={<EmailIcon />}
                 onClick={this.emailLoginClick}
               >