Skip to content

Commit

Permalink
feat: migration from MUI v4 to v5 (#55)
Browse files Browse the repository at this point in the history
* feat: install @mui/material & @mui/styles

* feat: add emotion package and .nvmrc

* feat: run codemods and make manual fixes

replace @material-ui with @mui/material
add underline=hover to links
migrate from JSS https://mui.com/guides/migration-v4/#migrate-from-jss
surround ThemeProvider with StyledEngineProvider

* style: change select list to variant="standard"

the default input style is now outlined

* feat: formcontrol is outlined by default

* feat: remove @mui/styles

@mui/styles is a transitional package used for migrating to MUI v5.

* feat: remove @material-ui/core and @material-ui/icons

* fix: remove package-lock.json

Co-authored-by: Alex Kerr <alex9000@gmail.com>
  • Loading branch information
alex94143 and alex9000 authored Mar 24, 2022
1 parent f176f5e commit 60a575b
Show file tree
Hide file tree
Showing 22 changed files with 386 additions and 14,970 deletions.
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
lts/fermium
14,672 changes: 0 additions & 14,672 deletions package-lock.json

This file was deleted.

6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "4.12.3",
"@material-ui/icons": "^4.11.2",
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.5.0",
"@mui/material": "^5.5.1",
"@testing-library/dom": "5",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.2",
Expand Down
29 changes: 15 additions & 14 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Home from "./components/home/Home";
import Header from "./components/Header";
import Results from "./components/results/Results";
import Donate from "./components/donate/Donate";
import {ThemeProvider} from "@material-ui/core/styles";
import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
import {theme} from "./theme";
import {getResults} from "./api/axiosApi";
import {applyFilters, applyFilterChanges} from "./components/results/filterHelpers";
Expand All @@ -17,7 +17,6 @@ import {setValues} from "./context/globalStates";

const history = createBrowserHistory();


const App = () => {
const [isFilterOpen, setIsFilterOpen] = useState(false);
const [data, setData] = useState<Result[]>([]);
Expand Down Expand Up @@ -61,18 +60,20 @@ const App = () => {
}, []);

return (
<ThemeProvider theme={theme}>
<div className="App">
<Router history={history}>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/results" component={Results}/>
<Route exact path="/donate" component={Donate}/>
</Switch>
</Router>
</div>
</ThemeProvider>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<div className="App">
<Router history={history}>
<Header/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/results" component={Results}/>
<Route exact path="/donate" component={Donate}/>
</Switch>
</Router>
</div>
</ThemeProvider>
</StyledEngineProvider>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/Header.styles.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from "styled-components";
import {Link} from "react-router-dom";
import {Typography} from "@material-ui/core";
import {Typography} from "@mui/material";
import {colors} from "../theme";

export const WhiteContainer = styled.header`
Expand Down
12 changes: 6 additions & 6 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import {ReactComponent as Logo} from "../assets/Logo.svg";

import {FilterBar} from "./results/FilterBar";

import MatMenu from "@material-ui/core/Menu";
import MatMenuItem from "@material-ui/core/MenuItem";
import MatButton from "@material-ui/core/Button";
import Button from "@material-ui/core/Button";
import MenuIcon from "@material-ui/icons/Menu";
import Drawer from "@material-ui/core/Drawer";
import MatMenu from "@mui/material/Menu";
import MatMenuItem from "@mui/material/MenuItem";
import MatButton from "@mui/material/Button";
import Button from "@mui/material/Button";
import MenuIcon from "@mui/icons-material/Menu";
import Drawer from "@mui/material/Drawer";
import {GlobalStateContext} from "../context/globalStates";
import {grabCurrentFiltersFromURLParams} from "../util/historyHelper";
import {
Expand Down
4 changes: 2 additions & 2 deletions src/components/donate/Donate.styles.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from "styled-components";
import Typography from "@material-ui/core/Typography";
import {Box, Button} from "@material-ui/core";
import Typography from "@mui/material/Typography";
import {Box, Button} from "@mui/material";
import { colors } from "../../theme";

export const Container = styled.div`
Expand Down
42 changes: 21 additions & 21 deletions src/components/donate/Donate.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";

import Link from "@material-ui/core/Link";
import Typography from "@material-ui/core/Typography";
import Link from "@mui/material/Link";
import Typography from "@mui/material/Typography";

import {
Container,
Expand Down Expand Up @@ -59,52 +59,52 @@ const Donate: React.FC = () => {
<SectionHeader>General</SectionHeader>
<DonationList>
<ListItem>
<Link variant="h6" href="https://www.gofundme.com/">
<Link variant="h6" href="https://www.gofundme.com/" underline="hover">
GoFundMe&apos;s in the Bay area
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="https://www.redwoodcity.org/home">
<Link variant="h6" href="https://www.redwoodcity.org/home" underline="hover">
Redwood City Small Business Relief Fund{" "}
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
UC Berkeley Law Pro Bono
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
COVID-19 Regional Response Fund
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
Norcal Small Business Relief Fund
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
One Fair Wage{" "}
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
Berkeley Relief Fund
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
Berkeley Mutual Aid
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
Save Our China Towns{" "}
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
MEDA (Mission Economic Development Agency)
</Link>
</ListItem>
Expand All @@ -118,22 +118,22 @@ const Donate: React.FC = () => {
</SectionHeader>
<DonationList>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
YouTube Ad Proceeds to #BLM
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
Bay Area Organization of Black Owned Businesses (BAOBOB)
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
Black Owned Restaurants
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
Black Owned Business ReliefFund
</Link>
</ListItem>
Expand All @@ -144,27 +144,27 @@ const Donate: React.FC = () => {
<SectionHeader>LGBT</SectionHeader>
<DonationList>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
Silicon Valley Central Chamber of Commerce
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
SF Gov
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
Queer: Way Out
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
James Beard Foundation
</Link>
</ListItem>
<ListItem>
<Link variant="h6" href="#">
<Link variant="h6" href="#" underline="hover">
James Beard Webinars
</Link>
</ListItem>
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/AboutUs.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import {ReactComponent as YellowHalfCircle} from "../../assets/YellowHalfCircle.svg";
import styled from "styled-components";
import Typography from "@material-ui/core/Typography";
import Typography from "@mui/material/Typography";
import ImageAvatars from "./ImageAvatars";

const Container = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import HowItWorks from "./HowItWorks";
import AboutUs from "./AboutUs";
import ThankYou from "./ThankYou";
import {SearchForm} from "./SearchForm";
import Typography from "@material-ui/core/Typography";
import Typography from "@mui/material/Typography";
import { LocationState } from "../../types";

const Home: React.FC<RouteComponentProps> = ({location}) => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/HowItWorks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ScrapeWeb from "../../assets/ScrapeWeb.png";
import Searching from "../../assets/Searching.png";
import PaperAirplanes from "../../assets/PaperAirplanes.png";

import Typography from "@material-ui/core/Typography";
import Typography from "@mui/material/Typography";

const Container = styled.div`
width: 100%;
Expand Down
42 changes: 27 additions & 15 deletions src/components/home/ImageAvatars.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,44 @@
import React from "react";
import {makeStyles} from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import React from 'react';
import { styled } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

import rocio from "../../assets/avatars/rocio.jpg";
import emily from "../../assets/avatars/emily.jpg";
import alex from "../../assets/avatars/alexkerr.jpg";

const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
"& > *": {
const PREFIX = 'ImageAvatars';

const classes = {
root: `${PREFIX}-root`,
large: `${PREFIX}-large`
};

const StyledBox = styled(Box)((
{
theme
}
) => ({
[`& .${classes.root}`]: {
display: 'flex',
'& > *': {
margin: theme.spacing(1),
},
},
large: {

[`& .${classes.large}`]: {
width: theme.spacing(15),
height: theme.spacing(15),
},
}
}));

export default function ImageAvatars() {
const classes = useStyles();


return (
<Box component="section" mt={8} mb={8}>
<StyledBox component="section" mt={8} mb={8}>
<Typography variant="h3">Meet the Team</Typography>
<div className={classes.root}>
<Grid container spacing={2}>
Expand Down Expand Up @@ -68,6 +80,6 @@ export default function ImageAvatars() {
</Grid>
</Grid>
</div>
</Box>
</StyledBox>
);
}
14 changes: 7 additions & 7 deletions src/components/home/SearchForm.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import styled from "styled-components";
import Select from "@material-ui/core/Select";
import Select from "@mui/material/Select";
import {County, OrgType} from "../../types";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Button from "@material-ui/core/Button";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import Button from "@mui/material/Button";
import React, {useState} from "react";
import {getFilterNameFromGroupAndTargetName} from "../results/filterHelpers";
import {useHistory} from "react-router-dom";
import {Typography} from "@material-ui/core";
import {Typography} from "@mui/material";
import {colors} from "../../theme";

const SearchFormContainer = styled.form`
Expand Down Expand Up @@ -98,7 +98,7 @@ export const SearchForm = () => {
</SearchDescription>

<SearchFormFields>
<FormControl variant="outlined">
<FormControl>
<InputLabel htmlFor="org-type-select">I am a...</InputLabel>
<StyledSelect
native
Expand All @@ -116,7 +116,7 @@ export const SearchForm = () => {
<option value={OrgType.NonProfit}>Non-profit</option>
</StyledSelect>
</FormControl>
<FormControl variant="outlined">
<FormControl>
<InputLabel htmlFor="county-select">County</InputLabel>
<StyledSelect
native
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/ThankYou.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {ReactComponent as TealSquare} from "../../assets/TealSquare.svg";
import CodeForSFLogo from "../../assets/CodeForSFLogo.png";
import GitHubLogo from "../../assets/GitHubLogo.png";
import ReactLogo from "../../assets/ReactLogo.png";
import Typography from "@material-ui/core/Typography";
import Typography from "@mui/material/Typography";


/*
Expand Down
Loading

0 comments on commit 60a575b

Please sign in to comment.