fix: Added explicit undefined type to support exactOptionalPropertyTypes option

[totto2727]

Description

When enabling exactOptionalPropertyTypes in tsconfig.json, a type error occurs and some features become unavailable.

Example: The following error occurs when passing a variable that can be undefined as an object in the argument of a cva component function.

components/ui/Button/index.tsx:41:50 - error TS2412: Type 'string | undefined' is not assignable to type 'undefined' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the type of the target.

41       className={buttonVariants({ variant, size, className })}
                                                    ~~~~~~~~~


Found 1 error in components/ui/Button/index.tsx:41

This also makes it difficult to handle defaultVariants.

components/ui/Button/index.tsx:41:33 - error TS2345: Argument of type '{ variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined; size: "default" | "sm" | "lg" | null | undefined; }' is not assignable to parameter of type '(ConfigVariants<{ variant: { default: string; destructive: string; outline: string; secondary: string; ghost: string; link: string; }; size: { default: string; sm: string; lg: string; }; }> & ClassProp) | undefined'.
  Type '{ variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined; size: "default" | "sm" | "lg" | null | undefined; }' is not assignable to type 'ConfigVariants<{ variant: { default: string; destructive: string; outline: string; secondary: string; ghost: string; link: string; }; size: { default: string; sm: string; lg: string; }; }> & { ...; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
    Type '{ variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined; size: "default" | "sm" | "lg" | null | undefined; }' is not assignable to type 'ConfigVariants<{ variant: { default: string; destructive: string; outline: string; secondary: string; ghost: string; link: string; }; size: { default: string; sm: string; lg: string; }; }>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
      Types of property 'variant' are incompatible.
        Type '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined' is not assignable to type '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null'.
          Type 'undefined' is not assignable to type '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null'.

41       className={buttonVariants({ variant, size })}
                                   ~~~~~~~~~~~~~~~~~


Found 1 error in components/ui/Button/index.tsx:41

My Code

import type { VariantProps } from 'class-variance-authority'

import { forwardRef } from 'react'

import { cva } from 'class-variance-authority'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline:
          'border border-input hover:bg-accent hover:text-accent-foreground',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'underline-offset-4 hover:underline text-primary',
      },
      size: {
        default: 'h-10 py-2 px-4',
        sm: 'h-9 px-3 rounded-md',
        lg: 'h-11 px-8 rounded-md',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
)

export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof buttonVariants>

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => (
    <button
      className={buttonVariants({ variant, size })}
      ref={ref}
      {...props}
    />
  )
)
Button.displayName = 'Button'

export { Button, buttonVariants }

Explicitly adding undefined to some union types solved the problem.
fix: Added explicit undefined type to support exactOptionalPropertyTy…

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Follow the Style Guide.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 26, 2023 10:43am
example-astro-with-tailwindcss	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 26, 2023 10:43am
example-react-with-css-modules	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 26, 2023 10:43am
example-react-with-tailwindcss	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 26, 2023 10:43am
example-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 26, 2023 10:43am
example-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 26, 2023 10:43am

[joe-bell]

Thank you so much! This is something I've been meaning to tackle for some time. I'll take a deeper look soon 🙏

[joe-bell]

I'll take care of commitlint 🫡

[joe-bell]

Legend, thanks again 🔥