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>
  );
 }