reactjsmaterial-uistorybook

Building a UI lib with Storybook


I'm building a UI lib for my organization, I'm using react with material-ui as a peer dependency in the package.json of the lib. I wanted to add storybook to have a playground for the components I'm building but the problem is: My lib is built upon Material-ui, which as I said above, is a peer dependecy and Storybook doesn't find material-ui because it's a peer dependency of the projetct.

How should I deal with that?

It makes sense Storybook is not finding material-ui because it is supposed to be installed in the host project that is going to use my ui-lib. Installing material as a dependency is not the case since it would break whoever implements the lib. I tried to see something about the Lerna project, but I'm not very familiar with that.

I'm open to hear any ideas :)


Solution

  • I managed to find a workaround to this issue and wanted to share with the community. It's pretty silly but it works perfectly for my case.

    I added @material-ui both as dev dependency and peer dependency to my package.json and removed it from dev dependecies on my Docker file when I added it to the aws pipeline. So on while coding we have @material-ui but on prod environment it is not there.

    That solved it for me :)

    I could also just do "npm uninstall @material-ui" before "npm publish"