roamjs-components 0.53.2 → 0.53.5

package/components/ServiceComponents.js

@@ -1,268 +1,268 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServiceDashboard = exports.MainStage = exports.TOKEN_STAGE = exports.NextButton = exports.useNextStage = exports.useGetMetadata = exports.useSetMetadata = exports.usePageUid = exports.runService = exports.useAuthenticatedAxiosDelete = exports.useAuthenticatedAxiosPut = exports.useAuthenticatedAxiosPost = exports.useAuthenticatedAxiosGet = exports.useFieldVals = exports.useField = exports.useIsFieldSet = exports.isFieldInTree = exports.SERVICE_GUIDE_HIGHLIGHT = void 0;
-const tslib_1 = require("tslib");
-const core_1 = require("@blueprintjs/core");
-const axios_1 = (0, tslib_1.__importDefault)(require("axios"));
-const react_1 = (0, tslib_1.__importStar)(require("react"));
-const react_dom_1 = (0, tslib_1.__importDefault)(require("react-dom"));
-const getRenderRoot_1 = (0, tslib_1.__importDefault)(require("../util/getRenderRoot"));
-const idToTitle_1 = (0, tslib_1.__importDefault)(require("../util/idToTitle"));
-const toFlexRegex_1 = (0, tslib_1.__importDefault)(require("../util/toFlexRegex"));
-const setInputSetting_1 = (0, tslib_1.__importDefault)(require("../util/setInputSetting"));
-const getToken_1 = (0, tslib_1.__importDefault)(require("../util/getToken"));
-const dom_1 = require("../dom");
-const getBasicTreeByParentUid_1 = (0, tslib_1.__importDefault)(require("../queries/getBasicTreeByParentUid"));
-const getPageUidByPageTitle_1 = (0, tslib_1.__importDefault)(require("../queries/getPageUidByPageTitle"));
-const localStorageGet_1 = (0, tslib_1.__importDefault)(require("../util/localStorageGet"));
-const localStorageRemove_1 = (0, tslib_1.__importDefault)(require("../util/localStorageRemove"));
-const localStorageSet_1 = (0, tslib_1.__importDefault)(require("../util/localStorageSet"));
-const writes_1 = require("../writes");
-const getAuthorizationHeader_1 = (0, tslib_1.__importDefault)(require("../util/getAuthorizationHeader"));
-exports.SERVICE_GUIDE_HIGHLIGHT = "3px dashed yellowgreen";
-const toCamel = (service) => service
-    .split("-")
-    .map((s, i) => i === 0 ? s : `${s.substring(0, 1).toUpperCase()}${s.substring(1)}`)
-    .join("");
-const isFieldInTree = (field = "$^") => (tree) => tree.some((t) => new RegExp(field, "i").test(t.text));
-exports.isFieldInTree = isFieldInTree;
-const useIsFieldSet = (field) => {
-    const uid = (0, exports.usePageUid)();
-    return (0, exports.isFieldInTree)(field)((0, getBasicTreeByParentUid_1.default)(uid));
-};
-exports.useIsFieldSet = useIsFieldSet;
-const useField = (field) => {
-    var _a, _b, _c;
-    const pageUid = (0, exports.usePageUid)();
-    return (((_c = (_b = (_a = (0, getBasicTreeByParentUid_1.default)(pageUid).find((t) => (0, toFlexRegex_1.default)(field).test(t.text))) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.text) || "");
-};
-exports.useField = useField;
-const useFieldVals = (field) => {
-    var _a;
-    const pageUid = (0, exports.usePageUid)();
-    return (((_a = (0, getBasicTreeByParentUid_1.default)(pageUid).find((t) => (0, toFlexRegex_1.default)(field).test(t.text))) === null || _a === void 0 ? void 0 : _a.children) || []).map((t) => t.text);
-};
-exports.useFieldVals = useFieldVals;
-const useAuthenticatedAxiosGet = () => {
-    const service = useService();
-    return (0, react_1.useCallback)((path) => axios_1.default.get(`${process.env.API_URL}/${path}`, {
-        headers: { Authorization: (0, getAuthorizationHeader_1.default)(service) },
-    }), [service]);
-};
-exports.useAuthenticatedAxiosGet = useAuthenticatedAxiosGet;
-const useAuthenticatedAxiosPost = () => {
-    const service = useService();
-    return (0, react_1.useCallback)((path, data) => axios_1.default.post(`${process.env.API_URL}/${path}`, data || {}, {
-        headers: { Authorization: (0, getAuthorizationHeader_1.default)(service) },
-    }), []);
-};
-exports.useAuthenticatedAxiosPost = useAuthenticatedAxiosPost;
-const useAuthenticatedAxiosPut = () => {
-    const service = useService();
-    return (0, react_1.useCallback)((path, data) => axios_1.default.put(`${process.env.API_URL}/${path}`, data || {}, {
-        headers: { Authorization: (0, getAuthorizationHeader_1.default)(service) },
-    }), []);
-};
-exports.useAuthenticatedAxiosPut = useAuthenticatedAxiosPut;
-const useAuthenticatedAxiosDelete = () => {
-    const service = useService();
-    return (0, react_1.useCallback)((path) => axios_1.default.delete(`${process.env.API_URL}/${path}`, {
-        headers: { Authorization: (0, getAuthorizationHeader_1.default)(service) },
-    }), []);
-};
-exports.useAuthenticatedAxiosDelete = useAuthenticatedAxiosDelete;
-const runService = ({ id, Dashboard, }) => {
-    const title = `roam/js/${id}`;
-    (0, dom_1.createPageTitleObserver)({
-        title,
-        callback: (d) => {
-            var _a;
-            const parent = document.createElement("div");
-            parent.id = `roamjs-${id}-dashboard`;
-            const child = d.firstElementChild;
-            if (child) {
-                const ref = (_a = child.firstElementChild) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
-                if (ref) {
-                    child.insertBefore(parent, ref);
-                    react_dom_1.default.render(react_1.default.createElement(Dashboard, null), parent);
-                    window.addEventListener("hashchange", () => react_dom_1.default.unmountComponentAtNode(parent), { once: true });
-                }
-            }
-        },
-    });
-    if (!(0, getPageUidByPageTitle_1.default)(title)) {
-        const root = (0, getRenderRoot_1.default)(id);
-        react_dom_1.default.render(react_1.default.createElement(core_1.Alert, { isOpen: true, onConfirm: () => {
-                const tokenField = `roamjs${toCamel(id)}Token`;
-                const tokenValue = window[tokenField];
-                delete window[tokenField];
-                (0, writes_1.createPage)({
-                    title,
-                    tree: [
-                        tokenValue
-                            ? {
-                                text: "token",
-                                children: [
-                                    {
-                                        text: tokenValue,
-                                        children: [],
-                                    },
-                                ],
-                            }
-                            : { text: " " },
-                    ],
-                }).then((uid) => {
-                    window.roamAlphaAPI.ui.mainWindow.openPage({
-                        page: { uid },
-                    });
-                    react_dom_1.default.unmountComponentAtNode(root);
-                    root.remove();
-                });
-            } },
-            react_1.default.createElement("h4", null,
-                "Welcome to RoamJS ",
-                (0, idToTitle_1.default)(id),
-                "!"),
-            react_1.default.createElement("p", null,
-                "Click OK to create a ",
-                react_1.default.createElement("code", null, title),
-                " page and start using the service.")), root);
-    }
-};
-exports.runService = runService;
-const ServiceContext = react_1.default.createContext({
-    pageUid: "UNSET-UID",
-    getStage: () => () => react_1.default.createElement("div", null),
-    service: "service",
-    settings: [],
-    metadata: {},
-});
-const useService = () => (0, react_1.useContext)(ServiceContext).service;
-const usePageUid = () => (0, react_1.useContext)(ServiceContext).pageUid;
-exports.usePageUid = usePageUid;
-const useSetMetadata = (k) => {
-    const { metadata } = (0, react_1.useContext)(ServiceContext);
-    return (v) => {
-        metadata[k] = v;
-    };
-};
-exports.useSetMetadata = useSetMetadata;
-const useGetMetadata = (k) => (0, react_1.useContext)(ServiceContext).metadata[k];
-exports.useGetMetadata = useGetMetadata;
-const useNextStage = (
-// eslint-disable-next-line @typescript-eslint/ban-types
-openPanel) => {
-    const getStage = (0, react_1.useContext)(ServiceContext).getStage;
-    return (0, react_1.useCallback)(() => setTimeout(() => openPanel({
-        renderPanel: getStage(),
-    }), 1), [getStage, openPanel]);
-};
-exports.useNextStage = useNextStage;
-const NextButton = ({ disabled = false, onClick, }) => (react_1.default.createElement(core_1.Button, { onClick: onClick, intent: core_1.Intent.PRIMARY, disabled: disabled, style: { maxWidth: 240 } }, "NEXT"));
-exports.NextButton = NextButton;
-const RequestTokenContent = ({ openPanel }) => {
-    const nextStage = (0, exports.useNextStage)(openPanel);
-    const pageUid = (0, exports.usePageUid)();
-    const service = useService();
-    const [value, setValue] = (0, react_1.useState)((0, getToken_1.default)(service));
-    const [useLocal, setUseLocal] = (0, react_1.useState)(!!(0, localStorageGet_1.default)(`token-${service}`));
-    const onChange = (0, react_1.useCallback)((e) => setValue(e.target.value), [setValue]);
-    const onSubmit = (0, react_1.useCallback)(() => {
-        if (useLocal) {
-            (0, localStorageSet_1.default)(`token-${service}`, value);
-            (0, setInputSetting_1.default)({ blockUid: pageUid, key: "token", value: "" });
-        }
-        else {
-            (0, localStorageRemove_1.default)(`token-${service}`);
-            (0, setInputSetting_1.default)({ blockUid: pageUid, key: "token", value });
-        }
-        nextStage();
-    }, [value, nextStage, pageUid, useLocal]);
-    const onKeyDown = (0, react_1.useCallback)((e) => {
-        if (e.key === "Enter" &&
-            !e.shiftKey &&
-            !e.altKey &&
-            !e.metaKey &&
-            !e.ctrlKey &&
-            value) {
-            onSubmit();
-        }
-    }, [onSubmit]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.Label, null,
-            "RoamJS ",
-            (0, idToTitle_1.default)(service),
-            " Token",
-            react_1.default.createElement(core_1.InputGroup, { value: value, onChange: onChange, onKeyDown: onKeyDown })),
-        react_1.default.createElement(core_1.Checkbox, { label: "Store Locally", checked: useLocal, onChange: (e) => setUseLocal(e.target.checked) }),
-        react_1.default.createElement(exports.NextButton, { onClick: onSubmit, disabled: !value })));
-};
-const SettingsContent = ({ openPanel }) => {
-    const { settings, getStage } = (0, react_1.useContext)(ServiceContext);
-    return (react_1.default.createElement("div", null, settings.map((s) => (react_1.default.createElement("div", { style: { margin: 8 }, key: s },
-        react_1.default.createElement(core_1.Button, { text: s, rightIcon: "arrow-right", onClick: () => openPanel({
-                renderPanel: getStage(s),
-            }), style: {
-                minWidth: 180,
-                display: "flex",
-                justifyContent: "space-between",
-            } }))))));
-};
-exports.TOKEN_STAGE = {
-    check: (_, service) => !!(0, getToken_1.default)(service),
-    component: RequestTokenContent,
-    setting: "Token",
-};
-const MainStage = (Content) => ({
-    isMain: true,
-    component: ((props) => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Content, Object.assign({}, props)),
-        react_1.default.createElement(core_1.Button, { minimal: true, icon: "wrench", onClick: () => props.openPanel({
-                renderPanel: SettingsContent,
-            }), style: { position: "absolute", top: -40, right: 8 } })))),
-});
-exports.MainStage = MainStage;
-const ServiceDashboard = ({ service, stages }) => {
-    const title = `roam/js/${service}`;
-    const pageUid = (0, react_1.useMemo)(() => (0, getPageUidByPageTitle_1.default)(title), [title]);
-    const mainIndex = (0, react_1.useMemo)(() => stages.findIndex((s) => s.isMain), [stages]);
-    const [progress, setProgress] = (0, react_1.useState)(0);
-    const [showProgress, setShowProgress] = (0, react_1.useState)(false);
-    const getStage = (0, react_1.useCallback)((setting) => {
-        if (setting) {
-            const stage = stages.find((s) => s.setting === setting);
-            if (stage) {
-                return stage.component;
-            }
-        }
-        const tree = (0, getBasicTreeByParentUid_1.default)(pageUid);
-        const index = stages.findIndex((s) => s.check
-            ? !s.check(tree, service)
-            : s.isMain || !(0, exports.isFieldInTree)(s.setting)(tree));
-        setProgress(index / mainIndex);
-        if (index < mainIndex) {
-            setShowProgress(true);
-        }
-        return stages.slice(index)[0].component;
-    }, [pageUid, stages, setProgress, setShowProgress, service]);
-    const settings = (0, react_1.useMemo)(() => stages
-        .map((s) => s.setting)
-        .filter((s) => !!s)
-        .map((s) => s), [stages]);
-    const renderPanel = (0, react_1.useMemo)(getStage, [getStage]);
-    (0, react_1.useEffect)(() => {
-        if (progress === 1) {
-            setTimeout(() => setShowProgress(false), 3000);
-        }
-    }, [progress, setShowProgress]);
-    const [hideBlocks, setHideBlocks] = (0, react_1.useState)(true);
-    const showBlocks = (0, react_1.useCallback)(() => setHideBlocks(false), [setHideBlocks]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.Card, null,
-            react_1.default.createElement("h4", { style: { padding: 4 } },
-                (0, idToTitle_1.default)(service),
-                " Dashboard"),
-            react_1.default.createElement(ServiceContext.Provider, { value: { getStage, pageUid, service, settings, metadata: {} } },
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServiceDashboard = exports.MainStage = exports.TOKEN_STAGE = exports.NextButton = exports.useNextStage = exports.useGetMetadata = exports.useSetMetadata = exports.usePageUid = exports.runService = exports.useAuthenticatedAxiosDelete = exports.useAuthenticatedAxiosPut = exports.useAuthenticatedAxiosPost = exports.useAuthenticatedAxiosGet = exports.useFieldVals = exports.useField = exports.useIsFieldSet = exports.isFieldInTree = exports.SERVICE_GUIDE_HIGHLIGHT = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@blueprintjs/core");
+const axios_1 = (0, tslib_1.__importDefault)(require("axios"));
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const react_dom_1 = (0, tslib_1.__importDefault)(require("react-dom"));
+const getRenderRoot_1 = (0, tslib_1.__importDefault)(require("../util/getRenderRoot"));
+const idToTitle_1 = (0, tslib_1.__importDefault)(require("../util/idToTitle"));
+const toFlexRegex_1 = (0, tslib_1.__importDefault)(require("../util/toFlexRegex"));
+const setInputSetting_1 = (0, tslib_1.__importDefault)(require("../util/setInputSetting"));
+const getToken_1 = (0, tslib_1.__importDefault)(require("../util/getToken"));
+const dom_1 = require("../dom");
+const getBasicTreeByParentUid_1 = (0, tslib_1.__importDefault)(require("../queries/getBasicTreeByParentUid"));
+const getPageUidByPageTitle_1 = (0, tslib_1.__importDefault)(require("../queries/getPageUidByPageTitle"));
+const localStorageGet_1 = (0, tslib_1.__importDefault)(require("../util/localStorageGet"));
+const localStorageRemove_1 = (0, tslib_1.__importDefault)(require("../util/localStorageRemove"));
+const localStorageSet_1 = (0, tslib_1.__importDefault)(require("../util/localStorageSet"));
+const writes_1 = require("../writes");
+const getAuthorizationHeader_1 = (0, tslib_1.__importDefault)(require("../util/getAuthorizationHeader"));
+exports.SERVICE_GUIDE_HIGHLIGHT = "3px dashed yellowgreen";
+const toCamel = (service) => service
+    .split("-")
+    .map((s, i) => i === 0 ? s : `${s.substring(0, 1).toUpperCase()}${s.substring(1)}`)
+    .join("");
+const isFieldInTree = (field = "$^") => (tree) => tree.some((t) => new RegExp(field, "i").test(t.text));
+exports.isFieldInTree = isFieldInTree;
+const useIsFieldSet = (field) => {
+    const uid = (0, exports.usePageUid)();
+    return (0, exports.isFieldInTree)(field)((0, getBasicTreeByParentUid_1.default)(uid));
+};
+exports.useIsFieldSet = useIsFieldSet;
+const useField = (field) => {
+    var _a, _b, _c;
+    const pageUid = (0, exports.usePageUid)();
+    return (((_c = (_b = (_a = (0, getBasicTreeByParentUid_1.default)(pageUid).find((t) => (0, toFlexRegex_1.default)(field).test(t.text))) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.text) || "");
+};
+exports.useField = useField;
+const useFieldVals = (field) => {
+    var _a;
+    const pageUid = (0, exports.usePageUid)();
+    return (((_a = (0, getBasicTreeByParentUid_1.default)(pageUid).find((t) => (0, toFlexRegex_1.default)(field).test(t.text))) === null || _a === void 0 ? void 0 : _a.children) || []).map((t) => t.text);
+};
+exports.useFieldVals = useFieldVals;
+const useAuthenticatedAxiosGet = () => {
+    const service = useService();
+    return (0, react_1.useCallback)((path) => axios_1.default.get(`${process.env.API_URL}/${path}`, {
+        headers: { Authorization: (0, getAuthorizationHeader_1.default)(service) },
+    }), [service]);
+};
+exports.useAuthenticatedAxiosGet = useAuthenticatedAxiosGet;
+const useAuthenticatedAxiosPost = () => {
+    const service = useService();
+    return (0, react_1.useCallback)((path, data) => axios_1.default.post(`${process.env.API_URL}/${path}`, data || {}, {
+        headers: { Authorization: (0, getAuthorizationHeader_1.default)(service) },
+    }), []);
+};
+exports.useAuthenticatedAxiosPost = useAuthenticatedAxiosPost;
+const useAuthenticatedAxiosPut = () => {
+    const service = useService();
+    return (0, react_1.useCallback)((path, data) => axios_1.default.put(`${process.env.API_URL}/${path}`, data || {}, {
+        headers: { Authorization: (0, getAuthorizationHeader_1.default)(service) },
+    }), []);
+};
+exports.useAuthenticatedAxiosPut = useAuthenticatedAxiosPut;
+const useAuthenticatedAxiosDelete = () => {
+    const service = useService();
+    return (0, react_1.useCallback)((path) => axios_1.default.delete(`${process.env.API_URL}/${path}`, {
+        headers: { Authorization: (0, getAuthorizationHeader_1.default)(service) },
+    }), []);
+};
+exports.useAuthenticatedAxiosDelete = useAuthenticatedAxiosDelete;
+const runService = ({ id, Dashboard, }) => {
+    const title = `roam/js/${id}`;
+    (0, dom_1.createPageTitleObserver)({
+        title,
+        callback: (d) => {
+            var _a;
+            const parent = document.createElement("div");
+            parent.id = `roamjs-${id}-dashboard`;
+            const child = d.firstElementChild;
+            if (child) {
+                const ref = (_a = child.firstElementChild) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+                if (ref) {
+                    child.insertBefore(parent, ref);
+                    react_dom_1.default.render(react_1.default.createElement(Dashboard, null), parent);
+                    window.addEventListener("hashchange", () => react_dom_1.default.unmountComponentAtNode(parent), { once: true });
+                }
+            }
+        },
+    });
+    if (!(0, getPageUidByPageTitle_1.default)(title)) {
+        const root = (0, getRenderRoot_1.default)(id);
+        react_dom_1.default.render(react_1.default.createElement(core_1.Alert, { isOpen: true, onConfirm: () => {
+                const tokenField = `roamjs${toCamel(id)}Token`;
+                const tokenValue = window[tokenField];
+                delete window[tokenField];
+                (0, writes_1.createPage)({
+                    title,
+                    tree: [
+                        tokenValue
+                            ? {
+                                text: "token",
+                                children: [
+                                    {
+                                        text: tokenValue,
+                                        children: [],
+                                    },
+                                ],
+                            }
+                            : { text: " " },
+                    ],
+                }).then((uid) => {
+                    window.roamAlphaAPI.ui.mainWindow.openPage({
+                        page: { uid },
+                    });
+                    react_dom_1.default.unmountComponentAtNode(root);
+                    root.remove();
+                });
+            } },
+            react_1.default.createElement("h4", null,
+                "Welcome to RoamJS ",
+                (0, idToTitle_1.default)(id),
+                "!"),
+            react_1.default.createElement("p", null,
+                "Click OK to create a ",
+                react_1.default.createElement("code", null, title),
+                " page and start using the service.")), root);
+    }
+};
+exports.runService = runService;
+const ServiceContext = react_1.default.createContext({
+    pageUid: "UNSET-UID",
+    getStage: () => () => react_1.default.createElement("div", null),
+    service: "service",
+    settings: [],
+    metadata: {},
+});
+const useService = () => (0, react_1.useContext)(ServiceContext).service;
+const usePageUid = () => (0, react_1.useContext)(ServiceContext).pageUid;
+exports.usePageUid = usePageUid;
+const useSetMetadata = (k) => {
+    const { metadata } = (0, react_1.useContext)(ServiceContext);
+    return (v) => {
+        metadata[k] = v;
+    };
+};
+exports.useSetMetadata = useSetMetadata;
+const useGetMetadata = (k) => (0, react_1.useContext)(ServiceContext).metadata[k];
+exports.useGetMetadata = useGetMetadata;
+const useNextStage = (
+// eslint-disable-next-line @typescript-eslint/ban-types
+openPanel) => {
+    const getStage = (0, react_1.useContext)(ServiceContext).getStage;
+    return (0, react_1.useCallback)(() => setTimeout(() => openPanel({
+        renderPanel: getStage(),
+    }), 1), [getStage, openPanel]);
+};
+exports.useNextStage = useNextStage;
+const NextButton = ({ disabled = false, onClick, }) => (react_1.default.createElement(core_1.Button, { onClick: onClick, intent: core_1.Intent.PRIMARY, disabled: disabled, style: { maxWidth: 240 } }, "NEXT"));
+exports.NextButton = NextButton;
+const RequestTokenContent = ({ openPanel }) => {
+    const nextStage = (0, exports.useNextStage)(openPanel);
+    const pageUid = (0, exports.usePageUid)();
+    const service = useService();
+    const [value, setValue] = (0, react_1.useState)((0, getToken_1.default)(service));
+    const [useLocal, setUseLocal] = (0, react_1.useState)(!!(0, localStorageGet_1.default)(`token-${service}`));
+    const onChange = (0, react_1.useCallback)((e) => setValue(e.target.value), [setValue]);
+    const onSubmit = (0, react_1.useCallback)(() => {
+        if (useLocal) {
+            (0, localStorageSet_1.default)(`token-${service}`, value);
+            (0, setInputSetting_1.default)({ blockUid: pageUid, key: "token", value: "" });
+        }
+        else {
+            (0, localStorageRemove_1.default)(`token-${service}`);
+            (0, setInputSetting_1.default)({ blockUid: pageUid, key: "token", value });
+        }
+        nextStage();
+    }, [value, nextStage, pageUid, useLocal]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === "Enter" &&
+            !e.shiftKey &&
+            !e.altKey &&
+            !e.metaKey &&
+            !e.ctrlKey &&
+            value) {
+            onSubmit();
+        }
+    }, [onSubmit]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.Label, null,
+            "RoamJS ",
+            (0, idToTitle_1.default)(service),
+            " Token",
+            react_1.default.createElement(core_1.InputGroup, { value: value, onChange: onChange, onKeyDown: onKeyDown })),
+        react_1.default.createElement(core_1.Checkbox, { label: "Store Locally", checked: useLocal, onChange: (e) => setUseLocal(e.target.checked) }),
+        react_1.default.createElement(exports.NextButton, { onClick: onSubmit, disabled: !value })));
+};
+const SettingsContent = ({ openPanel }) => {
+    const { settings, getStage } = (0, react_1.useContext)(ServiceContext);
+    return (react_1.default.createElement("div", null, settings.map((s) => (react_1.default.createElement("div", { style: { margin: 8 }, key: s },
+        react_1.default.createElement(core_1.Button, { text: s, rightIcon: "arrow-right", onClick: () => openPanel({
+                renderPanel: getStage(s),
+            }), style: {
+                minWidth: 180,
+                display: "flex",
+                justifyContent: "space-between",
+            } }))))));
+};
+exports.TOKEN_STAGE = {
+    check: (_, service) => !!(0, getToken_1.default)(service),
+    component: RequestTokenContent,
+    setting: "Token",
+};
+const MainStage = (Content) => ({
+    isMain: true,
+    component: ((props) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Content, Object.assign({}, props)),
+        react_1.default.createElement(core_1.Button, { minimal: true, icon: "wrench", onClick: () => props.openPanel({
+                renderPanel: SettingsContent,
+            }), style: { position: "absolute", top: -40, right: 8 } })))),
+});
+exports.MainStage = MainStage;
+const ServiceDashboard = ({ service, stages }) => {
+    const title = `roam/js/${service}`;
+    const pageUid = (0, react_1.useMemo)(() => (0, getPageUidByPageTitle_1.default)(title), [title]);
+    const mainIndex = (0, react_1.useMemo)(() => stages.findIndex((s) => s.isMain), [stages]);
+    const [progress, setProgress] = (0, react_1.useState)(0);
+    const [showProgress, setShowProgress] = (0, react_1.useState)(false);
+    const getStage = (0, react_1.useCallback)((setting) => {
+        if (setting) {
+            const stage = stages.find((s) => s.setting === setting);
+            if (stage) {
+                return stage.component;
+            }
+        }
+        const tree = (0, getBasicTreeByParentUid_1.default)(pageUid);
+        const index = stages.findIndex((s) => s.check
+            ? !s.check(tree, service)
+            : s.isMain || !(0, exports.isFieldInTree)(s.setting)(tree));
+        setProgress(index / mainIndex);
+        if (index < mainIndex) {
+            setShowProgress(true);
+        }
+        return stages.slice(index)[0].component;
+    }, [pageUid, stages, setProgress, setShowProgress, service]);
+    const settings = (0, react_1.useMemo)(() => stages
+        .map((s) => s.setting)
+        .filter((s) => !!s)
+        .map((s) => s), [stages]);
+    const renderPanel = (0, react_1.useMemo)(getStage, [getStage]);
+    (0, react_1.useEffect)(() => {
+        if (progress === 1) {
+            setTimeout(() => setShowProgress(false), 3000);
+        }
+    }, [progress, setShowProgress]);
+    const [hideBlocks, setHideBlocks] = (0, react_1.useState)(true);
+    const showBlocks = (0, react_1.useCallback)(() => setHideBlocks(false), [setHideBlocks]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.Card, null,
+            react_1.default.createElement("h4", { style: { padding: 4 } },
+                (0, idToTitle_1.default)(service),
+                " Dashboard"),
+            react_1.default.createElement(ServiceContext.Provider, { value: { getStage, pageUid, service, settings, metadata: {} } },
                 react_1.default.createElement("style", null, `.roamjs-service-panel {
     position: relative;
     overflow-x: hidden;
@@ -285,18 +285,18 @@ const ServiceDashboard = ({ service, stages }) => {
   
   button.bp3-button.bp3-panel-stack-header-back {
     margin-left: 0;
-  }`),
-                react_1.default.createElement(core_1.PanelStack2, { initialPanel: {
-                        renderPanel,
-                    }, className: "roamjs-service-panel" }),
-                showProgress && (react_1.default.createElement(core_1.ProgressBar, { value: progress, animate: false, intent: core_1.Intent.PRIMARY })))),
-        hideBlocks && (react_1.default.createElement(core_1.Card, null,
-            react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
-                react_1.default.createElement("h6", null, "Roam outline with config data is hidden by default."),
-                react_1.default.createElement(core_1.Button, { minimal: true, icon: "small-cross", onClick: showBlocks, id: "roamjs-service-hide-blocks" })),
+  }`),
+                react_1.default.createElement(core_1.PanelStack2, { initialPanel: {
+                        renderPanel,
+                    }, className: "roamjs-service-panel" }),
+                showProgress && (react_1.default.createElement(core_1.ProgressBar, { value: progress, animate: false, intent: core_1.Intent.PRIMARY })))),
+        hideBlocks && (react_1.default.createElement(core_1.Card, null,
+            react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
+                react_1.default.createElement("h6", null, "Roam outline with config data is hidden by default."),
+                react_1.default.createElement(core_1.Button, { minimal: true, icon: "small-cross", onClick: showBlocks, id: "roamjs-service-hide-blocks" })),
             react_1.default.createElement("style", null, `.roam-article .rm-block-children {
     visibility: hidden;
-  }`)))));
-};
-exports.ServiceDashboard = ServiceDashboard;
+  }`)))));
+};
+exports.ServiceDashboard = ServiceDashboard;
 //# sourceMappingURL=ServiceComponents.js.map

package/components/SimpleAlert.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-declare type Props = {
-    content: string;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    externalLink?: boolean;
-};
-declare const SimpleAlert: ({ onClose, content, onConfirm, onCancel, externalLink, }: Props & {
-    onClose: () => void;
-}) => React.ReactElement;
-export declare const render: (props: Props) => () => void;
-export default SimpleAlert;
+import React from "react";
+declare type Props = {
+    content: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    externalLink?: boolean;
+};
+declare const SimpleAlert: ({ onClose, content, onConfirm, onCancel, externalLink, }: Props & {
+    onClose: () => void;
+}) => React.ReactElement;
+export declare const render: (props: Props) => () => void;
+export default SimpleAlert;