Cannot render component through higher order component

[edwilliams]

Bug Report

Cannot render component through higher order component

while exporting a component directly works fine, if a component is exported via a higher order component then the PropType table does not render

To Reproduce

1. set PropType (e.g. SubTitle.propTypes = { error: PropTypes.bool })
2. export component as via higher order component (e.g. export default HOC(SubTitle))
3. PropType table does not appear

// basic HOC() for demonstration
import React from 'react'
export default (HOC) => {
  return class ReactHOC extends React.Component {
    render() {
      return <HOC {...this.props}/>
    }
  }
}

Enviroment

• OS: OSX 10.13.3
• Node: v8.9.4
• NPM: v6.0.1

[pedronauck]

This is something relative to babel-plugin-react-docgen, I tried to find some resolutions but I didn't get any results 😢

[diegohaz]

https://github.com/diegohaz/parse-prop-types can possibly help with that.

[pedronauck]

But I need something that parses typescript and flow too @diegohaz, your package can do that?

[diegohaz]

It doesn't. Unless there's something that transforms flow/typescript into PropTypes.

[joekarasek]

I've been searching for a solution around transforming between various schema declarations (proptypes, flow, json schema, typescript) with little luck. Ended up baking my own for a project. However, this is the most promising library I have found to date that will automate moving from one to the other.

https://www.npmjs.com/package/shapeshifter

However, its trickier than it seems as the specs for each don't cleanly line up with each other (for example JSON Schema doesn't support functions).

[Florian-Guillot-Axa]

I have the same problem, and I was thinking about this :

class _Button extends React.Component {
  render() {
    return(<button>{this.props.children}</button>)
  }
}

const Button = HOC(_Button)

Button.propTypes = {
  children: PropTypes.string
}

export default Button

But it doesn't render PropsTable too. Is it related ?

[popkirby]

For plain ES / Flow, react-docgen recognizes HOC, but outputs type information for base components. (In SubTitle example, SubTitle component will get type information, but HOC(SubTitle) component will not.)

I think it is needed to extend findAllExportedComponentDefinitions resolver to treat HOC(Component) as a React component.

[nicholasess]

We are thinking about our structure to support HOC, because the DataServer parse just Components and docgen has a specific function to parse HOC.

[pedronauck]

I'll close this since it will be also fixed with #240 when we can pass custom config to react docgen