@blocklet/ui-react 2.9.13 → 2.9.14

package/build.config.ts

@@ -0,0 +1,29 @@
+import { defineBuildConfig, BuildEntry } from 'unbuild';
+
+const pattern = ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.png', '!**/*.stories.js', '!**/demo'];
+
+const shared: BuildEntry = {
+  builder: 'mkdist',
+  input: './src',
+  pattern,
+  ext: 'js',
+  esbuild: {
+    jsx: 'automatic',
+  },
+  declaration: true,
+};
+export default defineBuildConfig({
+  failOnWarn: false,
+  entries: [
+    {
+      ...shared,
+      outDir: './es',
+      format: 'esm',
+    },
+    {
+      ...shared,
+      outDir: './lib',
+      format: 'cjs',
+    },
+  ],
+});

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

@@ -0,0 +1,63 @@
+import type { Axios } from 'axios';
+export type SessionContext = {
+    session: Session;
+    api: Axios;
+};
+export type User = {
+    did: string;
+    fullName: string;
+    role: string;
+    avatar: string;
+    email?: string;
+    phone?: string;
+    sourceProvider?: string;
+    lastLoginAt?: string;
+    lastLoginIp?: string;
+    createdAt?: string;
+    passports?: any[];
+};
+export type UserCenterTab = {
+    value: string;
+    label: string;
+    url: string;
+    protected: boolean;
+    icon?: string;
+};
+export type Session = {
+    loading: boolean;
+    user: User;
+    login: any;
+    logout: any;
+    switch: any;
+    switchDid: any;
+    switchProfile: any;
+    switchPassport: any;
+};
+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

@@ -0,0 +1,12 @@
+declare module '@arcblock/ux/*';
+declare module '@arcblock/did-connect/*';
+
+declare module '@abtnode/constant';
+declare module 'is-url';
+declare module 'url-join';
+
+declare module '*.png';
+
+declare interface Window {
+  blocklet: any;
+}

package/es/Dashboard/index.d.ts

@@ -0,0 +1,41 @@
+export default Dashboard;
+/**
+ * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
+ */
+declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }: {
+    [x: string]: any;
+    meta: any;
+    fallbackUrl: any;
+    invalidPathFallback: any;
+    headerAddons: any;
+    sessionManagerProps: any;
+    links: any;
+}): import("react").JSX.Element | null;
+declare namespace Dashboard {
+    namespace propTypes {
+        export { blockletMetaProps as meta };
+        export let fallbackUrl: any;
+        export let invalidPathFallback: any;
+        export let headerAddons: any;
+        export { sessionManagerProps };
+        export let links: any;
+    }
+    namespace defaultProps {
+        export let meta: {};
+        export { publicPath as fallbackUrl };
+        let invalidPathFallback_1: null;
+        export { invalidPathFallback_1 as invalidPathFallback };
+        let headerAddons_1: undefined;
+        export { headerAddons_1 as headerAddons };
+        export namespace sessionManagerProps_1 {
+            let showRole: boolean;
+            function onLogout(): void;
+        }
+        export { sessionManagerProps_1 as sessionManagerProps };
+        let links_1: never[];
+        export { links_1 as links };
+    }
+}
+import { blockletMetaProps } from '../types';
+import { sessionManagerProps } from '../types';
+import { publicPath } from '../blocklets';

package/es/Dashboard/index.js

@@ -1,90 +1,58 @@
-import 'iconify-icon';
-
-/* eslint-disable no-shadow */
-import { useMemo, useLayoutEffect, useContext } from 'react';
-import PropTypes from 'prop-types';
-import { SessionContext } from '@arcblock/did-connect/lib/Session';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
-import { blockletMetaProps, sessionManagerProps } from '../types';
-import { mapRecursive, flatRecursive, matchPaths } from '../utils';
-import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from '../blocklets';
-import HeaderAddons from '../common/header-addons';
-import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
-
-/**
- * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
- */
-// eslint-disable-next-line no-shadow
-import { jsx as _jsx } from "react/jsx-runtime";
-function Dashboard({
-  meta,
-  fallbackUrl,
-  invalidPathFallback,
-  headerAddons,
-  sessionManagerProps,
-  links,
-  ...rest
-}) {
+import { jsx } from "react/jsx-runtime";
+import "iconify-icon";
+import { useMemo, useLayoutEffect, useContext } from "react";
+import PropTypes from "prop-types";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import UxDashboard from "@arcblock/ux/lib/Layout/dashboard";
+import { blockletMetaProps, sessionManagerProps } from "../types.js";
+import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
+import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
+import HeaderAddons from "../common/header-addons.js";
+import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
+function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps: sessionManagerProps2, links, ...rest }) {
   useWalletHiddenTopbar();
   const sessionCtx = useContext(SessionContext);
   const user = sessionCtx?.session?.user;
   const userRole = user?.role;
-  const {
-    locale
-  } = useLocaleContext() || {};
+  const { locale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
       return formatBlockletInfo(blocklet);
     } catch (e) {
-      console.error('Failed to format blocklet info', e, blocklet);
+      console.error("Failed to format blocklet info", e, blocklet);
       return blocklet;
     }
   }, [meta]);
-  const {
-    localizedNav,
-    flattened,
-    matchedIndex
-  } = useMemo(() => {
-    let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
-    // 根据 role 筛选 nav 数据
-    localizedNav = filterNavByRole(localizedNav, userRole);
-    // 将 nav 数据处理成 ux dashboard 需要的格式
-    localizedNav = mapRecursive(localizedNav, item => ({
-      title: item.title,
-      url: item.link,
-      icon: item.icon ? /*#__PURE__*/_jsx("iconify-icon", {
-        icon: item.icon
-      }) : null,
-      // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
-      external: true,
-      children: item.items
-    }), 'items');
-    // 展平后使用 matchPaths 检测 link#active 状态
-    const flattened = flatRecursive(localizedNav).filter(item => !!item.url);
-    const matchedIndex = matchPaths(flattened.map(item => item.url));
-    if (matchedIndex !== -1) {
-      flattened[matchedIndex].active = true;
+  const { localizedNav, flattened, matchedIndex } = useMemo(() => {
+    let localizedNav2 = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
+    localizedNav2 = filterNavByRole(localizedNav2, userRole);
+    localizedNav2 = mapRecursive(
+      localizedNav2,
+      (item) => ({
+        title: item.title,
+        url: item.link,
+        icon: item.icon ? /* @__PURE__ */ jsx("iconify-icon", { icon: item.icon }) : null,
+        // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
+        external: true,
+        children: item.items
+      }),
+      "items"
+    );
+    const flattened2 = flatRecursive(localizedNav2).filter((item) => !!item.url);
+    const matchedIndex2 = matchPaths(flattened2.map((item) => item.url));
+    if (matchedIndex2 !== -1) {
+      flattened2[matchedIndex2].active = true;
     }
-    return {
-      localizedNav,
-      flattened,
-      matchedIndex
-    };
+    return { localizedNav: localizedNav2, flattened: flattened2, matchedIndex: matchedIndex2 };
   }, [formattedBlocklet, locale, userRole]);
-  const allLinks = typeof links === 'function' ? links(localizedNav) : [...localizedNav, ...links];
-
-  // 页面初始化时, 如果当前用户没有权限访问任何导航菜单 (比如登录时未提供 VC 导致无权限), 则跳转到 fallbackUrl
-  // 未认证 (user 为空) 时不做处理, 这种情况的页面跳转逻辑一般由应用自行处理
+  const allLinks = typeof links === "function" ? links(localizedNav) : [...localizedNav, ...links];
   useLayoutEffect(() => {
     if (!!user && !flattened?.length && fallbackUrl) {
       window.location.href = fallbackUrl;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fallbackUrl]);
-
-  // 导航菜单变动且存在可用菜单但无匹配项时 (如切换 passport), 跳转到首个菜单项
   useLayoutEffect(() => {
     if (!!user && !!flattened?.length && matchedIndex === -1) {
       if (invalidPathFallback) {
@@ -93,38 +61,36 @@ function Dashboard({
         window.location.href = flattened[0]?.url || publicPath;
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [invalidPathFallback, flattened, matchedIndex]);
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const {
-    appLogo,
-    appLogoRect,
-    appName
-  } = formattedBlocklet;
-  const _headerAddons = /*#__PURE__*/_jsx(HeaderAddons, {
-    formattedBlocklet: formattedBlocklet,
-    addons: headerAddons,
-    sessionManagerProps: sessionManagerProps
-  });
-  return /*#__PURE__*/_jsx(UxDashboard, {
-    title: appName,
-    fullWidth: true,
-    sidebarWidth: 128,
-    legacy: false,
-    links: allLinks,
-    ...rest,
-    headerProps: {
-      homeLink: publicPath,
-      logo: /*#__PURE__*/_jsx("img", {
-        src: appLogoRect || appLogo,
-        alt: "logo"
-      }),
-      addons: _headerAddons,
-      ...rest.headerProps
+  const { appLogo, appLogoRect, appName } = formattedBlocklet;
+  const _headerAddons = /* @__PURE__ */ jsx(
+    HeaderAddons,
+    {
+      formattedBlocklet,
+      addons: headerAddons,
+      sessionManagerProps: sessionManagerProps2
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    UxDashboard,
+    {
+      title: appName,
+      fullWidth: true,
+      sidebarWidth: 128,
+      legacy: false,
+      links: allLinks,
+      ...rest,
+      headerProps: {
+        homeLink: publicPath,
+        logo: /* @__PURE__ */ jsx("img", { src: appLogoRect || appLogo, alt: "logo" }),
+        addons: _headerAddons,
+        ...rest.headerProps
+      }
     }
-  });
+  );
 }
 Dashboard.propTypes = {
   meta: blockletMetaProps,
@@ -140,7 +106,7 @@ Dashboard.defaultProps = {
   meta: {},
   fallbackUrl: publicPath,
   invalidPathFallback: null,
-  headerAddons: undefined,
+  headerAddons: void 0,
   sessionManagerProps: {
     showRole: true,
     // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
@@ -150,4 +116,4 @@ Dashboard.defaultProps = {
   },
   links: []
 };
-export default Dashboard;
+export default Dashboard;

package/es/Footer/brand.d.ts

@@ -0,0 +1,22 @@
+declare function Brand({ name, logo, description, ...rest }: {
+    [x: string]: any;
+    name: any;
+    logo: any;
+    description: any;
+}): import("react").JSX.Element | null;
+declare namespace Brand {
+    namespace propTypes {
+        let name: any;
+        let logo: any;
+        let description: any;
+    }
+    namespace defaultProps {
+        let name_1: string;
+        export { name_1 as name };
+        let logo_1: string;
+        export { logo_1 as logo };
+        let description_1: string;
+        export { description_1 as description };
+    }
+}
+export default Brand;

package/es/Footer/brand.js

@@ -1,36 +1,19 @@
-import { isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@arcblock/ux/lib/Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Brand({
-  name,
-  logo,
-  description,
-  ...rest
-}) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import PropTypes from "prop-types";
+import { styled } from "@arcblock/ux/lib/Theme";
+export default function Brand({ name, logo, description, ...rest }) {
   if (!name && !logo && !description) {
     return null;
   }
-  const logoElement = /*#__PURE__*/isValidElement(logo) ? logo : /*#__PURE__*/_jsx("img", {
-    src: logo,
-    alt: name
-  });
-  return /*#__PURE__*/_jsxs(Root, {
-    ...rest,
-    children: [/*#__PURE__*/_jsxs("div", {
-      children: [logo && /*#__PURE__*/_jsx("div", {
-        className: "footer-brand-logo",
-        children: logoElement
-      }), name && /*#__PURE__*/_jsx("div", {
-        className: "footer-brand-name",
-        children: name
-      })]
-    }), description && /*#__PURE__*/_jsx("div", {
-      className: "footer-brand-desc",
-      children: description
-    })]
-  });
+  const logoElement = isValidElement(logo) ? logo : /* @__PURE__ */ jsx("img", { src: logo, alt: name });
+  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      logo && /* @__PURE__ */ jsx("div", { className: "footer-brand-logo", children: logoElement }),
+      name && /* @__PURE__ */ jsx("div", { className: "footer-brand-name", children: name })
+    ] }),
+    description && /* @__PURE__ */ jsx("div", { className: "footer-brand-desc", children: description })
+  ] });
 }
 Brand.propTypes = {
   name: PropTypes.node,
@@ -38,11 +21,11 @@ Brand.propTypes = {
   description: PropTypes.string
 };
 Brand.defaultProps = {
-  name: '',
-  logo: '',
-  description: ''
+  name: "",
+  logo: "",
+  description: ""
 };
-const Root = styled('div')`
+const Root = styled("div")`
   display: flex;
   flex-direction: column;
   font-size: 14px;
@@ -74,11 +57,11 @@ const Root = styled('div')`
     margin-top: 16px;
   }
 
-  ${props => props.theme.breakpoints.down('sm')} {
+  ${(props) => props.theme.breakpoints.down("sm")} {
     width: auto;
   }
 
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(props) => props.theme.breakpoints.down("md")} {
     .footer-brand-logo {
       img,
       svg {
@@ -87,4 +70,4 @@ const Root = styled('div')`
       }
     }
   }
-`;
+`;

package/es/Footer/copyright.d.ts

@@ -0,0 +1,18 @@
+declare function Copyright({ owner, year, ...rest }: {
+    [x: string]: any;
+    owner: any;
+    year: any;
+}): import("react").JSX.Element;
+declare namespace Copyright {
+    namespace propTypes {
+        let owner: any;
+        let year: any;
+    }
+    namespace defaultProps {
+        let owner_1: string;
+        export { owner_1 as owner };
+        let year_1: string;
+        export { year_1 as year };
+    }
+}
+export default Copyright;

package/es/Footer/copyright.js

@@ -1,27 +1,25 @@
-import { styled } from '@arcblock/ux/lib/Theme';
-import PropTypes from 'prop-types';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Copyright({
-  owner,
-  year,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsxs(Root, {
-    ...rest,
-    children: ["Copyright \xA9 ", year, " ", owner]
-  });
+import { jsxs } from "react/jsx-runtime";
+import { styled } from "@arcblock/ux/lib/Theme";
+import PropTypes from "prop-types";
+export default function Copyright({ owner, year, ...rest }) {
+  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
+    "Copyright \xA9 ",
+    year,
+    " ",
+    owner
+  ] });
 }
 Copyright.propTypes = {
   owner: PropTypes.string,
   year: PropTypes.string
 };
 Copyright.defaultProps = {
-  owner: 'ArcBlock',
-  year: `${new Date().getFullYear()}`
+  owner: "ArcBlock",
+  year: `${(/* @__PURE__ */ new Date()).getFullYear()}`
 };
-const Root = styled('p')`
+const Root = styled("p")`
   display: flex;
   align-items: center;
   margin: 0;
   font-size: 13px;
-`;
+`;

package/es/Footer/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("react").ComponentType<{
+    [x: string]: any;
+    meta: any;
+    theme: any;
+}>;
+export default _default;

package/es/Footer/index.js

@@ -1,48 +1,30 @@
-import { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@arcblock/ux/lib/Theme';
-import { withErrorBoundary } from 'react-error-boundary';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-import OverridableThemeProvider from '../common/overridable-theme-provider';
-import InternalFooter from './internal-footer';
-import { mapRecursive } from '../utils';
-import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
-import { blockletMetaProps } from '../types';
-
-/**
- * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function Footer({
-  meta,
-  theme: themeOverrides,
-  ...rest
-}) {
-  const {
-    locale
-  } = useLocaleContext() || {};
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import PropTypes from "prop-types";
+import { styled } from "@arcblock/ux/lib/Theme";
+import { withErrorBoundary } from "react-error-boundary";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
+import OverridableThemeProvider from "../common/overridable-theme-provider.js";
+import InternalFooter from "./internal-footer.js";
+import { mapRecursive } from "../utils.js";
+import { formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
+import { blockletMetaProps } from "../types.js";
+function Footer({ meta, theme: themeOverrides, ...rest }) {
+  const { locale } = useLocaleContext() || {};
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
       return formatBlockletInfo(blocklet);
     } catch (e) {
-      console.error('Failed to format blocklet info', e, blocklet);
+      console.error("Failed to format blocklet info", e, blocklet);
       return blocklet;
     }
   }, [meta]);
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const {
-    appLogo,
-    appLogoRect,
-    appName,
-    appDescription,
-    description,
-    theme,
-    copyright
-  } = formattedBlocklet;
+  const { appLogo, appLogoRect, appName, appDescription, description, theme, copyright } = formattedBlocklet;
   const localized = {
     footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
     socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale) || [],
@@ -54,26 +36,20 @@ function Footer({
       description: appDescription || description,
       logo: appLogoRect || appLogo
     },
-    navigation: mapRecursive(localized.footerNav, item => ({
-      ...item,
-      label: item.title,
-      link: item.link
-    }), 'items'),
+    navigation: mapRecursive(
+      localized.footerNav,
+      (item) => ({
+        ...item,
+        label: item.title,
+        link: item.link
+      }),
+      "items"
+    ),
     copyright,
     socialMedia: localized.socialMedia,
-    links: localized.links.map(item => ({
-      ...item,
-      label: item.title
-    }))
+    links: localized.links.map((item) => ({ ...item, label: item.title }))
   };
-  return /*#__PURE__*/_jsx(OverridableThemeProvider, {
-    theme: themeOverrides,
-    children: /*#__PURE__*/_jsx(StyledInternalFooter, {
-      ...props,
-      ...rest,
-      $bgcolor: theme?.background?.footer
-    })
-  });
+  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(StyledInternalFooter, { ...props, ...rest, $bgcolor: theme?.background?.footer }) });
 }
 Footer.propTypes = {
   meta: blockletMetaProps,
@@ -86,13 +62,11 @@ Footer.defaultProps = {
 };
 const StyledInternalFooter = styled(InternalFooter)`
   border-top: 1px solid #eee;
-  color: ${props => props.theme.palette.grey[600]};
-  ${({
-  $bgcolor
-}) => $bgcolor && `background-color: ${$bgcolor};`}
+  color: ${(props) => props.theme.palette.grey[600]};
+  ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
   font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 `;
 export default withErrorBoundary(Footer, {
   FallbackComponent: ErrorFallback
-});
+});