refactor(storybook): build storybook simple story args interfaces using component class

[aPreciado88]

Related Issue: #9437

Summary

Replaces Storybook's manually built simple story args interfaces with props pulled from the component's class.

[jcfranco]

Awesome!

Can you 1. update the story args interfaces to follow the same picking pattern and 2. ensure all component props used in stories are picked from the class vs declaring them separately?

Once the above is addressed, this is good to merge!

[jcfranco]

I think this can be simplified a bit by using Pick:

interface BlockStoryArgs extends 
  Pick<Block, "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel">, 
  Pick<BlockSection, "open" | "toggleDisplay"> {
  text: string;
}

Applies to similar args types.

[aPreciado88]

Both Block and BlockSection have an open prop, I had to declare them as blockOpen: Block["open"]; and sectionOpen: BlockSection["open"]; to be able to use them in storybook's ui. If I use the Pick format the open props conflict and storybook's ui doesn't work.

I could pull Block's open prop with Pick and separately declare BlockSection's open prop as sectionOpen to avoid conflicts. Please let me know If this is okay, I can follow that same pattern with all other story interfaces.

  extends Pick<Block, "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel">,
    Pick<BlockSection, "toggleDisplay"> {
  sectionOpen: boolean;
  text: string;
}

[jcfranco]

Thanks for clarifying! Your suggestion looks good.

You could also use BlockSection's type to keep the renamed prop in sync and also make it clear that it's coming from section.

 extends Pick<Block, "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel">,
    Pick<BlockSection, "toggleDisplay"> {
  sectionOpen: BlockSection["open"];
  text: string;
}

[jcfranco]

Carousel should have an autoplay prop.

This might apply to other classes/props too (e.g., Tooltip).

[alisonailea]

Builds locally and looks clean! Nice.