@arcblock/ux 2.13.70 → 3.0.1

package/src/Address/responsive-did-address.tsx

@@ -1,5 +1,5 @@
 import { useDebounceFn, useLatest } from 'ahooks';
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
 import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-address';
@@ -14,103 +14,108 @@ import { getFontSize } from '../Util';
  * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
  */
-const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAddressProps>(
-  ({ style, className, component = 'span', size = 0, ...rest }, ref) => {
-    const [compact, setCompact] = useState(false);
-    const isCompact = useLatest(compact);
-    // did address 完整显示时的宽度
-    const [addressFullWidth, setAddressFullWidth] = useState<number | null | undefined>(null);
-    const [containerWidth, setContainerWidth] = useState<number | null | undefined>(null);
-    const [loading, setLoading] = useState(true);
-    const { run: delaySetLoadingFalse } = useDebounceFn(() => setLoading(false), {
-      wait: 50,
-    });
-    const containerRef = useRef<HTMLDivElement>(null);
-    const innerRef = useRef<HTMLDidAddressElement>(null);
+export default function ResponsiveDidAddress({
+  ref,
+  style,
+  className,
+  component = 'span',
+  size = 0,
+  ...rest
+}: IResponsiveDidAddressProps & {
+  ref?: React.Ref<unknown>;
+}) {
+  const [compact, setCompact] = useState(false);
+  const isCompact = useLatest(compact);
+  // did address 完整显示时的宽度
+  const [addressFullWidth, setAddressFullWidth] = useState<number | null | undefined>(null);
+  const [containerWidth, setContainerWidth] = useState<number | null | undefined>(null);
+  const [loading, setLoading] = useState(true);
+  const { run: delaySetLoadingFalse } = useDebounceFn(() => setLoading(false), {
+    wait: 50,
+  });
+  const containerRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDidAddressElement>(null);
 
-    useImperativeHandle(
-      ref,
-      () =>
-        new Proxy(
-          {},
-          {
-            get(target: any, key: keyof HTMLDidAddressElement) {
-              return innerRef.current?.[key];
-            },
-          }
-        )
-    );
+  useImperativeHandle(
+    ref,
+    () =>
+      new Proxy(
+        {},
+        {
+          get(target: any, key: keyof HTMLDidAddressElement) {
+            return innerRef.current?.[key];
+          },
+        }
+      )
+  );
 
-    // 存储完整显示时 address 组件的宽度
-    useEffect(() => {
-      const innerWidth = innerRef.current?.offsetWidth || 0;
-      let innerObserver: ResizeObserver | null = null;
-      let containerObserver: ResizeObserver | null = null;
+  // 存储完整显示时 address 组件的宽度
+  useEffect(() => {
+    const innerWidth = innerRef.current?.offsetWidth || 0;
+    let innerObserver: ResizeObserver | null = null;
+    let containerObserver: ResizeObserver | null = null;
 
-      // 初始化宽度
-      setAddressFullWidth(innerWidth);
-      setContainerWidth(containerRef.current?.offsetWidth);
+    // 初始化宽度
+    setAddressFullWidth(innerWidth);
+    setContainerWidth(containerRef.current?.offsetWidth);
 
-      // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
-      innerObserver = new ResizeObserver(() => {
-        if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
-          setAddressFullWidth(innerRef.current?.offsetWidth);
-          delaySetLoadingFalse();
-        }
-      });
-      containerObserver = new ResizeObserver(() => {
-        setContainerWidth(containerRef.current?.offsetWidth);
-      });
+    // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
+    innerObserver = new ResizeObserver(() => {
+      if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
+        setAddressFullWidth(innerRef.current?.offsetWidth);
+        delaySetLoadingFalse();
+      }
+    });
+    containerObserver = new ResizeObserver(() => {
+      setContainerWidth(containerRef.current?.offsetWidth);
+    });
 
-      innerObserver.observe(innerRef.current!.getEl());
-      containerObserver.observe(containerRef.current!);
-      delaySetLoadingFalse();
+    innerObserver.observe(innerRef.current!.getEl());
+    containerObserver.observe(containerRef.current!);
+    delaySetLoadingFalse();
 
-      return () => {
-        innerObserver?.disconnect();
-        containerObserver?.disconnect();
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    return () => {
+      innerObserver?.disconnect();
+      containerObserver?.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    useEffect(() => {
-      if (containerWidth && addressFullWidth) {
-        setCompact(containerWidth < addressFullWidth);
-      }
-    }, [containerWidth, addressFullWidth]);
+  useEffect(() => {
+    if (containerWidth && addressFullWidth) {
+      setCompact(containerWidth < addressFullWidth);
+    }
+  }, [containerWidth, addressFullWidth]);
 
-    return (
-      <Root
-        as={component}
-        ref={containerRef}
-        style={style}
-        className={className}
+  return (
+    <Root
+      as={component}
+      ref={containerRef}
+      style={style}
+      className={className}
+      size={size}
+      {...(component === 'span'
+        ? {}
+        : {
+            inline: rest.inline,
+          })}>
+      <StyledDidAddress
+        style={{
+          position: loading ? 'absolute' : 'static',
+          left: loading ? '-99999px' : 'auto',
+        }}
+        {...rest}
         size={size}
-        {...(component === 'span'
-          ? {}
-          : {
-              inline: rest.inline,
-            })}>
-        <StyledDidAddress
-          style={{
-            position: loading ? 'absolute' : 'static',
-            left: loading ? '-99999px' : 'auto',
-          }}
-          {...rest}
-          size={size}
-          component={component}
-          inline
-          compact={compact}
-          ref={innerRef}
-        />
-        {/* placeholder */}
-        {loading && <div style={{ width: '100%', height: `${(size || 16) * 1.5}px` }} />}
-      </Root>
-    );
-  }
-);
-
-export default ResponsiveDidAddress;
+        component={component}
+        inline
+        compact={compact}
+        ref={innerRef}
+      />
+      {/* placeholder */}
+      {loading && <div style={{ width: '100%', height: `${(size || 16) * 1.5}px` }} />}
+    </Root>
+  );
+}
 
 export interface IResponsiveDidAddressProps extends IDidAddressProps {
   style?: React.CSSProperties;

package/src/Alert/Alert.stories.jsx

@@ -0,0 +1,100 @@
+import Alert from '.';
+
+export default {
+  title: 'Deprecated/Alert',
+
+  parameters: {
+    readme: {
+      sidebar: '<!-- PROPS -->',
+    },
+  },
+};
+
+export function WithDifferentType() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '300px',
+        justifyContent: 'space-between',
+      }}>
+      <Alert type="error">Error message</Alert>
+      <Alert type="warning">Warning message</Alert>
+      <Alert type="success">Success message</Alert>
+      <Alert type="tip">Default tip</Alert>
+    </div>
+  );
+}
+
+WithDifferentType.storyName = 'with different type';
+
+export function WithDifferentVariant() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '300px',
+        justifyContent: 'space-between',
+      }}>
+      <Alert type="error" variant="icon">
+        Error message
+      </Alert>
+      <Alert type="warning" variant="border">
+        Warning message
+      </Alert>
+    </div>
+  );
+}
+
+WithDifferentVariant.storyName = 'with different variant';
+
+export function WithIcon() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '300px',
+        justifyContent: 'space-between',
+      }}>
+      <Alert type="error" showIcon>
+        Error message
+      </Alert>
+      <Alert type="warning" showIcon>
+        Warning message
+      </Alert>
+      <Alert type="success" showIcon>
+        Success message
+      </Alert>
+      <Alert type="tip" showIcon>
+        Default tip
+      </Alert>
+    </div>
+  );
+}
+
+WithIcon.storyName = 'with icon';
+
+export function WithDifferentMessage() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '300px',
+        justifyContent: 'space-between',
+      }}>
+      <Alert type="error">Error message</Alert>
+      <Alert type="error">
+        <ul>
+          <li>Error message 1</li>
+          <li>Error message 2</li>
+        </ul>
+      </Alert>
+    </div>
+  );
+}
+
+WithDifferentMessage.storyName = 'with different message';

package/src/Alert/index.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
 import { blueGrey } from '@mui/material/colors';
+import isUndefined from 'lodash/isUndefined';
 
 import Icon from '../Icon';
 import { mergeProps } from '../Util';
@@ -14,12 +15,14 @@ const types = {
     color: colors.error.main,
     borderColor: '#e35b54',
     backgroundColor: 'rgba(227, 91, 84, 0.2)',
+    variant: 'solid',
   },
   warning: {
     icon: 'exclamation-triangle',
     color: colors.warning.main,
     borderColor: '#f7d040',
     backgroundColor: 'rgba(247, 208, 64, 0.2)',
+    variant: 'solid',
   },
   success: {
     icon: 'check-circle',
@@ -32,6 +35,7 @@ const types = {
     color: colors.grey[500],
     borderColor: '#222222',
     backgroundColor: '#EEEEEE',
+    variant: 'solid',
   },
 };
 
@@ -51,11 +55,24 @@ const types = {
  * @param {AlertProps} props
  * @returns {JSX.Element}
  */
-function Alert(props) {
+function Alert(rawProps) {
+  const props = Object.assign({}, rawProps);
+  if (isUndefined(props.type)) {
+    props.type = 'tip';
+  }
+  if (isUndefined(props.className)) {
+    props.className = '';
+  }
+  if (isUndefined(props.style)) {
+    props.style = {};
+  }
+  if (isUndefined(props.variant)) {
+    props.variant = 'border';
+  }
   /** @type {AlertProps} */
   const newProps = mergeProps(props, Alert, ['style']);
-  const { type, children, style, className, variant, ...rest } = newProps;
-  const { icon, color, backgroundColor, borderColor } = types[type] || types.success;
+  const { type, children, style, className, variant, showIcon = false, ...rest } = newProps;
+  const { icon, color, backgroundColor, borderColor, variant: iconVariant } = types[type] || types.success;
 
   /** @type {import('react').CSSProperties} */
   const styles = Object.assign(
@@ -69,7 +86,9 @@ function Alert(props) {
 
   return (
     <Container {...rest} className={`alert alert--${type} alert--${variant} ${className}`.trim()} style={styles}>
-      {variant === 'icon' && <Icon className="alert-icon" name={icon} size={24} style={{ color }} />}
+      {(variant === 'icon' || showIcon) && (
+        <Icon className="alert-icon" name={icon} size={24} color={color} variant={iconVariant} />
+      )}
       <Typography component="div" className="alert-content">
         {children}
       </Typography>
@@ -85,13 +104,6 @@ Alert.propTypes = {
   variant: PropTypes.oneOf(['border', 'icon']),
 };
 
-Alert.defaultProps = {
-  type: 'tip',
-  className: '',
-  style: '{}',
-  variant: 'border',
-};
-
 export default withDeprecated(Alert, { name: 'Alert', alternative: '@mui/material/Alert' });
 
 const Container = styled('div')`

package/src/AnimationWaiter/AnimationWaiter.stories.jsx

@@ -0,0 +1,35 @@
+import { Box } from '@mui/material';
+import AnimationWaiter from '.';
+import { ThemeProvider } from '../Theme';
+import { ThemeModeToggle } from '../Config';
+
+export { default as Basic } from './demo/basic';
+export { default as WithCustomMessages } from './demo/with-custom-messages';
+export { default as WithMoreMessages } from './demo/with-more-messages';
+export { default as Sizes } from './demo/sizes';
+export { default as WithTips } from './demo/with-tips';
+export { default as WithSpeed } from './demo/with-speed';
+export { default as WithMaybeDuration } from './demo/with-maybe-duration';
+
+export default {
+  title: 'Feedback/AnimationWaiter',
+  component: AnimationWaiter,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'AnimationWaiter is a loading component that provides feedback when the user is waiting for a long time to perform an operation.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider prefer="system">
+        <Box sx={{ py: 1 }}>
+          <ThemeModeToggle />
+        </Box>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};

package/src/AnimationWaiter/index.jsx

@@ -24,16 +24,16 @@ import { styled, useTheme } from '../Theme';
  * @returns {JSX.Element}
  */
 export default function AnimationWaiter({
-  animationData,
-  size,
-  message,
-  messageDuration,
-  messageLoop,
-  tips,
-  tipsDuration,
-  maybeDuration,
-  speed,
-  increaseSpeed,
+  animationData = null,
+  size = 256,
+  message = '',
+  messageDuration = 5000,
+  messageLoop = true,
+  tips = [],
+  tipsDuration = 5000,
+  maybeDuration = 120000,
+  speed = 1,
+  increaseSpeed = 0,
   ...rest
 }) {
   const theme = useTheme();
@@ -214,19 +214,6 @@ AnimationWaiter.propTypes = {
   increaseSpeed: PropTypes.number,
 };
 
-AnimationWaiter.defaultProps = {
-  animationData: null,
-  size: 256,
-  message: '',
-  messageDuration: 5000,
-  messageLoop: true,
-  tips: [],
-  tipsDuration: 5000,
-  speed: 1,
-  maybeDuration: 120000,
-  increaseSpeed: 0,
-};
-
 const Container = styled('div')`
   display: flex;
   justify-content: center;

package/src/Async/index.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import CircularProgress from '@mui/material/CircularProgress';
+import React from 'react';
+import { CircularProgress } from '@mui/material';
 
 export default function LoadAsyncComponent<T extends React.ComponentType<any>>(
   importComponent: () => Promise<Record<string, T>>,

package/src/Avatar/Avatar.stories.jsx

@@ -0,0 +1,11 @@
+export { default as WithDifferentSizes } from './demo/with-different-sizes';
+export { default as WithDifferentDid } from './demo/with-different-did';
+export { default as WithSpecifiedMotifShape } from './demo/with-specified-motif-shape';
+export { default as ResponsiveDidMotif } from './demo/responsive-did-motif';
+export { default as EthAddresses } from './demo/eth-addresses';
+export { default as WithAnimation } from './demo/with-animation';
+export { default as WithEmptyDidErrorFallback } from './demo/with-empty-did-error-fallback';
+
+export default {
+  title: 'DID/Avatar',
+};

package/src/Avatar/did-motif.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { update } from '@arcblock/did-motif';
 import { Box } from '@mui/material';
 
-function DIDMotif({ did, size, animation, shape, responsive, ...rest }) {
+function DIDMotif({ did, size = 200, animation = false, shape = null, responsive = false, ...rest }) {
   const svgRef = useRef(null);
 
   useLayoutEffect(() => {
@@ -35,11 +35,4 @@ DIDMotif.propTypes = {
   shape: PropTypes.number,
 };
 
-DIDMotif.defaultProps = {
-  size: 200,
-  animation: false,
-  responsive: false,
-  shape: null,
-};
-
 export default DIDMotif;

package/src/Avatar/index.jsx

@@ -3,7 +3,9 @@ import { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Shape } from '@arcblock/did-motif';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
+import isUndefined from 'lodash/isUndefined';
+
 import Img from '../Img';
 import { mergeProps, isEthereumDid } from '../Util';
 import DIDMotif from './did-motif';
@@ -29,7 +31,29 @@ import { DID_PREFIX } from '../Util/constant';
  * @param {AvatarProps} props
  * @returns {JSX.Element}
  */
-function Avatar(props) {
+function Avatar(rawProps) {
+  const props = Object.assign({}, rawProps);
+  if (isUndefined(props.did)) {
+    props.did = '';
+  }
+  if (isUndefined(props.size)) {
+    props.size = 36;
+  }
+  if (isUndefined(props.variant)) {
+    props.variant = 'default';
+  }
+  if (isUndefined(props.animation)) {
+    props.animation = false;
+  }
+  if (isUndefined(props.shape)) {
+    props.shape = '';
+  }
+  if (isUndefined(props.blockiesPadding)) {
+    props.blockiesPadding = true;
+  }
+  if (isUndefined(props.responsive)) {
+    props.responsive = false;
+  }
   const [imgError, setImgError] = useState(false);
   /** @type {AvatarProps} */
   const newProps = mergeProps(props, Avatar, []);
@@ -137,16 +161,6 @@ Avatar.propTypes = {
   responsive: PropTypes.bool,
 };
 
-Avatar.defaultProps = {
-  did: '',
-  size: 36,
-  variant: 'default',
-  animation: false,
-  shape: '',
-  blockiesPadding: true,
-  responsive: false,
-};
-
 /**
  * @param {AvatarProps} props
  * @returns {JSX.Element}
@@ -157,7 +171,16 @@ export default function AvatarWithErrorBoundary(props) {
   return (
     <ErrorBoundary
       // eslint-disable-next-line react/no-unstable-nested-components
-      fallbackRender={() => <Box width={size} height={size} bgcolor="grey.300" borderRadius={borderRadius} />}>
+      fallbackRender={() => (
+        <Box
+          sx={{
+            width: size,
+            height: size,
+            bgcolor: 'grey.300',
+            borderRadius,
+          }}
+        />
+      )}>
       <Avatar {...props} />
     </ErrorBoundary>
   );

package/src/Badge/Badge.stories.jsx

@@ -0,0 +1,41 @@
+import Badge from '.';
+
+export default {
+  title: 'Deprecated/Badge',
+
+  parameters: {
+    readme: {
+      sidebar: '<!-- PROPS -->',
+    },
+  },
+};
+
+export function WithDifferentType() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '300px',
+        justifyContent: 'space-between',
+      }}>
+      <Badge type="error" style={{ marginBottom: 16 }}>
+        Error message
+      </Badge>
+      <Badge type="warning" style={{ marginBottom: 16 }}>
+        Warning message
+      </Badge>
+      <Badge type="success" style={{ marginBottom: 16 }}>
+        Success message
+      </Badge>
+      <Badge type="primary" style={{ marginBottom: 16 }}>
+        Default tip
+      </Badge>
+      <Badge type="reverse" style={{ marginBottom: 16 }}>
+        Reverse styling
+      </Badge>
+    </div>
+  );
+}
+
+WithDifferentType.storyName = 'with different type';