React Styleguide Example

💀 Work in progress 💀

A demo project of Isomorpic React Styleguide bundle powered by SourceJS, sourcejs-react and other plugins.

Generated documentation out of components source code and styleguide entry point:

Check out other React SourceJS bundle example with hot reload and live editor - sourcejs-react-bundle-example.

Setup

npm i && npm start
open http://127.0.0.1:8080

To update SourceJS (in case of new installed plugins), run

npm run build-source

How it works

SourceJS as a style guide platform allows to run either one components documentation (as we see in this example), either a collection of components with scalable catalogs.

As an input SourceJS gets React component, engine configuration and documentation (spec) page description (styleguide.jsx, info.json).

For rendering a documentation page, this example uses sourcejs-react plugin. As an alternative, you can use sourcejs-md-react or any other tech-integration plugins listed here sourcejs.com/docs/spec-helpers (Jade/Slim/DSS).

sourcejs-webpack is used for preparing client-side code out of styleguide.jsx for isomorphic rendering. By default, sourcejs-react plugin only renders components on server side. sourcejs-react-docgen renders auto generated documentation of properties and code commpoents onto the spec page.

Note: this example is quite limited at the moment, but expect fully configurable plugin set in nearest future.

File structure

• info.json - documentation page meta, used for indexing multiple-cataloged component libraries
• styleguide.jsx - documentation page description, here you place your component examples and description
• sourcejs-options.js - overriding default SourceJS options to set styleguide.jsx as an entry point
• src - example component source code

TODO

• Add sourcejs-contrib-browser-sync plugin to example
• Add component playground (demo)
• Make configuration slimmer (remove sourcejs-option.js and info.json)
• Integrate hot module replacement