search

chakra-ui / panda

🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️
https://panda-css.com
MIT License
5.23k stars 236 forks source link

Docs: Create end-to-end video documentation on building a component library with Panda #1032

Closed dsanchezjt closed 1 year ago

dsanchezjt commented 1 year ago

Subject

Building a Component Library

Description

I've been combing through the documentation surrounding building a component library using Panda and.I have not been able to experience success getting things to work properly. It's getting frustrating actually since I've spent a fair number of hours attempting to get things working.

I think there are holes in the documentation and things are unclear -- especially for understanding how styles are managed across packages. I noticed there are some videos on YouTube covering some topics and I feel it would be very worthwhile to create a video documentation series surrounding building a component library with PandaCSS.

People are often building component libraries in a monorepo setting and it's just something that needs to be very thoroughly documented since I suspect many would be using PandaCSS with that purpose in mind.

astahmer commented 1 year ago

seems like a good idea !

in the meantime, does this help ?

atl31 commented 1 year ago

Generally, same problem as the author. After a few hours spent on it, it was impossible to run a react nx mono repo with storybook, despite the resources previously given. So, if someone would have time to dig a little deeper into the subject of mono repos, that would be great :pray: .

dsanchezjt commented 1 year ago

seems like a good idea !

in the meantime, does this help ?

@astahmer I've seen those before and the information does help but I still haven't had success despite that information being available.

I have a specific question about the monorepo example link (specifically the preset package).

What purpose do the panda.config.ts and postcss.config.cjs files serve inside of the preset package itself? I noticed the config does not include the local preset defined within the package.

astahmer commented 1 year ago

my bad there I think it's just me leaving that after copy/pasting a folder, I don't think it has any use

dsanchezjt commented 1 year ago

@astahmer also, are there other considerations to be had if a consuming application of the component library lives outside of the monorepo in which the preset and component-library are defined? Moreover, what if that consuming app does not want to use Panda? What's the expected workflow in that case since I suspect we'd need to generate a static CSS file as that state diagram shows?

My current understanding of things is such that, Panda needs to be able to track where usage of the recipes you define for your component library are. If a separate app in another repo is out there attempting to use the library, how do we pack the CSS file since recipes are only made just in time? Do we have to use cva styles at that point? Because if they're downloading a version of the component library, they need to be able to import the static CSS (probably by another export path) with all permutations defined in order for all things to work.

astahmer commented 1 year ago

Generally, same problem as the author. After a few hours spent on it, it was impossible to run a react nx mono repo with storybook, despite the resources previously given. So, if someone would have time to dig a little deeper into the subject of mono repos, that would be great 🙏 .

hey @atl31 , what was your pain points exactly and can you open another issue/discussion with a minimal repro so we can better help you ?

are there other considerations to be had if a consuming application of the component library lives outside of the monorepo in which the preset and component-library are defined?

@dsanchezjt so, this looks like publishing on npm, then you can either:

My current understanding of things is such that, Panda needs to be able to track where usage of the recipes you define for your component library are.

correct !

Moreover, what if that consuming app does not want to use Panda? ... If a separate app in another repo is out there attempting to use the library, how do we pack the CSS file since recipes are only made just in time?

like you said, you can either: