Skip to content

Instantly share code, notes, and snippets.

@matthewsimo
Last active September 9, 2023 14:01
Show Gist options
  • Save matthewsimo/dbcaa136ea9972dba5e5e6c8ae5f2c20 to your computer and use it in GitHub Desktop.
Save matthewsimo/dbcaa136ea9972dba5e5e6c8ae5f2c20 to your computer and use it in GitHub Desktop.
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<
ComponentVariants[Property],
StitchesPropsToExclude
>;
};
type ComponentStoryProps = Omit<ComponentProps, keyof ComponentVariants> &
ComponentStoryVariants;
return component as unknown as (props: ComponentStoryProps) => JSX.Element;
}
@AbdallahAbis
Copy link

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 .

@lamualfa
Copy link

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