Get some features from ClojureScript devcards

[arunoda]

See: https://github.com/bhauman/devcards

Clojurescript devcards is a very similar project but they have implemented some cool features which reminds me iPython notebooks.

It has a concept of card (which is similar to story in our case). Unlike in our case, we can render not only React elements, but markdown and tests as cards.
See: https://vimeo.com/97078905

Which is very useful for creating self describing documentations.

What we can get from Devcards

It's unwise if we just clone all the features of devcards. But we can inspire from it. Here are some of the things we can do.

• Allow to add a markdown description for each story. (Technically, there can be stories with just the markdown)
• We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.
• We shouldn't write test cases inside stories, but we should run tests and watch them. If any of the test failed, we can report it inside the storybook. (May be a red alert and show logs)

[kokjinsam]

One of other things that I'm working on to add for my team is markdown description. Perhaps I can send another PR on that?

I don't quite understand point 2. Mind to elaborate more?

[glenjamin]

We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.

That's a great idea!

[arunoda]

@sammkj yes please 👍

We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.

Basically, with this we are just reading propTypes for a given component class and just list them. It's kind of a documentation for a component.

@glenjamin Thanks.

[chrislloyd]

We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.

Other than a property name, there's not enough reflective data in Reacts PropTypes to extract that information. Facebook uses (and recommends) static analysis to access that data: facebook/react#4794

[chrislloyd]

Also, why do you not recommend writing tests inside of stories?

[nicksp]

@arunoda Hi there,

Have some local groundwork for exactly these two features that I'd like to integrate in your tool :)

1. Allow to add a markdown description for each story. (Technically, there can be stories with just the markdown)
2. We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.

How shall i put a note that i started to work on it? And what do you think if i'll develop it?

[arunoda]

@nicksp awesome.

Technically, there can be stories with just the markdown.
Yes. That's what we can start with. Something like this.

import { storiesOf, markdown } from '@kadira/storybook';

storiesOf('Something')
   .add('description', markdown(`
      ## This is the a great component.
      ...
   `));

This markdown will return a React element. So, it will work without any additional setup.

We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.

Yes. It's nice to show this with the user's component. This is also same for the markdown description as well. I think it's great if we can create a new panel just below the iframe which shows these information if it contains within a story.

[nicksp]

@arunoda How shall i start? I mean do i need to create and issues and mark that i'm working on it or what?

So, since this is a relatively complex task, i cat start with little things first and go further step by step. And in the meantime we can discuss the implemented stuff and alter it if needed.

[arunoda]

@nicksp just add a note and start working on it. May be just work on a simple task.
Once you done something, just create a PR and link to this issue.
(PR doesn't need to be complete)

[nicksp]

@arunoda Sounds good. Will ad a note right here then, in that specific issue. But since i don't have that much free time unfortunately, it won't be fast development process... just so you know. But i'll do my best. Would really love to pimp that project.

[arunoda]

@nicksp No problem. Take your time. If we are working on that, I will let you know.

[nicksp]

Started implementation of the following tasks:

• Allow to add a markdown description for each story. (Technically, there can be stories with just the markdown)
• We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.

[arunoda]

@nicksp We discuss a bit about this in our office. So, we thought rather than doing any changes to Storybook core, may be we can use some helper components to achieve these. See some sample code:

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { Button } from '../button';
import { Container, Markdown, PropTable } from '@you/storybook-helpers';

storiesOf('Button', module)
  .add('with a text', () => (
    <Container>
      <Markdown>
        ## Rendering a button

        This is how you can render a button.
      </Markdown>
      <Button>Button Name</Button>
      <PropTable component={Button} />
    </Container>
  ));

[jeef3]

The only catch with something like that, would be if you're still wanting that component resizer (#17) . That resizes the whole iframe I think currently?

So you would end up possibly needing another helper to wrap the component (and then only resize that?).

<Container>
  <Markdown>
    ## Rendering a button
    This is how you can render a button.
  </Markdown>
  <Component>
    <Button>Text name</Button>
  </Component>
  <PropTable component={Button} />
</Container>

[arunoda]

@jeef3 That's a good point.

[nicksp]

@arunoda Yep, sounds like a good solution. I like idea of separate components doing its stuff only. So, will implement on my account then, as a separate component which you can you later.

[arunoda]

I'm going to close this since we'll be working on some of these features as extensions to react storybook.
See: https://github.com/kadirahq/react-storybook-story for an example.

We'll be launching an addon API soon.