qwik-storybook-with-state-props.tsx

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" },
  },
};