Commit ad3ac60b authored by Martin Fahl's avatar Martin Fahl
Browse files

changes material design framework to material-ui

parent 87cd1a0e
...@@ -4,9 +4,10 @@ ...@@ -4,9 +4,10 @@
"private": true, "private": true,
"proxy": "http://localhost:4000", "proxy": "http://localhost:4000",
"dependencies": { "dependencies": {
"@material-ui/core": "^1.4.3",
"@material-ui/icons": "^2.0.1",
"enzyme": "^3.3.0", "enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1", "enzyme-adapter-react-16": "^1.1.1",
"mdbreact": "^4.6.1",
"react": "^16.4.1", "react": "^16.4.1",
"react-dom": "^16.4.1", "react-dom": "^16.4.1",
"react-redux": "^5.0.7", "react-redux": "^5.0.7",
......
...@@ -9,7 +9,9 @@ ...@@ -9,7 +9,9 @@
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
......
...@@ -2,16 +2,24 @@ import React from 'react'; ...@@ -2,16 +2,24 @@ import React from 'react';
import { Navbar } from "../Navbar/Navbar"; import { Navbar } from "../Navbar/Navbar";
import { CodecentricFooter } from "../CodecentricFooter/CodecentricFooter"; import { CodecentricFooter } from "../CodecentricFooter/CodecentricFooter";
import InventoryListContainer from '../../container/InventoryListContainer/InventoryListContainer'; import InventoryListContainer from '../../container/InventoryListContainer/InventoryListContainer';
import { withStyles } from '@material-ui/core/styles'
const App = () => ( const styles = {
root: {
margin: 20
}
}
const App = (props) => (
<div className="App"> <div className="App">
<Navbar appName="Inventory" /> <Navbar appName="Inventory" />
<div className="container"> <div className={props.classes.root}>
<InventoryListContainer /> <InventoryListContainer />
</div> </div>
<CodecentricFooter author="codecentric" link="https://www.codecentric.de"/> <CodecentricFooter author="codecentric" link="https://www.codecentric.de"/>
</div> </div>
); );
export default App export default withStyles(styles)(App)
\ No newline at end of file \ No newline at end of file
import React from 'react'; import React from 'react';
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Container, Footer } from 'mdbreact'; import { Typography, Grid} from '@material-ui/core';
export const CodecentricFooter = ({author, link}) => ( export const CodecentricFooter = ({author, link}) => (
<Footer color="blue" className="font-small pt-4 mt-4 text-center"> <Grid container justify="center">
<Container fluid> <Grid item>
Created with <span role="img" aria-label="Heart">❤️</span> in {(new Date().getFullYear())} by <a href={link} target="_blank" rel="noopener noreferrer"> {author} </a> <Typography>
</Container> Created with <span role="img" aria-label="Heart">❤️</span> in {(new Date().getFullYear())} by <a href={link} target="_blank" rel="noopener noreferrer"> {author} </a>
</Footer> </Typography>
</Grid>
</Grid>
); );
CodecentricFooter.propTypes = { CodecentricFooter.propTypes = {
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CodecentricFooter should render as expected 1`] = ` exports[`CodecentricFooter should render as expected 1`] = `
<footer <div
className="page-footer mt-4 blue font-small pt-4 mt-4 text-center" className="MuiGrid-container-1 MuiGrid-justify-xs-center-18"
> >
<div <div
className="container-fluid" className="MuiGrid-item-2"
> >
Created with <p
<span className="MuiTypography-root-98 MuiTypography-body1-107"
aria-label="Heart"
role="img"
> >
❤️ Created with
</span> <span
in aria-label="Heart"
2018 role="img"
by >
<a ❤️
href="http://www.google.de" </span>
rel="noopener noreferrer" in
target="_blank" 2018
> by
<a
Test href="http://www.google.de"
rel="noopener noreferrer"
</a> target="_blank"
>
Test
</a>
</p>
</div> </div>
</footer> </div>
`; `;
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import TextField from '@material-ui/core/TextField';
import Icon from '@material-ui/core/Icon';
import InputAdornment from '@material-ui/core/InputAdornment';
export const Filter = ({ filterTerm, updateFilter }) => ( export const Filter = ({ filterTerm, updateFilter }) => (
<form> <TextField
<div className="md-form my-0"> id="input-with-icon-textfield"
<input className="form-control mr-sm-2" type="text" placeholder="Filter" aria-label="Filter" value={filterTerm} onChange={updateFilter} /> value={filterTerm}
</div> onChange={updateFilter}
</form> fullWidth
margin="normal"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Icon>search</Icon>
</InputAdornment>
),
}}
/>
); );
Filter.propTypes = { Filter.propTypes = {
......
...@@ -18,7 +18,7 @@ describe("Filter", () => { ...@@ -18,7 +18,7 @@ describe("Filter", () => {
<Filter filterTerm="filter" updateFilter={updateFilter} /> <Filter filterTerm="filter" updateFilter={updateFilter} />
); );
filterComponent.find("input").simulate("change"); filterComponent.find("#input-with-icon-textfield").simulate("change");
expect(updateFilter.mock.calls.length).toBe(1); expect(updateFilter.mock.calls.length).toBe(1);
}); });
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Filter should render as expected 1`] = ` exports[`Filter should render as expected 1`] = `
<form> <div
aria-describedby={undefined}
className="MuiFormControl-root-1 MuiFormControl-marginNormal-2 MuiFormControl-fullWidth-4"
>
<div <div
className="md-form my-0" className="MuiInput-root-5 MuiInput-fullWidth-12 MuiInput-formControl-6 MuiInput-underline-9"
> >
<div
className="MuiInputAdornment-root-18 MuiInputAdornment-positionStart-19"
>
<span
aria-hidden="true"
className="material-icons MuiIcon-root-21"
>
search
</span>
</div>
<input <input
aria-label="Filter" aria-invalid={false}
className="form-control mr-sm-2" autoComplete={undefined}
autoFocus={undefined}
className="MuiInput-input-13"
defaultValue={undefined}
disabled={false}
id="input-with-icon-textfield"
name={undefined}
onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
placeholder="Filter" onFocus={[Function]}
onKeyDown={undefined}
onKeyUp={undefined}
placeholder={undefined}
readOnly={undefined}
required={false}
rows={undefined}
type="text" type="text"
value="filter" value="filter"
/> />
</div> </div>
</form> </div>
`; `;
import React from 'react' import React, { Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Item from "../../container/ItemContainer/ItemContainer"; import Item from "../../container/ItemContainer/ItemContainer";
import { Filter } from "../Filter/Filter"; import { Filter } from "../Filter/Filter";
import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact";
import { CSSTransitionGroup } from 'react-transition-group' // ES6 import { CSSTransitionGroup } from 'react-transition-group' // ES6
import '../../css/animations.css' import '../../css/animations.css'
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => ( const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
<Container> <Fragment>
<Row className="justify-content-md-center justify-content-center mx-auto"> <Grid container justify="center">
<Col sm="12" md="8" lg="6"> <Grid item sm={12} md={8} lg={6}>
<Paper className="mt-4 mb-4 mx-auto" elevation={1}>
<Card className="mt-4 mb-4 mx-auto"> <Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<CardBody> <List>
<Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<ListGroup>
<CSSTransitionGroup <CSSTransitionGroup
transitionName="example" transitionName="example"
transitionAppear={true} transitionAppear={true}
...@@ -27,15 +27,12 @@ const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => ( ...@@ -27,15 +27,12 @@ const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
{...item} {...item}
/> />
)} )}
</CSSTransitionGroup> </CSSTransitionGroup>
</ListGroup> </List>
</CardBody> </Paper>
</Card> </Grid>
</Grid>
</Col> </Fragment>
</Row>
</Container>
) )
InventoryList.propTypes = { InventoryList.propTypes = {
......
...@@ -2,30 +2,22 @@ ...@@ -2,30 +2,22 @@
exports[`InventoryList should render as expected 1`] = ` exports[`InventoryList should render as expected 1`] = `
<div <div
className="container" className="MuiGrid-container-1 MuiGrid-justify-xs-center-18"
> >
<div <div
className="row justify-content-md-center justify-content-center mx-auto" className="MuiGrid-item-2 MuiGrid-grid-sm-12-55 MuiGrid-grid-md-8-65 MuiGrid-grid-lg-6-77"
> >
<div <div
className="col-sm-12 col-md-8 col-lg-6" className="MuiPaper-root-98 MuiPaper-elevation1-101 MuiPaper-rounded-99 mt-4 mb-4 mx-auto"
> >
<div <div
className="card mt-4 mb-4 mx-auto" name="Filter"
/>
<ul
className="MuiList-root-125 MuiList-padding-126"
> >
<div <span />
className="card-body" </ul>
>
<div
name="Filter"
/>
<ul
className="list-group"
>
<span />
</ul>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
......
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { ListGroupItem, Badge, Fa } from "mdbreact"; import ListItem from '@material-ui/core/ListItem';
import { Row, Col } from "mdbreact"; import ListItemText from '@material-ui/core/ListItemText';
import Typography from '@material-ui/core/Typography';
import Icon from '@material-ui/core/Icon';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
const Item = ({ id, name, quantity, increment, decrement, deleteItem }) => ( const Item = ({ id, name, quantity, increment, decrement, deleteItem }) => (
<ListGroupItem> <ListItem>
<Row> <ListItemText>
{name}
<Col md="6" xs="4">
{name} </ListItemText>
</Col> <IconButton onClick={() => decrement(id)} aria-label="Decrement">
<Icon>arrow_downward</Icon>
</IconButton>
<Typography>
{quantity}
</Typography>
<IconButton onClick={() => increment(id)} aria-label="Increment">
<Icon>arrow_upward</Icon>
</IconButton>
<IconButton onClick={() => deleteItem(id)} aria-label="Delete">
<DeleteIcon />
</IconButton>
</ListItem>
)
<Col md="6" xs="8"> /* <Row>
<Badge color="secondary" className="ml-1 mr-1" onClick={() => decrement(id)}><Fa icon="minus-square" aria-hidden="true"/></Badge>
<Badge color="default" className="ml-1 mr-1" pill>{quantity}</Badge>
<Badge color="secondary" className="ml-1 mr-1" onClick={() => increment(id)}><Fa icon="plus-square" aria-hidden="true"/></Badge>
<Badge color="danger" className="ml-1 mr-1" onClick={() => deleteItem(id)}><Fa icon="trash" aria-hidden="true"/></Badge>
</Col>
</Row> <Col md="6" xs="4">
{name}
</Col>
<Col md="6" xs="8">
<Badge color="secondary" className="ml-1 mr-1" onClick={() => decrement(id)}><Fa icon="minus-square" aria-hidden="true"/></Badge>
<Badge color="default" className="ml-1 mr-1" pill>{quantity}</Badge>
<Badge color="secondary" className="ml-1 mr-1" onClick={() => increment(id)}><Fa icon="plus-square" aria-hidden="true"/></Badge>
<Badge color="danger" className="ml-1 mr-1" onClick={() => deleteItem(id)}><Fa icon="trash" aria-hidden="true"/></Badge>
</Col>
</ListGroupItem> </Row> */
)
Item.propTypes = { Item.propTypes = {
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
......
import React from 'react'; import React from 'react';
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { CodecentricLogo } from "../CodecentricLogo/CodecentricLogo"; import { CodecentricLogo } from "../CodecentricLogo/CodecentricLogo";
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
export const Navbar = ({appName}) => ( export const Navbar = ({appName}) => (
<nav className="navbar navbar-expand-lg navbar-dark primary-color"> <AppBar position="static" color="primary">
<Toolbar>
<CodecentricLogo />
<Typography variant="title" color="inherit">
{appName}
</Typography>
</Toolbar>
</AppBar>
<a className="navbar-brand" href="/"><CodecentricLogo className="d-inline-block align-top"/></a>
<a className="navbar-brand" href="/">{appName}</a>
</nav>
); );
Navbar.propTypes = { Navbar.propTypes = {
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Navbar should render as expected 1`] = ` exports[`Navbar should render as expected 1`] = `
<nav <header
className="navbar navbar-expand-lg navbar-dark primary-color" className="MuiPaper-root-9 MuiPaper-elevation4-15 MuiAppBar-root-1 MuiAppBar-positionStatic-5 MuiAppBar-colorPrimary-7"
> >
<a <div
className="navbar-brand" className="MuiToolbar-root-36 MuiToolbar-regular-38 MuiToolbar-gutters-37"
href="/"
> >
<img <img
alt="codecentric" alt="codecentric"
height="60" height="60"
src="CC_RGB_onBlack.png" src="CC_RGB_onBlack.png"
/> />
</a> <h2
<a className="MuiTypography-root-40 MuiTypography-title-46 MuiTypography-colorInherit-59"
className="navbar-brand" >
href="/" Test
> </h2>
Test </div>
</a> </header>
</nav>
`; `;
...@@ -5,9 +5,6 @@ import thunk from 'redux-thunk'; ...@@ -5,9 +5,6 @@ import thunk from 'redux-thunk';
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
import rootReducer from './reducers' import rootReducer from './reducers'
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './components/App/App'; import App from './components/App/App';
const store = createStore( const store = createStore(
......
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment