Use pandas to develop a UI component library

[Darcrandex]

Hello, when I create a component library based on pandas and package it for release, I find that the packaged file does not contain the classes used in the component. What should I do?

For example, my button component does not contain color style code after packaging.

<button
        className={css({
          color: "blue.600",
          padding: "2",
          bg: "blue.100",
          borderRadius: "md",
        })}
      >
        {props.children}
 </button>

color: "blue.600"
does not generate the corresponding css code

repository and npm
https://github.com/Darcrandex/bug-ui
https://www.npmjs.com/package/@darcrand/bug-ui

[segunadebayo]

Hi @Darcrandex, we wrote a guide here:
https://panda-css.com/docs/guides/component-library

[astahmer]

this monorepo example might help https://github.com/astahmer/panda-monorepo/

[gjhltn]

THANK YOU this is unbelievably useful. will study closely. BRILLIANT. so grateful.

[hainessss]

@segunadebayo or @astahmer could you maybe to speak to why in the monorepo approach we create a separate styled-system package and all the apps generate into that package? is this just if you want to share recipes created in one package with all the others?

[astahmer]

so that you don't bundle twice your styled-system folders.
that can happen if in your app you import once from a local folder (../styled-system) and once from your monorepo package (@acme/styled-system), you'd end up with the css fn shipped twice because these are different files after all

for example if you have a preset with a bunch of design-system recipes but you need a custom one that is not part of the preset, you need a local styled-system folder for that since the one from the component library (@acme/styled-system) won't contain that specific recipe files

to solve that, you can also use bundler aliases like resolve.alias to point your monorepo package path (@acme/styled-system) to your local (../styled-system) folder and always import from the monorepo package path (@acme/styled-system)

[hainessss]

thanks for this explanation @astahmer !

[VinSpee]

Hi! I'm still struggling with this.

ideally, my app (consumer of my panda package) shouldn't have to know about panda at all. How can I achieve this? I can't find a way which doesn't require a panda.config.ts and global.css in the app (consuming the panda package)

[willTastyMakers]

@astahmer ,
Thank you so very much for helping me with this issue. I was able to apply your changes to my library and my consuming Nextjs application and successfully install and generate 'codegen'. I apologize for the disorganization of the code. I was in the middle of assembling a minimal repo of a library ui and a consumer web app that was a little more straight forward , but I figured I had better present something quickly before my inquiries were lost in the shuffle. Next time I will be more diligent in provide better organized example 🙏

While the install assembly is working, I have noticed that the some of the classes generated in the library's recipe variants and a set of Keyframe animations in the library's panda preset are not present in the Next.js consumer app. When I open the developer tools, I can see the classes on the html elements

class="lateralDrawer lateralDrawer--variant_left lateralDrawer--size_md"

<div data-scope="dialog" data-part="container" id="dialog::Rdmcq::container" data-state="open" class="lateralDrawer lateralDrawer--variant_left lateralDrawer--size_md" style="">

but when these classes are not present in the developer tool styles. However, using the Dev Tools, the classes associated with the elements and their respective recipe css values are present in the component library when viewed through the storybook "**.stories.tsx".

The only change I made from your code was in the library ( design-system) panda.config.ts. There was an import

// you need to separate the preset from the components otherwise esbuild & panda get confused
import { tmsPandaPreset } from "@tasty-maker-studio/design-system/src/theme/tms-panda-preset";

Perhaps stemming from the confusing organization of my code, I figured you were actually suggesting that the panda.config.ts in the
component library ( "@tasty-maker-studio/design-system/...) should be importing the tmsPandaPreset like:

import { tmsPandaPreset } from './src/theme/tms-panda-preset';

Since the @tasty-maker-studio/design-system is produced by the component library and thus not available. I only bring this up to make sure I did not miss something and correctly implementing your comment.

you need to separate the preset from the components otherwise esbuild & panda get confused

Thanks 🙌🏽 for your help.

[astahmer]

but when these classes are not present in the developer tool styles.

that's weird, I have them when running pnpm dev in the repo root, which is a next app

EDIT: nvm, got it, I can see some are missing

import { tmsPandaPreset } from './src/theme/tms-panda-preset';

yes this is correct ! my bad there

[astahmer]

the issue is that you're importing from a re-export, not directly from the styled-system, so it's not being picked up as a recipe by the static extractor (we don't traverse files)

https://github.com/Tasty-Maker-Studio/panda-tms/blob/a4dd104f6430e2be22d4cddf4175c588b88c90c9/%40tasy-maker-studio/design-system/src/components/Overlay/Drawer/LateralDrawer.tsx#L16
https://github.com/Tasty-Maker-Studio/panda-tms/blob/a4dd104f6430e2be22d4cddf4175c588b88c90c9/%40tasy-maker-studio/design-system/src/components/Overlay/Drawer/DialogParts.ts#L35

if you remove the lateralDrawerStyles import from DialogParts in LateralDrawer.tsx, and instead import it directly like import { lateralDrawer as lateralDrawerStyles } from "@tasty-maker-studio/styled-system/recipes"; then it will work as expected

[willTastyMakers]

Just saw your response I will give a go

@astahmer ,
When I open the lateral-drawer in the design-system library and I view the dev tools I can see the class value generated by the recipe

export const lateralDrawer = defineRecipe({
  name: 'lateralDrawer',
  description: 'A lateral drawl  style',
  base: parts({
     .....
    content: {
      position: 'absolute',
      zIndex: '99999',
      background: 'neutral.50',
      height: '100%',
      minW: 'xs',
      overflowY: 'auto',
      border: 'none',
      width: '100%'
    },
...
  }),
  variants: {
    variant: {
   ..
      }),
      left: parts({
        content: {
          top: '0',
          bottom: '0',
          left: '0',
          '&[data-state=open]': { animation: 'slideRightIn 0.5s ease-out' },
          '&[data-state=closed]': { animation: 'slideLeftOut 0.5s ease-in' }
        },
        closeTrigger: {
          right: '0'
        }
      })
    },
    size: {
...
      md: parts({
        content: {
          width: '50%',
          minWidth: '400px'
        }
      }),
      ...
    }
  },
 ..
});

[willTastyMakers]

@astahmer ,

I tried as your suggest and removing

the lateralDrawerStyles import from DialogParts in LateralDrawer.tsx, and instead import it directly like import { lateralDrawer as lateralDrawerStyles } from "@tasty-maker-studio/styled-system/recipes";

and importing from recipes directly
DialogParts.tsx
LateralDrawer.tsx

but did not work. It still does not contain the classes that are displayed in the screenshot above of the storybook.
I will continue to hack away at it.

[willTastyMakers]

@astahmer ,
🙏 🕺
Thank you for all you help. I was able to solve my issues and now our team is back on track. I appreciate you...
🙌

[astahmer]

awesome ! what was the issue ?

[willTastyMakers]

2 issues.

1. I did not realize there was a breaking change regrading recipes in v0.9.0 and when I switched from 'name' to 'className' that helped me sort a problem I was having in my github action workflow build.

2. Since I did not want matriculate the release version in the design-system package, I was building in design-system client repo and copy files from dist to the panda-tms/node_modules@tasty-maker-studio/design-system/dist. When I did this copy, I forgot to also bring over the changes from design-system/src as well.

The changes were a part of your instructions

if you remove the lateralDrawerStyles import from DialogParts in LateralDrawer.tsx, and instead import it directly like import { lateralDrawer as lateralDrawerStyles } from "@tasty-maker-studio/styled-system/recipes"; then it will work as expected

Once I copy these src files changes ^^^^ it began working. 🥇

You're 🍒 awesome Thanks for sticking with me..