withUniwind more flexible

[wcastand]

I was wondering a few things about withUniwind

How complicated it would be to have the possibility to add a defaultValue in the mapping:

withUniwind(Component, {
  targetProp: {                    // The component's original prop name
    fromClassName: 'myClassName',  // The className prop you'll use in JSX
    styleProperty: 'width',        // (Optional) Which CSS property to extract
    defaultValue: 'w-12'
  },
})

I use it with lucide icon or svg and i'd like to be able to define a default size or default color that use the theme for dark/light mode. Currently i have to do something like:

const _LucideIcons = ({ size = 22, className, style, ...props }: ComponentProps<typeof LucideIcons>) => {
	const defaultStyle = useResolveClassNames("text-text")
	return <LucideIcons size={size} style={[defaultStyle, style]} {...props} />
}

export const Icon = withUniwind(_LucideIcons, {
	color: {
		fromClassName: "className",
		styleProperty: "color",
	},
	size: {
		fromClassName: "className",
		styleProperty: "width",
	},
})

i'd like:

const _LucideIcons = ({ size, ...props }: ComponentProps<typeof LucideIcons>) =>  <LucideIcons size={size} {...props} />

export const Icon = withUniwind(_LucideIcons, {
	color: {
		fromClassName: "className",
		styleProperty: "color",
		defaultValue: "text-text"
	},
	size: {
		fromClassName: "className",
		styleProperty: "width",
		defaultValue: "w-6"
	},
})

other question about the mapping, is it possible to fromClassName to something like color or size as the prop name? I feel it's more natural to use color prop rather than colorClassName

[Brentlok]

How complicated it would be to have the possibility to add a defaultValue in the mapping:

It wouldn't be that complicated, but for now we're not planning on adding something like that

other question about the mapping, is it possible to fromClassName to something like color or size as the prop name? I feel it's more natural to use color prop rather than colorClassName

fromClassName can be anything, it doesn't need to include className in it, the only limitation is to not name it the same like any other existing prop

[wcastand]

How do you propose to handle default for withUniwind components then?

[Brentlok]

We've added this to our "nice to have" list for Q2, currently we're focused on ScopedThemes and polishing existing features.
In the meantime you can craft your own component with default values if needed:

const WithUniwind = withUniwind(Component)
const WithUniwindDefault: React.FC<React.ComponentProps<typeof WithUniwind>> = ({ className = 'w-6', ...props}) => <WithUniwind {...props} className={className} />