Recommended structure for shared/app code in monorepo (nx)

[mayteio]

I just stumbled upon panda/ark while researching front-end infrastructure improvements and it looks great! We're switching to nx specifically with next.js and I had some questions around using this and the code structure.

We want to leverage nx and organize our code for modularity i.e. apps/app that imports from @org/ui-core, @org/ui-forms and @org/login-form as an example. This means we can make changes to @org/ui-form and only the login-form will be re-tested in CI/CD.

I've tried setting up pandas to run from the root of the project with config like;

defineConfig({ 
  ..., 
  include: ["./apps/*", "./libs/*"],
  outDir: "libs/styled-system/src"
})

So that the overall styled system is available through @org/styled-system. This ruins the purpose of the modularity though - my app and likely all ui components will be dependant on @org/styled-system, which may change any time I add css to the app or any of the components. Or is this just in the case of recipes and patterns?

Anyway - this approach doesn't work and I can only get it to work when placing everything inside the next.js folder (apps/app). Then the utilities aren't available in my lib folders. Which makes me wonder:

• am I taking the right approach to this?
• Or should each app and ui library have it's own instance of pandas?
• Or should I be using the "Use Panda as external package" mode of pandas?
• Or should I be creating a "lib" that re-exports the css function and styled factory function and use that in libs? Or even a Box that's an entry-point to the styled-system from my app?
• Is this a fool's errand, given all ark components use zag's useMachine so will likely need the "use client" directive anyway?

For context, we're coming from chakra because this seems like the way forward and we want to support server rendered components in react. It's pretty trivial to do the above with chakra, but maybe they serve different purposes. There, we're re-exporting the Box, Flex, etc basically any components we need and we get styled-props out of the box without the main app necessarily knowing about the chakra provider.

Hope that makes sense! Feel free to ask any clarifying questions.

[thetiby]

Hello, we got the nx monorepo setup to work as follows:

1. create a lib to hold all panda configurations (panda.config.ts)
2. build that lib with panda codegen --cwd=path/to/target/project --config=path/from/target/project/to/panda/config into all the other nx projects (requires panda 0.6.0 or higher, as the CLI had a bug with --config before that
3. if the target project is an app (next, storybook, etc), used postcss.config.cjs to specify the config file from the config lib
4. if not, use the panda CLI to extract the CSS from the target project and import it where needed

The only trouble we have in this setup is jest - it doesn't seem to want to swallow the panda styled engine, as it's ES6 and jest needs transpilation for that, which apppears to error out for recipe functions.

[mayteio]

Thanks @thetiby!

1. create a lib to hold all panda configurations (panda.config.ts)

Interesting approach - were you still able to have panda build/extract while running nx serve?

2. build that lib ... into all the other nx projects

Do you mean add a copy of styled-system into each project?

3. ... storybook ...

Did this work out of the box for you? Having an issue with semantic tokens not being extracted correctly.

Jest is the one thing that I got working pretty easily, I just had to switch the outExtension to js rather than mjs. Don't suppose you have a public repo I can poke around in? Here's mine 😄 https://github.com/mayteio/panda-nx-next

[mayteio]

Thanks for your tips - I managed to get it working. Solution here: #988