blog/react-component-library-using-storybook-7/

[utterances-bot]

Creating a React component library using Storybook 7

Learn how to build a React component library using Storybook 6 and TypeScript, compile it with Rollup and publish it.

https://prateeksurana.me/blog/react-component-library-using-storybook-6/

[RAGOpoR]

I appreciate your tutorial. It really helpful to get started.

I have one question is when I try to make library according to your Button example, I have import material ui button into library and replace current generic button with MaterialUI button, That work great in storybook and successfully build and publish to npmjs package.

When I try to integrate it keep getting error

"The above error occurred in the <WithStyles(ForwardRef(Button))> component:"

Do you have any suggestion?

[prateek3255]

Hey @RAGOpoR thanks for the kind words 🙌

From the information you have provided here, its very difficult to tell what could be wrong here, I'm guessing its something related to the library. Although, it would be really helpful if you could provide a reproducible sandbox or the link to the GitHub repo (if its open source).

[RAGOpoR]

@prateek3255 Thank you for your reply, Here a repository https://github.com/dtacmobile/dtac-component-web/blob/master/src/components/Button/Button.tsx

[claudiamatosa]

Hey! Thank you so much for this post. It really saved me a lot of time! Just a couple of changes that need to be done in case you're using React 17 with the new jsx transform:

• Use @rollup/plugin-typescript instead of rollup-plugin-typescript2 and replace typescript({ useTsconfigDeclarationDir: true }) with typescript()
• Rename .tsconfig.json to tsconfig.json
• In tsconfig.json, replace "jsx": "react" with "jsx": "react-jsx"

[claudiamatosa]

So there's a few more settings that need tweaking, because with my setup above it wasn't emitting types. This is due to the way that plugin-typescript works, but it's an easy change.

Add a files array to package.json that contains src and lib:

  "files": [
    "src",
    "lib"
  ]

This will allow the typings to be included in the final package. I'm using yarn, so not completely sure if it would be different for npm.

In rollup.config.js, you'll need to specify the tsconfig file, even if you're using the default one:

    typescript({
      tsconfig: './tsconfig.json',
    })

Replace "outDir": "lib" with:

    "rootDir": "./src",
    "outDir": "./lib",

Specifying the rootDir here is important.

And finally, replace "declarationDir": "lib" with "declarationDir": "./".

I hope this helps complement your post or serves as an aid to anyone else who comes across this.

[claudiamatosa]

I pushed a template repository here with everything working after following your tutorial + changes for React 17 + Jest: https://github.com/MindTheCoin/typescript-storybook-component-library-template.

[prateek3255]

Thanks for the detailed comments @claudiamatosa 🙌

I will try to include the things you mentioned in the comments in the article.

[niko20]

Great article!, I have a question, how can I add CSS Modules for my component?

[HansKoerber]

Thanks for this nice tutorial.

There is just one problem, I could not find a solution for: If I want to test a page or component that imports one of the components from the library, Jest complains that it cannot find the component library (which, btw. is a scoped package).

Any idea what could be wrong here?

[MarioSerano]

Hey. Just wanna say that this is really sick and it works really well. Inside the scope of the component library, this is really concise and practical. I tried using tsdx since jaredpalmer's the creator, and instead of getting easy solution for a component library I got errors after errors after errors, then realized that the library is abandoned :( (understandable because he's working on Vercel I suppose). I also used tsc, but I got a lot of styles that are missing due to a lot of things not being bundled together.

Anyways, thanks for the effort in creating this really amazing blog!

[agustingorgni]

Excelent tutorial! Thanks a lot...I only have one question...how can I use .scss files? I've tried adding rollup-plugin-scss into rollup config but is not working...thanks in advance!

[gunslingor]

Seems to be outdated... rollup doesn't "appear" to allow you to create both cjs and esm at the same time now, just ridiculous; but I think I found workarounds for you to update this article with.

This must be the 15th tutorial I've followed in a week, tool builders can't seem to get there configs sync'd across each other is the root of the issues I've face.

I filtered my search for 2023 and this one was shown, followed it, ended up in the same error: RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.

Solution if you follow this tutorial to the letter (and end up with newer packages cause article is old in reality):

1. change rollup.config.js to rollup.config.mjs
2. change the require statement in package.json to import packageJson from "./package.json" assert { type: "json" };

That should be it, then this tutorial works with the modern stuff. I see that the index.esm.js file is generated only when the format esm output is included and the index.js file is only generated when cjs format is included... thus I think that's as intended (now I can continue on to testing the package).

I suspect the logic in these changes kinda makes sense if you assume the world is moving to mjs and mjs still needs to generate the old, while the cjs file is probably now relatively locked down as legacy... that's my best guess.

[gunslingor]

Sorry for the rant, been trying to do this for a week. My problem was starting with create-react-app, this article showed me how to isolate the concerns better. Thanks! Thus the one problem discussed above wasn't overlapping with a few other problems resulting from unanticipated configs... rollup just wasn't expecting the stuff in tsconfig and package.json that create-react-app put there. Thanks again!

[cjmaret]

I'm getting this error when trying to run yarn storybook before altering the stories folder or adding rollup: TypeError: typescript_1.default.createIdentifier is not a function

[cjmaret]

Nevermind, here's the solution from Klathmon: https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/78#issuecomment-1409224863

[prateek3255]

Hey @gunslingor, thanks for pointing out the out of date config issue. I have upgraded everything including Storybook to the latest version, which required me to rename the file name to rollup.config.mjs anyways. You can check out the latest code on the same GitHub repo:

https://github.com/prateek3255/my-awesome-component-library

Have also updated the article with the latest changes :v:

[sanderyt]

Great tutorial! Thanks :)

[hack-entertainer]

Thanks for the amazing tutorial! I had been looking around and tried different ones to no avail. This one really cinched it. My only caveat is that in the time since this has been published, the default code generated by storybook seems to have varied from what you have in the github repo. You may want to make a note of it and instruct everyone to simply copy/paste from your repo.

[Vishwas-75]

Hey @prateek3255 i want to build a component library using mui component as a base, i need fully flexible reusable component which will allow me to send ref also cloud you please help how i can do that??

[Desoul2411]

Does smb know how can I use css modules with storybook 7 stories?

[saminaali]

Hi @prateek3255 Want to use the library in separate react project.We have implemented the library where I am able to use the components of this library in different project. But unable to use the extensions folder where all API's endpoints are defined. How to use them in my project.If you have any idea please help