├── .babelrc ├── .gitignore ├── README.md ├── index.src.html ├── info.json ├── license.md ├── options.js ├── package.json ├── pre-build-production.js └── specs ├── button ├── Button.css ├── Button.jsx ├── info.json └── readme.md └── placeholder ├── Placeholder.css ├── Placeholder.jsx ├── info.json └── readme.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "development": { 4 | "presets": [ 5 | "react-hmre" 6 | ] 7 | } 8 | }, 9 | "presets": [ 10 | "es2015", 11 | "react" 12 | ] 13 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SourceJS React Styleguide Bundle Example 2 | 3 | Example of pre-configured [SourceJS](http://sourcejs.com) 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 | [**Live demo**](http://162.219.3.106:8080) 20 | 21 | [![image](http://d.pr/i/1ij48+)](http://162.219.3.106:8080/specs/button/) 22 | 23 | ## Setup 24 | 25 | ``` 26 | npm i && npm start 27 | open http://127.0.0.1:8080 28 | ``` 29 | 30 | To update SourceJS (in case of new installed plugins), run 31 | 32 | ``` 33 | npm run build-source 34 | ``` 35 | 36 | ### Writing Documentation 37 | 38 | 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. 39 | 40 | Simple, but extendable syntax allows automatically building rich component presentation pages. 41 | 42 | # Placeholder Spec 43 | 44 | <%- info.__docGenRaw.description %> 45 | 46 | ## Properties 47 | 48 | <%- info.__docGenHTML %> 49 | 50 | ## Basic placeholder 51 | 52 | ```jsx 53 | 54 | ``` 55 | 56 | Renders into 57 | 58 | ![image](http://d.pr/i/18Y12+) 59 | 60 | --- 61 | 62 | ## License 63 | 64 | The MIT License, see the included [license.md](license.md) file. 65 | -------------------------------------------------------------------------------- /index.src.html: -------------------------------------------------------------------------------- 1 |
2 |

SourceJS — Living Style Guide on Steroids

3 |
4 | 5 |
6 |

Example React components

7 |
8 | -------------------------------------------------------------------------------- /info.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Source - Living Style Guide on Steroids", 3 | "role": "navigation" 4 | } -------------------------------------------------------------------------------- /license.md: -------------------------------------------------------------------------------- 1 | # The MIT License 2 | 3 | Copyright © 2013-2015 Sourcejs.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /options.js: -------------------------------------------------------------------------------- 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 | }; 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.4.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 | "postinstall": "node pre-build-production.js" 12 | }, 13 | "dependencies": { 14 | "babel-preset-es2015": "^6.9.0", 15 | "babel-preset-react": "^6.5.0", 16 | "babel-preset-react-hmre": "^1.1.1", 17 | "babel-standalone": "^6.7.7", 18 | "react": "^0.14.2", 19 | "react-dom": "^0.14.2", 20 | "sourcejs": "^0.6.0-nightly.6", 21 | "sourcejs-react-docgen": "^0.3.0", 22 | "sourcejs-react-styleguidist": "^0.5.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /pre-build-production.js: -------------------------------------------------------------------------------- 1 | // Script for pre-building webpack bundle, before running in Heroku and other containers 2 | if (process.env.NODE_ENV === 'production') { 3 | require('sourcejs-react-styleguidist/core/build.js'); 4 | } 5 | -------------------------------------------------------------------------------- /specs/button/Button.css: -------------------------------------------------------------------------------- 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 | } 11 | -------------------------------------------------------------------------------- /specs/button/Button.jsx: -------------------------------------------------------------------------------- 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 | constructor(props) { 10 | super(props); 11 | 12 | this.sizes = { 13 | small: '10px', 14 | normal: '14px', 15 | large: '18px' 16 | }; 17 | } 18 | 19 | onClick() { 20 | alert('click'); 21 | } 22 | 23 | render() { 24 | let styles = { 25 | color: this.props.color, 26 | fontSize: this.sizes[this.props.size] 27 | }; 28 | 29 | return ( 30 | 31 | ); 32 | } 33 | } 34 | 35 | Button.propTypes = { 36 | /** 37 | * Button label. 38 | */ 39 | children: PropTypes.string.isRequired, 40 | color: PropTypes.string, 41 | size: PropTypes.oneOf(['small', 'normal', 'large']), 42 | }; 43 | 44 | Button.defaultProps = { 45 | color: '#333', 46 | size: 'normal' 47 | }; 48 | -------------------------------------------------------------------------------- /specs/button/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Button Spec" 3 | } -------------------------------------------------------------------------------- /specs/button/readme.md: -------------------------------------------------------------------------------- 1 | # Button Spec 2 | 3 | <%- info.__docGenRaw.description %> 4 | 5 | ## Properties 6 | 7 | <%- info.__docGenHTML %> 8 | 9 | ## Basic button 10 | 11 | ```jsx 12 | 13 | ``` 14 | 15 | ## Big button 16 | 17 | ```jsx 18 | 19 | ``` -------------------------------------------------------------------------------- /specs/placeholder/Placeholder.css: -------------------------------------------------------------------------------- 1 | .root { 2 | background: #ccc; 3 | } 4 | -------------------------------------------------------------------------------- /specs/placeholder/Placeholder.jsx: -------------------------------------------------------------------------------- 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 | constructor(props) { 10 | super(props); 11 | } 12 | 13 | getImageUrl() { 14 | let { type, width, height } = this.props; 15 | let types = { 16 | animal: `http://placeimg.com/${width}/${height}/animals`, 17 | bacon: `http://baconmockup.com/${width}/${height}`, 18 | bear: `http://www.placebear.com/${width}/${height}`, 19 | beard: `http://placebeard.it/${width}/${height}`, 20 | cat: `http://lorempixel.com/${width}/${height}/cats`, 21 | city: `http://lorempixel.com/${width}/${height}/city`, 22 | food: `http://lorempixel.com/${width}/${height}/food`, 23 | nature: `http://lorempixel.com/${width}/${height}/nature`, 24 | people: `http://lorempixel.com/${width}/${height}/people`, 25 | }; 26 | return types[type]; 27 | } 28 | 29 | render() { 30 | let { width, height } = this.props; 31 | return ( 32 | 33 | ); 34 | } 35 | } 36 | 37 | Placeholder.propTypes = { 38 | type: PropTypes.oneOf(['animal', 'bacon', 'beard', 'bear', 'cat', 'food', 'city', 'nature', 'people']), 39 | width: PropTypes.number, 40 | height: PropTypes.number 41 | }; 42 | 43 | Placeholder.defaultProps = { 44 | type: 'animal', 45 | width: 150, 46 | height: 150 47 | }; -------------------------------------------------------------------------------- /specs/placeholder/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Placeholder Spec" 3 | } -------------------------------------------------------------------------------- /specs/placeholder/readme.md: -------------------------------------------------------------------------------- 1 | # Placeholder Spec 2 | 3 | <%- info.__docGenRaw.description %> 4 | 5 | ## Properties 6 | 7 | <%- info.__docGenHTML %> 8 | 9 | ## Basic placeholder 10 | 11 | ```jsx 12 | 13 | ``` --------------------------------------------------------------------------------