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

[dsanchezjt]

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]

seems like a good idea !

in the meantime, does this help ?

• a visual machine to help decide how to ship a components library
  https://stately.ai/registry/editor/d30cb4f3-2279-41a6-ad95-13e72ccfe884?mode=Simulate&machineId=0ff5a34b-1d63-476d-ad2d-21c91dad9973
• monorepo example https://github.com/astahmer/panda-monorepo

[atl31]

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 🙏 .

[dsanchezjt]

seems like a good idea !

in the meantime, does this help ?

• a visual machine to help decide how to ship a components library
  https://stately.ai/registry/editor/d30cb4f3-2279-41a6-ad95-13e72ccfe884?mode=Simulate&machineId=0ff5a34b-1d63-476d-ad2d-21c91dad9973
• monorepo example https://github.com/astahmer/panda-monorepo

@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]

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]

@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]

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:

• publish your component-library source files with the dist and include it
• or you can use panda ship with a buildinfo file if you don't want/can't publish the src folder

---

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:

• swap to cva recipes
• use config.staticCss to pre-generate your recipes variants ahead of time

[segunadebayo]

We're going to make a video guide about this, and add it to our /learn page.

[dsanchezjt]

@segunadebayo Outstanding! Very much looking forward to that being made available. Really hope it's able to cover the gamut of component library consumption use-cases. Especially since most component libraries I suspect will be dealing with consumer apps that either want to use Panda or don't want to use Panda (so the library will have to supply both native Panda things + staticCSS to handle both situations depending on consumer app need)

[avegatolber]

Hey! Any updates?

[coopbri]

@avegatolber https://www.pandamastery.com/