@blocklet/ui-react 2.9.81 → 2.9.83

package/es/@types/shims.d.ts

@@ -8,7 +8,6 @@ declare module '@arcblock/did-connect/*';
 declare module '@arcblock/did-connect/lib/Session';
 
 declare module 'is-url';
-declare module 'url-join';
 
 declare module '*.png';
 

package/es/ComponentInstaller/use-component-installed.js

@@ -1,6 +1,6 @@
 import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import urlJoin from 'url-join';
+import { joinURL } from 'ufo';
 
 const parseDidToSet = (did) => {
   if (typeof did === 'string') {
@@ -36,8 +36,8 @@ function useComponentInstalled({ did, onInstalled, onError }) {
   }, [optComponents, componentMountPoints, didKeys]);
 
   optComponents.forEach((item) => {
-    item.storeUrl = urlJoin(item.meta.homepage, 'blocklets', item.meta.did);
-    item.installUrl = urlJoin(
+    item.storeUrl = joinURL(item.meta.homepage, 'blocklets', item.meta.did);
+    item.installUrl = joinURL(
       window.blocklet.appUrl,
       AUTH_SERVICE_PREFIX,
       `/admin/components?install-component=${item.meta.did}`

package/es/ComponentManager/components/add-component.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+export default function AddComponent({ componentDid, resourceType, resourceDid, autoClose, onComplete, onClose, render, }: {
+    componentDid: string;
+    resourceType: string;
+    resourceDid: string;
+    autoClose: boolean;
+    onComplete: () => void;
+    onClose: () => void;
+    render?: ({ onClick, loading }: {
+        onClick: () => void;
+        loading: boolean;
+    }) => ReactElement;
+}): import("react").JSX.Element;

package/es/ComponentManager/components/add-component.js

@@ -0,0 +1,95 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import Button from "@arcblock/ux/lib/Button";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
+import { useMemoizedFn, useReactive } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { joinURL } from "ufo";
+import ResourceDialog from "./resource-dialog.js";
+import { translations } from "../libs/locales.js";
+export default function AddComponent({
+  componentDid,
+  resourceType,
+  resourceDid,
+  autoClose = true,
+  onComplete,
+  onClose,
+  render
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const currentState = useReactive({
+    loading: false,
+    showDialog: false
+  });
+  const baseUrl = new URL(
+    joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, "embed/resources", componentDid, "add"),
+    window.location.origin
+  );
+  baseUrl.searchParams.set("resourceDid", resourceDid);
+  baseUrl.searchParams.set("resourceType", resourceType);
+  baseUrl.searchParams.set("mode", "dialog");
+  baseUrl.searchParams.set("showFromUrl", "false");
+  baseUrl.searchParams.set("showResourcesSwitch", "false");
+  baseUrl.searchParams.set("enableRunBackground", "false");
+  const importUrl = baseUrl.pathname + baseUrl.search;
+  const handleClose = useMemoizedFn(() => {
+    currentState.showDialog = false;
+    onClose?.();
+  });
+  const handleComplete = useMemoizedFn(() => {
+    currentState.showDialog = false;
+    onComplete?.();
+  });
+  const handleOpen = useMemoizedFn(() => {
+    currentState.loading = true;
+    currentState.showDialog = true;
+  });
+  const handleLoad = useMemoizedFn(() => {
+    currentState.loading = false;
+  });
+  const handleIframeMessage = useMemoizedFn((event) => {
+    if (event?.data?.event === "component.installed" && event.data.componentDid === componentDid) {
+      if (autoClose || event.data.manual) {
+        handleComplete();
+      }
+    }
+  });
+  useEffect(() => {
+    if (currentState.showDialog) {
+      window.addEventListener("message", handleIframeMessage);
+    } else {
+      window.removeEventListener("message", handleIframeMessage);
+    }
+  }, [currentState.showDialog]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    render ? render({ onClick: handleOpen, loading: currentState.loading }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        color: "secondary",
+        type: "button",
+        className: "submit",
+        onClick: handleOpen,
+        loading: currentState.loading,
+        sx: { mr: 1, ml: 1 },
+        children: t("importResource")
+      },
+      "button"
+    ),
+    currentState.showDialog && /* @__PURE__ */ jsx(
+      ResourceDialog,
+      {
+        src: importUrl,
+        open: true,
+        loading: currentState.loading,
+        onClose: handleClose,
+        onComplete: handleComplete,
+        onLoad: handleLoad
+      }
+    )
+  ] });
+}

package/es/ComponentManager/components/check-component.d.ts

@@ -0,0 +1,2 @@
+import CheckComponent from '../../ComponentInstaller';
+export default CheckComponent;

package/es/ComponentManager/components/check-component.js

@@ -0,0 +1,2 @@
+import CheckComponent from "../../ComponentInstaller/index.js";
+export default CheckComponent;

package/es/ComponentManager/components/publish-component.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+export default function PublishComponent({ componentDid, onClose, render, }: {
+    componentDid: String;
+    onClose: () => void;
+    render?: ({ onClick, loading }: {
+        onClick: () => void;
+        loading: boolean;
+    }) => ReactElement;
+}): import("react").JSX.Element;

package/es/ComponentManager/components/publish-component.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Button from "@arcblock/ux/lib/Button";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from "@arcblock/ux/lib/Util/constant";
+import { useMemoizedFn, useReactive } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import ResourceDialog from "./resource-dialog.js";
+import { translations } from "../libs/locales.js";
+export default function PublishComponent({
+  componentDid,
+  onClose,
+  render
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const currentState = useReactive({
+    showDialog: false,
+    loading: false
+  });
+  const exportUrl = `${WELLKNOWN_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
+  const handleClose = useMemoizedFn(() => {
+    currentState.showDialog = false;
+    onClose?.();
+  });
+  const handleLoad = useMemoizedFn(() => {
+    currentState.loading = false;
+  });
+  const handleOpen = useMemoizedFn(() => {
+    currentState.loading = true;
+    currentState.showDialog = true;
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    render ? render({ onClick: handleOpen, loading: currentState.loading }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        color: "secondary",
+        type: "button",
+        className: "submit",
+        loading: currentState.loading,
+        onClick: handleOpen,
+        sx: { mr: 1, ml: 1 },
+        children: t("exportResource")
+      },
+      "button"
+    ),
+    currentState.showDialog && /* @__PURE__ */ jsx(ResourceDialog, { src: exportUrl, open: true, onClose: handleClose, onLoad: handleLoad, loading: currentState.loading })
+  ] });
+}

package/es/ComponentManager/components/resource-dialog.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export default function ResourceDialog({ src, open, loading, onClose, onComplete, onLoad, }: {
+    src: string;
+    open?: boolean;
+    loading?: boolean;
+    onLoad?: () => void;
+    onClose?: () => void;
+    onComplete?: () => void;
+}): import("react").JSX.Element | null;

package/es/ComponentManager/components/resource-dialog.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemoizedFn, useMount, useUnmount } from "ahooks";
+import { useRef } from "react";
+export default function ResourceDialog({
+  src,
+  open = false,
+  loading = true,
+  onClose = () => {
+  },
+  onComplete = () => {
+  },
+  onLoad = () => {
+  }
+}) {
+  const iframeRef = useRef(null);
+  const listener = useMemoizedFn((event) => {
+    if (open) {
+      if (event?.data?.event === "resourceDialog.close") {
+        onClose();
+      }
+      if (event?.data?.event === "resourceDialog.complete") {
+        onComplete();
+      }
+      if (event?.data?.event === "resourceDialog.loaded") {
+        onLoad();
+      }
+    }
+  });
+  useMount(() => {
+    window.addEventListener("message", listener);
+  });
+  useUnmount(() => {
+    window.removeEventListener("message", listener);
+  });
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ref: iframeRef,
+      src,
+      title: "Resource Dialog",
+      style: {
+        position: "fixed",
+        top: 0,
+        left: loading ? "-100vw" : 0,
+        width: "100vw",
+        height: "100vh",
+        zIndex: 9999,
+        backgroundColor: "transparent",
+        border: "none"
+      }
+    }
+  );
+}

package/es/ComponentManager/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PublishComponent } from './components/publish-component';
+export { default as AddComponent } from './components/add-component';
+export { default as CheckComponent } from './components/check-component';

package/es/ComponentManager/index.js

@@ -0,0 +1,3 @@
+export { default as PublishComponent } from "./components/publish-component.js";
+export { default as AddComponent } from "./components/add-component.js";
+export { default as CheckComponent } from "./components/check-component.js";

package/es/ComponentManager/libs/locales.d.ts

@@ -0,0 +1,10 @@
+export declare const translations: {
+    zh: {
+        importResource: string;
+        exportResource: string;
+    };
+    en: {
+        importResource: string;
+        exportResource: string;
+    };
+};

package/es/ComponentManager/libs/locales.js

@@ -0,0 +1,10 @@
+export const translations = {
+  zh: {
+    importResource: "\u5BFC\u5165",
+    exportResource: "\u5BFC\u51FA"
+  },
+  en: {
+    importResource: "Import",
+    exportResource: "Export"
+  }
+};

package/es/UserCenter/libs/utils.js

@@ -1,4 +1,4 @@
-import joinURL from "url-join";
+import { joinURL } from "ufo";
 import { createPassportSvg as _createPassportSvg } from "@arcblock/ux/lib/Util/passport";
 import { AUTH_SERVICE_PREFIX } from "@arcblock/ux/lib/Util/constant";
 export const formatAxiosError = (err) => {

package/es/index.d.ts

@@ -6,3 +6,4 @@ export { default as ComponentInstaller } from './ComponentInstaller';
 export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
 export * from './UserCenter';
 export * from './UserSessions';
+export * from './ComponentManager';

package/es/index.js

@@ -6,3 +6,4 @@ export { default as ComponentInstaller } from "./ComponentInstaller/index.js";
 export { default as useComponentInstaller } from "./ComponentInstaller/use-component-installed.js";
 export * from "./UserCenter/index.js";
 export * from "./UserSessions/index.js";
+export * from "./ComponentManager/index.js";

package/lib/@types/shims.d.ts

@@ -8,7 +8,6 @@ declare module '@arcblock/did-connect/*';
 declare module '@arcblock/did-connect/lib/Session';
 
 declare module 'is-url';
-declare module 'url-join';
 
 declare module '*.png';
 

package/lib/ComponentInstaller/use-component-installed.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _constant = require("@arcblock/did-connect/lib/constant");
 var _react = require("react");
-var _urlJoin = _interopRequireDefault(require("url-join"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ufo = require("ufo");
 const parseDidToSet = did => {
   if (typeof did === 'string') {
     return new Set(did.split(';;'));
@@ -50,8 +49,8 @@ function useComponentInstalled({
     return (componentMountPoints || []).find(item => didSet.has(item.did));
   }, [optComponents, componentMountPoints, didKeys]);
   optComponents.forEach(item => {
-    item.storeUrl = (0, _urlJoin.default)(item.meta.homepage, 'blocklets', item.meta.did);
-    item.installUrl = (0, _urlJoin.default)(window.blocklet.appUrl, _constant.AUTH_SERVICE_PREFIX, `/admin/components?install-component=${item.meta.did}`);
+    item.storeUrl = (0, _ufo.joinURL)(item.meta.homepage, 'blocklets', item.meta.did);
+    item.installUrl = (0, _ufo.joinURL)(window.blocklet.appUrl, _constant.AUTH_SERVICE_PREFIX, `/admin/components?install-component=${item.meta.did}`);
   });
   (0, _react.useEffect)(() => {
     const handle = event => {

package/lib/ComponentManager/components/add-component.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+export default function AddComponent({ componentDid, resourceType, resourceDid, autoClose, onComplete, onClose, render, }: {
+    componentDid: string;
+    resourceType: string;
+    resourceDid: string;
+    autoClose: boolean;
+    onComplete: () => void;
+    onClose: () => void;
+    render?: ({ onClick, loading }: {
+        onClick: () => void;
+        loading: boolean;
+    }) => ReactElement;
+}): import("react").JSX.Element;

package/lib/ComponentManager/components/add-component.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = AddComponent;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _constant = require("@arcblock/ux/lib/Util/constant");
+var _ahooks = require("ahooks");
+var _util = require("@arcblock/ux/lib/Locale/util");
+var _ufo = require("ufo");
+var _resourceDialog = _interopRequireDefault(require("./resource-dialog"));
+var _locales = require("../libs/locales");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function AddComponent({
+  componentDid,
+  resourceType,
+  resourceDid,
+  autoClose = true,
+  onComplete,
+  onClose,
+  render
+}) {
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
+    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  });
+  const currentState = (0, _ahooks.useReactive)({
+    loading: false,
+    showDialog: false
+  });
+  const baseUrl = new URL((0, _ufo.joinURL)(_constant.WELLKNOWN_SERVICE_PATH_PREFIX, "embed/resources", componentDid, "add"), window.location.origin);
+  baseUrl.searchParams.set("resourceDid", resourceDid);
+  baseUrl.searchParams.set("resourceType", resourceType);
+  baseUrl.searchParams.set("mode", "dialog");
+  baseUrl.searchParams.set("showFromUrl", "false");
+  baseUrl.searchParams.set("showResourcesSwitch", "false");
+  baseUrl.searchParams.set("enableRunBackground", "false");
+  const importUrl = baseUrl.pathname + baseUrl.search;
+  const handleClose = (0, _ahooks.useMemoizedFn)(() => {
+    currentState.showDialog = false;
+    onClose?.();
+  });
+  const handleComplete = (0, _ahooks.useMemoizedFn)(() => {
+    currentState.showDialog = false;
+    onComplete?.();
+  });
+  const handleOpen = (0, _ahooks.useMemoizedFn)(() => {
+    currentState.loading = true;
+    currentState.showDialog = true;
+  });
+  const handleLoad = (0, _ahooks.useMemoizedFn)(() => {
+    currentState.loading = false;
+  });
+  const handleIframeMessage = (0, _ahooks.useMemoizedFn)(event => {
+    if (event?.data?.event === "component.installed" && event.data.componentDid === componentDid) {
+      if (autoClose || event.data.manual) {
+        handleComplete();
+      }
+    }
+  });
+  (0, _react.useEffect)(() => {
+    if (currentState.showDialog) {
+      window.addEventListener("message", handleIframeMessage);
+    } else {
+      window.removeEventListener("message", handleIframeMessage);
+    }
+  }, [currentState.showDialog]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [render ? render({
+      onClick: handleOpen,
+      loading: currentState.loading
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
+      variant: "outlined",
+      color: "secondary",
+      type: "button",
+      className: "submit",
+      onClick: handleOpen,
+      loading: currentState.loading,
+      sx: {
+        mr: 1,
+        ml: 1
+      },
+      children: t("importResource")
+    }, "button"), currentState.showDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_resourceDialog.default, {
+      src: importUrl,
+      open: true,
+      loading: currentState.loading,
+      onClose: handleClose,
+      onComplete: handleComplete,
+      onLoad: handleLoad
+    })]
+  });
+}

package/lib/ComponentManager/components/check-component.d.ts

@@ -0,0 +1,2 @@
+import CheckComponent from '../../ComponentInstaller';
+export default CheckComponent;

package/lib/ComponentManager/components/check-component.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ComponentInstaller = _interopRequireDefault(require("../../ComponentInstaller"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+module.exports = _ComponentInstaller.default;

package/lib/ComponentManager/components/publish-component.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+export default function PublishComponent({ componentDid, onClose, render, }: {
+    componentDid: String;
+    onClose: () => void;
+    render?: ({ onClick, loading }: {
+        onClick: () => void;
+        loading: boolean;
+    }) => ReactElement;
+}): import("react").JSX.Element;

package/lib/ComponentManager/components/publish-component.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PublishComponent;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _constant = require("@arcblock/ux/lib/Util/constant");
+var _ahooks = require("ahooks");
+var _util = require("@arcblock/ux/lib/Locale/util");
+var _resourceDialog = _interopRequireDefault(require("./resource-dialog"));
+var _locales = require("../libs/locales");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function PublishComponent({
+  componentDid,
+  onClose,
+  render
+}) {
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
+    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  });
+  const currentState = (0, _ahooks.useReactive)({
+    showDialog: false,
+    loading: false
+  });
+  const exportUrl = `${_constant.WELLKNOWN_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
+  const handleClose = (0, _ahooks.useMemoizedFn)(() => {
+    currentState.showDialog = false;
+    onClose?.();
+  });
+  const handleLoad = (0, _ahooks.useMemoizedFn)(() => {
+    currentState.loading = false;
+  });
+  const handleOpen = (0, _ahooks.useMemoizedFn)(() => {
+    currentState.loading = true;
+    currentState.showDialog = true;
+  });
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [render ? render({
+      onClick: handleOpen,
+      loading: currentState.loading
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
+      variant: "outlined",
+      color: "secondary",
+      type: "button",
+      className: "submit",
+      loading: currentState.loading,
+      onClick: handleOpen,
+      sx: {
+        mr: 1,
+        ml: 1
+      },
+      children: t("exportResource")
+    }, "button"), currentState.showDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_resourceDialog.default, {
+      src: exportUrl,
+      open: true,
+      onClose: handleClose,
+      onLoad: handleLoad,
+      loading: currentState.loading
+    })]
+  });
+}

package/lib/ComponentManager/components/resource-dialog.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export default function ResourceDialog({ src, open, loading, onClose, onComplete, onLoad, }: {
+    src: string;
+    open?: boolean;
+    loading?: boolean;
+    onLoad?: () => void;
+    onClose?: () => void;
+    onComplete?: () => void;
+}): import("react").JSX.Element | null;

package/lib/ComponentManager/components/resource-dialog.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ResourceDialog;
+var _jsxRuntime = require("react/jsx-runtime");
+var _ahooks = require("ahooks");
+var _react = require("react");
+function ResourceDialog({
+  src,
+  open = false,
+  loading = true,
+  onClose = () => {},
+  onComplete = () => {},
+  onLoad = () => {}
+}) {
+  const iframeRef = (0, _react.useRef)(null);
+  const listener = (0, _ahooks.useMemoizedFn)(event => {
+    if (open) {
+      if (event?.data?.event === "resourceDialog.close") {
+        onClose();
+      }
+      if (event?.data?.event === "resourceDialog.complete") {
+        onComplete();
+      }
+      if (event?.data?.event === "resourceDialog.loaded") {
+        onLoad();
+      }
+    }
+  });
+  (0, _ahooks.useMount)(() => {
+    window.addEventListener("message", listener);
+  });
+  (0, _ahooks.useUnmount)(() => {
+    window.removeEventListener("message", listener);
+  });
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)("iframe", {
+    ref: iframeRef,
+    src,
+    title: "Resource Dialog",
+    style: {
+      position: "fixed",
+      top: 0,
+      left: loading ? "-100vw" : 0,
+      width: "100vw",
+      height: "100vh",
+      zIndex: 9999,
+      backgroundColor: "transparent",
+      border: "none"
+    }
+  });
+}

package/lib/ComponentManager/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PublishComponent } from './components/publish-component';
+export { default as AddComponent } from './components/add-component';
+export { default as CheckComponent } from './components/check-component';

package/lib/ComponentManager/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AddComponent", {
+  enumerable: true,
+  get: function () {
+    return _addComponent.default;
+  }
+});
+Object.defineProperty(exports, "CheckComponent", {
+  enumerable: true,
+  get: function () {
+    return _checkComponent.default;
+  }
+});
+Object.defineProperty(exports, "PublishComponent", {
+  enumerable: true,
+  get: function () {
+    return _publishComponent.default;
+  }
+});
+var _publishComponent = _interopRequireDefault(require("./components/publish-component"));
+var _addComponent = _interopRequireDefault(require("./components/add-component"));
+var _checkComponent = _interopRequireDefault(require("./components/check-component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/ComponentManager/libs/locales.d.ts

@@ -0,0 +1,10 @@
+export declare const translations: {
+    zh: {
+        importResource: string;
+        exportResource: string;
+    };
+    en: {
+        importResource: string;
+        exportResource: string;
+    };
+};

package/lib/ComponentManager/libs/locales.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translations = void 0;
+const translations = exports.translations = {
+  zh: {
+    importResource: "\u5BFC\u5165",
+    exportResource: "\u5BFC\u51FA"
+  },
+  en: {
+    importResource: "Import",
+    exportResource: "Export"
+  }
+};

package/lib/UserCenter/libs/utils.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatAxiosError = exports.createPassportSvg = void 0;
-var _urlJoin = _interopRequireDefault(require("url-join"));
+var _ufo = require("ufo");
 var _passport = require("@arcblock/ux/lib/Util/passport");
 var _constant = require("@arcblock/ux/lib/Util/constant");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const formatAxiosError = err => {
   const {
     response
@@ -20,6 +19,6 @@ const formatAxiosError = err => {
 exports.formatAxiosError = formatAxiosError;
 const createPassportSvg = props => (0, _passport.createPassportSvg)({
   ...props,
-  issuerAvatarUrl: (0, _urlJoin.default)(window.location.origin, _constant.AUTH_SERVICE_PREFIX, "/blocklet/logo")
+  issuerAvatarUrl: (0, _ufo.joinURL)(window.location.origin, _constant.AUTH_SERVICE_PREFIX, "/blocklet/logo")
 });
 exports.createPassportSvg = createPassportSvg;

package/lib/index.d.ts

@@ -6,3 +6,4 @@ export { default as ComponentInstaller } from './ComponentInstaller';
 export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
 export * from './UserCenter';
 export * from './UserSessions';
+export * from './ComponentManager';

package/lib/index.js

@@ -77,4 +77,16 @@ Object.keys(_UserSessions).forEach(function (key) {
     }
   });
 });
+var _ComponentManager = require("./ComponentManager");
+Object.keys(_ComponentManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ComponentManager[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ComponentManager[key];
+    }
+  });
+});
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.81",
+  "version": "2.9.83",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -62,8 +62,8 @@
     }
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.9.81",
-    "@arcblock/react-hooks": "^2.9.81",
+    "@arcblock/bridge": "^2.9.83",
+    "@arcblock/react-hooks": "^2.9.83",
     "@blocklet/js-sdk": "1.16.27-beta-c450492a",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -82,8 +82,7 @@
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
     "ua-parser-js": "^1.0.37",
-    "ufo": "^1.3.2",
-    "url-join": "^4.0.1"
+    "ufo": "^1.3.2"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.9.79",
@@ -109,5 +108,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "7e514618898ec98f3c2c062f76d3808f9c0eee14"
+  "gitHead": "d3b12734ea94e9ae853c8eea8853aa52672e34c8"
 }

package/src/@types/shims.d.ts

@@ -8,7 +8,6 @@ declare module '@arcblock/did-connect/*';
 declare module '@arcblock/did-connect/lib/Session';
 
 declare module 'is-url';
-declare module 'url-join';
 
 declare module '*.png';
 

package/src/ComponentInstaller/use-component-installed.js

@@ -1,6 +1,6 @@
 import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import urlJoin from 'url-join';
+import { joinURL } from 'ufo';
 
 const parseDidToSet = (did) => {
   if (typeof did === 'string') {
@@ -36,8 +36,8 @@ function useComponentInstalled({ did, onInstalled, onError }) {
   }, [optComponents, componentMountPoints, didKeys]);
 
   optComponents.forEach((item) => {
-    item.storeUrl = urlJoin(item.meta.homepage, 'blocklets', item.meta.did);
-    item.installUrl = urlJoin(
+    item.storeUrl = joinURL(item.meta.homepage, 'blocklets', item.meta.did);
+    item.installUrl = joinURL(
       window.blocklet.appUrl,
       AUTH_SERVICE_PREFIX,
       `/admin/components?install-component=${item.meta.did}`

package/src/ComponentManager/components/add-component.tsx

@@ -0,0 +1,114 @@
+import { useEffect, ReactElement } from 'react';
+import Button from '@arcblock/ux/lib/Button';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { joinURL } from 'ufo';
+
+import ResourceDialog from './resource-dialog';
+import { translations } from '../libs/locales';
+
+export default function AddComponent({
+  componentDid,
+  resourceType,
+  resourceDid,
+  autoClose = true,
+  onComplete,
+  onClose,
+  render,
+}: {
+  componentDid: string;
+  resourceType: string;
+  resourceDid: string;
+  autoClose: boolean;
+  onComplete: () => void;
+  onClose: () => void;
+  render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement;
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const currentState = useReactive({
+    loading: false,
+    showDialog: false,
+  });
+  const baseUrl = new URL(
+    joinURL(WELLKNOWN_SERVICE_PATH_PREFIX, 'embed/resources', componentDid, 'add'),
+    window.location.origin
+  );
+  baseUrl.searchParams.set('resourceDid', resourceDid);
+  baseUrl.searchParams.set('resourceType', resourceType);
+  baseUrl.searchParams.set('mode', 'dialog');
+  // 以下为添加组件特有的参数
+  baseUrl.searchParams.set('showFromUrl', 'false');
+  baseUrl.searchParams.set('showResourcesSwitch', 'false');
+  baseUrl.searchParams.set('enableRunBackground', 'false');
+  const importUrl = baseUrl.pathname + baseUrl.search;
+
+  const handleClose = useMemoizedFn(() => {
+    currentState.showDialog = false;
+    onClose?.();
+  });
+  const handleComplete = useMemoizedFn(() => {
+    currentState.showDialog = false;
+    onComplete?.();
+  });
+  const handleOpen = useMemoizedFn(() => {
+    currentState.loading = true;
+    currentState.showDialog = true;
+  });
+  const handleLoad = useMemoizedFn(() => {
+    currentState.loading = false;
+  });
+
+  const handleIframeMessage = useMemoizedFn((event: MessageEvent) => {
+    if (event?.data?.event === 'component.installed' && event.data.componentDid === componentDid) {
+      if (autoClose || event.data.manual) {
+        handleComplete();
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (currentState.showDialog) {
+      window.addEventListener('message', handleIframeMessage);
+    } else {
+      window.removeEventListener('message', handleIframeMessage);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentState.showDialog]);
+
+  return (
+    <>
+      {render ? (
+        render({ onClick: handleOpen, loading: currentState.loading })
+      ) : (
+        <Button
+          key="button"
+          variant="outlined"
+          color="secondary"
+          type="button"
+          className="submit"
+          onClick={handleOpen}
+          loading={currentState.loading}
+          sx={{ mr: 1, ml: 1 }}>
+          {t('importResource')}
+        </Button>
+      )}
+
+      {currentState.showDialog && (
+        <ResourceDialog
+          src={importUrl}
+          open
+          loading={currentState.loading}
+          onClose={handleClose}
+          onComplete={handleComplete}
+          onLoad={handleLoad}
+        />
+      )}
+    </>
+  );
+}

package/src/ComponentManager/components/check-component.tsx

@@ -0,0 +1,3 @@
+import CheckComponent from '../../ComponentInstaller';
+
+export default CheckComponent;

package/src/ComponentManager/components/publish-component.tsx

@@ -0,0 +1,66 @@
+import { ReactElement } from 'react';
+import Button from '@arcblock/ux/lib/Button';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+
+import ResourceDialog from './resource-dialog';
+import { translations } from '../libs/locales';
+
+export default function PublishComponent({
+  componentDid,
+  onClose,
+  render,
+}: {
+  componentDid: String;
+  onClose: () => void;
+  render?: ({ onClick, loading }: { onClick: () => void; loading: boolean }) => ReactElement;
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const currentState = useReactive({
+    showDialog: false,
+    loading: false,
+  });
+
+  const exportUrl = `${WELLKNOWN_SERVICE_PATH_PREFIX}/embed/resources/${componentDid}/publish?mode=dialog`;
+
+  const handleClose = useMemoizedFn(() => {
+    currentState.showDialog = false;
+    onClose?.();
+  });
+  const handleLoad = useMemoizedFn(() => {
+    currentState.loading = false;
+  });
+  const handleOpen = useMemoizedFn(() => {
+    currentState.loading = true;
+    currentState.showDialog = true;
+  });
+
+  return (
+    <>
+      {render ? (
+        render({ onClick: handleOpen, loading: currentState.loading })
+      ) : (
+        <Button
+          key="button"
+          variant="outlined"
+          color="secondary"
+          type="button"
+          className="submit"
+          loading={currentState.loading}
+          onClick={handleOpen}
+          sx={{ mr: 1, ml: 1 }}>
+          {t('exportResource')}
+        </Button>
+      )}
+
+      {currentState.showDialog && (
+        <ResourceDialog src={exportUrl} open onClose={handleClose} onLoad={handleLoad} loading={currentState.loading} />
+      )}
+    </>
+  );
+}

package/src/ComponentManager/components/resource-dialog.tsx

@@ -0,0 +1,64 @@
+import { useMemoizedFn, useMount, useUnmount } from 'ahooks';
+import { useRef } from 'react';
+
+export default function ResourceDialog({
+  src,
+  open = false,
+  loading = true,
+  onClose = () => {},
+  onComplete = () => {},
+  onLoad = () => {},
+}: {
+  src: string;
+  open?: boolean;
+  loading?: boolean;
+  onLoad?: () => void;
+  onClose?: () => void;
+  onComplete?: () => void;
+}) {
+  const iframeRef = useRef(null);
+
+  const listener = useMemoizedFn((event: MessageEvent) => {
+    if (open) {
+      if (event?.data?.event === 'resourceDialog.close') {
+        onClose();
+      }
+      if (event?.data?.event === 'resourceDialog.complete') {
+        onComplete();
+      }
+      if (event?.data?.event === 'resourceDialog.loaded') {
+        onLoad();
+      }
+    }
+  });
+
+  useMount(() => {
+    window.addEventListener('message', listener);
+  });
+
+  useUnmount(() => {
+    window.removeEventListener('message', listener);
+  });
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <iframe
+      ref={iframeRef}
+      src={src}
+      title="Resource Dialog"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: loading ? '-100vw' : 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: 9999,
+        backgroundColor: 'transparent',
+        border: 'none',
+      }}
+    />
+  );
+}

package/src/ComponentManager/index.tsx

@@ -0,0 +1,3 @@
+export { default as PublishComponent } from './components/publish-component';
+export { default as AddComponent } from './components/add-component';
+export { default as CheckComponent } from './components/check-component';

package/src/ComponentManager/libs/locales.ts

@@ -0,0 +1,10 @@
+export const translations = {
+  zh: {
+    importResource: '导入',
+    exportResource: '导出',
+  },
+  en: {
+    importResource: 'Import',
+    exportResource: 'Export',
+  },
+};

package/src/UserCenter/libs/utils.ts

@@ -1,5 +1,5 @@
 import type { AxiosError } from 'axios';
-import joinURL from 'url-join';
+import { joinURL } from 'ufo';
 import { createPassportSvg as _createPassportSvg } from '@arcblock/ux/lib/Util/passport';
 import { AUTH_SERVICE_PREFIX } from '@arcblock/ux/lib/Util/constant';
 import { CreatePassportProps } from '../../@types';

package/src/index.ts

@@ -12,3 +12,4 @@ export { default as ComponentInstaller } from './ComponentInstaller';
 export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
 export * from './UserCenter';
 export * from './UserSessions';
+export * from './ComponentManager';