Docz: Props component does not render propTypes that are defined in another file

[bedrich-schindler]

Bug Report

Describe the bug

Typically, we have propTypes defined directly in the same file as component:

// Button.jsx
import React from 'react';
import PropTypes from 'prop-types';

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

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

export default Button;

Previous code renders table with props as expected. However, sometimes we share propTypes across components. In that case, we import propTypes object from different file:

// inputPropTypes.js
import PropTypes from 'prop-types';

export default {
  label: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};



// EmailInput.jsx
import React from 'react';
import inputPropTypes from './inputPropTypes';

export const EmailInput = (props) => {
    // ...
};

EmailInput.propTypes = inputPropTypes;

export default EmailInput;

In this case, nothing is rendered.

To Reproduce

1. Create inputPropTypes.js that exports propTypes definition:

// inputPropTypes.js
import PropTypes from 'prop-types';

export default {
  label: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

1. Create EmailInput.jsx with component that use imported propTypes from inputPropTypes.js:

// EmailInput.jsx
import React from 'react';
import inputPropTypes from './inputPropTypes';

export const EmailInput = (props) => {
    // ...
};

EmailInput.propTypes = inputPropTypes;

export default EmailInput;

1. Create EmailInput.mdx with Props component:

// EmailInput.mdx
---
name: EmailInput
---

import { Props } from 'docz'
import { EmailInput } from './EmailInput'

# EmailInput

<Props of={EmailInput} />

Expected behavior

Expected behaviour is that docz renders table with props definition of EmailInput component.

Environment

• docz version: 2.2.0
• OS: e.g. OSX 10.15.3
• Node/npm version: 12.6.1/6.13.4

Additional context/Screenshots

One solution is to fix this bug, if you agree that this is bug :) If you think, this is is not a bug, it is a feature, that it might be useful to extends https://github.com/doczjs/docz/blob/master/core/docz/src/components/Props.tsx#L102 to allow Props components to accept props directly, like:

// EmailInput.mdx
---
name: EmailInput
---

import { Props } from 'docz'
import { EmailInput } from './EmailInput'
import inputPropTypes from './inputPropTypes';

# EmailInput

<Props of={EmailInput} props={inputPropTypes} />

[gsong]

This is the case for flow types as well.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Phil-Barber]

This is still an issue afaik

[bedrich-schindler]

@Phil-Barber Yes, It is still an issue.

[adamkudrna]

It looks like it's possible now:

https://raw.githubusercontent.com/chrisrzhou/react-wordcloud/main/docs/props/props.mdx