Typescript and automatically generating variants with sprinkles

[maaniksingh92]

TLDR; Is there an easy way to create a variant object mapped from all the custom values for a sprinkle property with the benefits of Typescript?

Hi,

I have a map of custom values for spacing:
const space = { none: 0, xs: 8, sm: 16, md: 24, lg: 32, xl: 40 };
which i'm reusing for defining sprinkle properties of margin, padding and gap.

I also intend to define common recipe variants for each of the above properties to the custom values, e.g. for gap:

export const gapVariants = {
	none: sprinkles({ gap: "none" }),
	xs: sprinkles({ gap: "xs" }),
	sm: sprinkles({ gap: "sm" }),
	md: sprinkles({ gap: "md" }),
	lg: sprinkles({ gap: "lg" }),
	xl: sprinkles({ gap: "xl" }),
};

and then do something similar for the margin and padding properties as well.

The intention is to reuse these variants while writing recipes for common building block components.

I thought that I could take things one step further by creating a function that generates the variant map, e.g. gapVariants, like this:

function generateAllVariants(property: string, propertyValues: Object) {
	return Object.keys(propertyValues).reduce(
		(variants, value) => ({
			...variants,
			[value]: sprinkles({ [property]: value }),
		}),
		{},
	);
}

export const gapVariants = generateAllVariants("gap", space);

However, I lose the benefit of Typescript typings with this.

I feel like this might be a common use case for other projects and would love to know if there is an inbuilt function within the library to achieve this, or if any one else has a simpler solution to implement this.

Thanks

[astahmer]

is this what you want ? I made it generic even for the sprinkles part

interface AnySprinklesFn {
    (...args: any): string;
    properties: Set<string>;
}

type SprinklesProp<Fn extends AnySprinklesFn> = Parameters<Fn>[0];
type NotUndefined<T> = Exclude<T, undefined>

function generateAllVariants<
    SprinklesFn extends AnySprinklesFn,
    PropName extends keyof SprinklesProp<SprinklesFn>,
    Values extends Record<string, unknown>
>(sprinklesFn: SprinklesFn, propName: PropName, propValues: Values) {
    return keys(propValues).reduce(
        (variants, value) => ({
            ...variants,
            [value]: sprinklesFn({ [propName]: value }),
        }),
        {} as {
            [K in NotUndefined<SprinklesProp<SprinklesFn>[PropName]>]: ReturnType<SprinklesFn>;
        }
    );
}