Skip to content

[alpha] a demo project of Isomorpic React Styleguide bundle powered by SourceJS.

Notifications You must be signed in to change notification settings

sourcejs/react-styleguide-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

image

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

About

[alpha] a demo project of Isomorpic React Styleguide bundle powered by SourceJS.

Resources

Stars

Watchers

Forks

Packages

No packages published