Skip to content

Instantly share code, notes, and snippets.

@f1lander
Forked from matthewsimo/ExampleUsage.tsx
Created February 1, 2022 23:09
Show Gist options
  • Save f1lander/db2a9a95a4442e1e98217001ab724d3f to your computer and use it in GitHub Desktop.
Save f1lander/db2a9a95a4442e1e98217001ab724d3f 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 & { children: React.ReactNode};
return component as unknown as (props: ComponentStoryProps) => JSX.Element;
}
@f1lander
Copy link
Author

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

ping me on discord f1lander#5475

@AbdallahAbis
Copy link

Done, AbisAbdallah#2629

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