[Design System] How to expose components built with preset?

[tunguyen-ct]

Currently I'm following the Design-System Guide, everything works fine.

Now, I want to create a Button component and reuse it, how can I do it?

my-monorepo
├─ apps
│  ├─ web <-- where I use the `Button` from `packages/button` ❌ Error
│  └─ docs <-- where I directly use the `preset` from the `packages/preset` ✅ Good
├─ packages
│  ├─ preset <-- where I expose the `preset` using `definePreset`
│  └─ button <-- where I import the `preset`, define component and export it

The error relates to the import path of the emitted package.

Can you provide document for how to achieve this? Because I think most people would go this way rather than directly consume the preset and defining components on their own in their web application. Thank you very much for this amazing library.

I'm using: pnpm workspace, next.js, typescript, turbo, tsup, all latest version.

Updated

Using transpilePackages: ['button'] works ✅

I only get the error when trying to build the button package using tsup.

Updated

Using transpilePackages: ['button'] only works when:

• I run panda codegen in the button package, so that it can require styled-system/jsx, styled-system/recipes,...

Therefore I think this would cause problem if I try to publish this package to a registry. I think I have to also bundle the styled-system folder with the button package to make it works.

Updated

Assuming I have:

• a button using a preset version 1.0.0
• a button using a preset version 2.0.0

I think I have to bundle the generated css for each version of button. Is it correct? Or there is other better way?

[anubra266]

@tunguyen-ct I don't fully understand your question, but if you want a jsx version of your button recipe, then use this and this

An online reproduction or a sample repo, could help me better understand your project structure too.

[tunguyen-ct]

@anubra266 I heard @astahmer talked about the panda ship command, looks like what I am looking for. He answered me in the Panda CSS Discord.

[anubra266]

@tunguyen-ct you could leave the reply here for others who come across the discussion. thanks

[astahmer]

hey, the answers from discord were:

regarding that, we have an undocumented command that you could use "panda ship" in your UI library code to generate a JSON that you will then be able to import in your app code in the config.include and it will be treated as another source of code to extract and generate styles from

follow the same steps as the Design system guide (emitPackage with the same name in both sides)
from UI lib, generate a JSON with panda ship
from app, import that JSON in the config.include option

here's an actual example of a panda monorepo usage with a consuming app and multiple ui-lib providers
https://github.com/astahmer/panda-monorepo

[tunguyen-ct]

@astahmer thank you very much 👍🏼