@blocklet/ui-react 2.9.91 → 2.10.0

package/src/UserCenter/components/settings.tsx

@@ -13,6 +13,7 @@ import { User, UserCenterTab } from '../../@types';
 import DidSpace from './storage';
 import { UserSessions } from '../../UserSessions';
 import ThirdPartyLogin from './third-party-login';
+import ConfigProfile from './config-profile';
 
 export default function Settings({
   user,
@@ -42,6 +43,11 @@ export default function Settings({
   }, [settings?.userCenterTabs]);
   const tabs = useCreation(() => {
     return [
+      {
+        label: t('commonSetting.title'),
+        value: 'common',
+        content: <ConfigProfile user={user} />,
+      },
       {
         label: t('notificationManagement'),
         value: 'notification',

package/src/UserCenter/libs/locales.ts

@@ -14,6 +14,7 @@ export const translations = {
     walletNotification: '钱包通知',
     emailNotification: '邮件通知',
     phoneNotification: '短信通知',
+    pushNotification: '推送消息（由 Push Kit 提供）',
     addWebhook: '新增外部通知',
     saveSuccess: '保存成功',
     saveFailed: '保存失败',
@@ -79,6 +80,10 @@ export const translations = {
       confirmUnbindDescription:
         '解绑后您将无法使用 {name} 登录至该账户。如果解绑后，您仍使用 {name} 登录，会自动创建一个新账户',
     },
+    commonSetting: {
+      title: '通用设置',
+      locale: '偏好语言',
+    },
   },
   en: {
     settings: 'Settings',
@@ -95,6 +100,7 @@ export const translations = {
     walletNotification: 'DID Wallet notification',
     emailNotification: 'Email notification',
     phoneNotification: 'SMS notification',
+    pushNotification: 'Push notification (powered by Push Kit)',
     addWebhook: 'Add external notification',
     saveSuccess: 'Save succeed',
     saveFailed: 'Save failed',
@@ -160,5 +166,9 @@ export const translations = {
       confirmUnbindDescription:
         'You will not be able to log in to this account using {name} after unbundling. If you are still logged in with {name} after unbundling, a new account will be created automatically!',
     },
+    commonSetting: {
+      title: 'Common Settings',
+      locale: 'Preferred language',
+    },
   },
 };

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

@@ -1,101 +0,0 @@
-import type { Axios } from 'axios';
-import type { UserPublicInfo } from '@blocklet/js-sdk';
-import { OAUTH_PROVIDER } from '@arcblock/ux/lib/Util/constant';
-export type SessionContext = {
-    session: Session;
-    api: Axios;
-};
-export type OAuthAccount = {
-    provider: keyof typeof OAUTH_PROVIDER;
-    id: string;
-    did: string;
-    pk: string;
-    lastLoginAt: string;
-    firstLoginAt: string;
-    order?: number;
-    userInfo?: {
-        email: string;
-        emailVerified: boolean;
-        name: string;
-        picture: string;
-        sub: string;
-        extraData: Object;
-    };
-};
-export type WalletAccount = {
-    provider: 'wallet';
-    did: string;
-    pk: string;
-    lastLoginAt: string;
-    firstLoginAt: string;
-};
-export type NFTAccount = {
-    provider: 'nft';
-    did: string;
-    pk: string;
-    owner: string;
-    lastLoginAt: string;
-    firstLoginAt: string;
-};
-export type ConnectedAccount = OAuthAccount | WalletAccount | NFTAccount;
-export type User = UserPublicInfo & {
-    role: string;
-    email?: string;
-    phone?: string;
-    sourceProvider?: string;
-    sourceAppPid?: string;
-    lastLoginAt?: string;
-    lastLoginIp?: string;
-    createdAt?: string;
-    passports?: any[];
-    didSpace?: Record<string, any>;
-    connectedAccounts?: any[];
-};
-export type UserCenterTab = {
-    value: string;
-    label: string;
-    url: string;
-    protected: boolean;
-    icon?: string;
-};
-export type Session = {
-    loading: boolean;
-    initialized: boolean;
-    user?: User;
-    login: any;
-    logout: any;
-    switch: any;
-    switchDid: any;
-    switchProfile: any;
-    switchPassport: any;
-    refresh: Function;
-    useOAuth: Function;
-};
-export type WebhookType = 'slack' | 'api';
-export type WebhookItemData = {
-    type: WebhookType;
-    url: string;
-};
-export type WebhookItemProps = {
-    onTest: (params: WebhookItemData) => void;
-    onSave: (params: WebhookItemData) => void;
-    onDelete?: (params: WebhookItemData) => void;
-    onCancel?: () => void;
-    edit: boolean;
-    type?: WebhookType;
-    url?: string;
-};
-export type CreatePassportProps = {
-    issuer: string;
-    title: string;
-    issuerDid: string;
-    issuerAvatarUrl: string;
-    ownerDid: string;
-    ownerName: string;
-    ownerAvatarUrl: string;
-    preferredColor?: string;
-    revoked?: boolean;
-    isDataUrl?: boolean;
-    width?: string;
-    height?: string;
-};

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

@@ -1,16 +0,0 @@
-declare module '@arcblock/ux/*';
-declare module '@arcblock/ux/lib/DID';
-declare module '@arcblock/ux/lib/Tabs';
-declare module '@arcblock/ux/lib/Switch';
-declare module '@arcblock/ux/lib/ErrorBoundary';
-
-declare module '@arcblock/did-connect/*';
-declare module '@arcblock/did-connect/lib/Session';
-
-declare module 'is-url';
-
-declare module '*.png';
-
-declare interface Window {
-  blocklet: any;
-}

package/es/BlockletStudio/index.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-interface BlockletStudioProps {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    onOpened?: () => void;
-    componentDid: string;
-    tenantScope?: string;
-    resourcesParams?: Record<string, any>;
-    mode?: string;
-    title?: string;
-    logo?: string;
-    description?: string;
-    introduction?: string;
-    note?: string;
-    onUploaded?: (data: unknown) => void;
-    onReleased?: (data: unknown) => void;
-    onConnected?: (data: unknown) => void;
-    components?: Record<string, unknown>[];
-    resources?: Record<string, unknown>;
-    componentsTitle?: string;
-    resourcesTitle?: string;
-    style?: React.CSSProperties;
-    zIndex?: number;
-    dependentComponentsMode?: 'auto' | 'readonly';
-    [key: string]: any;
-}
-declare function BlockletStudio({ open, setOpen, onOpened, componentDid, tenantScope, resourcesParams, mode, title, logo, description, introduction, note, componentsTitle, resourcesTitle, onUploaded, onReleased, onConnected, components, resources, style, zIndex, dependentComponentsMode, ...rest }: BlockletStudioProps): import("react").JSX.Element | null;
-export default BlockletStudio;

package/es/BlockletStudio/index.js

@@ -1,114 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { joinURL } from "ufo";
-const WELL_KNOWN_SERVICE_PATH = "/.well-known/service";
-function parseUrl(uri, params) {
-  const url = new URL(uri);
-  Object.keys(params).forEach((key) => {
-    const value = params[key];
-    if (value !== void 0) {
-      url.searchParams.set(key, typeof value === "string" ? value : JSON.stringify(value));
-    }
-  });
-  return url.pathname + url.search;
-}
-function BlockletStudio({
-  open,
-  setOpen,
-  onOpened,
-  componentDid,
-  tenantScope,
-  resourcesParams = {},
-  mode = "dialog",
-  title,
-  logo,
-  description,
-  introduction,
-  note,
-  componentsTitle,
-  resourcesTitle,
-  onUploaded,
-  onReleased,
-  onConnected,
-  components = [],
-  resources = {},
-  style = {},
-  zIndex = 9999,
-  dependentComponentsMode,
-  ...rest
-}) {
-  const [opened, setOpened] = useState(false);
-  const didRef = useRef("");
-  didRef.current = componentDid;
-  const latestFunctionVersionRef = useRef({});
-  latestFunctionVersionRef.current["resourceDialog.close"] = () => {
-    setOpened(false);
-    setOpen(false);
-  };
-  latestFunctionVersionRef.current["resourceDialog.loaded"] = () => {
-    setOpened(true);
-    onOpened?.();
-  };
-  latestFunctionVersionRef.current["studioDialog.uploaded"] = onUploaded;
-  latestFunctionVersionRef.current["studioDialog.connected"] = onConnected;
-  latestFunctionVersionRef.current["studioDialog.released"] = onReleased;
-  useEffect(() => {
-    const listener = (event) => {
-      if (event?.data?.componentDid !== didRef.current) {
-        return;
-      }
-      const fn = latestFunctionVersionRef.current[event?.data?.event];
-      if (typeof fn === "function") {
-        fn(event?.data?.data);
-      }
-    };
-    window.addEventListener("message", listener);
-    return () => {
-      window.removeEventListener("message", listener);
-    };
-  }, []);
-  if (!open) {
-    return null;
-  }
-  const src = parseUrl(
-    joinURL(window.location.origin, WELL_KNOWN_SERVICE_PATH, "/embed/resources", componentDid, "publish"),
-    {
-      title,
-      logo,
-      description,
-      introduction,
-      note,
-      tenantScope,
-      mode,
-      resourcesParams,
-      resources,
-      components,
-      resourcesTitle,
-      componentsTitle,
-      dependentComponentsMode
-    }
-  );
-  return /* @__PURE__ */ jsx(
-    "iframe",
-    {
-      src,
-      title: "Blocklet Studio",
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100vw",
-        height: "100vh",
-        zIndex,
-        border: 0,
-        padding: 0,
-        margin: 0,
-        pointerEvents: opened ? "auto" : "none",
-        opacity: opened ? 1 : 0,
-        ...style
-      },
-      ...rest
-    }
-  );
-}
-export default BlockletStudio;

package/es/ComponentInstaller/index.d.ts

@@ -1,37 +0,0 @@
-declare function WrapComponentInstaller(props: any): any;
-declare namespace WrapComponentInstaller {
-    namespace propTypes {
-        let children: any;
-        let disabled: any;
-        let warnIcon: any;
-        let did: any;
-        let noPermissionMute: any;
-        let onInstalled: any;
-        let onError: any;
-        let closeByOutSize: any;
-        let onClose: any;
-        let fallback: any;
-        let roles: any;
-    }
-    namespace defaultProps {
-        let disabled_1: boolean;
-        export { disabled_1 as disabled };
-        let warnIcon_1: null;
-        export { warnIcon_1 as warnIcon };
-        let noPermissionMute_1: boolean;
-        export { noPermissionMute_1 as noPermissionMute };
-        let onInstalled_1: null;
-        export { onInstalled_1 as onInstalled };
-        let onError_1: null;
-        export { onError_1 as onError };
-        let closeByOutSize_1: boolean;
-        export { closeByOutSize_1 as closeByOutSize };
-        let onClose_1: null;
-        export { onClose_1 as onClose };
-        let fallback_1: null;
-        export { fallback_1 as fallback };
-        let roles_1: string[];
-        export { roles_1 as roles };
-    }
-}
-export default WrapComponentInstaller;

package/es/ComponentInstaller/index.js

@@ -1,200 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import SessionPermission from "@arcblock/ux/lib/SessionPermission";
-import { Icon } from "@iconify/react";
-import CloseIcon from "@mui/icons-material/Close";
-import { Box, ClickAwayListener, Fade, IconButton, Paper } from "@mui/material";
-import { useMemoizedFn } from "ahooks";
-import PropTypes from "prop-types";
-import { useContext } from "react";
-import InstallerItem from "./installer-item.js";
-import translations from "./locales.js";
-import useComponentInstalled from "./use-component-installed.js";
-function ComponentInstaller({
-  warnIcon,
-  did,
-  noPermissionMute,
-  onInstalled,
-  onError,
-  children,
-  closeByOutSize,
-  onClose,
-  fallback,
-  disabled,
-  roles = ["owner", "admin"]
-}) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const { installed, optComponents, installStatus, definedInBlockletYML } = useComponentInstalled({
-    did,
-    onInstalled,
-    onError
-  });
-  const sessionCtx = useContext(SessionContext);
-  const handleClose = () => {
-    onClose?.(false);
-  };
-  if (disabled) {
-    return children;
-  }
-  return /* @__PURE__ */ jsx(SessionPermission, { session: sessionCtx?.session, roles, children: ({ hasPermission }) => {
-    if (installed) {
-      return children;
-    }
-    if (noPermissionMute && !hasPermission) {
-      return fallback || null;
-    }
-    if (typeof children === "function") {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        fallback,
-        children({
-          hasPermission,
-          optComponents,
-          installStatus
-        })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      fallback,
-      /* @__PURE__ */ jsx(
-        ClickAwayListener,
-        {
-          onClickAway: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (closeByOutSize) {
-              handleClose();
-            }
-          },
-          children: /* @__PURE__ */ jsx(Fade, { in: true, timeout: 350, children: /* @__PURE__ */ jsx(
-            Paper,
-            {
-              variant: "outlined",
-              sx: {
-                position: "fixed",
-                top: 20,
-                right: 20,
-                zIndex: 3e3,
-                borderRadius: 3,
-                width: 400,
-                maxWidth: "90vw",
-                borderColor: colors.lineStep,
-                border: "0 !important",
-                fontSize: "14px",
-                textAlign: "left",
-                boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`
-              },
-              children: !definedInBlockletYML ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-                /* @__PURE__ */ jsxs(
-                  Box,
-                  {
-                    sx: {
-                      padding: "20px 24px",
-                      marginLeft: 0,
-                      display: "flex",
-                      alignItems: "center",
-                      flexDirection: "row",
-                      justifyContent: "flex-start"
-                    },
-                    children: [
-                      warnIcon || /* @__PURE__ */ jsx(Icon, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
-                      /* @__PURE__ */ jsx(Box, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: t("componentInstallerTitle") }),
-                      /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } }),
-                      onClose ? /* @__PURE__ */ jsx(IconButton, { variant: "outlined", className: "button", onClick: handleClose, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
-                /* @__PURE__ */ jsxs(Box, { sx: { padding: "20px 24px", marginTop: 0 }, children: [
-                  t("componentInstallerNoDefinedInBlockletYML"),
-                  ": ",
-                  did
-                ] })
-              ] }) : /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-                /* @__PURE__ */ jsxs(
-                  Box,
-                  {
-                    sx: {
-                      padding: "20px 24px",
-                      marginLeft: 0,
-                      display: "flex",
-                      flexDirection: "row",
-                      alignItems: "center",
-                      justifyContent: "flex-start"
-                    },
-                    children: [
-                      warnIcon || /* @__PURE__ */ jsx(Icon, { icon: "mdi:warning-box", style: { color: "yellowgreen", fontSize: 24 } }),
-                      /* @__PURE__ */ jsx(Box, { sx: { marginLeft: 1, fontSize: "16px", fontWeight: "bold" }, children: t("componentInstallerTitle") }),
-                      /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } }),
-                      onClose ? /* @__PURE__ */ jsx(IconButton, { variant: "outlined", className: "button", onClick: handleClose, children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
-                /* @__PURE__ */ jsx(Box, { sx: { maxHeight: "70vh", overflowY: "auto" }, children: optComponents.map((optionalComponent, index) => {
-                  return /* @__PURE__ */ jsx(
-                    InstallerItem,
-                    {
-                      t,
-                      hasPermission,
-                      index,
-                      optionalComponent,
-                      installStatus: installStatus[optionalComponent.meta?.did]
-                    },
-                    optionalComponent.meta?.did || index
-                  );
-                }) }),
-                hasPermission ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Box, { sx: { width: "100%", height: "1px", backgroundColor: colors.gray6 } }),
-                  /* @__PURE__ */ jsx(Box, { sx: { padding: "20px 24px" }, children: /* @__PURE__ */ jsx(Box, { sx: { opacity: 1 }, children: t("componentInstallerSuggestions") }) })
-                ] })
-              ] })
-            }
-          ) })
-        }
-      )
-    ] });
-  } });
-}
-ComponentInstaller.propTypes = {
-  disabled: PropTypes.bool,
-  warnIcon: PropTypes.node,
-  did: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
-  noPermissionMute: PropTypes.bool,
-  onInstalled: PropTypes.func,
-  onError: PropTypes.func,
-  children: PropTypes.any.isRequired,
-  closeByOutSize: PropTypes.bool,
-  onClose: PropTypes.func,
-  fallback: PropTypes.node,
-  roles: PropTypes.array
-};
-ComponentInstaller.defaultProps = {
-  disabled: false,
-  warnIcon: null,
-  noPermissionMute: false,
-  onInstalled: null,
-  onError: null,
-  closeByOutSize: false,
-  onClose: null,
-  fallback: null,
-  roles: ["owner", "admin"]
-};
-export default function WrapComponentInstaller(props) {
-  if (window.blocklet) {
-    return /* @__PURE__ */ jsx(ComponentInstaller, { ...props });
-  }
-  return props.children;
-}
-WrapComponentInstaller.propTypes = {
-  ...ComponentInstaller.propTypes,
-  children: PropTypes.any.isRequired
-};
-WrapComponentInstaller.defaultProps = {
-  ...ComponentInstaller.defaultProps
-};

package/es/ComponentInstaller/installer-item.d.ts

@@ -1,21 +0,0 @@
-declare function InstallerItem({ optionalComponent, index, installStatus, hasPermission, t }: {
-    optionalComponent: any;
-    index: any;
-    installStatus: any;
-    hasPermission: any;
-    t: any;
-}): import("react").JSX.Element;
-declare namespace InstallerItem {
-    namespace propTypes {
-        let t: any;
-        let optionalComponent: any;
-        let index: any;
-        let installStatus: any;
-        let hasPermission: any;
-    }
-    namespace defaultProps {
-        let installStatus_1: string;
-        export { installStatus_1 as installStatus };
-    }
-}
-export default InstallerItem;