Controls addon does not detect propTypes correctly

[ErAz7]

Description controls addon seems not to detect propTypes correctly in some cases

To Reproduce

1. install prop-types and storybook and setup controls addon
2. create Button component like this:

import PropTypes from 'prop-types';
import React from 'react';

const Button = (...props) => <button {...props} > Button </button>;

// if there was no map function applied, this worked and detected correctly by controls addon
// but when .map or any other function applied, it won't work. also it doesn't work if you
// define propType first and then just use it in Component.propTypes

const THEMES_MAPPED = ['primary', 'secondary'].map(t => t);

Button.propTypes = {
    theme: PropTypes.oneOf(THEMES_MAPPED)
};

export default Button;

3. create story for it:

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

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

const Template = args => <Button {...args} />;

export const Playground = Template.bind({});
Playground.args = {
    theme: 'primary'
};

4. run storybook and this is result:

Consider this also happens when you pass propType of a component to another, like:

SocialButton.propTypes = {
   theme: Button.propTypes.theme
}

or even if you just define a propType and then use it in Component.propTypes:

const propType = PropTypes.oneOf(['primary', 'secondary']);

SocialButton.propTypes = {
   theme: propType
}

Expected behavior it's clear

System Environment Info:

System: OS: Windows 10 10.0.18362 CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz Binaries: Node: 14.12.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.18362.449.0) npmPackages: @storybook/addon-actions: ^6.0.28 => 6.0.28 @storybook/addon-controls: ^6.0.28 => 6.0.28 @storybook/addon-essentials: ^6.0.28 => 6.0.28 @storybook/addon-links: ^6.0.28 => 6.0.28 @storybook/node-logger: ^6.0.28 => 6.0.28 @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 @storybook/react: ^6.0.28 => 6.0.28

[ErAz7]

anyone there? any update?

[shilman]

Does it work in react-docgen? That's what we use under the hood.

[stellarhoof]

It does not work with react-docgen. Here's the output from one of my components:

{
  "description": "",
  "displayName": "AdminButton",
  "methods": [],
  "props": {
    "data-responsive-state": {
      "type": {
        "name": "enum",
        "computed": true,
        "value": "_.keys(responsiveStates)"
      },
      "required": false,
      "description": ""
    }
  }
}

They have this right on the description on their repo:

It uses ast-types and @babel/parser to parse the source into an AST and provides methods to process this AST to extract the desired information. The output / return value is a JSON blob / JavaScript object.

Later on they mention:

propTypes must be an object literal or resolve to an object literal in the same file.

They don't actually import your file, they just run babel on it. Therefore proptypes will all have to be defined inline. No code reuse/indirection is interpreted. Seems very limiting. But also propTypes is not introspectable since it's functions all the way down so I'm not sure if anything can be done here. Perhaps a gotcha in the documentation?

[ErAz7]

sorry @shilman I was away for a while @stellarhoof thanks for explanation and yes this is very limiting so any idea @shilman?

[Sm1t]

Related issue - https://github.com/storybookjs/storybook/issues/12798