Initial commit

Author: bebraw

.bithoundrc

@@ -0,0 +1,5 @@
+{
+  "ignore": [
+    "dist/*.js"
+  ]
+}

.editorconfig

@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,4 @@
+gh-pages/
+dist-modules/
+dist/
+

.eslintrc

@@ -0,0 +1,38 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "node": true,
+    "jasmine": true
+  },
+  "plugins": [
+    "react"
+  ],
+  "globals": {
+    "jest": false
+  },
+  "ecmaFeatures": {
+    "jsx": true,
+    "globalReturn": false
+  },
+  "rules": {
+    "no-underscore-dangle": 0,
+    "no-use-before-define": 0,
+    "quotes": [2, "single"],
+    "comma-dangle": 0,
+    "react/jsx-boolean-value": 1,
+    "react/jsx-quotes": 1,
+    "react/jsx-no-undef": 1,
+    "react/jsx-sort-props": 1,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 1,
+    "react/no-unknown-property": 1,
+    "react/prop-types": 1,
+    "react/react-in-jsx-scope": 1,
+    "react/self-closing-comp": 1,
+    "react/wrap-multilines": 1
+  }
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1,4 @@
+gh-pages/
+node_modules
+*.log
+.DS_Store

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - "0.10"
+  - "0.12"

LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2015 Juho Vepsalainen
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,30 @@
+[![build status](https://secure.travis-ci.org/bebraw/react-component-boilerplate.png)](http://travis-ci.org/bebraw/react-component-boilerplate) [![bitHound Score](https://www.bithound.io/github/bebraw/react-component-boilerplate/badges/score.svg)](https://www.bithound.io/github/bebraw/react-component-boilerplate) [![Dependency Status](https://david-dm.org/bebraw/react-component-boilerplate.svg)](https://david-dm.org/bebraw/react-component-boilerplate)
+# react-component-boilerplate - Boilerplate for React.js components
+
+This is a simple boilerplate that has been developed to make it easier to develop React components. Check out [SurviveJS - Webpack and React](http://bebraw.com/) to dig deeper into the topic.
+
+> IMPORTANT! If you use Jest for testing and rely on **react/addons**, you should depend on that at */src*. Otherwise you might end up getting mysterious failures when running tests at Travis. If this isn't done, test and library code end up using different instances of React and you will get failures!
+
+## Basic Usage
+
+* Replacing meta information  - **npm run replace-meta** - This will allow you to update project metadata (GitHub user/project). Note that this can be potentially dangerous since it does just a naive search/replace over *README.md* and *package.json*!
+* Linting - **npm run lint**
+* Testing - **npm test** - This will lint too.
+* Developing - **npm start** - This will run a server at *localhost:3000* and use Hot Module Reloading.
+* Demo deployment - **npm run gh-pages** and **npm run deploy-gh-pages** - Demo will contain *README.md* by default and comes with simple styling based on Pure.
+* Generating a distribution version - **npm run dist-all** - This will generate `/dist` (UMD bundle + minified UMD bundle) and `/dist-modules`. Latter contains a version of `/src` that has been run through babel. It is meant for NPM users.
+
+Note that there are hooks for `npm version`. The system will run tests, generate a distribution bundle and include that into the version commit. This can fail in case dist doesn't contain any changes! After that has completed it will generate GitHub Pages and deploy a new version.
+
+```js
+var a = 5;
+var b = 10;
+
+// just trying out code highlighting feature here
+console.log(a + b);
+```
+
+## License
+
+react-component-boilerplate is available under MIT. See LICENSE for more details.
+

__tests__/boilerplate-test.js

@@ -0,0 +1,11 @@
+'use strict';
+
+//var React = require('react/addons');
+//var TestUtils = React.addons.TestUtils;
+
+describe('Boilerplate', function() {
+  it('should do boilerplate things', function() {
+    // TODO: test something now
+    expect(true).toEqual(true);
+  });
+});

demo/app.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Fork from 'react-ghfork';
+
+import readme from '../README.md';
+import pkgInfo from '../package.json';
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <div className='pure-g'>
+        <Fork className='right' project={pkgInfo.user + '/' + pkgInfo.name} />
+        <header className='pure-u-1'>
+          <h1>{pkgInfo.name}</h1>
+
+          <div className='description'>{pkgInfo.description}</div>
+        </header>
+        <article className='pure-u-1'>
+          <section className='demonstration'>
+            <div className='description'>
+            <h2>Demonstration</h2>
+
+            <p>Just demonstrating the awesomeness of this boilerplate here.</p>
+            </div>
+
+            <div>...</div>
+          </section>
+          <section className='documentation'>
+            <h2>README</h2>
+
+            <div dangerouslySetInnerHTML={{__html: readme}}></div>
+          </section>
+        </article>
+      </div>
+    );
+  }
+};

demo/images/bgnoise_lg.png

@@ -0,0 +1,17 @@
+import 'purecss';
+import 'highlight.js/styles/github.css';
+import 'react-ghfork/gh-fork-ribbon.css';
+import './main.css';
+import '../style.css';
+
+import React from 'react';
+import App from './app.jsx';
+
+main();
+
+function main() {
+  var app = document.createElement('div');
+  document.body.appendChild(app);
+
+  React.render(<App />, app);
+}

demo/index.js

@@ -0,0 +1,89 @@
+/* TODO: insert main styles of your demo here */
+
+body {
+    background: #fefefe;
+
+    font-family: Sans-Serif;
+
+    line-height: 1.5;
+}
+
+form label {
+    display: block;
+}
+
+header {
+    position: fixed;
+    padding: 0.5em;
+    top: 0;
+
+    text-align: center;
+
+    color: #333;
+    border: 0.1em solid #bbb;
+
+    background-image: url(./images/bgnoise_lg.png);
+}
+
+header h1 {
+    margin: 0;
+}
+
+header .description {
+    color: #888;
+}
+
+.highlight {
+    background: rgb(255, 255, 175);
+}
+
+.sticky {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.github-fork-ribbon {
+    position: fixed;
+
+    letter-spacing: 0.01em;
+}
+
+article {
+    display: block !important;
+
+    margin-top: 6em;
+    margin-left: auto;
+    margin-right: auto;
+
+    max-width: 768px;
+}
+
+article section {
+    margin-bottom: 2em;
+}
+
+article h2 {
+    margin-top: 2em;
+}
+
+pre {
+    background: #fafefe;
+    padding: 0.5em;
+}
+
+article .description {
+    margin: 1em;
+    padding: 1em;
+
+    max-width: 60em;
+
+    background: #fafafa;
+
+    border: 0.1em solid #eee;
+}
+
+article .description h2 {
+    margin: 0;
+}

demo/main.css

@@ -0,0 +1,11 @@
+'use strict';
+
+var ghpages = require('gh-pages');
+
+var config = require('../webpack.config');
+
+main();
+
+function main() {
+  ghpages.publish(config.output.path, console.error.bind(console));
+}

lib/deploy_gh_pages.js

@@ -0,0 +1,20 @@
+'use strict';
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+
+var config = require('../webpack.config');
+
+new WebpackDevServer(webpack(config), {
+  contentBase: __dirname,
+  hot: true,
+  historyApiFallback: true,
+  stats: {
+    colors: true
+  },
+}).listen(config.port, config.ip, function(err) {
+  if (err) {
+    return console.log(err);
+  }
+
+  console.log('Listening at ' + config.ip + ':' + config.port);
+});

lib/dev_server.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var ReactTools = require('react-tools');
+
+module.exports = {
+  process: function(src) {
+    return ReactTools.transform(src, {
+      harmony: true
+    });
+  }
+};