Addon-docs: Proposal to link interfaces

In typescript projects, some (legacy) components accept large interfaces into a single prop name. In this case the prop table is really not very helpful as it shows only the top level property. I understand this is not a top priority, but just to keep it on file, can we have an option to ‘link’ embedded properties.

example of a prop table https://atanasster.github.io/grommet-controls/?path=/docs/charts-chartjs-barchart--main

it has only two props:

options: IChartjsOptions;
data:IChartjsData;

It would be more helpful to be able to link or expand the IChartjsOptions interface to actually see the available properties.

[adhiravishankar]

Is there a way to do this within the MDX formatting? Even if there isn’t a way to do this with CSF format and for nested interfaces, I think that having an MDX way to add this would be ideal because it would allow us to include it manually as well. In my use case, I don’t need it with the parent. I need mine separately that I can link to via CSF or MDX (either one is fine), but I do want it separate to make it simpler.

[SimeonRolev]

This would be very useful. With something like this, I only get the name of the interfaces in the Controls/Docs panels. Reusing types/interfaces in multiple places is a pretty common use case. Has anyone came up with a workaround?

interface First = {
    first_one: boolean,
    first_two: string
}

interface Second =  {
    second_1: number,
    second_2: () => void
}

interface Props = {
    first: First,  // <---
    second: Second,  // <---
    regular: boolean
}

export const Component: FunctionComponent<Props> = ({ first, second, regular }: Props): React.ReactElement => { ... }