From 8716649be70018f1af3d09c01587255ed36f5c77 Mon Sep 17 00:00:00 2001 From: fbruc03 <65135023+fbruc03@users.noreply.github.com> Date: Sun, 4 Dec 2022 22:05:35 +0100 Subject: [PATCH] migrateMUI next: Restructure component definitions --- package.json | 7 ++- src/App.js | 22 ++++---- src/components/Alert.js | 6 +-- src/components/Blockly/BlocklyComponent.jsx | 2 +- src/components/Breadcrumbs.js | 6 +-- src/components/CodeEditor/CodeEditor.js | 6 +-- src/components/CodeEditor/Compile.js | 18 +++---- src/components/CodeEditor/SaveIcon.js | 2 +- src/components/CodeEditor/SerialMonitor.js | 2 +- src/components/CodeEditor/Sidebar.js | 10 ++-- src/components/CodeViewer.js | 14 ++--- src/components/DeviceSelection.js | 8 +-- src/components/Dialog.js | 10 ++-- src/components/Faq.js | 24 ++++----- src/components/Footer.js | 2 +- src/components/Home.js | 10 ++-- src/components/Impressum.js | 2 +- src/components/MaxBlocks.js | 8 +-- src/components/Navbar.js | 34 ++++++------ src/components/News.js | 6 +-- src/components/NotFound.js | 4 +- src/components/Privacy.js | 2 +- src/components/Project/Project.js | 4 +- src/components/Project/ProjectHome.js | 14 ++--- src/components/SensorInfo.js | 10 ++-- src/components/Settings/DeviceSelector.js | 20 +++---- src/components/Settings/LanguageSelector.js | 20 +++---- src/components/Settings/OtaSelector.js | 18 +++---- src/components/Settings/RenderSelector.js | 18 +++---- src/components/Settings/Settings.js | 4 +- src/components/Settings/SoundsSelector.js | 18 +++---- src/components/Settings/StatsSelector.js | 18 +++---- src/components/Snackbar.js | 10 ++-- src/components/TooltipViewer.js | 18 ++++--- src/components/Tutorial/Assessment.js | 25 +++++---- .../Tutorial/Builder/BlocklyExample.js | 14 ++--- src/components/Tutorial/Builder/Builder.js | 30 +++++------ src/components/Tutorial/Builder/Difficulty.js | 12 ++--- src/components/Tutorial/Builder/Hardware.js | 17 +++--- src/components/Tutorial/Builder/Id.js | 12 ++--- .../Tutorial/Builder/MarkdownEditor.js | 2 +- src/components/Tutorial/Builder/Media.js | 14 ++--- src/components/Tutorial/Builder/Public.js | 14 ++--- .../Tutorial/Builder/Requirements.js | 16 +++--- src/components/Tutorial/Builder/Review.js | 14 ++--- src/components/Tutorial/Builder/Step.js | 16 +++--- src/components/Tutorial/Builder/StepType.js | 6 +-- src/components/Tutorial/Builder/Textfield.js | 10 ++-- src/components/Tutorial/Hardware.js | 24 +++++---- src/components/Tutorial/HintTutorialExists.js | 6 +-- src/components/Tutorial/Instruction.js | 4 +- src/components/Tutorial/Requirement.js | 10 ++-- src/components/Tutorial/SolutionCheck.js | 10 ++-- src/components/Tutorial/StepperHorizontal.js | 10 ++-- src/components/Tutorial/StepperVertical.js | 12 ++--- src/components/Tutorial/Tutorial.js | 4 +- src/components/Tutorial/TutorialHome.js | 22 ++++---- src/components/User/Account.js | 44 +++++++++++----- src/components/User/Login.js | 30 +++++------ src/components/Workspace/Compile.js | 18 +++---- src/components/Workspace/CopyCode.js | 10 ++-- src/components/Workspace/DeleteProject.js | 8 +-- src/components/Workspace/DownloadProject.js | 8 +-- src/components/Workspace/OpenProject.js | 4 +- src/components/Workspace/ResetWorkspace.js | 10 ++-- src/components/Workspace/SaveProject.js | 26 ++++++---- src/components/Workspace/Screenshot.js | 8 +-- src/components/Workspace/ShareProject.js | 14 ++--- src/components/Workspace/TrashcanButtons.js | 52 +++++++++---------- src/components/Workspace/WorkspaceName.js | 27 +++++----- src/components/Workspace/WorkspaceStats.js | 19 ++++--- 71 files changed, 505 insertions(+), 454 deletions(-) diff --git a/package.json b/package.json index a350d05..0c717c1 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,17 @@ "@blockly/plugin-typed-variable-modal": "^4.0.5", "@blockly/workspace-backpack": "^2.0.12", "@blockly/zoom-to-fit": "^2.0.14", + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.19", "@material-ui/core": "^4.12.4", "@material-ui/lab": "^4.0.0-alpha.61", "@monaco-editor/react": "^4.3.1", + "@mui/lab": "^5.0.0-alpha.110", + "@mui/material": "^5.10.16", + "@mui/styles": "^5.10.16", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^7.2.1", @@ -36,7 +41,7 @@ "react-rating-stars-component": "^2.2.0", "react-redux": "^7.2.9", "react-router-dom": "^5.3.3", - "react-scripts": "^5.0.0", + "react-scripts": "^5.0.1", "react-share": "^4.4.0", "react-spinners": "^0.13.3", "reactour": "^1.18.7", diff --git a/src/App.js b/src/App.js index 29289e5..06bca0b 100644 --- a/src/App.js +++ b/src/App.js @@ -9,11 +9,11 @@ import { loadUser } from "./actions/authActions"; import "./App.css"; -import { ThemeProvider, createTheme } from "@material-ui/core/styles"; +import { ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme } from "@mui/material/styles"; import Content from "./components/Content"; -const theme = createTheme({ +const theme = createTheme(adaptV4Theme({ palette: { primary: { main: "#4EAF47", @@ -26,7 +26,7 @@ const theme = createTheme({ compile: "#e27136", }, }, -}); +})); class App extends Component { componentDidMount() { @@ -36,13 +36,15 @@ class App extends Component { render() { const customHistory = createBrowserHistory(); return ( - - - - - - - + + + + + + + + + ); } } diff --git a/src/components/Alert.js b/src/components/Alert.js index 01bac66..2d24b17 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -1,9 +1,9 @@ import React, { Component } from "react"; -import { withStyles } from "@material-ui/core/styles"; -import { alpha } from "@material-ui/core/styles"; +import withStyles from '@mui/styles/withStyles'; +import { alpha } from "@mui/material/styles"; -import Typography from "@material-ui/core/Typography"; +import Typography from "@mui/material/Typography"; const styles = (theme) => ({ alert: { diff --git a/src/components/Blockly/BlocklyComponent.jsx b/src/components/Blockly/BlocklyComponent.jsx index 20c0795..ec97078 100644 --- a/src/components/Blockly/BlocklyComponent.jsx +++ b/src/components/Blockly/BlocklyComponent.jsx @@ -27,7 +27,7 @@ import Blockly from "blockly/core"; import "blockly/blocks"; import Toolbox from "./toolbox/Toolbox"; -import { Card } from "@material-ui/core"; +import { Card } from "@mui/material"; import { ScrollOptions, ScrollBlockDragger, diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js index dc0af20..6246e13 100644 --- a/src/components/Breadcrumbs.js +++ b/src/components/Breadcrumbs.js @@ -3,9 +3,9 @@ import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import clsx from 'clsx'; -import { withStyles } from '@material-ui/core/styles'; -import MaterialUIBreadcrumbs from '@material-ui/core/Breadcrumbs'; -import Typography from '@material-ui/core/Typography'; +import withStyles from '@mui/styles/withStyles'; +import MaterialUIBreadcrumbs from '@mui/material/Breadcrumbs'; +import Typography from '@mui/material/Typography'; import { faHome } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index 7741b20..c8eb0f8 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -2,11 +2,11 @@ import React from "react"; import { useState, useRef } from "react"; import { default as MonacoEditor } from "@monaco-editor/react"; import { withRouter } from "react-router-dom"; -import { Button, Grid } from "@material-ui/core"; +import { Button, Grid } from "@mui/material"; import Blockly from "blockly/core"; -import Divider from "@material-ui/core/Divider"; +import Divider from "@mui/material/Divider"; import { saveAs } from "file-saver"; -import Drawer from "@material-ui/core/Drawer"; +import Drawer from "@mui/material/Drawer"; import Sidebar from "./Sidebar"; import Dialog from "../Dialog"; import SaveIcon from "./SaveIcon"; diff --git a/src/components/CodeEditor/Compile.js b/src/components/CodeEditor/Compile.js index 26a9d4b..898f311 100644 --- a/src/components/CodeEditor/Compile.js +++ b/src/components/CodeEditor/Compile.js @@ -5,19 +5,19 @@ import { workspaceName } from "../../actions/workspaceActions"; import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace"; -import { withStyles } from "@material-ui/core/styles"; -import Button from "@material-ui/core/Button"; -import Backdrop from "@material-ui/core/Backdrop"; -import CircularProgress from "@material-ui/core/CircularProgress"; -import IconButton from "@material-ui/core/IconButton"; -import Tooltip from "@material-ui/core/Tooltip"; -import Divider from "@material-ui/core/Divider"; +import withStyles from '@mui/styles/withStyles'; +import Button from "@mui/material/Button"; +import Backdrop from "@mui/material/Backdrop"; +import CircularProgress from "@mui/material/CircularProgress"; +import IconButton from "@mui/material/IconButton"; +import Tooltip from "@mui/material/Tooltip"; +import Divider from "@mui/material/Divider"; import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Blockly from "blockly/core"; import Copy from "../copy.svg"; -import MuiDrawer from "@material-ui/core/Drawer"; +import MuiDrawer from "@mui/material/Drawer"; import Dialog from "../Dialog"; const styles = (theme) => ({ @@ -188,7 +188,7 @@ class Compile extends Component { this.compile()} - > + size="large"> diff --git a/src/components/CodeEditor/SaveIcon.js b/src/components/CodeEditor/SaveIcon.js index c776485..3c4ec71 100644 --- a/src/components/CodeEditor/SaveIcon.js +++ b/src/components/CodeEditor/SaveIcon.js @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCircleNotch, faSave } from "@fortawesome/free-solid-svg-icons"; -import Tooltip from "@material-ui/core/Tooltip"; +import Tooltip from "@mui/material/Tooltip"; import React from "react"; const SaveIcon = ({ loading }) => ( diff --git a/src/components/CodeEditor/SerialMonitor.js b/src/components/CodeEditor/SerialMonitor.js index 0636301..c9cb471 100644 --- a/src/components/CodeEditor/SerialMonitor.js +++ b/src/components/CodeEditor/SerialMonitor.js @@ -1,5 +1,5 @@ import { useState } from "react"; -import Button from "@material-ui/core/Button"; +import Button from "@mui/material/Button"; const SerialMonitor = () => { const [serialPortContent, setSerialPortContent] = useState([]); diff --git a/src/components/CodeEditor/Sidebar.js b/src/components/CodeEditor/Sidebar.js index 5e2b976..d170054 100644 --- a/src/components/CodeEditor/Sidebar.js +++ b/src/components/CodeEditor/Sidebar.js @@ -1,13 +1,13 @@ import React from "react"; import Blockly from "blockly"; import { useSelector } from "react-redux"; -import Accordion from "@material-ui/core/Accordion"; -import AccordionSummary from "@material-ui/core/AccordionSummary"; -import AccordionDetails from "@material-ui/core/AccordionDetails"; -import Typography from "@material-ui/core/Typography"; +import Accordion from "@mui/material/Accordion"; +import AccordionSummary from "@mui/material/AccordionSummary"; +import AccordionDetails from "@mui/material/AccordionDetails"; +import Typography from "@mui/material/Typography"; import { LibraryVersions } from "../../data/versions.js"; import { useMonaco } from "@monaco-editor/react"; -import { Button } from "@material-ui/core"; +import { Button } from "@mui/material"; import SerialMonitor from "./SerialMonitor.js"; import axios from "axios"; diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js index e7506ac..e1a3f74 100644 --- a/src/components/CodeViewer.js +++ b/src/components/CodeViewer.js @@ -2,15 +2,17 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; -import withWidth from "@material-ui/core/withWidth"; -import { withStyles } from "@material-ui/core/styles"; -import MuiAccordion from "@material-ui/core/Accordion"; -import MuiAccordionSummary from "@material-ui/core/AccordionSummary"; -import MuiAccordionDetails from "@material-ui/core/AccordionDetails"; -import { Card } from "@material-ui/core"; +import withStyles from '@mui/styles/withStyles'; +import MuiAccordion from "@mui/material/Accordion"; +import MuiAccordionSummary from "@mui/material/AccordionSummary"; +import MuiAccordionDetails from "@mui/material/AccordionDetails"; +import { Card } from "@mui/material"; import * as Blockly from "blockly"; import { default as MonacoEditor } from "@monaco-editor/react"; +// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth +const withWidth = () => (WrappedComponent) => (props) => ; + const Accordion = withStyles((theme) => ({ root: { border: `1px solid ${theme.palette.secondary.main}`, diff --git a/src/components/DeviceSelection.js b/src/components/DeviceSelection.js index 4645c0f..d096d66 100644 --- a/src/components/DeviceSelection.js +++ b/src/components/DeviceSelection.js @@ -3,9 +3,9 @@ import PropTypes from "prop-types"; import { connect } from "react-redux"; import Dialog from "./Dialog"; -import { withStyles } from "@material-ui/core/styles"; +import withStyles from '@mui/styles/withStyles'; import * as Blockly from "blockly"; -import { IconButton, Grid, Avatar, Typography } from "@material-ui/core"; +import { IconButton, Grid, Avatar, Typography } from "@mui/material"; import { setBoard } from "../actions/boardAction"; const styles = (theme) => ({ @@ -67,7 +67,7 @@ class DeviceSeclection extends Component {
- this.onclick(e, "mcu")}> + this.onclick(e, "mcu")} size="large"> Sensebox ESP

 */} - this.onclick(e, "mini")}> + this.onclick(e, "mini")} size="large"> FAQ {FaqQuestions().map((object, i) => { return ( - this.handleChange(`panel${i}`)} > - } > {object.question} - - + + - - + + ); })} {this.props.button ? ( diff --git a/src/components/Footer.js b/src/components/Footer.js index 2ee892d..1052297 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { Link } from 'react-router-dom'; -import Typography from '@material-ui/core/Typography'; +import Typography from '@mui/material/Typography'; class Footer extends Component { render() { diff --git a/src/components/Home.js b/src/components/Home.js index 13a4661..7f8e1d9 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -14,10 +14,10 @@ import TrashcanButtons from "./Workspace/TrashcanButtons"; // import HintTutorialExists from "./Tutorial/HintTutorialExists"; import DeviceSelection from "./DeviceSelection"; -import Grid from "@material-ui/core/Grid"; -import IconButton from "@material-ui/core/IconButton"; -import Tooltip from "@material-ui/core/Tooltip"; -import { withStyles } from "@material-ui/core/styles"; +import Grid from "@mui/material/Grid"; +import IconButton from "@mui/material/IconButton"; +import Tooltip from "@mui/material/Tooltip"; +import withStyles from '@mui/styles/withStyles'; import { faCode } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -160,7 +160,7 @@ class Home extends Component { zIndex: 21, }} onClick={() => this.onChange()} - > + size="large"> diff --git a/src/components/Impressum.js b/src/components/Impressum.js index 01388c7..1fc6caa 100644 --- a/src/components/Impressum.js +++ b/src/components/Impressum.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import { withRouter } from "react-router-dom"; -import Container from "@material-ui/core/Container"; +import Container from "@mui/material/Container"; class Impressum extends Component { render() { return ( diff --git a/src/components/MaxBlocks.js b/src/components/MaxBlocks.js index bf4981a..586dcd1 100644 --- a/src/components/MaxBlocks.js +++ b/src/components/MaxBlocks.js @@ -5,8 +5,8 @@ import { workspaceChange } from '../actions/workspaceActions'; import * as Blockly from 'blockly/core'; -import TextField from '@material-ui/core/TextField'; -import Button from '@material-ui/core/Button'; +import TextField from '@mui/material/TextField'; +import Button from '@mui/material/Button'; class MaxBlocks extends Component { @@ -28,12 +28,12 @@ class MaxBlocks extends Component { return (
+ value={this.state.max} /> diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 7d054db..5e0bef6 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -8,20 +8,20 @@ import senseboxLogo from "./sensebox_logo.svg"; import { withRouter } from "react-router-dom"; -import { withStyles } from "@material-ui/core/styles"; -import Drawer from "@material-ui/core/Drawer"; -import AppBar from "@material-ui/core/AppBar"; -import Toolbar from "@material-ui/core/Toolbar"; -import List from "@material-ui/core/List"; -import Typography from "@material-ui/core/Typography"; -import Divider from "@material-ui/core/Divider"; -import IconButton from "@material-ui/core/IconButton"; -import ListItem from "@material-ui/core/ListItem"; -import ListItemIcon from "@material-ui/core/ListItemIcon"; -import ListItemText from "@material-ui/core/ListItemText"; -import LinearProgress from "@material-ui/core/LinearProgress"; +import withStyles from '@mui/styles/withStyles'; +import Drawer from "@mui/material/Drawer"; +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import List from "@mui/material/List"; +import Typography from "@mui/material/Typography"; +import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; +import ListItem from "@mui/material/ListItem"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import LinearProgress from "@mui/material/LinearProgress"; import Tour from "reactour"; -import { Badge } from "@material-ui/core"; +import { Badge } from "@mui/material"; import { home, assessment } from "./Tour"; import { faBars, @@ -40,7 +40,7 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Blockly from "blockly"; -import Tooltip from "@material-ui/core/Tooltip"; +import Tooltip from "@mui/material/Tooltip"; const styles = (theme) => ({ drawerWidth: { @@ -116,7 +116,7 @@ class Navbar extends Component { onClick={this.toggleDrawer} style={{ margin: "0 10px" }} className="MenuButton" - > + size="large"> @@ -150,7 +150,7 @@ class Navbar extends Component { this.openTour(); }} style={{ margin: "0 30px 0 auto" }} - > + size="large"> @@ -164,7 +164,7 @@ class Navbar extends Component { this.openTour(); }} style={{ margin: "0 30px 0 auto" }} - > + size="large"> diff --git a/src/components/News.js b/src/components/News.js index 8ece760..09e3785 100644 --- a/src/components/News.js +++ b/src/components/News.js @@ -4,11 +4,11 @@ import Breadcrumbs from './Breadcrumbs'; import { withRouter } from 'react-router-dom'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import * as Blockly from 'blockly' import ReactMarkdown from 'react-markdown'; -import Container from '@material-ui/core/Container'; +import Container from '@mui/material/Container'; const news = ` diff --git a/src/components/NotFound.js b/src/components/NotFound.js index 01b03f7..9cdbc21 100644 --- a/src/components/NotFound.js +++ b/src/components/NotFound.js @@ -4,8 +4,8 @@ import Breadcrumbs from './Breadcrumbs'; import { withRouter } from 'react-router-dom'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import * as Blockly from 'blockly' class NotFound extends Component { diff --git a/src/components/Privacy.js b/src/components/Privacy.js index 47b1d0b..e01d8d6 100644 --- a/src/components/Privacy.js +++ b/src/components/Privacy.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; -import Container from '@material-ui/core/Container'; +import Container from '@mui/material/Container'; class Privay extends Component { render() { return ( diff --git a/src/components/Project/Project.js b/src/components/Project/Project.js index df0253d..53148ed 100644 --- a/src/components/Project/Project.js +++ b/src/components/Project/Project.js @@ -10,8 +10,8 @@ import { withRouter } from 'react-router-dom'; import Home from '../Home'; import Breadcrumbs from '../Breadcrumbs'; -import Backdrop from '@material-ui/core/Backdrop'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import Backdrop from '@mui/material/Backdrop'; +import CircularProgress from '@mui/material/CircularProgress'; class Project extends Component { diff --git a/src/components/Project/ProjectHome.js b/src/components/Project/ProjectHome.js index 445781f..7ce3538 100644 --- a/src/components/Project/ProjectHome.js +++ b/src/components/Project/ProjectHome.js @@ -11,13 +11,13 @@ import BlocklyWindow from "../Blockly/BlocklyWindow"; import Snackbar from "../Snackbar"; import WorkspaceFunc from "../Workspace/WorkspaceFunc"; -import { withStyles } from "@material-ui/core/styles"; -import Grid from "@material-ui/core/Grid"; -import Paper from "@material-ui/core/Paper"; -import Divider from "@material-ui/core/Divider"; -import Typography from "@material-ui/core/Typography"; -import Backdrop from "@material-ui/core/Backdrop"; -import CircularProgress from "@material-ui/core/CircularProgress"; +import withStyles from '@mui/styles/withStyles'; +import Grid from "@mui/material/Grid"; +import Paper from "@mui/material/Paper"; +import Divider from "@mui/material/Divider"; +import Typography from "@mui/material/Typography"; +import Backdrop from "@mui/material/Backdrop"; +import CircularProgress from "@mui/material/CircularProgress"; import DeviceSelection from "../DeviceSelection"; const styles = (theme) => ({ diff --git a/src/components/SensorInfo.js b/src/components/SensorInfo.js index 49156bb..0c0ba67 100644 --- a/src/components/SensorInfo.js +++ b/src/components/SensorInfo.js @@ -1,9 +1,9 @@ import React from "react"; -import Box from "@material-ui/core/Box"; -import Tab from "@material-ui/core/Tab"; -import TabContext from "@material-ui/lab/TabContext"; -import TabList from "@material-ui/lab/TabList"; -import TabPanel from "@material-ui/lab/TabPanel"; +import Box from "@mui/material/Box"; +import Tab from "@mui/material/Tab"; +import TabContext from "@mui/lab/TabContext"; +import TabList from "@mui/lab/TabList"; +import TabPanel from "@mui/lab/TabPanel"; import store from "../store"; import ReactMarkdown from "react-markdown"; import * as Blockly from "blockly"; diff --git a/src/components/Settings/DeviceSelector.js b/src/components/Settings/DeviceSelector.js index b506527..6e6fbac 100644 --- a/src/components/Settings/DeviceSelector.js +++ b/src/components/Settings/DeviceSelector.js @@ -5,12 +5,12 @@ import { setBoard } from '../../actions/boardAction'; import * as Blockly from 'blockly/core'; -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class DeviceSelector extends Component { @@ -22,18 +22,18 @@ class DeviceSelector extends Component { render(){ - return( + return (
{Blockly.Msg.settings_board} {Blockly.Msg.settings_board_text} - + {Blockly.Msg.settings_board} diff --git a/src/components/Settings/LanguageSelector.js b/src/components/Settings/LanguageSelector.js index f069b1b..986ddc9 100644 --- a/src/components/Settings/LanguageSelector.js +++ b/src/components/Settings/LanguageSelector.js @@ -5,12 +5,12 @@ import { setLanguage } from '../../actions/generalActions'; import * as Blockly from 'blockly/core'; -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class LanguageSelector extends Component { @@ -25,18 +25,18 @@ class LanguageSelector extends Component { } render(){ - return( + return (
{Blockly.Msg.settings_language} {Blockly.Msg.settings_language_text} - + {Blockly.Msg.settings_language} diff --git a/src/components/Settings/OtaSelector.js b/src/components/Settings/OtaSelector.js index 8a55b82..5a6b7bd 100644 --- a/src/components/Settings/OtaSelector.js +++ b/src/components/Settings/OtaSelector.js @@ -5,12 +5,12 @@ import { setPlatform } from "../../actions/generalActions"; import * as Blockly from "blockly/core"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import FormControl from "@material-ui/core/FormControl"; -import Select from "@material-ui/core/Select"; -import Typography from "@material-ui/core/Typography"; -import FormHelperText from "@material-ui/core/FormHelperText"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; +import Typography from "@mui/material/Typography"; +import FormHelperText from "@mui/material/FormHelperText"; class OtaSelector extends Component { componentDidMount() { @@ -33,16 +33,16 @@ class OtaSelector extends Component { https://sensebox.de/app - + {Blockly.Msg.settings_statistics} diff --git a/src/components/Settings/RenderSelector.js b/src/components/Settings/RenderSelector.js index 7359283..e4fa139 100644 --- a/src/components/Settings/RenderSelector.js +++ b/src/components/Settings/RenderSelector.js @@ -5,12 +5,12 @@ import { setRenderer } from '../../actions/generalActions'; import * as Blockly from 'blockly/core' -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class RenderSelector extends Component { @@ -26,14 +26,14 @@ class RenderSelector extends Component {
{Blockly.Msg.settings_renderer} {Blockly.Msg.settings_renderer_text} - + {Blockly.Msg.settings_renderer} diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js index a0f9361..6e88472 100644 --- a/src/components/Settings/Settings.js +++ b/src/components/Settings/Settings.js @@ -14,8 +14,8 @@ import OtaSelector from "./OtaSelector"; import SoundsSelector from "./SoundsSelector"; import DeviceSelector from "./DeviceSelector"; -import Button from "@material-ui/core/Button"; -import Paper from "@material-ui/core/Paper"; +import Button from "@mui/material/Button"; +import Paper from "@mui/material/Paper"; class Settings extends Component { componentDidMount() { diff --git a/src/components/Settings/SoundsSelector.js b/src/components/Settings/SoundsSelector.js index a7535a8..c253a30 100644 --- a/src/components/Settings/SoundsSelector.js +++ b/src/components/Settings/SoundsSelector.js @@ -5,12 +5,12 @@ import { setSounds } from "../../actions/generalActions"; import * as Blockly from "blockly/core"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import FormControl from "@material-ui/core/FormControl"; -import Select from "@material-ui/core/Select"; -import Typography from "@material-ui/core/Typography"; -import FormHelperText from "@material-ui/core/FormHelperText"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; +import Typography from "@mui/material/Typography"; +import FormHelperText from "@mui/material/FormHelperText"; class SoundsSelector extends Component { componentDidMount() { @@ -30,16 +30,16 @@ class SoundsSelector extends Component { > {Blockly.Msg.settings_sounds_text} - + {Blockly.Msg.settings_sounds} diff --git a/src/components/Settings/StatsSelector.js b/src/components/Settings/StatsSelector.js index b0b3cfe..6ab82d6 100644 --- a/src/components/Settings/StatsSelector.js +++ b/src/components/Settings/StatsSelector.js @@ -5,12 +5,12 @@ import { setStatistics } from '../../actions/generalActions'; import * as Blockly from 'blockly/core' -import InputLabel from '@material-ui/core/InputLabel'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import Select from '@material-ui/core/Select'; -import Typography from '@material-ui/core/Typography'; -import FormHelperText from '@material-ui/core/FormHelperText'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import Typography from '@mui/material/Typography'; +import FormHelperText from '@mui/material/FormHelperText'; class StatsSelector extends Component { @@ -25,14 +25,14 @@ class StatsSelector extends Component {
{Blockly.Msg.settings_statistics} {Blockly.Msg.settings_statistics_text} - + {Blockly.Msg.settings_statistics} diff --git a/src/components/Snackbar.js b/src/components/Snackbar.js index 55e7429..f70d20d 100644 --- a/src/components/Snackbar.js +++ b/src/components/Snackbar.js @@ -1,9 +1,9 @@ import React, { Component } from 'react'; -import { withStyles } from '@material-ui/core/styles'; -import IconButton from '@material-ui/core/IconButton'; -import MaterialUISnackbar from '@material-ui/core/Snackbar'; -import SnackbarContent from '@material-ui/core/SnackbarContent'; +import withStyles from '@mui/styles/withStyles'; +import IconButton from '@mui/material/IconButton'; +import MaterialUISnackbar from '@mui/material/Snackbar'; +import SnackbarContent from '@mui/material/SnackbarContent'; import { faTimes } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -69,7 +69,7 @@ class Snackbar extends Component { style={{flexWrap: 'nowrap'}} className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success} action={ - + } diff --git a/src/components/TooltipViewer.js b/src/components/TooltipViewer.js index 8ae91d6..758a67b 100644 --- a/src/components/TooltipViewer.js +++ b/src/components/TooltipViewer.js @@ -1,19 +1,21 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; -import withWidth from "@material-ui/core/withWidth"; -import { Button, Card } from "@material-ui/core"; +import { Button, Card } from "@mui/material"; import * as Blockly from "blockly"; -import CardContent from "@material-ui/core/CardContent"; -import Typography from "@material-ui/core/Typography"; +import CardContent from "@mui/material/CardContent"; +import Typography from "@mui/material/Typography"; import ReactMarkdown from "react-markdown"; -import Dialog from "@material-ui/core/Dialog"; -import DialogActions from "@material-ui/core/DialogActions"; -import DialogContent from "@material-ui/core/DialogContent"; -import Slide from "@material-ui/core/Slide"; +import Dialog from "@mui/material/Dialog"; +import DialogActions from "@mui/material/DialogActions"; +import DialogContent from "@mui/material/DialogContent"; +import Slide from "@mui/material/Slide"; import SensorInfo from "./SensorInfo"; import store from "../store"; +// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth +const withWidth = () => (WrappedComponent) => (props) => ; + const Transition = React.forwardRef(function Transition(props, ref) { return ; }); diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js index ddd7248..52eb49a 100644 --- a/src/components/Tutorial/Assessment.js +++ b/src/components/Tutorial/Assessment.js @@ -6,22 +6,26 @@ import { workspaceName } from "../../actions/workspaceActions"; import BlocklyWindow from "../Blockly/BlocklyWindow"; import WorkspaceFunc from "../Workspace/WorkspaceFunc"; -import withWidth, { isWidthDown } from "@material-ui/core/withWidth"; -import Grid from "@material-ui/core/Grid"; -import Card from "@material-ui/core/Card"; -import Typography from "@material-ui/core/Typography"; +import Grid from "@mui/material/Grid"; +import Card from "@mui/material/Card"; +import Typography from "@mui/material/Typography"; import * as Blockly from "blockly"; import { initialXml } from "../Blockly/initialXml"; -import IconButton from "@material-ui/core/IconButton"; +import IconButton from "@mui/material/IconButton"; import CodeViewer from "../CodeViewer"; import TooltipViewer from "../TooltipViewer"; -import Tooltip from "@material-ui/core/Tooltip"; +import Tooltip from "@mui/material/Tooltip"; import ReactMarkdown from "react-markdown"; import { faCode } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { withStyles } from "@material-ui/core/styles"; +import withStyles from '@mui/styles/withStyles'; import remarkGfm from "remark-gfm"; import remarkGemoji from "remark-gemoji"; +import { isWidthDown } from "@material-ui/core"; + + +// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth +const withWidth = () => (WrappedComponent) => (props) => ; const styles = (theme) => ({ codeOn: { @@ -98,11 +102,10 @@ class Assessment extends Component { } > this.onChange()} - > + size="large"> diff --git a/src/components/Tutorial/Builder/BlocklyExample.js b/src/components/Tutorial/Builder/BlocklyExample.js index 37e4921..412e837 100644 --- a/src/components/Tutorial/Builder/BlocklyExample.js +++ b/src/components/Tutorial/Builder/BlocklyExample.js @@ -15,13 +15,13 @@ import * as Blockly from "blockly/core"; import { initialXml } from "../../Blockly//initialXml.js"; import BlocklyWindow from "../../Blockly/BlocklyWindow"; -import { withStyles } from "@material-ui/core/styles"; -import Switch from "@material-ui/core/Switch"; -import FormControlLabel from "@material-ui/core/FormControlLabel"; -import FormHelperText from "@material-ui/core/FormHelperText"; -import FormLabel from "@material-ui/core/FormLabel"; -import Button from "@material-ui/core/Button"; -import Grid from "@material-ui/core/Grid"; +import withStyles from '@mui/styles/withStyles'; +import Switch from "@mui/material/Switch"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import FormHelperText from "@mui/material/FormHelperText"; +import FormLabel from "@mui/material/FormLabel"; +import Button from "@mui/material/Button"; +import Grid from "@mui/material/Grid"; const styles = (theme) => ({ errorColor: { diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js index d603e00..a9aa80b 100644 --- a/src/components/Tutorial/Builder/Builder.js +++ b/src/components/Tutorial/Builder/Builder.js @@ -33,19 +33,19 @@ import Snackbar from "../../Snackbar"; import Public from "./Public"; import Review from "./Review"; -import { withStyles } from "@material-ui/core/styles"; -import Button from "@material-ui/core/Button"; -import Backdrop from "@material-ui/core/Backdrop"; -import CircularProgress from "@material-ui/core/CircularProgress"; -import Divider from "@material-ui/core/Divider"; -import FormHelperText from "@material-ui/core/FormHelperText"; -import Radio from "@material-ui/core/Radio"; -import RadioGroup from "@material-ui/core/RadioGroup"; -import FormControlLabel from "@material-ui/core/FormControlLabel"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import FormControl from "@material-ui/core/FormControl"; -import Select from "@material-ui/core/Select"; +import withStyles from '@mui/styles/withStyles'; +import Button from "@mui/material/Button"; +import Backdrop from "@mui/material/Backdrop"; +import CircularProgress from "@mui/material/CircularProgress"; +import Divider from "@mui/material/Divider"; +import FormHelperText from "@mui/material/FormHelperText"; +import Radio from "@mui/material/Radio"; +import RadioGroup from "@mui/material/RadioGroup"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; import * as Blockly from "blockly"; const styles = (theme) => ({ @@ -470,12 +470,12 @@ class Builder extends Component { Tutorial