Better way to demo Components

[eisisig]

I think we need a better way/workflow to demo Components. Some components can be easily demoed with just the fixtures. But some depend on sibling/child components (Tab/TabPane, Accordion/AccordionPane, RadioList/Radio) etc...

Now we pick up all Components and fixtures. So if there is a Demo Component AND a fixture for it we display it. BUT the docs are then from the Demo Component and not the actual Component you are demoing.

We could do some auto-detecting of demo Components with some naming convention so

Accordion.js
AccordionPane.js
AccordionDemo.js
// or ---
Radio.js
RadioList.js
RadioList-demo.js

Then we would attach the demo info to the Component when we are fetching all the Components on start

I'll add to this when I think of something

[jsergiu]

I like the way they made it for Semantic UI >> http://semantic-ui.com/elements/button.html#size

[jsergiu]

To reuse some of the current functionality we can do something like this: http://imgur.com/7GgES5I.

Also for each demo we can have 2 files: one with properties with are loaded automatically to generate the list of items in the sidebar and one with react code that contains the actual demo.

Demo/
Button/
fixtures.js: { variation: { primary{}, secondary: {} }, size: {tiny: } small: {}, }
variations.js: {React code that displays all variations}
size.js { react code that display all sizes}
Alert/
....

Then the playground would load all the fixtures.js files to generate the list of components (sidebar) and use the first level of objects to generate the list of possible modifiers. When a modifier is clicked the demo file is loaded.

For example: when variations modifier is clicked under button then Demo/Button/variations.js is loaded and displayed.

Documentation should be the first item in the list by default. Ex: /Demo/Button/documentation.js

[eisisig]

I'm wondering if this is more of a css SUITCSS/BEM demo rather than a Component isolation dev preview thingy... Maybe we can combine them... But the main purpose of cosmos-js was the ability to easily provide demo data (fixtures) and then see how the Component "worked" not looked.

We can combine them of cause... But I'd like it to be css convention agnostic as much as possible?

On another related node. I was actually planning on "forcing" all the related data for Components to be in the same folder as a best practice isolated Component. That way we don't need as much logic looking for things and each Component could in theory be a separated package

/Button
    /demos
    /fixtures
    /styles
    index.js > ./components/Button.js
    Button.js
    Button-spec.md
    Button-test.js

or something like this... Haven't thought that through

[eisisig]

We could show "all" fixtures when you click the Component name... Than a single fixture can be clicked and the Editor will appear so you could edit the props