@arcblock/ux 3.4.15 → 3.5.0

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.4.15", s = { "@blocklet/js-sdk": "^1.17.7" }, n = {
+const e = "3.5.0", s = { "@blocklet/js-sdk": "^1.17.7" }, n = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.4.15",
+  "version": "3.5.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -36,6 +36,9 @@
     "**/*.svg?react",
     "**/*.svg"
   ],
+  "files": [
+    "lib"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -74,16 +77,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "73039d82d507d9ec5408d8cfc67d9efeffae3e74",
+  "gitHead": "1cfc816004525cf1b352ec2b64d459f4769f0237",
   "dependencies": {
-    "@arcblock/bridge": "3.4.15",
+    "@arcblock/bridge": "3.5.0",
     "@arcblock/did": "^1.29.4",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.4.15",
-    "@arcblock/nft-display": "3.4.15",
-    "@arcblock/react-hooks": "3.4.15",
+    "@arcblock/icons": "3.5.0",
+    "@arcblock/nft-display": "3.5.0",
+    "@arcblock/react-hooks": "3.5.0",
     "@blocklet/js-sdk": "^1.17.7",
-    "@blocklet/theme": "3.4.15",
+    "@blocklet/theme": "3.5.0",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/ActionButton/ActionButton.stories.jsx

@@ -1,61 +0,0 @@
-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,106 +0,0 @@
-import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
-
-import Button from '../Button';
-import { mergeProps } from '../Util';
-import { withDeprecated } from '../Util/deprecate';
-
-/**
- * Action button component
- * @typedef {{
- *  href: string;
- *  children?: import('react').ReactNode;
- *  gradient?: string;
- *  color?: string;
- *  icon?: string;
- *  border?: string;
- *  text?: string;
- *  theme?: string;
- *  variant?: string;
- *  size?: string;
- *  width?: string;
- * }} ActionButtonProps
- */
-
-/**
- * Action button component
- * @param {ActionButtonProps} props
- * @returns {JSX.Element}
- */
-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;
-
-  /** @type {import('react').CSSProperties} */
-  const styles = {};
-  if (gradient) {
-    styles.backgroundImage = gradient;
-    styles.borderColor = 'transparent';
-  }
-  const attrs = ['color', 'border', 'width'];
-  attrs.forEach((x) => {
-    if (newProps[x]) {
-      styles[x] = newProps[x];
-    }
-  });
-
-  return (
-    <Button
-      color={theme}
-      href={href}
-      target="_blank"
-      variant={variant}
-      style={styles}
-      size={size}
-      className="action-button"
-      {...rest}>
-      {!!icon && <i className={icon} />}
-      {text || children}
-    </Button>
-  );
-}
-
-ActionButton.propTypes = {
-  href: PropTypes.string.isRequired,
-  children: PropTypes.any,
-  gradient: PropTypes.string,
-  color: PropTypes.string,
-  icon: PropTypes.string,
-  border: PropTypes.string,
-  text: PropTypes.string,
-  theme: PropTypes.string,
-  variant: PropTypes.string,
-  size: PropTypes.string,
-  width: PropTypes.string,
-};
-
-export default withDeprecated(ActionButton, { name: 'ActionButton' });

package/src/ActivityIndicator/ActivityIndicator.stories.jsx

@@ -1,9 +0,0 @@
-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

@@ -1,140 +0,0 @@
-import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { green, blue } from '@mui/material/colors';
-
-import Logo from '../Logo';
-import { styled, useTheme } from '../Theme';
-
-/**
- * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
- * @typedef {{
- *  interval?: number;
- *  messages: string[];
- * } & import('react').ComponentPropsWithoutRef<"div"> } ActivityIndicatorProps
- */
-
-/**
- * @description ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
- * @param {ActivityIndicatorProps} props
- * @returns {JSX.Element}
- */
-export default function ActivityIndicator({ messages = ['Loading data...'], interval = 3000, ...rest }) {
-  const [index, setIndex] = useState(0);
-  const { palette } = useTheme();
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setIndex((index + 1) % messages.length);
-    }, interval);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  });
-
-  return (
-    <Div {...rest}>
-      <div className="pm-loader-container">
-        <div className="pm-loader-text">
-          <p>{messages[index]}</p>
-        </div>
-        <div className="pm-loader-atoms">
-          <Logo style={{ transform: 'scale(0.6)' }} showText={false} />
-          <Orbit size={56} orbitColor={green[500]} atomColor={green[500]} duration={1} />
-          <Orbit size={80} orbitColor={blue[800]} atomColor={blue[800]} duration={1.5} />
-          <Orbit size={100} orbitColor={palette.grey[900]} atomColor={palette.grey[900]} />
-        </div>
-      </div>
-    </Div>
-  );
-}
-
-ActivityIndicator.propTypes = {
-  interval: PropTypes.number,
-  messages: PropTypes.arrayOf(PropTypes.string.isRequired),
-};
-
-const Div = styled('div')`
-  && {
-    box-sizing: border-box;
-    padding: 20px;
-    width: 100%;
-    height: 100%;
-    min-height: 360px;
-    z-index: 100;
-    transition: opacity 0.5s linear;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .pm-loader-text {
-    color: ${({ theme }) => theme.palette.grey[900]};
-    font-size: 14px;
-    text-align: center;
-    position: relative;
-    height: 70px;
-    -webkit-user-select: none;
-  }
-
-  .pm-loader-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-  }
-
-  .pm-loader-atoms {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-  }
-`;
-
-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 }} />
-    </OrbitRoot>
-  );
-}
-
-Orbit.propTypes = {
-  size: PropTypes.number.isRequired,
-  orbitColor: PropTypes.string.isRequired,
-  atomColor: PropTypes.string.isRequired,
-  duration: PropTypes.number,
-};
-
-const OrbitRoot = styled('div')`
-  @keyframes orbit {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  position: absolute;
-  border-radius: 50%;
-  animation: orbit ${({ $duration }) => $duration}s infinite;
-  animation-timing-function: linear;
-  transform-origin: center;
-
-  > div {
-    position: absolute;
-    top: 50%;
-    width: 6px;
-    height: 6px;
-    transform: translateX(-50%);
-    border-radius: 50%;
-  }
-`;

package/src/Address/Address.stories.jsx

@@ -1,38 +0,0 @@
-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,76 +0,0 @@
-import { Children } from 'react';
-import PropTypes from 'prop-types';
-import { Box, Tooltip, tooltipClasses } from '@mui/material';
-import { styled } from '../Theme';
-import { CopyButton } from '../ClickToCopy';
-
-const StyledTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
-  [`& .${tooltipClasses.tooltip}`]: {
-    maxWidth: 360,
-    wordBreak: 'break-all',
-  },
-});
-
-// 递归, 将 text (string) 部分替换为 CompactText (保持元素结构)
-// eslint-disable-next-line react/prop-types
-function RecursiveWrapper({ children, ...rest }) {
-  const wrappedChildren = Children.map(children, (child) => {
-    if (typeof child === 'string') {
-      return <CompactText {...rest}>{child}</CompactText>;
-    }
-    if (child.props && child.props.children) {
-      return (
-        <child.type {...child.props}>
-          <RecursiveWrapper {...rest}>{child.props.children}</RecursiveWrapper>
-        </child.type>
-      );
-    }
-    return child;
-  });
-  return wrappedChildren;
-}
-
-/**
- * 紧凑文本组件 (显示首尾, 中间截断显示省略号), 仅考虑等宽字体的情况
- */
-export default function CompactText({ startChars = 6, endChars = 6, children, showCopyButtonInTooltip = false }) {
-  if (typeof children !== 'string') {
-    return (
-      <RecursiveWrapper startChars={startChars} endChars={endChars} showCopyButtonInTooltip={showCopyButtonInTooltip}>
-        {children}
-      </RecursiveWrapper>
-    );
-  }
-
-  // stopPropagation: 当 tooltip 处于 link 中时, 避免点击复制时触发链接跳转
-  const tooltipContent = (
-    <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 }} />
-      )}
-    </Box>
-  );
-
-  return (
-    <StyledTooltip title={tooltipContent} placement="top">
-      <span>
-        {children.slice(0, startChars)}...{children.slice(children.length - endChars)}
-      </span>
-    </StyledTooltip>
-  );
-}
-
-CompactText.propTypes = {
-  startChars: PropTypes.number,
-  endChars: PropTypes.number,
-  children: PropTypes.node.isRequired,
-  // 在 tooltip 中完整地址后显示复制按钮
-  showCopyButtonInTooltip: PropTypes.bool,
-};

package/src/Address/did-address.tsx

@@ -1,223 +0,0 @@
-import '@fontsource/ubuntu-mono/400.css';
-import { Check as CheckIcon } from '@mui/icons-material';
-import { Box, BoxProps, Tooltip } from '@mui/material';
-import copy from 'copy-to-clipboard';
-import noop from 'lodash/noop';
-import CopyIcon from '@arcblock/icons/lib/Copy';
-import React, { ReactNode, useImperativeHandle, useRef, useState } from 'react';
-import { styled } from '../Theme';
-import { getFontSize } from '../Util';
-import CompactText from './compact-text';
-import type { Locale, Translations } from '../type';
-
-const translations: Translations = {
-  en: {
-    copy: 'Click To Copy',
-    copied: 'Copied!',
-  },
-  zh: {
-    copy: '点击复制',
-    copied: '已复制!',
-  },
-};
-
-export interface HTMLDidAddressElement extends HTMLDivElement {
-  copy: () => void;
-  getEl: () => HTMLDivElement;
-}
-export interface IDidAddressProps extends BoxProps {
-  component?: React.ElementType;
-  size?: number;
-  copyable?: true | false;
-  // compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
-  showCopyButtonInTooltip?: false | true;
-  content?: string;
-  inline?: false | true;
-  prepend?: ReactNode;
-  append?: ReactNode;
-  // 紧凑模式
-  compact?: false | true;
-  startChars?: number;
-  endChars?: number;
-  locale?: Locale;
-}
-
-/**
- * DidAddress 组件 (新版设计)
- *
- * - 样式调整
- * - click-to-copy 调整
- * - 长文本截断处理 (Ellipsis)
- * - 支持 inline 或 block 的显示方式
- * - 支持紧凑模式, 该模式下:
- *   - 占用宽度较小, 因此不考虑水平空间不够用的情况, 且忽略末尾省略号
- *   - 对于多层元素结构的 children, 保持元素结构, 将最内层 text 替换为 CompactText 组件
- *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
- *   - 可配合 useMediaQuery 使用
- */
-function DidAddress({
-  ref = undefined,
-  ...props
-}: IDidAddressProps & {
-  ref?: React.Ref<unknown>;
-}) {
-  const {
-    component = 'span',
-    size = 0,
-    copyable = true,
-    showCopyButtonInTooltip = false,
-    children = null,
-    content = '',
-    prepend = null,
-    append = null,
-    compact = false,
-    startChars = 6,
-    endChars = 6,
-    locale: originalLocale = 'en',
-    ...rest
-  } = props;
-  let locale = originalLocale;
-  if (!translations[locale]) {
-    locale = 'en';
-  }
-
-  const [copied, setCopied] = useState(false);
-  const textRef = useRef<HTMLDivElement>(null);
-  const rootRef = useRef<any>(null);
-
-  const handleCopy = () => {
-    copy(content || textRef.current?.textContent || '');
-    setCopied(true);
-    // 恢复 copied 状态
-    setTimeout(() => {
-      setCopied(false);
-    }, 1500);
-  };
-  const onCopy = (e: any) => {
-    e.stopPropagation();
-    e.preventDefault();
-    handleCopy();
-  };
-  useImperativeHandle(
-    ref,
-    () =>
-      new Proxy(
-        {
-          copy: handleCopy,
-          getEl: () => rootRef.current,
-        },
-        {
-          get(target: any, key: string) {
-            return target[key] || rootRef.current?.[key];
-          },
-        }
-      )
-  );
-
-  let copyElement = null;
-  if (copyable) {
-    copyElement = (
-      <span className="did-address-copy-wrapper" title={copied ? '' : translations[locale].copy}>
-        {copied ? (
-          <Tooltip title={translations[locale].copied} placement="bottom" arrow open={copied}>
-            <CheckIcon className="did-address-copy" sx={{ color: 'success.main' }} />
-          </Tooltip>
-        ) : (
-          /* title prop 直接加在 icon 上不生效 */
-          <CopyIcon className="did-address-copy" width="1em" height="1em" onClick={onCopy} />
-        )}
-      </span>
-    );
-  }
-
-  return (
-    <Root as={component} size={size} {...rest} ref={rootRef}>
-      {prepend}
-      <Box sx={{ display: 'none' }} ref={textRef}>
-        {children}
-      </Box>
-      {/* 注意: 该元素必须渲染(可以隐藏), 以便 compact 模式下复制的文本是完整的 */}
-      <Tooltip title={copyable ? '' : translations[locale].copied} placement="bottom" arrow open={copied}>
-        {compact ? (
-          <Box
-            component="span"
-            className="did-address-text"
-            sx={{
-              cursor: copyable ? 'unset' : 'pointer',
-            }}
-            onDoubleClick={copyable ? noop : onCopy}>
-            <CompactText startChars={startChars} endChars={endChars} showCopyButtonInTooltip={showCopyButtonInTooltip}>
-              {children}
-            </CompactText>
-          </Box>
-        ) : (
-          <Box
-            component="span"
-            className="did-address-text did-address-truncate"
-            sx={{
-              display: compact ? 'none' : 'inline',
-              cursor: copyable ? 'unset' : 'pointer',
-            }}
-            onDoubleClick={copyable ? noop : onCopy}>
-            {children}
-          </Box>
-        )}
-      </Tooltip>
-      {copyElement}
-      {append}
-    </Root>
-  );
-}
-
-export default DidAddress;
-
-const Root = styled<any>(Box, { shouldForwardProp: (prop) => prop !== 'inline' })`
-  font-family: 'Ubuntu Mono', monospace;
-  && {
-    display: ${({ inline }: any) => (inline ? 'inline-flex' : 'flex')};
-    align-items: center;
-    max-width: 100%;
-    overflow: hidden;
-    color: #ccc;
-    font-size: ${(props: any) => getFontSize(props.size)};
-    font-weight: 400;
-
-    svg {
-      fill: currentColor;
-    }
-  }
-
-  .did-address-text {
-    color: ${({ theme }) => theme.palette.text.secondary};
-  }
-  /* truncate string with ellipsis */
-  .did-address-truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .did-address-copy-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 1em;
-    height: 1em;
-    margin-left: 8px;
-  }
-  .did-address-copy {
-    flex: 0 0 auto;
-    font-size: 1em;
-    color: ${({ theme }) => theme.palette.text.secondary};
-    cursor: pointer;
-  }
-
-  /* link */
-  a {
-    color: ${({ theme }) => theme.palette.text.secondary};
-  }
-  &:hover a {
-    color: ${({ theme }) => theme.palette.text.primary};
-    text-decoration: underline;
-  }
-`;