├── .meteor ├── .gitignore ├── release ├── platforms ├── .finished-upgraders ├── .id ├── packages └── versions ├── packages └── browserify-deps │ ├── README.md │ ├── .npm │ └── package │ │ ├── .gitignore │ │ ├── README │ │ └── npm-shrinkwrap.json │ ├── browserify-deps.js │ ├── browserify-deps-tests.js │ ├── client.browserify.js │ └── package.js ├── client ├── head.html ├── startup.jsx └── Main.jsx └── README.md /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.1.0.2 2 | -------------------------------------------------------------------------------- /packages/browserify-deps/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /packages/browserify-deps/.npm/package/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/browserify-deps/browserify-deps.js: -------------------------------------------------------------------------------- 1 | // Write your package code here! 2 | -------------------------------------------------------------------------------- /client/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # meteor-react-material-ui-demo 2 | Material UI + React (browserify) 3 | 4 | [Post](http://grigio.org/meteor-react-and-material-ui-the-easy-way/) 5 | -------------------------------------------------------------------------------- /packages/browserify-deps/browserify-deps-tests.js: -------------------------------------------------------------------------------- 1 | // Write your tests here! 2 | // Here is an example. 3 | Tinytest.add('example', function (test) { 4 | test.equal(true, true); 5 | }); 6 | -------------------------------------------------------------------------------- /client/startup.jsx: -------------------------------------------------------------------------------- 1 | Meteor.startup(function () { 2 | // Required by Material UI http://material-ui.com/#/get-started 3 | injectTapEventPlugin(); 4 | // React component mounted in the DOM 5 | React.render(
, document.body); 6 | }); -------------------------------------------------------------------------------- /packages/browserify-deps/client.browserify.js: -------------------------------------------------------------------------------- 1 | // without var it becomes a package scoped variable 2 | uppercase = require('upper-case'); 3 | React = require('react'); 4 | mui = require('material-ui'); 5 | injectTapEventPlugin = require("react-tap-event-plugin"); -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | 1ugduw51124iw7xcspjt 8 | -------------------------------------------------------------------------------- /.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-platform 8 | autopublish 9 | insecure 10 | cosmos:browserify 11 | browserify-deps 12 | babel-compiler 13 | babel-runtime 14 | jsx 15 | react-meteor-data 16 | -------------------------------------------------------------------------------- /packages/browserify-deps/.npm/package/README: -------------------------------------------------------------------------------- 1 | This directory and the files immediately inside it are automatically generated 2 | when you change this package's NPM dependencies. Commit the files in this 3 | directory (npm-shrinkwrap.json, .gitignore, and this README) to source control 4 | so that others run the same versions of sub-dependencies. 5 | 6 | You should NOT check in the node_modules directory that Meteor automatically 7 | creates; if you are using git, the .gitignore file tells git to ignore it. 8 | -------------------------------------------------------------------------------- /packages/browserify-deps/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'browserify-deps', 3 | version: '0.0.1', 4 | }); 5 | 6 | Npm.depends({ 7 | 'upper-case':'1.1.2', 8 | 'react': '0.13.3', 9 | 'material-ui':'0.8.0' 10 | }); 11 | 12 | Package.onUse(function(api) { 13 | // add package 14 | // api.use(['react'], 'client'); 15 | api.use(['cosmos:browserify@0.3.0'], 'client'); 16 | 17 | // add browserify file in step #2 with your package's client files 18 | api.addFiles(['client.browserify.js'], 'client'); 19 | 20 | // OPTIONAL: make variable app (global) scoped: 21 | api.export('uppercase', 'client'); 22 | api.export('React', 'client'); 23 | api.export('mui', 'client'); 24 | api.export('injectTapEventPlugin', 'client'); 25 | 26 | }); 27 | 28 | // Package.onTest(function(api) { 29 | // api.use('tinytest'); 30 | // api.use('browserify-deps'); 31 | // api.addFiles('browserify-deps-tests.js'); 32 | // }); -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | autopublish@1.0.3 2 | autoupdate@1.2.1 3 | babel-compiler@5.4.7 4 | babel-runtime@1.0.0 5 | base64@1.0.3 6 | binary-heap@1.0.3 7 | blaze@2.1.2 8 | blaze-tools@1.0.3 9 | boilerplate-generator@1.0.3 10 | browserify-deps@0.0.1 11 | callback-hook@1.0.3 12 | check@1.0.5 13 | coffeescript@1.0.6 14 | cosmos:browserify@0.3.0 15 | ddp@1.1.0 16 | deps@1.0.7 17 | ejson@1.0.6 18 | fastclick@1.0.3 19 | geojson-utils@1.0.3 20 | html-tools@1.0.4 21 | htmljs@1.0.4 22 | http@1.1.0 23 | id-map@1.0.3 24 | insecure@1.0.3 25 | jquery@1.11.3_2 26 | json@1.0.3 27 | jsx@1.0.0 28 | launch-screen@1.0.2 29 | livedata@1.0.13 30 | logging@1.0.7 31 | meteor@1.1.6 32 | meteor-platform@1.2.2 33 | minifiers@1.1.5 34 | minimongo@1.0.8 35 | mobile-status-bar@1.0.3 36 | mongo@1.1.0 37 | observe-sequence@1.0.6 38 | ordered-dict@1.0.3 39 | random@1.0.3 40 | react-meteor-data@0.0.1 41 | reactive-dict@1.1.0 42 | reactive-var@1.0.5 43 | reload@1.1.3 44 | retry@1.0.3 45 | routepolicy@1.0.5 46 | session@1.1.0 47 | spacebars@1.0.6 48 | spacebars-compiler@1.0.6 49 | templating@1.1.1 50 | tracker@1.0.7 51 | ui@1.0.6 52 | underscore@1.0.3 53 | url@1.0.4 54 | webapp@1.2.0 55 | webapp-hashing@1.0.3 56 | -------------------------------------------------------------------------------- /packages/browserify-deps/.npm/package/npm-shrinkwrap.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "material-ui": { 4 | "version": "0.8.0", 5 | "dependencies": { 6 | "classnames": { 7 | "version": "1.2.2" 8 | }, 9 | "react-draggable2": { 10 | "version": "0.5.1" 11 | } 12 | } 13 | }, 14 | "react": { 15 | "version": "0.13.3", 16 | "dependencies": { 17 | "envify": { 18 | "version": "3.4.0", 19 | "dependencies": { 20 | "through": { 21 | "version": "2.3.7" 22 | }, 23 | "jstransform": { 24 | "version": "10.1.0", 25 | "dependencies": { 26 | "base62": { 27 | "version": "0.1.1" 28 | }, 29 | "esprima-fb": { 30 | "version": "13001.1001.0-dev-harmony-fb" 31 | }, 32 | "source-map": { 33 | "version": "0.1.31", 34 | "dependencies": { 35 | "amdefine": { 36 | "version": "0.1.1" 37 | } 38 | } 39 | } 40 | } 41 | } 42 | } 43 | } 44 | } 45 | }, 46 | "react-tap-event-plugin": { 47 | "version": "0.1.7" 48 | }, 49 | "upper-case": { 50 | "version": "1.1.2" 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /client/Main.jsx: -------------------------------------------------------------------------------- 1 | var {RaisedButton, DatePicker, AppBar, AppCanvas} = mui; 2 | 3 | var ThemeManager = new mui.Styles.ThemeManager(); 4 | 5 | Main = React.createClass({ 6 | 7 | // Required by Material UI 8 | childContextTypes: { 9 | muiTheme: React.PropTypes.object 10 | }, 11 | getChildContext() { 12 | return { 13 | muiTheme: ThemeManager.getCurrentTheme() 14 | }; 15 | }, 16 | 17 | // Use `Session` or other reactive data sources ONLY if you have to communicate 18 | // with the rest of the Meteor stack 19 | componentWillMount() { 20 | Session.set('counter', 1 ); 21 | }, 22 | 23 | // Required to use Meteor reactive data sources 24 | mixins: [MeteorDataMixin], 25 | trackMeteorData(props, state) { 26 | // Put here your subscriptions 27 | return { 28 | counter: Session.get('counter') 29 | }; 30 | }, 31 | 32 | // react component private functions 33 | _reset() { 34 | Session.set('counter', 0 ); 35 | }, 36 | 37 | _increment() { 38 | Session.set('counter', this.data.counter + 1 ); 39 | }, 40 | 41 | _onChange(err, newDate) { 42 | console.log(newDate); 43 | }, 44 | 45 | // We can customize the internal format date. Default is mm/dd/yyyy 46 | _dateFormat(date) { 47 | var m = date.getMonth() + 1; 48 | var d = date.getDate(); 49 | var y = date.getFullYear(); 50 | return `${d}-${m}-${y}`; 51 | }, 52 | 53 | render: function() { 54 | var styles = { 55 | paddingTop: '200px', textAlign:'center' 56 | } 57 | 58 | return ( 59 | 60 | 61 |
62 | 63 | 64 | 66 |
67 | 68 | ); 69 | } 70 | 71 | }); --------------------------------------------------------------------------------