@arcblock/ux 3.4.14 → 3.5.0

package/src/PhoneInput/index.tsx

@@ -1,269 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Box, TextField, TextFieldProps, Typography } from '@mui/material';
-import { parsePhoneNumber } from 'awesome-phonenumber';
-import { defaultCountries, CountryIso2, usePhoneInput, parseCountry } from 'react-international-phone';
-import CountrySelect, { CountryDisplayOptions } from './country-select';
-import { mergeSx } from '../Util/style';
-
-export interface PhoneValue {
-  country: CountryIso2;
-  phone: string; // 带区号的完整电话号码，如 +86123456789
-}
-
-export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
-  value?: PhoneValue;
-  onChange?: (value: PhoneValue) => void;
-  countryDisplayOptions?: CountryDisplayOptions;
-  preview?: boolean;
-  allowDial?: boolean; // 是否允许拨号, 只在 preview 为 true 时有效
-}
-
-export function validatePhoneNumber(phone: string, iso2: CountryIso2, dialCode: string = ''): boolean {
-  // 如果没有输入电话号码，返回false
-  if (!phone) return false;
-
-  // 如果去除所有格式化字符后，只剩下区号，则认为只有区号
-  const cleanedPhone = phone.replace(/[\s\-()]+/g, '');
-
-  const phoneDialCode = dialCode || getDialCodeByCountry(iso2);
-  // 这表示电话号码只有区号部分
-  if (getDialCodeWithoutPlus(phoneDialCode) === getDialCodeWithoutPlus(cleanedPhone)) {
-    return true; // 如果只有区号，则视为有效
-  }
-
-  // 否则使用validator进行完整校验
-  const pn = parsePhoneNumber(phone, { regionCode: iso2 });
-  const cleanedParsedPhone = pn.number?.input.replace(/[\s\-()]+/g, '');
-  return (
-    pn.valid && (pn.type === 'mobile' || pn.type === 'fixed-line-or-mobile') && cleanedParsedPhone === pn.number?.e164
-  );
-}
-
-// 从带区号的电话号码中提取纯号码部分
-function extractPhoneWithoutCode(phone: string, dialCode: string): string {
-  if (!phone) return '';
-  // 先去除区号
-  const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
-  // 去除非数字字符，但保留括号
-  return phoneWithoutCode;
-}
-
-// 添加区号到纯号码
-function addCountryCodeToPhone(phone: string, dialCode: string): string {
-  if (!phone) return `+${dialCode}`;
-  return phone.startsWith('+') ? phone : `+${dialCode}${phone}`;
-}
-
-// 获取不带+号的区号
-function getDialCodeWithoutPlus(dialCode: string): string {
-  return dialCode.replace(/^\+/, '');
-}
-
-// 根据ISO2国家代码获取国家信息
-function getCountryInfoByIso2<T extends keyof ReturnType<typeof parseCountry>>(
-  iso2: CountryIso2,
-  property: T
-): ReturnType<typeof parseCountry>[T] | undefined {
-  // 查找对应的国家数据
-  const countryItem = defaultCountries.find((country) => parseCountry(country).iso2 === iso2);
-
-  if (!countryItem) {
-    return undefined;
-  }
-
-  // 解析国家信息并返回请求的属性
-  return parseCountry(countryItem)[property];
-}
-
-// 根据ISO2国家代码获取区号
-export function getDialCodeByCountry(iso2: CountryIso2): string {
-  return getCountryInfoByIso2(iso2, 'dialCode') || '';
-}
-
-// 根据ISO2国家代码获取国家名称
-export function getCountryNameByCountry(iso2: CountryIso2): string {
-  return getCountryInfoByIso2(iso2, 'name') || '';
-}
-
-// 根据手机号识别国家，返回国家的 iso2 码
-// 如果手机号带有区号，通过 parsePhoneNumber 识别
-// 如果手机号不带区号，通过碰撞识别
-export function detectCountryFromPhone(phoneNumber?: string): CountryIso2 | undefined {
-  try {
-    if (!phoneNumber) return undefined;
-
-    // 如果已经带了+号，尝试从前缀匹配
-    if (phoneNumber.startsWith('+')) {
-      const parsedPhone = parsePhoneNumber(phoneNumber);
-      if (parsedPhone.valid) {
-        return parsedPhone.regionCode.toLowerCase() as CountryIso2;
-      }
-      for (const country of defaultCountries) {
-        const parsed = parseCountry(country);
-        if (phoneNumber.startsWith(`+${parsed.dialCode}`)) {
-          const phoneWithCode = phoneNumber;
-          // 验证该号码是否有效
-          if (validatePhoneNumber(phoneWithCode, parsed.dialCode, parsed.iso2)) {
-            return parsed.iso2;
-          }
-        }
-      }
-    } else {
-      for (const country of defaultCountries) {
-        const parsed = parseCountry(country);
-        const phoneWithCode = `+${parsed.dialCode}${phoneNumber}`;
-        if (validatePhoneNumber(phoneWithCode, parsed.dialCode, parsed.iso2)) {
-          return parsed.iso2;
-        }
-      }
-    }
-    return undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-export default function PhoneInput({
-  value = { country: 'us', phone: '' },
-  onChange = undefined,
-  placeholder = 'Enter phone number',
-  countryDisplayOptions = {},
-  preview = false,
-  allowDial = true,
-  ...props
-}: PhoneInputProps) {
-  // 创建国家代码映射表，避免重复解析
-  const countryMap = useMemo(() => {
-    const map = new Map<CountryIso2, ReturnType<typeof parseCountry>>();
-    defaultCountries.forEach((country) => {
-      const parsed = parseCountry(country);
-      map.set(parsed.iso2, parsed);
-    });
-    return map;
-  }, []);
-
-  const [previewValue, setPreviewValue] = useState(value);
-
-  const handleValueChange = useCallback(
-    (data: PhoneValue) => {
-      if (!preview && onChange) {
-        const newValue = {
-          ...value,
-          ...data,
-        };
-        const countryData = countryMap.get(newValue.country);
-        if (countryData) {
-          newValue.phone = addCountryCodeToPhone(newValue.phone, getDialCodeWithoutPlus(countryData.dialCode));
-        }
-        onChange(newValue);
-      }
-    },
-    [onChange, preview, value, countryMap]
-  );
-
-  // 获取当前国家的区号（不带+号）
-  const currentDialCode = useMemo(() => {
-    const countryData = countryMap.get(value.country);
-    return countryData ? getDialCodeWithoutPlus(countryData.dialCode) : '';
-  }, [value.country, countryMap]);
-
-  // 使用 react-international-phone 的 hook
-  const { phone, country, handlePhoneValueChange, setCountry } = usePhoneInput({
-    defaultCountry: value.country,
-    value: extractPhoneWithoutCode(value.phone, currentDialCode),
-    countries: defaultCountries,
-    disableDialCodeAndPrefix: true,
-    onChange: (data) => {
-      const newData = {
-        ...data,
-        phone:
-          previewValue.country !== data.country && !data.phone
-            ? extractPhoneWithoutCode(value.phone, currentDialCode)
-            : data.phone,
-      };
-      setPreviewValue(newData);
-      handleValueChange(newData);
-    },
-  });
-
-  // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
-  const displayPhone = useMemo(
-    () => phone || extractPhoneWithoutCode(value.phone, currentDialCode),
-    [phone, value.phone, currentDialCode]
-  );
-
-  // 处理国家变更
-  const onCountryChange = (newCountry: CountryIso2) => {
-    if (preview) return;
-    setCountry(newCountry);
-  };
-
-  // 预览模式
-  if (preview) {
-    const phoneWithCode = addCountryCodeToPhone(phone, getDialCodeByCountry(country));
-    const isValid = phone && validatePhoneNumber(phoneWithCode, country);
-    const canDial = allowDial && isValid;
-
-    return (
-      <Box
-        component={canDial ? 'a' : 'div'}
-        href={canDial ? `tel:${phone}` : undefined}
-        {...(canDial
-          ? {
-              'aria-label': `Call ${phone}`,
-              title: `Call ${phone}`,
-              rel: 'nofollow',
-              itemProp: 'telephone',
-            }
-          : {})}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          textDecoration: 'none',
-          color: 'inherit',
-          cursor: canDial ? 'pointer' : 'default',
-
-          '&:hover': {
-            opacity: canDial ? 0.8 : 1,
-          },
-        }}>
-        <CountrySelect value={country} preview={preview} />
-        <Typography sx={{ ml: 0.5 }}>{displayPhone}</Typography>
-      </Box>
-    );
-  }
-  // 编辑模式
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'flex-start',
-        gap: 0.5,
-      }}>
-      <CountrySelect
-        value={country}
-        onChange={onCountryChange}
-        preview={false}
-        selectCountryProps={countryDisplayOptions}
-      />
-      <TextField
-        {...props}
-        value={displayPhone}
-        onChange={handlePhoneValueChange}
-        placeholder={placeholder}
-        className="phone-input"
-        sx={mergeSx(
-          {
-            '& .MuiInputBase-input': {
-              padding: 1,
-            },
-          },
-          props.sx as any // 这里传入的可能是一个数组或一个对象
-        )}
-        slotProps={{
-          input: props.InputProps ?? {},
-        }}
-      />
-    </Box>
-  );
-}

package/src/PoweredByArcBlock/index.tsx

@@ -1,27 +0,0 @@
-import type { LinkProps, TypographyProps } from '@mui/material';
-import { Link, Typography } from '@mui/material';
-
-export interface PoweredByArcBlockProps extends TypographyProps {
-  linkProps?: LinkProps;
-  showExtra?: boolean;
-}
-
-export default function PoweredByArcBlock({
-  linkProps = undefined,
-  showExtra = false,
-  ...props
-}: PoweredByArcBlockProps) {
-  return (
-    <Typography {...props}>
-      Powered by{' '}
-      <Link href="https://www.arcblock.io" target="_blank" {...linkProps}>
-        ArcBlock
-      </Link>
-      's{' '}
-      <Link href="https://www.blocklet.io" target="_blank" {...linkProps}>
-        Blocklet Technology
-      </Link>
-      {showExtra ? ', the decentralized web engine.' : null}
-    </Typography>
-  );
-}

package/src/PricingTable/PricingPlan.tsx

@@ -1,120 +0,0 @@
-import { Card, Button, CardContent, Typography } from '@mui/material';
-
-import { styled } from '../Theme';
-
-export interface PricingPlanProps {
-  plan: {
-    name: string;
-    price: string;
-    featureList: string[];
-    showButton: boolean;
-    buttonLink: string;
-    buttonText: string;
-  };
-}
-
-function PricingPlan({ plan }: PricingPlanProps) {
-  return (
-    <PlanCard $shadow>
-      <div className="card-header">
-        <div className="title">{plan.name}</div>
-      </div>
-      <CardContent className="card-content">
-        <div className="plan-content">
-          <div className="plan-pricing">
-            <Typography component="h2" variant="h5" className="price-number">
-              {plan.price}
-            </Typography>
-          </div>
-          <div className="plan-services">
-            {plan.featureList.map((line) => (
-              <Typography component="p" variant="body1" align="center" key={line}>
-                {line}
-              </Typography>
-            ))}
-          </div>
-        </div>
-        <div className="plan-actions">
-          {plan.showButton && (
-            <Button fullWidth variant="outlined" color="primary" component="a" href={plan.buttonLink}>
-              {plan.buttonText}
-            </Button>
-          )}
-        </div>
-      </CardContent>
-    </PlanCard>
-  );
-}
-
-export default PricingPlan;
-
-type PlanCardProps = {
-  $shadow?: boolean;
-};
-
-const PlanCard = styled(Card)<PlanCardProps>`
-  height: 500px;
-  display: flex;
-  flex-direction: column;
-  @media (max-width: 320px) {
-    margin-top: 20px;
-  }
-
-  && {
-    ${(props) => (props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)')}
-  }
-
-  .card-header {
-    height: 80px;
-    background-color: #f1fbfb;
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    justify-content: center;
-    .title {
-      font-size: 18px;
-      font-weight: 600;
-      text-align: center;
-      color: #404040;
-      margin: 0;
-    }
-  }
-
-  .card-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    flex-grow: 1;
-  }
-
-  .plan-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-
-    .plan-pricing {
-      display: flex;
-      justify-content: center;
-      align-items: baseline;
-      margin-bottom: 12px;
-      color: #4e6af6;
-      text-align: center;
-    }
-
-    .price-number {
-      font-size: 30px;
-      font-weight: 600;
-      color: #4e6af6;
-    }
-
-    .plan-services strong {
-      color: #4e6af6;
-      font-weight: 500;
-    }
-  }
-
-  .plan-actions {
-    width: 100%;
-  }
-`;

package/src/PricingTable/PricingTable.stories.jsx

@@ -1,38 +0,0 @@
-import PricingTable from '.';
-
-const plans = [
-  {
-    name: 'Developer',
-    price: '0 ABT',
-    featureList: ['1. 规则1111', '2. 规则22222', '3. 规则33333'],
-    showButton: true,
-    buttonText: 'Contact',
-    buttonLink: 'https://www.arcblockio.cn/zh/',
-  },
-  {
-    name: 'Free',
-    price: '0 ABT',
-    featureList: ['1. 规则1111', '2. 规则22222', '3. 规则33333'],
-    showButton: true,
-    buttonText: 'Contact',
-    buttonLink: 'https://www.arcblockio.cn/zh/',
-  },
-  {
-    name: 'Enterprise Plan',
-    price: '2000 ABT',
-    featureList: ['1. 规则1111', '2. 规则22222', '3. 规则33333'],
-    showButton: true,
-    buttonText: 'Contact',
-    buttonLink: 'https://www.arcblockio.cn/zh/',
-  },
-];
-
-export default {
-  title: 'Deprecated/PricingTable',
-};
-
-export function BasicUse() {
-  return <PricingTable plans={plans} />;
-}
-
-BasicUse.storyName = 'basic use';

package/src/PricingTable/index.tsx

@@ -1,59 +0,0 @@
-import { Grid } from '@mui/material';
-
-import PricingPlan, { type PricingPlanProps } from './PricingPlan';
-import { styled } from '../Theme';
-import { withDeprecated } from '../Util/deprecate';
-
-export interface PricingTableProps {
-  plans?: Array<PricingPlanProps['plan']>;
-}
-
-function PricingTable({ plans = [] }: PricingTableProps) {
-  if (plans && plans.length > 0) {
-    return (
-      <Div variant="even">
-        <Grid
-          container
-          spacing={2}
-          sx={{
-            justifyContent: 'center',
-          }}>
-          {plans.map((x, index) => (
-            <Grid
-              className="plan-item"
-              // eslint-disable-next-line react/no-array-index-key
-              key={index}
-              size={{
-                xs: 12,
-                sm: 6,
-                md: 3,
-              }}>
-              <PricingPlan plan={x} />
-            </Grid>
-          ))}
-        </Grid>
-      </Div>
-    );
-  }
-  return null;
-}
-
-export default withDeprecated(PricingTable, { name: 'PricingTable' });
-
-type DivProps = {
-  variant: 'even' | 'odd';
-};
-
-const Div = styled('div')<DivProps>`
-  padding: 100px 0;
-  text-align: center;
-  background-color: ${(props) => (props.variant === 'even' ? '#fbfbfb' : '#ffffff')};
-  @media (max-width: 320px) {
-    padding: 50px 0;
-  }
-  .plan-item {
-    @media (max-width: 320px) {
-      margin-bottom: 30px;
-    }
-  }
-`;

package/src/QRCode/QRCode.stories.jsx

@@ -1,13 +0,0 @@
-export { default as Basic } from './demo/basic';
-export { default as WithImage } from './demo/with-image';
-
-export default {
-  title: 'Data Display/QRCode',
-  parameters: {
-    docs: {
-      description: {
-        component: 'Used to generate QR codes with a logo and styling.',
-      },
-    },
-  },
-};

package/src/QRCode/index.tsx

@@ -1,66 +0,0 @@
-import { useRef, useEffect, useMemo, useState } from 'react';
-import QRCodeStyling from '@solana/qr-code-styling';
-import { Box } from '@mui/material';
-
-type QRCodeStylingOptions = NonNullable<ConstructorParameters<typeof QRCodeStyling>[0]>;
-
-const defaults: QRCodeStylingOptions = {
-  margin: 0,
-  dotsOptions: {
-    type: 'dots',
-  },
-  cornersSquareOptions: {
-    type: 'extra-rounded',
-  },
-  cornersDotOptions: {
-    type: 'dot',
-  },
-};
-
-export interface QRCodeProps {
-  /** 一般情况下仅使用 data/size/image 即可 */
-  data: string;
-  size: number;
-  image?: string;
-  /** 覆盖 qr-code-styling 配置 */
-  config?: QRCodeStylingOptions;
-}
-
-// 该组件用于生成与 android wallet 样式风格相似的 qrcode
-// 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
-function QRCode({ data, size, image = undefined, config = {}, ...rest }: QRCodeProps) {
-  const ref = useRef(null);
-  const options = useMemo(() => {
-    return {
-      ...defaults,
-      data,
-      width: size,
-      height: size,
-      ...(image && {
-        image,
-        imageOptions: {
-          crossOrigin: 'anonymous',
-          margin: 0,
-        },
-      }),
-      ...config,
-    };
-  }, [data, size, image, config]);
-
-  const [qrCode] = useState(new QRCodeStyling(options));
-
-  useEffect(() => {
-    if (ref.current) {
-      qrCode.append(ref.current);
-    }
-  }, [qrCode, ref]);
-
-  useEffect(() => {
-    if (!qrCode) return;
-    qrCode.update(options);
-  }, [options, qrCode]);
-
-  return <Box ref={ref} {...rest} />;
-}
-
-export default QRCode;

package/src/RelativeTime/RelativeTime.stories.jsx

@@ -1,20 +0,0 @@
-export { default as Basic } from './demo/basic';
-export { default as WithoutSuffix } from './demo/without-suffix';
-export { default as From } from './demo/from';
-export { default as To } from './demo/to';
-export { default as DisplayAbsoluteTime } from './demo/display-absolute-time';
-export { default as CustomTimezoneAmericaLosAngeLes } from './demo/custom-timezone-america-los-ange-les';
-export { default as CustomStyle } from './demo/custom-style';
-export { default as UTCTimeFormat } from './demo/utc';
-export { default as AllTimeFormat } from './demo/all';
-
-export default {
-  title: 'Data Display/RelativeTIme',
-  parameters: {
-    docs: {
-      description: {
-        component: 'Display dates as a human-readable relative time.',
-      },
-    },
-  },
-};