[turborepo] Storybook ArgsTable not filled with correct data (descriptions, defalutValue, ...)

[FlorianBurgevin]

What version of Turborepo are you using?

1.10.16

What package manager are you using / does the bug impact?

npm

What operating system are you using?

Mac

Describe the Bug

Hello.

I just start a new monorepo with the design-system example.

I'm trying to build a beautiful and complete documentation for my components.

I have a problem with the ArgsTable content generation. The values inside the table are not filled with comments, defaultValues, and other things as it should.

For example, I just added a simple Test component:

export type TestProps =   {
    /** The name of the test */
    name: string;
    /** The value of the test */
    value: string;
    /** A boolean indicating whether the test is active or not */
    bool: boolean;
    /** A prop that can be null or a number */
    prop1: string | null | number;
}

/**
 *
 * Test component description
 */
export const Test  = ({name, value, bool=false, prop1}: TestProps) => {

    return (
        <div>
            <div>{name}</div>
            <div>{value}</div>
            <div>{bool}</div>
            <div>{prop1}</div>
        </div>
    )
}

with corresponding stories:

import { Meta, StoryObj } from '@storybook/react';
import {Test} from './Test';


const meta: Meta<typeof Test> = {
    title: 'TestInDocs',
    component: Test,
};

export default meta;
type Story = StoryObj<typeof Test>;

export const Default: Story = {
    args: {
        name: 'name',
        value: 'value',
        bool: false,
        prop1: null,
    },
};

export const Story2: Story = {
    args: {
        name: 'name',
        value: 'value',
        bool: true,
        prop1: 2,
    },
};

Here is the result:

Expected Behavior

The ArgsTable should be complete with descriptions from the comments, default value filled, enum props filled, etc...

I figured out that if I put the Test.tsx and the stories file in apps/docs it`s better.

What i want is to put all my files in packages/ui colocated. And the apps/docs file should only contains storybook config and reference all stories in packages/ui

Do you have something on that ? Is it a known problem ? Thanks

To Reproduce

https://github.com/FlorianBurgevin/turbo-storybook-error

Clone master and run npm run dev Look at the ArgsTable in Storybook.

Ok if all files in apps/docs. KO if reference file in pacakges/ui

OK TestInDocsFromDocs KO TestInDocsFromOut KO TestOutDocs

Reproduction Repo

No response

[chris-olszewski]

Can you provide a reproduction repo and share it here? It helps with debugging these sorts of issues immensely.

Can you also verify that this happens only when turbo is added to the mix? e.g. npm run <your-task> behaves correctly and turbo run <your-task> doesn't?

[FlorianBurgevin]

https://github.com/FlorianBurgevin/turbo-storybook-error

@chris-olszewski You can try this repo by running npm run dev

I juste added Tests files to show cases in the Storybook.

It's OK if I use classic Storybook. But fails when I use turbo packages

[chris-olszewski]

When I run npm run dev and turbo run dev on the repro you provided I see what I believe you listed as the expected behavior:

[FlorianBurgevin]

Yes i provided 3 exemples.

First one, working if component and stories are in app.

But thats not expected, other 2 exemples fail if component outside apps/docs

Le ven. 17 nov. 2023, 19:50, Chris Olszewski @.***> a écrit :

When I run npm run dev and turbo run dev on the repro you provided I see what I believe you listed as the expected behavior: [image: Screenshot 2023-11-17 at 10 50 08 AM] https://user-images.githubusercontent.com/4131117/283899893-1b0811ec-6f37-4a51-8cfa-af5f395db03b.png

— Reply to this email directly, view it on GitHub https://github.com/vercel/turbo/issues/6500#issuecomment-1816925495, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABTEQDWFHXJ4JJ2A2YDV3F3YE6WXZAVCNFSM6AAAAAA7PRQUSWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJWHEZDKNBZGU . You are receiving this because you authored the thread.Message ID: @.***>

[chris-olszewski]

Okay, I see the issues you're talking about. This looks like an issue with how Storybook is configured and not how turbo is invoking it. I'm afraid, I'm not super knowledgeable with Storybook and won't be able to help much.

I notice the following error when running npm run dev the following error:

4:19:13 PM [vite] Internal server error: Failed to resolve entry for package "/private/tmp/turbo-storybook-error/packages/ui". The package may have incorrect main/module/exports specified in its package.json.

This might be the cause.

[FlorianBurgevin]

Hum I think you should run npm run build before starting Storybook. Because package.json mentioned dist/index by default.

But I don't think it's related with the error.

[FlorianBurgevin]

@chris-olszewski do you see the error in the demo repo with npm run build, and for Stories outside apps/docs ?

[dfltr]

Bit of a drive-by comment since I just found this issue while searching for a different one: react-docgen-typescript struggles mightily when trying to autogenerate args in Storybook across packages in a monorepo.

IIRC the easy fix is to import source files directly into Storybook from your ui package, and the hard fix is to badger Storybook's react-docgen config into working correctly when pointed at something other than the original source for a component. I have yet to get the latter option to actually work in Storybook 7.x.

[FlorianBurgevin]

Apparently your easy fix is not working.

If you look deeply in my example, i tried different methods. The docs/stories/TestFromOut.stories.tsx is importing directly my component from ui package. But it's not working.

The only working solution is when I place the component and the story in docs

[FlorianBurgevin]

Hello.

I upgraded storybook to 7.6 and tried with this method: https://storybook.js.org/docs/writing-docs/autodocs#the-auto-generated-documentation-is-not-showing-up-in-a-monorepo-setup

It's a bit better, fields are detected, but the documentation is not great. I have "union" or "T" in type columns when i use typescript in my field types.

[cezudas]

Thank you, @FlorianBurgevin, for filing this error.

I found that having Storybook as a standalone app in the monorepo, separate from the UI library, offers some notable advantages. Initially, everything seemed to work fine when I inspected it.

However, in my case, the JSDoc comments in the React components exposed by the UI library are not "picked up" as component descriptions in the stories, which is quite disappointing. After inspecting the Storybook codebase, particularly the plugins/react-codegen, I realized that the latest Storybook (v8) still lacks proper monorepo first-class support. It’s uncertain whether future versions will include this support.

An RFC has been open for more than a year already; see here.