@blocklet/ui-react 3.4.15 → 3.5.0

package/src/Dashboard/app-shell/badges/app-badge-default.tsx

@@ -1,130 +0,0 @@
-import { Box, BoxProps, Skeleton, styled, Typography } from '@mui/material';
-import { Icon } from '@iconify/react';
-import { TBox } from '@arcblock/ux/lib/MuiWrap';
-import { Link } from 'react-router-dom';
-
-export const isExternal = (to: string = ''): boolean => {
-  return to.startsWith('http:') || to.startsWith('https:');
-};
-
-export const isSameOrigin = (to: string): boolean => {
-  try {
-    const url = new URL(to);
-    return url.origin === window.location.origin;
-  } catch {
-    return false;
-  }
-};
-
-export const StateIcon = styled('span')<{ color: string }>(({ theme, color }) => {
-  return {
-    position: 'relative',
-    display: 'inline-block',
-    width: theme.spacing(1),
-    height: theme.spacing(1),
-    borderRadius: '50%',
-    backgroundColor: color,
-    marginRight: theme.spacing(1),
-  };
-});
-export const StyledBadge = styled(Box)(({ theme }) => ({
-  position: 'relative',
-  display: 'inline-flex',
-  alignItems: 'center',
-  height: theme.spacing(3),
-  paddingLeft: theme.spacing(1.5),
-  paddingRight: theme.spacing(1.5),
-  border: '1px solid',
-  borderColor: theme.palette.divider,
-  borderRadius: (theme.shape.borderRadius as number) * 0.5,
-  fontSize: 12,
-  overflow: 'hidden',
-  '& .app-badge-label': {
-    display: 'inline-flex',
-    gap: theme.spacing(1),
-    alignItems: 'center',
-    lineHeight: theme.spacing(3),
-    marginLeft: theme.spacing(-1.5),
-    paddingLeft: theme.spacing(1.5),
-    marginRight: theme.spacing(1),
-    fontSize: 12,
-    backgroundColor: theme.palette.grey[100],
-    color: theme.palette.text.secondary,
-    '&::after': {
-      content: '""',
-      height: theme.spacing(3),
-      borderRight: '1px solid',
-      borderColor: theme.palette.divider,
-      backgroundColor: theme.palette.grey[100],
-    },
-  },
-  '& .app-badge-value': {
-    color: theme.palette.text.primary,
-    fontSize: 12,
-  },
-})) as typeof TBox;
-
-export interface BadgeContainerProps extends Omit<BoxProps, 'to'> {
-  loading?: boolean;
-  to?: string;
-}
-
-export function BadgeContainer({ loading = false, children = null, to = '', ...rest }: BadgeContainerProps) {
-  const container = (
-    <StyledBadge className="app-badge" component={to ? 'a' : 'div'} href={to} {...rest}>
-      {children}
-    </StyledBadge>
-  );
-
-  if (loading) {
-    return <Skeleton variant="rounded">{container}</Skeleton>;
-  }
-
-  if (to) {
-    if (isExternal(to)) {
-      const target = isSameOrigin(to) ? '_self' : '_blank';
-
-      // 外部链接跳转
-      return (
-        <StyledBadge className="app-badge" component="a" href={to} target={target} rel="noreferrer noopener" {...rest}>
-          {children}
-        </StyledBadge>
-      );
-    }
-
-    // 内部路由跳转
-    return (
-      <StyledBadge className="app-badge" component={Link} to={to} {...rest}>
-        {children}
-      </StyledBadge>
-    );
-  }
-
-  // 无跳转
-  return (
-    <StyledBadge className="app-badge" component="div" {...rest}>
-      {children}
-    </StyledBadge>
-  );
-}
-
-export interface AppBadgeDefaultProps extends BadgeContainerProps {
-  icon?: string;
-  label?: string;
-  value?: string | number;
-  round?: number;
-}
-
-export function AppBadgeDefault({ icon = '', label = '', value = '', loading = false, ...rest }: AppBadgeDefaultProps) {
-  return (
-    <BadgeContainer loading={loading} {...rest}>
-      {label && (
-        <Typography className="app-badge-label">
-          {icon && <Icon icon={icon} />}
-          {label}
-        </Typography>
-      )}
-      <Typography className="app-badge-value">{value}</Typography>
-    </BadgeContainer>
-  );
-}

package/src/Dashboard/app-shell/badges/app-badge-did.tsx

@@ -1,28 +0,0 @@
-import { useCreation } from 'ahooks';
-import { Typography } from '@mui/material';
-import { isEthereumDid } from '@arcblock/ux/lib/Util';
-import DidAddress from '@arcblock/ux/lib/Address';
-import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';
-
-export interface AppBadgeDIDProps extends Omit<AppBadgeDefaultProps, 'value'> {
-  value?: string;
-}
-
-export function AppBadgeDID({ value = '', loading = false, ...rest }: AppBadgeDIDProps) {
-  const label = useCreation(() => {
-    const isEthDid = isEthereumDid(value);
-
-    return `DID:${isEthDid ? 'ETH' : 'ABT'}`;
-  }, [value]);
-
-  return (
-    <BadgeContainer loading={loading} {...rest}>
-      <Typography className="app-badge-label">{label}</Typography>
-      <Typography className="app-badge-value">
-        <DidAddress inline size={14} compact responsive={false}>
-          {value}
-        </DidAddress>
-      </Typography>
-    </BadgeContainer>
-  );
-}

package/src/Dashboard/app-shell/badges/app-badge-state.tsx

@@ -1,40 +0,0 @@
-import { useTheme, alpha, Typography, styled } from '@mui/material';
-import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';
-import { BadgeColor, getBgColor, getTextColor } from './app-badge-version';
-
-const StateIcon = styled('span')<{ color: string }>(({ theme, color }) => {
-  return {
-    position: 'relative',
-    display: 'inline-block',
-    width: theme.spacing(1),
-    height: theme.spacing(1),
-    borderRadius: '50%',
-    backgroundColor: color,
-    marginRight: theme.spacing(1),
-  };
-});
-
-export interface AppBadgeStateProps extends AppBadgeDefaultProps {
-  color?: BadgeColor;
-}
-
-export function AppBadgeState({ value = '', color = 'primary', loading = false, ...rest }: AppBadgeStateProps) {
-  const theme = useTheme();
-  const txtcolor = getTextColor(theme, color);
-  const bgcolor = getBgColor(theme, color);
-
-  return (
-    <BadgeContainer
-      loading={loading}
-      sx={{
-        borderColor: alpha(txtcolor, 0.2),
-        bgcolor,
-      }}
-      {...rest}>
-      <StateIcon color={getTextColor(theme, color)} />
-      <Typography className="app-badge-value" style={{ color: txtcolor }}>
-        {value}
-      </Typography>
-    </BadgeContainer>
-  );
-}

package/src/Dashboard/app-shell/badges/app-badge-switch.tsx

@@ -1,72 +0,0 @@
-import { Box, Typography, useTheme } from '@mui/material';
-import { useMemoizedFn } from 'ahooks';
-import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';
-
-export interface AppBadgeSwitchProps extends Omit<AppBadgeDefaultProps, 'value' | 'onChange'> {
-  value?: unknown;
-  trueValue?: unknown;
-  falseValue?: unknown;
-  onChange?: (checked: boolean) => void;
-}
-
-export function AppBadgeSwitch({
-  label = '',
-  value = undefined,
-  trueValue = true,
-  falseValue = false,
-  loading = false,
-  onChange = undefined,
-  ...rest
-}: AppBadgeSwitchProps) {
-  const theme = useTheme();
-  let checked = false;
-  const handleClick = useMemoizedFn(() => onChange?.(!checked));
-
-  if (value === trueValue) {
-    checked = true;
-  } else if (value === falseValue) {
-    checked = false;
-  } else {
-    checked = Boolean(value);
-  }
-
-  return (
-    <BadgeContainer
-      loading={loading}
-      sx={{
-        cursor: 'pointer',
-        backgroundColor: checked ? 'primary.main' : 'grey.100',
-        borderColor: checked ? 'primary.main' : 'divider',
-        transition: 'background-color 0.3s ease',
-      }}
-      onClick={handleClick}
-      {...rest}>
-      {/* 内容 */}
-      <Typography
-        sx={{
-          fontWeight: 400,
-          paddingLeft: checked ? 0 : theme.spacing(2.5),
-          paddingRight: checked ? theme.spacing(2.5) : 0,
-          color: checked ? 'common.white' : 'text.secondary',
-          transition: 'color 0.3s ease',
-        }}>
-        {label}
-      </Typography>
-      {/* 滑块 */}
-      <Box
-        sx={{
-          width: theme.spacing(2.5),
-          height: theme.spacing(2.5),
-          borderRadius: `${(theme.shape.borderRadius as number) * 0.5}px`,
-          backgroundColor: 'common.white',
-          position: 'absolute',
-          top: '50%',
-          left: checked ? `calc(100% - ${theme.spacing(3)})` : theme.spacing(0.5),
-          transform: 'translateY(-50%)',
-          transition: 'left 0.3s ease',
-          boxShadow: 1,
-        }}
-      />
-    </BadgeContainer>
-  );
-}

package/src/Dashboard/app-shell/badges/app-badge-version.tsx

@@ -1,60 +0,0 @@
-import { LiteralUnion } from 'type-fest';
-import { alpha, Theme, Typography, useTheme } from '@mui/material';
-import { Icon } from '@iconify/react';
-import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';
-
-export type ColorKey = 'primary' | 'info' | 'success' | 'error' | 'warning';
-export type BadgeColor = LiteralUnion<ColorKey, string>;
-export const colorMap: Record<ColorKey, (theme: Theme) => { main: string }> = {
-  primary: (theme) => theme.palette.primary,
-  info: (theme) => theme.palette.info,
-  success: (theme) => theme.palette.success,
-  error: (theme) => theme.palette.error,
-  warning: (theme) => theme.palette.warning,
-};
-
-export const getBgColor = (theme: Theme, color: BadgeColor): string => {
-  if (colorMap[color as ColorKey]) {
-    const c = colorMap[color as ColorKey](theme).main;
-    return alpha(c, 0.1);
-  }
-  return alpha(color, 0.1);
-};
-
-export const getTextColor = (theme: Theme, color: BadgeColor): string => {
-  if (colorMap[color as ColorKey]) {
-    return colorMap[color as ColorKey](theme).main;
-  }
-  return color;
-};
-
-export interface AppBadgeVersionProps extends AppBadgeDefaultProps {
-  color?: string | ColorKey;
-}
-
-export function AppBadgeVersion({
-  icon = '',
-  value = '',
-  color = 'info',
-  loading = false,
-  ...rest
-}: AppBadgeVersionProps) {
-  const theme = useTheme();
-  const txtcolor = getTextColor(theme, color);
-  const bgcolor = getBgColor(theme, color);
-
-  return (
-    <BadgeContainer
-      loading={loading}
-      sx={{
-        borderColor: alpha(txtcolor, 0.2),
-        bgcolor,
-      }}
-      {...rest}>
-      <Icon icon={icon || 'lucide:orbit'} style={{ marginRight: 6 }} />
-      <Typography className="app-badge-value" style={{ color: txtcolor }}>
-        v {value}
-      </Typography>
-    </BadgeContainer>
-  );
-}

package/src/Dashboard/app-shell/index.ts

@@ -1,5 +0,0 @@
-import AppHeader from './app-header';
-import AppBadge from './app-badge';
-import { AppInfoProvider, useAppInfo } from './app-info-context';
-
-export { AppHeader, AppBadge, AppInfoProvider, useAppInfo };

package/src/Dashboard/index.jsx

@@ -1,184 +0,0 @@
-import 'iconify-icon';
-
-/* eslint-disable no-shadow */
-import { useMemo, useLayoutEffect, use } from 'react';
-import PropTypes from 'prop-types';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import UxImg from '@arcblock/ux/lib/Img';
-import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
-import useBlockletLogo from '@arcblock/ux/lib/hooks/use-blocklet-logo';
-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';
-import { AppHeader, AppBadge, AppInfoProvider, useAppInfo } from './app-shell';
-
-/**
- * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
- */
-function Dashboard({
-  meta = undefined,
-  fallbackUrl = publicPath,
-  invalidPathFallback = null,
-  headerAddons = undefined,
-  sessionManagerProps = {
-    showRole: true,
-    // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
-    onLogout: () => {
-      // 这里是安全的
-      window.location.href = publicPath;
-    },
-  },
-  links = [],
-  showDomainWarningDialog = true,
-  appPath = undefined,
-  appTab = undefined,
-  onAppTabChange = undefined,
-  children = undefined,
-  ...rest
-}) {
-  useWalletHiddenTopbar();
-  const sessionCtx = use(SessionContext);
-  const user = sessionCtx?.session?.user;
-  const userRole = user?.role;
-  const { locale, defaultLocale } = 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(() => {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    let localizedNav =
-      getLocalizedNavigation({
-        navigation: formattedBlocklet?.navigation?.dashboard,
-        locale,
-        defaultLocale,
-      }) || [];
-    // 根据 role 筛选 nav 数据
-    localizedNav = filterNavByRole(localizedNav, userRole);
-    // 将 nav 数据处理成 ux dashboard 需要的格式
-    localizedNav = mapRecursive(
-      localizedNav,
-      (item) => {
-        let icon = null;
-
-        if (item.icon) {
-          if (item.icon.startsWith('http') || item.icon.startsWith('data:')) {
-            icon = <UxImg src={item.icon} />;
-          } else {
-            icon = <iconify-icon height="100%" width="100%" icon={item.icon} />;
-          }
-        }
-
-        return {
-          id: item.id,
-          title: item.title,
-          url: item.link,
-          icon,
-          // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
-          external: true,
-          children: item.items,
-        };
-      },
-      'items'
-    );
-    // 展平后使用 matchPaths 检测 link#active 状态
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const flattened = flatRecursive(localizedNav).filter((item) => !!item.url);
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    const matchedIndex = matchPaths(flattened.map((item) => item.url));
-    if (matchedIndex !== -1) {
-      flattened[matchedIndex].active = true;
-    }
-    return { localizedNav, flattened, matchedIndex };
-  }, [formattedBlocklet, locale, defaultLocale, userRole]);
-
-  const allLinks = typeof links === 'function' ? links(localizedNav) : [...localizedNav, ...links];
-  const appLogo = useBlockletLogo({
-    meta,
-  });
-
-  // 页面初始化时, 如果当前用户没有权限访问任何导航菜单 (比如登录时未提供 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 {
-        // FIXME: @zhanghan 暂时取消跳转首个 url 的行为
-        // window.location.href = flattened[0]?.url || publicPath;
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [invalidPathFallback, flattened, matchedIndex]);
-
-  if (!formattedBlocklet.appName) {
-    return null;
-  }
-  const { appName } = formattedBlocklet;
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const _headerAddons = (
-    <HeaderAddons
-      formattedBlocklet={formattedBlocklet}
-      addons={headerAddons}
-      sessionManagerProps={sessionManagerProps}
-      showDomainWarningDialog={showDomainWarningDialog}
-    />
-  );
-
-  return (
-    <UxDashboard
-      title={appName}
-      fullWidth
-      sidebarWidth={128}
-      legacy={false}
-      links={allLinks}
-      {...rest}
-      headerProps={{
-        homeLink: publicPath,
-        logo: <img src={appLogo} alt="logo" />,
-        addons: _headerAddons,
-        ...rest.headerProps,
-      }}>
-      <AppInfoProvider path={appPath} currentTab={appTab} meta={meta}>
-        <AppHeader onTabChange={onAppTabChange} />
-        {children}
-      </AppInfoProvider>
-    </UxDashboard>
-  );
-}
-
-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: SessionManagerProps,
-  links: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
-  showDomainWarningDialog: PropTypes.bool,
-  appPath: PropTypes.string,
-  appTab: PropTypes.string,
-  onAppTabChange: PropTypes.func,
-  children: PropTypes.node,
-};
-
-export { AppHeader, AppBadge, AppInfoProvider, useAppInfo };
-export default Dashboard;

package/src/Footer/Footer.stories.jsx

@@ -1,33 +0,0 @@
-import Brand from './demo/brand';
-import Links from './demo/links';
-import SocialMediaIcons from './demo/social-media-icons';
-import Copyright from './demo/copyright';
-import Footer from './demo/footer';
-import ArcblockSite from './demo/arcblock-site';
-import AigneSite from './demo/aigne-site';
-
-export default {
-  title: 'Blocklet-UI-React/Footer',
-
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Used to render a page footer for Blocklet based on Blocklet runtime information. It requires a blocklet environment to work properly.',
-      },
-    },
-  },
-};
-
-Footer.argTypes = {
-  layout: { control: 'select', options: ['auto', 'standard', 'plain'] },
-  emptyNavData: { control: 'boolean', defaultValue: false },
-  overrideTheme: { control: 'boolean', defaultValue: false },
-};
-
-ArcblockSite.argTypes = {
-  locale: { control: 'select', options: ['en', 'zh'] },
-};
-
-export { Brand, Links, SocialMediaIcons, Copyright, Footer, ArcblockSite, AigneSite };

package/src/Footer/brand.jsx

@@ -1,81 +0,0 @@
-import { isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@arcblock/ux/lib/Theme';
-import { Box } from '@mui/material';
-
-export default function Brand({ name = '', logo = '', description = '', ...rest }) {
-  if (!name && !logo && !description) {
-    return null;
-  }
-
-  const logoElement = isValidElement(logo) ? logo : <img src={logo} alt={name} />;
-
-  return (
-    <Root {...rest}>
-      <div>
-        {logo && (
-          <Box component="a" href="/" className="footer-brand-logo">
-            {logoElement}
-          </Box>
-        )}
-        {name && <div className="footer-brand-name">{name}</div>}
-      </div>
-      {description && <div className="footer-brand-desc">{description}</div>}
-    </Root>
-  );
-}
-
-Brand.propTypes = {
-  name: PropTypes.node,
-  logo: PropTypes.node,
-  description: PropTypes.string,
-};
-
-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: 12px;
-    line-height: 1;
-    img,
-    svg {
-      width: auto;
-      height: 40px;
-      max-height: 40px;
-    }
-  }
-  .footer-brand-name {
-    font-size: 18px;
-    color: ${(props) => props.theme.palette.grey[900]};
-  }
-  .footer-brand-desc {
-    white-space: pre-line;
-    margin-top: 16px;
-    color: ${(props) => props.theme.palette.text.secondary};
-  }
-
-  ${(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/src/Footer/copyright.jsx

@@ -1,22 +0,0 @@
-import { styled } from '@arcblock/ux/lib/Theme';
-import PropTypes from 'prop-types';
-
-export default function Copyright({ owner = 'ArcBlock', year = `${new Date().getFullYear()}`, ...rest }) {
-  return (
-    <Root {...rest}>
-      Copyright © {year} {owner}
-    </Root>
-  );
-}
-
-Copyright.propTypes = {
-  owner: PropTypes.string,
-  year: PropTypes.string,
-};
-
-const Root = styled('p')`
-  display: flex;
-  align-items: center;
-  margin: 0;
-  font-size: 13px;
-`;