storybook-addon-recoil-flow/dist/register.js

Shows a graph of the current recoil state

import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { addons, types } from "@storybook/manager-api";
import { AddonPanel } from "@storybook/components";
import { eightenRootedFlow } from "./sixteenEighteenShim";
import { useChannel } from "@storybook/manager-api";
// console.log("RV:", React.version)
const ADDON_ID = "recoil-flow";
const PANEL_ID = `${ADDON_ID}/recoil-flow`;
const FlowAddonPanel = ({ active }) => {
    const divRef = useRef(null);
    const [nodesAndEdges, setNodesAndEdges] = useState({ nodes: [], edges: [] });
    useChannel({
        "recoil-flow-changed": ({ nodes, edges, }) => {
            setNodesAndEdges({
                nodes,
                edges,
            });
        },
    }, []);
    useEffect(() => {
        window.postMessage(Object.assign({ name: "recoil-flow-changed" }, nodesAndEdges), "*");
    }, [nodesAndEdges]);
    useLayoutEffect(() => {
        if (!active)
            return;
        if (!divRef.current)
            throw new Error("No div to render into");
        const root = eightenRootedFlow(divRef.current);
        window.setTimeout(() => {
            window.postMessage(Object.assign({ name: "recoil-flow-changed" }, nodesAndEdges), "*");
        }, 0);
        return () => {
            root.unmount();
        };
    }, [active]);
    return (_jsx(AddonPanel, { active: Boolean(active), children: _jsx("div", { ref: divRef, style: { display: "contents" } }) }));
};
addons.register(ADDON_ID, (api) => {
    addons.add(PANEL_ID, {
        type: types.PANEL,
        title: "Recoil Flow",
        render: ({ active }) => (_jsx(FlowAddonPanel, { active: Boolean(active) })),
    });
});