Wrapping and transpilling loses the styles

[PabloFNK]

Hi team,

I need to create for my team a library of components. Those components are going to be built on top of Paste components.

The thing is that I am writing a wrapper of the Button as an example (for testing) like this:

import React from 'react';
import { Button } from '@twilio-paste/core';

export const MyButton = () => (
    <Button variant="primary">Hello, World!</Button>
);

Then I am transpiling with tsc this code to JavaScript and consuming from another package.

That other package is an app which has Paste as a dependency and on the root component has the Theme provider. However, the button appears without styles like this (They grey background belongs to the App):

There are not button styles. Am I missing something I need to do to achieve this?

[TheSisb]

Hi @PabloFNK,

Can you provide some more context on how & why you're packaging these wrapper components? Specifically:

• Why are you doing this out of curiosity?
• Do these components live in the same repository, or are you publishing them and installing them with npm?

Thanks!

[PabloFNK]

Hi @TheSisb,

1. This is just a POC because probably we will end up (depending on the POC and other pending decisions) having to publish into Artifactory a library of components that currently are in our monorepo (where we have all the code, like console, monkey, shared components, etc.). The reason to this is that Console Beta is no longer a micro-frontends architecture but a single repo project and we need to use some of our components on Console and also on our monorepo.

So that means we need to create a components library, compile to JS and publish on Artifactory. And then consume it on Console. Or at least that's the idea we are trying to test on the POC.

2. Right now on the POC I am not publishing. I was trying to test the most basic implementation taking the advantage of our monorepo to consume this new package from some of the other projects on the monorepo when I saw this issue. But the final idea would be to publish it and consume it using NPM.

Let me know if you need more info!

Thank you!

[TheSisb]

Thanks for clarifying. Based on that information - create a components library, compile to JS and publish on Artifactory - it sounds like you need to wrap your components with the theme provider so that they get compiled with styles correctly. Make sure to mark paste dependencies as peerDependencies otherwise you may end up bundling Paste multiple times in each package.

[SiTaggart]

I'll drop a couple of thoughts in here too.

First thing I spot is how you're importing paste. You are importing all of core. If you are trying to create sharable compositions, your components should only import the individual packages you need, either by the package name, or package path in core. https://paste.twilio.design/getting-started/engineering#how-the-core-package-stays-lean. If you don't you are likely bundling all 300kb of paste into you components. Not good.

Secondly, as Shadi says, ensure paste is a peer dependency. You should not be bundling any paste code in you compiled JS.

If you're not bundling paste, you shouldn't need to wrap the components in a provider. Let the consuming application deal with paste and the theme provider setting at the root of the application.

Lastly, you might want to check with the console team on their GA timeline. If it's soon, as I suspect it is, what you might be trying to achieve is largely redundant from that point in from what I understand. Double check your not doing a bunch of work that doesn't need to be done after a couple months.

[PabloFNK]

Ok I had the idea of having it as peerDependency. I am going to explore that way if that avoids me have to add the Theme on each component (specially because I want to change the style when the parent app theme changes).

+1 about using the individual packages (I didn't use it just because it was a POC).

We are already in touch with the Console Beta team and designing a way. This is just a POC on our side to explore one of the possibilities.

Thank you!!!!

[SiTaggart]

OK, let us now how you go.

For what its worth, I wouldn't be worrying about the theme switching. You should probably be using the default theme all the time by now, if possible.