Storybook: Export Library with PrimeVue with Aura theme customized

[cristinafernandez1234]

We have a component library that uses PrimeVue components and custom components from our own, everything with our own design system.

Until PrimeVue 3 we were using a theme provided by PrimeVue that we customized: https://github.com/primefaces/primevue/blob/master/public/themes/saga-blue/theme.css.

Now, with PrimeVue 4, we are using the Aura theme and customize it to adapt to our design. Here a mini example:

import { definePreset } from "@primevue/themes";
import Aura from "@primevue/themes/aura";

// Aura preset (https://primevue.org/theming/styled/) adapted to project
const CustomPreset= definePreset(Aura, {
primitive: {
    teal: {
      100: "#edf7f7",
      500: "#008580",
      800: "#0c4543"
    }
  },
  semantic: {
    primary: {
      100: "{teal.100}",
      500: "{teal.500}",
      800: "{teal.800}"
    }
  },
  components: {
    button: {
      padding: {
        x: "16px"
      },
      label: {
        fontWeight: "700"
      },
      colorScheme: {
        light: {
          outlined: {
            primary: {
              hoverBackground: "{primary.100}",
              borderColor: "{primary.500}",
              color: "{primary.500}"
            }
          },
          text: {
            primary: {
              hoverBackground: "{primary.100}",
              activeBackground: "{primary.100}"
            }
          }
        }
      }
    }
});

export default CustomPreset;

We use it without problems in the preview.js of our storybook:

import CustomPreset from "../src/CustomPreset.js";

app.use(PrimeVue, {
    theme: {
      preset: CustomPreset
    }
  });

If we check in the console we see the CSS variables from Aura theme generated (example --p-button-primary-background):

But the problem we have is that we have to export the library with the Aura style customized and use it in other projects. Before we exported the CSS customized, how can we achieve the same from the Aura theme? We don't see any documentation about it.

We tried to export the CustomPreset file and uses in the Vue 3 project in main.js:

app.use(PrimeVue, {
    preset: CustomPreset
  });

But the --p-button-primary-background and the other vars are not defined there:

Thanks in advance.

[j0rgedev]

Hello @cristinafernandez1234. I don't get to understand your use case, why do you want to use your CustomPreset with this code?

app.use(PrimeVue, {
    preset: CustomPreset
  });

[Alex-Cebula]

@cristinafernandez1234 we don't use a custom theme, we use the Lara theme and apply tweaks using design tokens and pass through options. Try taking a deeper look into your package-lock.json and make sure everything looks solid in there. We had this happen again for a new project and the culprit was a bad package-lock.

[cristinafernandez1234]

Thank you Alex, I will do so.

[johnwc]

@Alex-Cebula I do not believe a package-lock would cause any of this. A package-lock only determines what pinned version of packages are installed. You are most likely seeing it work in your main app because you are also using the components in the primary app, which causes primevue to detect the usage of them and inject the styles in the header.

If you can create a working example and publish it to a git repo that we can review it working, that would greatly help.

[Alex-Cebula]

@johnwc In our case the package-lock was causing an issue because we were using a "^" in our package.json. Which resulted in us installing a slightly newer version of prime vue than what we developed our npm package against. In some cases this caused minor inconsistencies in others it caused the absence of prime vue css variables(depends how new of a version installed). Forcing the prime vue version to match exactly between our client app and what our npm package has in its package-lock fixed this. We actually removed the "^" in both places forcing the exact version to be installed.

[johnwc]

@Alex-Cebula I think you may have found what version this bug was introduced in, is all of your packages using the latest released version of PrimeVue packages? If not, can you share what version they are pinned to, and if bumping it to the next release version after the pinned version causes it to break.

[burimdervisholli]

hi @cristinafernandez1234, any solutions yet? I kinda have the same issue looking to build a custom UI library using some of my own components and some of primevue's with a custom preset, while exporting/building the styles are missing when I try to import and use it in a test project!

[cristinafernandez1234]

No @burimdervisholli, I didn't find the solution yet. I also wrote in the discussion https://github.com/orgs/primefaces/discussions/2158 as it seems to be related. In my case the missing styles are the CSS variables for the components, so maybe there is a way to create them with a script or something (as PrimeVue does dynamically), because going component by component in Storybook and copying the variables in a CSS file is not very maintenable.

[burimdervisholli]

Thanks for the quick reply, I also do miss the css variables for the components so basically the same case. Any way lets see maybe there's a workaround for it.