Displaying ArgTypes of a single component in multiple tabs based on the prop source (self-prop, library, native-html, etc..)

[paroxyzm]

Hello!

We're building a library on top of headless libraries (such as React Aria Components), and some of our consumers would like to view the documentation for the props of our components in a way that would allow them to quickly filter-out the properties that are defined on the level of our library AND the level of the underlying library.

I'm not sure if this is possible right now in Storybook out of the box, if it is please guide me! :)

For example

// HTML native button
export interface HTMLButtonProps {
    name: string,
    type: string,
    value: string,
}

// lib export
export interface LibButtonProps extends HTMLButtonProps {
	libProp: string
}

// our export
export interface BaseButtonProps extends LibButtonProps {
	selfProp: string;
}

What we need to have is a TabbedTable were each tab would have properties specific to each level, so the reader wouldn't need to go to the documentation of the underlying libraries. It's optional to display the "native element" tab, since we mostly care about lib properties.

To illustrate that better, here is what I'm after:

What would be needed to achieve this, any advice?

What I already tried was changing the propFilter to include all the properties,
but that resulted in mixing all the props (from native-html, the lib and our top-level component) into a single table, which wasn't very readable.

It seems to me that we'd need to create a "grouping" version of propFilter function where it would be possible to specify which props to put into which group.

Thanks!