@blocklet/ui-react 2.6.8 → 2.7.0

package/babel.config.es.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { modules: false, targets: 'chrome 114' }],
+    ['@babel/preset-react', { useBuiltIns: true, runtime: 'automatic' }],
+  ],
+  plugins: ['babel-plugin-inline-react-svg'],
+  ignore: ['src/**/*.stories.js', 'src/**/demo'],
+};

package/es/Dashboard/index.js

@@ -0,0 +1,151 @@
+/* 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
+}) {
+  useWalletHiddenTopbar();
+  const sessionCtx = useContext(SessionContext);
+  const user = sessionCtx?.session?.user;
+  const userRole = user?.role;
+  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);
+      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;
+    }
+    return {
+      localizedNav,
+      flattened,
+      matchedIndex
+    };
+  }, [formattedBlocklet, locale, userRole]);
+  const allLinks = typeof links === 'function' ? links(localizedNav) : [...localizedNav, ...links];
+
+  // 页面初始化时, 如果当前用户没有权限访问任何导航菜单 (比如登录时未提供 VC 导致无权限), 则跳转到 fallbackUrl
+  // 未认证 (user 为空) 时不做处理, 这种情况的页面跳转逻辑一般由应用自行处理
+  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) {
+        invalidPathFallback();
+      } else {
+        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
+    }
+  });
+}
+Dashboard.propTypes = {
+  meta: blockletMetaProps,
+  // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
+  fallbackUrl: PropTypes.string,
+  // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
+  invalidPathFallback: PropTypes.func,
+  headerAddons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  sessionManagerProps,
+  links: PropTypes.oneOfType([PropTypes.array, PropTypes.func])
+};
+Dashboard.defaultProps = {
+  meta: {},
+  fallbackUrl: publicPath,
+  invalidPathFallback: null,
+  headerAddons: undefined,
+  sessionManagerProps: {
+    showRole: true,
+    // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
+    onLogout: () => {
+      window.location.href = publicPath;
+    }
+  },
+  links: []
+};
+export default Dashboard;

package/es/Footer/brand.js

@@ -0,0 +1,90 @@
+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
+}) {
+  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
+    })]
+  });
+}
+Brand.propTypes = {
+  name: PropTypes.node,
+  logo: PropTypes.node,
+  description: PropTypes.string
+};
+Brand.defaultProps = {
+  name: '',
+  logo: '',
+  description: ''
+};
+const Root = styled('div')`
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+  > div:first-of-type {
+    display: flex;
+    align-items: center;
+  }
+  .footer-brand-logo {
+    display: flex;
+    align-items: center;
+    margin-right: 16px;
+    line-height: 1;
+    img,
+    svg {
+      width: auto;
+      height: 44px;
+      max-height: 44px;
+    }
+  }
+  .footer-brand-name {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .footer-brand-desc {
+    margin-top: 16px;
+  }
+
+  ${props => props.theme.breakpoints.down('sm')} {
+    width: auto;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    .footer-brand-logo {
+      img,
+      svg {
+        height: 32px;
+        max-height: 32px;
+      }
+    }
+  }
+`;

package/es/Footer/copyright.js

@@ -0,0 +1,27 @@
+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]
+  });
+}
+Copyright.propTypes = {
+  owner: PropTypes.string,
+  year: PropTypes.string
+};
+Copyright.defaultProps = {
+  owner: 'ArcBlock, Inc.',
+  year: `${new Date().getFullYear()}`
+};
+const Root = styled('p')`
+  display: flex;
+  align-items: center;
+  margin: 0;
+  font-size: 13px;
+`;

package/es/Footer/index.js

@@ -0,0 +1,98 @@
+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() || {};
+  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);
+      return blocklet;
+    }
+  }, [meta]);
+  if (!formattedBlocklet.appName) {
+    return null;
+  }
+  const {
+    appLogo,
+    appLogoRect,
+    appName,
+    appDescription,
+    description,
+    theme,
+    copyright
+  } = formattedBlocklet;
+  const localized = {
+    footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
+    socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale) || [],
+    links: getLocalizedNavigation(formattedBlocklet?.navigation?.bottom, locale) || []
+  };
+  const props = {
+    brand: {
+      name: appName,
+      description: appDescription || description,
+      logo: appLogoRect || appLogo
+    },
+    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
+    }))
+  };
+  return /*#__PURE__*/_jsx(OverridableThemeProvider, {
+    theme: themeOverrides,
+    children: /*#__PURE__*/_jsx(StyledInternalFooter, {
+      ...props,
+      ...rest,
+      $bgcolor: theme?.background?.footer
+    })
+  });
+}
+Footer.propTypes = {
+  meta: blockletMetaProps,
+  // 允许覆盖 footer 内置的 theme
+  theme: PropTypes.object
+};
+Footer.defaultProps = {
+  meta: {},
+  theme: null
+};
+const StyledInternalFooter = styled(InternalFooter)`
+  border-top: 1px solid #eee;
+  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
+});

package/es/Footer/internal-footer.js

@@ -0,0 +1,144 @@
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Brand from './brand';
+import Links from './links';
+import SocialMedia from './social-media';
+import Copyright from './copyright';
+import StandardLayout from './layout/standard';
+import PlainLayout from './layout/plain';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const layouts = [{
+  name: 'plain',
+  // navigation 数据为空时, 使用简单布局
+  support: (_, data) => !data.navigation?.length && !data.socialMedia?.length,
+  component: PlainLayout
+}, {
+  name: 'standard',
+  // 默认标准布局
+  support: () => true,
+  component: StandardLayout
+}];
+const layoutsKeyByName = layouts.reduce((acc, cur) => ({
+  ...acc,
+  [cur.name]: cur
+}), {});
+
+/**
+ * 通用的内部 footer 组件, 定义并渲染常见的几种 footer 元素: brand/navigation/social medial 等
+ */
+function InternalFooter(props) {
+  const {
+    brand,
+    navigation,
+    socialMedia,
+    copyright,
+    links,
+    layout,
+    ...rest
+  } = props;
+  const renderBrand = () => {
+    return brand ? /*#__PURE__*/_jsx(Brand, {
+      ...brand
+    }) : null;
+  };
+  const renderNavigation = () => {
+    return navigation?.length ? /*#__PURE__*/_jsx(Links, {
+      links: navigation
+    }) : null;
+  };
+  const renderSocialMedia = () => {
+    return socialMedia?.length ? /*#__PURE__*/_jsx(SocialMedia, {
+      items: socialMedia
+    }) : null;
+  };
+  const renderCopyright = () => {
+    // 如果 copyright.owner 不存在, 则使用 brand.name, 如果 brand.name 也不存在, copyright 元素为空
+    const copyrightOwner = copyright?.owner || brand?.name;
+    if (!copyrightOwner) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Copyright, {
+      owner: copyrightOwner,
+      year: copyright?.year || undefined
+    });
+  };
+  const renderLinks = () => {
+    return links?.length ? /*#__PURE__*/_jsx(Links, {
+      flowLayout: true,
+      links: links
+    }) : null;
+  };
+  const elements = {
+    brand: renderBrand(),
+    navigation: renderNavigation(),
+    socialMedia: renderSocialMedia(),
+    copyright: renderCopyright(),
+    links: renderLinks()
+  };
+  let LayoutComponent = null;
+  if (layout === 'auto') {
+    LayoutComponent = layouts.find(item => item.support(elements, props)).component;
+  } else {
+    LayoutComponent = layoutsKeyByName[layout]?.component;
+  }
+  if (!LayoutComponent) {
+    throw new Error(`layout ${layout} is not supported.`);
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    position: "relative",
+    ...rest,
+    children: [/*#__PURE__*/_jsx(LayoutComponent, {
+      elements: elements,
+      data: props
+    }), /*#__PURE__*/_jsx(Box, {
+      position: "absolute",
+      right: 16,
+      bottom: 0,
+      fontSize: 12,
+      sx: {
+        color: 'transparent',
+        '::selection': {
+          background: '#000',
+          color: '#fff'
+        }
+      },
+      children: window?.blocklet?.version
+    })]
+  });
+}
+InternalFooter.propTypes = {
+  brand: PropTypes.shape({
+    name: PropTypes.node,
+    description: PropTypes.string,
+    logo: PropTypes.node
+  }),
+  navigation: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.node,
+    link: PropTypes.string
+  })),
+  socialMedia: PropTypes.arrayOf(PropTypes.shape({
+    icon: PropTypes.node,
+    link: PropTypes.string
+  })),
+  copyright: PropTypes.shape({
+    owner: PropTypes.string,
+    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  // privacy/legal 等链接, 常放于 footer 右下侧或最底部
+  links: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.node,
+    link: PropTypes.string
+  })),
+  // 可显式指定 footer layout, 默认根据内容自动决定 layout
+  layout: PropTypes.oneOf(['auto', 'standard', 'plain'])
+};
+InternalFooter.defaultProps = {
+  brand: null,
+  navigation: null,
+  copyright: null,
+  socialMedia: null,
+  links: null,
+  layout: 'auto'
+};
+export default InternalFooter;

package/es/Footer/layout/plain.js

@@ -0,0 +1,57 @@
+import { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import Container from '@mui/material/Container';
+import { styled } from '@arcblock/ux/lib/Theme';
+import Row from './row';
+
+/**
+ * footer plain layout
+ */
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+function PlainLayout({
+  elements,
+  data,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Root, {
+    ...rest,
+    children: /*#__PURE__*/_jsxs(Container, {
+      className: "plain-layout-container",
+      children: [!!data.links && /*#__PURE__*/_jsxs(Row, {
+        sx: {
+          width: 1
+        },
+        autoCenter: true,
+        children: [elements.copyright, elements.links]
+      }), !data.links && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/cloneElement(elements.brand, {
+          name: null,
+          description: null
+        }), elements.copyright]
+      })]
+    })
+  });
+}
+PlainLayout.propTypes = {
+  elements: PropTypes.shape({
+    brand: PropTypes.element,
+    navigation: PropTypes.element,
+    socialMedia: PropTypes.element,
+    copyright: PropTypes.element,
+    links: PropTypes.element
+  }).isRequired,
+  data: PropTypes.object.isRequired
+};
+const Root = styled('div')`
+  padding: 24px 0;
+  .plain-layout-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+`;
+export default PlainLayout;

package/es/Footer/layout/row.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { styled } from '@arcblock/ux/lib/Theme';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Row({
+  children,
+  autoCenter,
+  ...rest
+}) {
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(RowRoot, {
+    ...rest,
+    className: clsx(rest.className, {
+      'footer-row-auto-center': autoCenter
+    }),
+    children: children
+  });
+}
+Row.propTypes = {
+  children: PropTypes.any,
+  autoCenter: PropTypes.bool
+};
+Row.defaultProps = {
+  children: null,
+  autoCenter: false
+};
+const RowRoot = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  & + & {
+    margin-top: 24px;
+  }
+  &.footer-row-auto-center > *:only-child {
+    margin: 0 auto;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 16px;
+    > * {
+      flex: 1 0 100%;
+    }
+    &.footer-row-auto-center > * {
+      margin: 0 auto;
+    }
+  }
+`;