Creating custom component with extendVariants fails typescript extraction

[J4v4Scr1pt]

Hi!

Im trying to create a new and shiny components lib for our company.
Im going to extend some of NextUI's components and build our own.

I wanted to start simple by doing the classic button.
But unfortuantly I got stuck... when I build the npm package I get this:

stories/components/Button/Button.tsx(55,7): error TS2742: The inferred type of 'MyButton' cannot be named without a reference to '../../../node_modules/.pnpm/registry.npmjs.org+@nextui-org+system-rsc@2.0.7_@nextui-org+theme@2.1.10_react@18.2.0_tailwind-variants@0.1.18/node_modules/@nextui-org/system-rsc/dist/types'. This is likely not portable. A type annotation is necessary.      
stories/components/Button/Button.tsx(55,7): error TS2742: The inferred type of 'MyButton' cannot be named without a reference to '../../../node_modules/.pnpm/registry.npmjs.org+@nextui-org+react-utils@2.0.10_react@18.2.0/node_modules/@nextui-org/react-utils/dist/refs'. This is likely not portable. A type annotation is necessary.
stories/components/Button/Button.tsx(55,7): error TS2742: The inferred type of 'MyButton' cannot be named without a reference to '.pnpm/registry.npmjs.org+@react-types+shared@3.21.0_react@18.2.0/node_modules/@react-types/shared'. This is likely not portable. A type annotation is necessary.
stories/components/Button/Button.tsx(55,7): error TS2742: The inferred type of 'MyButton' cannot be named without a reference to '.pnpm/registry.npmjs.org+@react-types+shared@3.21.0_react@18.2.0/node_modules/@react-types/shared'. This is likely not portable. A type annotation is necessary.
stories/components/Button/Button.tsx(55,7): error TS2742: The inferred type of 'MyButton' cannot be named without a reference to '.pnpm/registry.npmjs.org+@react-types+shared@3.21.0_react@18.2.0/node_modules/@react-types/shared'. This is likely not portable. A type annotation is necessary.
stories/components/Button/Button.tsx(55,7): error TS2742: The inferred type of 'MyButton' cannot be named without a reference to '.pnpm/registry.npmjs.org+@react-types+shared@3.21.0_react@18.2.0/node_modules/@react-types/shared'. This is likely not portable. A type annotation is necessary.
stories/components/Button/Button.tsx(55,7): error TS2742: The inferred type of 'MyButton' cannot be named without a reference to '.pnpm/registry.npmjs.org+@react-types+shared@3.21.0_react@18.2.0/node_modules/@react-types/shared'. This is likely not portable. A type annotation is necessary.
stories/components/Button/Button.tsx(55,7): error TS2742: The inferred type of 'MyButton' cannot be named without a reference to '.pnpm/registry.npmjs.org+@react-types+shared@3.21.0_react@18.2.0/node_modules/@react-types/shared'. This is likely not portable. A type annotation is necessary.

I really want to use the basic of your button with all its glory and not creating my own.
But with this error our npm package loses it's type safety when used in the product.

Maybe I'm doing something wrong. First I did an exakt copy of the this, (also gives the error).

Then I built my own button that will have some more props etc. the end result is this:

import { extendVariants, Button as NextUiButton } from '@nextui-org/react';
import { ReactNode, Ref } from 'react';
import { type VariantProps } from 'tailwind-variants';

const MyButton = extendVariants(NextUiButton, {
	variants: {
		// <- modify/add variants
		color: {
			primary: 'bg-blue-500 text-black',
			secondary: 'bg-purple-500 text-black',
		},
		isDisabled: {
			true: 'bg-[#eaeaea] text-[#000] opacity-50 cursor-not-allowed',
		},
		size: {
			xs: 'px-unit-2 min-w-unit-12 h-unit-6 text-tiny gap-unit-1 rounded-small',
			md: 'px-unit-4 min-w-unit-20 h-unit-10 text-small gap-unit-2 rounded-small',
			xl: 'px-unit-8 min-w-unit-28 h-unit-14 text-large gap-unit-4 rounded-medium',
		},
	},
	defaultVariants: {
		// <- modify/add default variants
		color: 'primary',
		size: 'xl',
	},
	compoundVariants: [
		// <- modify/add compound variants
		{
			isDisabled: true,
			color: 'secondary',
			class: 'bg-[#84cc16]/80 opacity-100',
		},
	],
});
interface MyButtonProps extends VariantProps<typeof MyButton> {
	ref?: Ref<HTMLButtonElement>;
	className?: string;
	children?: ReactNode;
	label: string;
}

export const Button = ({ size, className, color, label, children, ref }: MyButtonProps) => {
	return (
		<MyButton
			{...{
				ref,
				className,
				size,
				color,
				type: 'button',
			}}>
			{children}
			{label}
		</MyButton>
	);
};

But the extraction of the types in the build step fires the above error.

Vite config:

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts'
import {libInjectCss} from 'vite-plugin-lib-inject-css'
import {extname,relative,resolve} from 'path'
import {fileURLToPath} from 'node:url'
import {glob} from 'glob'

export default defineConfig({
  plugins: [react(),libInjectCss(),dts({include: ['stories/components']})],
  build: {
    copyPublicDir: false,
    lib: {
      entry: resolve(__dirname,'stories/main.ts'),
      formats: ['es'],
      name: "my-components",
    },
    rollupOptions: {
      external: ['react','react/jsx-runtime',"tailwind-variants","framer-motion",RegExp("^(@nextui-org/).+")],
      input: Object.fromEntries(
        glob.sync('stories/**/*.{ts,tsx,js,jsx}',{ignore: 'stories/**/*.stories.{ts,tsx,js,jsx}'}).map(file => [
          relative(
            'stories',
            file.slice(0,file.length-extname(file).length)
          ),
          fileURLToPath(new URL(file,import.meta.url))
        ])
      ),
      output: {
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].js',
      }
    },
  },
})

And as a siden note, if I create my own button using tailwind-variants everything works fine and I get type saftey in the component and no errors.

import { ReactNode, Ref } from 'react';
import { tv, type VariantProps } from 'tailwind-variants';

const button = tv({
	base: 'font-medium bg-blue-500 text-white rounded-full active:opacity-80',
	variants: {
		color: {
			primary: 'bg-blue-500 text-white',
			secondary: 'bg-purple-500 text-white',
		},
		size: {
			sm: 'text-sm',
			md: 'text-base',
			lg: 'px-4 py-3 text-lg',
		},
	},
	compoundVariants: [
		{
			size: ['sm', 'md'],
			class: 'px-3 py-1',
		},
	],
	defaultVariants: {
		size: 'md',
		color: 'primary',
	},
});

interface ButtonProps extends VariantProps<typeof button> {
	ref?: Ref<HTMLButtonElement>;
	className?: string;
	children?: ReactNode;
	label: string;
}

export const Button = ({ size, className, color, label, children, ref }: ButtonProps) => {
	return (
		<button
			{...{
				ref,
				type: 'button',
				title: label,
				className: button({ className, color, size }),
			}}>
			{children}
			{label}
		</button>
	);
};

[J4v4Scr1pt]

Or is there another way of extracting the props from Button? Would really appreciate help on this 🙏. I love this lib and would really like to avoid looking elsewhere 💙.

[J4v4Scr1pt]

I have created a sandbox to show the issue.
Run pnpm build-sb to create the component lib and get the error. And pnpm sb just to start it, which work.

This issue is killing me and my hair is gone.. 😅

And if you want some rep on StackOverflow I have an issue there as well. I have got some awesome help but we are not quite there yet.

[J4v4Scr1pt]

I have been trying a lot of solution regarding this, and almost came to an final one.. But I must use the extendVariants props in the end to get proper use and as soon as I do this it breaks the type extraction step in the build. And when you try to extend the variants the base interfere with your styles and odd behaviors appear.

This is the closest I have got to get a custom button based on NextUI that you can build as an npm package:

import { MouseEventHandler } from 'react';
import { ReactNode } from 'react';
// import { type VariantProps } from 'tailwind-variants';
import { extendVariants, Button as NextUiButton } from '@nextui-org/react';

const MyButton = extendVariants(NextUiButton, {
	variants: {
		appearance: {
			primary:
				'border-my-purple bg-my-purple hover:border-[#902baa] hover:bg-[#902baa] active:border-[#902baa] active:bg-[#902baa]',
			primaryInverse:
				'border-my-jungle bg-my-jungle hover:border-[#00ccb9] hover:bg-[#00ccb9] active:border-[#00ccb9] active:bg-[#00ccb9]',
			secondary:
				'border-my-lightPurple bg-my-lightPurple text-my-purple hover:border-[#f7f4ff] hover:bg-[#f7f4ff] active:border-[#f7f4ff] active:bg-[#f7f4ff]',
			outline:
				'hover:bg-whiteSmoke border-my-fog bg-white text-my-onyx hover:opacity-[98] focus-visible:border-my-white focus-visible:shadow-[0px_0px_0px_3px_rgba(0,_189,_171,_0.5)] active:bg-my-whiteSmoke active:opacity-[98]',
			white: 'border-my-white bg-white text-my-onyx hover:border-[#fafafa] hover:bg-[#fafafa] active:border-[#fafafa] active:bg-[#fafafa]',
			warning:
				'border-none bg-my-lightRed text-my-brick hover:border-[#fff2f3] hover:bg-[#fff2f3] active:border-[#fff2f3] active:bg-[#fff2f3]',
			danger: 'border-none bg-my-brick hover:bg-[#cb4327] active:bg-[#cb4327]',
			primaryGradient:
				'border-0 bg-[linear-gradient(to_right,#00d2bf_0%,#7f2696_51%,#00d2bf_100%)] bg-[size:200%_auto] transition-[background-position] duration-[400ms] ease-out hover:bg-[position:right_center] active:bg-[position:right_center] border-none',
		},
		size: {
			sm: 'h-6 px-3 py-0',
			md: 'h-8 px-4 py-0',
			lg: 'h-10 px-4 py-0',
		},
	},
	compoundVariants: [
		{
			// @ts-expect-error Workarround for NextUi
			appearance: [
				'primary',
				'primaryInverse',
				'secondary',
				'outline',
				'white',
				'warning',
				'danger',
				'primaryGradient',
			],
			class: 'relative flex cursor-pointer flex-row items-center justify-center rounded-full border-2 border-solid font-medium capitalize text-white focus:outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:shadow-[0px_0px_0px_4px_rgba(0,_189,_171,_0.20),_0px_0px_0px_1px_#00CCB9]',
		},
	],
	defaultVariants: {
		size: 'md',
		appearance: 'primary',
	},
});

interface ButtonProps {
	className?: string;
	children?: ReactNode;
	label?: string;
	disabled?: boolean;
	isLoading?: boolean;
	dataTest?: string;
	dataTrackId?: string;
	dataGuideId?: string;
	size?: 'sm' | 'md' | 'lg';
	appearance?:
		| 'primary'
		| 'primaryInverse'
		| 'secondary'
		| 'outline'
		| 'white'
		| 'warning'
		| 'danger'
		| 'primaryGradient';
	onClick: MouseEventHandler<HTMLButtonElement>;
}

export const Button = ({
	size,
	className,
	appearance,
	label,
	children,
	disabled,
	dataTest,
	dataTrackId,
	dataGuideId,
	onClick,
}: ButtonProps) => (
	<MyButton
		{...{
			disabled,
			onClick,
			className,
			appearance,
			size,
			'data-focus-visible': false,
			'data-focus': false,
			'data-hover': false,
			'data-test': dataTest,
			'data-track-id': dataTrackId,
			'data-guide-id': dataGuideId,
		}}>
		{children}
		{label}
	</MyButton>
);

To anyone that will try to build a components lib as an npm package using NextUI (with TS) will need to look else where. I really like NextUI but it seems that the commity and maintainers don't know how to solve the above issue, because of the lack of answers.
Really unfortunate but nothing to to do, but I hope this lib grows and becomes the go to lib for components.

[user72356]

I appreciate your effort. I'm trying to understand how to extend the library a bit and I found your message. Did you ever figure this out? Have you had a look at the source code and how they are doing it?

[J4v4Scr1pt]

What I tried doing above kind of defeats the purpose of using an component library like NextUI.
What I ended up doing was using their theme functionality and where i truly needed custom component based on NextUI. I create it locally using their components hook functionality.
Use NextUI for what it is, no need to try forcing it to be something else :)