Automatically render Description / Prop Tables / Components Methods

[tuchk4]

The same way as <!-- PROPS --> works. Support

• <!-- DESCRIPTION --> component's description
• <!-- METHODS --> component's methods
• <!-- DOCS --> aggregate & description & methods & props

Also would be nice to automatically generate default readmes

/**
 * This is an awesome looking button for React.
 */
export default class Button extends React.Component {
  static propTypes = {
    /**
     * Button label
     */
    label: PropTypes.string.isRequired,
    /** on click event handler */
    onClick: PropTypes.func,
    /**  Button type */
    variant: PropTypes.oneOf(['success', 'normal', 'warning', 'alert']),
  };

  /**
   * Trigger button click
   */
  click() {
    // ...
  }

  /**
   * Update button variant
   * @param {string} alert | success
   */
  updateVariant(variant) {
    // ...
  }

  render() {
    const { label, ...props } = this.props;
    return <StyledButton {...props}>{label}</StyledButton>;
  }
}

[tuchk4]

Or we can use jsdoc or similar tool to generate markdown docs on all sources related to story and automatically render at addons panel.

@lonyele What do you think?

[lonyele]

@tuchk4 This looks super cool! How come I couldn't see your mention on my gmail? It's Monday here(weekend is over...), so I'll check this one and #171 over this week(probably coming weekends)

[lonyele]

@tuchk4 I maybe can implement this feature as I've understood more about placeholder part of code base while looking at #171. If this feature is implemented and became stable, storybook-readme can have full power on React components that are used here. I think filtering prop tables can be improved by covering more practical cases such as HOC, Render prop or showing whatever propTables if it is specified.

Sunday is almost over here, I think I can do it in coming week. As I know of, you are busy for 1~2 month and preparing for next release. So maybe I can take a look at it?

[tuchk4]

Yeah, I would like to start with #171 and then add support of all features described here.

According to #171 Proof of concept implemented at #178 for such story:

## TItle
\```js
const value = state.counter || 0;

<Button
  onClick={() => {
    setState({
      counter: value + 1,
    });
  }}
>
  Hello World {value}
</Button>;
\```

### Footer

We will have:

• Full AST of the story
• Rendered component's tree (so it is possible to get props/methods/description as implemented in current version)
• If instead of imports we will pass components as arguments to the story (as I wrote at #178) -- we will have map of all used components and this is good advantage

So it is possible to render prop table, methods table, description right after story and make it configurable.

So maybe I can take a look at it?

This would be perfect 🔥

---

Also we should think:

• Support all of these features (automatically render prop tables / description / methods) for MDX only?
• Also add support for current implementation?