actor-kit/dist/storybook.mjs

Actor Kit is a library for running state machines in Cloudflare Workers, leveraging XState for robust state management. It provides a framework for managing the logic, lifecycle, persistence, synchronization, and access control of actors in a distributed

import { t as createActorKitMockClient } from "./createActorKitMockClient-Bqgcb5gz.mjs";
import React from "react";
//#region src/withActorKit.tsx
/**
* Storybook decorator that sets up actor-kit state machines.
*
* There are two main patterns for testing with actor-kit:
*
* 1. Static Stories (Use parameters.actorKit + within):
* - Use this decorator with parameters.actorKit
* - Use `within(canvasElement)` in play functions
* - Good for simple stories that don't need state manipulation
*
* 2. Interactive Stories (Use mount + direct client):
* - Don't use this decorator
* - Create client manually and use mount in play function
* - Good for stories that need to manipulate state
*
* @example
* ```tsx
* // Pattern 1: Static Story
* export const Static: Story = {
*   parameters: {
*     actorKit: {
*       session: {
*         "session-123": { ... }
*       }
*     }
*   },
*   play: async ({ canvasElement }) => {
*     const canvas = within(canvasElement);
*     // Test UI state...
*   }
* };
*
* // Pattern 2: Interactive Story
* export const Interactive: Story = {
*   play: async ({ canvasElement, mount }) => {
*     const client = createActorKitMockClient({...});
*     const canvas = within(canvasElement);
*
*     await mount(
*       <Context.ProviderFromClient client={client}>
*         <Component />
*       </Context.ProviderFromClient>
*     );
*
*     // Now you can manipulate client state...
*     client.produce((draft) => { ... });
*   }
* };
* ```
*/
const withActorKit = ({ actorType, context }) => {
	return (Story, storyContext) => {
		const actorKitParams = storyContext.parameters?.actorKit;
		if (!actorKitParams?.[actorType]) return /* @__PURE__ */ React.createElement(Story, null);
		const actorSnapshots = actorKitParams[actorType];
		const createNestedProviders = (actorIds, index, children) => {
			if (index >= actorIds.length) return children;
			const snapshot = actorSnapshots[actorIds[index]];
			const client = createActorKitMockClient({ initialSnapshot: snapshot });
			return /* @__PURE__ */ React.createElement(context.ProviderFromClient, { client }, createNestedProviders(actorIds, index + 1, children));
		};
		return createNestedProviders(Object.keys(actorSnapshots), 0, /* @__PURE__ */ React.createElement(Story, null));
	};
};
//#endregion
export { withActorKit };

//# sourceMappingURL=storybook.mjs.map