@arcblock/ux 2.13.70 → 3.0.1

package/src/UserCard/Content/basic.tsx

@@ -1,7 +1,4 @@
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import useTheme from '@mui/material/styles/useTheme';
+import { Typography, Box, Grid, useTheme } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import styled from '@emotion/styled';
 import isArray from 'lodash/isArray';
@@ -12,8 +9,8 @@ import PhoneIcon from '@arcblock/icons/lib/Phone';
 import LocationIcon from '@arcblock/icons/lib/Location';
 import EmailIcon from '@arcblock/icons/lib/Email';
 import TimezoneIcon from '@arcblock/icons/lib/Timezone';
-import { joinURL, withoutProtocol } from 'ufo';
-import { useState, useMemo, useCallback } from 'react';
+import { withoutProtocol } from 'ufo';
+import { useMemo, useCallback } from 'react';
 
 import { User } from '../types';
 import Clock from './clock';
@@ -50,7 +47,6 @@ const iconSize = {
 };
 interface BasicContentProps {
   user: User;
-  isFull?: boolean;
   renderFields?: string[];
 }
 
@@ -65,7 +61,13 @@ function TimeZoneField({ value }: { value: string }) {
   const theme = useTheme();
   const isDark = theme.palette.mode === 'dark';
   return (
-    <Box display="flex" alignItems="center" gap={1} className="user-card__timezone-field">
+    <Box
+      className="user-card__timezone-field"
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+      }}>
       <TimezoneIcon {...iconSize} style={convertIconColor(isDark)} />
       <Clock value={value} variant="body2" color="grey.800" />
     </Box>
@@ -73,34 +75,12 @@ function TimeZoneField({ value }: { value: string }) {
 }
 
 function LinkField({ value }: { value: string }) {
-  const [useFallback, setUseFallback] = useState(false);
   const theme = useTheme();
   const isDark = theme.palette.mode === 'dark';
-  const faviconUrl = useCreation(() => {
-    try {
-      const url = new URL(value);
-      return joinURL(url.origin, 'favicon.ico');
-    } catch (e) {
-      return '';
-    }
-  }, [value]);
-
-  const handleImageError = () => {
-    setUseFallback(true);
-  };
 
   return (
     <Box display="flex" alignItems="center" gap={1} className="user-card__link-field">
-      {faviconUrl && !useFallback ? (
-        <img
-          src={faviconUrl}
-          alt="site icon"
-          style={{ width: 16, height: 16, objectFit: 'contain' }}
-          onError={handleImageError}
-        />
-      ) : (
-        <LinkIcon {...iconSize} style={convertIconColor(isDark)} />
-      )}
+      <LinkIcon {...iconSize} style={convertIconColor(isDark)} />
       <LineText variant="body2" color="grey.800">
         <Typography
           component="a"
@@ -108,8 +88,10 @@ function LinkField({ value }: { value: string }) {
           style={{ textDecoration: 'none', color: 'inherit', fontSize: 'inherit' }}
           target="_blank"
           variant="body2"
-          color="grey.800"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+          sx={{
+            color: 'grey.800',
+          }}>
           {formatLinkDisplay(value)}
         </Typography>
       </LineText>
@@ -123,7 +105,14 @@ function BasicField({ field, value, children }: { field: string; value: string;
   const isDark = theme.palette.mode === 'dark';
   const iconColor = convertIconColor(isDark);
   return (
-    <Box key={field} display="flex" alignItems="center" gap={1} className={`user-card__${field}-field`}>
+    <Box
+      key={field}
+      className={`user-card__${field}-field`}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+      }}>
       {Icon ? (
         <Icon {...iconSize} style={iconColor} />
       ) : (
@@ -136,7 +125,7 @@ function BasicField({ field, value, children }: { field: string; value: string;
   );
 }
 
-function BasicContent({ user, isFull = false, renderFields }: BasicContentProps) {
+function BasicContent({ user, renderFields }: BasicContentProps) {
   const fields = useCreation(() => {
     return renderFields ?? ['bio', 'email', 'phone', 'location', 'timezone', 'link'];
   }, [renderFields]);
@@ -291,7 +280,14 @@ function BasicContent({ user, isFull = false, renderFields }: BasicContentProps)
   };
 
   return (
-    <Box mt={1} display="flex" flexDirection="column" gap={1.5} className="user-card__basic-content">
+    <Box
+      className="user-card__basic-content"
+      sx={{
+        mt: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1.5,
+      }}>
       {includeBio && user.metadata?.bio && (
         <LineText variant="body2" color="grey.800" className="user-card__bio-field">
           {user.metadata.bio}
@@ -301,13 +297,18 @@ function BasicContent({ user, isFull = false, renderFields }: BasicContentProps)
       {useDoubleColumn ? (
         <Grid container spacing={0.5}>
           {renderItems.map((item) => (
-            <Grid item xs={6} key={item.key}>
+            <Grid key={item.key} size={6}>
               {renderItem(item)}
             </Grid>
           ))}
         </Grid>
       ) : (
-        <Box display="flex" flexDirection="column" gap={0.5}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.5,
+          }}>
           {renderItems.map((item) => renderItem(item))}
         </Box>
       )}

package/src/UserCard/Content/clock.tsx

@@ -1,6 +1,4 @@
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
+import { Tooltip, Typography, Box, type SxProps } from '@mui/material';
 import { useMemoizedFn } from 'ahooks';
 import useClock from '../../hooks/use-clock';
 import { translate } from '../../Locale/util';
@@ -26,7 +24,7 @@ const translations = {
     },
   },
 };
-export default function Clock({ value, ...props }: { value: string; [key: string]: any }) {
+export default function Clock({ value, ...props }: { value: string; sx?: SxProps; [key: string]: any }) {
   const { locale } = useLocaleContext() || { locale: 'en' };
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -34,7 +32,16 @@ export default function Clock({ value, ...props }: { value: string; [key: string
   const timeInfo = useClock(value, locale);
 
   return (
-    <Box display="flex" alignItems="center" gap={1} flex={1} justifyContent="flex-start" overflow="hidden" width="100%">
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        flex: 1,
+        justifyContent: 'flex-start',
+        overflow: 'hidden',
+        width: '100%',
+      }}>
       <Typography
         {...props}
         noWrap
@@ -57,9 +64,9 @@ export default function Clock({ value, ...props }: { value: string; [key: string
         arrow>
         <Typography
           component="span"
-          fontSize={14}
           noWrap
           sx={{
+            fontSize: 14,
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             textOverflow: 'ellipsis',

package/src/UserCard/Content/minimal.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { Typography, Box } from '@mui/material';
-import DID from '../../DID';
+import { DID } from '../../DID';
 import { User, UserCardProps } from '../types';
 import TooltipAvatar from './tooltip-avatar';
 import { renderTopRight } from '../components';
@@ -32,8 +32,22 @@ function MinimalContent(props: MinimalContentProps) {
   } = props;
 
   return (
-    <Box display="flex" justifyContent="space-between" alignItems="center" className="user-card__avatar-content">
-      <Box display="flex" justifyContent="flex-start" alignItems="center" gap={1} flex={1} minWidth={0}>
+    <Box
+      className="user-card__avatar-content"
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          gap: 1,
+          flex: 1,
+          minWidth: 0,
+        }}>
         <TooltipAvatar
           user={user}
           avatarSize={avatarSize}
@@ -45,12 +59,14 @@ function MinimalContent(props: MinimalContentProps) {
         <Box>
           <Typography
             variant="subtitle1"
-            fontWeight={500}
-            color="text.primary"
             className="user-card__full-name-label"
-            fontSize={18}
             noWrap
-            sx={{ lineHeight: 1.1 }}>
+            sx={{
+              fontWeight: 500,
+              color: 'text.primary',
+              fontSize: 18,
+              lineHeight: 1.1,
+            }}>
             {renderName ? (
               renderName(user)
             ) : (

package/src/UserCard/Content/tooltip-avatar.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box, Tooltip } from '@mui/material';
+import { Zoom, Tooltip } from '@mui/material';
 
-import Zoom from '@mui/material/Zoom';
 import { User, UserCardProps } from '../types';
 import { renderAvatar } from '../components';
 
@@ -53,18 +52,22 @@ function TooltipAvatar({
         title={renderCardContent ? renderCardContent() : null}
         placement="bottom"
         arrow={false}
-        TransitionComponent={Zoom}
-        PopperProps={{
-          sx: {
-            '& .MuiTooltip-tooltip': {
-              backgroundColor: 'transparent',
-              p: 0,
-              maxWidth: 500,
-              zIndex: 1000,
+        {...(tooltipProps ?? {})}
+        slotProps={{
+          popper: {
+            sx: {
+              '& .MuiTooltip-tooltip': {
+                backgroundColor: 'transparent',
+                p: 0,
+                maxWidth: 500,
+                zIndex: 1000,
+              },
             },
           },
         }}
-        {...(tooltipProps ?? {})}>
+        slots={{
+          transition: Zoom,
+        }}>
         {avatarElement}
       </Tooltip>
     );

package/src/UserCard/UserCard.stories.jsx

@@ -0,0 +1,18 @@
+export { default as Basic } from './demo/basic';
+export { default as AvatarWithHover } from './demo/avatarWithHover';
+export { default as DetailedCard } from './demo/detailedCard';
+export { default as DidControl } from './demo/didControl';
+export { default as TopRightContent } from './demo/topRightContent';
+export { default as CustomFooter } from './demo/customFooter';
+export { default as DidOnlyAvatar } from './demo/did-only-avatar';
+
+export default {
+  title: 'Data Display/UserCard',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Used to display user information.',
+      },
+    },
+  },
+};

package/src/UserCard/components.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import Box from '@mui/material/Box';
-import MaterialAvatar from '@mui/material/Avatar';
+import { Box, Avatar as MaterialAvatar } from '@mui/material';
 import Avatar from '../Avatar';
 import { User, UserCardProps } from './types';
 import { createNameOnlyAvatar } from './utils';
@@ -43,7 +42,11 @@ export const renderAvatar = (
 
   // 显示用户头像
   return (
-    <Box className="user-card__avatar" display="flex">
+    <Box
+      className="user-card__avatar"
+      sx={{
+        display: 'flex',
+      }}>
       <Avatar
         size={avatarSize}
         did={user.did}

package/src/UserCard/index.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import { toTypeInfo } from '@arcblock/did';
 import type { User } from './types';
 import { UserCardProps, CardType } from './types';
 import AvatarOnlyCard from './Cards/avatar-only';

package/src/Util/WebWalletOpener.stories.jsx

@@ -0,0 +1,5 @@
+export { default as WebWalletOpener } from './demo/web-wallet-opener';
+
+export default {
+  title: 'ArcBlock/WebWalletOpener',
+};

package/src/Util/index.ts

@@ -8,6 +8,14 @@ import pRetry from 'p-retry';
 import Cookies from 'js-cookie';
 import colorConvert from 'color-convert';
 import deepmerge, { type DeepmergeOptions } from '@mui/utils/deepmerge';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
 import { DID_PREFIX, BLOCKLET_SERVICE_PATH_PREFIX } from './constant';
 import type { $TSFixMe, Locale } from '../type';
 import { getFederatedEnabled } from './federated';
@@ -164,9 +172,10 @@ export function mergeProps<P extends object>(
   jsonAttrs: string[] = []
 ) {
   const newProps = Object.assign({}, props);
-  Object.keys(component.defaultProps || {}).forEach((x) => {
+  const defaultProps = (component as any).defaultProps || {};
+  Object.keys(defaultProps).forEach((x) => {
     if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
-      newProps[x] = component.defaultProps![x as keyof P];
+      newProps[x] = defaultProps[x];
     }
   });
 
@@ -248,7 +257,32 @@ const createDateFormatter =
   (format: string) =>
   (date: string | number | Date, { locale, tz, isUtc }: { locale?: Locale; tz?: string; isUtc?: boolean } = {}) => {
     if (dateTool === null) {
-      throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
+      // 作为默认的 dateTool 使用
+      dayjs.extend(localizedFormat);
+      dayjs.extend(utc);
+      dayjs.extend(timezone);
+      dayjs.extend(updateLocale);
+      dayjs.extend(relativeTime);
+      dayjs.updateLocale('zh-cn', {
+        // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
+        relativeTime: {
+          future: '%s后',
+          past: '%s前',
+          s: '几秒',
+          m: '1 分钟',
+          mm: '%d 分钟',
+          h: '1 小时',
+          hh: '%d 小时',
+          d: '1 天',
+          dd: '%d 天',
+          M: '1 个月',
+          MM: '%d 个月',
+          y: '1 年',
+          yy: '%d 年',
+        },
+      });
+      setDateTool(dayjs);
+      // throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
     }
 
     if (isNil(date) || date === '') {

package/src/VerificationCode/index.tsx

@@ -45,20 +45,6 @@ export default function VerificationCode({
           key={`code-input-${index}`}
           value={trim(code[index]) || ''}
           type="number"
-          inputProps={{
-            maxLength: 1,
-            sx: {
-              textAlign: 'center',
-              fontSize: '1.5rem',
-              '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
-                WebkitAppearance: 'none',
-                margin: 0,
-              },
-            },
-            autoComplete: 'off',
-            pattern: '[0-9]',
-            inputMode: 'numeric',
-          }}
           onChange={(e) => {
             const newCode = code.split('');
             newCode[index] = e.target.value;
@@ -74,6 +60,22 @@ export default function VerificationCode({
           }}
           required
           autoComplete="off"
+          slotProps={{
+            htmlInput: {
+              maxLength: 1,
+              sx: {
+                textAlign: 'center',
+                fontSize: '1.5rem',
+                '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                  WebkitAppearance: 'none',
+                  margin: 0,
+                },
+              },
+              autoComplete: 'off',
+              pattern: '[0-9]',
+              inputMode: 'numeric',
+            },
+          }}
         />
       ))}
     </Box>

package/src/Video/Video.stories.jsx

@@ -0,0 +1,6 @@
+export { default as Youtube } from './demo/youtube';
+export { default as Tentent } from './demo/tentent';
+
+export default {
+  title: 'Data Display/Video',
+};

package/src/Video/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import Player from 'react-player';
-import CircularProgress from '@mui/material/CircularProgress';
+import { CircularProgress } from '@mui/material';
+import isUndefined from 'lodash/isUndefined';
 
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
@@ -12,7 +13,20 @@ export interface VideoProps {
   style?: React.CSSProperties;
 }
 
-export default function Video(props: VideoProps) {
+export default function Video(rawProps: VideoProps) {
+  const props = Object.assign({}, rawProps);
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.width)) {
+    props.width = 640;
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.height)) {
+    props.height = 400;
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.style)) {
+    props.style = {};
+  }
   const newProps = mergeProps(props, Video, ['style']);
   const { url, width, height, style } = newProps;
   const [loaded, setLoaded] = useState(false);
@@ -40,12 +54,6 @@ export default function Video(props: VideoProps) {
   );
 }
 
-Video.defaultProps = {
-  width: 640,
-  height: 400,
-  style: {},
-};
-
 const Placeholder = styled('div')`
   background-color: #222222;
   display: flex;

package/src/Wallet/Action.stories.jsx

@@ -0,0 +1,8 @@
+export { default as DifferentSizes } from './demo/action-different-sizes';
+export { default as DifferentAction } from './demo/action-different-action';
+export { default as TextLayout } from './demo/action-text-layout';
+export { default as CustomizeStyle } from './demo/action-customize-style';
+
+export default {
+  title: 'ArcBlock/Wallet/Action',
+};

package/src/Wallet/Action.tsx

@@ -1,4 +1,5 @@
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
+import isUndefined from 'lodash/isUndefined';
 
 import logo from './images/abtwallet.png';
 import { mergeProps } from '../Util';
@@ -13,7 +14,24 @@ export interface WalletActionProps {
   style?: React.CSSProperties;
 }
 
-export default function WalletAction(props: WalletActionProps) {
+export default function WalletAction(rawProps: WalletActionProps) {
+  const props = Object.assign({}, rawProps);
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.action)) {
+    props.action = 'Login';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.textLayout)) {
+    props.textLayout = 'vertical';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.size)) {
+    props.size = 'medium';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.style)) {
+    props.style = {};
+  }
   const newProps = mergeProps(props, WalletAction, ['style']);
   const { action, size, textLayout, style = {}, ...rest } = newProps;
   const styles = Object.assign({}, style, { border: 'none', padding: 0 });
@@ -38,13 +56,6 @@ export default function WalletAction(props: WalletActionProps) {
   );
 }
 
-WalletAction.defaultProps = {
-  action: 'Login',
-  textLayout: 'vertical' as const,
-  size: 'medium' as const,
-  style: {},
-};
-
 const sizes = {
   logo: {
     small: 32,

package/src/Wallet/Download.stories.jsx

@@ -0,0 +1,9 @@
+export { default as VerticalLayout } from './demo/download-vertical-layout';
+export { default as CustomTitle } from './demo/download-custom-title';
+export { default as HorizontalLayout1 } from './demo/download-horizontal-layout1';
+export { default as HorizontalLayout2 } from './demo/download-horizontal-layout2';
+export { default as HorizontalLayout3 } from './demo/download-horizontal-layout3';
+
+export default {
+  title: 'ArcBlock/Wallet/Download',
+};

package/src/Wallet/Download.tsx

@@ -1,6 +1,6 @@
-import Typography from '@mui/material/Typography';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import { type SxProps } from '@mui/material';
+import { Typography, type SxProps } from '@mui/material';
+import isUndefined from 'lodash/isUndefined';
 
 import AppStoreIcon from './images/app-store.svg?react';
 import GooglePlayIcon from './images/google-play.svg?react';
@@ -23,8 +23,41 @@ export interface WalletDownloadProps extends React.HTMLAttributes<HTMLDivElement
   sx?: SxProps;
 }
 
-export default function WalletDownload(props: WalletDownloadProps) {
+export default function WalletDownload(rawProps: WalletDownloadProps) {
   const browser = useBrowser();
+  const props = Object.assign({}, rawProps);
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.title)) {
+    props.title = 'Download DID Wallet';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.layout)) {
+    props.layout = 'vertical';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.storeLayout)) {
+    props.storeLayout = 'horizontal';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.locale)) {
+    props.locale = 'zh';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.iosLink)) {
+    props.iosLink = 'https://itunes.apple.com/app/id1460083542';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.androidLink)) {
+    props.androidLink = 'https://play.google.com/store/apps/details?id=com.arcblock.wallet.app.product';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.androidDownLoadUrl)) {
+    props.androidDownLoadUrl = 'https://releases.arcblockio.cn/arcwallet_android/latest/abtwallet.apk';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.style)) {
+    props.style = {};
+  }
   const newProps = mergeProps(props, WalletDownload, ['style']) as WalletDownloadProps;
   const { title, children, iosLink, androidLink, androidDownLoadUrl, locale, ...rest } = newProps;
 
@@ -87,17 +120,6 @@ export default function WalletDownload(props: WalletDownloadProps) {
   );
 }
 
-WalletDownload.defaultProps = {
-  title: 'Download DID Wallet',
-  layout: 'vertical',
-  storeLayout: 'horizontal',
-  iosLink: 'https://itunes.apple.com/app/id1460083542',
-  androidLink: 'https://play.google.com/store/apps/details?id=com.arcblock.wallet.app.product',
-  androidDownLoadUrl: 'https://releases.arcblockio.cn/arcwallet_android/latest/abtwallet.apk',
-  style: {},
-  locale: 'zh',
-} as const;
-
 type ContainerProps = {
   layout?: WalletDownloadProps['layout'];
   storeLayout?: WalletDownloadProps['storeLayout'];

package/src/Wallet/Open.tsx

@@ -1,5 +1,5 @@
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import Fab from '@mui/material/Fab';
+import { Fab } from '@mui/material';
 
 import { styled } from '../Theme';
 import type { Locale } from '../type';

package/src/Wallet/OpenInWallet.stories.jsx

@@ -0,0 +1,5 @@
+export { default as OpenInWallet } from './demo/open-in-wallet';
+
+export default {
+  title: 'ArcBlock/Wallet/OpenInWallet',
+};

package/src/WechatPrompt/index.tsx

@@ -1,5 +1,4 @@
-import Typography from '@mui/material/Typography';
-import Dialog from '@mui/material/Dialog';
+import { Typography, Dialog } from '@mui/material';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 
 import IosImage from './images/ios.png';