upgrade to MUI v5

Makefile

@@ -6,8 +6,6 @@ init:
 	mkdir -p static/app/css
 
 wq.js: init
-	cd packages/material-web && npm run rollup
-	cd ../../
 	npm run rollup -- -c
 	cp -p packages/app/css/wq.css static/app/css/wq.css
 	cp -p node_modules/mapbox-gl/dist/mapbox-gl.css static/app/css/mapbox-gl.css

package.json

@@ -1,5 +1,6 @@
 {
     "name": "wq.app",
+    "type": "module",
     "scripts": {
         "test": "npm test --workspaces",
         "build": "npm run build --workspaces --if-present",

packages/material-web/.gitignore

@@ -4,6 +4,4 @@
 /hooks.js
 /components/
 /inputs/
-/vendor/
-/src/vendor/
 /__tests__/

packages/material-web/package.json

@@ -7,7 +7,6 @@
     "scripts": {
         "test": "cd ../../ && npm run jest packages/material-web",
         "build": "npm run babel && npm run prettier",
-        "rollup": "cd ../../ && npm run rollup -- -c packages/material-web/rollup.config.js",
         "babel": "cd ../../ && npm run babel -- packages/material-web/src --out-dir packages/material-web/",
         "prettier": "cd ../../ && npm run prettier -- --write packages/material-web/",
         "lint": "cd ../../ && npm run eslint packages/material-web/{,src/,src/*/,src/*/*/}*.js"
@@ -30,9 +29,14 @@
     },
     "homepage": "https://wq.io/@wq/material",
     "dependencies": {
-        "@date-io/date-fns": "^2.16.0",
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
+        "@mui/icons-material": "^5.11.0",
+        "@mui/material": "^5.11.5",
         "@wq/react": "file:../react",
-        "date-fns": "^2.29.3"
+        "formik-mui": "^5.0.0-alpha.0",
+        "formik-mui-x-date-pickers": "^0.0.1",
+        "mui-file-dropzone": "^4.0.2"
     },
     "devDependencies": {
         "@wq/model": "^1.3.0",

packages/material-web/src/App.js

@@ -1,8 +1,10 @@
 import React, { useMemo } from "react";
 import { App as DefaultApp, usePlugin } from "@wq/react";
-import { ThemeProvider } from "@material-ui/styles";
-import { createMuiTheme } from "@material-ui/core/styles";
-import CssBaseline from "@material-ui/core/CssBaseline";
+import {
+    createTheme as createMuiTheme,
+    ThemeProvider,
+} from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
 
 export default function App() {
     const { theme } = usePlugin("material").config,
@@ -19,7 +21,7 @@ function createTheme(theme) {
     const { type, primary, secondary, background } = theme;
     const palette = theme.palette || {};
     if (type) {
-        palette.type = type;
+        palette.mode = type;
     }
     if (primary) {
         palette.primary = { main: primary };

packages/material-web/src/components/Accordion.js

@@ -0,0 +1,36 @@
+import React from "react";
+import MuiAccordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import PropTypes from "prop-types";
+
+export default function Accordion({
+    summary,
+    children,
+    open,
+    onToggle,
+    ...rest
+}) {
+    let handleToggle;
+    if (onToggle) {
+        handleToggle = (evt, state) => onToggle(state);
+    }
+    return (
+        <MuiAccordion expanded={open} onChange={handleToggle} {...rest}>
+            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                {summary}
+            </AccordionSummary>
+            <AccordionDetails>
+                <div style={{ flex: 1 }}>{children}</div>
+            </AccordionDetails>
+        </MuiAccordion>
+    );
+}
+
+Accordion.propTypes = {
+    summary: PropTypes.node,
+    children: PropTypes.node,
+    open: PropTypes.bool,
+    onToggle: PropTypes.func,
+};

packages/material-web/src/components/Breadcrumbs.js

@@ -1,24 +1,14 @@
 import React from "react";
+import Paper from "@mui/material/Paper";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 
-import Paper from "@material-ui/core/Paper";
-import MuiBreadcrumbs from "@material-ui/core/Breadcrumbs";
-import NavigateNextIcon from "@material-ui/icons/NavigateNext";
-
-import { makeStyles } from "@material-ui/core/styles";
 import { useReverse, useComponents } from "@wq/react";
 
 import PropTypes from "prop-types";
 
-const useStyles = makeStyles((theme) => ({
-    breadcrumbs: {
-        padding: theme.spacing(1, 0),
-        borderBottom: `1px solid ${theme.palette.divider}`,
-    },
-}));
-
 export default function Breadcrumbs({ links }) {
     const reverse = useReverse(),
-        classes = useStyles(),
         { ButtonLink, HomeLink } = useComponents();
 
     if (!links) {
@@ -29,7 +19,14 @@ export default function Breadcrumbs({ links }) {
     links[links.length - 1].active = true;
 
     return (
-        <Paper elevation={0} className={classes.breadcrumbs} square>
+        <Paper
+            elevation={0}
+            square
+            sx={{
+                py: 1,
+                borderBottomColor: "divider",
+            }}
+        >
             <MuiBreadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
                 <HomeLink
                     to={links[0].url}

packages/material-web/src/components/Button.js

@@ -1,5 +1,5 @@
 import React from "react";
-import MuiButton from "@material-ui/core/Button";
+import MuiButton from "@mui/material/Button";
 import { useIcon } from "@wq/react";
 import PropTypes from "prop-types";
 

packages/material-web/src/components/CheckboxButton.js

@@ -1,3 +1,3 @@
-import Checkbox from "@material-ui/core/Checkbox";
+import Checkbox from "@mui/material/Checkbox";
 
 export default Checkbox;

packages/material-web/src/components/Chip.js

@@ -1,5 +1,5 @@
 import React from "react";
-import MuiChip from "@material-ui/core/Chip";
+import MuiChip from "@mui/material/Chip";
 import { useIcon } from "@wq/react";
 import PropTypes from "prop-types";
 

packages/material-web/src/components/Container.js

@@ -1,18 +1,19 @@
 import React from "react";
+import Box from "@mui/material/Box";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
-
-const useStyles = makeStyles(() => ({
-    container: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100vh",
-    },
-}));
 
 export default function Container({ children }) {
-    const classes = useStyles();
-    return <div className={classes.container}>{children}</div>;
+    return (
+        <Box
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                height: "100vh",
+            }}
+        >
+            {children}
+        </Box>
+    );
 }
 Container.propTypes = {
     children: PropTypes.node,

packages/material-web/src/components/Divider.js

@@ -1,3 +1,3 @@
-import Divider from "@material-ui/core/Divider";
+import Divider from "@mui/material/Divider";
 
 export default Divider;

packages/material-web/src/components/ExpandableListItem.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useComponents } from "@wq/react";
-import Collapse from "@material-ui/core/Collapse";
+import Collapse from "@mui/material/Collapse";
 import PropTypes from "prop-types";
 
 export default function ExpandableListItem({

packages/material-web/src/components/Fab.js

@@ -1,5 +1,5 @@
 import React from "react";
-import MuiFab from "@material-ui/core/Fab";
+import MuiFab from "@mui/material/Fab";
 import { Link } from "@wq/react";
 import PropTypes from "prop-types";
 import { useIcon } from "@wq/react";

packages/material-web/src/components/Fieldset.js

@@ -1,20 +1,12 @@
 import React from "react";
-import Card from "@material-ui/core/Card";
-import Typography from "@material-ui/core/Typography";
-import CardContent from "@material-ui/core/CardContent";
-import { makeStyles } from "@material-ui/core/styles";
+import Card from "@mui/material/Card";
+import Typography from "@mui/material/Typography";
+import CardContent from "@mui/material/CardContent";
 import PropTypes from "prop-types";
 
-const useStyles = makeStyles({
-    card: {
-        marginBottom: "1em",
-    },
-});
-
 export default function Fieldset({ label, children }) {
-    const classes = useStyles();
     return (
-        <Card className={classes.card}>
+        <Card sx={{ mb: 2 }}>
             <CardContent>
                 {label && (
                     <Typography color="textSecondary">{label}</Typography>

packages/material-web/src/components/FileArray.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useCallback, useRef } from "react";
 import { useField } from "formik";
-import { DropzoneArea } from "../vendor/material-ui-dropzone.js";
+import { DropzoneArea } from "mui-file-dropzone";
 import Fieldset from "./Fieldset";
 import HelperText from "../inputs/HelperText";
 import PropTypes from "prop-types";

packages/material-web/src/components/FlatFieldset.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 import PropTypes from "prop-types";
 
 export default function FlatFieldset({ label, children }) {

packages/material-web/src/components/FormError.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { useField } from "formik";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import FormHelperText from "@mui/material/FormHelperText";
 
 export default function FormError(props) {
     const [, { error }] = useField("__other__");

packages/material-web/src/components/Header.js

@@ -1,7 +1,7 @@
 import React from "react";
-import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "@material-ui/core/Toolbar";
-import Typography from "@material-ui/core/Typography";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
 import { useSiteTitle, useBreadcrumbs, useComponents } from "@wq/react";
 
 export default function Header() {

packages/material-web/src/components/HomeLink.js

@@ -1,18 +1,10 @@
 import React from "react";
 import { Link } from "@wq/react";
-import Button from "@material-ui/core/Button";
-import HomeIcon from "@material-ui/icons/Home";
-import { makeStyles } from "@material-ui/core/styles";
+import Button from "@mui/material/Button";
+import HomeIcon from "@mui/icons-material/Home";
 import PropTypes from "prop-types";
 
-const useStyles = makeStyles(() => ({
-    icon: {
-        verticalAlign: "middle",
-    },
-}));
-
 export default function HomeLink({ to, label, active, ...rest }) {
-    const styles = useStyles();
     return (
         <Button
             component={Link}
@@ -21,7 +13,7 @@ export default function HomeLink({ to, label, active, ...rest }) {
             aria-label={label}
             {...rest}
         >
-            <HomeIcon className={styles.icon} />
+            <HomeIcon sx={{ verticalAlign: "middle" }} />
         </Button>
     );
 }