Suggestions required for a custom wrapper library

[thevipinmishra]

We've got a design system to build having around 30 components.

Initially, I wanted to start from scratch using headless UI libs but because of a tight deadline, we're thinking about wrapping Mantine components and export the same.

Forwarding refs and the whole typescript thing is kinda complicated since we do not have experienced typescript devs.

However, the docs are great and have started.

My main concern is the bundling now, is this really required?

I did play with some rollup options, got typescript errors and build got failed.

Is there any tool which can bundle the lib out of the box?

Thanks!!!

[rtivital]

You can find example rollup config here – https://github.com/mantinedev/extension-template/blob/master/rollup.config.mjs

[thevipinmishra]

Hi, thanks for this, my build is getting generated now.

However, I'm concerned about the .module.css file for the TestComponent.tsx

.root {
  background-color: var(--test-component-color);
  color: var(--mantine-color-white);
  padding: var(--mantine-spacing-md);
  border-radius: var(--mantine-radius-md);
  font-weight: 500;
}

To get this bundled, do we need to use it through useStyles function and it's the only way to get through it?

For example, I'm doing this.

import buttonClasses from "./Button.module.css";

const _Button = createPolymorphicComponent<"button", ButtonProps>(
  React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ classNames, ...rest }, ref) => (
      <Button
        classNames={{
          ...classNames,
          root: buttonClasses.demo,
        }}
        {...rest}
        ref={ref}
      />
    )
  )
);

I can the .css file being generated after the build but getting an error for the generate-dts.ts script.

error TS2307: Cannot find module './Button.module.css' or its corresponding type declarations.

Can you please guide on how to get through this?

I would really appreciate that.

[rtivital]

1. https://github.com/mantinedev/extension-template/blob/master/%40types/overrides.d.ts
2. https://github.com/mantinedev/extension-template/blob/master/tsconfig.build.json#L3