@arcblock/ux 2.13.69 → 3.0.0

package/src/PhoneInput/country-select.tsx

@@ -1,4 +1,4 @@
-import { useMemo, forwardRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Box, MenuItem, Select, Typography, SelectProps, TextField, SxProps } from '@mui/material';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
 import type { CountryIso2 } from 'react-international-phone';
@@ -23,120 +23,124 @@ export interface CountrySelectProps<T extends keyof ParsedCountry = 'iso2'>
 // 定义组件类型
 type CountrySelectComponent = <T extends keyof ParsedCountry = 'iso2'>(
   props: CountrySelectProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }
-) => React.ReactElement;
+) => React.ReactElement<any>;
 
 // 实现组件
-const CountrySelectInner = forwardRef(
-  <T extends keyof ParsedCountry = 'iso2'>(
-    {
-      value,
-      onChange,
-      sx = {},
-      selectCountryProps,
-      preview = false,
-      valueField = 'iso2' as T,
-      ...rest
-    }: CountrySelectProps<T>,
-    ref: React.ForwardedRef<HTMLDivElement>
-  ) => {
-    const { hideFlag = true, hideDialCode = false } = selectCountryProps || {};
-    const [searchQuery, setSearchQuery] = useState('');
+function CountrySelectInner<T extends keyof ParsedCountry = 'iso2'>({
+  ref,
+  value,
+  onChange,
+  sx = {},
+  selectCountryProps,
+  preview = false,
+  valueField = 'iso2' as T,
+  ...rest
+}: CountrySelectProps<T> & {
+  ref?: React.Ref<unknown>;
+}) {
+  const { hideFlag = true, hideDialCode = false } = selectCountryProps || {};
+  const [searchQuery, setSearchQuery] = useState('');
 
-    const countryDetail = useMemo(() => {
-      const item = defaultCountries.find((v) => v[1] === value);
-      return value && item ? parseCountry(item) : { name: '', iso2: '', dialCode: '' };
-    }, [value]);
+  const countryDetail = useMemo(() => {
+    const item = defaultCountries.find((v) => v[1] === value);
+    return value && item ? parseCountry(item) : { name: '', iso2: '', dialCode: '' };
+  }, [value]);
 
-    const filteredCountries = useMemo(() => {
-      if (!searchQuery) return defaultCountries;
+  const filteredCountries = useMemo(() => {
+    if (!searchQuery) return defaultCountries;
 
-      const query = searchQuery.toLowerCase();
-      return defaultCountries.filter((country) => {
-        const parsed = parseCountry(country);
-        return (
-          parsed.name.toLowerCase().includes(query) ||
-          parsed.iso2.toLowerCase().includes(query) ||
-          parsed.dialCode.includes(query)
-        );
-      });
-    }, [searchQuery]);
+    const query = searchQuery.toLowerCase();
+    return defaultCountries.filter((country) => {
+      const parsed = parseCountry(country);
+      return (
+        parsed.name.toLowerCase().includes(query) ||
+        parsed.iso2.toLowerCase().includes(query) ||
+        parsed.dialCode.includes(query)
+      );
+    });
+  }, [searchQuery]);
 
-    const renderCountryContent = (
-      <Box
-        display="flex"
-        alignItems="center"
-        flexWrap="nowrap"
-        gap={0.5}
-        sx={{ cursor: preview ? 'default' : 'pointer' }}>
-        {hideFlag ? null : <FlagEmoji iso2={value} style={{ display: 'flex', width: 24, color: 'inherit' }} />}
-        <Typography component="span" sx={{ lineHeight: 1.5 }}>
-          {hideDialCode ? countryDetail?.name : `+${countryDetail?.dialCode}`}
-        </Typography>
-      </Box>
-    );
+  const renderCountryContent = (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'nowrap',
+        gap: 0.5,
+        cursor: preview ? 'default' : 'pointer',
+      }}>
+      {hideFlag ? null : <FlagEmoji iso2={value} style={{ display: 'flex', width: 24, color: 'inherit' }} />}
+      <Typography component="span" sx={{ lineHeight: 1.5 }}>
+        {hideDialCode ? countryDetail?.name : `+${countryDetail?.dialCode}`}
+      </Typography>
+    </Box>
+  );
 
-    if (preview) {
-      return renderCountryContent;
-    }
+  if (preview) {
+    return renderCountryContent;
+  }
 
-    return (
-      <Select
-        {...rest}
-        ref={ref}
-        MenuProps={{
-          style: { maxHeight: 400, top: 2, zIndex: 9999 }, // 默认 zIndex 为 1300, 但是在 SwipeableDrawer 中需要设置为 9999
-          anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-          transformOrigin: { vertical: 'top', horizontal: 'left' },
-          ...(rest.MenuProps ?? {}),
-        }}
-        sx={mergeSx(
-          {
-            '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: 'block' } },
-            '.MuiSelect-select': { padding: 1, paddingRight: '24px !important' },
-            svg: { right: 4, top: 10 },
-            '&:hover': {
-              'fieldset.MuiOutlinedInput-notchedOutline': {
-                borderColor: 'divider',
-              },
-            },
+  return (
+    <Select
+      {...rest}
+      ref={ref}
+      MenuProps={{
+        style: { maxHeight: 400, top: 2, zIndex: 9999 }, // 默认 zIndex 为 1300, 但是在 SwipeableDrawer 中需要设置为 9999
+        anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+        transformOrigin: { vertical: 'top', horizontal: 'left' },
+        ...(rest.MenuProps ?? {}),
+      }}
+      sx={mergeSx(
+        {
+          '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: 'block' } },
+          '.MuiSelect-select': { padding: 1, paddingRight: '24px !important' },
+          svg: { right: 4, top: 10 },
+          '&:hover': {
             'fieldset.MuiOutlinedInput-notchedOutline': {
               borderColor: 'divider',
             },
-            '.MuiMenuItem-root': { justifyContent: 'flex-start' },
           },
-          sx as SxProps
-        )}
-        value={value}
-        onChange={(e) => onChange?.(e.target.value as T extends 'iso2' ? CountryIso2 : string)}
-        // eslint-disable-next-line react/no-unstable-nested-components
-        IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
-        renderValue={() => renderCountryContent}>
-        <Box sx={{ p: 1, position: 'sticky', top: 0, bgcolor: 'background.paper', zIndex: 1 }}>
-          <TextField
-            size="small"
-            fullWidth
-            placeholder="Search country..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
-          />
-        </Box>
-
-        {filteredCountries.map((c) => {
-          const parsed = parseCountry(c);
-          return (
-            <MenuItem key={parsed.iso2} value={parsed[valueField]}>
-              {hideFlag ? null : <FlagEmoji iso2={parsed.iso2} style={{ marginRight: 8, width: 24 }} />}
-              <Typography marginRight={1}>{parsed.name}</Typography>
-              {hideDialCode ? null : <Typography color="gray">(+{parsed.dialCode})</Typography>}
-            </MenuItem>
-          );
-        })}
-      </Select>
-    );
-  }
-);
+          'fieldset.MuiOutlinedInput-notchedOutline': {
+            borderColor: 'divider',
+          },
+          '.MuiMenuItem-root': { justifyContent: 'flex-start' },
+        },
+        sx as SxProps
+      )}
+      value={value}
+      onChange={(e) => onChange?.(e.target.value as T extends 'iso2' ? CountryIso2 : string)}
+      // eslint-disable-next-line react/no-unstable-nested-components
+      IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
+      renderValue={() => renderCountryContent}>
+      <Box sx={{ p: 1, position: 'sticky', top: 0, bgcolor: 'background.paper', zIndex: 1 }}>
+        <TextField
+          size="small"
+          fullWidth
+          placeholder="Search country..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+      </Box>
+      {filteredCountries.map((c) => {
+        const parsed = parseCountry(c);
+        return (
+          <MenuItem key={parsed.iso2} value={parsed[valueField]}>
+            {hideFlag ? null : <FlagEmoji iso2={parsed.iso2} style={{ marginRight: 8, width: 24 }} />}
+            <Typography
+              sx={{
+                marginRight: 1,
+              }}>
+              {parsed.name}
+            </Typography>
+            {hideDialCode ? null : <Typography color="gray">(+{parsed.dialCode})</Typography>}
+          </MenuItem>
+        );
+      })}
+    </Select>
+  );
+}
 
 // 正确导出泛型组件
 const CountrySelect = CountrySelectInner as CountrySelectComponent;

package/src/PhoneInput/index.tsx

@@ -206,8 +206,6 @@ export default function PhoneInput({
 
     return (
       <Box
-        display="flex"
-        alignItems="center"
         component={canDial ? 'a' : 'div'}
         href={canDial ? `tel:${phone}` : undefined}
         {...(canDial
@@ -219,9 +217,12 @@ export default function PhoneInput({
             }
           : {})}
         sx={{
+          display: 'flex',
+          alignItems: 'center',
           textDecoration: 'none',
           color: 'inherit',
           cursor: canDial ? 'pointer' : 'default',
+
           '&:hover': {
             opacity: canDial ? 0.8 : 1,
           },
@@ -233,7 +234,12 @@ export default function PhoneInput({
   }
   // 编辑模式
   return (
-    <Box display="flex" alignItems="flex-start" gap={0.5}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 0.5,
+      }}>
       <CountrySelect
         value={country}
         onChange={onCountryChange}
@@ -254,7 +260,9 @@ export default function PhoneInput({
           },
           props.sx as any // 这里传入的可能是一个数组或一个对象
         )}
-        InputProps={props.InputProps ?? {}}
+        slotProps={{
+          input: props.InputProps ?? {},
+        }}
       />
     </Box>
   );

package/src/PricingTable/PricingPlan.tsx

@@ -1,7 +1,4 @@
-import Card from '@mui/material/Card';
-import Button from '@mui/material/Button';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
+import { Card, Button, CardContent, Typography } from '@mui/material';
 
 import { styled } from '../Theme';
 

package/src/PricingTable/PricingTable.stories.jsx

@@ -0,0 +1,38 @@
+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,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import { Grid } from '@mui/material';
 
 import PricingPlan, { type PricingPlanProps } from './PricingPlan';
 import { styled } from '../Theme';
@@ -12,10 +12,22 @@ function PricingTable({ plans = [] }: PricingTableProps) {
   if (plans && plans.length > 0) {
     return (
       <Div variant="even">
-        <Grid container spacing={2} justifyContent="center">
+        <Grid
+          container
+          spacing={2}
+          sx={{
+            justifyContent: 'center',
+          }}>
           {plans.map((x, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <Grid item className="plan-item" key={index} xs={12} sm={6} md={3}>
+            <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>
           ))}

package/src/QRCode/QRCode.stories.jsx

@@ -0,0 +1,13 @@
+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/RelativeTime/RelativeTime.stories.jsx

@@ -0,0 +1,20 @@
+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.',
+      },
+    },
+  },
+};

package/src/RelativeTime/index.tsx

@@ -1,12 +1,12 @@
-import { Box, Tooltip, TooltipProps } from '@mui/material';
+import { Box, SxProps, Tooltip, TooltipProps } from '@mui/material';
 import { useEffect, useMemo } from 'react';
-import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 import { create } from 'zustand';
 import { formatToDatetime, setDateTool } from '../Util';
 import type { Locale } from '../type';
@@ -71,6 +71,8 @@ export interface RelativeTimeProps {
   useShortTimezone?: boolean;
   disableTimezone?: boolean;
   placement?: TooltipProps['placement'];
+  sx?: SxProps;
+  format?: string;
 }
 
 function useRelativeTime({
@@ -82,6 +84,7 @@ function useRelativeTime({
   type = 'relative',
   tz,
   relativeRange,
+  format,
 }: {
   value: string | number;
   locale?: Locale;
@@ -91,6 +94,7 @@ function useRelativeTime({
   type?: 'relative' | 'absolute' | 'utc';
   tz?: string;
   relativeRange?: number;
+  format?: string;
 }) {
   const date = new Date();
   const timeZoneOffset = date.getTimezoneOffset();
@@ -121,7 +125,7 @@ function useRelativeTime({
     datetime = datetime.tz(tz);
   }
 
-  const absoluteString = formatToDatetime(value, { locale: localeOption, tz });
+  const absoluteString = formatToDatetime(value, { locale: localeOption, tz, format });
 
   let relativeString;
 
@@ -150,8 +154,8 @@ function useRelativeTime({
 
   if (type === 'utc') {
     if (isUtc) {
-      innerContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true });
-      popContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true });
+      innerContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true, format });
+      popContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true, format });
     } else {
       innerContent = absoluteString;
       popContent = relativeString;
@@ -215,6 +219,7 @@ export default function RelativeTime({
   useShortTimezone = false,
   disableTimezone = false,
   placement = 'top-end',
+  format = 'lll',
   ...rest
 }: RelativeTimeProps) {
   const { innerContent, popContent, isUtc, setIsUtc, relativeString } = useRelativeTime({
@@ -226,12 +231,22 @@ export default function RelativeTime({
     type: type === 'all' ? 'utc' : type,
     tz,
     relativeRange,
+    format,
   });
 
   if (type === 'all') {
     return (
       <Tooltip title={undefined} placement={placement} enterTouchDelay={0}>
-        <Box display="inline-flex" alignItems="center" gap={0.5} {...rest}>
+        <Box
+          {...rest}
+          sx={[
+            {
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 0.5,
+            },
+            ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+          ]}>
           <Box component="span" {...rest} sx={{}}>
             {innerContent}
           </Box>
@@ -260,7 +275,12 @@ export default function RelativeTime({
 
   return (
     <Tooltip title={enableTooltip ? popContent : undefined} placement={placement} enterTouchDelay={0}>
-      <Box display="inline-flex" alignItems="center" gap={1}>
+      <Box
+        sx={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 1,
+        }}>
         <Box component="span" {...rest}>
           {innerContent}
         </Box>

package/src/Result/Result.stories.jsx

@@ -0,0 +1,61 @@
+import { Box } from '@mui/material';
+import { LocaleProvider } from '../Locale/context';
+import LocaleSelector from '../Locale/selector';
+
+export { default as Common404 } from './demo/common404';
+export { default as Common403 } from './demo/common403';
+export { default as Common500 } from './demo/common500';
+export { default as CommonError } from './demo/common-error';
+export { default as CommonMaintenance } from './demo/common-maintenance';
+export { default as CommonComingSoon } from './demo/common-coming-soon';
+export { default as Custom404Page } from './demo/custom404-page';
+export { default as InfoPage } from './demo/info-page';
+
+export default {
+  title: 'Feedback/Result',
+
+  parameters: {
+    layout: 'fullscreen',
+
+    docs: {
+      description: {
+        component: 'Used to provide feedback on the outcomes of a series of operational tasks.',
+      },
+    },
+  },
+  decorators: [
+    (StoryFn) => (
+      <TestContainer>
+        <StoryFn />
+      </TestContainer>
+    ),
+  ],
+};
+
+// eslint-disable-next-line react/prop-types
+function TestContainer({ children, ...rest }) {
+  return (
+    <LocaleProvider locale="en" translations={{}}>
+      <Box
+        {...rest}
+        sx={[
+          {
+            position: 'relative',
+            height: 760,
+            overflow: 'hidden',
+          },
+          ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+        ]}>
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 16,
+            right: 16,
+          }}>
+          <LocaleSelector />
+        </Box>
+        {children}
+      </Box>
+    </LocaleProvider>
+  );
+}

package/src/Result/common.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-param-reassign */
-import InfoIcon from '@mui/icons-material/Info';
-import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
+import { Info as InfoIcon, CancelRounded as CancelRoundedIcon } from '@mui/icons-material';
 import { type SvgIconProps } from '@mui/material';
 import Result, { type ResultProps } from './result';
 import translations from './translations';

package/src/Result/result.tsx

@@ -1,4 +1,4 @@
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 
 import { styled } from '../Theme';
 
@@ -14,22 +14,38 @@ function Result({ icon, title = '', description = '', extra, ...rest }: ResultPr
     <Root {...rest}>
       {icon}
       {typeof title === 'string' ? (
-        <Box mt={3} fontSize={22} fontWeight={400} color="#47494E" textAlign="center">
+        <Box
+          sx={{
+            mt: 3,
+            fontSize: 22,
+            fontWeight: 400,
+            color: '#47494E',
+            textAlign: 'center',
+          }}>
           {title}
         </Box>
       ) : (
         title
       )}
-
       {typeof description === 'string' ? (
-        <Box mt={1} fontSize={14} color="#7F828B" textAlign="center">
+        <Box
+          sx={{
+            mt: 1,
+            fontSize: 14,
+            color: '#7F828B',
+            textAlign: 'center',
+          }}>
           {description}
         </Box>
       ) : (
         description
       )}
-
-      <Box mt={3}>{extra}</Box>
+      <Box
+        sx={{
+          mt: 3,
+        }}>
+        {extra}
+      </Box>
     </Root>
   );
 }

package/src/Screenshot/Screenshot.stories.jsx

@@ -0,0 +1,44 @@
+import Basic from './demo/basic';
+
+export default {
+  title: 'Basic/Screenshot',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that wraps its children content in a device frame.',
+      },
+    },
+  },
+};
+
+Basic.storyName = 'Screenshot';
+
+Basic.args = {
+  type: 'phone',
+};
+
+Basic.argTypes = {
+  type: {
+    control: 'select',
+    options: [
+      // 'iphone-x',
+      // 'iphone-8',
+      // 'ipad-pro',
+      // 'imac-pro',
+      // 'macbook',
+      // 'macbook-pro',
+      // 'surface-pro',
+      // 'surface-book',
+      // 'surface-studio',
+      // 'galaxy-s8',
+      // 'google-pixel',
+      // 'google-pixel-2-xl',
+      // 'apple-watch',
+      // ----⬆️ 放弃旧版实现的设备，⬇️都是使用svg组件模式实现设备
+      'phone',
+      'macbook',
+    ],
+  },
+};
+
+export { Basic };