Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Help Storybook properly handle the relevant Stitches variants & props
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);
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<
type ComponentStoryProps = Omit<ComponentProps, keyof ComponentVariants> &
return component as unknown as (props: ComponentStoryProps) => JSX.Element;
Copy link

AbdallahAbis commented May 12, 2022

is there a way to ley modifyVariantsForStory accept a displayName of the component, because now storybook code block shows so wanted a way to make it show .

Copy link

lamualfa commented Sep 17, 2022

Thank you very much. It is beneficial.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment