Props description not rendering as expected

[aturner-zengenti]

I've installed this module this morning and it all seems to be working as expected apart from rendering a description in the <!-- PROPS --> table. I wonder if I am doing something wrong for the props table to not recognise the description?

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Label from '../Partials/Label/Label';

const Textfield = styled(({ type, label, id, required, placeholder, defaultValue }) => (
  <div>
    <Label id={id} text={label} />
    <input
      type={type}
      defaultValue={defaultValue ? defaultValue : null}
      placeholder={placeholder ? placeholder : null}
      required={required ? true : false}
      id={id}
    />
  </div>
))`
  margin: 0;
  border: 1px solid #ccc;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  font-size: 13px;
  font-family: Arial;
  box-sizing: content-box;
`;

Textfield.propTypes = {
  /* Type of text field, this will grow as we progress */
  type: PropTypes.oneOf(['text']),
  /* Label for text field, this is required for accessibiity reasons */
  label: PropTypes.string.isRequired,
  /** Unique ID for field, this allows the label to reference the input field */
  id: PropTypes.string.isRequired,
  /** Is the form required? if true a required attribute will be added to the input */
  required: PropTypes.bool,
  /** Placeholder text to appear within the input field, probably best not to put instructions in here as they disappear on change */
  placeholder: PropTypes.string,
  /** A default value for the form when it is first loaded, useful if you are a logged in user etc. */
  defaultValue: PropTypes.string,
};

export default Textfield;

The output is as follows:

[jnhooper]

I have a similar issue only for me the table renders, but adds extra rows on coment line breaks

 /**
   * statusColor dictates the color of the button
   * can be.
   */
  statusColor: ButtonStatusColor,
  

with it rendering like so

[jephjohnson]

Hi @tuchk4 - What's the correct implementation for "Type" and "Description" to be returned properly?

What is being returned:

Config.js

storiesOf(componentName, module)
.addDecorator(withKnobs)
.addDecorator(addReadme)
.addParameters({
options: {
 panelPosition: 'right',
},
readme: {
  sidebar: readme,
 }
 })

 .add(name, () => {
 return useMyContentWrapper ? (
 <MyContentWrapper>
 <Example />
 </MyContentWrapper>
 ) : (
 <Example />
 );
 });

Button.js

....

Checkbox.propTypes = {
  /** Any extra CSS classes for the component */
  className: string,
  /** Name for the input field */
  name: string,
  /** Any extra CSS id for the component */
  id: string,
  /** Text displayed with the Checkbox */
  label: string,
  /** Function to trigger when value changes */
  onChange: func,
  /** Value for input */
  value: string,
  /** Testing Key for Jest */
  testId: string,
  /** HTML `checked` attribute */
  checked: bool
};  

[tuchk4]

Trying to find the problem.

Docs are generated by https://github.com/storybooks/babel-plugin-react-docgen. This addon comes with storybook. Issues with docs generation may relate to it.

This babel-plugin-react-docgen PR https://github.com/storybooks/babel-plugin-react-docgen/pull/68 (Add forward ref support) is related to my issues but not sure it is common problem with props info generation.

Trying to find some bugs at storytbook-readme codebase but still cant see errors. Still looking for.

[Zyzle]

Just a quick bit of info, in addition to the problem with newlines in the prop description comments, I'm seeing something similar in shape props with a default value:

[jephjohnson]

@tuchk4 - Can you provide a working example with the implementation of all the fields being populated? (Type, DefaultValue, Description) You don't have them being displayed on your current live example. https://tuchk4.github.io/storybook-readme/?path=/story/propstable--button

[tuchk4]

@jephjohnson yes, will add to examples with next release

[redders6600]

FYI if you guys are using styled components (or possibly glamorous?), you may find that the proptypes tables don't render properly.

I think it's related to reactjs/react-docgen#256

Basically if you set propTypes on a styled component it doesn't work, so I use a workaround like this (not a real example, just edited for brevity):

const StyledHeading = styled.h1`
  color: red;
`;

// Make into a "normal" component so proptypes work.
const Heading = ({ children, ...props }) => (
  <StyledHeading {...props}>{children}</StyledHeading>
);

Heading.propTypes = {
  /** The heading level. This selects the appropriate tag, i.e. h1 - h6 */
  level: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

Heading.defaultProps = {
  level: 4
};

export default Heading;

[tuchk4]

@jephjohnson

• Here is demo https://tuchk4.github.io/storybook-readme/?path=/story/propstable--button
• Here is sources example-react/components/Button/ButtonWithPropTypes.js

NOTE: not published yet

[tuchk4]

published 5.0.2

Leave this issue open for few day. Maybe some bugs or feedback

[jephjohnson]

@jephjohnson

• Here is demo https://tuchk4.github.io/storybook-readme/?path=/story/propstable--button
• Here is sources example-react/components/Button/ButtonWithPropTypes.js

NOTE: not published yet

@tuchk4 - Thank you Legend!!!

[jephjohnson]

@tuchk4 - Were you able to receive the same output using the approach below? I copied your example exactly as is, but using this approach: https://github.com/tuchk4/storybook-readme/issues/83#issuecomment-473605046

In your example, stories are inline and not global. Running into the same issue.

[tuchk4]

@jephjohnson The latest versions are used?

[jephjohnson]

@jephjohnson The latest versions are used?

Yes, "@storybook/react": "^5.0.6", & "storybook-readme": "^5.0.2",

[jephjohnson]

Hi @tuchk4 - Sorry pest on this, just was wondering if it had anything to do with the approach or anything else you could think of?

[tuchk4]

@jephjohnson sorry, this week I did not have time to work with storybook-readme. Going to back to the project at the next week.

Anyway this is very strange that example don't work for you. If it possible could you please clone this repo and run

yarn
lerna bootstrap

# not sure if need to run this
# yarn dev

cd packages/example-react
yarn storybook

Confirm if you still have that problem please

[jephjohnson]

Thanks @tuchk4: This is my setup and the approach where it does not render properly:

Reference: https://github.com/tuchk4/storybook-readme/issues/83#issuecomment-473605101

Config.js

import React from 'react';
import path from 'path';
import {
  getStorybook,
  storiesOf,
  addDecorator,
  configure,
} from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { addReadme } from 'storybook-readme';

// register decorator
addDecorator(addReadme);

let getComponentName = filePath =>
  path
    .dirname(filePath)
    .split(path.sep)
    .reverse()[0];

let getPackageName = filePath =>
  path
    .dirname(filePath)
    .split(path.sep)
    .reverse()[1];

configure(() => {
  // Automatically import all examples
  const req = require.context(
    '../auto',
    true,
    /^((?!node_modules).)*\.example\.js$/,
  );

  const readMeReq = require.context(
    '../auto',
    true,
    /^((?!node_modules).)*\.README\.md$/,
  );

  req.keys().forEach(pathToExample => {
    const { name, Example } = req(pathToExample);
    const packageName = getPackageName(pathToExample);
    const componentName = `${packageName}.${getComponentName(pathToExample)}`;

    const readmePath = readMeReq.keys().find(rm => rm.includes(packageName));
    const readme = readMeReq(readmePath);

    storiesOf(componentName, module)
      .addParameters({
        readme: {
          content: '<!-- STORY --><!-- PROPS -->',
          sidebar: readme,
        },
      })
      .add(name, () => <Example dummy="test" />);
  });
}, module);

export { getStorybook };

Button.example.js

import React from 'react';
import Button from './';

export const name = 'Default';

export const Example = () => <Button label="Hi" />;

// copy proptypes so <!-- PROPS --> will work
Example.propTypes = Button.propTypes;

[leerob]

I'm also seeing some weirdness here. I'm trying to update from v4 to v5 (so keeping withDocs) and here are the propTypes.

Button.propTypes = {
    as: PropTypes.string,
    block: PropTypes.bool,
    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
    disabled: PropTypes.bool,
    href: PropTypes.string,
    isLoading: PropTypes.bool,
    onClick: PropTypes.func.isRequired,
    size: PropTypes.oneOf(['small', 'medium', 'large'])
};

However, I'm seeing this.

[tuchk4]

@leerob just copied your prop-types:

Could you please show versions of storybook and storybook-readme? Try to rm -rf node_modules and install deps again.

[tuchk4]

@jephjohnson Can you confirm you still have issue with prop-tables? If yes could you please show versions of storybook and storybook-readme? Try to rm -rf node_modules and install deps again.

Please check the version of storybook-readme like cat node_modules/storybook-readme/package.json | grep version

[maxobaxo]

I'm having the same issue as @leerob with storybook-readme v.5.0.3 and storybook-react v.5.0.11

[renemn]

I have the same issue too. Required and DefaultValue works as expected tho. I'm using storybook-readme 5.0.5, @storybook/react 5.1.9 and @storybook/addons 5.1.9

[lonyele]

@maxobaxo @renemn Hey guys, currently showing prop descriptions feature has some limitations(check more info on #177 ) We are trying to improve this so that it is more useful in an actual usage. Please wait until then~

[renemn]

Right, I was trying to figure out the issue and my problem was that I'm using a custom hoc which I use in the component. But my tests showed some inconsistency.

For instance, this example does not render the Props Table at all:

const MyComponent = ({ someText }) => (
  <div className="my-component">
    {someText}
  </div>
);

MyComponent = {
  /** This is a text example */
  someText: PropTypes.string.isRequired
};

MyComponent.defaultProps = {
  someText: "My Text"
};

export default withPicker(MyComponent);

While, in this other example, I can see the Props Table. But only Required and DefaultValue works:

const MyComponent = withPicker({ someText }) => (
  <div className="my-component">
    {someText}
  </div>
);

MyComponent = {
  /** This is a text example */
  someText: PropTypes.string.isRequired
};

MyComponent.defaultProps = {
  someText: "My Text"
};

export default MyComponent;

Hope this helped a little. Thanks for the quick reply!

[lonyele]

@renemn Thanks for more cases for investigation. So far, this problem is kind of intertwined... some limitations from react-docgen and we use datas from storybook Let's see how it can be solved from our side.

[tomitrescak]

Hi, is there any love for Typescript? My Prop table is not rendered at all as I do not specify PropTypes.

[smollweide]

Hi, is there any love for Typescript? My Prop table is not rendered at all as I do not specify PropTypes.

@tomitrescak did you tried https://github.com/milesj/babel-plugin-typescript-to-proptypes?