How to get all variants and it's options?

[syabro]

E.g. I have

export const buttonVariants = cva(['your', 'base', 'classes'], {
  variants: {
    color: {
      primary: 'bg-primary-600 hover:bg-primary-500 text-white',
      dark: 'bg-gray-800 hover:bg-gray-700 text-white',
      light: 'bg-gray-200 hover:bg-gray-300 text-gray-800',
      danger: 'bg-red-600 hover:bg-red-500 text-white',
      gray: 'bg-gray-600 hover:bg-gray-500 text-white',
      info: 'bg-blue-600 hover:bg-blue-500 text-white',
      purple: 'bg-purple-600 hover:bg-purple-500 text-white',
      success: 'bg-green-600 hover:bg-green-500 text-white',
      warning: 'bg-yellow-600 hover:bg-yellow-500 text-white',
    },
    size: {
      xs: 'px-2 py-1',
      sm: 'px-2 py-1',
      md: 'px-2.5 py-1.5',
      lg: 'px-3 py-2',
      xl: 'px-4 py-2',
    },
  },
  defaultVariants: {
    color: 'primary',
    size: 'md',
  },
})

And I want to create a storybook with all options without copypasting them.
How can I extract all colors and sizes?

[syabro]

Ended up writing my own tcva function
Maybe we can add this functionality to the main package?

import { ClassValue, ClassProp, StringToBoolean } from 'class-variance-authority/dist/types'
import { ConfigSchema, ConfigVariants, Config, cva } from 'class-variance-authority'

type TcvaProps<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp
type TcvaReturnFunction<T extends ConfigSchema> = {
  (props?: TcvaProps<T> | undefined): string
} & {
  [K in keyof T]: T[K]
}
export declare type TCVA = <T extends ConfigSchema>(
  base?: ClassValue,
  config?: Config<T> | undefined
) => TcvaReturnFunction<T>

export const tcva = <T extends ConfigSchema>(base: ClassValue, config: Config<T>) => {
  const variantsFn: TcvaReturnFunction<T> = cva(base, config) as TcvaReturnFunction<T>
  for (const variant of Object.keys(config.variants!)) {
    ;(variantsFn as any)[variant] = config.variants![variant]
  }
  return variantsFn
}

[switz]

do you have an updated version for the latest cva? seems some of these types are no longer exported

[joe-bell]

It's on my todo list for 1.0!

Thanks for sharing your solution 🙏

[TomFreudenberg]

Hi @bengry @joe-bell

is there an update about implementation / decision for .variants property.

I am highly interested in and wonder about release.

Currently using {"class-variance-authority": "^0.7.0"}

Thanks for some feedback
Tom

[nikuscs]

Same, specially in vue that we cannot use complex types to infer as component types :(

[bengry]

@TomFreudenberg From my point of view, I implemented this in main...bengry:cva:variants-return-property.
I never got an ack from @joe-bell that they're interested in adding this to cva, so I haven't created a PR for this. But I'd be happy to polish things up and create a PR if there's an intention to merge this from @joe-bell.

[joe-bell]

I’m interested, I’m just personally at capacity right now — introducing new features like this requires a lot of time to think and strategise

As much as I love this project and want to push it forwards, is not my number one priority 🙏🏼

[bengry]

@joe-bell Thanks for the prompt response.

I’m interested, I’m just personally at capacity right now — introducing new features like this requires a lot of time to think and strategise

Could you please expand on this some more?

Also, did you have a chance to look at my proposed code changes (this is a more correct diff, although it does seem like GH doesn't understand that some lines were just moved)?
IIRC this was a pretty small change, all in all. And I added a few tests to verify correctness + that existing stuff didn't break. That was over two months ago though, so I can revisit if needed.

The question is really whether you're open to PRs for implementing this, or prefer implementing it directly yourself.

As much as I love this project and want to push it forwards, is not my number one priority 🙏🏼

All good, perhaps it's worth considering adding another mantainer(s) if any are willing to step up. Given that the project's popularity and usage have skyrocketed in the past ~year.

[TomFreudenberg]

Hi @bengry

I will try your branch while working on a function that can expose the cva declared variants into the tailwind theme. This will allow easy use of those classes:

myvariants.ts

const button_variants = cva(["font-semibold", "border", "rounded"], {
  variants: {
    intent: {
      primary: [...]
      secondary: [...]
    },
    size: {
      small: [...],
      medium: [...],
      large: [...],
    },
  },
  compoundVariants: [
    {
      intent: "primary",
      size: "medium",
      className: "uppercase"
    },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});

tailwind.config.ts

addUtilities(
  cvaExpose('myprefix', {
    'button': button_variants,
    'card': dialog_variants,
    ...
  })
);

Can then be used inside the react pages.

pages.tsx

  <div className="myprefix-card-highlight-bold">
    <h1>Fancy</h1>
    <p>Simple design system</p>
    <button className="myprefix-button-primary-large">Press Me!</div>
  </div>

and inside .css as well

newstyles.css

.button-red {
  @apply myprefix-button-primary-large;
  @apply bg-red-500;
}

Feels like complete cva extended tailwind themes?!

Cheers
Tom

P.S.: cvaExpose will also use twMerge to allow merging of cva's for styles as well.

[joe-bell]

The question is really whether you're open to PRs for implementing this, or prefer implementing it directly yourself.

The fact is more down to the fact that implementing features such as this require careful thought and planning — regardless of who creates them. Skyrocketed usage brings skyrocketed responsibility.

Bringing on more contributors also carries responsibility

I am interested and I will update you when I have the opportunity to evaluate. All I ask for is a little patience!

That’s all I have to say on this for now 🙏🏼