Skip to content

Commit 275d8c8

Browse files
ShMcKShMcK
committed
Start Checks components now follow AirBnB style guide
1 parent d7115bf commit 275d8c8

30 files changed

+391
-202
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ All notable changes to this project will be documented in this file.
33
This project adheres to [Semantic Versioning](http://semver.org/).
44

55
## [0.7.0] - in progress
6+
- follow AirBnB React style guide
67
- update to 'react@15'
78
- move to '[email protected]'
89
- much improved setup ui & checks

‎lib/components/Start/Checks/DynamicStepper.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var React = require('react');
8+
var Stepper_1 = require('material-ui/Stepper');
9+
var DynamicStepper = (function (_super) {
10+
__extends(DynamicStepper, _super);
11+
function DynamicStepper(props) {
12+
_super.call(this, props);
13+
this.state = {
14+
stepIndex: this.props.status.indexOf(false) || 0
15+
};
16+
}
17+
DynamicStepper.prototype.render = function () {
18+
return (React.createElement(Stepper_1.Stepper, {activeStep: this.state.stepIndex, linear: false, orientation: 'vertical'}, this.props.children));
19+
};
20+
return DynamicStepper;
21+
}(React.Component));
22+
exports.DynamicStepper = DynamicStepper;

‎lib/components/Start/Checks/InstallGuide.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
"use strict";
2+
var React = require('react');
3+
exports.InstallGuide = function (_a) {
4+
var show = _a.show;
5+
if (!show) {
6+
return null;
7+
}
8+
return (React.createElement("div", {className: 'setup-guide'}, "Check the", React.createElement("a", {href: 'https://coderoad.github.io/docs#install'}, " ", React.createElement("strong", null, "Install Guide"))));
9+
};

‎lib/components/Start/Checks/SetupChecks.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use strict";
2+
var React = require('react');
3+
var Card_1 = require('material-ui/Card');
4+
var FlatButton_1 = require('material-ui/FlatButton');
5+
var setup_checker_1 = require('./setup-checker');
6+
var verify_1 = require('./verify');
7+
var action_setup_1 = require('../../../reducers/checks/action-setup');
8+
var StepCheck_1 = require('./StepCheck');
9+
exports.SetupChecks = function (_a) {
10+
var checks = _a.checks;
11+
var setup = checks.setup;
12+
if (setup.passed) {
13+
return null;
14+
}
15+
var status = [setup.dir, setup.packageJson, setup.tutorial];
16+
return (React.createElement(Card_1.Card, {className: 'cr-check'}, React.createElement(Card_1.CardHeader, {title: 'Setup Checks', subtitle: 'CodeRoad requires a brief setup'}), React.createElement(Card_1.CardText, null, React.createElement(setup_checker_1.default, {status: status}, React.createElement(StepCheck_1.StepCheck, {label: 'open a directory', completed: checks.setup.dir}, React.createElement("p", null, "File -> Open (a new folder)"), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Open Directory', secondary: true, onTouchTap: action_setup_1.openDirectory})), React.createElement(StepCheck_1.StepCheck, {label: 'package.json', completed: checks.setup.packageJson}, "Create a package.json by running", React.createElement("br", null), React.createElement("code", null, "> npm init -y`"), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Create package.json', secondary: true, onTouchTap: action_setup_1.createPackageJson})), React.createElement(StepCheck_1.StepCheck, {label: 'install a tutorial', completed: checks.setup.tutorial}, "Install a tutorial using npm. For example:", React.createElement("br", null), React.createElement("code", null, "> npm install --save-dev coderoad-functional-school"), React.createElement("br", null)))), React.createElement(Card_1.CardActions, null, React.createElement(verify_1.VerifyButton, null))));
17+
};

‎lib/components/Start/Checks/StepCheck.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"use strict";
2+
var React = require('react');
3+
var Stepper_1 = require('material-ui/Stepper');
4+
var FontIcon_1 = require('material-ui/FontIcon');
5+
var warning_1 = require('material-ui/svg-icons/alert/warning');
6+
var colors_1 = require('material-ui/styles/colors');
7+
exports.StepCheck = function (_a) {
8+
var completed = _a.completed, label = _a.label, children = _a.children;
9+
return (React.createElement(Stepper_1.Step, {completed: completed, active: !completed}, React.createElement(Stepper_1.StepLabel, {icon: completed
10+
? React.createElement(FontIcon_1.default, null, "✓")
11+
: React.createElement(warning_1.default, {color: colors_1.red500})}, label), React.createElement(Stepper_1.StepContent, null, children, React.createElement("br", null))));
12+
};

‎lib/components/Start/Checks/SystemChecks.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
"use strict";
2+
var React = require('react');
3+
var Card_1 = require('material-ui/Card');
4+
var FlatButton_1 = require('material-ui/FlatButton');
5+
var VerifyButton_1 = require('./VerifyButton');
6+
var colors_1 = require('material-ui/styles/colors');
7+
var action_system_1 = require('../../../reducers/checks/action-system');
8+
var DynamicStepper_1 = require('./DynamicStepper');
9+
var StepCheck_1 = require('./StepCheck');
10+
exports.SystemChecks = function (_a) {
11+
var checks = _a.checks;
12+
var system = checks.system;
13+
if (system.passed) {
14+
return null;
15+
}
16+
var status = [system.node, system.npm];
17+
return (React.createElement(Card_1.Card, {className: 'cr-check'}, React.createElement(Card_1.CardHeader, {title: 'System Checks', subtitle: 'CodeRoad requires several key dependencies'}), React.createElement(Card_1.CardText, null, React.createElement(DynamicStepper_1.DynamicStepper, {status: status}, React.createElement(StepCheck_1.StepCheck, {label: 'Node >= 0.10', completed: checks.system.node}, React.createElement("p", null, "Install a newer version of ", React.createElement("a", {style: { color: colors_1.pink500 }, href: 'https://nodejs.org'}, "NodeJS"))), React.createElement(StepCheck_1.StepCheck, {label: 'NPM >= 3', completed: checks.system.npm}, "Update your version of NPM.", React.createElement("br", null), React.createElement("code", null, "> npm update -g npm"), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Update NPM', secondary: true, onTouchTap: action_system_1.updateNpm})))), React.createElement(Card_1.CardActions, null, React.createElement(VerifyButton_1.VerifyButton, null))));
18+
};

‎lib/components/Start/Checks/VerifyButton.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var FlatButton_1 = require('material-ui/FlatButton');
18+
var store_1 = require('../../../store/store');
19+
var actions_1 = require('../../../actions');
20+
var react_redux_1 = require('react-redux');
21+
var VerifyButton = (function (_super) {
22+
__extends(VerifyButton, _super);
23+
function VerifyButton() {
24+
_super.apply(this, arguments);
25+
}
26+
VerifyButton.prototype.render = function () {
27+
return (React.createElement(FlatButton_1.default, {label: 'Verify Setup Complete', primtary: true, onTouchTap: this.props.verify}));
28+
};
29+
VerifyButton = __decorate([
30+
react_redux_1.connect(null, function (dispatch) {
31+
return {
32+
verify: function () { return store_1.store.dispatch(actions_1.setupVerify()); }
33+
};
34+
}),
35+
__metadata('design:paramtypes', [])
36+
], VerifyButton);
37+
return VerifyButton;
38+
}(React.Component));
39+
exports.VerifyButton = VerifyButton;

‎lib/components/Start/Welcome/index.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ var react_redux_1 = require('react-redux');
1818
var actions_1 = require('../../../actions');
1919
var path_1 = require('path');
2020
var FlatButton_1 = require('material-ui/FlatButton');
21+
var imagePath = path_1.resolve(__dirname, '../../../../', 'styles', 'coderoad.jpg');
2122
var welcomeStyle = {
22-
backgroundImage: "url(https://github.com/%22%22%3C/span%3E%20%3Cspan%20class=%22pl-c1%22%3E+%3C/span%3E%20%3Cspan%20class=%22pl-s1%20x%20x-first%22%3Epath_1%3C/span%3E%3Cspan%20class=%22pl-kos%20x%22%3E.%3C/span%3E%3Cspan%20class=%22pl-en%20x%22%3Eresolve%3C/span%3E%3Cspan%20class=%22pl-kos%20x%22%3E(%3C/span%3E%3Cspan%20class=%22pl-s1%20x%22%3E__dirname%3C/'%3C/span%3E%3Cspan%20class=%22pl-kos%20x%22%3E,%3C/span%3E%3Cspan%20class=%22x%22%3E%20%3C/span%3E%3Cspan%20class=%22pl-s%20x%22%3E'styles'%3C/span%3E%3Cspan%20class=%22pl-kos%20x%22%3E,%3C/span%3E%3Cspan%20class=%22x%22%3E%20%3C/span%3E%3Cspan%20class=%22pl-s%20x%22%3E'coderoad.jpg'%3C/span%3E%3Cspan%20class=%22pl-kos%20x%20x-last%22%3E) + "\")",
23+
backgroundImage: "url(https://github.com/%22%22%3C/span%3E%20%3Cspan%20class=%22pl-c1%22%3E+%3C/span%3E%20%3Cspan%20class=%22pl-s1%20x%20x-first%20x-last%22%3EimagePath%3C/span%3E%20%3Cspan%20class=%22pl-c1%22%3E+%3C/span%3E%20%3Cspan%20class=%22pl-s%22%3E%22/")",
2324
backgroundRepeat: 'no-repeat',
2425
height: '350px',
2526
};
@@ -33,7 +34,7 @@ var Welcome = (function (_super) {
3334
_super.apply(this, arguments);
3435
}
3536
Welcome.prototype.render = function () {
36-
return React.createElement("div", {style: welcomeStyle}, React.createElement("div", {className: 'cr-welcome'}, React.createElement("div", {className: 'title'}, "CodeRoad"), React.createElement("div", {className: 'tagline'}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(FlatButton_1.default, {label: 'Start', onTouchTap: this.props.routeToTutorials, secondary: true, style: welcomeButtonStyle})));
37+
return (React.createElement("div", {style: welcomeStyle}, React.createElement("div", {className: 'cr-welcome'}, React.createElement("div", {className: 'title'}, "CodeRoad"), React.createElement("div", {className: 'tagline'}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(FlatButton_1.default, {style: welcomeButtonStyle, label: 'Start', onTouchTap: this.props.routeToTutorials, secondary: true}))));
3738
};
3839
Welcome = __decorate([
3940
react_redux_1.connect(null, function (dispatch) {

‎lib/components/Tutorials/LoadTutorials.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,20 @@ var __metadata = (this && this.__metadata) || function (k, v) {
1515
};
1616
var React = require('react');
1717
var react_redux_1 = require('react-redux');
18-
var FlatButton_1 = require('material-ui/FlatButton');
1918
var actions_1 = require('../../actions');
19+
var FlatButton_1 = require('material-ui/FlatButton');
2020
var LoadTutorials = (function (_super) {
2121
__extends(LoadTutorials, _super);
2222
function LoadTutorials() {
2323
_super.apply(this, arguments);
2424
}
2525
LoadTutorials.prototype.render = function () {
26-
return React.createElement(FlatButton_1.default, {style: { margin: '0 90px' }, label: 'Check for Tutorials', secondary: true, onTouchTap: this.props.tutorialsFind});
26+
return (React.createElement(FlatButton_1.default, {style: { margin: '0 90px' }, label: 'Check for Tutorials', secondary: true, onTouchTap: this.props.tutorialsFind}));
2727
};
2828
LoadTutorials = __decorate([
2929
react_redux_1.connect(null, function (dispatch) {
3030
return {
31-
tutorialsFind: function () {
32-
dispatch(actions_1.tutorialsFind());
33-
}
31+
tutorialsFind: function () { return dispatch(actions_1.tutorialsFind()); }
3432
};
3533
}),
3634
__metadata('design:paramtypes', [])

‎lib/components/Tutorials/SelectTutorial.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ var SelectTutorial = (function (_super) {
2929
if (name.match(/^coderoad-tutorial-/)) {
3030
name = name.slice(18);
3131
}
32-
if (name.match(/^coderoad-/)) {
32+
else if (name.match(/^coderoad-/)) {
3333
name = name.slice(9);
3434
}
35-
return React.createElement(FlatButton_1.default, {label: name, primary: true, onTouchTap: selectTutorial.bind(this, tutorial)});
35+
return (React.createElement(FlatButton_1.default, {label: name, primary: true, onTouchTap: selectTutorial.bind(this, tutorial)}));
3636
};
3737
SelectTutorial = __decorate([
3838
react_redux_1.connect(null, function (dispatch) {

‎lib/components/Tutorials/UpdateTutorial.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ var UpdateTutorial = (function (_super) {
2929
UpdateTutorial = __decorate([
3030
react_redux_1.connect(null, function (dispatch) {
3131
return {
32-
tutorialUpdate: function (name) {
33-
dispatch(actions_1.tutorialUpdate(name));
34-
}
32+
tutorialUpdate: function (name) { return dispatch(actions_1.tutorialUpdate(name)); }
3533
};
3634
}),
3735
__metadata('design:paramtypes', [])

‎lib/components/markdown/index.js

+11-12
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,27 @@ var React = require('react');
33
var marked = require('marked');
44
var Highlights = require('highlights');
55
var highlighter = new Highlights({ registry: atom.grammars });
6+
function highlight(code, lang) {
7+
return highlighter.highlightSync({
8+
fileContents: code,
9+
scopeName: 'source.' + (lang || 'js')
10+
});
11+
}
612
var options = {
7-
highlight: function (code, lang) {
8-
return highlighter.highlightSync({
9-
fileContents: code,
10-
scopeName: 'source.' + (lang || 'js')
11-
});
12-
},
13+
highlight: highlight,
1314
sanitize: true,
1415
gfm: true,
1516
breaks: true,
1617
tables: true,
1718
smartLists: true
1819
};
1920
function formatText(text) {
20-
if (typeof text !== 'string') {
21-
return '';
22-
}
23-
return marked(text.toString(), options);
21+
return typeof text !== 'string'
22+
? ''
23+
: marked(text.toString(), options);
2424
}
2525
;
2626
exports.Markdown = function (_a) {
2727
var children = _a.children;
28-
var text = formatText(children);
29-
return React.createElement("span", {className: 'cr-markdown', dangerouslySetInnerHTML: { __html: text }});
28+
return (React.createElement("span", {className: 'cr-markdown', dangerouslySetInnerHTML: { __html: formatText(children) }}));
3029
};

‎lib/components/start/checks/index.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
"use strict";
22
var React = require('react');
3-
var steps_1 = require('./steps');
3+
var SystemChecks_1 = require('./SystemChecks');
4+
var SetupChecks_1 = require('./SetupChecks');
5+
var InstallGuide_1 = require('./InstallGuide');
46
exports.Checks = function (_a) {
57
var checks = _a.checks;
6-
return (React.createElement("div", {className: 'cr-checks'}, React.createElement(steps_1.SystemChecks, {checks: checks}), React.createElement(steps_1.SetupChecks, {checks: checks}), React.createElement(steps_1.InstallGuide, {show: checks.passed})));
8+
return (React.createElement("div", {className: 'cr-checks'}, React.createElement(SystemChecks_1.SystemChecks, {checks: checks}), React.createElement(SetupChecks_1.SetupChecks, {checks: checks}), React.createElement(InstallGuide_1.InstallGuide, {show: checks.passed})));
79
};

‎lib/components/tutorials/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ var UpdateTutorial_1 = require('./UpdateTutorial');
66
var SelectTutorial_1 = require('./SelectTutorial');
77
exports.Tutorials = function (_a) {
88
var tutorials = _a.tutorials;
9-
return (React.createElement("div", {className: 'cr-tutorials'}, React.createElement(Table_1.Table, null, React.createElement(Table_1.TableHeader, {displaySelectAll: false, adjustForCheckbox: false}, React.createElement(Table_1.TableRow, null, React.createElement(Table_1.TableHeaderColumn, null, "Tutorial"), React.createElement(Table_1.TableHeaderColumn, null, "Version"))), React.createElement(Table_1.TableBody, {displayRowCheckbox: false}, tutorials.map(function (tutorial, index) {
9+
return (React.createElement("div", {className: 'cr-tutorials'}, React.createElement(Table_1.Table, null, React.createElement(Table_1.TableHeader, {displaySelectAll: false, adjustForCheckbox: false}, React.createElement(Table_1.TableRow, null, React.createElement(Table_1.TableHeaderColumn, null, "Tutorial"), React.createElement(Table_1.TableHeaderColumn, null, "Version"))), React.createElement(Table_1.TableBody, {displayRowCheckbox: false}, tutorials.map(function TutorialRow(tutorial, index) {
1010
return (React.createElement(Table_1.TableRow, {key: index}, React.createElement(Table_1.TableRowColumn, null, React.createElement(SelectTutorial_1.SelectTutorial, {tutorial: tutorial})), tutorial.latest
1111
? React.createElement(Table_1.TableRowColumn, null, tutorial.version, " ", React.createElement(UpdateTutorial_1.UpdateTutorial, {name: tutorial.name}))
1212
: React.createElement(Table_1.TableRowColumn, null, tutorial.version)));

‎src/components/Markdown/index.tsx

+18-25
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,32 @@ import * as marked from 'marked';
33
const Highlights = require('highlights');
44
const highlighter = new Highlights({registry: atom.grammars});
55

6+
function highlight(code: string, lang: string) {
7+
return highlighter.highlightSync({
8+
fileContents: code,
9+
scopeName: 'source.' + (lang || 'js')
10+
});
11+
}
12+
613
const options = {
7-
highlight: (code: string, lang: string) => {
8-
return highlighter.highlightSync({
9-
fileContents: code,
10-
scopeName: 'source.' + (lang || 'js')
11-
});
12-
},
14+
highlight,
1315
sanitize: true,
1416
gfm: true,
1517
breaks: true,
1618
tables: true,
1719
smartLists: true
1820
};
1921

20-
/**
21-
* Markdown -> HTML
22-
* @param {string} text [Markdown string]
23-
* @return {string} [HTML string]
24-
*/
2522
function formatText(text: string): string {
26-
if (typeof text !== 'string') {
27-
return '';
28-
}
29-
return marked(text.toString(), options);
23+
return typeof text !== 'string'
24+
? ''
25+
: marked(text.toString(), options);
3026
};
3127

32-
/**
33-
* Markdown Text
34-
* MD -> HTML
35-
*/
36-
export const Markdown: React.StatelessComponent<{children?: string}> = ({children}) => {
37-
let text = formatText(children);
38-
return <span className='cr-markdown' dangerouslySetInnerHTML={
39-
{__html: text}
40-
}></span>;
41-
};
28+
export const Markdown: React.StatelessComponent<{
29+
children?: string
30+
}> = ({children}) => (
31+
<span className='cr-markdown' dangerouslySetInnerHTML={
32+
{__html: formatText(children)}
33+
}></span>
34+
);

‎src/components/start/checks/setup-checker.tsx renamed to ‎src/components/Start/Checks/DynamicStepper.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import RaisedButton from 'material-ui/RaisedButton';
44
import FlatButton from 'material-ui/FlatButton';
55
import FontIcon from 'material-ui/FontIcon';
66

7-
export default class DynamicStepper extends React.Component<{
7+
export class DynamicStepper extends React.Component<{
88
status: boolean[], children?: any
99
}, {
1010
stepIndex: number
@@ -16,13 +16,14 @@ export default class DynamicStepper extends React.Component<{
1616
};
1717
}
1818
render() {
19-
return <div>
19+
return (
2020
<Stepper
2121
activeStep={this.state.stepIndex}
2222
linear={false}
23-
orientation='vertical'>
23+
orientation='vertical'
24+
>
2425
{this.props.children}
2526
</Stepper>
26-
</div>;
27+
);
2728
}
2829
}

‎src/components/Start/Checks/InstallGuide.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from 'react';
2+
3+
export const InstallGuide: React.StatelessComponent<{
4+
show: boolean
5+
}> = ({show}) => {
6+
if (!show) {
7+
return null;
8+
}
9+
return (
10+
<div className='setup-guide'>Check the
11+
<a href='https://coderoad.github.io/docs#install'> <strong>Install Guide</strong></a>
12+
</div>
13+
);
14+
};

0 commit comments

Comments
 (0)