Docs don't pull component props automatically

[moisespio]

I'm using Storybook in a monorepo project using the Turborepo + Storybook template and the stories don't show the TypeScript component props and types automatically.

Here's a live example (screenshot below)

I expected to see the prop types and description under the "description" column but I couldn't achieve that in a monorepo. Since it's a design system project, I don't want to manually set the args and argTypes for every single component as this would make it hard to maintain.

Any help is appreciated!

[NIS-IMPACT]

Hi @moisespio,

I'm using the same setup and have yet to experience that problem.

Could you share the component and story file for your button?

I'll like to make a comparison with one of my components.

[moisespio]

Hey @NIS-IMPACT -- If you just clone the template I mentioned above (which has a very simple button component as an example) you'll notice that the propTypes won't show up. Here's the repo if you want to take a look at the structure.

[valentinpalkovic]

Can you try to set the react-docgen option to react-docgen like described here: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen. Because currently, creating control types for Typescript components is done by react-docgen-typescript, which has some performance implications and is sometimes not that good to follow aliased imports.

Go to your .storybook/main.ts file and set the following option:

const config: StorybookConfig = {
  ...
  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },
};

export default config;

[moisespio]

Hey @valentinpalkovic, I tried that too, but no luck. It works when I import the component directly (import Button from '../../packages/ui/src/Button') but it doesn't work when I reference the component from the alias/path configuration (import { Button } from 'ui').

[Jennifer-Liuu]

Hi @moisespio, change the path from ../../../packages/ui/to ../../../packages/ui/src in main.js :

  async viteFinal(config, { configType }) {
    // customize the Vite config here
    return {
      ...config,
      define: { "process.env": {} },
      resolve: {
        alias: [
          {
            find: "ui",
            replacement: resolve(__dirname, "../../../packages/ui/src"),
          },
        ],
      },
    };
  },

and use import { Button } from "ui"; in button.stories.tsx.
It works for me.

[jbrunner92]

@Jennifer-Liuu that didn't change anything for me when I tried it... hmmm

[jbrunner92]

I'm having this same problem when working with the same guide. Would love some help figuring out the problem. In my case, I'm working on setting up a design system that uses MUI in turbo with storybook, but the argTypes/controls are not being auto-generated by the docs. Also tried react-docgen vs react-docgen-typescript, along with various other changes. Nothing has worked so far

I adjusted the Button component to extend the Mui Button, and I upgraded to storybook 7.5.3 instead of 7.4.0 (I don't think either fixed the auto-docs issue). Here's the demo repo I've been using to test this: https://github.com/jbrunner92/storybook-with-mui-in-turbo

[pookmish]

I seem to be having a very similar issue. I have a mono-repo. The typescript definitions are defined in a single file separate from any component. This typescript file is autogenerated and contains types as well as comments that match the UI. If I define the component props types with comments in the component file, the docs auto populate for me. But since the types are in a separate file, the descriptions are left empty.
I see a similar file structure as the original question. Is there a way to keep the type files separate, but consume them for the auto docs?

[moisespio]

I was finally able to make this work a few weeks back. See solution here: #24943 (comment)

[pookmish]

It does seem that importing the type relative to the component, instead of using typscript paths, helps to build the docgen as expected. Hopefully, this won't be necessary in the future.

This works fine in the component, but I if I try to reference the type from the story, it still doesn't work.