React Styledoc

Is a style-guide generator which can generate style-guides from an applications existing components.

There are not much in the from of documentation yet, I am working on that, but here is sort of a TLDR;

Run npm install -g react-styledoc to install the package, then use node bin.js build --help or node bin.js start --help to see the parameters for running. As for the how to write the actual styledoc i would recommend going to demo/components and look at its files

There are three type of elements

• guides Description of components
• posters A component which are added, which are ment for adding full with parts to the guide, for adding custom sections
• screens A collection of elements, which comes together to form example screens

Writing screens, Posters and guides

Screens posters and guides share the same API, but are names .screen.js, .poster and .guide.js, the API are

• component: The component to render
• title The title of the poster/screen/guide
• description A description of the poster/screen/guide
• group: The group name, for screens and guides
• props: A function which returns the props for the component

Future

I am working on the component screen detail view, where components will be fully interactive, and i am expanding the props function to get a setProp function as its first parameter, which can be used to make interactivity in the components

React-Native is currently supported, but styling does not work, which hopefully is something which can be fixed. It may come with the concave that in React-Native mode, it would not use shadowdom for isolation, so any component which uses global CSS could affect the other components