Help Storybook properly handle the relevant Stitches variants & props

ExampleUsage.tsx

import type * as Stitches from "@stitches/react";
import { modifyVariantsForStory } from "../../../.storybook/type-utils";
import { styled } from "../../stitches.config";

const Example = styles("div", {
  // ...
});

export default Example;

type ExampleVariants = Stitches.VariantProps<typeof Example>;
interface ExampleProps extends ExampleVariants {}
// Use this as the type in Story; i.e. `ComponentMeta<typeof ButtonStory>`
export const ExampleStory = modifyVariantsForStory<ExampleVariants, ExampleProps, typeof Example>(Example);

type-utils.ts

import type * as Stitches from "@stitches/react";

interface StitchesMedia {
  [x: string]: any;
  initial?: any;
  as?: any;
  css?: Stitches.CSS;
}

// We exclude these type properties from the `ComponentVariants` type so that storybook can more
// easily understand the type arguments. We exclude `"true"` and `"false"` strings as well since
// stitches also adds these, and they aren't necessary for storybook controls.
type StitchesPropsToExclude = "true" | "false" | StitchesMedia;

export function modifyVariantsForStory<ComponentVariants, ComponentProps, ComponentType>(
  component: ((props: ComponentProps) => JSX.Element) | ComponentType
) {
  type ComponentStoryVariants = {
    [Property in keyof ComponentVariants]: Exclude<
      ComponentVariants[Property],
      StitchesPropsToExclude
    >;
  };

  type ComponentStoryProps = Omit<ComponentProps, keyof ComponentVariants> &
    ComponentStoryVariants & { children: React.ReactNode};

  return component as unknown as (props: ComponentStoryProps) => JSX.Element;
}

Done, AbisAbdallah#2629