Storybook: addon-docs: Angular prop tables drill-down type and value support

[afebbraro]

Support request summary

The Props Tables in the React Storybook docs support drill-down types and values and it would be awesome to have that in the Angular storybook too!
This is react:

This is Angular: NarrowNavLinks has a type definition but it doesn't show the shape.

export interface NarrowNavLinks {
  /**
   * The text for the link.
   */
  text: string;
  /**
   * The `href` value for the link.
   */
  href: string;
  /**
   * Optional sub-navigation for the link.
   */
  subNav?: Array <{
   /**
    * The text for the sub-navigation link.
    */
    text: string
    /**
     * The `href` for the sub-navigation link.
     */
    href: string
    /**
     * The icon name supplied will
     * be used to render
     * the specified icon to the
     * left of the sub-navigation link text.
     */
    leadingIcon?: string
  }>;
  /**
   * If `true`, denotes that the link
   * represents the current page.
   */
  active?: boolean;
  /**
   * The icon name supplied will
   * be used to render
   * the specified icon to the
   * left of the link text.
   */
  leadingIcon?: string;
}

Steps to reproduce

Go into angular storybook and open up a component that has array or object types for it's Inputs and see that it doesn't show their shape.

Please specify which version of Storybook and optionally any affected addons that you're running

 "@compodoc/compodoc": "^1.1.11",
    "@storybook/addon-a11y": "^5.3.0-beta.6",
    "@storybook/addon-docs": "^5.3.0-beta.6",
    "@storybook/addons": "^5.3.0-beta.6",
    "@storybook/angular": "^5.3.0-beta.6",
    "@storybook/preset-scss": "^1.0.2",
    "@storybook/theming": "^5.3.0-beta.6",

[Kosai106]

+1, this also applies to the React preset using TypeScript.
I can make drill-down values show, but not drill-down types.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Kosai106]

This is not stale @shilman. 😅

[shilman]

cc @patricklafrance on typescript types

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@Kosai106 do any of the examples in cra-ts-kitchen-sink help you out? if not, can you add a repro there and i can take a look?

[Kosai106]

@shilman I'll try and see if I can make time to create a small reproduction for you today.

[Kosai106]

Alright @shilman I took a look at cra-ts-kitchen-sink.

In the Prop Types example, there's arrayOfComplexShape which has the desired look, but it's made using PropTypes, not TypeScript types.

In the TypeScript examples, there's arrayOfComplexObject but it doesn't have the drill-down values either. None of the TypeScript examples has this feature by the looks of it - Only for default values.

[patricklafrance]

Yeah this kind of support hasn't been implemented yet for TypeScript. If I remember well, the tree structure returned for TS is a lot less refined than the one returned for PropTypes which make it hard to implement.

I might be wrong though, it's been a few month since I looked at it.

We are currently working through switching to react-docgen for TS support. We might be able to work this out while we are doing that.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[Kosai106]

Any update on this @patricklafrance?

[patricklafrance]

Redirect to @shilman

[shilman]

@Kosai106 I'm midway through a major refactor of the props table code for 6.0. When that is done, this should either come "for free" or be very easy to add. This issue is not on my radar right now, but I'll dig it up when the time comes.

[davoam]

Hi @shilman !

Thanks for the Storybook!

Is there any progress on this feature? I checked version 6 official angular example, it looks like the feature is not implemented yet.

[shilman]

We have an API to do it manually now but have not automated that for anything but React so far.

https://storybook.js.org/docs/react/api/argtypes

[davoam]

We have an API to do it manually now but have not automated that for anything but React so far.

https://storybook.js.org/docs/react/api/argtypes

Got it, thanks for the answer!