A raw function for all variant values

[boar-is]

Description

It would be great if we could run a raw function against every variant key.

Problem Statement/Justification

When using Storybook, I'm not a big fan of creating per-variant stories. Instead, I use a render function that renders all variants at once:

// Before:
export const SmallButton = {
  args: button.raw({
    size: 'sm'
  })
}

export const MediumButton = {
  args: button.raw({
    size: 'md'
  })
}

export const LargeButton = {
  args: button.raw({
    size: 'lg'
  })
}

// After:
export const SizeVariantsButton = {
  render: (props) => <VariantCanvas of={Button} props={props} variant="size" variantValues={button.variantMap.size} />
}

However, even if I pass button.raw to the VariantCanvas, it doesn't work, since raw are build-time functions. The only escape hatch I see now is to use all these static raw calls:

button.raw({
  size: 'sm'
})
button.raw({
  size: 'md'
})
button.raw({
  size: 'lg'
})

But in such a way, I can instead write like before. But I don't want to. 🫠

Proposed Solution or API

The solution is to create a raw function alternative which will identify every possible variant's value by its keys:

button.rawVariant(['size']) // The parameter is an array, for multiple variants at once. If empty, all variants are included.

// same as

button.raw({
  size: 'sm'
})
button.raw({
  size: 'md'
})
button.raw({
  size: 'lg'
})

Alternatives

See Problem Statement/Justification

Additional Information

No response

[boar-is]

As a workaround, I was able to create a function with the following declaration:

export const SizeVariants = {
  render: (props: ComponentPropsWithoutRef<typeof Button>) => (
    <VariantCanvas
      columnAxis={[
        'size',
        [
          button.raw({ size: 'xs' }),
          button.raw({ size: 'sm' }),
          button.raw({ size: 'md' }),
          button.raw({ size: 'lg' }),
          button.raw({ size: 'xl' }),
          button.raw({ size: '2xl' }),
        ],
      ]}
      of={Button}
      props={props}
      rowAxis={[
        'variant',
        [
          button.raw({ variant: 'solid' }),
          button.raw({ variant: 'outline' }),
          button.raw({ variant: 'ghost' }),
          button.raw({ variant: 'link' }),
        ],
      ]}
    />
  ),
}

This does not solve the problem, but still better.

[astahmer]

I feel like you're looking for config.staticCss for your recipe variants

you could make a specific panda.config file for your storybook, separated from the one in your app, that basically extends it and just specify that additional config.staticCss so that only in your Storybook app you'd get all variants generated by default

with this, you wouldn't need to use .raw at all to pre-generate the CSS

[theMasix]

Could you please create a reproduction repo?
I have this issue as well.