React Styleguide Example
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.jsxas 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.jsandinfo.json) - Integrate hot module replacement