0.2.3

- adds arrow to show opened stages
- time indicator on stage is now light grey
- cleans up inlined styles (reduces bundle size)
- updates dependencies

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 0.2.3 (09/13/2017)
+
+- adds arrow to show opened stages
+- time indicator on stage is now light grey
+- cleans up inlined styles (reduces bundle size)
+- updates dependencies
+
 # 0.2.2 (09/01/2017)
 
 - adds react-storybook stories to show use cases

docs/code/git.js.html

@@ -139,7 +139,7 @@ <h1 class="page-title">git.js</h1>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.4</a> on Fri Sep 01 2017 00:25:00 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Sep 13 2017 22:22:53 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

docs/code/index.html

@@ -109,7 +109,7 @@ <h2>Installation</h2><p>This module can be installed via npm, or for those who d
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.4</a> on Fri Sep 01 2017 00:25:00 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Sep 13 2017 22:22:53 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

docs/code/module-util_git.html

@@ -309,7 +309,7 @@ <h5>Returns:</h5>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.4</a> on Fri Sep 01 2017 00:25:00 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Sep 13 2017 22:22:53 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

docs/code/module-util_pipeline.html

@@ -236,7 +236,7 @@ <h5>Returns:</h5>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.4</a> on Fri Sep 01 2017 00:25:00 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Sep 13 2017 22:22:53 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

docs/code/pipeline.js.html

@@ -142,7 +142,7 @@ <h1 class="page-title">pipeline.js</h1>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.4</a> on Fri Sep 01 2017 00:25:00 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Sep 13 2017 22:22:53 GMT-0700 (PDT) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

docs/index.html

@@ -30,15 +30,15 @@
       </div>
     </div>
     <div class="text-center">
-      <h3 class="text-black">Build Reports!</h3>
+      <h3 class="text-black">build.sh</h3>
       <div class="text-black">We have coverage reports, test reports, now we have build reports!</div><br/>
-      <div style="width:50%;margin: 0 auto;">
+      <div style="width:60%;margin: 0 auto;">
         <img class="responsive" src="./success.png" alt="">
       </div>
     </div>
     <div class="navbar navbar-center">
       <div class="container text-center">
-        <div class="text-black">Made with 🐒 by @gabrielcsapo</div>
+        <div class="text-black">Made with 🐒 by <a href="https://www.gabrielcsapo.com">@gabrielcsapo</a></div>
       </div>
     </div>
   </body>

docs/storybook/iframe.html

@@ -17,7 +17,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.e60b6fae4fc5567caf04.bundle.js"></script>
+        <script src="static/preview.35b140bdea500272e939.bundle.js"></script>
       </body>
     </html>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "build.sh",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "🔨 run and visualize the build process",
   "repository": {
     "type": "https",
@@ -36,28 +36,27 @@
     "css-loader": "^0.28.7",
     "html-webpack-inline-source-plugin": "0.0.9",
     "html-webpack-plugin": "^2.30.1",
-    "js-yaml": "^3.9.1",
+    "js-yaml": "^3.10.0",
     "opn": "^5.1.0",
     "ora": "^1.3.0",
     "prop-types": "^15.5.10",
-    "psychic-ui": "^1.0.7",
+    "psychic-ui": "^1.0.8",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "shelljs": "^0.7.8",
     "style-loader": "^0.18.2",
-    "webpack": "^3.4.1",
-    "webpack-dev-server": "^2.7.1"
+    "webpack": "^3.5.6"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.2.6",
+    "@storybook/react": "^3.2.8",
     "docdash": "^0.4.0",
-    "eslint": "^4.5.0",
+    "eslint": "^4.6.1",
     "eslint-plugin-react": "^7.3.0",
-    "jsdoc": "^3.5.4",
+    "jsdoc": "^3.5.5",
     "pkg": "^4.2.4",
     "tap": "^10.7.1",
-    "tape": "^4.8.0",
-    "@storybook/react": "^3.2.8",
-    "@storybook/addon-actions": "^3.2.6"
+    "tape": "^4.8.0"
   },
   "pkg": {
     "scripts": [

src/index.js

@@ -5,7 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { render } from 'react-dom';
 
-import { Stages } from './stage'; 
+import { Stages } from './stage';
 import Pipeline from './pipeline';
 
 class Container extends React.Component {
@@ -53,10 +53,10 @@ class Container extends React.Component {
         <div>
           { hash === '' ?
             <div>
-              <div className="pipeline">
+              <div className="pipeline-container">
                 <Pipeline stages={pipeline} defaultSelectStage={pipeline && pipeline[0] && pipeline[0]} onSelect={this.showStages.bind(this)} />
               </div>
-              <div className="stages">
+              <div className="stages-container">
                 { selectedStage }
               </div>
             </div>

src/stage.js

@@ -23,22 +23,23 @@ class Stage extends React.Component {
 
     return (
       <div>
-        <div style={{ padding: "10px", border: "1px solid #dedede", borderBottom: selected ? 0 : '1px solid #dedede', position: "relative" }} onClick={this.toggle.bind(this)}>
+        <div className="stage" style={{ borderBottom: selected ? 0 : '1px solid #dedede' }} onClick={this.toggle.bind(this)}>
           <span className={`stage-icon icon-${state}`}>
             <svg width="16" height="30">
-              <g x="0" y="0" transform="translate(8, 14)" style={{ fill: "white" }}>
+              <g x="0" y="0" transform="translate(8, 14)">
                 <Icon status={state}/>
               </g>
             </svg>
           </span>
-          <span style={{ marginLeft: "20px" }}>
-            { name }
+
+          <span className="stage-title">
+            { selected ? "▿" : "▹"} { name }
           </span>
 
-          <div style={{ float: "right" }}> { ms(time || 0) } </div>
+          <div className="stage-time"> { ms(time || 0) } </div>
         </div>
         { selected ?
-          <pre style={{ whiteSpace: "pre-line", marginTop: 0, border: "1px solid #dedede", borderRadius: 0 }}> { output } </pre>
+          <pre> { output } </pre>
         : '' }
       </div>
     )
@@ -51,12 +52,12 @@ class Stages extends React.Component {
 
     return (<div>
       <div> { name } </div>
-      <ul style={{ listStyle: 'none' }}>
-      { stages.map((child,i) => {
-        return (<li key={`${name}-${i}`}>
-          <Stage {...child}/>
-        </li>);
-      }) }
+      <ul className="stages">
+        { stages.map((child,i) => {
+          return (<li key={`${name}-${i}`}>
+            <Stage {...child}/>
+          </li>);
+        }) }
       </ul>
     </div>)
   }

src/style.css

@@ -10,16 +10,38 @@ html, body {
   font-family: "Helvetica Nue", Helvetica;
 }
 
-.pipeline {
+.pipeline-container {
   width: 100%;
   overflow-x: scroll;
   text-align: center;
 }
-.stages {
+
+.stages-container {
   width: 90%;
   margin: 0 auto;
 }
 
+.stages {
+  list-style: none;
+}
+.stage {
+  padding: 10px;
+  border: 1px solid #dedede;
+  position: relative;
+}
+.stage + pre {
+  white-space: pre-line;
+  margin-top: 0;
+  border: 1px solid #dedede;
+  border-radius: 0;
+}
+.stage-time {
+  float: right;
+  color: #969696;
+}
+.stage-title {
+  margin-left: 20px;
+}
 .stage-icon {
   padding: 5px;
   position: absolute;
@@ -28,6 +50,9 @@ html, body {
   bottom: 0;
   line-height: 30px;
 }
+.stage-icon > svg > g {
+  fill: white;
+}
 
 .pipeline-connector {
   stroke: #949393;