Storybook: Addon-Docs: Props Loading Issues

[shilman]

There are a variety of issues piling up regarding inconsistencies in Storybook Docs Props handling. Creating an umbrella issue to track a systematic investigation:

• [ ] Static builds https://github.com/storybookjs/storybook/issues/8140
• [ ] Class components https://github.com/storybookjs/storybook/issues/8428
• [ ] Component description https://github.com/storybookjs/storybook/issues/8162
• [ ] Typescript issues https://github.com/storybookjs/storybook/issues/8143 https://github.com/storybookjs/storybook/issues/8114
• [ ] Default props https://github.com/storybookjs/storybook/issues/8191 https://github.com/storybookjs/storybook/issues/8728 https://github.com/storybookjs/storybook/issues/8740
• [ ] Forward refs / memo wrappers https://github.com/storybookjs/storybook/issues/7933
• [ ] Styled components https://github.com/storybookjs/storybook/issues/8279
• [ ] Emotion https://github.com/storybookjs/storybook/issues/8496
• [ ] Gatsby props? https://github.com/storybookjs/storybook/issues/8425
• [ ] Externally defined props https://github.com/storybookjs/storybook/issues/3493 https://github.com/storybookjs/storybook/issues/8482
• [ ] External libraries https://github.com/storybookjs/storybook/issues/8481
• [ ] Flow types https://github.com/storybookjs/storybook/issues/8115

[patricklafrance]

Here's another one with storybook/react 5.2.4:

If the component import the props types object from another file, they will not be available in the props table of the component.

// shared-prop-types.js

import { string } from "prop-types";

export const MY_PROP_TYPES = {
     foo: string.isRequired
};

// my-component.jsx

import { MY_PROP_TYPES  } from "./shared-prop-types";

export class MyComponent extends PureComponent {
    static propTypes = MY_PROP_TYPES;

   ....
};

Thank you,

Patrick

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.31 containing PR #8581 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

5.3.0-alpha.31 contains a new version of react-docgen that may address some of these issues. I'll be running tests tomorrow, but if anybody wants to kick the tires, please report back!

[patricklafrance]

@shilman

I tried with alpha.31 and the issue I mentioned earlier in this issue still doesn't work. Props defined in an object imported from an external file are still not rendered.

[patricklafrance]

@shilman

The fix you made for the forwardRef kind of work for you. Now the props are listed but the description are missing.

[patricklafrance]

As discussed, exporting an additional component without the forwardRef fix it for me.

export { DateRangePickerInputInner as PureDateRangePickerInput };

export const DateRangePickerInput = forwardRef((props, ref) => (
    <DateRangePickerInputInner { ...props } inputRef={ref} />
));

Then in my MDX file

<Props of={PureDateRangePickerInput } />

[jebadirad]

5.3.0-alpha.35 does not fix my issue.

When building storybook I still cannot see prop descriptions. I tried the work around that @patricklafrance used above and prop descriptions still are not showing.

I don't use mdx though, I am using

export default {
  title: 'Inputs|Button',
  decorators: [withKnobs],
  parameters: {
    component: PureButton,
    componentSubtitle: 'subtitle',
    notes: {
      markdown: ButtonMD
    }
  }
};

On the bright side everything still works perfectly when running start-storybook

[patricklafrance]

@jebadirad try 5.3.0-alpha.36 should work

[patricklafrance]

The following use case still doesn't work:

export const ForwardRefButton = React.forwardRef((props, ref) => (
  <DocgenButton ref={ref} {...props} />
));

export const DocgenButton = ({ disabled, label, onClick }) => (
  <button type="button" disabled={disabled} onClick={onClick}>
    {label}
  </button>
);

DocgenButton.propTypes = {
   ....
};

[apdrsn]

I'm still having issues getting props tables to show using 5.3.0-alpha.38
I'm having a button component wrapped in forwardRef:

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';

export const Button = forwardRef(({ type, ...props }, ref) => (
  <button type={type} ref={ref} {...props} />
));

Button.propTypes = {
  children: PropTypes.node.isRequired,
  type: PropTypes.oneOf(['button', 'submit'])
};

Button.defaultPropTypes = {
  type: 'button'
};

This is my story:

import React from 'react';
import { Button } from '../components/button/button';

export default {
  title: 'Button',
  component: Button
};

export const text = () => (
  <Button>Hello Button</Button>
);

In docs-tab I'm getting the following:

When I do console.log(Button) I'm getting:

Am I doing something wrong?

[PSJgit]

On 5.3.0-alpha.39 I'm having a similar issue with a component that uses ReactDOM.createPortal. Props aren't generated unfortunately.

[donysukardi]

I'm currently on 5.3.0-alpha.41 and the prop definitions have suddenly gone missing for all components now.

[shilman]

sorry about that! alpha.41 contains a bunch of work in progress from @patricklafrance and it's possible that something broke for some cases (tho i'm not seeing it on my examples). can you file an issue with your setup, ideally with a repro? we'll be sure to get it fixed in alpha.42!

[donysukardi]

oops.. false alarm. i have custom babel.config.js file. that explains why the docgen info that i got was always empty! since the DocsPage is dependent on docgen via babel-plugin-react-docgen, it might be good to make this indication more prominent

[shilman]

I've created a github label to track this more easily. Here's the current set of props bugs: https://github.com/storybookjs/storybook/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22block%3A+props%22+label%3Abug

Closing this umbrella issue