@blocklet/ui-react 3.4.14 → 3.5.0

package/src/Footer/links.jsx

@@ -1,321 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import { useCreation } from 'ahooks';
-import isInteger from 'lodash/isInteger';
-import isString from 'lodash/isString';
-import { styled } from '@arcblock/ux/lib/Theme';
-import clsx from 'clsx';
-import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import Icon from '../Icon';
-import useMobile from '../hooks/use-mobile';
-import { splitNavColumns, isMailProtocol } from '../utils';
-
-/**
- * footer 中的 links (支持分组, 最多支持 2 级)
- */
-export default function Links({ links = [], flowLayout = false, minColumns = 1, maxColumns = 4, ...rest }) {
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const isMobile = useMobile({ key: 'md' });
-  // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
-  const isGroupMode = links.some((item) => item.items?.length);
-  // 是否启用分列布局
-  const columnsLayout = !isMobile && isGroupMode && isInteger(minColumns) && minColumns > 1 && maxColumns >= minColumns;
-  // Clamp columns
-  const columns = columnsLayout ? Math.min(Math.max(links.length, minColumns), maxColumns) : 1;
-  const renderItem = ({ label, link, icon, render, props }) => {
-    let result = label;
-
-    if (render) {
-      result = render({ label, link, props });
-    } else if (link && isString(link)) {
-      const isExternal = link.startsWith('http') || link.startsWith('//');
-      const isMail = isMailProtocol(link);
-
-      const otherProps = isMail
-        ? {}
-        : {
-            target: isExternal ? '_blank' : '_self',
-            rel: isExternal ? 'noreferrer noopener' : undefined,
-          };
-
-      result = (
-        <a href={link} aria-label={`Footer link for ${label}`} {...otherProps} {...props}>
-          {label}
-        </a>
-      );
-    }
-
-    return (
-      <>
-        {icon && <Icon icon={icon} size={20} sx={{ mr: 0.5 }} />}
-        {result}
-      </>
-    );
-  };
-  const content = useCreation(() => {
-    if (!links?.length) {
-      return null;
-    }
-    // 流布局
-    if (flowLayout) {
-      return links.map((item, i) => (
-        <span key={i} className="footer-links-item">
-          {renderItem(item)}
-        </span>
-      ));
-    }
-    // 列布局
-    if (columnsLayout) {
-      return splitNavColumns(links, { columns }).map((cols, i) => {
-        return (
-          <div key={i} className="footer-links-column">
-            {cols
-              .filter((v) => v.group)
-              .map((item, j) => {
-                const { items } = item;
-
-                return (
-                  <div key={j} className="footer-links-group">
-                    <span className="footer-links-item">{renderItem(item)}</span>
-                    {!!items?.length && (
-                      <div className="footer-links-sub">
-                        {items.map((child, k) => (
-                          <span
-                            key={k}
-                            className={clsx('footer-links-item', { 'footer-links-item--new': child.isNew })}>
-                            {renderItem(child)}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-          </div>
-        );
-      });
-    }
-    // 纯 flex 布局
-    return links.map((item, i) => {
-      const { items } = item;
-      // 用于移动端展开
-      const isActive = i === activeIndex;
-
-      return (
-        <div
-          key={i}
-          className={clsx('footer-links-group', {
-            'footer-links-group--active': isActive,
-          })}
-          onClick={() => setActiveIndex(activeIndex === i ? -1 : i)}>
-          <span className="footer-links-item">
-            {renderItem(item)}
-            {!!items?.length && (
-              <span className="footer-links-group-expand-icon">
-                <ExpandMoreIcon
-                  style={{
-                    transform: `rotate(${isActive ? 180 : 0}deg)`,
-                  }}
-                />
-              </span>
-            )}
-          </span>
-          {!!items?.length && (
-            <div className="footer-links-sub">
-              {items.map((child, j) => (
-                <span key={j} className={clsx('footer-links-item', { 'footer-links-item--new': child.isNew })}>
-                  {renderItem(child)}
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
-      );
-    });
-  }, [links, flowLayout, columnsLayout, activeIndex]);
-
-  if (!links?.length) {
-    return null;
-  }
-
-  return (
-    <Root
-      columns={columns}
-      {...rest}
-      className={clsx(rest.className, {
-        'footer-links--grouped': isGroupMode,
-        'footer-links--flow': flowLayout,
-        'footer-links--columns': columnsLayout,
-      })}>
-      <div className="footer-links-inner">{content}</div>
-    </Root>
-  );
-}
-
-Links.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      link: PropTypes.string,
-      render: PropTypes.func,
-      props: PropTypes.object,
-    })
-  ),
-  // 流动布局, 简单的从左到右排列
-  flowLayout: PropTypes.bool,
-  // 列布局，最小列数，最大列数
-  minColumns: PropTypes.number,
-  maxColumns: PropTypes.number,
-};
-
-const Root = styled('div', { shouldForwardProp: (prop) => prop !== 'columns' })`
-  overflow: hidden;
-  color: ${({ theme }) => theme.palette.text.secondary};
-  .footer-links-inner {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 -8px;
-  }
-  .footer-links-group,
-  .footer-links-sub {
-    display: flex;
-    flex-direction: column;
-  }
-  .footer-links-group-expand-icon {
-    display: none;
-    position: absolute;
-    right: 16px;
-    top: 50%;
-    transform: translate(0, -50%);
-    line-height: 1;
-    svg {
-      width: auto;
-      height: 0.75em;
-    }
-  }
-  .footer-links-item {
-    display: inline-flex;
-    align-items: center;
-    position: relative;
-    padding: 6px 8px;
-    font-size: 14px;
-    white-space: nowrap;
-    &--new::after {
-      content: 'New';
-      color: ${({ theme }) => theme.palette.info.main};
-      background-color: ${({ theme }) => theme.palette.info.light};
-      padding: 1px 8px;
-      border-radius: 10px/50%;
-      margin-left: 8px;
-    }
-  }
-  &.footer-links--grouped {
-    .footer-links-group {
-      > .footer-links-item {
-        font-weight: 600;
-        color: ${({ theme }) => theme.palette.text.primary};
-      }
-      .footer-links-sub {
-        margin-top: 8px;
-      }
-    }
-  }
-  a {
-    display: inline-block;
-    max-width: 150px;
-    color: inherit;
-    text-decoration: none;
-    transition: color 0.2s ease-in-out;
-    &:hover {
-      color: ${({ theme }) => theme.palette.text.primary};
-    }
-  }
-  /* columns 布局 */
-  &.footer-links--columns {
-    .footer-links-inner {
-      gap: ${({ columns }) => `${288 / columns}px`};
-    }
-    .footer-links-column {
-      display: flex;
-      flex-direction: column;
-    }
-    .footer-links-group {
-      .footer-links-sub {
-        margin-top: 2px;
-        margin-bottom: 12px;
-      }
-    }
-  }
-
-  /* flow 布局 */
-  &.footer-links--flow {
-    display: inline-flex;
-    .footer-links-inner {
-      justify-content: center;
-      flex-wrap: wrap;
-      margin: 0 -8px;
-      .footer-links-item {
-        padding: 0 8px;
-      }
-      .footer-links-item + .footer-links-item::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translate(0, -50%);
-        height: 1em;
-        border-left: 1px solid ${(props) => props.theme.palette.text.secondary};
-      }
-    }
-  }
-
-  /* 移动端样式 */
-  ${(props) => props.theme.breakpoints.down('md')} {
-    .footer-links-inner {
-      flex-direction: column;
-      margin: 0;
-    }
-    .footer-links-sub {
-      display: none;
-    }
-    .footer-links-group {
-      position: relative;
-      padding: 12px 0;
-      .footer-links-item .footer-links-group-expand-icon {
-        display: inline-block;
-      }
-    }
-    .footer-links-group + .footer-links-group {
-      border-top: 1px solid ${(props) => props.theme.palette.grey[200]};
-    }
-    .footer-links-group--active {
-      .footer-links-sub {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        .footer-links-item {
-          flex: 0 0 50%;
-        }
-      }
-    }
-    .footer-links-item {
-      padding-left: 0;
-      padding-right: 0;
-      font-size: 13px;
-    }
-    &.footer-links--grouped {
-      .footer-links-group {
-        > .footer-links-item {
-          font-size: 14px;
-        }
-      }
-    }
-
-    &.footer-links--flow {
-      .footer-links-inner {
-        flex-direction: row;
-      }
-    }
-  }
-`;

package/src/Footer/social-media.jsx

@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types';
-import { styled } from '@arcblock/ux/lib/Theme';
-import Icon from '../Icon';
-
-export default function SocialMedia({ items = null, ...rest }) {
-  if (!items?.length) {
-    return null;
-  }
-  return (
-    <Root {...rest}>
-      {items.map((item, i) => {
-        return (
-          <a
-            // eslint-disable-next-line react/no-array-index-key
-            key={i}
-            href={item.link}
-            target="_blank"
-            aria-label={`Social media icon${item.title ? ` for ${item.title}` : ''}`}
-            rel="noreferrer">
-            <Icon icon={item.icon || item.title} size={24} component="span" />
-          </a>
-        );
-      })}
-    </Root>
-  );
-}
-
-SocialMedia.propTypes = {
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
-      icon: PropTypes.string,
-      link: PropTypes.string,
-    })
-  ),
-};
-
-const Root = styled('div')`
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  a {
-    color: ${(props) => props.theme.palette.text.secondary};
-    text-decoration: none;
-    transition: color 0.2s ease-in-out;
-    &:hover {
-      color: ${({ theme }) => theme.palette.text.primary};
-    }
-  }
-  ${(props) => props.theme.breakpoints.down('md')} {
-    gap: 12px;
-  }
-`;

package/src/Header/Header.stories.jsx

@@ -1,30 +0,0 @@
-import Basic from './demo/basic';
-import WithEnableConnectEnableLocale from './demo/with-enable-connect-enable-locale';
-import AddonsCustomization from './demo/addons-customization';
-
-export default {
-  title: 'Blocklet-UI-React/Header',
-
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Used to render a page header for Blocklet based on Blocklet runtime information. It requires a blocklet environment to work properly.',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1504%3A4630',
-    },
-  },
-  argTypes: {
-    maxWidth: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', false] },
-  },
-};
-
-AddonsCustomization.argTypes = {
-  overrideTheme: { control: 'boolean', defaultValue: false },
-};
-
-export { Basic, WithEnableConnectEnableLocale, AddonsCustomization };

package/src/Header/index.tsx

@@ -1,259 +0,0 @@
-import { useMemo, type JSX } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import { withErrorBoundary } from 'react-error-boundary';
-import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-import { styled, useTheme, deepmerge, ThemeProvider } from '@arcblock/ux/lib/Theme';
-import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
-import NavMenu, { Products, ProductsType } from '@arcblock/ux/lib/NavMenu';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import useBlockletLogo from '@arcblock/ux/lib/hooks/use-blocklet-logo';
-import omit from 'lodash/omit';
-import isFinite from 'lodash/isFinite';
-import type { BoxProps, Breakpoint, Theme } from '@mui/material';
-import clsx from 'clsx';
-import { getUTMUrl } from '@arcblock/ux/lib/withTracker/libs/utm';
-
-import Icon from '../Icon';
-import { mapRecursive, flatRecursive, matchPaths } from '../utils';
-import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
-import HeaderAddons from '../common/header-addons';
-import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
-import { BlockletMetaProps, SessionManagerProps } from '../@types';
-import withHideWhenEmbed from '../libs/with-hide-when-embed';
-
-const translations = {
-  en: {
-    products: 'Products',
-  },
-  zh: {
-    products: '产品',
-  },
-  'zh-TW': {
-    products: '產品',
-  },
-  ja: {
-    products: '製品',
-  },
-};
-
-// blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
-const parseNavigation = (navigation: any) => {
-  if (!navigation?.length) {
-    return { navItems: [], activeId: null };
-  }
-  let counter = 1;
-  const parseItem = (item: any) => {
-    const icon = item.icon ? <Icon icon={item.icon} /> : null;
-
-    // sub menu
-    if (item.items) {
-      return {
-        id: `${counter++}`,
-        label: item.title,
-        icon,
-        children: item.items,
-      };
-    }
-    let props = {};
-
-    // external link
-    if (item.link?.startsWith('http') || item.link?.startsWith('//')) {
-      props = {
-        target: '_blank',
-        rel: 'noreferrer',
-      };
-    }
-
-    return {
-      id: `${counter++}`,
-      label: (
-        <a href={getUTMUrl(item.link, 'header')} {...props}>
-          {item.title}
-        </a>
-      ),
-      icon,
-      description: item.description,
-      link: item.link,
-    };
-  };
-  const navItems = mapRecursive(navigation, parseItem, 'items');
-  const flattened = flatRecursive(navItems);
-  const matchedIndex = matchPaths(flattened.map((item) => item.link));
-  return { navItems, activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null };
-};
-
-type HeaderProps = {
-  meta?: BlockletMetaProps;
-  addons?: Function | React.ReactNode;
-  sessionManagerProps?: SessionManagerProps;
-  homeLink?: string | ((brandContent: React.ReactNode) => JSX.Element | null);
-  theme?: object;
-  hideNavMenu?: boolean;
-  bordered?: boolean;
-  logo?: React.ReactNode;
-  brand?: React.ReactNode;
-  brandAddon?: React.ReactNode;
-  description?: React.ReactNode;
-  children?: React.ReactNode;
-  prepend?: React.ReactNode;
-  align?: 'left' | 'right';
-  maxWidth?: false | Breakpoint;
-  showDomainWarningDialog?: boolean;
-};
-
-/**
- * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
- */
-// eslint-disable-next-line no-shadow
-
-function Header({
-  meta = {},
-  addons = undefined,
-  sessionManagerProps = {
-    showRole: true,
-  },
-  homeLink = publicPath,
-  theme: themeOverrides = {},
-  hideNavMenu = false,
-  showDomainWarningDialog = true,
-  ...rest
-}: HeaderProps & Omit<BoxProps, keyof HeaderProps>) {
-  useWalletHiddenTopbar();
-  const parentTheme = useTheme();
-  const { locale, defaultLocale } = useLocaleContext() || {};
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  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 mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]) as Theme;
-  const appLogo = useBlockletLogo({
-    meta,
-    theme: themeOverrides,
-  });
-
-  // 显示 Products 导航
-  const { productsOrder, productsType } = useMemo<{
-    productsOrder: number | null;
-    productsType: ProductsType | null;
-  }>(() => {
-    let { USE_ARCBLOCK_THEME, USE_AIGNE_THEME } = formattedBlocklet;
-    USE_ARCBLOCK_THEME = parseInt(USE_ARCBLOCK_THEME, 10);
-    USE_AIGNE_THEME = parseInt(USE_AIGNE_THEME, 10);
-
-    if (isFinite(USE_AIGNE_THEME)) {
-      return {
-        productsOrder: USE_AIGNE_THEME,
-        productsType: 'AIGNE',
-      };
-    }
-    if (isFinite(USE_ARCBLOCK_THEME)) {
-      return {
-        productsOrder: USE_ARCBLOCK_THEME,
-        productsType: 'ARCBLOCK',
-      };
-    }
-
-    return {
-      productsOrder: null,
-      productsType: null,
-    };
-  }, [formattedBlocklet]);
-
-  if (!formattedBlocklet.appName) {
-    return null;
-  }
-  const navigation = getLocalizedNavigation({
-    navigation: formattedBlocklet?.navigation?.header,
-    locale,
-    defaultLocale,
-  });
-
-  const parsedNavigation = parseNavigation(navigation);
-  const { navItems, activeId } = parsedNavigation;
-
-  if (productsType && Number.isInteger(productsOrder)) {
-    navItems.splice(productsOrder, 0, {
-      label: t('products'),
-      // eslint-disable-next-line react/no-unstable-nested-components
-      children: () => <Products type={productsType} />,
-    });
-  }
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const _addons =
-    typeof addons === 'function'
-      ? (builtInAddons: any) => addons(builtInAddons, { navigation: parsedNavigation })
-      : addons;
-  const headerAddons = (
-    // @ts-ignore
-    <HeaderAddons
-      formattedBlocklet={formattedBlocklet}
-      // @ts-ignore
-      addons={_addons}
-      // @ts-ignore
-      sessionManagerProps={sessionManagerProps}
-      showDomainWarningDialog={showDomainWarningDialog}
-    />
-  );
-
-  return (
-    <ThemeProvider theme={mergeTheme}>
-      <StyledUxHeader
-        // @ts-ignore
-        homeLink={homeLink}
-        logo={<img src={appLogo} alt="logo" />}
-        addons={headerAddons}
-        {...omit(rest, ['bordered'])}
-        $bordered={rest?.bordered}
-        $bgcolor={mergeTheme.palette.background.default}
-        className={clsx('blocklet__header', rest.className)}>
-        {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
-        {hideNavMenu || !navItems?.length
-          ? null
-          : ({ isMobile }: { isMobile: boolean }) => (
-              // @ts-ignore
-              <NavMenu
-                mode={isMobile ? 'inline' : 'horizontal'}
-                activeId={activeId}
-                items={navItems}
-                className="header-nav"
-                bgColor="transparent"
-                textColor={mergeTheme.palette.grey[500]}
-                activeTextColor={mergeTheme.palette.text.primary}
-              />
-            )}
-      </StyledUxHeader>
-    </ThemeProvider>
-  );
-}
-
-type StyledUxHeaderProps = {
-  $bordered?: boolean;
-  $bgcolor?: string;
-};
-
-const StyledUxHeader = styled(ResponsiveHeader)<StyledUxHeaderProps>`
-  ${({ $bgcolor }) => `background-color: ${$bgcolor || '#fff'};`}
-  .header-logo {
-    min-width: 44px;
-  }
-  ${({ $bordered, theme }) => ($bordered ? `border-bottom: 1px solid ${theme.palette.divider};` : '')}
-  ${(props) => props.theme.breakpoints.down('md')} {
-    .header-logo {
-      min-width: 32px;
-    }
-  }
-`;
-
-export default withErrorBoundary(withHideWhenEmbed(Header), {
-  FallbackComponent: ErrorFallback,
-});

package/src/Icon/Icon.stories.jsx

@@ -1,12 +0,0 @@
-export { default as Icon } from './demo/basic';
-
-export default {
-  title: 'Blocklet-UI-React/Icon',
-  parameters: {
-    docs: {
-      description: {
-        component: 'A wrapper for Material UI Avatar component that supports iconify icon.',
-      },
-    },
-  },
-};