Addon Docs - build prop table from dynamic propTypes?

Describe the bug

Using the Addon-Docs, I am not being able to get a prop table from a component that has dynamic propTypes. By dynamic propTypes I mean: propTypes built by destructuring objects into the propTypes object rather than defining static properties, which is what we normally do.

This approach is used by styled-systems and similar libraries.

To Reproduce

Create a component with dynamic propTypes (like the one below) in a React application with storybook and Addon-Docs and try to get the prop table for that component with the dynamic/destructured propTypes in it.

What happened when I tried was:

• static properties added in the propTypes are displayed as expected;
• dynamic/destructured propTypes properties are not displayed in the props table;
• also, in my tests, props destructured in the arguments show up on the prop table if they have default values. So, in the case below, prop2 is displayed even if I omit it from the propTypes, but prop1 isn’t, apparently due to not having a default value. Adding a default value to it get it to display;

Code snippet

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {space, color} from 'styled-system';
import propTypes from '@styled-system/prop-types';

const StyledDiv = styled.div`
  ${space}
  ${color}
`;

const Box = ({prop1, prop2='default_value', ...otherProps}) => (
  <StyledDiv
    prop1={prop1}
    prop2={prop2}
    {...otherProps}
  />
);

Box.propTypes = {
  prop1: PropTypes.any,
  prop2: PropTypes.any,
  ...propTypes.space,
  ...propTypes.color
};

export default Box;

Expected behavior

All props in propTypes to display in the prop table, including the dynamic ones added via destructuring.

System:

Environment Info:

System: OS: Linux 4.4 Ubuntu 16.04.3 LTS (Xenial Xerus) (actually using windows WSL) CPU: (4) x64 Intel® Core™ i5-5300U CPU @ 2.30GHz Binaries: Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node Yarn: 1.17.3 - /mnt/c/Program Files (x86)/Yarn/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v10.19.0/bin/npm npmPackages: @storybook/addon-a11y: ^5.3.18 => 5.3.18 @storybook/addon-actions: ^5.3.18 => 5.3.18 @storybook/addon-docs: ^5.3.18 => 5.3.18 @storybook/addon-knobs: ^5.3.18 => 5.3.18 @storybook/addon-links: ^5.3.18 => 5.3.18 @storybook/addon-storysource: ^5.3.18 => 5.3.18 @storybook/addon-viewport: ^5.3.18 => 5.3.18 @storybook/addons: ^5.3.18 => 5.3.18 @storybook/react: ^5.3.18 => 5.3.18

[yairEO]

This makes storybook automatic ArgsTable not detect any propTypes, highly likely for the majority of serious projects, where proptypes are not all statically written but imported and also dynamically-built.

For Docs to be truly beneficial, automatic propTypes detection must be bulletproof. If react-docgen does not supply the goods, maybe another package does, and if not, then I suggest writing one from scratch. Solving automatic proptypes documentation is quite an important task.

It is extremely unreliable & hassle for developers to manually maintain both the “real” propTypes (on the components themselves) and in another file, only for Storybook presentation, especially for large projects with dozens of developers at different skill levels

[lobaak]

This is still an issue