Support for compound components

[mayank99]

I've been playing around with the latest beta, and while it works well for many cases, I could not get it to work with compound components.

A compound component generally looks like this:

<Compound foo>
  <Compound.Child />
</Compound>

I'm defining it as follows:

import React from 'react';
import type { PolymorphicComponent } from '~/utils';

const ParentComponent = React.forwardRef((props, ref) => {
  return (/* ... */)
}) as PolymorphicComponent<'div', ParentOwnProps>;
type ParentOwnProps = {
  /** foo prop */
  foo?: boolean;
};

const ChildComponent = React.forwardRef((props, ref) => {
  return (/* ... */)
}) as PolymorphicComponent<'div', ChildOwnProps>;
type ChildOwnProps = {
  /** bar prop */
  bar?: string;
};

/** description for main component */
export const Compound = Object.assign(ParentComponent, {
  /** description for subcomponent */
  Child: ChildComponent,
});
export default Compound;

I would guess that react-docgen would need to support a few different things here:

• using the types that are inferred by props (in this case through PolymorphicComponent utility). related: Implicitly typed props in FunctionComponent not found #590
• detecting that these multiple components are exported through a single Object.assign declaration and reading jsdoc from there

[Powerplex]

I have the same issue. We define our compound components the same way, using Object.assign. I can use the library to get the props from the root element of the compound only. Our components are written in Typescript.

I tried react-docgen-typescript too but it doesn't have the reactDocs.parse(src, reactDocgen.resolver.findAllComponentDefinitions)