Merge pull request #2 from Zetoff/develop

first working version

Author: PolGuixe

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "es2015",
+    "stage-2",
+    "react",
+    "flow",
+  ]
+}

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "airbnb"
+  ],
+  "parser": "babel-eslint",
+  "rules": {
+    "strict": 0,
+    "react/require-default-props": 0
+  }
+}

.flowconfig

@@ -0,0 +1,9 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]

.gitignore

@@ -0,0 +1,18 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# jest testing
+coverage
+
+# Dependency directories
+node_modules/
+
+# Yarn Integrity file
+.yarn-integrity
+
+# Distributed code
+lib

.npmignore

@@ -0,0 +1 @@
+src/

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "material-ui-layout",
+  "version": "0.0.2",
+  "description": "Layout components for material-ui",
+  "main": "./lib/index.js",
+  "scripts": {
+    "build": "babel src/ -d lib/",
+    "flow": "flow",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "prepublish": "npm run test && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Zetoff/material-ui-layout.git"
+  },
+  "keywords": [
+    "material-ui",
+    "layout",
+    "react"
+  ],
+  "author": "polguixe",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Zetoff/material-ui-layout/issues"
+  },
+  "homepage": "https://github.com/Zetoff/material-ui-layout#readme",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.0.0",
+    "babel-jest": "^21.0.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "eslint": "^4.6.1",
+    "eslint-config-airbnb": "^15.1.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.3.0",
+    "flow-bin": "^0.54.1",
+    "jest": "^21.0.2"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "lodash": "^4.17.4",
+    "material-ui": "^1.0.0-beta.9",
+    "material-ui-icons": "^1.0.0-beta.5",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-controllables": "^0.6.0",
+    "react-dom": "^15.6.1",
+    "recompose": "^0.25.0"
+  }
+}

src/components/Footer/Footer.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+
+import styles from './styles';
+
+class Footer extends React.PureComponent {
+  static propTypes = {
+    classes: PropTypes.shape({}).isRequired,
+    children: PropTypes.element.isRequired,
+  };
+
+  render() {
+    const { classes, children } = this.props;
+    return (
+      <div className={classes.footer}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(Footer);

src/components/Footer/index.js

@@ -0,0 +1,3 @@
+import Footer from './Footer';
+
+export default Footer;

src/components/Footer/styles.js

@@ -0,0 +1,19 @@
+const styles = theme => ({
+  footer: {
+    backgroundColor: theme.palette.background.appBar,
+    color: theme.palette.getContrastText(theme.palette.background.appBar),
+    padding: '20px 10px',
+  },
+  message: {
+    textAlign: 'center',
+    marginBottom: '30px',
+  },
+  logoImage: {
+    maxHeight: '50px',
+    maxWidth: '300px',
+    margin: '0',
+    padding: '0',
+  },
+});
+
+export default styles;

src/components/Layout/Layout.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import classNames from 'classnames';
+import Drawer from 'material-ui/Drawer';
+import controllable from 'react-controllables';
+
+import styles from './styles';
+
+import NavBar from '../NavBar';
+import Footer from '../Footer';
+
+// TODO create Layout Library
+
+class Layout extends React.PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    classes: PropTypes.shape({}),
+    children: PropTypes.element.isRequired,
+    navbarPostion: PropTypes.string,
+    stickyFooter: PropTypes.bool,
+    footerContent: PropTypes.element,
+    navBarContent: PropTypes.element,
+    drawerOpen: PropTypes.bool.isRequired,
+    onDrawerOpenChange: PropTypes.func,
+    drawerContent: PropTypes.element,
+    navBarProps: PropTypes.shape({}),
+    drawerProps: PropTypes.shape({}),
+    footerProps: PropTypes.shape({}),
+  };
+
+  static defaultProps = {
+    title: '',
+    navbarPostion: 'default',
+    stickyFooter: false,
+    drawerOpen: false,
+  };
+
+  handleDrawerClose = () => {
+    if (!this.props.onDrawerOpenChange) return;
+
+    this.props.onDrawerOpenChange(false);
+  };
+
+  toggleDrawer = () => {
+    if (!this.props.onDrawerOpenChange) return;
+
+    this.props.onDrawerOpenChange(!this.props.drawerOpen);
+  };
+
+  render() {
+    const {
+      title,
+      logo, // TODO what kind of logo can we expect?.....
+      classes,
+      children,
+      navbarPostion,
+      stickyFooter,
+      footerContent,
+      navBarContent,
+      drawerContent,
+      drawerOpen,
+      navBarProps,
+      drawerProps,
+      footerProps,
+    } = this.props;
+
+    const mainClassnames = classNames(
+      classes.main,
+      { [`${classes.mainFixedNavbar}`]: navbarPostion === 'fixed' },
+      { [`${classes.mainStickyFooter}`]: stickyFooter },
+    );
+
+    return (
+      <div className={classes.layout}>
+        <NavBar {...navBarProps} title={title} logo={logo} onIconClick={this.toggleDrawer}>
+          {navBarContent}
+        </NavBar>
+        {drawerContent ? (
+          <Drawer {...drawerProps} open={drawerOpen} onRequestClose={this.handleDrawerClose}>
+            {drawerContent}
+          </Drawer>
+        ) : null}
+        <main className={mainClassnames}>{children}</main>
+        {footerContent ? <Footer {...footerProps}>{footerContent}</Footer> : null}
+      </div>
+    );
+  }
+}
+
+export default controllable(withStyles(styles)(Layout), ['drawerOpen']);

src/components/Layout/index.js

@@ -0,0 +1,3 @@
+import Layout from './Layout';
+
+export default Layout;

src/components/Layout/styles.js

@@ -0,0 +1,24 @@
+const styles = {
+  layout: {
+    display: 'flex',
+    minHeight: '100vh',
+    flexDirection: 'column',
+  },
+  main: {
+    paddingTop: '0px',
+    display: 'flex',
+  },
+  mainFixedNavbar: {
+    marginTop: '64px',
+  },
+  mainStickyFooter: {
+    flex: 1,
+  },
+  '@media (max-width: 599px)': {
+    mainFixedNavbar: {
+      marginTop: '56px',
+    },
+  },
+};
+
+export default styles;

src/components/NavBar/NavBar.jsx

@@ -0,0 +1,27 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import AppBar from 'material-ui/AppBar';
+
+import styles from './styles';
+
+class NavBar extends React.PureComponent {
+  static propTypes = {
+    classes: PropTypes.shape({}),
+    children: PropTypes.element,
+    navbarPostion: PropTypes.string,
+  };
+
+  render() {
+    const { children, navbarPostion, classes, ...other } = this.props;
+    return (
+      <AppBar position={navbarPostion} color="default">
+        {React.cloneElement(children, { ...other })}
+      </AppBar>
+    );
+  }
+}
+
+export default withStyles(styles)(NavBar);

src/components/NavBar/index.js

@@ -0,0 +1,3 @@
+import NavBar from './NavBar';
+
+export default NavBar;

src/components/NavBar/styles.js

@@ -0,0 +1 @@
+export default {};

src/index.js

@@ -0,0 +1,11 @@
+import Layout from './components/Layout';
+
+export { default as AppBar } from './components/NavBar';
+export { default as Footer } from './components/Footer';
+
+// I am changing the name from NavBar to AppBar
+export { default as BasicAppBar } from './templates/NavBar/BasicNavBar';
+export { default as BasicFooter } from './templates/Footer/BasicFooter';
+export { default as BasicDrawer } from './templates/Drawer/BasicDrawer';
+
+export default Layout;

src/templates/Drawer/BasicDrawer/BasicDrawer.jsx

@@ -0,0 +1,34 @@
+import _ from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
+import Icon from 'material-ui/Icon';
+
+import styles from './styles';
+
+class BasicDrawer extends React.PureComponent {
+  static propTypes = {
+    links: PropTypes.arrayOf(PropTypes.shape({})),
+    classes: PropTypes.shape({}),
+  };
+  render() {
+    const { links, classes } = this.props;
+    return (
+      <div>
+        <List className={classes.list}>
+          {_.map(links, link => (
+            <ListItem button onClick={link.onClick} key={`link-${link.label}`}>
+              <ListItemIcon>
+                {link.icon ? <Icon>{link.icon}</Icon> : <Icon>arrow_right</Icon>}
+              </ListItemIcon>
+              <ListItemText primary={link.label} />
+            </ListItem>
+          ))}
+        </List>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(BasicDrawer);

src/templates/Drawer/BasicDrawer/index.js

@@ -0,0 +1,3 @@
+import BasicDrawer from './BasicDrawer';
+
+export default BasicDrawer;

src/templates/Drawer/BasicDrawer/styles.js

@@ -0,0 +1,6 @@
+export default {
+  list: {
+    width: 250,
+    flex: 'initial',
+  },
+};