@arcblock/ux 3.4.14 → 3.5.0

package/src/RelativeTime/index.tsx

@@ -1,334 +0,0 @@
-import { Box, SxProps, Tooltip, TooltipProps } from '@mui/material';
-import { useEffect, useMemo } from 'react';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-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';
-
-dayjs.extend(localizedFormat);
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(updateLocale);
-dayjs.extend(relativeTime);
-dayjs.updateLocale('zh-cn', {
-  // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
-  relativeTime: {
-    future: '%s后',
-    past: '%s前',
-    s: '几秒',
-    m: '1 分钟',
-    mm: '%d 分钟',
-    h: '1 小时',
-    hh: '%d 小时',
-    d: '1 天',
-    dd: '%d 天',
-    M: '1 个月',
-    MM: '%d 个月',
-    y: '1 年',
-    yy: '%d 年',
-  },
-});
-// FIXME: @zhanghan 此处不能真正的将 relativeTime 设置为支持中文
-setDateTool(dayjs);
-
-const translations: Record<Locale, { utc: string; local: string; shortUTC: string; shortLocal: string }> = {
-  en: {
-    utc: 'UTC Timezone',
-    local: 'Local Timezone',
-    shortUTC: 'UTC',
-    shortLocal: 'Local',
-  },
-  zh: {
-    utc: 'UTC 时区',
-    local: '当前时区',
-    shortUTC: 'UTC',
-    shortLocal: '当前时区',
-  },
-};
-
-type UtcState = { isUtc: boolean; setIsUtc: (isUtc: boolean) => void };
-const useUtcStore = create<UtcState>((set) => ({
-  isUtc: false,
-  setIsUtc: (isUtc: boolean) => set({ isUtc }),
-}));
-
-export interface RelativeTimeProps {
-  value: string | number;
-  locale?: Locale;
-  withoutSuffix?: false | true;
-  from?: string | number;
-  to?: string | number;
-  type?: 'relative' | 'absolute' | 'utc' | 'all';
-  tz?: string;
-  relativeRange?: number;
-  enableTooltip?: boolean;
-  useShortTimezone?: boolean;
-  disableTimezone?: boolean;
-  placement?: TooltipProps['placement'];
-  sx?: SxProps;
-  format?: string;
-  mode?: 'all' | 'daysLeft'; // all: 显示所有内容，daysLeft: 只显示剩余天数
-}
-
-function normalizeTimestamp(value: string | number) {
-  let normalizedValue = value;
-  if (typeof normalizedValue === 'string' && /^\d+$/.test(normalizedValue)) {
-    normalizedValue = Number(normalizedValue);
-  }
-
-  if (typeof normalizedValue === 'number') {
-    // 10 位左右：很可能是秒（例如 1699411200）
-    // 13 位左右：很可能是毫秒（例如 1699411200000）
-    const abs = Math.abs(Math.trunc(normalizedValue));
-    // < 100,000,000,000 -> treat as seconds (safe threshold for seconds)
-    if (abs < 1e11) {
-      return new Date(normalizedValue * 1000).getTime();
-    }
-
-    return new Date(normalizedValue).getTime();
-  }
-
-  return new Date(normalizedValue).getTime();
-}
-
-function useRelativeTime({
-  value,
-  locale = 'en',
-  withoutSuffix = false,
-  from = '',
-  to = '',
-  type = 'relative',
-  tz,
-  relativeRange,
-  format,
-}: {
-  value: string | number;
-  locale?: Locale;
-  withoutSuffix?: boolean;
-  from?: string | number;
-  to?: string | number;
-  type?: 'relative' | 'absolute' | 'utc';
-  tz?: string;
-  relativeRange?: number;
-  format?: string;
-}) {
-  const date = new Date();
-  const timeZoneOffset = date.getTimezoneOffset();
-  const sign = timeZoneOffset > 0 ? '-' : '+';
-  const hoursOffset = Math.abs(timeZoneOffset) / 60;
-  const isLocalUtc = timeZoneOffset === 0;
-
-  const isUtc = useUtcStore((state) => state.isUtc);
-  const setIsUtc = useUtcStore((state) => state.setIsUtc);
-
-  useEffect(() => {
-    setIsUtc(isLocalUtc);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLocalUtc]);
-
-  if (!value) {
-    return { innerContent: '-', popContent: '-', isUtc, setIsUtc, sign, hoursOffset };
-  }
-
-  const normalizedValue = normalizeTimestamp(value);
-  const localeOption = locale === 'zh' ? 'zh-cn' : 'en';
-  let datetime = dayjs(normalizedValue);
-
-  if (type === 'utc') {
-    datetime = datetime.utc();
-  }
-
-  if (tz) {
-    datetime = datetime.tz(tz);
-  }
-
-  datetime = datetime.locale(localeOption);
-
-  const absoluteString = formatToDatetime(normalizedValue, { locale: localeOption, tz, format });
-
-  let relativeString;
-
-  if (from) {
-    relativeString = datetime.from(from, withoutSuffix);
-  } else if (to) {
-    relativeString = datetime.to(to, withoutSuffix);
-  } else if (relativeRange) {
-    const diffTime = datetime.diff(dayjs());
-    if (Math.abs(diffTime) > relativeRange) {
-      relativeString = absoluteString;
-    }
-  }
-
-  if (!relativeString) {
-    relativeString = datetime.fromNow(withoutSuffix);
-  }
-
-  let innerContent = relativeString;
-  let popContent = absoluteString;
-
-  if (type === 'absolute') {
-    innerContent = absoluteString;
-    popContent = relativeString;
-  }
-
-  if (type === 'utc') {
-    if (isUtc) {
-      innerContent = formatToDatetime(normalizedValue, { locale: localeOption, tz, isUtc: true, format });
-      popContent = formatToDatetime(normalizedValue, { locale: localeOption, tz, isUtc: true, format });
-    } else {
-      innerContent = absoluteString;
-      popContent = relativeString;
-    }
-  }
-
-  return { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString, absoluteString };
-}
-
-function UTCChip({
-  locale,
-  isUtc = false,
-  setIsUtc,
-  useShortTimezone = true,
-}: {
-  locale: Locale;
-  isUtc?: boolean;
-  setIsUtc: (data: boolean) => void;
-  useShortTimezone?: boolean;
-}) {
-  const text = useMemo(() => {
-    const UTC = useShortTimezone ? 'shortUTC' : 'utc';
-    const LOCAL = useShortTimezone ? 'shortLocal' : 'local';
-    // fallback to en
-    const config = translations[locale] || translations.en;
-
-    if (isUtc) {
-      return `${config[UTC]}`;
-    }
-
-    return `${config[LOCAL]}`;
-  }, [locale, useShortTimezone, isUtc]);
-
-  return (
-    <Box
-      component="span"
-      sx={{
-        color: 'inherit',
-        cursor: 'pointer',
-        border: '1px solid',
-        borderColor: 'divider',
-        borderRadius: '20px',
-        padding: '4px 8px',
-        lineHeight: 1,
-      }}
-      onClick={() => setIsUtc(!isUtc)}>
-      {text}
-    </Box>
-  );
-}
-
-export default function RelativeTime({
-  value,
-  locale = 'en',
-  withoutSuffix = false,
-  from = '',
-  to = '',
-  type = 'relative',
-  tz = undefined,
-  relativeRange = undefined,
-  enableTooltip = true,
-  useShortTimezone = false,
-  disableTimezone = false,
-  placement = 'top-end',
-  format = 'lll',
-  mode = 'all',
-  ...rest
-}: RelativeTimeProps) {
-  const { innerContent, popContent, isUtc, setIsUtc, relativeString } = useRelativeTime({
-    value,
-    locale,
-    withoutSuffix,
-    from,
-    to,
-    type: type === 'all' ? 'utc' : type,
-    tz,
-    relativeRange,
-    format,
-  });
-
-  const allContent = (
-    <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>
-
-      <Box component="span" sx={{ color: 'inherit' }}>
-        ·
-      </Box>
-
-      <Box component="span" sx={{ color: 'inherit' }}>
-        {relativeString}
-      </Box>
-
-      {!disableTimezone && (
-        <>
-          <Box component="span" sx={{ color: 'inherit' }}>
-            ·
-          </Box>
-
-          <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
-        </>
-      )}
-    </Box>
-  );
-
-  // 优先通过 mode 来决定显示什么内容
-  if (mode === 'daysLeft') {
-    return (
-      <Tooltip title={allContent} placement={placement} enterTouchDelay={0}>
-        <Box component="span">{relativeString}</Box>
-      </Tooltip>
-    );
-  }
-
-  if (type === 'all' && mode === 'all') {
-    return (
-      <Tooltip title={undefined} placement={placement} enterTouchDelay={0}>
-        {allContent}
-      </Tooltip>
-    );
-  }
-
-  return (
-    <Tooltip title={enableTooltip ? popContent : undefined} placement={placement} enterTouchDelay={0}>
-      <Box
-        sx={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: 1,
-        }}>
-        <Box component="span" {...rest}>
-          {innerContent}
-        </Box>
-
-        {type === 'utc' && !disableTimezone && (
-          <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
-        )}
-      </Box>
-    </Tooltip>
-  );
-}

package/src/Result/Result.stories.jsx

@@ -1,61 +0,0 @@
-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,119 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable no-param-reassign */
-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';
-import { useLocaleContext } from '../Locale/context';
-import { useTheme } from '../Theme';
-import type { Locale } from '../type';
-
-// 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
-const useLocale = (locale: Locale) => {
-  locale = ['zh', 'en'].includes(locale) ? locale : '';
-  const { locale: localeFromContext } = useLocaleContext() || { locale: 'en' };
-  const result = locale || localeFromContext;
-  return translations[result] ? result : 'en';
-};
-
-export type CommonResultProps = { locale: Locale } & Omit<ResultProps, 'icon' | 'title' | 'description'>;
-
-// 404
-export function PageNotFound({ locale, ...rest }: CommonResultProps) {
-  locale = useLocale(locale);
-  return (
-    <Result
-      icon={<StyledErrorIcon />}
-      title={translations[locale]['404'].title}
-      description={translations[locale]['404'].description}
-      {...rest}
-    />
-  );
-}
-PageNotFound.status = '404';
-
-// 403
-export function Forbidden({ locale, ...rest }: CommonResultProps) {
-  locale = useLocale(locale);
-  return (
-    <Result
-      icon={<StyledErrorIcon />}
-      title={translations[locale][403].title}
-      description={translations[locale][403].description}
-      {...rest}
-    />
-  );
-}
-Forbidden.status = '403';
-
-// 500
-export function InternalServerError({ locale, ...rest }: CommonResultProps) {
-  locale = useLocale(locale);
-  return (
-    <Result
-      icon={<StyledErrorIcon />}
-      title={translations[locale][500].title}
-      description={translations[locale][500].description}
-      {...rest}
-    />
-  );
-}
-InternalServerError.status = '500';
-
-// 通用错误
-export function Error({ locale, ...rest }: CommonResultProps) {
-  locale = useLocale(locale);
-  return (
-    <Result
-      icon={<StyledErrorIcon />}
-      title={translations[locale].error.title}
-      description={translations[locale].error.description}
-      {...rest}
-    />
-  );
-}
-Error.status = 'error';
-
-// under maintenance
-export function Maintenance({ locale, ...rest }: CommonResultProps) {
-  locale = useLocale(locale);
-  return (
-    <Result
-      icon={<StyledInfoIcon />}
-      title={translations[locale].maintenance.title}
-      description={translations[locale].maintenance.description}
-      {...rest}
-    />
-  );
-}
-Maintenance.status = 'maintenance';
-
-// coming soon
-export function ComingSoon({ locale, ...rest }: CommonResultProps) {
-  locale = useLocale(locale);
-  return (
-    <Result
-      icon={<StyledInfoIcon />}
-      title={translations[locale].comingSoon.title}
-      description={translations[locale].comingSoon.description}
-      {...rest}
-    />
-  );
-}
-ComingSoon.status = 'comingSoon';
-
-// info, 与其它 status 不同, title/description 需要使用方自己传入
-export function Info(props: Omit<ResultProps, 'icon'>) {
-  return <Result icon={<StyledInfoIcon />} {...props} />;
-}
-Info.status = 'info';
-
-function StyledErrorIcon(props: SvgIconProps) {
-  const theme = useTheme();
-  return <CancelRoundedIcon style={{ color: theme.palette.error.main, fontSize: 72 }} {...props} />;
-}
-
-function StyledInfoIcon(props: SvgIconProps) {
-  const theme = useTheme();
-  return <InfoIcon style={{ color: theme.palette.info.main, fontSize: 72 }} {...props} />;
-}

package/src/Result/index.tsx

@@ -1,30 +0,0 @@
-import Result, { type ResultProps } from './result';
-import * as common from './common';
-
-type ComponentNames = keyof typeof common;
-
-const componentsKeyByStatus = Object.keys(common).reduce<Record<string, React.ComponentType<ResultProps>>>(
-  (acc, cur) => ({ ...acc, [common[cur as ComponentNames].status || cur]: common[cur as ComponentNames] as any }),
-  {}
-);
-
-export interface ResultWrapperProps extends ResultProps {
-  status?: string | number;
-}
-
-function ResultWrapper({ status = '', ...rest }: ResultWrapperProps) {
-  if (status) {
-    if (componentsKeyByStatus[status]) {
-      const Component = componentsKeyByStatus[status];
-      return <Component {...rest} />;
-    }
-    throw new Error(
-      `Please provide a valid status for Result.status. Valid values are: ${Object.keys(componentsKeyByStatus).join(
-        ', '
-      )}`
-    );
-  }
-  return <Result {...rest} />;
-}
-
-export default ResultWrapper;

package/src/Result/result.tsx

@@ -1,65 +0,0 @@
-import { Box } from '@mui/material';
-
-import { styled } from '../Theme';
-
-export interface ResultProps {
-  icon?: React.ReactNode;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  extra?: React.ReactNode;
-}
-
-function Result({ icon = null, title = '', description = '', extra = null, ...rest }: ResultProps) {
-  return (
-    <Root {...rest}>
-      {icon}
-      {typeof title === 'string' ? (
-        <Box
-          sx={{
-            mt: 3,
-            fontSize: 22,
-            fontWeight: 400,
-            color: 'text.primary',
-            textAlign: 'center',
-          }}>
-          {title}
-        </Box>
-      ) : (
-        title
-      )}
-      {typeof description === 'string' ? (
-        <Box
-          sx={{
-            mt: 1,
-            fontSize: 14,
-            color: 'text.secondary',
-            textAlign: 'center',
-          }}>
-          {description}
-        </Box>
-      ) : (
-        description
-      )}
-      <Box
-        sx={{
-          mt: 3,
-        }}>
-        {extra}
-      </Box>
-    </Root>
-  );
-}
-
-const Root = styled('div')`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  padding: 16px;
-
-  background-color: ${({ theme }) => theme.palette?.background?.default || '#F7F8F8'};
-`;
-
-export default Result;

package/src/Result/translations.ts

@@ -1,57 +0,0 @@
-import type { Translations } from '../type';
-
-export default {
-  en: {
-    404: {
-      title: '404 - Page Not Found',
-      description: 'Sorry about that, the page you are looking for does not exist or has been moved.',
-    },
-    403: {
-      title: '403 – Forbidden',
-      description: 'Sorry, you are not authorized to access this page.',
-    },
-    500: {
-      title: '500 - Internal Server Error',
-      description: 'An internal server error has occurred. Please try again later.',
-    },
-    error: {
-      title: 'Application Error',
-      description: 'Something went wrong. Please try again later.',
-    },
-    maintenance: {
-      title: 'Offline for maintenance',
-      description: 'This app is undergoing maintenance right now. Please check back later.',
-    },
-    comingSoon: {
-      title: 'Coming Soon',
-      description: "Our website is under construction. We'll be here soon with our new website.",
-    },
-  },
-
-  zh: {
-    404: {
-      title: '404 - 页面未找到',
-      description: '很抱歉，您正在寻找的页面不存在或已被移动。',
-    },
-    403: {
-      title: '403 – 禁止访问',
-      description: '很抱歉，您没有权限访问此页面。',
-    },
-    500: {
-      title: '500 - 内部服务器错误',
-      description: '发生了一个内部服务器错误。请稍后再试。',
-    },
-    error: {
-      title: 'Application Error',
-      description: '出错了, 请稍后再试。',
-    },
-    maintenance: {
-      title: '维护中',
-      description: '应用程序正在进行维护。请稍后再查看。',
-    },
-    comingSoon: {
-      title: '即将上线',
-      description: '我们的网站正在建设中。我们很快就会在这里推出我们的新网站。',
-    },
-  },
-} as Translations;