Created
January 6, 2023 01:13
-
-
Save literalpie/a1c8e80efa900d711278783269933d7f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Component, | |
component$, | |
useStore, | |
PublicProps, | |
useTask$, | |
noSerialize, | |
NoSerialize, | |
} from "@builder.io/qwik"; | |
import { Meta, StoryObj } from "storybook-framework-qwik/*"; | |
export const TestComponent = component$( | |
({ numberState }: { numberState: { number: number } }) => { | |
return ( | |
<div> | |
{numberState?.number} | |
<button | |
onClick$={() => | |
numberState !== undefined ? (numberState.number += 1) : void 0 | |
} | |
> | |
increase | |
</button> | |
</div> | |
); | |
} | |
); | |
export const QwikStory = component$( | |
<T extends {} = {}>({ | |
StoryComponent, | |
args, | |
onStoreChange, | |
}: { | |
StoryComponent: Component<T>; | |
args: T; | |
onStoreChange: NoSerialize<(a: any) => void>; | |
}) => { | |
const myStoreChange = noSerialize(onStoreChange); | |
const numberStateStore = useStore(args, { | |
recursive: true, | |
// Not sure if this cast is bad. | |
// PublicProps transforms function props that return Promise to similar values that return Promise<T> | T | |
}) as PublicProps<T>; | |
useTask$(({ track }) => { | |
Object.keys(numberStateStore).forEach((key) => { | |
track((numberStateStore as any)[key]); | |
}); | |
myStoreChange?.(numberStateStore); | |
}); | |
return <StoryComponent {...numberStateStore} />; | |
} | |
); | |
export default { | |
title: "Story Example", | |
render: ({ numberState, onStoreChange }) => { | |
return ( | |
<QwikStory | |
StoryComponent={TestComponent} | |
args={{ numberState }} | |
onStoreChange={noSerialize(onStoreChange)} | |
/> | |
); | |
}, | |
component: TestComponent, | |
decorators: [ | |
// withStoreProp('numberState', { withActions: true }) | |
], | |
} as Meta<{ numberState: { number: number }; onStoreChange: () => void }>; | |
export const Default: StoryObj<{ | |
numberState: { number: number }; | |
onStoreChange: () => void; | |
}> = { | |
args: { | |
numberState: { number: 1 }, | |
}, | |
argTypes: { | |
onStoreChange: { action: "store" }, | |
}, | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment