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 @@
"private": true,
"proxy": "http://localhost:4000",
"dependencies": {
"@material-ui/core": "^1.4.3",
"@material-ui/icons": "^2.0.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"mdbreact": "^4.6.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
......
......@@ -9,7 +9,9 @@
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="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.
It will be replaced with the URL of the `public` folder during the build.
......
......@@ -2,16 +2,24 @@ import React from 'react';
import { Navbar } from "../Navbar/Navbar";
import { CodecentricFooter } from "../CodecentricFooter/CodecentricFooter";
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">
<Navbar appName="Inventory" />
<div className="container">
<div className={props.classes.root}>
<InventoryListContainer />
</div>
<CodecentricFooter author="codecentric" link="https://www.codecentric.de"/>
</div>
);
export default App
\ No newline at end of file
export default withStyles(styles)(App)
\ No newline at end of file
import React from 'react';
import PropTypes from "prop-types";
import { Container, Footer } from 'mdbreact';
import { Typography, Grid} from '@material-ui/core';
export const CodecentricFooter = ({author, link}) => (
<Footer color="blue" className="font-small pt-4 mt-4 text-center">
<Container fluid>
Created with <span role="img" aria-label="Heart">❤️</span> in {(new Date().getFullYear())} by <a href={link} target="_blank" rel="noopener noreferrer"> {author} </a>
</Container>
</Footer>
<Grid container justify="center">
<Grid item>
<Typography>
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>
</Grid>
</Grid>
);
CodecentricFooter.propTypes = {
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CodecentricFooter should render as expected 1`] = `
<footer
className="page-footer mt-4 blue font-small pt-4 mt-4 text-center"
<div
className="MuiGrid-container-1 MuiGrid-justify-xs-center-18"
>
<div
className="container-fluid"
className="MuiGrid-item-2"
>
Created with
<span
aria-label="Heart"
role="img"
<p
className="MuiTypography-root-98 MuiTypography-body1-107"
>
❤️
</span>
in
2018
by
<a
href="http://www.google.de"
rel="noopener noreferrer"
target="_blank"
>
Test
</a>
Created with
<span
aria-label="Heart"
role="img"
>
❤️
</span>
in
2018
by
<a
href="http://www.google.de"
rel="noopener noreferrer"
target="_blank"
>
Test
</a>
</p>
</div>
</footer>
</div>
`;
import React from "react";
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 }) => (
<form>
<div className="md-form my-0">
<input className="form-control mr-sm-2" type="text" placeholder="Filter" aria-label="Filter" value={filterTerm} onChange={updateFilter} />
</div>
</form>
<TextField
id="input-with-icon-textfield"
value={filterTerm}
onChange={updateFilter}
fullWidth
margin="normal"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Icon>search</Icon>
</InputAdornment>
),
}}
/>
);
Filter.propTypes = {
......
......@@ -18,7 +18,7 @@ describe("Filter", () => {
<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);
});
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Filter should render as expected 1`] = `
<form>
<div
aria-describedby={undefined}
className="MuiFormControl-root-1 MuiFormControl-marginNormal-2 MuiFormControl-fullWidth-4"
>
<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
aria-label="Filter"
className="form-control mr-sm-2"
aria-invalid={false}
autoComplete={undefined}
autoFocus={undefined}
className="MuiInput-input-13"
defaultValue={undefined}
disabled={false}
id="input-with-icon-textfield"
name={undefined}
onBlur={[Function]}
onChange={[Function]}
placeholder="Filter"
onFocus={[Function]}
onKeyDown={undefined}
onKeyUp={undefined}
placeholder={undefined}
readOnly={undefined}
required={false}
rows={undefined}
type="text"
value="filter"
/>
</div>
</form>
</div>
`;
import React from 'react'
import React, { Fragment } from 'react'
import PropTypes from 'prop-types'
import Item from "../../container/ItemContainer/ItemContainer";
import { Filter } from "../Filter/Filter";
import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact";
import { CSSTransitionGroup } from 'react-transition-group' // ES6
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 }) => (
<Container>
<Row className="justify-content-md-center justify-content-center mx-auto">
<Col sm="12" md="8" lg="6">
<Card className="mt-4 mb-4 mx-auto">
<CardBody>
<Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<ListGroup>
<Fragment>
<Grid container justify="center">
<Grid item sm={12} md={8} lg={6}>
<Paper className="mt-4 mb-4 mx-auto" elevation={1}>
<Filter filterTerm={filterTerm} updateFilter={updateFilter} />
<List>
<CSSTransitionGroup
transitionName="example"
transitionAppear={true}
......@@ -27,15 +27,12 @@ const InventoryList = ({ items, filterTerm, updateFilter, deleteItem }) => (
{...item}
/>
)}
</CSSTransitionGroup>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</List>
</Paper>
</Grid>
</Grid>
</Fragment>
)
InventoryList.propTypes = {
......
......@@ -2,30 +2,22 @@
exports[`InventoryList should render as expected 1`] = `
<div
className="container"
className="MuiGrid-container-1 MuiGrid-justify-xs-center-18"
>
<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
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
className="card mt-4 mb-4 mx-auto"
name="Filter"
/>
<ul
className="MuiList-root-125 MuiList-padding-126"
>
<div
className="card-body"
>
<div
name="Filter"
/>
<ul
className="list-group"
>
<span />
</ul>
</div>
</div>
<span />
</ul>
</div>
</div>
</div>
......
import React from "react";
import PropTypes from "prop-types";
import { ListGroupItem, Badge, Fa } from "mdbreact";
import { Row, Col } from "mdbreact";
import ListItem from '@material-ui/core/ListItem';
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 }) => (
<ListGroupItem>
<Row>
<Col md="6" xs="4">
{name}
</Col>
<ListItem>
<ListItemText>
{name}
</ListItemText>
<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">
<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>
</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 = {
id: PropTypes.string.isRequired,
......
import React from 'react';
import PropTypes from "prop-types";
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}) => (
<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 = {
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Navbar should render as expected 1`] = `
<nav
className="navbar navbar-expand-lg navbar-dark primary-color"
<header
className="MuiPaper-root-9 MuiPaper-elevation4-15 MuiAppBar-root-1 MuiAppBar-positionStatic-5 MuiAppBar-colorPrimary-7"
>
<a
className="navbar-brand"
href="/"
<div
className="MuiToolbar-root-36 MuiToolbar-regular-38 MuiToolbar-gutters-37"
>
<img
alt="codecentric"
height="60"
src="CC_RGB_onBlack.png"
/>
</a>
<a
className="navbar-brand"
href="/"
>
Test
</a>
</nav>
<h2
className="MuiTypography-root-40 MuiTypography-title-46 MuiTypography-colorInherit-59"
>
Test
</h2>
</div>
</header>
`;
......@@ -5,9 +5,6 @@ import thunk from 'redux-thunk';
import { Provider } from 'react-redux'
import registerServiceWorker from './registerServiceWorker';
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';
const store = createStore(
......
......@@ -2,17 +2,81 @@
# yarn lockfile v1
"@babel/runtime@^7.0.0-beta.42":
version "7.0.0-beta.55"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.55.tgz#0bc33aa5a6ac0b012f37e25b9e6aaa2e489a916b"
"@babel/runtime@7.0.0-beta.42":
version "7.0.0-beta.42"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.42.tgz#352e40c92e0460d3e82f49bd7e79f6cda76f919f"
dependencies:
core-js "^2.5.3"
regenerator-runtime "^0.11.1"
"@babel/runtime@^7.0.0-beta.55":
version "7.0.0-beta.56"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.56.tgz#cda612dffd5b1719a7b8e91e3040bd6ae64de8b0"
dependencies:
core-js "^2.5.7"
regenerator-runtime "^0.12.0"
"@material-ui/core@^1.4.3":
version "1.4.3"
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-1.4.3.tgz#e6bc29b441c07932cc64fffb02670792b119fb8e"
dependencies:
"@babel/runtime" "7.0.0-beta.42"
"@types/jss" "^9.5.3"
"@types/react-transition-group" "^2.0.8"
brcast "^3.0.1"
classnames "^2.2.5"
csstype "^2.5.2"
debounce "^1.1.0"
deepmerge "^2.0.1"
dom-helpers "^3.2.1"
hoist-non-react-statics "^2.5.0"
is-plain-object "^2.0.4"
jss "^9.3.3"
jss-camel-case "^6.0.0"
jss-default-unit "^8.0.2"
jss-global "^3.0.0"
jss-nested "^6.0.1"
jss-props-sort "^6.0.0"
jss-vendor-prefixer "^7.0.0"
keycode "^2.1.9"
normalize-scroll-left "^0.1.2"
popper.js "^1.14.1"
prop-types "^15.6.0"
react-event-listener "^0.6.2"
react-jss "^8.1.0"
react-transition-group "^2.2.1"
recompose "^0.28.0"
warning "^4.0.1"
"@material-ui/icons@^2.0.1":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-2.0.1.tgz#1151cc66a3d41099de3ddaac33488e399d3425f0"
dependencies:
"@babel/runtime" "7.0.0-beta.42"
recompose "^0.28.0"
"@types/jss@^9.5.3":
version "9.5.4"
resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.4.tgz#89a4ee32a14a8d2937187b1a7f443750e964a74d"
dependencies:
csstype "^2.0.0"
indefinite-observable "^1.0.1"
"@types/node@*":
version "10.5.5"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.5.5.tgz#8e84d24e896cd77b0d4f73df274027e3149ec2ba"
"@types/react-transition-group@^2.0.8":
version "2.0.12"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.12.tgz#ee2dc2abe8930d888ea3d88d759518f739b740c9"
dependencies:
"@types/react" "*"
"@types/react@*":
version "16.4.7"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.7.tgz#f33f6d759a7e1833befa15224d68942d178a5a3f"
dependencies:
csstype "^2.2.0"
abab@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
......@@ -58,10 +122,6 @@ acorn@^5.0.0, acorn@^5.5.0:
version "5.7.1"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"
address@1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/address/-/address-1.0.2.tgz#480081e82b587ba319459fef512f516fe03d58af"
address@1.0.3, address@^1.0.1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
......@@ -74,13 +134,6 @@ ajv-keywords@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
ajv@^4.9.1:
version "4.11.8"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
dependencies:
co "^4.6.0"
json-stable-stringify "^1.0.1"
ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0:
version "5.5.2"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
......@@ -115,10 +168,6 @@ amdefine@>=0.0.4:
version "1.0.1"
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
anser@1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.1.tgz#c3641863a962cebef941ea2c8706f2cb4f0716bd"
ansi-align@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
......@@ -129,10 +178,6 @@ ansi-escapes@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
ansi-escapes@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
ansi-escapes@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
......@@ -298,10 +343,6 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
assert-plus@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
assert@^1.1.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
......@@ -338,17 +379,6 @@ atob@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
autoprefixer@7.1.2:
version "7.1.2"
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
dependencies:
browserslist "^2.1.5"
caniuse-lite "^1.0.30000697"
normalize-range "^0.1.2"
num2fraction "^1.2.2"
postcss "^6.0.6"
postcss-value-parser "^3.2.3"