├── .meteor ├── .gitignore ├── release ├── platforms ├── .id ├── .finished-upgraders ├── packages └── versions ├── imports └── ui │ ├── components │ ├── App │ │ ├── App.scss │ │ ├── index.js │ │ └── App.js │ ├── TopBar │ │ ├── TopBar.scss │ │ ├── index.js │ │ └── TopBar.js │ ├── BottomBar │ │ ├── BottomBar.scss │ │ ├── index.js │ │ └── BottomBar.js │ └── Content │ │ ├── index.js │ │ ├── Content.scss │ │ └── Content.js │ └── pages │ ├── 404.js │ ├── Shopping.js │ ├── Order.js │ └── Home.js ├── .stylelintrc ├── .gitignore ├── public ├── favicon.png └── screen-shot.png ├── server └── main.js ├── client ├── test │ ├── .eslintrc │ └── App.test.js ├── main.scss ├── main.js └── main.html ├── .babelrc ├── .eslintrc ├── LICENSE ├── README.md └── package.json /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.6 2 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /imports/ui/components/App/App.scss: -------------------------------------------------------------------------------- 1 | // App.scss 2 | -------------------------------------------------------------------------------- /imports/ui/components/TopBar/TopBar.scss: -------------------------------------------------------------------------------- 1 | // TopBar.scss 2 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Webstorm indexes file 2 | .idea 3 | 4 | # Node modules packages 5 | node_modules/ 6 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manhhailua/meteor-react-mui-starter-app/HEAD/public/favicon.png -------------------------------------------------------------------------------- /public/screen-shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manhhailua/meteor-react-mui-starter-app/HEAD/public/screen-shot.png -------------------------------------------------------------------------------- /imports/ui/components/BottomBar/BottomBar.scss: -------------------------------------------------------------------------------- 1 | .bottom-bar { 2 | bottom: 0; 3 | position: absolute; 4 | width: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /server/main.js: -------------------------------------------------------------------------------- 1 | import { Meteor } from 'meteor/meteor'; 2 | 3 | Meteor.startup(() => { 4 | // code to run on server at startup 5 | }); 6 | -------------------------------------------------------------------------------- /imports/ui/components/App/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhpt2 on 5/27/17. 3 | */ 4 | 5 | import App from './App'; 6 | 7 | export default App; 8 | -------------------------------------------------------------------------------- /client/test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "rules": { 6 | "func-names": "off", 7 | "prefer-arrow-callback": "off" 8 | } 9 | } -------------------------------------------------------------------------------- /imports/ui/components/TopBar/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/2/17. 3 | */ 4 | 5 | import TopBar from './TopBar.js'; 6 | 7 | export default TopBar; 8 | -------------------------------------------------------------------------------- /client/main.scss: -------------------------------------------------------------------------------- 1 | // Variables declaration 2 | 3 | // Global styles 4 | body { 5 | font-family: 'Roboto', sans-serif; 6 | margin: 0; 7 | overflow: hidden; 8 | } 9 | -------------------------------------------------------------------------------- /imports/ui/components/Content/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/2/17. 3 | */ 4 | 5 | import Content from './Content.js'; 6 | 7 | export default Content; 8 | -------------------------------------------------------------------------------- /imports/ui/components/BottomBar/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/2/17. 3 | */ 4 | 5 | import BottomBar from './BottomBar.js'; 6 | 7 | export default BottomBar; 8 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "targets": { 7 | "browsers": [ 8 | "last 2 versions", 9 | "safari >= 7", 10 | "ie >= 10" 11 | ] 12 | } 13 | } 14 | ], 15 | "react", 16 | "stage-0" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | 1i1bxlso4trpgfdpgtx 8 | -------------------------------------------------------------------------------- /imports/ui/components/Content/Content.scss: -------------------------------------------------------------------------------- 1 | $topBarHeight: 64px; 2 | $bottomBarHeight: 56px; 3 | 4 | .content { 5 | position: absolute; 6 | margin: $topBarHeight 0 $bottomBarHeight 0; 7 | padding: 15px; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | height: calc(100% - #{$topBarHeight} - #{$bottomBarHeight}); 13 | overflow-y: scroll; 14 | } 15 | -------------------------------------------------------------------------------- /client/main.js: -------------------------------------------------------------------------------- 1 | /* global document */ 2 | 3 | import { MuiThemeProvider } from 'material-ui/styles'; 4 | import { Meteor } from 'meteor/meteor'; 5 | import React from 'react'; 6 | import { render } from 'react-dom'; 7 | import App from '../imports/ui/components/App'; 8 | 9 | Meteor.startup(() => { 10 | render( 11 | 12 | 13 | , 14 | document.getElementById('app'), 15 | ); 16 | }); 17 | -------------------------------------------------------------------------------- /.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | 1.2.0-standard-minifiers-package 10 | 1.2.0-meteor-platform-split 11 | 1.2.0-cordova-changes 12 | 1.2.0-breaking-changes 13 | 1.3.0-split-minifiers-package 14 | 1.4.0-remove-old-dev-bundle-link 15 | 1.4.1-add-shell-server-package 16 | 1.4.3-split-account-service-packages 17 | 1.5-add-dynamic-import-package 18 | -------------------------------------------------------------------------------- /client/main.html: -------------------------------------------------------------------------------- 1 | 2 | Meteor + React + Material-UI 3 | 4 | 8 | 9 | 10 | 14 | 15 | 16 | 17 |
18 | -------------------------------------------------------------------------------- /imports/ui/components/Content/Content.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/2/17. 3 | */ 4 | 5 | import { Paper } from 'material-ui'; 6 | import PropTypes from 'prop-types'; 7 | import React, { Component } from 'react'; 8 | import './Content.scss'; 9 | 10 | class Content extends Component { 11 | static propTypes = { 12 | children: PropTypes.oneOfType([ 13 | PropTypes.array, 14 | PropTypes.element, 15 | ]).isRequired, 16 | }; 17 | 18 | render() { 19 | return ( 20 | 21 | {this.props.children} 22 | 23 | ); 24 | } 25 | } 26 | 27 | export default Content; 28 | -------------------------------------------------------------------------------- /imports/ui/pages/404.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/5/17. 3 | */ 4 | 5 | import { Paper } from 'material-ui'; 6 | import React, { Component } from 'react'; 7 | import BottomBar from '../components/BottomBar'; 8 | import Content from '../components/Content'; 9 | import TopBar from '../components/TopBar'; 10 | 11 | class NotFound extends Component { 12 | render() { 13 | return ( 14 | 15 | 16 | 17 |

404

18 |

Oops! Not Found!

19 | 20 | 21 | 22 | ); 23 | } 24 | } 25 | 26 | export default NotFound; 27 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "parserOptions": { 4 | "allowImportExportEverywhere": true 5 | }, 6 | "env": { 7 | "es6": true, 8 | "meteor": true, 9 | "node": true, 10 | "browser": true 11 | }, 12 | "plugins": [ 13 | "meteor" 14 | ], 15 | "extends": [ 16 | "airbnb", 17 | "plugin:meteor/recommended" 18 | ], 19 | "settings": { 20 | "import/resolver": "meteor" 21 | }, 22 | "rules": { 23 | "react/prefer-stateless-function": 0, 24 | "import/no-extraneous-dependencies": 0, 25 | "import/extensions": 0, 26 | "no-underscore-dangle": 0, 27 | "react/jsx-filename-extension": 0, 28 | "react/forbid-prop-types": [ 29 | 1, 30 | { 31 | "forbid": [ 32 | "any" 33 | ] 34 | } 35 | ] 36 | } 37 | } -------------------------------------------------------------------------------- /client/test/App.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhpt2 on 5/27/17. 3 | */ 4 | 5 | import { expect } from 'chai'; 6 | import Enzyme, { mount } from 'enzyme'; 7 | import Adapter from 'enzyme-adapter-react-16'; 8 | import { MuiThemeProvider } from 'material-ui/styles'; 9 | import React from 'react'; 10 | import App from '../../imports/ui/components/App'; 11 | 12 | Enzyme.configure({ adapter: new Adapter() }); 13 | 14 | describe('', function () { 15 | let wrapper = null; 16 | 17 | before(function (done) { 18 | // All mui (material-ui) components need muiTheme context 19 | // So, we have to wrap our component inside a mui provider 20 | wrapper = mount(( 21 | 22 | 23 | 24 | )); 25 | 26 | done(); 27 | }); 28 | 29 | it('has been rendered', function () { 30 | expect(wrapper.contains()).to.equal(true); 31 | }); 32 | 33 | it('has children correctly rendered', function () { 34 | expect(wrapper.find(App).children()).to.have.length.above(0); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /imports/ui/pages/Shopping.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/5/17. 3 | */ 4 | 5 | import { Paper } from 'material-ui'; 6 | import React, { Component } from 'react'; 7 | import BottomBar from '../components/BottomBar'; 8 | import Content from '../components/Content'; 9 | import TopBar from '../components/TopBar'; 10 | 11 | class Shopping extends Component { 12 | render() { 13 | return ( 14 | 15 | 16 | 17 |

Shopping Page

18 |

19 | Donec vel nulla sed dolor pretium aliquam a id risus. In id facilisis libero, ac 20 | sagittis orci. Suspendisse ac nulla vel turpis vestibulum condimentum. Curabitur laoreet 21 | dapibus ligula, id fringilla augue dignissim ut. Morbi congue nisi quis nulla tincidunt 22 | rutrum. Etiam imperdiet urna id justo gravida interdum. Praesent eu mi dictum, posuere 23 | risus eu, vestibulum neque. 24 |

25 | 26 | 27 | 28 | ); 29 | } 30 | } 31 | 32 | export default Shopping; 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Mạnh Phạm 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /imports/ui/pages/Order.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/5/17. 3 | */ 4 | 5 | import { Paper } from 'material-ui'; 6 | import React, { Component } from 'react'; 7 | import BottomBar from '../components/BottomBar'; 8 | import Content from '../components/Content'; 9 | import TopBar from '../components/TopBar'; 10 | 11 | class Order extends Component { 12 | render() { 13 | return ( 14 | 15 | 16 | 17 |

Order Page

18 |

19 | Pellentesque eu iaculis urna, sit amet suscipit tortor. Etiam maximus leo et ante 20 | interdum, a rutrum leo dictum. Vivamus finibus massa commodo tortor ultrices interdum. 21 | Mauris sed euismod risus. Cras hendrerit leo vel magna lacinia, in mattis metus 22 | imperdiet. Phasellus pulvinar, diam quis condimentum sagittis, nulla mi consequat 23 | turpis, vel lacinia arcu arcu in est. Fusce vel nulla eget mauris ultrices sodales. 24 |

25 | 26 | 27 | 28 | ); 29 | } 30 | } 31 | 32 | export default Order; 33 | -------------------------------------------------------------------------------- /imports/ui/components/App/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/1/17. 3 | */ 4 | import { createBrowserHistory } from 'history'; 5 | import React, { Component } from 'react'; 6 | import { Route, Router, Switch } from 'react-router-dom'; 7 | import injectTapEventPlugin from 'react-tap-event-plugin'; 8 | import NotFound from '../../pages/404'; 9 | import Home from '../../pages/Home'; 10 | import Order from '../../pages/Order'; 11 | import Shopping from '../../pages/Shopping'; 12 | import './App.scss'; 13 | 14 | const history = createBrowserHistory(); 15 | 16 | // Needed for onTouchTap of Material-UI 17 | // http://stackoverflow.com/a/34015469/988941 18 | injectTapEventPlugin(); 19 | 20 | class App extends Component { 21 | render() { 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | } 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # meteor-react-mui-starter-app 2 | 3 | This project is to create a codebase for every app use stack Meteor + React + Material-UI. 4 | 5 | Link to [Demo](https://meteor-react-mui-starter-app.herokuapp.com/) 6 | 7 | ## Screen shot 8 | 9 | mobile-screen-shot 10 | 11 | ## Guides 12 | 13 | #### Installation 14 | 15 | Ensure that you have `git` and `meteor` installed. 16 | 17 | ``` 18 | git clone https://github.com/manhhailua/meteor-react-mui-starter-app.git 19 | 20 | cd meteor-react-mui-starter-app/ 21 | 22 | meteor npm install 23 | 24 | meteor 25 | ``` 26 | 27 | Now you are good to go developing your new app. 28 | 29 | #### Testing 30 | 31 | Current testing stack is: Mocha - Chai - Enzyme. 32 | 33 | To start testing as you type: 34 | 35 | ``` 36 | meteor npm run test 37 | ``` 38 | 39 | In case you want to run the test just once: 40 | 41 | ``` 42 | meteor npm run test:once 43 | ``` 44 | 45 | #### Styling 46 | 47 | SASS was integrated into this repo. So, you can use [sass](http://sass-lang.com/) or pure css in your own way. 48 | 49 | ## Author 50 | 51 | Manh Pham 52 | 53 | ## License 54 | 55 | MIT -------------------------------------------------------------------------------- /.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project, one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-base@1.2.0 # Packages every Meteor app needs to have 8 | mobile-experience@1.0.5 # Packages for a great mobile UX 9 | mongo@1.3.0 # The database Meteor supports right now 10 | blaze-html-templates@1.0.4 # Compile .html files into Meteor Blaze views 11 | reactive-var@1.0.11 # Reactive variable for tracker 12 | jquery@1.11.10 # Helpful client-side library 13 | tracker@1.1.3 # Meteor's client-side reactive programming library 14 | 15 | standard-minifier-css@1.3.5 # CSS minifier run for production mode 16 | standard-minifier-js@2.2.0 # JS minifier run for production mode 17 | es5-shim@4.6.15 # ECMAScript 5 compatibility for older browsers. 18 | ecmascript@0.9.0 # Enable ECMAScript2015+ syntax in app code 19 | shell-server@0.3.0 # Server-side component of the `meteor shell` command 20 | 21 | insecure@1.0.7 # Allow all DB writes from clients (for prototyping) 22 | fourseven:scss 23 | practicalmeteor:mocha 24 | dynamic-import@0.2.0 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "meteor-react-mui-starter-app", 3 | "version": "3.0.0", 4 | "author": "Manhhailua ", 5 | "bugs": "https://github.com/manhhailua/meteor-react-mui-starter-app/issues", 6 | "repository": "https://github.com/manhhailua/meteor-react-mui-starter-app.git", 7 | "license": "MIT", 8 | "scripts": { 9 | "start": "meteor run", 10 | "lint": "npm run lint:js && npm run lint:css", 11 | "lint:js": "eslint '{client,imports,server}/**/*.{js,jsx}' --fix", 12 | "lint:css": "stylelint '{client,imports}/**/*.{css,sass,scss}' --fix", 13 | "pretest": "npm run lint", 14 | "test": "meteor test -p 4000 --driver-package practicalmeteor:mocha", 15 | "test:once": "meteor test -p 4000 --once --driver-package practicalmeteor:mocha" 16 | }, 17 | "engines": { 18 | "node": ">=8.8.1", 19 | "npm": ">=5.4.2" 20 | }, 21 | "dependencies": { 22 | "history": "^4.7.2", 23 | "material-ui": "^0.19.4", 24 | "meteor-node-stubs": "^0.3.2", 25 | "prop-types": "^15.6.0", 26 | "react": "^16.0.0", 27 | "react-dom": "^16.0.0", 28 | "react-router-dom": "^4.2.2", 29 | "react-tap-event-plugin": "^3.0.2" 30 | }, 31 | "devDependencies": { 32 | "babel-cli": "^6.26.0", 33 | "babel-eslint": "^8.0.1", 34 | "babel-preset-env": "^1.6.1", 35 | "babel-preset-react": "^6.24.1", 36 | "babel-preset-stage-0": "^6.24.1", 37 | "chai": "^4.0.0", 38 | "chai-enzyme": "^0.7.1", 39 | "enzyme": "^3.1.0", 40 | "enzyme-adapter-react-16": "^1.0.2", 41 | "eslint": "^4.10.0", 42 | "eslint-config-airbnb": "^16.1.0", 43 | "eslint-import-resolver-meteor": "^0.4.0", 44 | "eslint-plugin-import": "^2.8.0", 45 | "eslint-plugin-jsx-a11y": "^6.0.2", 46 | "eslint-plugin-meteor": "^4.1.4", 47 | "eslint-plugin-react": "^7.4.0", 48 | "sinon": "^4.0.2", 49 | "stylelint": "^8.2.0", 50 | "stylelint-config-standard": "^17.0.0" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | allow-deny@1.1.0 2 | autoupdate@1.3.12 3 | babel-compiler@6.24.7 4 | babel-runtime@1.1.1 5 | base64@1.0.10 6 | binary-heap@1.0.10 7 | blaze@2.3.2 8 | blaze-html-templates@1.1.2 9 | blaze-tools@1.0.10 10 | boilerplate-generator@1.3.0 11 | caching-compiler@1.1.9 12 | caching-html-compiler@1.1.2 13 | callback-hook@1.0.10 14 | check@1.2.5 15 | coffeescript@1.12.7_3 16 | coffeescript-compiler@1.12.7_3 17 | ddp@1.4.0 18 | ddp-client@2.2.0 19 | ddp-common@1.3.0 20 | ddp-server@2.1.0 21 | deps@1.0.12 22 | diff-sequence@1.0.7 23 | dynamic-import@0.2.0 24 | ecmascript@0.9.0 25 | ecmascript-runtime@0.5.0 26 | ecmascript-runtime-client@0.5.0 27 | ecmascript-runtime-server@0.5.0 28 | ejson@1.1.0 29 | es5-shim@4.6.15 30 | fourseven:scss@4.5.4 31 | geojson-utils@1.0.10 32 | hot-code-push@1.0.4 33 | html-tools@1.0.11 34 | htmljs@1.0.11 35 | http@1.3.0 36 | id-map@1.0.9 37 | insecure@1.0.7 38 | jquery@1.11.10 39 | launch-screen@1.1.1 40 | livedata@1.0.18 41 | logging@1.1.19 42 | meteor@1.8.1 43 | meteor-base@1.2.0 44 | minifier-css@1.2.16 45 | minifier-js@2.2.1 46 | minimongo@1.4.0 47 | mobile-experience@1.0.5 48 | mobile-status-bar@1.0.14 49 | modules@0.11.0 50 | modules-runtime@0.9.0 51 | mongo@1.3.0 52 | mongo-dev-server@1.1.0 53 | mongo-id@1.0.6 54 | npm-mongo@2.2.33 55 | observe-sequence@1.0.16 56 | ordered-dict@1.0.9 57 | practicalmeteor:chai@2.1.0_1 58 | practicalmeteor:loglevel@1.2.0_2 59 | practicalmeteor:mocha@2.4.5_6 60 | practicalmeteor:mocha-core@1.0.1 61 | practicalmeteor:sinon@1.14.1_2 62 | promise@0.10.0 63 | random@1.0.10 64 | reactive-var@1.0.11 65 | reload@1.1.11 66 | retry@1.0.9 67 | routepolicy@1.0.12 68 | shell-server@0.3.0 69 | spacebars@1.0.15 70 | spacebars-compiler@1.1.3 71 | standard-minifier-css@1.3.5 72 | standard-minifier-js@2.2.1 73 | templating@1.3.2 74 | templating-compiler@1.3.3 75 | templating-runtime@1.3.2 76 | templating-tools@1.1.2 77 | tmeasday:test-reporter-helpers@0.2.1 78 | tracker@1.1.3 79 | ui@1.0.13 80 | underscore@1.0.10 81 | url@1.1.0 82 | webapp@1.4.0 83 | webapp-hashing@1.0.9 84 | -------------------------------------------------------------------------------- /imports/ui/components/BottomBar/BottomBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/1/17. 3 | */ 4 | 5 | import { BottomNavigation, BottomNavigationItem } from 'material-ui/BottomNavigation'; 6 | import { FontIcon, Paper } from 'material-ui'; 7 | import PropTypes from 'prop-types'; 8 | import React, { Component } from 'react'; 9 | import { withRouter } from 'react-router-dom'; 10 | import './BottomBar.scss'; 11 | 12 | class BottomBar extends Component { 13 | static propTypes = { 14 | history: PropTypes.object, 15 | }; 16 | 17 | static defaultProps = { 18 | history: {}, 19 | }; 20 | 21 | constructor() { 22 | super(); 23 | 24 | this.state = { 25 | selectedIndex: 0, 26 | }; 27 | } 28 | 29 | select = (index) => { 30 | this.setState({ selectedIndex: index }); 31 | }; 32 | 33 | render() { 34 | return ( 35 | 36 | 37 | home} 40 | onTouchTap={() => { 41 | this.select(0); 42 | this.props.history.push('/'); 43 | }} 44 | /> 45 | shopping_cart} 48 | onTouchTap={() => { 49 | this.select(1); 50 | this.props.history.push('/shopping'); 51 | }} 52 | /> 53 | local_offer} 56 | onTouchTap={() => { 57 | this.select(2); 58 | this.props.history.push('/order'); 59 | }} 60 | /> 61 | 62 | 63 | ); 64 | } 65 | } 66 | 67 | export default withRouter(BottomBar); 68 | -------------------------------------------------------------------------------- /imports/ui/components/TopBar/TopBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/1/17. 3 | */ 4 | 5 | import { AppBar, Avatar, Divider, Drawer, FontIcon, IconButton, Paper } from 'material-ui'; 6 | import { List, ListItem } from 'material-ui/List'; 7 | import React, { Component } from 'react'; 8 | import './TopBar.scss'; 9 | 10 | class TopBar extends Component { 11 | constructor() { 12 | super(); 13 | 14 | this.state = { 15 | isLeftDrawerOpened: false, 16 | }; 17 | } 18 | 19 | toggleLeftDrawer = () => { 20 | this.setState({ isLeftDrawerOpened: !this.state.isLeftDrawerOpened }); 21 | }; 22 | 23 | render() { 24 | return ( 25 | 26 | {/* Main Application Bar */} 27 | 31 | more_vert 32 | 33 | } 34 | onLeftIconButtonTouchTap={this.toggleLeftDrawer} 35 | /> 36 | 37 | {/* Left Drawer */} 38 | 43 | {/* Main Menu */} 44 | 45 | {/* User Avatar */} 46 | face} /> 50 | } 51 | primaryText="Your Name" 52 | secondaryText="your-email@mail.com" 53 | /> 54 | 55 | 56 | {/* Main Menu's Items */} 57 | inbox} 60 | /> 61 | local_offer} 64 | /> 65 | shopping_cart} 68 | /> 69 | grade} 72 | /> 73 | 74 | 75 | {/* Secondary Menu's Items */} 76 | settings} 79 | /> 80 | help} 83 | /> 84 | remove_circle_outline} 87 | /> 88 | 89 | 90 | 91 | ); 92 | } 93 | } 94 | 95 | export default TopBar; 96 | -------------------------------------------------------------------------------- /imports/ui/pages/Home.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by manhhailua on 1/5/17. 3 | */ 4 | 5 | import { Paper } from 'material-ui'; 6 | import React, { Component } from 'react'; 7 | import BottomBar from '../components/BottomBar'; 8 | import Content from '../components/Content'; 9 | import TopBar from '../components/TopBar'; 10 | 11 | class Home extends Component { 12 | render() { 13 | return ( 14 | 15 | 16 | 17 |

Home Page

18 |

Welcome to a meteor stater app.

19 |

I am using React and Material-UI to be what being displayed.

20 |

21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac purus sed justo 22 | bibendum ornare. Sed ultricies, lectus id hendrerit aliquet, velit odio facilisis ipsum, 23 | at maximus arcu metus quis mauris. Nulla elementum lorem eu tellus auctor porta. 24 | Maecenas iaculis maximus mi eget congue. In ac mauris consectetur, auctor lectus sed, 25 | vestibulum arcu. Integer vel nisi mattis, tincidunt ipsum ac, vehicula urna. Maecenas 26 | dapibus lorem sit amet ante aliquam, sed dignissim nulla laoreet. Integer vestibulum 27 | pulvinar efficitur. Vivamus in lobortis nisi. Suspendisse vel velit mattis, gravida 28 | metus eu, tincidunt odio. 29 |

30 |

31 | Vivamus dignissim libero interdum mauris efficitur, sit amet fermentum lacus ornare. 32 | Phasellus tempor leo vulputate mi faucibus vehicula. Suspendisse potenti. Donec sit amet 33 | vehicula lectus, vitae volutpat nulla. Interdum et malesuada fames ac ante ipsum primis 34 | in faucibus. Suspendisse varius fringilla odio non facilisis. Ut blandit felis mauris, 35 | et maximus eros vulputate eu. Nullam id ornare leo. Vivamus id purus eget nisl pretium 36 | facilisis. Maecenas molestie augue enim. Nam sit amet fermentum risus. Mauris pharetra 37 | metus sed ligula congue auctor. Mauris scelerisque massa enim, ut consequat dui laoreet 38 | sed. Ut feugiat leo arcu. Vestibulum congue orci nec dolor eleifend rhoncus. Class 39 | aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 40 | himenaeos. 41 |

42 |

43 | Fusce tincidunt, quam nec semper accumsan, quam leo interdum elit, mattis luctus nibh 44 | erat ac eros. Morbi porta, purus sed commodo vestibulum, nulla elit mattis urna, et 45 | vestibulum quam orci quis nulla. Nullam nec viverra enim, sit amet ornare nunc. 46 | Curabitur lacinia accumsan massa, vel lacinia nibh. Nulla eget lectus nibh. Aenean 47 | tempus aliquet tellus eget sodales. Vestibulum in suscipit felis, at lobortis arcu. 48 | Aliquam dui est, molestie ullamcorper semper dapibus, convallis quis urna. Fusce id 49 | tellus sit amet nulla consectetur facilisis. Nulla semper justo et diam tristique 50 | vestibulum. 51 |

52 |

- Manh Pham -

53 |

manhhailua@gmail.com

54 | 55 | 56 | 57 | ); 58 | } 59 | } 60 | 61 | export default Home; 62 | --------------------------------------------------------------------------------