Thank you for the video, very nice and informative. if I want to add not just one style.css file but multiple under multiple folders and they will be scss files, do I have to modified my json file and add the import on the preview.ts file under the .storybook? and do I have to do that per file or it can just make reference to a folder?
This is a great video and I love to see Vite in here. Maybe add it to the title? Thank you for explaining clearly every important thing. Helped me setup my component library! I don't love the music but that is a personal preference. Great Video!!
Hi I wonder why in your dist file you have components/ card , d.ts file while I have nothing but plain cjs es and umd , do you think if is something wrong with config ? and which part should I pay closer attention
great video thanks for explaining the little things is there a way to do this without having to import the style sheet? also i cant seem to get the types to show properly in my next.js app, the button is showing with styles but no auto complete is presented at all
As far as I know, I don't think there is a way to create a component library that uses Tailwind without importing a stylesheet. I could be mistaken though. If you opted to use a CSS-in-JS library I know that works. Good callout on the auto-complete. I have mine turned off for video creation and didn't notice. In the vite.config.ts, inside the dts function, add insertTypesEntry: true as an option. I've updated the GitHub repo with that change. 👍 Just a heads up though. You might have to close and reopen your project for vscode to start seeing these changes. Sometimes it's finicky. Thanks for the comment!
@@DevDiveIn ill experiment with the `insertTypesEntry` later what ended up working for me was adding a types field also to my exports "types": "./dist/index.d.ts", "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/khrm-ui.es.js", "require": "./dist/khrm-ui.umd.js" }, "./styles.css": { "require": "./dist/styles.css", "default": "./dist/styles.css" } }, hmm, maybe ill refactor to CSS modules although I'm not sure what the advantage would be, I only decided to use tailwind because I was lazy but for my library itself I'm not really tired to anything I want to be easily used by others (not like anyone would use it but that's just my thought process) I did like tailwind prefix thing you did so I did do that, however I did not do the part when you talked about specificity because I was just making a button for starters and I didn't want to add a wrapper div with a `ui` class for example on top of it, if you think I misunderstood that part of have alternative approach for a button I would love to know, feel free to see my code if your curious at github(dot)com/destocot/khrm-ui
Hey! Great video! So I ran into the issue that concurrently doesn't really like using single quotes ' when running commands. If anyone else runs into this issue I managed to fix it by changing them from single quotes ' to backslash double quotes \" :D
Nice Catch! Thanks for commenting. 😀 It's funny I originally had a double quote, but decided to use single quotes to make it easier to ready for the video. Lesson learned. I didn't realize single quotes don't work on all machines. I'll be sure to update the GitHub repo with this change. 👍
Simple, efficient, thorough.
Stella job !
I've watched a lot of tutorials and examples to do this and no one was as good as yours!
Thank you for the video, very nice and informative.
if I want to add not just one style.css file but multiple under multiple folders and they will be scss files, do I have to modified my json file and add the import on the preview.ts file under the .storybook? and do I have to do that per file or it can just make reference to a folder?
This is a great video and I love to see Vite in here. Maybe add it to the title? Thank you for explaining clearly every important thing. Helped me setup my component library! I don't love the music but that is a personal preference. Great Video!!
Love the feedback! Thank you. I'm glad to hear the video helped you set up your component library.
Hi I wonder why in your dist file you have components/ card , d.ts file while I have nothing but plain cjs es and umd , do you think if is something wrong with config ? and which part should I pay closer attention
having same issue
try this
dts({
tsconfigPath: "./tsconfig.app.json",
exclude: ["**/*.stories.tsx", "**/*.test.ts"],
}),
great video thanks for explaining the little things
is there a way to do this without having to import the style sheet?
also i cant seem to get the types to show properly in my next.js app, the button is showing with styles but no auto complete is presented at all
As far as I know, I don't think there is a way to create a component library that uses Tailwind without importing a stylesheet. I could be mistaken though. If you opted to use a CSS-in-JS library I know that works.
Good callout on the auto-complete. I have mine turned off for video creation and didn't notice. In the vite.config.ts, inside the dts function, add insertTypesEntry: true as an option. I've updated the GitHub repo with that change. 👍 Just a heads up though. You might have to close and reopen your project for vscode to start seeing these changes. Sometimes it's finicky.
Thanks for the comment!
@@DevDiveIn ill experiment with the `insertTypesEntry` later what ended up working for me was adding a types field also to my exports
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/khrm-ui.es.js",
"require": "./dist/khrm-ui.umd.js"
},
"./styles.css": {
"require": "./dist/styles.css",
"default": "./dist/styles.css"
}
},
hmm, maybe ill refactor to CSS modules although I'm not sure what the advantage would be, I only decided to use tailwind because I was lazy but for my library itself I'm not really tired to anything I want to be easily used by others (not like anyone would use it but that's just my thought process)
I did like tailwind prefix thing you did so I did do that, however I did not do the part when you talked about specificity because I was just making a button for starters and I didn't want to add a wrapper div with a `ui` class for example on top of it,
if you think I misunderstood that part of have alternative approach for a button I would love to know, feel free to see my code if your curious at github(dot)com/destocot/khrm-ui
Hey! Great video! So I ran into the issue that concurrently doesn't really like using single quotes ' when running commands. If anyone else runs into this issue I managed to fix it by changing them from single quotes ' to backslash double quotes \" :D
Nice Catch! Thanks for commenting. 😀 It's funny I originally had a double quote, but decided to use single quotes to make it easier to ready for the video. Lesson learned. I didn't realize single quotes don't work on all machines. I'll be sure to update the GitHub repo with this change. 👍