@arcblock/ux 3.4.14 → 3.5.0

package/src/BlockletV2/components/tooltip-icon.tsx

@@ -1,52 +0,0 @@
-import { Tooltip, TooltipProps, tooltipClasses } from '@mui/material';
-import { mergeSx } from '../../Util/style';
-
-export interface TooltipIconProps extends TooltipProps {
-  fontSize?: number | string;
-  fontWeight?: number | string;
-  color?: string;
-}
-
-export default function TooltipIcon({
-  title,
-  sx,
-  children,
-  slotProps,
-  fontSize = 12,
-  fontWeight = 500,
-  color = 'text.contrast',
-  ...props
-}: TooltipIconProps) {
-  return title ? (
-    <Tooltip
-      title={title}
-      placement="top"
-      {...props}
-      slotProps={{
-        popper: {
-          ...slotProps?.popper,
-          sx: mergeSx(
-            {
-              [`& .${tooltipClasses.tooltip}`]: {
-                fontSize,
-                fontWeight,
-                boxShadow: 2,
-                marginBottom: '6px !important',
-                borderRadius: '8px',
-                cursor: 'default',
-                color,
-                display: 'flex',
-                alignItems: 'center',
-              },
-            },
-            // @ts-expect-error
-            slotProps?.popper?.sx
-          ),
-        },
-      }}>
-      {children}
-    </Tooltip>
-  ) : (
-    children
-  );
-}

package/src/BlockletV2/index.ts

@@ -1,6 +0,0 @@
-import ActionButton, { strippedString } from './utils';
-import Blocklet from './blocklet';
-import TooltipIcon from './components/tooltip-icon';
-
-export { ActionButton, strippedString, TooltipIcon };
-export default Blocklet;

package/src/BlockletV2/utils.js

@@ -1,75 +0,0 @@
-import { styled } from '../Theme';
-
-const ActionButton = styled('div')`
-  background-color: transparent !important;
-  & > :not(.Mui-disabled) {
-    position: relative;
-    z-index: 1;
-    &::before {
-      content: '';
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      top: 0;
-      transition: opacity 0.3s;
-    }
-    &:hover::before {
-      opacity: 0;
-    }
-    &::after {
-      content: '';
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      top: 0;
-      left: 0;
-      border-radius: 2px;
-      background-color: ${(props) => props.theme.palette.primary.main};
-      transform: scale(0.1);
-      opacity: 0;
-      z-index: -1;
-      transition:
-        transform 0.3s,
-        opacity 0.3s,
-        background-color 0.3s;
-    }
-    &:hover::after {
-      opacity: 1;
-      transform-origin: center;
-      transform: scale(1);
-    }
-  }
-  & > :not(.Mui-disabled) {
-    background-color: transparent !important;
-    color: ${(props) => props.theme.palette.primary.main}!important;
-  }
-  & > :not(.Mui-disabled) {
-    &:hover {
-      color: ${(props) => props.theme.palette.common.white}!important;
-    }
-  }
-`;
-
-export default ActionButton;
-
-export const strippedString = (originalString = '') => {
-  return originalString.replace(/(<([^>]+)>)/gi, '').trim();
-};
-
-export const formatDownloadCount = (num = '') => {
-  const n = parseInt(num, 10);
-  if (Number.isNaN(n)) {
-    return num;
-  }
-  if (n < 1000) {
-    return n;
-  }
-  if (n < 1000000) {
-    return `${(n / 1000).toFixed(1)}k`;
-  }
-  if (n < 1000000000) {
-    return `${(n / 1000000).toFixed(1)}m`;
-  }
-  return `${(n / 1000000000).toFixed(1)}b`;
-};

package/src/Button/Button.stories.jsx

@@ -1,24 +0,0 @@
-import Button from '.';
-import Basic from './demo/basic';
-
-export default {
-  title: 'Basic/Button',
-  component: Button,
-
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Buttons allow users to initiate an action. They’re typically found in forms, dialog panels, and dialogs.',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=768%3A999',
-    },
-  },
-};
-
-Basic.storyName = 'Button';
-
-export { Basic };

package/src/Button/index.js

@@ -1,9 +0,0 @@
-// @ts-check
-
-import { Button } from '@mui/material';
-import wrap from './wrap';
-
-/** @type {import('./wrap').ButtonComponent} */
-const ButtonComponent = wrap(Button);
-
-export default ButtonComponent;

package/src/Button/wrap.jsx

@@ -1,126 +0,0 @@
-import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
-
-import { CircularProgress } from '@mui/material';
-import colors from '../Colors';
-import { mergeProps } from '../Util';
-
-const extendedColors = {
-  did: {
-    contained: { backgroundColor: colors.did.primary, color: colors.common.white },
-    outlined: { borderColor: colors.did.primary, color: colors.did.primary },
-  },
-  reverse: {
-    contained: { backgroundColor: 'rgba(255, 255, 255, 0.9)', color: colors.grey[900] },
-    outlined: { borderColor: colors.grey[900], color: colors.grey[900] },
-  },
-};
-
-/**
- * @typedef {import('@mui/material').ButtonProps} MuiButtonProps
- * @typedef {{
- *  rounded?: false | true,
- *  loading?: false | true,
- *  forwardedRef?: import('react').ForwardedRef<any>,
- *  color?: MuiButtonProps['color'] | 'reverse' | 'did'
- * }} CustomButtonProps
- * @typedef { CustomButtonProps & Omit<MuiButtonProps, 'color'> } ButtonProps
- */
-
-/**
- * @typedef {React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLButtonElement>>} ButtonComponent
- */
-
-/**
- * @description
- * @export
- * @param {import('@mui/material').ExtendButtonBase<import('@mui/material').ButtonTypeMap<{}, "button">>} BaseComponent
- * @return {ButtonComponent}
- */
-export default function wrap(BaseComponent) {
-  /**
-   *
-   * @param {ButtonProps} props
-   * @returns
-   */
-  function WrappedComponent({ ...rawProps }) {
-    const props = Object.assign({}, rawProps);
-    if (isUndefined(props.rounded)) {
-      props.rounded = false;
-    }
-    if (isUndefined(props.size)) {
-      props.size = 'medium';
-    }
-    if (isUndefined(props.forwardedRef)) {
-      props.forwardedRef = null;
-    }
-    if (isUndefined(props.style)) {
-      props.style = {};
-    }
-    /**
-     * @type {ButtonProps}
-     */
-    const newProps = mergeProps(props, WrappedComponent, ['style']);
-    const { children, rounded, loading, disabled, style, forwardedRef, color, ...rest } = newProps;
-
-    const isDisabled = disabled || loading;
-
-    let loadingSize = 16;
-    switch (rest.size) {
-      case 'small':
-        loadingSize = 14;
-        break;
-      case 'large':
-        loadingSize = 18;
-        break;
-      default:
-    }
-
-    // mui v4 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
-    // 这里扩展 danger/warning/reverse/did 四种 color
-    // !! 已升级到 mui v5, error/warning 等 color 已经默认支持, extendedColors 只扩展了 did/reverse
-    const matched = extendedColors[color] && extendedColors[color][rest.variant];
-
-    /**
-     * @type {import('react').CSSProperties}
-     */
-    const styles = Object.assign(
-      {},
-      {
-        boxShadow: 'none',
-        textTransform: 'capitalize',
-        ...matched,
-      },
-      style
-    );
-    let _rest = rest;
-    if (!matched) {
-      // mui button 本身支持的 color 交由 mui 处理
-      _rest = { ..._rest, color };
-    }
-    if (rounded) {
-      // styles.borderRadius = { small: 16, medium: 18, large: 20 }[rest.size];
-      styles.borderRadius = '100vw';
-    }
-
-    return (
-      <BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {..._rest}>
-        {loading && <CircularProgress size={loadingSize} style={{ marginRight: 5 }} />}
-        {children}
-      </BaseComponent>
-    );
-  }
-
-  WrappedComponent.propTypes = {
-    children: PropTypes.any.isRequired,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-    size: PropTypes.oneOf(['large', 'medium', 'small']),
-    forwardedRef: PropTypes.any,
-    rounded: PropTypes.bool,
-  };
-
-  // eslint-disable-next-line react/prop-types
-  return function WrappedComponentWithRef({ ref, ...props }) {
-    return <WrappedComponent {...props} forwardedRef={ref} />;
-  };
-}

package/src/ButtonGroup/index.js

@@ -1,16 +0,0 @@
-import { ButtonGroup } from '@mui/material';
-import wrap from '../Button/wrap';
-
-/**
- * @typedef {import('@mui/material').ButtonGroupProps} MuiButtonGroupProps
- * @typedef {import('../Button/wrap').CustomButtonProps & Omit<MuiButtonGroupProps, 'color'>} ButtonGroupProps
- */
-
-/**
- * @deprecated 建议直接使用 @mui/material/ButtonGroup
- * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonGroupProps> & React.RefAttributes<HTMLButtonElement>>}
- */
-const ButtonGroupComponent = wrap(ButtonGroup);
-
-// 该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角
-export default ButtonGroupComponent;

package/src/CardSelector/index.tsx

@@ -1,136 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import styled from '@emotion/styled';
-import noop from 'lodash/noop';
-
-export interface CardSelectorProps {
-  list?: Array<{ src: string; name: string }> | Array<(i: number) => React.ReactNode>;
-  width?: number;
-  height?: number;
-  cardSpace?: number;
-  onSelect?: (index: number) => void;
-  defaultIndex?: number;
-}
-
-export default function CardSelector({
-  list = [],
-  width = 300,
-  height = 400,
-  cardSpace = 40,
-  onSelect = noop,
-  defaultIndex = 0,
-}: CardSelectorProps) {
-  const [selectedId, setSelectedId] = useState(0);
-  const [translateX, setTranslateX] = useState(0);
-  const outterCon = useRef<HTMLDivElement | null>(null);
-
-  // 选择卡片
-  const selectedItem = (i: number) => {
-    if (i < 0 || i > list.length - 1) {
-      return;
-    }
-    setSelectedId(i);
-
-    if (outterCon.current) {
-      // 外部容器大小
-      const outerWidth = outterCon.current.clientWidth;
-
-      setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
-    }
-
-    onSelect(i);
-  };
-
-  useEffect(() => {
-    selectedItem(defaultIndex);
-
-    outterCon.current?.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  let startX: number;
-
-  const touchstart: React.TouchEventHandler<HTMLDivElement> = (e) => {
-    const point = e.touches[0];
-    startX = point.clientX;
-  };
-
-  const touchend: React.TouchEventHandler<HTMLDivElement> = (e) => {
-    const point = e.changedTouches[0];
-    const diffX = startX - point.clientX;
-
-    if (Math.abs(diffX) > 60) {
-      if (diffX > 0) {
-        selectedItem(selectedId + 1);
-      } else {
-        selectedItem(selectedId - 1);
-      }
-    }
-  };
-
-  return (
-    <Container ref={outterCon} onTouchStart={touchstart} onTouchEnd={touchend}>
-      <div className="card-container" style={{ transform: `translate(${-translateX}px, 0)` }}>
-        {list.map((e, i) => {
-          if (e instanceof Function) {
-            return (
-              <div
-                className={`card-item ${i === selectedId ? 'selected' : ''}`}
-                style={{ width, height, margin: cardSpace / 2 }}
-                // eslint-disable-next-line react/no-array-index-key
-                key={i}
-                onClick={() => selectedItem(i)}>
-                {e(i)}
-              </div>
-            );
-          }
-          return (
-            <div
-              className={`card-item ${i === selectedId ? 'selected' : ''}`}
-              style={{ width, height, margin: cardSpace / 2 }}
-              // eslint-disable-next-line react/no-array-index-key
-              key={i}
-              onClick={() => selectedItem(i)}>
-              <img src={e.src} alt={e.name} />
-            </div>
-          );
-        })}
-      </div>
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  overflow: hidden;
-  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
-  overflow: hidden;
-  .card-container {
-    display: flex;
-    white-space: nowrap;
-    width: max-content;
-    transition: all ease 0.3s;
-  }
-  .card-item {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    cursor: pointer;
-    img,
-    svg {
-      max-width: 100%;
-      max-height: 100%;
-      width: auto;
-      height: auto;
-      outline: #526ded solid 0;
-      transition: all ease 0.2s;
-      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
-    }
-    &.selected {
-      cursor: default;
-      img,
-      svg {
-        outline: #526ded solid 5px;
-      }
-    }
-  }
-`;

package/src/Center/Center.stories.jsx

@@ -1,20 +0,0 @@
-import Center from '.';
-
-export { default as Basic } from './demo/basic';
-export { default as RelativeParent } from './demo/relative-parent';
-
-export default {
-  title: 'Basic/Center',
-  component: Center,
-
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'The Center component centers its content both vertically and horizontally.',
-      },
-      inlineStories: false,
-      iframeHeight: 600,
-    },
-  },
-};

package/src/Center/index.tsx

@@ -1,33 +0,0 @@
-import { styled } from '../Theme';
-
-export default function Center({
-  children = null,
-  relative = 'screen',
-}: {
-  children?: React.ReactNode;
-  /**
-   * 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
-   */
-  relative?: 'screen' | 'parent';
-}) {
-  let style = {};
-
-  if (relative === 'parent') {
-    style = {
-      width: '100%',
-      height: '100%',
-    };
-  }
-
-  return <Div style={style}>{children}</Div>;
-}
-
-const Div = styled('div')`
-  flex: 1;
-  width: 100vw;
-  height: 100vh;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;

package/src/ClickToCopy/ClickToCopy.stories.jsx

@@ -1,24 +0,0 @@
-import Basic from './demo/basic';
-import WithComplexChild from './demo/with-complex-child';
-import WithCustomParentFontColor from './demo/with-custom-parent-font-color';
-import CopyButton from './demo/copy-button';
-
-export default {
-  title: 'Basic/ClickToCopy',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'ClickToCopy allows the content that is wrapped in it to be copied with a single click.',
-      },
-    },
-  },
-};
-
-Basic.argTypes = {
-  locale: { control: 'select', options: ['en', 'zh'] },
-  tip: { control: 'text' },
-  unstyled: { control: 'boolean', defaultValue: false },
-};
-
-export { Basic, WithComplexChild, WithCustomParentFontColor, CopyButton };

package/src/ClickToCopy/copy-button.tsx

@@ -1,43 +0,0 @@
-import type { JSX } from 'react';
-import { Tooltip } from '@mui/material';
-import { green } from '@mui/material/colors';
-import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
-import useCopy from './hook';
-import type { Locale } from '../type';
-
-export interface CopyButtonProps extends React.HTMLAttributes<HTMLSpanElement> {
-  content?: string;
-  locale?: Locale;
-  render?: (props: { copyButton: React.ReactNode; containerRef: React.Ref<unknown> }) => JSX.Element | null;
-  showTooltip?: true | false;
-}
-
-export default function CopyButton({
-  content = '',
-  locale = 'en',
-  render = undefined,
-  showTooltip = true,
-  ...rest
-}: CopyButtonProps) {
-  const { containerRef, copied, copy, texts } = useCopy({ content, locale });
-  const iconStyle = {
-    fontSize: '1em',
-  };
-
-  const copyButton = (
-    <span title={copied ? '' : texts.copy} {...rest} style={{ height: '1em', ...rest.style }}>
-      {copied ? (
-        <Tooltip title={texts.copied} placement="bottom" arrow open={copied && showTooltip}>
-          <CheckIcon sx={{ ...iconStyle, color: green[500] }} />
-        </Tooltip>
-      ) : (
-        <CopyIcon onClick={copy} sx={{ ...iconStyle, cursor: 'pointer' }} />
-      )}
-    </span>
-  );
-
-  if (render) {
-    return render({ copyButton, containerRef });
-  }
-  return copyButton;
-}

package/src/ClickToCopy/hook.ts

@@ -1,42 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import Copy from 'copy-to-clipboard';
-import type { Locale, Translations } from '../type';
-
-const translations: Translations = {
-  en: {
-    copy: 'Click To Copy',
-    copied: 'Copied!',
-  },
-  zh: {
-    copy: '点击复制',
-    copied: '已复制!',
-  },
-};
-
-export default function useCopy({ content, locale = 'en' }: { content?: string; locale?: Locale }) {
-  const [copied, setCopied] = useState(false);
-  const containerRef = useRef<HTMLElement | null>(null);
-  const copy = (e: React.MouseEvent) => {
-    if (e) {
-      e.stopPropagation();
-    }
-
-    Copy(content || (containerRef.current?.textContent ?? ''));
-    setCopied(true);
-  };
-
-  useEffect(() => {
-    let timer: ReturnType<typeof setTimeout>;
-    if (copied) {
-      timer = setTimeout(() => setCopied(false), 2000);
-    }
-    return () => clearTimeout(timer);
-  }, [copied]);
-
-  return {
-    containerRef,
-    copied,
-    copy,
-    texts: translations[locale] || translations.en,
-  };
-}