reactjs - Undvika null-värde i Storybook-kontroller

Jag använder class-variance-authority för att skapa knappvarianter och sedan härleda typer från det för knappens egenskaper:

const variants = cva(
  {
    variants: {
      intent: {
        primary: [
          ...
        ],
        secondary: [
          ...
        ],
        ghost: [
          ...
        ],
      },
      size: {
        ...
      },
    },
    defaultVariants: {
      intent: "primary",
      size: "md",
    },
  }
);

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

detta fungerar bra i appen. Jag kan lägga till intent-egenskap till knappen eller använda standardalternativet.

Men i Storybook, under kontroller för intend får jag varianter från cva och null värde.

skärmdump av storybook

Om jag väljer null, har inte min knapp någon av variantens stil (jag trodde att den skulle falla tillbaka till standarden).
För att undvika null måste jag lägga till en ytterligare typ under knappens egenskaper, och därmed i princip skriva över den som härleddes från cva.

Så hur kan jag få en reservlösning när jag klickar på null, eller hur kan jag helt undvika att se null-värdet utan att skriva över den härledda typen från cva

när jag lägger till till mina knapp-egenskaper

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof variants> & {
     intent?: string;
  };

nullvärdet är borta

Svar #1

Jag lämnade en förfrågan på cva github och fick svaret nedan. https://github.com/joe-bell/cva/issues/253

Jag tror att det snart kommer en uppdatering, vänner.

Eller, här är också ett alternativ. ta bort null eller undefined från egenskaperna hos en typ

Svar #2

En lösning jag har kommit på är att skapa en anpassad VariantProp-hjälptyp som utesluter null-typen. Så här:

import { type VariantProp } from 'class-variant-authority';

type ExcludeNull<T> = { [P in keyof T]: Exclude<T[P], null> };

export type CustomVariantProp<Comp extends (...args: any) => any> = ExcludeNull<VariantProps<Comp>>;

Här är ett exempel:

const variants = cva(
  {
    variants: {
      color: {
        primary: 'bg-primary',
        secondary: 'bg-secondary',
      }
    }
  }
);

// ❌
type WierdWithStorybookControls = VariantProps<typeof variants>;
// -> { color: 'primary' | 'secondary' | null | undefined }

// ✅
type WorksWithStorybookControls = CustomVariantProps<typeof variants>;
// -> { color: 'primary' | 'secondary' | undefined }


type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  CustomVariantProps<typeof variants> & {
     intent?: string;
  };

Du kan också gå längre för att utesluta undefined om du vill, skicka en standardvariant till cva ELLER använd react-docgen-typescript istället. Se storybook-konfiguration - https://storybook.js.org/docs/configure/typescript

Som nämnts kommer problemet att åtgärdas i framtiden, så håll utkik (https://github.com/joe-bell/cva/issues/253#issuecomment-1882982172)