Storybook: No propTypes/description column for React class components

[kkoch986]

Describe the bug
When defining a react component with a class extending from React.Component the type and docgen description do not appear in the props table. Functional components seem to work fine.

Edit: sorry didnt realize i couldnt tag the issue. This pertains specifically to the docs page addon

When i create a component like this:

export default class Test extends React.Component {
    static propTypes = {
        /**
         * Please work...
         **/
        test: PropTypes.string,
    };

    render() {
        return <div>test</div>;
    }
}

with this story:

import React from 'react';
import { action } from '@storybook/addon-actions';
import Test from "../../src/input/Test";

export default {
    title: "Input|Advanced/Test",
    component: Test,
    parameters: {
        info: `
Testing the case where prop types dont work
`
    },
}
export const basic = () => <Test />;

i get the following props table:

If i instead define the same component as a functional component:

function Test() {
    return <div>test</div>;
}

Test.propTypes = {
    /** 
     * Please work 
     **/
    test: PropTypes.string,
};
export default Test;

i get this (for the exact same story):

I have noticed that defaultProps do work in both cases so its just that middle column that seems gone.

To Reproduce
create a component like this:

export default class Test extends React.Component {
    static propTypes = {
        /**
         * Please work...
         **/
        test: PropTypes.string,
    };

    render() {
        return <div>test</div>;
    }
}

with this story:

import React from 'react';
import { action } from '@storybook/addon-actions';
import Test from "../../src/input/Test";

export default {
    title: "Input|Advanced/Test",
    component: Test,
    parameters: {
        info: `
Testing the case where prop types dont work
`
    },
}
export const basic = () => <Test />;

Expected behavior
The description column for the test prop should include the "please work" comment as well as the "string" type.

it should look like this:

Screenshots
Included above

Code snippets
Included above

System:

Environment Info:

  System:
    OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
    Yarn: 1.15.2 - ~/.nvm/versions/node/v10.14.2/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.2/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 69.0.2
  npmPackages:
    @storybook/addon-actions: ^5.2.3 => 5.2.3 
    @storybook/addon-cssresources: ^5.2.3 => 5.2.3 
    @storybook/addon-docs: ^5.2.3 => 5.2.3 
    @storybook/addon-info: ^5.2.3 => 5.2.3 
    @storybook/addon-knobs: ^5.2.3 => 5.2.3 
    @storybook/addon-links: ^5.2.3 => 5.2.3 
    @storybook/addons: ^5.2.3 => 5.2.3 
    @storybook/react: ^5.2.3 => 5.2.3

Additional context
I tried to do some digging and only managed to find that in getPropDefs type.__docgenInfo is undefined. type looks like:

ƒ Test() {
    Object(_home_ken_zentail_ui_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_0__["default"])(this, Test);

vs the functional component where type.__docgeninfo has stuff in it:

description: ""
displayName: "Test"
methods: []
props: {test: {…}}

and type:

ƒ Test() {
  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    },
    __self: this
  }, "test");
} 

not really sure about the details of how that all works, but that was about as far as my digging took me.

[mrmckeb]

Hi @kkoch986, are you able to provide details of your environment?

[TaeKimJR]

I'm not sure if this is the case w/ your react-dogen loader, but with react-docgen-typescript, the docs note that...

When extending from React.Component as opposed to Component, docgens don't seem to be created.

(source)

It might be worth trying to import the named export from React
import React, { Component from 'react';

[kkoch986]

@TaeKimJR thanks for the suggestion, im not currently using typescript but i tried that suggestion anyway with no luck unfortunately

@mrmckeb what other details are you looking for? Here is the package json for the project if thats helpful:

{
  "name": "ui-components",
  "version": "0.1.0",
  "private": true,
  "peerDependencies": {
    "react": "^16.10.2",
    "react-dom": "^16.10.2"
  },
  "dependencies": {
    "@material-ui/core": "^4.5.1",
    "@material-ui/icons": "^4.4.3",
    "fuse.js": "^3.4.5",
    "fuzzy": "^0.1.3",
    "react-scripts": "3.2.0",
    "typeface-roboto": "0.0.75"
  },
  "scripts": {
    "local-init": "npm run build && cd dist && npm link --ignore-scripts && npm link react && npm link react-dom",
    "prepare": "npm run build && mv ./dist/* ./",
    "build": "rm -rf dist && NODE_ENV=production babel src/ --out-dir dist --copy-files --ignore __tests__,spec.js,stories.js,test.js,__snapshots__ && cp ./package.json dist/",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-react": "^7.6.3",
    "@storybook/addon-actions": "^5.2.3",
    "@storybook/addon-cssresources": "^5.2.3",
    "@storybook/addon-docs": "^5.2.3",
    "@storybook/addon-info": "^5.2.3",
    "@storybook/addon-knobs": "^5.2.3",
    "@storybook/addon-links": "^5.2.3",
    "@storybook/addons": "^5.2.3",
    "@storybook/react": "^5.2.3",
    "storybook-addon-material-ui": "0.9.0-alpha.18",
    "webpack-cli": "^3.3.9"
  }
}

[jonathanherdt]

Like stated in #8143, this should be solvable if you import Component as a named import:

import React, { Component } from "react";

export default class Test extends Component {
...

[kkoch986]

@jonathanherdt i also tried that with the above test component and it didnt seem to change anything. does it make a difference that im not using typescript?

i dont have those test component hot anymore from the original issue but heres a component using it still with not prop types:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class MultiText extends Component {
...
}

MultiText.propTypes = {
  /**
   * String representing the value of this component.
   * Should be a JSON encoded array of each element
   */
  value: PropTypes.string.isRequired,

  /**
   * The label for the data that this component represents
   */
  label: PropTypes.string,

  /**
   * Fired when the data of this component changes.
   * Will be given one argument which is a string
   */
  onChange: PropTypes.func.isRequired,
};
MultiText.defaultProps = {
  label: null,
};

[jonathanherdt]

Right, not using TypeScript and using CSF might make a difference. Sorry to hear that it didn't work for you :(

[kfayelun]

I cant see the description and default value either. I'm using Gatsby, CSF, jsx (no typescript) and functional components (so no import Component from 'react'). Repo here: https://github.com/netliferesearch/netlife2019/tree/storybook_setup_stories

[danielduan]

Issue on the docgen side: https://github.com/storybookjs/babel-plugin-react-docgen/issues/66

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[shilman]

Repro https://github.com/storybookjs/storybook/commit/28f7a7ef37d9c8b0ecbb539092eeb5102a7c83af

[rickyPanzer]

If this is helpful, I'm on version "@storybook/react": "^6.0.0-beta.23" and it's working on the netlify when using the build-storybook for a react class component, but not locally where I'm using the yarn storybook command.

Netlify (I obscured the URL):

Localhost:

Form.propTypes = {
  /** text for the submit button */
  buttonText: PropTypes.string,
  /** render error when submitting form, not when blurring */
  errorOnSubmit: PropTypes.bool,
  /** show error text if there is an error */
  showErrorText: PropTypes.bool,
}

Form.defaultProps = {
  buttonText: "Submit",
  errorOnSubmit: false,
  fields: [],
  showErrorText: true,
}

export default Form;

[shilman]

That's pretty nutso. If anything I'd expect the opposite!

[xveganxxxedgex]

I'm having this issue as well, but noticed at least in my cases that it seemed to be caused by arrow binding functions existing in the class. It seems to happen whenever there is a class with arrow binding functions in the target file in general, even if that component/class is not the default export or even the one being used as the component in the stories.

No issue:

class Alert extends Component {
  constructor(props) {
    super(props);

    this.syncVisibility = this.syncVisibility.bind(this);

    this.state = {
      visible: props.visible,
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.visible !== prevProps.visible) {
      this.syncVisibility();
    }
  }

  syncVisibility() {
    this.setState({ visible: this.props.visible });
  }

  render() {
    ...
  }
}

Has the no props found issue:

class Alert extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: props.visible,
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.visible !== prevProps.visible) {
      this.syncVisibility();
    }
  }

  // This guy is the problem
  syncVisibility = () => { 
    this.setState({ visible: this.props.visible });
  }

  render() {
    ...
  }
}

Edit: Adding require.resolve('@babel/plugin-proposal-class-properties') to my babel.config.js fixed the issue for me.

[rickyPanzer]

I have arrow functions in my class component. I just updated to the most recent beta, and it's working locally now! I've got no babel.config.js

[jligh]

@xveganxxxedgex Thanks, I ran into the same issue but I use babel.config.json and adding "@babel/plugin-proposal-class-properties" to plugins solved it for me.