Can we publish the package "components-library" and use like import Button from 'components-library/button'

[darshan-g]

With the current approach my understanding is that we need to install multiple packages like @audnavlib/button, @audnavlib/button-group. Instead, how can we install the entire library(components-library) and then import the components like import Button from 'components-library/button'

@audriusnavickasDB

[audriusnavickasDB]

Correct, the main idea in this repository was to show how you can work with multiple packages at once.

The single package can be a whole component library itself. And usually in my experience it is quite common nowadays to have 3-4 packages within design systems/component libraries.

1 package - components library itself which holds multiple components where you can import components like 'comp-lib/button', 'comp-lib/input', etc.
2 package - design tokens, all variables in different formats like css, scss, less and etc. This is useful when you use for different projects with different stacks but need to keep the same design style.
3 package - icons, assets
4 package - js, framework specific utility stuff

So back to your question you can just simply have one directory, package which holds all components. Then each component has their own directory and index.js. And that's it - you publish the whole package and then in the import you just write the whole path to component you want.

In this case you need to ensure that everything is really in es modules so that tree-shaking would work fine in the app and would properly exclude/remove unnecessary code (might even use other tools for that other than webpack from component library perspective). I think there are articles regarding this as mine is quite outdated right now... And things had changed and advanced.

As I wrote in the other comment, I had abandoned this repository for quite some time. But as I see the interest and need is still there, so on my free time I will try to add some different cases, new tools and etc. with some guidelines in the readme files. But this will take some time and will not be done in a week or so. :) Sorry for the trouble. And I hope my answer somewhat helps.

[darshan-g]

Thank you so much for the detailed response, I'll try out

[darshan-g]

@audriusnavickasDB Can u tell me what changes should I do achieve what I mentioned earlier? I put index.js in the src directory with the following code:

export * from './Button';
export * from './ButtonGroup';

And in lerna.json I made the following change

"packages": [
"src/*"
],

Here's my directory structure

It's still publishing all the folders inside the src directory. I know I am wrong somewhere, can you help me point out my mistake and guide me.