@pandabox/define-recipe

import { describe, expect, expectTypeOf, test } from 'vitest' import { defineRecipe, type RecipeBuilder } from '../define-recipe' describe('define-recipe', () => { test('identity fn', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }) expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "md": { "h": "10", }, "sm": { "h": "8", }, }, "visual": { "blue": { "color": "blue.100", }, "red": { "color": "red.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ visual: { blue: { color: 'blue.100' } red: { color: 'red.100' } } size: { sm: { h: string } md: { h: string } } }> >() }) test('config.merge', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }).merge({ className: 'aaa', variants: { visual: { green: { color: 'green.100' }, yellow: { color: 'yellow.100' }, }, size: { lg: { h: '12' }, xl: { h: '14' }, }, }, }) expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "aaa", "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "lg": { "h": "12", }, "md": { "h": "10", }, "sm": { "h": "8", }, "xl": { "h": "14", }, }, "visual": { "blue": { "color": "blue.100", }, "green": { "color": "green.100", }, "red": { "color": "red.100", }, "yellow": { "color": "yellow.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ visual: { blue: { color: 'blue.100' } red: { color: 'red.100' } green: { color: 'green.100' } yellow: { color: 'yellow.100' } } size: { sm: { h: string } md: { h: string } lg: { h: string } xl: { h: string } } }> >() }) test('config.omit', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }).omit('visual') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": undefined, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "md": { "h": "10", }, "sm": { "h": "8", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ size: { sm: { h: string } md: { h: string } } }> >() }) test('config.omit multiple', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, border: { solid: { border: '1px solid' }, dashed: { border: '1px dashed' }, }, }, }).omit('visual', 'size') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": undefined, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "border": { "dashed": { "border": "1px dashed", }, "solid": { "border": "1px solid", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ border: { solid: { border: '1px solid' } dashed: { border: '1px dashed' } } }> >() }) test('config.pick', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }).pick('visual') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": undefined, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "visual": { "blue": { "color": "blue.100", }, "red": { "color": "red.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ visual: { blue: { color: 'blue.100' } red: { color: 'red.100' } } }> >() }) test('config.pick multiple', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, border: { solid: { border: '1px solid' }, dashed: { border: '1px dashed' }, }, }, }).pick('visual', 'border') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": undefined, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "border": { "dashed": { "border": "1px dashed", }, "solid": { "border": "1px solid", }, }, "visual": { "blue": { "color": "blue.100", }, "red": { "color": "red.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ border: { solid: { border: '1px solid' } dashed: { border: '1px dashed' } } visual: { blue: { color: 'blue.100' } red: { color: 'red.100' } } }> >() }) test('config.extend', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }).extend({ visual: { green: { color: 'green.100' }, yellow: { color: 'yellow.100' }, }, size: { lg: { h: '12' }, xl: { h: '14' }, }, }) expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "lg": { "h": "12", }, "md": { "h": "10", }, "sm": { "h": "8", }, "xl": { "h": "14", }, }, "visual": { "blue": { "color": "blue.100", }, "green": { "color": "green.100", }, "red": { "color": "red.100", }, "yellow": { "color": "yellow.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ visual: { blue: { color: 'blue.100' } red: { color: 'red.100' } green: { color: 'green.100' } yellow: { color: 'yellow.100' } } size: { sm: { h: string } md: { h: string } lg: { h: string } xl: { h: string } } }> >() }) test('config.extend existing', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }).extend({ visual: { blue: { backgroundColor: 'blue.900' }, yellow: { color: 'yellow.100' }, }, }) expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "md": { "h": "10", }, "sm": { "h": "8", }, }, "visual": { "blue": { "backgroundColor": "blue.900", "color": "blue.100", }, "red": { "color": "red.100", }, "yellow": { "color": "yellow.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ visual: { blue: { color: 'blue.100'; backgroundColor: 'blue.900' } red: { color: 'red.100' } yellow: { color: 'yellow.100' } } }> >() }) test('config.extend + config.omit', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }) .extend({ visual: { green: { color: 'green.100' }, yellow: { color: 'yellow.100' }, }, size: { lg: { h: '12' }, xl: { h: '14' }, }, }) .omit('visual') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": undefined, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "lg": { "h": "12", }, "md": { "h": "10", }, "sm": { "h": "8", }, "xl": { "h": "14", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ size: { sm: { h: string } md: { h: string } lg: { h: string } xl: { h: string } } }> >() }) test('config.extend + config.pick', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }) .extend({ visual: { green: { color: 'green.100' }, yellow: { color: 'yellow.100' }, }, size: { lg: { h: '12' }, xl: { h: '14' }, }, }) .pick('visual') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": undefined, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "visual": { "blue": { "color": "blue.100", }, "green": { "color": "green.100", }, "red": { "color": "red.100", }, "yellow": { "color": "yellow.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ visual: { blue: { color: 'blue.100' } red: { color: 'red.100' } green: { color: 'green.100' } yellow: { color: 'yellow.100' } } }> >() }) test('config.extend + config.omit + config.pick', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }) .extend({ visual: { green: { color: 'green.100' }, yellow: { color: 'yellow.100' }, }, size: { lg: { h: '12' }, xl: { h: '14' }, }, }) .omit('visual') .pick('size') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": undefined, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "lg": { "h": "12", }, "md": { "h": "10", }, "sm": { "h": "8", }, "xl": { "h": "14", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ size: { sm: { h: string } md: { h: string } lg: { h: string } xl: { h: string } } }> >() }) test('config.extend + config.pick + config.omit', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }) .extend({ visual: { green: { color: 'green.100' }, yellow: { color: 'yellow.100' }, }, size: { lg: { h: '12' }, xl: { h: '14' }, }, }) .pick('size') .omit('size') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": undefined, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": {}, } `) expectTypeOf(recipe).toMatchTypeOf<RecipeBuilder<{}>>() const keys = {} as keyof NonNullable<(typeof recipe)['variants']> expectTypeOf(keys).toMatchTypeOf<never>() }) test('config.extend + config.omit + config.pick + config.extend', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }) .extend({ visual: { green: { color: 'green.100' }, yellow: { color: 'yellow.100' }, }, size: { lg: { h: '12' }, xl: { h: '14' }, }, }) .omit('visual') .pick('size') .extend({ size: { xl: { h: '16' }, xxl: { h: '18' }, }, }) expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": undefined, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "lg": { "h": "12", }, "md": { "h": "10", }, "sm": { "h": "8", }, "xl": { "h": "16", }, "xxl": { "h": "18", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ size: { sm: { h: string } md: { h: string } lg: { h: string } xl: { h: string } xxl: { h: string } } }> >() }) test('compoundVariants pick', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, compoundVariants: [ { visual: 'red', size: 'sm', css: { color: 'red', }, }, { size: 'md', css: { color: 'green', }, }, { visual: 'blue', css: { color: 'yellow', }, }, ], }).pick('size') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": [ { "css": { "color": "red", }, "size": "sm", "visual": "red", }, { "css": { "color": "green", }, "size": "md", }, ], "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "md": { "h": "10", }, "sm": { "h": "8", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ size: { sm: { h: string } md: { h: string } } }> >() }) test('compoundVariants omit', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, compoundVariants: [ { visual: 'red', size: 'sm', css: { color: 'red', }, }, { size: 'md', css: { color: 'green', }, }, ], }).omit('size') expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": [], "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "visual": { "blue": { "color": "blue.100", }, "red": { "color": "red.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ visual: { blue: { color: 'blue.100' } red: { color: 'red.100' } } }> >() }) test('compoundVariants merge', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, compoundVariants: [ { visual: 'red', size: 'sm', css: { color: 'red', }, }, { size: 'md', css: { color: 'green', }, }, ], }).merge({ className: 'btn', compoundVariants: [ { visual: 'blue', size: 'sm', css: { color: 'blue', }, }, { size: 'md', css: { color: 'yellow', }, }, ], }) expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "compoundVariants": [ { "css": { "color": "blue", }, "size": "sm", "visual": "blue", }, { "css": { "color": "yellow", }, "size": "md", }, ], "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "md": { "h": "10", }, "sm": { "h": "8", }, }, "visual": { "blue": { "color": "blue.100", }, "red": { "color": "red.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ visual: { blue: { color: 'blue.100' } red: { color: 'red.100' } } size: { sm: { h: string } md: { h: string } } }> >() }) test('defaultVariants merge', () => { const recipe = defineRecipe({ className: 'btn', base: { px: '4' }, defaultVariants: { visual: 'red', size: 'sm', }, variants: { visual: { blue: { color: 'blue.100' }, red: { color: 'red.100' }, }, size: { sm: { h: '8' }, md: { h: '10' }, }, }, }).merge({ className: 'btn', defaultVariants: { visual: 'blue', size: null, }, }) expect(recipe).toMatchInlineSnapshot(` { "base": { "px": "4", }, "cast": [Function], "className": "btn", "defaultVariants": { "size": null, "visual": "blue", }, "extend": [Function], "merge": [Function], "omit": [Function], "pick": [Function], "variants": { "size": { "md": { "h": "10", }, "sm": { "h": "8", }, }, "visual": { "blue": { "color": "blue.100", }, "red": { "color": "red.100", }, }, }, } `) expectTypeOf(recipe).toMatchTypeOf< RecipeBuilder<{ visual: { blue: { color: 'blue.100' } red: { color: 'red.100' } } size: { sm: { h: string } md: { h: string } } }> >() }) })