Skip to content

Commit e2509ac

Browse files
diogofcunhadiogofcunha
authored
chore: prettier setup (#52)
* chore: 🤖 prettier setup * chore: 🤖 run prettier for all js files * chore: 🤖 ran prettier on the entire code base
1 parent ff8354b commit e2509ac

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1566
-1408
lines changed

‎config/pages.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
const ghpages = require('gh-pages');
22
const path = require('path');
33

4-
ghpages.publish(
5-
path.join(
6-
__dirname,
7-
'../demo/dist'
8-
),
9-
err => { if(err) throw err }
10-
);
4+
ghpages.publish(path.join(__dirname, '../demo/dist'), err => {
5+
if (err) throw err;
6+
});

‎demo/src/Home.js‎

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,48 @@
11
import React from 'react';
2-
import { Segment, Header } from 'semantic-ui-react'
2+
import {Segment, Header} from 'semantic-ui-react';
33

4-
export default () => <div>
5-
<Header as='h2'>
6-
Introduction
7-
</Header>
8-
<Segment basic>
9-
<p><b>react-virtualized-tree</b> is a react library built on top of <a href={"https://bvaughn.github.io/react-virtualized/#/components/List"}>react-virtualized</a>.</p>
10-
<p>Its main goal is to display tree like data in a beautiful and fast way.</p>
11-
<p>Being a reactive library it uses children functions to achieve maximum extansability</p>
12-
<p>The core idea behind it is that anyone using it is enable to create a tree as they wich just by rendering their own components or components exported by the tree</p>
13-
</Segment>
14-
<Header as='h2'>
15-
Installation
16-
</Header>
17-
<Segment basic>
18-
<p>You can install via npm or yarn.</p>
19-
<Segment compact>
20-
<code>npm i react-virtualized-tree --save</code>
4+
export default () => (
5+
<div>
6+
<Header as="h2">Introduction</Header>
7+
<Segment basic>
8+
<p>
9+
<b>react-virtualized-tree</b> is a react library built on top of{' '}
10+
<a href={'https://bvaughn.github.io/react-virtualized/#/components/List'}>react-virtualized</a>.
11+
</p>
12+
<p>Its main goal is to display tree like data in a beautiful and fast way.</p>
13+
<p>Being a reactive library it uses children functions to achieve maximum extansability</p>
14+
<p>
15+
The core idea behind it is that anyone using it is enable to create a tree as they wich just by rendering their
16+
own components or components exported by the tree
17+
</p>
2118
</Segment>
22-
<Segment compact>
23-
<code>yarn add react-virtualized-tree</code>
19+
<Header as="h2">Installation</Header>
20+
<Segment basic>
21+
<p>You can install via npm or yarn.</p>
22+
<Segment compact>
23+
<code>npm i react-virtualized-tree --save</code>
24+
</Segment>
25+
<Segment compact>
26+
<code>yarn add react-virtualized-tree</code>
27+
</Segment>
28+
To get the basic styles for free you need to import react-virtualized styles only once.
29+
<Segment compact>
30+
<code>import 'react-virtualized/styles.css'</code>;
31+
</Segment>
32+
<Segment compact>
33+
<code>import 'react-virtualized-tree/lib/main.css'</code>;
34+
</Segment>
35+
<p>If you want to use the icons in the default renderers do the same for material icons.</p>
36+
<Segment compact>
37+
<code>import 'material-icons/css/material-icons.css'</code>;
38+
</Segment>
2439
</Segment>
25-
To get the basic styles for free you need to import react-virtualized styles only once.
26-
<Segment compact>
27-
<code>import 'react-virtualized/styles.css'</code>;
40+
<Header as="h2">Dependencies</Header>
41+
<Segment basic>
42+
<p>
43+
Most react-virtualized-tree Dependencies are managed internally, the only required peerDependencies are{' '}
44+
<b>react</b>, <b>react-dom</b> and <b>react-virtualized</b>.
45+
</p>
2846
</Segment>
29-
<Segment compact>
30-
<code>import 'react-virtualized-tree/lib/main.css'</code>;
31-
</Segment>
32-
33-
<p>If you want to use the icons in the default renderers do the same for material icons.</p>
34-
<Segment compact>
35-
<code>import 'material-icons/css/material-icons.css'</code>;
36-
</Segment>
37-
</Segment>
38-
<Header as='h2'>
39-
Dependencies
40-
</Header>
41-
<Segment basic>
42-
<p>Most react-virtualized-tree Dependencies are managed internally, the only required peerDependencies are <b>react</b>, <b>react-dom</b> and <b>react-virtualized</b>.</p>
43-
</Segment>
44-
</div>;
47+
</div>
48+
);

‎demo/src/NavBar.js‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,57 @@
1-
import React, { Component } from 'react'
2-
import { Sidebar, Segment, Menu, Image, Grid } from 'semantic-ui-react'
3-
import { Link } from 'react-router-dom';
1+
import React, {Component} from 'react';
2+
import {Sidebar, Segment, Menu, Image, Grid} from 'semantic-ui-react';
3+
import {Link} from 'react-router-dom';
44

5-
import { getRepoPath } from './toolbelt';
5+
import {getRepoPath} from './toolbelt';
66
import './NavBar.css';
77

88
class NavBar extends Component {
99
render() {
1010
return (
11-
<div className='content'>
11+
<div className="content">
1212
<Grid>
1313
<Grid.Column width={13}>
14-
<div className='header'>
14+
<div className="header">
1515
<Grid>
1616
<Grid.Column width={3}>
17-
<img src='http://cdn.onlinewebfonts.com/svg/img_525932.png' width={150} />
17+
<img src="http://cdn.onlinewebfonts.com/svg/img_525932.png" width={150} />
1818
</Grid.Column>
19-
<Grid.Column
20-
width={13}
21-
className='header-text'>
19+
<Grid.Column width={13} className="header-text">
2220
react-virtualized-tree
2321
</Grid.Column>
2422
</Grid>
2523
</div>
26-
{ this.props.children }
24+
{this.props.children}
2725
</Grid.Column>
2826
<Grid.Column width={3}>
2927
<Sidebar
3028
as={Menu}
31-
animation='overlay'
32-
width='thin'
33-
direction='right'
29+
animation="overlay"
30+
width="thin"
31+
direction="right"
3432
visible
35-
icon='labeled'
33+
icon="labeled"
3634
vertical
3735
inverted
3836
>
39-
<Menu.Item name='home'>
40-
<Link to='/'>Setup</Link>
37+
<Menu.Item name="home">
38+
<Link to="/">Setup</Link>
4139
</Menu.Item>
42-
<Menu.Item name='docs'>
43-
<Link to='/docs/renderers'>Documentation</Link>
40+
<Menu.Item name="docs">
41+
<Link to="/docs/renderers">Documentation</Link>
4442
</Menu.Item>
45-
<Menu.Item name='examples'>
46-
<Link to='/examples/basic-tree'>Examples</Link>
43+
<Menu.Item name="examples">
44+
<Link to="/examples/basic-tree">Examples</Link>
4745
</Menu.Item>
48-
<Menu.Item name='github'>
46+
<Menu.Item name="github">
4947
<a href={getRepoPath()}>GitHub</a>
5048
</Menu.Item>
5149
</Sidebar>
5250
</Grid.Column>
5351
</Grid>
5452
</div>
55-
)
53+
);
5654
}
5755
}
5856

59-
export default NavBar
57+
export default NavBar;

‎demo/src/containers/DocumentsContainer.js‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,32 @@
1-
import React, { Component } from 'react'
2-
import { Grid, Menu, Segment, Header } from 'semantic-ui-react'
3-
import { Link, Route } from 'react-router-dom';
1+
import React, {Component} from 'react';
2+
import {Grid, Menu, Segment, Header} from 'semantic-ui-react';
3+
import {Link, Route} from 'react-router-dom';
44

55
import documents from '../docs';
66
import Doc from '../docs/Doc';
7-
import { getDocumentsPath } from '../toolbelt';
7+
import {getDocumentsPath} from '../toolbelt';
88
import './ExamplesContainer.css';
99

1010
export default class ExamplesContainer extends Component {
11-
render() {
11+
render() {
1212
return (
1313
<div>
1414
<Grid>
1515
<Grid.Column width={4}>
1616
<Menu fluid vertical tabular>
17-
{
18-
Object.keys(documents).map(path => (
19-
<Link to={`/docs/${path}`} key={path}>
20-
<Menu.Item
21-
name={documents[path].name}
22-
active={this.props.location.pathname === `/docs/${path}`}
23-
/>
24-
</Link>)
25-
)
26-
}
17+
{Object.keys(documents).map(path => (
18+
<Link to={`/docs/${path}`} key={path}>
19+
<Menu.Item name={documents[path].name} active={this.props.location.pathname === `/docs/${path}`} />
20+
</Link>
21+
))}
2722
</Menu>
2823
</Grid.Column>
2924

3025
<Grid.Column width={10} heigth={1000}>
31-
<Route
32-
path="/docs/:document"
33-
component={Doc}
34-
/>
26+
<Route path="/docs/:document" component={Doc} />
3527
</Grid.Column>
3628
</Grid>
3729
</div>
38-
)
30+
);
3931
}
40-
}
32+
}

‎demo/src/containers/ExamplesContainer.js‎

Lines changed: 33 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,50 @@
1-
import React, { Component } from 'react'
2-
import { Grid, Menu, Segment, Header } from 'semantic-ui-react'
3-
import { Route } from 'react-router';
1+
import React, {Component} from 'react';
2+
import {Grid, Menu, Segment, Header} from 'semantic-ui-react';
3+
import {Route} from 'react-router';
44
import examples from '../examples';
5-
import { Link } from 'react-router-dom';
6-
import { getExamplePath } from '../toolbelt';
5+
import {Link} from 'react-router-dom';
6+
import {getExamplePath} from '../toolbelt';
77
import './ExamplesContainer.css';
88

99
export default class ExamplesContainer extends Component {
10-
render() {
10+
render() {
1111
return (
1212
<div>
1313
<Grid>
1414
<Grid.Column width={4}>
1515
<Menu fluid vertical tabular>
16-
{
17-
Object.keys(examples).map(path => (
18-
<Link to={`/examples/${path}`} key={path}>
19-
<Menu.Item
20-
name={examples[path].name}
21-
active={this.props.location.pathname === `/examples/${path}`}
22-
/>
23-
</Link>)
24-
)
25-
}
16+
{Object.keys(examples).map(path => (
17+
<Link to={`/examples/${path}`} key={path}>
18+
<Menu.Item name={examples[path].name} active={this.props.location.pathname === `/examples/${path}`} />
19+
</Link>
20+
))}
2621
</Menu>
2722
</Grid.Column>
2823

2924
<Grid.Column width={10} heigth={1000}>
30-
<Route
31-
path="/examples/:example"
32-
render={
33-
p => {
34-
const selectedExample = examples[p.match.params.example];
35-
const { component: Component, name, description, fileName } = selectedExample;
36-
37-
return (
38-
<div>
39-
<span
40-
className='jump-to-source'>
41-
<a href={getExamplePath(fileName)}>
42-
Jump to source
43-
</a>
44-
</span>
45-
<Header as='h1'>
46-
{ name }
47-
</Header>
48-
{ description && <Segment>{ description }</Segment> }
49-
<div style={{ height: 500 }}>
50-
<Component {...p}/>
51-
</div>
52-
</div>
53-
);
54-
}
55-
}
56-
/>
25+
<Route
26+
path="/examples/:example"
27+
render={p => {
28+
const selectedExample = examples[p.match.params.example];
29+
const {component: Component, name, description, fileName} = selectedExample;
30+
31+
return (
32+
<div>
33+
<span className="jump-to-source">
34+
<a href={getExamplePath(fileName)}>Jump to source</a>
35+
</span>
36+
<Header as="h1">{name}</Header>
37+
{description && <Segment>{description}</Segment>}
38+
<div style={{height: 500}}>
39+
<Component {...p} />
40+
</div>
41+
</div>
42+
);
43+
}}
44+
/>
5745
</Grid.Column>
5846
</Grid>
5947
</div>
60-
)
48+
);
6149
}
62-
}
50+
}

0 commit comments

Comments
 (0)