Best way to create a library that uses Paste

[kcubero27]

Hello 👋🏼
I was wondering what would be the best way to create a new library of components on top of Paste.

Library
Currently, I'm working on a solution based on Rollup with the following configuration:

// rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

import pkg from './package.json';

export default {
	input: 'src/index.ts',
	output: [
		{
			file: pkg.main,
			format: 'cjs',
		},
	],
	plugins: [
		peerDepsExternal(),
		resolve(),
		typescript({
					   clean: true,
					   typescript: require('typescript'),
					   tsconfig: './tsconfig.build.json',
				   }),
		commonjs({ extensions: ['.js', '.ts', '.tsx', '.ts'] }),
		process.env.NODE_ENV === 'production' ? terser() : null,
	],
};

We have two different components: a button and a popover for the moment. The button itself seems to work, but styles are not applied unless we wrap it with the Theme Provider:

// src/components/my-button.js
export const MyButton = () => {
  return (
   <Theme.Provider theme="default" disableAnimations>
     <Button variant="primary">Action</Button>
    </Theme.Provider>
  )
};

On the other side, the popover component seems to be broken with the following error Uncaught TypeError: Cannot read properties of undefined (reading ‘fontSize70’). Only if we wrap it as well with Theme Provider works:

// src/components/my-popover.js
export const MyPopover = () => {
  return (
   <Theme.Provider theme="default" disableAnimations>
     <PopoverContainer baseId="a-popover">
     <p>content inside</p>
     </Popover>
    </Theme.Provider>
  )
};

Do you know if there is any way to avoid that?

Here there is a little bit more context:
Library's package.json:

// package.json
{
...
  "peerDependencies": {
    "@twilio-paste/core": "^11.0.0",
    "@twilio-paste/icons": "^6.0.0",
    "@twilio-paste/animation-library": "^0.3.1",
    "@twilio-paste/color-contrast-utils": "^2.0.0",
    "@twilio-paste/design-tokens": "^7.0.0",
    "@twilio-paste/styling-library": "^0.3.1",
    "@twilio-paste/types": "^3.1.1",
    "react": "^16 | ^17",
    "react-dom": "^16 | ^17"
  },
}

The application that imports the library has been created with CRA JS and the Paste dependencies are:

// package.json

{
...
"dependencies": {
    "@twilio-paste/core": "11.0.1",
    "@twilio-paste/design-tokens": "7.0.0",
    "@twilio-paste/icons": "6.1.0",
    "@twiliointernal/regional-toolbox": "1.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
...
  },
}

Also, the application has the Theme Provider injected into the App.js file:

<Theme.Provider theme="default" disableAnimations>
    <div>
        <Combobox items={authors} labelText="Select an author" required />
        <MyButton />
        <MyPopover />
    </div>
</Theme.Provider>

[nkrantz]

Hey @kcubero27! In order for us to best provide support here, it would be good to get a little more context on what you're trying to achieve. What's your goal in creating a new component library on top of Paste? What are you trying to accomplish by wrapping Paste that you aren't able to do by using our Paste components as they are? Thanks!

[kcubero27]

Hi @nkrantz 👋🏼 The main purpose of the library is to reuse code across different projects. In this case, we have created some components on top of Paste with some special functionality and instead of copying and pasting these components 10 times, we thought the best way would be to create a new library. Does that answer your question?

[kcubero27]

Somehow, when we use npm link locally in order to see the changes from the library, it doesn't work as expected and it complains about the fontSize70. However, if we use npm pack instead, it works like a charm.
Weird 👍🏼