Merge pull request #11 from FormidableLabs/use-builder

update victory component boilerplate to use builder

.builderrc

@@ -0,0 +1,3 @@
+---
+archetypes:
+  - builder-react-component

.gitignore

@@ -32,4 +32,4 @@ node_modules
 bower_components
 .tmp
 lib
-npm-debug.log
+npm-debug.log*

.npmignore

@@ -12,7 +12,7 @@ ehthumbs.db
 Desktop.ini
 $RECYCLE.BIN/
 .tmp
-npm-debug.log
+npm-debug.log*
 
 # Code / build
 coverage

.travis.yml

@@ -1,8 +1,9 @@
 language: node_js
 
 node_js:
-  - 0.10
-  - 0.12
+  - "0.10"
+  - "0.12"
+  #- "4.2"
 
 # Use container-based Travis infrastructure.
 sudo: false
@@ -17,9 +18,10 @@ before_install:
   - sh -e /etc/init.d/xvfb start
 
 script:
-  - npm run check-ci
+  - node_modules/.bin/builder install
+  - node_modules/.bin/builder run check-ci
 
   # Prune deps to just production and ensure we can still build
   - npm prune --production
   - npm install --production
-  - npm run build
+  - node_modules/.bin/builder run build

CONTRIBUTING.md

@@ -1,25 +1,4 @@
 Contributing
 ============
 
-Thanks for helping out!
-
-## Development
-
-Run `npm run demo` to run a webpack dev server with component examples.
-
-## Checks, Tests
-
-Run `npm run check` before committing.
-
-## Dist
-
-Please do not commit changes to files in `dist`.
-These files are only committed when we tag releases.
-
-## Generator Compatibility 
-
-All boilerplate components should be named `boilerplate-component` or 
-`BoilerplateComponent` as appropriate.
-
-`src/components/boilerplate-component.jsx` and 
-`test/client/spec/components/boilerplate-component.spec.jsx` SHOULD NOT be moved or renamed
+ADD ACTUAL CONTRIBUTING GUIDLINES

DEVELOPMENT.md

@@ -1,28 +1,48 @@
 Development
 ===========
 
+We use [builder][] and `npm` to control all aspects of development and
+publishing.
+
+As a preliminary matter, please update your shell to include
+`./node_modules/.bin` in `PATH` like:
+
+```sh
+export PATH="${PATH}:./node_modules/.bin"
+```
+
+So you can type `builder` instead of `./node_modules/.bin/builder` for all
+commands.
+
 ## Build
 
 Build for production use (NPM, bower, etc) and create `dist` UMD bundles
 (min'ed, non-min'ed)
 
 ```
-$ npm run build
+$ builder run build
 ```
 
 Note that `dist/` files are only updated and committed on **tagged releases**.
 
 
 ## Development
 
+Most development / quality tasks require the `devDependencies` from the
+`builder` archetype. Install all dev dependencies with:
+
+```sh
+$ builder install
+```
+
 All development tasks consist of watching the demo bundle, the test bundle
 and launching a browser pointed to the demo page.
 
 Run the `demo` application with watched rebuilds:
 
-```
-$ npm run dev       # dev test/app server (OR)
-$ npm run open-dev  # dev servers _and a browser window opens!_
+```sh
+$ builder run dev       # dev test/app server (OR)
+$ builder run open-dev  # dev servers _and a browser window opens!_
 ```
 
 From there you can see:
@@ -77,21 +97,21 @@ size.
 
 During development, you are expected to be running either:
 
-```
-$ npm run dev
+```sh
+$ builder run dev
 ```
 
 to build the lib and test files. With these running, you can run the faster
 
-```
-$ npm run check-dev
+```sh
+$ builder run check-dev
 ```
 
 Command. It is comprised of:
 
-```
-$ npm run lint
-$ npm run test-dev
+```sh
+$ builder run lint
+$ builder run test-dev
 ```
 
 Note that the tests here are not instrumented for code coverage and are thus
@@ -102,20 +122,20 @@ more development / debugging friendly.
 CI doesn't have source / test file watchers, so has to _build_ the test files
 via the commands:
 
-```
-$ npm run check     # PhantomJS only
-$ npm run check-cov # (OR) PhantomJS w/ coverage
-$ npm run check-ci  # (OR) PhantomJS,Firefox + coverage - available on Travis.
+```sh
+$ builder run check     # PhantomJS only
+$ builder run check-cov # (OR) PhantomJS w/ coverage
+$ builder run check-ci  # (OR) PhantomJS,Firefox + coverage - available on Travis.
 ```
 
 Which is currently comprised of:
 
-```
-$ npm run lint      # AND ...
+```sh
+$ builder run lint  # AND ...
 
-$ npm run test      # PhantomJS only
-$ npm run test-cov  # (OR) PhantomJS w/ coverage
-$ npm run test-ci   # (OR) PhantomJS,Firefox + coverage
+$ builder run test      # PhantomJS only
+$ builder run test-cov  # (OR) PhantomJS w/ coverage
+$ builder run test-ci   # (OR) PhantomJS,Firefox + coverage
 ```
 
 Note that `(test|check)-(cov|ci)` run code coverage and thus the
@@ -125,7 +145,7 @@ test code may be harder to debug because it is instrumented.
 
 The client tests rely on webpack dev server to create and serve the bundle
 of the app/test code at: http://127.0.0.1:3001/assets/main.js which is done
-with the task `npm run server-test` (part of `npm dev`).
+with the task `builder run server-test` (part of `npm dev`).
 
 #### Code Coverage
 
@@ -143,15 +163,15 @@ coverage/
 **IMPORTANT - NPM**: To correctly run `preversion` your first step is to make
 sure that you have a very modern `npm` binary:
 
-```
+```sh
 $ npm install -g npm
 ```
 
 Built files in `dist/` should **not** be committeed during development or PRs.
 Instead we _only_ build and commit them for published, tagged releases. So
 the basic workflow is:
 
-```
+```sh
 # Make sure you have a clean, up-to-date `master`
 $ git pull
 $ git status # (should be no changes)
@@ -186,3 +206,5 @@ please review:
 * [`npm publish`](https://docs.npmjs.com/cli/publish): Uploads to NPM.
     * **NOTE**: We don't _build_ in `prepublish` because of the
       [`npm install` runs `npm prepublish` bug](https://github.com/npm/npm/issues/3059)
+
+[builder]: https://github.com/FormidableLabs/builder

README.md

@@ -1,18 +1,13 @@
 [![Travis Status][trav_img]][trav_site]
 
-Starter Victory Component
-=========================
+Victory Component Boilerplate
+===========================
 
-UPDATE THIS README!
+This is a starter Victory Component. For more information about authoring a victory component, including code guidelines, please see [CONTRIBUTING](CONTRIBUTING.md)
 
 ## Development
 
 Please see [DEVELOPMENT](DEVELOPMENT.md)
 
-## Contributing
-
-Please see [CONTRIBUTING](CONTRIBUTING.md)
-
 [trav_img]: https://api.travis-ci.org/FormidableLabs/victory-component-boilerplate.svg
 [trav_site]: https://travis-ci.org/FormidableLabs/victory-component-boilerplate
-

demo/app.jsx

@@ -1,18 +1,13 @@
 /*global document:false*/
 import React from "react";
 import ReactDOM from "react-dom";
-import {BoilerplateComponent} from "../src/index";
+import {VictoryComponentBoilerplate} from "../src/index";
 
 class App extends React.Component {
   render() {
     return (
       <div className="demo">
-        <p>
-          < BoilerplateComponent/>
-        </p>
-        <p>
-          < BoilerplateComponent color={"red"}/>
-        </p>
+        <VictoryComponentBoilerplate />
       </div>
     );
   }

demo/index.html

@@ -2,26 +2,54 @@
 <html>
 <head>
   <!--[if lt IE 9]>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
   <![endif]-->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Demo</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <style type="text/css">
+    * {
+      box-sizing: border-box;
+    }
+    .tile {
+      display: block;
+      float: left;
+      width: 100px;
+      height: 100px;
+      margin: 20px;
+    }
+    .tile img {
+      display: block;
+      width: 100px;
+      height: 100px;
+    }
+    .demo {
+      width: 80%;
+      margin: auto;
+      position: relative;
+    }
+  </style>
 </head>
 <body>
   <!--[if lt IE 8]>
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
   <![endif]-->
-  <div id="content">
-    <h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
-  </div>
-  <script type="text-javascript" src="http://localhost:3000/webpack-dev-server.js"></script>
-  <script type="text/javascript" src="assets/main.js"></script>
+  <div id="content"></div>
   <!--[if lt IE 9]>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-sham.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.15/es5-shim.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.15/es5-sham.min.js"></script>
   <![endif]-->
+  <script src="http://localhost:3000/webpack-dev-server.js"></script>
+  <script src="assets/main.js"></script>
+  <script>
+    // Sanity-check the component loaded...
+    setTimeout(function () {
+      var content = document.querySelector("#content");
+      content.innerHTML = content.innerHTML ||
+        "If you can see this, something is broken (or JS is not enabled)!";
+    }, 500);
+  </script>
 </body>
 </html>