Skip to content

Commit 904ad37

Browse files
robhrt7robhrt7
committed
initial commit
0 parents  commit 904ad37

File tree

14 files changed

+260
-0
lines changed

14 files changed

+260
-0
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
build

‎README.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# SourceJS React Styleguide Bundle Example
2+
3+
Example of pre-configured SourceJS bundle for building React Component Libraries and Style Guides.
4+
5+
Based on latest SourceJS 0.6 nightly builds, and a bunch of plugins:
6+
7+
* [sourcejs-react-styleguidist](http://github.com/sourcejs/sourcejs-react-styleguidist)
8+
* [sourcejs-react-docgen](http://github.com/sourcejs/sourcejs-react-docgen)
9+
10+
Available features:
11+
12+
* Live code editor
13+
* Automatic React Doc generation
14+
* Hot Module Replacement
15+
* Clarify mode for responsive testing
16+
* Advanced navigation support
17+
* SourceJS ecosystem support
18+
19+
![image](http://d.pr/i/1ij48+)
20+
21+
## Setup
22+
23+
```
24+
npm i && npm start
25+
open http://127.0.0.1:8080
26+
```
27+
28+
To update SourceJS (in case of new installed plugins), run
29+
30+
```
31+
npm run build-source
32+
```
33+
34+
### Writing Documentation
35+
36+
Example components are placed into `./specs` folder. Each component has its JSX/CSS sources, `readme.md` documentation with component examples and text description and `info.json` meta file.
37+
38+
Simple, but extendable syntax allows automatically building rich component presentation pages.
39+
40+
# Placeholder Spec
41+
42+
<%- info.__docGenRaw.description %>
43+
44+
## Properties
45+
46+
<%- info.__docGenHTML %>
47+
48+
## Basic placeholder
49+
50+
```jsx
51+
<Placeholder type="beard"/>
52+
```
53+
54+
Renders into
55+
56+
![image](http://d.pr/i/18Y12+)

‎index.src.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="source_subhead">
2+
<h1>SourceJS — Living Style Guide on Steroids</h1>
3+
</div>
4+
5+
<div class="source_catalog" data-nav="/specs">
6+
<h2>Example React components</h2>
7+
</div>

‎info.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"title": "Source - Living Style Guide on Steroids",
3+
"role": "navigation"
4+
}

‎options.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// User options for overriding core options.js
2+
3+
module.exports = {
4+
// Restart the app after changing core (back-end) options
5+
// Core options could be only redefined from user/options.js, context options are not supported
6+
core: {
7+
processMd: {
8+
languageRenderers: {
9+
jsx: require('sourcejs-react-styleguidist/core/lang-jsx').processExample
10+
}
11+
}
12+
},
13+
14+
// Page rendering configuration (redefinable from context options)
15+
rendering: {},
16+
17+
// Client-side options (redefinable from context options)
18+
assets: {
19+
modulesEnabled : {
20+
// Overriding example
21+
// trimSpaces: true
22+
},
23+
24+
modulesOptions : {
25+
// Modules options example
26+
// navHighlight: {
27+
// updateHash: false
28+
// }
29+
},
30+
31+
// Legacy options object support for some older plugins
32+
pluginsOptions: {}
33+
},
34+
35+
// External plugins options (are also exposed to client-side
36+
plugins: {}
37+
};

‎package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"version": "0.1.0",
3+
"author": {
4+
"name": "Robert Haritonov",
5+
"url": "http://rhr.me/"
6+
},
7+
"description": "Example of pre-configured SourceJS bundle for building React Component Libraries and Style Guides.",
8+
"scripts": {
9+
"build-source": "cd ./node_modules/sourcejs && npm run build",
10+
"start": "node ./node_modules/sourcejs/app.js"
11+
},
12+
"dependencies": {
13+
"react": "^0.14.2",
14+
"react-dom": "^0.14.2",
15+
"sourcejs": "^0.6.0-nightly.2",
16+
"sourcejs-react-docgen": "^0.3.0",
17+
"sourcejs-react-styleguidist": "^0.3.0"
18+
}
19+
}

‎specs/button/Button.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.root {
2+
padding: .5em 1.5em;
3+
color: #666;
4+
background-color: #fff;
5+
border: 1px solid currentColor;
6+
border-radius: .3em;
7+
text-align: center;
8+
vertical-align: middle;
9+
cursor: pointer;
10+
}

‎specs/button/Button.jsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Component, PropTypes } from 'react';
2+
3+
import s from './Button.css';
4+
5+
/**
6+
* The only true button.
7+
*/
8+
export default class Button extends Component {
9+
static propTypes = {
10+
/**
11+
* Button label.
12+
*/
13+
children: PropTypes.string.isRequired,
14+
color: PropTypes.string,
15+
size: PropTypes.oneOf(['small', 'normal', 'large']),
16+
}
17+
static defaultProps = {
18+
color: '#333',
19+
size: 'normal'
20+
}
21+
static sizes = {
22+
small: '10px',
23+
normal: '14px',
24+
large: '18px'
25+
}
26+
27+
onClick() {
28+
alert('click');
29+
}
30+
31+
render() {
32+
let styles = {
33+
color: this.props.color,
34+
fontSize: Button.sizes[this.props.size]
35+
};
36+
37+
return (
38+
<button className={s.root} style={styles} onClick={this.onClick}>{this.props.children}</button>
39+
);
40+
}
41+
}

‎specs/button/info.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"title": "Button Spec"
3+
}

‎specs/button/readme.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Button Spec
2+
3+
<%- info.__docGenRaw.description %>
4+
5+
## Properties
6+
7+
<%- info.__docGenHTML %>
8+
9+
## Basic button
10+
11+
```jsx
12+
<Button>Default Button</Button>
13+
```
14+
15+
## Big button
16+
17+
```jsx
18+
<Button size="large" color="deeppink">Large Pink</Button>
19+
```

‎specs/placeholder/Placeholder.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.root {
2+
background: #ccc;
3+
}

‎specs/placeholder/Placeholder.jsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Component, PropTypes } from 'react';
2+
3+
import s from './Placeholder.css';
4+
5+
/**
6+
* Image placeholders.
7+
*/
8+
export default class Placeholder extends Component {
9+
static propTypes = {
10+
type: PropTypes.oneOf(['animal', 'bacon', 'beard', 'bear', 'cat', 'food', 'city', 'nature', 'people']),
11+
width: PropTypes.number,
12+
height: PropTypes.number
13+
}
14+
15+
static defaultProps = {
16+
type: 'animal',
17+
width: 150,
18+
height: 150
19+
}
20+
21+
getImageUrl() {
22+
let { type, width, height } = this.props;
23+
let types = {
24+
animal: `http://placeimg.com/${width}/${height}/animals`,
25+
bacon: `http://baconmockup.com/${width}/${height}`,
26+
bear: `http://www.placebear.com/${width}/${height}`,
27+
beard: `http://placebeard.it/${width}/${height}`,
28+
cat: `http://lorempixel.com/${width}/${height}/cats`,
29+
city: `http://lorempixel.com/${width}/${height}/city`,
30+
food: `http://lorempixel.com/${width}/${height}/food`,
31+
nature: `http://lorempixel.com/${width}/${height}/nature`,
32+
people: `http://lorempixel.com/${width}/${height}/people`,
33+
};
34+
return types[type];
35+
}
36+
37+
render() {
38+
let { width, height } = this.props;
39+
return (
40+
<img className={s.root} src={this.getImageUrl()} width={width} height={height}/>
41+
);
42+
}
43+
}

‎specs/placeholder/info.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"title": "Placeholder Spec"
3+
}

‎specs/placeholder/readme.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Placeholder Spec
2+
3+
<%- info.__docGenRaw.description %>
4+
5+
## Properties
6+
7+
<%- info.__docGenHTML %>
8+
9+
## Basic placeholder
10+
11+
```jsx
12+
<Placeholder type="beard"/>
13+
```

0 commit comments

Comments
 (0)