React + Storybook - docs and controls are not generated when component extended from monorepo lib component

[vik-buchinski]

Current Behavior

I have a monorepo, created by NX with the following structure: And the following dependencies graph: The storybook is set up to generate '@mui/material' types as described in the documentation: https://storybook.js.org/recipes/@mui/material

So, I created 2 projects which just re-export '@mui/material' components with their types. ('common-ui' and 'common-ui-buildable'). And added simple stories, components types based on typescript types in these stories generated correctly:

Also, I added 2 additional libraries, which consume re-exported components from 'common-ui' and 'common-ui-buildable'. The name of added libs 'common-ui-wrapper' and 'common-ui-wrapper-buildable'. The logic of consumed components is very simple, it is just re-export of components from 'common-ui' and 'common-ui-buildable' libs.

So, when I create stories for components from 'common-ui-wrapper' and 'common-ui-wrapper-buildable', the documentation that needs to be generated for them is missing:

NOTE: Additional libs with '-buildable' postfix created to demonstrate that 'buildable' and not 'buildable' libs work in the same way.

Expected Behavior

Storybook generates the same documentation for 'common-ui-wrapper' and 'common-ui-wrapper-buildable' libs that it generates for 'common-ui' and 'common-ui-buildable' libs.

GitHub Repo

https://github.com/vik-buchinski/nx-issue-reproduction

Steps to Reproduce

1. install modules: 'npm install'
2. start storybook: 'nx run storybook-host:storybook'
3. open 'http://localhost:4400/?path=/docs/libraries-buildable-ui-wrapper-button--docs' to see that docs are missing
4. open 'http://localhost:4400/?path=/docs/libraries-buildable-ui-button--docs' to see generated docs

Nx Report

>  NX  Falling back to ts-node for local typescript execution. This may be a little slower.
  - To fix this, ensure @swc-node/register and @swc/core have been installed

 >  NX   Report complete - copy this into the issue template

   Node   : 16.20.0
   OS     : darwin-x64
   npm    : 8.19.4
   
   nx (global)        : 16.2.2
   nx                 : 16.4.3
   @nx/js             : 16.4.3
   @nx/jest           : 16.4.3
   @nx/linter         : 16.4.3
   @nx/workspace      : 16.4.3
   @nx/cypress        : 16.4.3
   @nx/devkit         : 16.4.3
   @nx/eslint-plugin  : 16.4.3
   @nx/react          : 16.4.3
   @nx/storybook      : 16.4.3
   @nrwl/tao          : 16.4.3
   @nx/vite           : 16.4.3
   @nx/web            : 16.4.3
   @nx/webpack        : 16.4.3
   typescript         : 5.1.6
   ---------------------------------------
   Local workspace plugins:
         @myorg/common-ui-wrapper-buildable
         @myorg/common-ui-buildable

Failure Logs

No response

Operating System

• [X] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

If to start the storybook with the following command: 'DEBUG=docgen:* nx run storybook-host:storybook' we can see the following in the logs: ' docgen:exclude Ignoring un-built module: /Users/buchinski/Documents/github/nx-issue-reproduction/libs/common-ui-buildable/src/Button/Button.tsx'

Does this mean, that storybook expects nx library to be built, at the start-up to generate docs? (Just as assumption)

[mandarini]

First of all @vik-buchinski thank you for the reproduction repository! :D

I am looking into your issue now.

[mandarini]

If you just import the Button into the story directly without the wrapper it will work. I'm trying to figure out if the issue is with Nx when you add the wrapper, or this is just how it works, and maybe the mui library is exporting its components in some other way.

I mean, in libs/common-ui-wrapper/src/Button/button.stories.tsx, you can just do import { Button } from '@myorg/common-ui';

[mandarini]

Ok, I can verify that this exists, and I can verify that if the components are living in the same library, this does not happen. Will take a look at some later time, though.

[mandarini]

If I only do this change, it works: https://github.com/mandarini/nx-issue-reproduction/commit/b21c657ab842ee9f40eab55760d79acd4452405c

@vik-buchinski can you use this solution for now?

I think there may be something wrong with the double nesting, because first you're nesting the Mui props into a new interface, and then you're importing this interface in another component, in another lib, so maybe react-docgen-typescript has some limitations as to how deep it can go.

So please let me know if any of the above solutions work for you, ok?

Reiterating the solutions:

1. Do not wrap the MuiButton twice - wrap it once and then import the initial wrapper in another library's story directly
2. Wrap the button, but do not use the wrapped/extended props, use the native props directly, and extend them in place, in the new component.

I am going to mark this as third-party for the time-being until more info is present. But please let me know if these help you.

[vik-buchinski]

@mandarini thank you for the fast response!

So please let me know if any of the above solutions work for you, ok?

Unfortunately, these solutions don't work for us, because on the 'common-ui' level we are modifying '@mui/material' props (adding new, removing existing). 'common-ui' is kind of our design system, which we are using across another libraries and projects, where we also do some modifications, but already on the top of 'modified' components from 'common-ui'. So, we have to do these type of nesting and make docs generated properly for the whole chain of typescript props.

My personal feeling is that it could be connected somehow with how NX works with libraries. The root issue is not just about re-exported types from MUI, but also with 'custom' types which we declare by hand in the 'common-ui'. Custom props from 'common-ui' are also not displayed in the 'common-ui-wrapper' stories.

Concrete example: 'common-ui' Button component prop: https://github.com/vik-buchinski/nx-issue-reproduction/blob/main/libs/common-ui/src/Button/Button.types.ts We can see that doc for this property is correctly generated on the 'common-ui' level:

But when we go to the 'common-ui-wrapper' button, which is just re-export from 'common-ui': https://github.com/vik-buchinski/nx-issue-reproduction/blob/main/libs/common-ui-wrapper/src/Button/Button.tsx docs don't generate even this 'label' property, which is declared on the 'common-ui' component level:

[mandarini]

Hi @vik-buchinski ! Unfortunately I have not managed to solve your issue yet. I will try to take a look next week. I am sorry you are experiencing this. I will try to ask for help from some other team members too, since I am not sure how to help :(

[vik-buchinski]

Hi @vik-buchinski ! Unfortunately I have not managed to solve your issue yet. I will try to take a look next week. I am sorry you are experiencing this. I will try to ask for help from some other team members too, since I am not sure how to help :(

Sure. Will be waiting for your response.

Thanks for the help in advance!

[vik-buchinski]

Hello @mandarini ! Any news regarding this ticket?

[mandarini]

Hi @vik-buchinski ! No news yet, sorry. I will try to work on this during this and next week. In the meantime, if you can try some workaround (by maybe not nesting the component twice or manually adding the props like the example I gave) it would be great. Sorry about this.

[vik-buchinski]

Hi @vik-buchinski ! No news yet, sorry. I will try to work on this during this and next week. In the meantime, if you can try some workaround (by maybe not nesting the component twice or manually adding the props like the example I gave) it would be great. Sorry about this.

Hello!

NP! I'll wait)

by maybe not nesting the component twice or manually adding the props like the example I gave

Unfortunately, it is impossible in our architecture. The code will become unmaintainable. The ideal solution here - is to fix the root issue =)

[vik-buchinski]

Hello @mandarini any progress on this issue?

[mandarini]

Hi @vik-buchinski ! I am really sorry but no updates, no :( :( :( I really wish I could help. I have not managed to find a way to fix this yet. I will continue looking into it. Can you please do me a favor and open an issue on the Storybook GitHub referencing this, so maybe someone from the Storybook team can help debug? Or maybe ask in the Storybook discord? I am really really sorry that you are having this bad experience with our Storybook integration.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[vik-buchinski]

If we missed this issue please reply to keep it active.

Still not fixed