Skip to content

Instantly share code, notes, and snippets.

@ygorluiz

ygorluiz/ExampleUsage.tsx

Forked from matthewsimo/ExampleUsage.tsx
Created February 22, 2023 10:33
Show Gist options
  • Save ygorluiz/1e050ccc89ebc67bb5b6ebce33d01a13 to your computer and use it in GitHub Desktop.
Save ygorluiz/1e050ccc89ebc67bb5b6ebce33d01a13 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @matthewsimo matthewsimo revised this gist Jan 27, 2022. No changes.
  2. @matthewsimo matthewsimo revised this gist Jan 27, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ExampleUsage.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -10,4 +10,5 @@ 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);
  3. @matthewsimo matthewsimo created this gist Jan 27, 2022.
    13 changes: 13 additions & 0 deletions ExampleUsage.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    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 {}
    export const ExampleStory = modifyVariantsForStory<ExampleVariants, ExampleProps, typeof Example>(Example);
    31 changes: 31 additions & 0 deletions type-utils.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    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;
    }