Monorepo – How to create a shared package that exports both styled-system and park-ui components

[carlgunderson]

I thought this would be easier 😅

My current goal is to create a shared package (lib) in a monorepo which exports both styled-system and park-ui components.

• In this lib, I also want the custom preset I created to be included/applied on top of the park-ui preset

Multiple react apps in the monorepo should be able to to consume both the park-ui components and the styled system.

import { HStack, Spinner } from '@org/common-ui-lib'
or
import { Spinner } from '@org/common-ui-lib/components'
import { HStack } from '@org/common-ui-lib/styled-system'

I'm not sure if styled-system and park-ui/ark-ui components should live in the same package, or separate ones?

import { HStack } from '@org/styled-system-lib/jsx'

I've spent most of my time trying to implement the "component library" guide from pandacss, but I'm not sure how much of that is conflicting with what park-ui and ark-ui are meant to do.

Another crux of the issue, I think, is how to generate the styles.css from styled-system in each consuming application and get that same DX where you can just run panda --watch from the consuming react app. It's not clear to me how each panda.config.ts file should be configured.

Does this even make sense or is it antithetical in some way to how these tools are meant to be used?

[MartinSchmidt123]

I tried something similar in #375

At some point the pnpm workspace setup stopped working. I could not find a fix or workaround.

But after switching to bun, I am happy now. The repo in the linked issue still uses pnpm. I can also update it to bun and the latest Park UI version in the next days.
But there are no unexpected changes neccessary for bun.

[carlgunderson]

Thanks for linking to the Issue you created - I missed that.

It's not feasible for me to use bun in this project but that's ok. I'll follow up here if I figure it out.

I built the exact same structure as your codesandbox 🙃