@arcblock/ux 2.13.70 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.70",
+  "version": "3.0.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -19,11 +19,8 @@
   "scripts": {
     "lint": "eslint src tests --ext js,jsx,ts,tsx",
     "lint:fix": "npm run lint -- --fix",
-    "build": "npm run build:clean && npm run build:babel && npm run build:types",
-    "build:clean": "rm -rf lib",
-    "build:babel": "babel --config-file ./babel.config.es.js src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --copy-files --no-copy-ignored",
-    "build:types": "tsc && copyfiles -u 1 'src/**/*.d.ts' lib/",
-    "watch": "babel --config-file ./babel.config.es.js src --out-dir lib -w --extensions \".js,.jsx,.ts,.tsx\" --copy-files --no-copy-ignored",
+    "watch": "vite build --watch",
+    "build": "vite build",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build",
@@ -37,97 +34,91 @@
     "access": "public"
   },
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.19.3",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-typescript": "^7.24.7",
-    "@babel/preset-env": "^7.19.3",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.24.7",
+    "@arcblock/ux": "workspace:*",
     "@types/base64-url": "^2.2.2",
     "@types/pako": "^2.0.3",
-    "@types/react": "^18.3.4",
+    "@types/react": "^19.1.8",
     "@types/react-helmet": "^6.1.11",
     "@types/webfontloader": "^1.6.38",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^8.7.0",
     "babel-jest": "29",
-    "babel-plugin-inline-react-svg": "^2.0.2",
-    "copyfiles": "^2.4.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "glob": "^10.3.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "moment-timezone": "^0.5.37",
-    "prettier": "^3.3.3",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.48",
+    "prettier": "^3.6.0",
+    "react-dom": "^19.1.0",
+    "react-inspector": "^5.1.1",
     "typescript": "5.5.4"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@mui/icons-material": ">=5.15.0",
-    "@mui/material": ">=5.15.0",
-    "@mui/utils": ">=5.15.0",
-    "react": ">=18.2.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.2",
+    "@mui/material": "^7.1.2",
+    "@mui/utils": "^7.1.1",
+    "react": ">=19.0.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "b38a83a2c7d9a22e90bab369d8f61340db2abbd0",
+  "gitHead": "b001c32ca85d40d8a0784ca581bfd54d90550b24",
   "dependencies": {
+    "@arcblock/bridge": "3.0.0",
+    "@arcblock/did": "^1.20.14",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.70",
-    "@arcblock/nft-display": "^2.13.70",
-    "@arcblock/react-hooks": "^2.13.70",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.70",
+    "@arcblock/icons": "3.0.0",
+    "@arcblock/nft-display": "3.0.0",
+    "@arcblock/react-hooks": "3.0.0",
+    "@blocklet/js-sdk": "^1.16.44",
+    "@blocklet/theme": "3.0.0",
     "@fontsource/roboto": "~5.1.1",
-    "@fontsource/ubuntu-mono": "^5.0.18",
+    "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/mdi": "^1.2.48",
     "@iconify-icons/tabler": "^1.2.95",
-    "@iconify/react": "^5.2.0",
-    "@solana/qr-code-styling": "^1.6.0-beta.0",
-    "@testing-library/react": "^14.0.0",
+    "@iconify/react": "^5.2.1",
+    "@ocap/mcrypto": "^1.20.14",
+    "@solana/qr-code-styling": "^1.6.0",
+    "@testing-library/react": "^14.3.1",
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",
-    "ahooks": "^3.7.10",
-    "awesome-phonenumber": "^7.4.0",
-    "axios": "^1.7.5",
+    "ahooks": "^3.8.5",
+    "awesome-phonenumber": "^7.5.0",
+    "axios": "^1.10.0",
     "base64-url": "^2.3.3",
-    "color-convert": "^3.0.1",
-    "copy-to-clipboard": "^3.3.2",
-    "core-js": "^3.25.5",
+    "color-convert": "^3.1.0",
+    "copy-to-clipboard": "^3.3.3",
     "d3-geo": "^1.12.1",
-    "dayjs": "^1.11.5",
-    "debug": "^4.4.0",
+    "dayjs": "^1.11.13",
+    "debug": "^4.4.1",
     "devices.css": "^0.1.15",
-    "dompurify": "^3.2.1",
-    "highlight.js": "^11.6.0",
+    "dompurify": "^3.2.6",
+    "highlight.js": "^11.11.1",
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",
-    "is-svg": "^4.3.2",
+    "is-svg": "^4.4.0",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
     "mui-datatables": "^4.3.0",
-    "notistack": "^2.0.5",
+    "notistack": "^2.0.8",
     "p-retry": "^6.2.1",
     "pako": "^2.1.0",
-    "qrcode.react": "^3.1.0",
+    "qrcode.react": "^3.2.0",
     "react-cookie-consent": "^6.4.1",
     "react-error-boundary": "^3.1.4",
     "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
     "react-international-phone": "3.1.2",
     "react-intersection-observer": "^8.34.0",
-    "react-lottie-player": "^1.4.3",
+    "react-lottie-player": "^1.5.6",
     "react-player": "^1.15.3",
-    "react-shadow": "^19.0.3",
-    "react-svg": "^16.1.18",
-    "react-use": "^17.4.0",
+    "react-shadow": "^19.1.0",
+    "react-svg": "^16.3.0",
+    "react-use": "^17.6.0",
     "rebound": "^0.1.0",
     "topojson-client": "^3.1.0",
-    "type-fest": "^4.28.0",
-    "validator": "^13.9.0",
+    "type-fest": "^4.41.0",
+    "validator": "^13.15.15",
     "versor": "^0.0.4",
     "webfontloader": "^1.6.28",
     "zustand": "^5.0.5"

package/src/ActionButton/ActionButton.stories.jsx

@@ -0,0 +1,61 @@
+import { createTheme, ThemeProvider } from '../Theme';
+import ActionButton from '.';
+
+export default {
+  title: 'Deprecated/ActionButton',
+
+  parameters: {
+    readme: {
+      sidebar: '<!-- PROPS -->',
+    },
+  },
+};
+
+export function WithDifferentColor() {
+  return (
+    <ThemeProvider theme={createTheme()}>
+      <div>
+        <ActionButton href="/" theme="inherit">
+          Default Button
+        </ActionButton>
+        <ActionButton href="/" theme="primary">
+          Primary Button
+        </ActionButton>
+        <ActionButton href="/" theme="secondary">
+          Secondary Button
+        </ActionButton>
+        <ActionButton href="/" theme="reverse">
+          Reverse Button
+        </ActionButton>
+      </div>
+    </ThemeProvider>
+  );
+}
+
+WithDifferentColor.storyName = 'with different color';
+
+export function WithDifferentVariant() {
+  return (
+    <ThemeProvider theme={createTheme()}>
+      <div>
+        <ActionButton href="/" variant="text">
+          Text Button
+        </ActionButton>
+        <ActionButton href="/" variant="outlined">
+          Outlined Button
+        </ActionButton>
+        <ActionButton href="/" variant="contained">
+          Contained Button
+        </ActionButton>
+
+        <div style={{ background: '#222', padding: 12, marginTop: 24 }}>
+          <ActionButton href="/" variant="contained" theme="reverse">
+            Contained Reverse Button
+          </ActionButton>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
+
+WithDifferentVariant.storyName = 'with different variant';

package/src/ActionButton/index.jsx

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import isUndefined from 'lodash/isUndefined';
 
 import Button from '../Button';
 import { mergeProps } from '../Util';
@@ -26,7 +27,35 @@ import { withDeprecated } from '../Util/deprecate';
  * @param {ActionButtonProps} props
  * @returns {JSX.Element}
  */
-function ActionButton(props) {
+function ActionButton(rawProps) {
+  const props = Object.assign({}, rawProps);
+  if (isUndefined(props.gradient)) {
+    props.gradient = '';
+  }
+  if (isUndefined(props.icon)) {
+    props.icon = '';
+  }
+  if (isUndefined(props.text)) {
+    props.text = '';
+  }
+  if (isUndefined(props.color)) {
+    props.color = '';
+  }
+  if (isUndefined(props.border)) {
+    props.border = '';
+  }
+  if (isUndefined(props.width)) {
+    props.width = '';
+  }
+  if (isUndefined(props.theme)) {
+    props.theme = 'inherit';
+  }
+  if (isUndefined(props.variant)) {
+    props.variant = 'outlined';
+  }
+  if (isUndefined(props.size)) {
+    props.size = 'large';
+  }
   /** @type {ActionButtonProps & {}} */
   const newProps = mergeProps(props, ActionButton);
   const { href, icon, size, color, theme, variant, gradient, children, text, ...rest } = newProps;
@@ -74,17 +103,4 @@ ActionButton.propTypes = {
   width: PropTypes.string,
 };
 
-ActionButton.defaultProps = {
-  gradient: '',
-  icon: '',
-  text: '',
-  color: '',
-  border: '',
-  width: '',
-  theme: 'inherit',
-  variant: 'outlined',
-  size: 'large',
-  children: null,
-};
-
 export default withDeprecated(ActionButton, { name: 'ActionButton' });

package/src/ActivityIndicator/ActivityIndicator.stories.jsx

@@ -0,0 +1,9 @@
+import ActivityIndicator from '.';
+
+export { default as Basic } from './demo/basic';
+export { default as WithCustomMessages } from './demo/with-custom-messages';
+
+export default {
+  title: 'Feedback/ActivityIndicator',
+  component: ActivityIndicator,
+};

package/src/ActivityIndicator/index.jsx

@@ -18,7 +18,7 @@ import { styled, useTheme } from '../Theme';
  * @param {ActivityIndicatorProps} props
  * @returns {JSX.Element}
  */
-export default function ActivityIndicator({ messages, interval, ...rest }) {
+export default function ActivityIndicator({ messages = ['Loading data...'], interval = 3000, ...rest }) {
   const [index, setIndex] = useState(0);
   const { palette } = useTheme();
 
@@ -54,11 +54,6 @@ ActivityIndicator.propTypes = {
   messages: PropTypes.arrayOf(PropTypes.string.isRequired),
 };
 
-ActivityIndicator.defaultProps = {
-  interval: 3000,
-  messages: ['Loading data...'],
-};
-
 const Div = styled('div')`
   && {
     box-sizing: border-box;
@@ -103,7 +98,7 @@ const Div = styled('div')`
   }
 `;
 
-function Orbit({ size, orbitColor, atomColor, duration, ...rest }) {
+function Orbit({ size, orbitColor, atomColor, duration = 2, ...rest }) {
   return (
     <OrbitRoot $duration={duration} style={{ width: size, height: size, border: `1px solid ${orbitColor}` }} {...rest}>
       <div style={{ background: atomColor }} />
@@ -118,10 +113,6 @@ Orbit.propTypes = {
   duration: PropTypes.number,
 };
 
-Orbit.defaultProps = {
-  duration: 2,
-};
-
 const OrbitRoot = styled('div')`
   @keyframes orbit {
     0% {

package/src/Address/Address.stories.jsx

@@ -0,0 +1,38 @@
+import { styled } from '../Theme';
+
+export { default as WithDifferentSizes } from './demo/with-different-sizes';
+export { default as Copyable } from './demo/copyable';
+export { default as CompactMode } from './demo/compact-mode';
+export { default as WithInheritSize } from './demo/with-inherit-size';
+export { default as ResponsiveFontSize } from './demo/responsive-font-size';
+export { default as InlineElementBlockElement } from './demo/inline-element-block-element';
+export { default as DynamicTagname } from './demo/dynamic-tagname';
+export { default as NonResponsiveCompact } from './demo/non-responsive-compact';
+export { default as CopyTextI18N } from './demo/copy-text-i18n';
+export { default as PrependAppend } from './demo/prepend-append';
+
+export default {
+  title: 'DID/Address',
+  parameters: {},
+  decorators: [
+    (StoryFn) => (
+      <ResizableContainer>
+        <StoryFn />
+      </ResizableContainer>
+    ),
+  ],
+};
+
+const ResizableContainer = styled('div')`
+  width: 600px;
+  max-width: 100%;
+  padding: 16px;
+  border: 1px solid #ddd;
+  overflow: auto;
+  background: #fff;
+  resize: both;
+
+  > * + * {
+    margin-top: 16px;
+  }
+`;

package/src/Address/compact-text.jsx

@@ -1,7 +1,6 @@
 import { Children } from 'react';
 import PropTypes from 'prop-types';
-import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
-import Box from '@mui/material/Box';
+import { Box, Tooltip, tooltipClasses } from '@mui/material';
 import { styled } from '../Theme';
 import { CopyButton } from '../ClickToCopy';
 
@@ -34,7 +33,7 @@ function RecursiveWrapper({ children, ...rest }) {
 /**
  * 紧凑文本组件 (显示首尾, 中间截断显示省略号), 仅考虑等宽字体的情况
  */
-export default function CompactText({ startChars, endChars, children, showCopyButtonInTooltip }) {
+export default function CompactText({ startChars = 6, endChars = 6, children, showCopyButtonInTooltip = false }) {
   if (typeof children !== 'string') {
     return (
       <RecursiveWrapper startChars={startChars} endChars={endChars} showCopyButtonInTooltip={showCopyButtonInTooltip}>
@@ -45,7 +44,13 @@ export default function CompactText({ startChars, endChars, children, showCopyBu
 
   // stopPropagation: 当 tooltip 处于 link 中时, 避免点击复制时触发链接跳转
   const tooltipContent = (
-    <Box display="flex" alignItems="center" lineHeight={1} onClick={(e) => e.stopPropagation()}>
+    <Box
+      onClick={(e) => e.stopPropagation()}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        lineHeight: 1,
+      }}>
       <Box>{children}</Box>
       {showCopyButtonInTooltip && (
         <CopyButton content={children} showTooltip={false} style={{ fontSize: 16, marginLeft: 4 }} />
@@ -69,10 +74,3 @@ CompactText.propTypes = {
   // 在 tooltip 中完整地址后显示复制按钮
   showCopyButtonInTooltip: PropTypes.bool,
 };
-
-CompactText.defaultProps = {
-  startChars: 6,
-  endChars: 6,
-  children: null,
-  showCopyButtonInTooltip: false,
-};

package/src/Address/did-address.tsx

@@ -1,11 +1,10 @@
 import '@fontsource/ubuntu-mono/400.css';
 import { Check as CheckIcon } from '@mui/icons-material';
 import { Box, BoxProps, Tooltip } from '@mui/material';
-import { green } from '@mui/material/colors';
 import copy from 'copy-to-clipboard';
 import noop from 'lodash/noop';
 import CopyIcon from '@arcblock/icons/lib/Copy';
-import React, { forwardRef, ReactNode, useImperativeHandle, useRef, useState } from 'react';
+import React, { ReactNode, useImperativeHandle, useRef, useState } from 'react';
 import { styled } from '../Theme';
 import { getFontSize } from '../Util';
 import CompactText from './compact-text';
@@ -56,7 +55,12 @@ export interface IDidAddressProps extends BoxProps {
  *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
  *   - 可配合 useMediaQuery 使用
  */
-const DidAddress = forwardRef<HTMLDidAddressElement, IDidAddressProps>((props, ref) => {
+function DidAddress({
+  ref,
+  ...props
+}: IDidAddressProps & {
+  ref?: React.Ref<unknown>;
+}) {
   const {
     component = 'span',
     size = 0,
@@ -163,7 +167,7 @@ const DidAddress = forwardRef<HTMLDidAddressElement, IDidAddressProps>((props, r
       {append}
     </Root>
   );
-});
+}
 
 export default DidAddress;
 

package/src/Address/index.tsx

@@ -1,18 +1,21 @@
-import { forwardRef } from 'react';
-import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-address';
+import DidAddress, { IDidAddressProps } from './did-address';
 import ResponsiveDidAddress from './responsive-did-address';
 
 export interface IDidAddressWrapper extends IDidAddressProps {
   responsive?: true | false;
 }
 
-const DidAddressWrapper = forwardRef<HTMLDidAddressElement, IDidAddressWrapper>(
-  ({ responsive = true, ...rest }, ref) => {
-    if (responsive) {
-      return <ResponsiveDidAddress {...rest} ref={ref} />;
-    }
-    return <DidAddress {...rest} ref={ref} />;
+function DidAddressWrapper({
+  ref,
+  responsive = true,
+  ...rest
+}: IDidAddressWrapper & {
+  ref?: React.Ref<unknown>;
+}) {
+  if (responsive) {
+    return <ResponsiveDidAddress {...rest} ref={ref} />;
   }
-);
+  return <DidAddress {...rest} ref={ref} />;
+}
 
 export default DidAddressWrapper;