Skip to content

Commit

Permalink
Merge pull request #152 from unicef/feaure/update-material-ui
Browse files Browse the repository at this point in the history
Material UI 5 + React 18 & other updates
  • Loading branch information
gauravr7 authored Apr 8, 2024
2 parents cc448cb + 9409bca commit 7a4fb60
Show file tree
Hide file tree
Showing 179 changed files with 30,739 additions and 56,861 deletions.
8 changes: 6 additions & 2 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"presets": ["@babel/preset-env", ["@babel/preset-react", {
"runtime": "automatic"
}]],
"plugins": [
"transform-object-rest-spread",
"transform-react-jsx",
["@babel/plugin-transform-react-jsx", {
"runtime": "automatic"
}],
["@babel/plugin-proposal-class-properties"]
]
}
6 changes: 3 additions & 3 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
}
"editor.formatOnSave": true,
"editor.tabSize": 2
}
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

[![npm version](https://badge.fury.io/js/%40unicef%2Fmaterial-ui.svg)](https://badge.fury.io/js/%40unicef%2Fmaterial-ui)

Customized version for UNICEF of [Material UI](https://material-ui.com/). Material UI is a set of [ReactJS](http://reactjs.org) user interface components based on [Google's material design](https://material.io/design/) written in Javascript.
Customized version for UNICEF of [Material UI](https://mui.com/). Material UI is a set of [ReactJS](http://reactjs.org) user interface components based on [Google's material design](https://material.io/design/) written in Javascript.

You can see a **[Demo site](https://unicef.github.io/unicef-material-ui/example/)** and the **[reference documentation](https://unicef.github.io/unicef-material-ui/)**.

Expand All @@ -18,26 +18,26 @@ In order to use the UNICEF's Material UI components in your React project instal

### Adding UNICEF theme to your app

To use UNICEF theme add `MuiThemeProvider` at the top level of your app and warp you components inside `UNICEFStyleProvider`
To use UNICEF theme add `ThemeProvider` at the top level of your app and warp you components inside `UNICEFStyleProvider`

```jsx
// App.js
import React from 'react'
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
import { ThemeProvider } from '@mui/material/styles'
import { theme, UNICEFStyleProvider } from '@unicef/material-ui'

export default function App() {
return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<UNICEFStyleProvider>
{/* Components*/}
</UNICEFStyleProvider>
</MuiThemeProvider>
</ThemeProvider>
)
}
```

More info: <a href="https://material-ui.com/styles/advanced/#theming">Material-ui theming</a>
More info: <a href="https://mui.com/material-ui/customization/theming/">Material-ui theming</a>

### Example project

Expand Down
28,575 changes: 14,281 additions & 14,294 deletions example/package-lock.json

Large diffs are not rendered by default.

10 changes: 4 additions & 6 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,14 @@
"homepage": "https://unicef.github.io/unicef-material-ui/example",
"dependencies": {
"@date-io/core": "^1.3.13",
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@material-ui/pickers": "^3.2.10",
"@mui/material": "^5.15.14",
"@mui/icons-material": "^5.10.9",
"@mui/lab": "^5.0.0-alpha.105",
"gh-pages": "^2.2.0",
"prop-types": "^15.7.2",
"react": "file:../node_modules/react",
"react-dom": "file:../node_modules/react-dom",
"react-material-ui-form-validator": "^2.0.9",
"react-router-dom": "^5.1.2",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.0",
"unicef-material-ui": "file:.."
},
Expand Down
12 changes: 7 additions & 5 deletions example/src/App.css
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
body {
background-color: #f4f4f4;
overflow-x: hidden;
background-color: #f4f4f4 !important;
overflow-x: hidden;
margin: 8px !important;
}

.margin-top {
margin-top: 124px;
}

@media only screen and (max-width: 959px) {
.margin-top {
margin-top: 72px;
}
.margin-top {
margin-top: 72px;
}
}
74 changes: 39 additions & 35 deletions example/src/App.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { Switch, Route, Link } from 'react-router-dom'
import { MuiThemeProvider } from '@material-ui/core/styles'
import { Routes, Route, Link } from 'react-router-dom'
import { ThemeProvider } from '@mui/material/styles'
import {
theme,
UNICEFStyleProvider,
Expand All @@ -9,14 +9,15 @@ import {
UContent,
} from 'unicef-material-ui'
import './App.css'
import { List, ListItem, ListItemText } from '@material-ui/core'
import { List, ListItem, ListItemText } from '@mui/material'
import {
Header,
Pickers,
SideBarContent,
Layout,
InteractiveViews,
FormValidator,
Accessibility,
} from './components'

export default function App() {
Expand All @@ -29,7 +30,7 @@ export default function App() {
}

return (
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<UNICEFStyleProvider>
<Header />
<ULayout>
Expand All @@ -39,42 +40,45 @@ export default function App() {
handleClick={handleClick}
/>
</USideBar>
<UContent headerHeight={114}>
<Switch>
<Route exact path={'/'}>
<List style={{ width: 300 }}>
{['Layout', 'Forms', 'Interactive views', 'Pickers'].map(
(text, index) => (
<ListItem
button
key={text}
component={Link}
to={`${text.replace(/\s+/g, '-').toLowerCase()}`}
onClick={e =>
handleClick(
e,
`${text.replace(/\s+/g, '-').toLowerCase()}`
)
}
>
<ListItemText primary={text} />
</ListItem>
)
)}
</List>
</Route>
<Route exact path={`/layout`} component={Layout} />
<Route exact path={`/forms`} component={FormValidator} />
<UContent id="main" headerHeight={114}>
<Routes>
<Route
path={'/'}
element={
<List style={{ width: 300 }}>
{['Layout', 'Forms', 'Interactive views', 'Pickers'].map(
(text, index) => (
<ListItem
button
key={text}
component={Link}
to={`${text.replace(/\s+/g, '-').toLowerCase()}`}
onClick={e =>
handleClick(
e,
`${text.replace(/\s+/g, '-').toLowerCase()}`
)
}
>
<ListItemText primary={text} />
</ListItem>
)
)}
</List>
}
></Route>
<Route path={`/layout`} element={<Layout />} />
<Route path={`/forms`} element={<FormValidator />} />
<Route
exact
path={`/interactive-views`}
component={InteractiveViews}
element={<InteractiveViews />}
/>
<Route exact path={`/pickers`} component={Pickers} />
</Switch>
<Route path={`/pickers`} element={<Pickers />} />
<Route path={`/accessibility`} element={<Accessibility />} />
</Routes>
</UContent>
</ULayout>
</UNICEFStyleProvider>
</MuiThemeProvider>
</ThemeProvider>
)
}
53 changes: 53 additions & 0 deletions example/src/components/Accessibility.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React, { useState, useRef } from 'react'
import { Typography, Grid } from '@mui/material'
import {
UAriaLive,
UAriaHiddenText,
UTextField,
UValidatorForm,
} from 'unicef-material-ui'

export default function Accessibility() {
const form = useRef()
const [formValues, setFormValues] = useState({ email: '' })
const handleSubmit = () => {}
const handleChange = e => {
const { name, value } = e.target
setFormValues({
...formValues,
[name]: value,
})
}
return (
<>
<Typography variant="h6">Aria live</Typography>
<UAriaLive type="alert" role="alert" text="Please fill the form" />
<Typography variant="h6">Aria hidden text</Typography>
<UValidatorForm
onSubmit={handleSubmit}
ref={form}
onError={errors => console.log(errors)}
instantValidate={true}
noValidate
>
<Grid container>
<Grid item xs={12} lg={3} xl={2}>
<UTextField
label="Email"
required
onChange={handleChange}
name="email"
validators={['required', 'isEmail']}
value={formValues.email}
inputProps={{ 'aria-describedby': 'email-help' }}
/>
<UAriaHiddenText
id="email-help"
text="Please enter email address"
/>
</Grid>
</Grid>
</UValidatorForm>
</>
)
}
90 changes: 46 additions & 44 deletions example/src/components/Alert.js
Original file line number Diff line number Diff line change
@@ -1,55 +1,57 @@
import React from 'react';
import React from 'react'
import {
Typography,
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle
} from '@material-ui/core';
Typography,
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from '@mui/material'

export default function Alert() {
const [open, setOpen] = React.useState(false);
const [open, setOpen] = React.useState(false)

function handleClickOpen() {
setOpen(true);
}
function handleClickOpen() {
setOpen(true)
}

function handleClose() {
setOpen(false);
}
function handleClose() {
setOpen(false)
}

return (
<div>
<Typography variant="h5" style={{ margin: '32px 0px' }}>
Alert
return (
<div>
<Typography variant="h5" style={{ margin: '32px 0px' }}>
Alert
</Typography>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location data to
Google, even when no apps are running.
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Use Google's location service?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending
anonymous location data to Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Agree
<Button onClick={handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
</DialogActions>
</Dialog>
</div>
)
}
Loading

0 comments on commit 7a4fb60

Please sign in to comment.