Storybook-readme: Wrapped components will not display prop types

[robcaldecottvelo]

Many of our stories wrap an actual component in order to provide some local state, but this stops the component props table from appearing.

For example:

MyInput.propTypes = {
  /** The current value. */
  value: PropTypes.string,
  /** Called when the value is changed. */
  onChange: PropTypes.func
};

function MyInput(props) {
  return <input value={props.value} onChange={props.onChange />
}

export { MyInput };

# MyInput

<!-- PROPS -->

import React from "react";
import { storiesOf } from "@storybook/react";
import { MyInput } from "./MyInput";
import readme from "./README.md";

storiesOf("MyComponent", module)
  .addParameters({
    readme: {
      content: readme
    }
  }),
  add("controlled", () => {
    function Story() {
      const [value, setValue] = React.useState("");
      return <MyInput value={value} onChange={event => setValue(event.target.value)} />
    }
    return <Story />;
  }

In the above example no props are displayed because of the wrapper Story component used for the local state. I have tried using includePropTables: [MyInput] but it still won't work.

However, if I change the story to render the MyInput component directly then the props will appear.

Is there any way to coerce this add-on into picking up the actual component props?

[lonyele]

@robcaldecottvelo Sadly, It has many restrictions covering practical usages. If you have time, git clone this repo and yarn storybook-react you can see the examples of propTable. I explained a little bit about the current situations. Or you can see this one

Btw this one is coming, I feel like it can make this propTable feature more usable.

[cadebward]

@lonyele similar to the includePropTables PR #163, would it be possible to make something like forcedPropTables which would bypass all previous prop table logic and force the prop table to render based on the passed component? Something like:

.add('Example Story', () => (
  <SomeWrappedComponent />
), readme: { forcedPropTables: [ActualComponentTableThatRenders] })

[lonyele]

@cadebward Yeap, that is also on the feature request list! Once @tuchk4 gives me feedbacks on the comments from #170 , #171, I could make it happen(Though It seems he is busy)

FYI below are the comments that can give you more context on this matter

https://github.com/tuchk4/storybook-readme/pull/169#issuecomment-493813053

...I think changing the logic of includePropTables to not only filter but also add propTables is needed. Currently we filter propTables, but for these cases, we need to add it...

https://github.com/tuchk4/storybook-readme/issues/170#issuecomment-500208730

...or showing whatever propTables if it is specified

[tuchk4]

@lonyele I think we can add docs your wrote at example to the docs or separated md file and link it from main README.

I think we could start to implement #171 and as the result we will have full control on used React components and seems it will be possible to implement this feature.

[alexcracea]

@lonyele @tuchk4 any news on this?