add dynamic stepper header

Author: ShMcK

lib/components/start/dynamic-stepper.js

@@ -11,6 +11,16 @@ var initState = {
     activeStep: -1,
     statusSteps: []
 };
+var styles = {
+    header: {
+        textAlign: 'center',
+        padding: 10,
+        fontSize: 20
+    },
+    actionButton: {
+        marginRight: 8
+    }
+};
 var default_1 = (function (_super) {
     __extends(default_1, _super);
     function default_1() {
@@ -41,7 +51,7 @@ var default_1 = (function (_super) {
         };
     };
     default_1.prototype.render = function () {
-        return React.createElement(Stepper_1.default, {activeStep: this.state.activeStep, onStepHeaderTouch: this.selectStep.bind(this), updateCompletedStatus: this.updateCompletedSteps.bind(this), createIcon: this.createIcon}, this.props.children);
+        return React.createElement("div", null, React.createElement("div", {style: styles.header}, this.props.title), React.createElement(Stepper_1.default, {activeStep: this.state.activeStep, onStepHeaderTouch: this.selectStep.bind(this), updateCompletedStatus: this.updateCompletedSteps.bind(this), createIcon: this.createIcon}, this.props.children));
     };
     return default_1;
 }(React.Component));

lib/components/start/start.js

@@ -11,13 +11,13 @@ exports.Start = function (_a) {
     var tutorials = _a.tutorials, warning = _a.warning;
     return (React.createElement(paper_1.default, {className: 'cr-start'}, React.createElement("div", {className: 'cr-start-header'}, React.createElement("span", {className: 'title'}, "CodeRoad"), React.createElement("p", {className: 'tagline'}, "Tutorials in the Editor"), React.createElement("p", {className: 'version'}, "Beta"), !warning
         ? React.createElement(tutorials_1.default, {tutorials: tutorials})
-        : React.createElement(setup_1.SetupGuide, {warning: warning}), React.createElement(dynamic_stepper_1.default, null, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'Node >= 0.10', actions: [
+        : React.createElement(setup_1.SetupGuide, {warning: warning}), React.createElement(dynamic_stepper_1.default, {title: 'Dependency Checks'}, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'Node >= 0.10', actions: [
         React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
         React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
     ]}, React.createElement("div", null, "Install a newer version of ", React.createElement("a", {href: 'https://nodejs.org'}, "Node"))), React.createElement(VerticalStep_1.default, {orderStepLabel: '2', stepLabel: 'NPM >= 3', actions: [
         React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
         React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
-    ]}, React.createElement("div", null, "Update your version of NPM.", React.createElement("br", null), "`> npm update -g npm`"))), React.createElement(dynamic_stepper_1.default, null, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'working directory', actions: [
+    ]}, React.createElement("div", null, "Update your version of NPM.", React.createElement("br", null), "`> npm update -g npm`"))), React.createElement(dynamic_stepper_1.default, {title: 'Setup Checks'}, React.createElement(VerticalStep_1.default, {orderStepLabel: '1', stepLabel: 'working directory', actions: [
         React.createElement(raised_button_1.default, {key: 0, primary: true, label: 'Verify', onTouchTap: function () { return; }}),
         React.createElement(flat_button_1.default, {key: 1, label: 'Cancel'})
     ]}, React.createElement("div", null, "File -> Open (a new folder)")), React.createElement(VerticalStep_1.default, {orderStepLabel: '2', stepLabel: 'package.json', actions: [

lib/services/setup/system-checks.js

@@ -1,8 +1,20 @@
 "use strict";
+var command_line_1 = require('../command-line');
 function npmVersionThreeOrLater() {
     var minVersion = 3;
     return new Promise(function (resolve, reject) {
-        resolve();
+        var threeOrLater = command_line_1.default('npm', '-v').then(function (res) { return parseInt(res, 10) >= minVersion; });
+        if (!threeOrLater) {
+            reject({
+                key: 'updateNpm',
+                title: 'Please update to NPM version 3+',
+                text: 'Open a terminal and run:\n `npm install npm -g`',
+                verify: 'NPM updated to version 3 or later'
+            });
+        }
+        else {
+            resolve();
+        }
     });
 }
 exports.npmVersionThreeOrLater = npmVersionThreeOrLater;

src/components/start/dynamic-stepper.tsx

@@ -7,8 +7,19 @@ let initState = {
   statusSteps: []
 };
 
+const styles = {
+  header: {
+    textAlign: 'center',
+    padding: 10,
+    fontSize: 20
+  },
+  actionButton: {
+    marginRight: 8
+  }
+};
+
 export default class extends React.Component<{
-  children?: any, onStepHeaderHover?: any
+  title?: string, children?: any
 }, {
   activeStep: number, statusSteps: boolean[]
 }> {
@@ -44,12 +55,17 @@ export default class extends React.Component<{
     };
   }
   render() {
-    return  <Stepper
+    return <div>
+        <div style={styles.header}>
+          {this.props.title}
+        </div>
+        <Stepper
           activeStep={this.state.activeStep}
           onStepHeaderTouch={this.selectStep.bind(this)}
           updateCompletedStatus={this.updateCompletedSteps.bind(this)}
           createIcon={this.createIcon}>
         {this.props.children}
-        </Stepper>;
+        </Stepper>
+      </div>;
   }
 }

src/components/start/start.tsx

@@ -20,7 +20,7 @@ export const Start = ({tutorials, warning}) => (
         ? <Tutorials tutorials={tutorials}/>
         : <SetupGuide warning={warning} />}
 
-        <DynamicStepper>
+        <DynamicStepper title='Dependency Checks'>
           <Step orderStepLabel='1'
              stepLabel='Node >= 0.10'
              actions={[
@@ -48,7 +48,7 @@ export const Start = ({tutorials, warning}) => (
             </Step>
          </DynamicStepper>
 
-        <DynamicStepper>
+        <DynamicStepper title='Setup Checks'>
           <Step orderStepLabel='1'
            stepLabel='working directory'
            actions={[

src/services/setup/system-checks.ts

@@ -3,17 +3,16 @@ import commandLine from '../command-line';
 export function npmVersionThreeOrLater(): Promise<CR.SetupWarning> {
   const minVersion = 3;
   return new Promise((resolve, reject) => {
-    resolve();
-    // let threeOrLater: Promise<boolean> = commandLine('npm', '-v').then((res: string) => parseInt(res, 10) >= minVersion);
-    // if (!threeOrLater) {
-    //   reject({
-    //     key: 'updateNpm',
-    //     title: 'Please update to NPM version 3+',
-    //     text: 'Open a terminal and run:\n `npm install npm -g`',
-    //     verify: 'NPM updated to version 3 or later'
-    //   });
-    // } else {
-    //   resolve();
-    // }
+    let threeOrLater: Promise<boolean> = commandLine('npm', '-v').then((res: string) => parseInt(res, 10) >= minVersion);
+    if (!threeOrLater) {
+      reject({
+        key: 'updateNpm',
+        title: 'Please update to NPM version 3+',
+        text: 'Open a terminal and run:\n `npm install npm -g`',
+        verify: 'NPM updated to version 3 or later'
+      });
+    } else {
+      resolve();
+    }
   });
 }