Creating a React Component Library with TypeScript, Storybook & Rollup

Helpful! Planning to build a component library of popups!

I haven't used Storybook before so, I definitely learned a lot from this article.

Amazing article, Cristiana Man. Thanks for sharing.

Thank you so much !! this is what I am looking for so long 👍

Thank you! I would be glad to see an article about "Create React Library" with typescript

Christiana, this is such a crisp and clean guide. Thank you!

Thanks for the guide Cristiana! I just went through this dance myself and here are some additional things I found interesting:

• Use npm pack to test out what's getting placed in your published package. Also, it lets you npm i path/to/tarbal-0-0-0.tgz to verify. Much more reliable then pure npm linking on both sides.

• I had to do

    typescript({
      declaration: true,
    }),

and in my tsconfig

    "noEmit": false,
    "emitDeclarationOnly": true,

and then use tsc to build the types with:

    "build:types": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",

where my tsconfig-cjs.json extended the main one just changing the module to CommonJS and outDir to dist/cjs. It seems dist is most popular default e.g. for create-react-app aka react-scripts it seems to "want" stuff in dist (I had put stuff in lib before).

It's probably worth experimenting with the postcss options:

    postcss({
      minimize: true,
      sourceMap: true,
      extract: true,
    }),

I wanted my css minimized and not inlined. I thought I'd need to add module: true but there's a default in postcss that if you already name your files foo.module.css it'll treat it as a CSS module anyway (of course this is only for folks who care about that).

All this was done for my AgnosticUI React package (but similar for Vue and Svelte packages too)

I definitely took a lot of tweaking and I referenced many other blog articles and docs before getting it to my liking. Thanks again for yours Cristiana!