Automatic Doc Block should filter prop args by prop type passed

[julianCast]

Is your feature request related to a problem? Please describe.

Currently we have to explicitly define the args for a component (instead of using spreading args from a parent component), so that the Doc block properly shows the args required for the component (instead of showing all the props related to parent).

Imagine the following structure:

<Modal>
  title
  description
  <Card>

Spreading args from parent:

export const Card: StoryObjWithRequiredArgs<CardProps> = {
  args: {
    ...ModalShowcase.args, // This will print ALL the modal props in the Doc Block
    loadingBillingEstimation: false,
    nextBillingDay: 25,
  },
};

Explicit args:

export const Card: StoryObjWithRequiredArgs<CardProps> = {
  args: {
    subscriptionId: ModalShowcase.args.subscriptionId,
    currentBillingDate: ModalShowcase.args.currentBillingDate,
    contractEndDate: ModalShowcase.args.contractEndDate,
    loadingBillingEstimation: false,
    nextBillingDay: 25,
  },
};

Describe the solution you'd like

I think we should be able to use spreading of parent args without messing the Doc block args (adding props not used in that child component.)

Describe alternatives you've considered

We have the value types passed as args, but we also have the props passed as types (BillingDateCardProps), so Doc Blocks could filter out those args that are not defined in the component type. (Around here)

Are you able to assist to bring the feature to reality?

no

Additional context

https://storybook.js.org/docs/react/writing-docs/doc-blocks#argtypes