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

Shows a graph of the current recoil state

import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useMemo } from "react";
import { css } from "@emotion/react";
const RecoilNodeList = ({ nodes, onSelectNode, }) => {
    return (_jsx("ul", { css: css `
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: auto;
        margin: 0;
        padding: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
        color: #333;
      `, children: nodes.map((node) => (_jsxs("li", { css: css `
            cursor: pointer;
            font-size: 1rem;
            word-break: break-all;
            display: flex;
            align-items: center;

            &::before {
              --size: 10px;
              content: "";
              width: var(--size);
              height: var(--size);
              border-radius: var(--size);
              background-color: ${node.fill};
              flex-shrink: 0;
              margin-right: 15px;
            }

            &:hover {
              text-decoration: underline;
            }
          `, onClick: () => onSelectNode({ id: node.id }), children: [node.label, " ", `(${node.data.type})`] }, node.id))) }));
};
export const FlowInfo = ({ nodes, edges, selectedNodeId, onSelectNode, onClearNode, }) => {
    const selectedNode = useMemo(() => nodes.find(({ id }) => id === selectedNodeId), [selectedNodeId, nodes]);
    const selectedNodeConnections = useMemo(() => {
        if (!selectedNode)
            return { parents: [], children: [] };
        return {
            parents: edges
                .filter(({ target }) => target === selectedNode.id)
                .flatMap(({ source }) => {
                const sourceNode = nodes.find(({ id }) => id === source);
                return sourceNode ? [sourceNode] : [];
            }),
            children: edges
                .filter(({ source }) => source === selectedNode.id)
                .flatMap(({ target }) => {
                const targetNode = nodes.find(({ id }) => id === target);
                return targetNode ? [targetNode] : [];
            }),
        };
    }, [selectedNode]);
    return (_jsxs("div", { css: css `
        aspect-ratio: 1 / 1;
        background: white;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      `, children: [_jsxs("div", { css: css `
          font-size: 1.25rem;
          width: 100%;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          padding: 10px;
        `, children: [selectedNode && (_jsx("div", { role: "button", onClick: onClearNode, css: css `
              font-size: 0.875rem;
              opacity: 0.8;
              cursor: pointer;
              margin-bottom: 2px;
              &:hover {
                text-decoration: underline;
              }
            `, children: "< Atoms & Selectors" })), selectedNode ? (_jsxs("span", { css: css `
              word-break: break-all;
            `, children: [`${selectedNode.data.type === "atom" ? "Atom" : "Selector"}: `, _jsx("b", { children: selectedNode.label })] })) : ("Atoms & Selectors")] }), !selectedNodeId && (_jsx(RecoilNodeList, { nodes: nodes, onSelectNode: onSelectNode })), selectedNode && (_jsxs("div", { css: css `
            padding: 12px;
            display: flex;
            flex-direction: column;
            overflow: auto;
            gap: 12px;
          `, children: [_jsx("pre", { css: css `
              border: 1px solid rgba(0, 0, 0, 0.4);
              border-radius: 10px;
              margin: 0;
              word-break: break-word;
              background: #2b2b2b;
              color: white;
            `, children: JSON.stringify(selectedNode.data.contents, null, 2) }), _jsxs("div", { children: [selectedNode.data.lastUpdate < Infinity &&
                                `Last changed ${selectedNode.data.lastUpdate} snapshots ago`, selectedNode.data.lastUpdate >= Infinity &&
                                `Has never changed value`] }), _jsxs("div", { children: [_jsx("b", { children: "Parents:" }), _jsx(RecoilNodeList, { nodes: selectedNodeConnections.parents, onSelectNode: onSelectNode })] }), _jsxs("div", { children: [_jsx("b", { children: "Children:" }), _jsx(RecoilNodeList, { nodes: selectedNodeConnections.children, onSelectNode: onSelectNode })] })] }))] }));
};