React Docgen Typescript

[samithaf]

I wonder anyone tried to use react-docgen-typescript with tailwind-variants?

Docgen tool is picking up variants which is great, but I can't find out how to set the description since usually it reads from JSDoc comments. However comments within tv not picking up..

  {
    base: 'inline-flex items-center',
    variants: {
      /**
       * Size of the button -> not picking up 
       * @default 'medium' -> not picking up 
       */
      size: {

[skinread]

I have a somewhat related question about how best to include the jsdocs descriptions of variants so that it can be picked up by Storybook autodocs. My assumption is that if docgen is working then it would flow into Storybook as well.

Tried adding in comments in a few places, same as you, but I haven't found anything obvious.
Does anyone have a solution for adding these variant descriptions without re-declaring them?

[mskelton]

My approach to this look something like this:

type Variants = VariantProps<typeof badge>;

export interface TrendBadgeProps {
  /**
   * The contents of the trend badge. Typically this is a numerical metric.
   */
  children?: React.ReactNode;
  /**
   * The color of the badge.
   */
  color: Variants["color"];
  /**
   * The direction the given metric is trending.
   */
  trending: Variants["trending"];
}

It's a little bit annoying, but it does get the job done and works with storybook and likely react-docgen-typescript as well.

[skinread]

Thanks for confirming. This is what I've presently been doing as well. Re-declaring the interface leaves me feeling a little dirty but haven't come across any alternative approach.

[samithaf]

Thank you @mskelton for the suggestion.