Type inference for variants with no default

[rcoopr]

Imagine a component defined as such

const buttonStyles = classed({
  variants: {
    color: {
      primary: "text-white bg-blue-500",
      secondary: "text-white bg-gray-700",
    },
    size: {
      small: "py-2 px-4",
      medium: "py-3 px-6",
      large: "py-4 px-8",
    }
  },
  defaultVariants: {
    color: "primary",
  },
});

color is given a default, while size is not. The resulting VariantProps are equivalent for both though -

type ButtonVariants = {
    color?: "primary" | "secondary" | undefined;
    size?: "small" | "medium" | "large" | undefined;
}

I wondered if it might be more suitable to make size a required prop in this case. Any thoughts?

[sannajammeh]

Thanks for the suggestion!

The idea is to be a class toggler and not force the developer to make any decisions. Lets say I had a component with many base classes and simply wanted to toggle color in one instance. Now I'm forced to do it everywhere.

I like your suggestion, but I think it should be opt in.

As a workaround right now:
You can override the types and make them stricter. Will probably put this in the docs

const _Button = classed("button", {
  variants: {
    size: {
      small: "w-4 h-4",
      medium: "w-8 h-8",
    },
    color: {
      red: "bg-red-500",
      blue: "bg-blue-500",
    },
  },
  defaultVariants: {
    size: "small",
  },
});

const Button = _Button as unknown as ClassedComponentType<
  typeof _Button,
  Required<Pick<VariantProps<typeof _Button>, "color">>
>;

// Typeerror when rendering Button, color is required.

Future

I will most likely be making an opt in way to doing this in the foreseeable future when I have some time on my hands.
Examples:

// Example 1
import { classed, InferStrictComponent } from "@tw-classed/react"
const _Button = classed("button", ...variants);

export const Button = _Button as InferStrictComponent<typeof _Button>

// Example 2
const Button = classed<"strict">("button", ...variants)

// Example 3
import { strict as classed } from "@tw-classed/react"
const Button = classed("button", ...variants);

// Example 4
const Button = classed.strict("button", ...variants);

Example 4 does collide a bit with the Proxy API tho. Still usable, maybe a bit confusing.

Interested in hearing which solution you prefer :)

[sannajammeh]

I've been experimenting with some solutions to this. Currently all 4 are working in my local codebase.

    const _BasicButton = classed("button", {
      variants: { loading: { true: "animate-pulse" }, color: { blue: "blue" } },
      defaultVariants: { color: "blue" },
    });

    // Pick the required props manually (both loading and color is required)
    const Button = _BasicButton as StrictComponentType<
      typeof _BasicButton,
      "loading" | "color"
    >;

    // Automatically infer the props based on defaultProps keys
    const Button2 = _BasicButton as InferStrictComponent<typeof _BasicButton>;

    // Uses the defaultProps approach
    const Button3 = strict(_BasicButton);
   // Uses the manual props approach (with intellisense)
    const Button4 = strict(_BasicButton, "loading", ...morePropKeys);

[rcoopr]

Nice, looks pretty flexible. I like the function simply because you avoid as. Potentially could rename to strictlyClassed or so to be more explicit

[sannajammeh]

Renamed to makeStrict. Its available in the latest @canary flag. https://tw-classed-canary.vercel.app/docs/strict-components