Skip to content

Commit 1960e1d

Browse files
jaredpetersenjaredpetersen
committed
added prettier for style enforcement
1 parent b4a0dad commit 1960e1d

34 files changed

+1015
-279
lines changed

‎package-lock.json‎

Lines changed: 630 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@
44
"private": true,
55
"homepage": "http://jaredpetersen.github.io/codeprinter",
66
"scripts": {
7+
"precommit": "lint-staged",
78
"start": "react-scripts start",
89
"build": "react-scripts build",
910
"test": "react-scripts test --env=jsdom",
10-
"storybook": "start-storybook -p 9009 -s public",
1111
"build-storybook": "build-storybook -s public",
12+
"storybook": "start-storybook -p 9009 -s public",
1213
"predeploy": "npm run build",
1314
"deploy": "gh-pages -d build"
1415
},
@@ -28,6 +29,12 @@
2829
"text"
2930
]
3031
},
32+
"lint-staged": {
33+
"src/**/*.{js,jsx,json,css}": [
34+
"prettier --print-width 120 --single-quote --write",
35+
"git add"
36+
]
37+
},
3138
"dependencies": {
3239
"bootstrap": "^4.1.1",
3340
"enzyme": "^3.3.0",
@@ -48,6 +55,9 @@
4855
"babel-core": "^6.26.3",
4956
"babel-runtime": "^6.26.0",
5057
"gh-pages": "^1.2.0",
58+
"husky": "^0.14.3",
59+
"lint-staged": "^7.2.0",
60+
"prettier": "1.14.0",
5161
"react-test-renderer": "^16.4.1"
5262
}
5363
}

‎src/App.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
2+
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
33
import Navbar from './navbar';
44
import Editor from './editor';
55
import Heart from './heart';
@@ -9,13 +9,13 @@ class App extends Component {
99
constructor(props) {
1010
super(props);
1111

12-
this.state = { };
12+
this.state = {};
1313
}
1414

1515
render() {
1616
return (
1717
<Router basename={process.env.PUBLIC_URL}>
18-
<div className='h-100'>
18+
<div className="h-100">
1919
<Navbar />
2020
<Switch>
2121
<Route exact path="/" component={Editor} />

‎src/common/dropdown-toggle-select/index.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
height: 0;
55
margin-left: 0.255em;
66
vertical-align: 0.255em;
7-
content: "";
7+
content: '';
88
border-top: 0.3em solid;
99
border-right: 0.3em solid transparent;
1010
border-bottom: 0;
@@ -17,9 +17,8 @@
1717
.btn-outline-dropdown-toggle-select {
1818
background-color: transparent;
1919
background-image: none;
20-
border-color: #CED4DA;
20+
border-color: #ced4da;
2121
}
2222

2323
.btn-outline-dropdown-toggle-select:hover {
24-
2524
}

‎src/common/dropdown-toggle-select/index.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,18 @@ import PropTypes from 'prop-types';
33
import { DropdownToggle } from 'reactstrap';
44
import './index.css';
55

6-
const DropdownToggleSelect = (props) => {
6+
const DropdownToggleSelect = props => {
77
const style = Object.assign({}, { textAlign: 'left' }, props.style);
88

99
return (
10-
<DropdownToggle outline color='dropdown-toggle-select' block {...props} className='dropdown-toggle-select' style={style}/>
10+
<DropdownToggle
11+
outline
12+
color="dropdown-toggle-select"
13+
block
14+
{...props}
15+
className="dropdown-toggle-select"
16+
style={style}
17+
/>
1118
);
1219
};
1320

‎src/common/dropdown-toggle-select/index.story.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@ import 'bootstrap/dist/css/bootstrap.css';
55
import { UncontrolledDropdown, DropdownMenu, DropdownItem } from 'reactstrap';
66
import DropdownToggleSelect from './index.js';
77

8-
storiesOf('Common/DropdownToggleSelect', module)
9-
.add('default', () => (
10-
<UncontrolledDropdown inNavbar>
11-
<DropdownToggleSelect>Dropdown</DropdownToggleSelect>
12-
<DropdownMenu>
13-
<DropdownItem onClick={action('onClick - Item 1')}>Item 1</DropdownItem>
14-
<DropdownItem onClick={action('onClick - Item 2')}>Item 2</DropdownItem>
15-
<DropdownItem onClick={action('onClick - Item 3')}>Item 3</DropdownItem>
16-
</DropdownMenu>
17-
</UncontrolledDropdown>
18-
));
8+
storiesOf('Common/DropdownToggleSelect', module).add('default', () => (
9+
<UncontrolledDropdown inNavbar>
10+
<DropdownToggleSelect>Dropdown</DropdownToggleSelect>
11+
<DropdownMenu>
12+
<DropdownItem onClick={action('onClick - Item 1')}>Item 1</DropdownItem>
13+
<DropdownItem onClick={action('onClick - Item 2')}>Item 2</DropdownItem>
14+
<DropdownItem onClick={action('onClick - Item 3')}>Item 3</DropdownItem>
15+
</DropdownMenu>
16+
</UncontrolledDropdown>
17+
));

‎src/editor/document/index.js‎

Lines changed: 47 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,31 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import { Row, Col, Input } from 'reactstrap';
44
import SyntaxHighlighter from 'react-syntax-highlighter';
5-
import { defaultStyle, arduinoLight, ascetic, docco, githubGist, grayscale, idea, tomorrow, vs, xcode } from 'react-syntax-highlighter/styles/hljs';
5+
import {
6+
defaultStyle,
7+
arduinoLight,
8+
ascetic,
9+
docco,
10+
githubGist,
11+
grayscale,
12+
idea,
13+
tomorrow,
14+
vs,
15+
xcode
16+
} from 'react-syntax-highlighter/styles/hljs';
617
import './index.css';
718

819
const themeMap = {
9-
'Arduino': arduinoLight,
10-
'Ascetic': ascetic,
11-
'Docco': docco,
12-
'GitHub': githubGist,
13-
'Grayscale': grayscale,
14-
'hljs': defaultStyle,
15-
'Idea': idea,
16-
'Tomorrow': tomorrow,
17-
'VS': vs,
18-
'Xcode': xcode
20+
Arduino: arduinoLight,
21+
Ascetic: ascetic,
22+
Docco: docco,
23+
GitHub: githubGist,
24+
Grayscale: grayscale,
25+
hljs: defaultStyle,
26+
Idea: idea,
27+
Tomorrow: tomorrow,
28+
VS: vs,
29+
Xcode: xcode
1930
};
2031

2132
const themes = Object.keys(themeMap);
@@ -25,43 +36,53 @@ class Document extends Component {
2536
super(props);
2637

2738
this.state = {
28-
code: '// Welcome to codeprinter!\n' +
29-
'const foo = () => {\n' +
30-
' console.log(\'This is where your code will be printed out!\');\n' +
31-
'};'
39+
code:
40+
'// Welcome to codeprinter!\n' +
41+
'const foo = () => {\n' +
42+
" console.log('This is where your code will be printed out!');\n" +
43+
'};'
3244
};
3345

3446
this.onChange = this.onChange.bind(this);
3547
}
3648

3749
onChange(event) {
3850
this.setState({ code: event.target.value });
39-
};
51+
}
4052

4153
render() {
4254
let placeholder = 'Paste your code in here!';
4355

4456
if (this.props.numbers) {
45-
placeholder += ' \nIf you have some lines that are longer than the page width, the line numbers won\'t be fully accurate. To correct for this, add a few extra new lines to the bottom of your code.';
57+
placeholder +=
58+
" \nIf you have some lines that are longer than the page width, the line numbers won't be fully accurate. To correct for this, add a few extra new lines to the bottom of your code.";
4659
}
4760

4861
return (
49-
<div className='h-100 d-flex flex-column'>
50-
<Row className='no-print flex-grow-1'>
51-
<Col className='flex-grow-1'>
52-
<Input type='textarea' id='typeSpace' placeholder={placeholder} onChange={this.onChange} style={{ height: '100%', resize: 'none' }} />
62+
<div className="h-100 d-flex flex-column">
63+
<Row className="no-print flex-grow-1">
64+
<Col className="flex-grow-1">
65+
<Input
66+
type="textarea"
67+
id="typeSpace"
68+
placeholder={placeholder}
69+
onChange={this.onChange}
70+
style={{ height: '100%', resize: 'none' }}
71+
/>
5372
</Col>
5473
</Row>
5574

56-
<div id='printSpace' className='only-print' style={{ fontSize: '62.5%'}}>
75+
<div id="printSpace" className="only-print" style={{ fontSize: '62.5%' }}>
5776
<SyntaxHighlighter
5877
showLineNumbers={this.props.numbers}
5978
style={themeMap[this.props.theme] || ''}
60-
codeTagProps={{ style: { fontFamily: `"${this.props.font}", monospace`, fontSize: `${this.props.size}pt` } }}
79+
codeTagProps={{
80+
style: { fontFamily: `"${this.props.font}", monospace`, fontSize: `${this.props.size}pt` }
81+
}}
6182
lineNumberStyle={{ fontFamily: `"${this.props.font}", monospace`, fontSize: `${this.props.size}pt` }}
6283
customStyle={{ border: 'none' }}
63-
>
64-
{this.state.code}
84+
>
85+
{this.state.code}
6586
</SyntaxHighlighter>
6687
</div>
6788
</div>
@@ -72,7 +93,7 @@ class Document extends Component {
7293
Document.propTypes = {
7394
font: PropTypes.string.isRequired,
7495
size: PropTypes.number.isRequired,
75-
theme: PropTypes.oneOf([ 'None', ...Object.keys(themeMap) ]).isRequired,
96+
theme: PropTypes.oneOf(['None', ...Object.keys(themeMap)]).isRequired,
7697
numbers: PropTypes.bool.isRequired
7798
};
7899

‎src/editor/document/index.story.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@ import { storiesOf } from '@storybook/react';
33
import 'bootstrap/dist/css/bootstrap.css';
44
import Document from './index.js';
55

6-
storiesOf('Editor/Document', module)
7-
.add('default', () => (
8-
<Document
9-
font={'Anonymous Pro'}
10-
size={12}
11-
theme={'GitHub'}
12-
numbers={true} />
13-
));
6+
storiesOf('Editor/Document', module).add('default', () => (
7+
<Document font={'Anonymous Pro'} size={12} theme={'GitHub'} numbers={true} />
8+
));

‎src/editor/document/index.test.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ describe('Editor Document', () => {
1111

1212
it('renders the print section with some default code when text is not provided', () => {
1313
const document = shallow(<Document font={'Anonymous Pro'} size={12} theme={'GitHub'} numbers={true} />);
14-
const expectedDefaultCode = '// Welcome to codeprinter!\n' +
14+
const expectedDefaultCode =
15+
'// Welcome to codeprinter!\n' +
1516
'const foo = () => {\n' +
16-
' console.log(\'This is where your code will be printed out!\');\n' +
17+
" console.log('This is where your code will be printed out!');\n" +
1718
'};';
1819
const syntaxHighlighter = document.find(SyntaxHighlighter);
1920

@@ -42,7 +43,8 @@ describe('Editor Document', () => {
4243

4344
it('renders the placeholder with an extra note when line numbers are enabled', () => {
4445
const document = shallow(<Document font={'Anonymous Pro'} size={12} theme={'GitHub'} numbers={true} />);
45-
const expectedPlaceholder = 'Paste your code in here! \nIf you have some lines that are longer than the page width, the line numbers won\'t be fully accurate. To correct for this, add a few extra new lines to the bottom of your code.';
46+
const expectedPlaceholder =
47+
"Paste your code in here! \nIf you have some lines that are longer than the page width, the line numbers won't be fully accurate. To correct for this, add a few extra new lines to the bottom of your code.";
4648

4749
const textarea = document.find(Input);
4850

@@ -85,7 +87,9 @@ describe('Editor Document', () => {
8587

8688
it('renders the code with the specified line numbers', () => {
8789
const expectedLineNumbersEnabled = true;
88-
const document = shallow(<Document font={'Anonymous Pro'} size={12} theme={'GitHub'} numbers={expectedLineNumbersEnabled} />);
90+
const document = shallow(
91+
<Document font={'Anonymous Pro'} size={12} theme={'GitHub'} numbers={expectedLineNumbersEnabled} />
92+
);
8993

9094
const syntaxHighlighter = document.find(SyntaxHighlighter);
9195

‎src/editor/index.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ class Editor extends Component {
2626
'Ubuntu Mono'
2727
];
2828

29-
this.sizes = [ 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ];
29+
this.sizes = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
3030

31-
this.themes = [ 'None', ...themes ];
31+
this.themes = ['None', ...themes];
3232

3333
this.state = {
3434
style: {
@@ -47,31 +47,36 @@ class Editor extends Component {
4747
}
4848

4949
onChange(type, value) {
50-
this.setState({ style: { ...this.state.style, [type]: value }});
50+
this.setState({ style: { ...this.state.style, [type]: value } });
5151
}
5252

5353
render() {
5454
return (
55-
<div className='responsive-container'>
55+
<div className="responsive-container">
5656
<Toolbar
57-
fonts={this.fonts} activeFont={this.state.style.font}
58-
sizes={this.sizes} activeSize={this.state.style.size}
59-
themes={this.themes} activeTheme={this.state.style.theme}
57+
fonts={this.fonts}
58+
activeFont={this.state.style.font}
59+
sizes={this.sizes}
60+
activeSize={this.state.style.size}
61+
themes={this.themes}
62+
activeTheme={this.state.style.theme}
6063
activeNumbers={this.state.style.numbers}
6164
onChange={this.onChange}
62-
onPrint={this.onPrint} />
63-
<Container fluid={true} className='h-100'>
65+
onPrint={this.onPrint}
66+
/>
67+
<Container fluid={true} className="h-100">
6468
<Document
6569
font={this.state.style.font}
6670
size={this.state.style.size}
6771
theme={this.state.style.theme}
68-
numbers={this.state.style.numbers} />
72+
numbers={this.state.style.numbers}
73+
/>
6974
</Container>
7075
</div>
7176
);
7277
}
7378
}
7479

75-
Editor.propTypes = { };
80+
Editor.propTypes = {};
7681

7782
export default Editor;

0 commit comments

Comments
 (0)