@powerhousedao/builder-tools 0.2.0

package/dist/editor-utils/reducer.js

@@ -0,0 +1,24 @@
+import { useState } from "react";
+export function useDocumentReducer(reducer, initialState, onError) {
+    const [state, setState] = useState(initialState);
+    const dispatch = (action, onErrorCallback) => {
+        setState((_state) => {
+            try {
+                const newState = reducer(_state, action);
+                const operation = newState.operations[action.scope].slice(-1)[0];
+                if (operation.error) {
+                    const error = new Error(operation.error);
+                    onError?.(error);
+                    onErrorCallback?.(error);
+                }
+                return newState;
+            }
+            catch (error) {
+                onError?.(error);
+                onErrorCallback?.(error);
+                return _state;
+            }
+        });
+    };
+    return [state, dispatch];
+}

package/dist/editor-utils/storybook.d.ts

@@ -0,0 +1,25 @@
+import { Decorator, Meta, StoryObj } from "@storybook/react";
+import { ActionFromDocument, EditorProps, ExtendedState, GlobalStateFromDocument, LocalStateFromDocument, PHDocument, PartialState, Reducer } from "document-model";
+import React from "react";
+export type EditorStoryArgs<TDocument extends PHDocument> = Partial<{
+    isAllowedToCreateDocuments: boolean;
+    isAllowedToEditDocuments: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    onSwitchboardLinkClick: (() => void) | undefined;
+    onExport: () => void;
+    onClose: () => void;
+    onShowRevisionHistory: () => void;
+    simulateBackgroundUpdates?: {
+        backgroundUpdateRate: number;
+        backgroundUpdateActions: ((document: TDocument) => ActionFromDocument<TDocument>)[];
+    };
+}>;
+export type EditorStoryProps<TDocument extends PHDocument> = EditorProps<TDocument> & EditorStoryArgs<TDocument>;
+export type EditorStoryComponent<TDocument extends PHDocument> = (props: EditorStoryProps<TDocument>) => React.JSX.Element;
+export type DocumentStory<TDocument extends PHDocument> = StoryObj<EditorStoryComponent<TDocument>>;
+export declare function createDocumentStory<TDocument extends PHDocument>(Editor: EditorStoryComponent<TDocument>, reducer: Reducer<TDocument>, initialState: Partial<ExtendedState<PartialState<GlobalStateFromDocument<TDocument>>, PartialState<LocalStateFromDocument<TDocument>>>>, additionalStoryArgs?: EditorStoryArgs<TDocument>, decorators?: Decorator<EditorStoryProps<TDocument>>[]): {
+    meta: Meta<typeof Editor>;
+    CreateDocumentStory: DocumentStory<TDocument>;
+};
+//# sourceMappingURL=storybook.d.ts.map

package/dist/editor-utils/storybook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook.d.ts","sourceRoot":"","sources":["../../editor-utils/storybook.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAEL,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,uBAAuB,EACvB,sBAAsB,EACtB,UAAU,EACV,YAAY,EACZ,OAAO,EAER,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,MAAM,eAAe,CAAC,SAAS,SAAS,UAAU,IAAI,OAAO,CAAC;IAClE,0BAA0B,EAAE,OAAO,CAAC;IACpC,wBAAwB,EAAE,OAAO,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,yBAAyB,CAAC,EAAE;QAC1B,oBAAoB,EAAE,MAAM,CAAC;QAC7B,uBAAuB,EAAE,CAAC,CACxB,QAAQ,EAAE,SAAS,KAChB,kBAAkB,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;KACvC,CAAC;CACH,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,CAAC,SAAS,SAAS,UAAU,IACvD,WAAW,CAAC,SAAS,CAAC,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAEtD,MAAM,MAAM,oBAAoB,CAAC,SAAS,SAAS,UAAU,IAAI,CAC/D,KAAK,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAC/B,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;AAEvB,MAAM,MAAM,aAAa,CAAC,SAAS,SAAS,UAAU,IAAI,QAAQ,CAChE,oBAAoB,CAAC,SAAS,CAAC,CAChC,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,SAAS,SAAS,UAAU,EAC9D,MAAM,EAAE,oBAAoB,CAAC,SAAS,CAAC,EACvC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,EAC3B,YAAY,EAAE,OAAO,CACnB,aAAa,CACX,YAAY,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC,EAChD,YAAY,CAAC,sBAAsB,CAAC,SAAS,CAAC,CAAC,CAChD,CACF,EACD,mBAAmB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,EAChD,UAAU,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,EAAE,GACpD;IACD,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAAC,CAAC;IAC1B,mBAAmB,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CAC/C,CAwIA"}

package/dist/editor-utils/storybook.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDocumentReducer } from "#editor-utils/reducer";
+import { useArgs, useChannel } from "@storybook/preview-api";
+import { baseCreateDocument, } from "document-model";
+import React, { useState } from "react";
+import { useInterval } from "usehooks-ts";
+export function createDocumentStory(Editor, reducer, initialState, additionalStoryArgs, decorators) {
+    const meta = {
+        component: Editor,
+        decorators: [
+            (Story, { args }) => {
+                const darkTheme = args.context.theme === "dark";
+                return (_jsx("div", { style: {
+                        padding: "0",
+                        height: "100vh",
+                        color: darkTheme ? "white" : "black",
+                        backgroundColor: darkTheme ? "#1A1D1F" : "white",
+                    }, children: _jsx(Story, {}) }));
+            },
+            (Story, { args }) => {
+                const [, setArgs] = useArgs();
+                const emit = useChannel({
+                    DOCUMENT: (document) => {
+                        setArgs({ document });
+                    },
+                });
+                return _jsx(Story, { emit: emit });
+            },
+            ...(decorators ?? []),
+        ],
+        render: function Render(args) {
+            const [error, setError] = useState();
+            const emit = useChannel({});
+            const [document, _dispatch] = useDocumentReducer(reducer, args.document, (error) => {
+                console.error(error);
+                setError(error);
+            });
+            function dispatch(action) {
+                const context = {};
+                if (args.context.user) {
+                    context.signer = {
+                        user: {
+                            address: args.context.user.address,
+                            networkId: args.context.user.networkId,
+                            chainId: args.context.user.chainId,
+                        },
+                        app: {
+                            name: "storybook",
+                            key: "storybook",
+                        },
+                        signatures: [],
+                    };
+                }
+                return _dispatch({
+                    ...action,
+                    context,
+                });
+            }
+            //  resets the budget state in the reducer when the prop changes
+            React.useEffect(() => {
+                if (document) {
+                    emit("DOCUMENT", document);
+                }
+                setError(undefined);
+            }, [document, emit]);
+            useInterval(() => {
+                if (args.simulateBackgroundUpdates) {
+                    const { backgroundUpdateActions } = args.simulateBackgroundUpdates;
+                    backgroundUpdateActions.forEach((createAction) => {
+                        dispatch(createAction(document));
+                    });
+                }
+            }, args.simulateBackgroundUpdates?.backgroundUpdateRate ?? null);
+            return (_jsx(Editor, { ...args, dispatch: dispatch, document: document, error: error }));
+        },
+        argTypes: {
+            document: {
+                control: "object",
+            },
+            dispatch: {
+                table: {
+                    disable: true,
+                },
+            },
+            context: {
+                theme: {
+                    name: "Theme",
+                    options: ["light", "dark"],
+                    defaultValue: "light",
+                    control: "inline-radio",
+                },
+                user: {
+                    control: "object",
+                },
+            },
+        },
+    };
+    const CreateDocumentStory = {
+        name: "New document",
+        args: {
+            document: baseCreateDocument(initialState),
+            context: {
+                theme: "light",
+                user: {
+                    address: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
+                    networkId: "eip155",
+                    chainId: 1,
+                    ens: {
+                        name: "vitalik.eth",
+                        avatarUrl: "https://ipfs.io/ipfs/QmSP4nq9fnN9dAiCj42ug9Wa79rqmQerZXZch82VqpiH7U/image.gif",
+                    },
+                },
+            },
+            ...additionalStoryArgs,
+        },
+    };
+    return { meta, CreateDocumentStory };
+}