@arcblock/ux 2.10.67 → 2.10.69

package/src/PageScroller/{index.jsx → index.tsx}

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 import { Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import isNil from 'lodash/isNil';
 import isNull from 'lodash/isNull';
@@ -11,7 +10,7 @@ import { withDeprecated } from '../Util/deprecate';
 const Events = {
   TOUCHMOVE: 'touchmove',
   KEYDOWN: 'keydown',
-};
+} as const;
 
 const DEFAULT_ANIMATION_TIMER = 500;
 const DEFAULT_ANIMATION = 'ease-in-out';
@@ -25,33 +24,48 @@ const KEY_UP = 38;
 const KEY_DOWN = 40;
 const DISABLED_CLASS_NAME = 'rps-scroll--disabled';
 
-let previousTouchMove = null;
+let previousTouchMove: number | null = null;
 let isScrolling = false;
 let isMounted = false;
 let isBodyScrollEnabled = true;
 let isTransitionAfterComponentsToRenderChanged = false;
-const containers = [];
+const containers: boolean[] = [];
+
+export interface PageScrollerProps {
+  animationTimer?: number;
+  blockScrollDown?: false | true;
+  blockScrollUp?: false | true;
+  children?: React.ReactElement | React.ReactElement[];
+  height?: number | string;
+  width?: number | string;
+  customPageNumber?: number;
+  onScrollUnavailable?: () => void;
+  onChange?: (index: number) => void;
+  renderAllPagesOnFirstRender?: false | true;
+  transitionTimingFunction?: string;
+}
 
 function PageScroller({
-  animationTimer,
-  blockScrollDown,
-  blockScrollUp,
-  children,
-  height,
-  width,
+  animationTimer = DEFAULT_ANIMATION_TIMER,
+  blockScrollDown = false,
+  blockScrollUp = false,
+  children: _children,
+  height = DEFAULT_CONTAINER_HEIGHT,
+  width = DEFAULT_CONTAINER_WIDTH,
   customPageNumber,
   onScrollUnavailable,
   onChange,
-  renderAllPagesOnFirstRender,
-  transitionTimingFunction,
-}) {
+  renderAllPagesOnFirstRender = false,
+  transitionTimingFunction = DEFAULT_ANIMATION,
+}: PageScrollerProps) {
   const [componentIndex, setComponentIndex] = useState(DEFAULT_COMPONENT_INDEX);
   const [componentsToRenderLength, setComponentsToRenderLength] = useState(DEFAULT_COMPONENTS_TO_RENDER_LENGTH);
   const prevComponentIndex = usePrevious(componentIndex);
-  const pageContainer = useRef(null);
+  const pageContainer = useRef<HTMLDivElement>(null);
+  const children = Children.toArray(_children) as React.ReactElement[];
 
   const addNextComponent = useCallback(
-    (componentsToRenderOnMountLength) => {
+    (componentsToRenderOnMountLength?: number) => {
       let tempComponentsToRenderLength = 0;
 
       if (!isNil(componentsToRenderOnMountLength)) {
@@ -123,7 +137,7 @@ function PageScroller({
       if (!isNil(containers[componentIndex + 1])) {
         disableScroll();
         isScrolling = true;
-        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex + 1) * -100}%, 0)`; // prettier-ignore
+        pageContainer.current!.style.transform = `translate3d(0, ${(componentIndex + 1) * -100}%, 0)`; // prettier-ignore
 
         setTimeout(() => {
           if (isMounted) {
@@ -144,7 +158,7 @@ function PageScroller({
       if (!isNil(containers[componentIndex - 1])) {
         disableScroll();
         isScrolling = true;
-        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex - 1) * -100}%, 0)`; // prettier-ignore
+        pageContainer.current!.style.transform = `translate3d(0, ${(componentIndex - 1) * -100}%, 0)`; // prettier-ignore
 
         setTimeout(() => {
           if (isMounted) {
@@ -161,7 +175,7 @@ function PageScroller({
   }, [animationTimer, blockScrollUp, componentIndex, disableScroll, enableDocumentScroll, onScrollUnavailable]);
 
   const touchMove = useCallback(
-    (event) => {
+    (event: TouchEvent) => {
       if (!isNull(previousTouchMove)) {
         if (event.touches[0].clientY > previousTouchMove) {
           scrollWindowUp();
@@ -176,7 +190,7 @@ function PageScroller({
   );
 
   const wheelScroll = useCallback(
-    (event) => {
+    (event: React.WheelEvent<HTMLDivElement>) => {
       if (event.deltaY < 0) {
         scrollWindowUp();
       } else {
@@ -187,7 +201,7 @@ function PageScroller({
   );
 
   const keyPress = useCallback(
-    (event) => {
+    (event: KeyboardEvent) => {
       if (isEqual(event.keyCode, KEY_UP)) {
         scrollWindowUp();
       }
@@ -199,8 +213,8 @@ function PageScroller({
   );
 
   useEffect(() => {
-    pageContainer.current.addEventListener(Events.TOUCHMOVE, touchMove);
-    pageContainer.current.addEventListener(Events.KEYDOWN, keyPress);
+    pageContainer.current?.addEventListener(Events.TOUCHMOVE, touchMove);
+    pageContainer.current?.addEventListener(Events.KEYDOWN, keyPress);
     return () => {
       if (pageContainer.current?.removeEventListener) {
         pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
@@ -223,7 +237,7 @@ function PageScroller({
   useEffect(() => {
     isScrolling = false;
     previousTouchMove = null;
-    if (componentIndex > prevComponentIndex) {
+    if (prevComponentIndex !== undefined && componentIndex > prevComponentIndex) {
       addNextComponent();
     }
   }, [addNextComponent, componentIndex, prevComponentIndex]);
@@ -241,7 +255,7 @@ function PageScroller({
       if (!isEqual(componentIndex, customPageNumber)) {
         if (!isNil(containers[customPageNumber]) && !isScrolling) {
           isScrolling = true;
-          pageContainer.current.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
+          pageContainer.current!.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
 
           if (isNil(containers[customPageNumber]) && !isNil(children[customPageNumber])) {
             newComponentsToRenderLength++;
@@ -273,10 +287,10 @@ function PageScroller({
     if (isTransitionAfterComponentsToRenderChanged) {
       isTransitionAfterComponentsToRenderChanged = false;
 
-      pageContainer.current.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
+      pageContainer.current!.style.transform = `translate3d(0, ${customPageNumber! * -100}%, 0)`;
 
       setTimeout(() => {
-        setComponentIndex(customPageNumber);
+        setComponentIndex(customPageNumber!);
       }, animationTimer + ANIMATION_TIMER_BUFFER);
     }
   }, [animationTimer, componentsToRenderLength, customPageNumber]);
@@ -299,31 +313,4 @@ function PageScroller({
   );
 }
 
-PageScroller.propTypes = {
-  animationTimer: PropTypes.number,
-  blockScrollDown: PropTypes.bool,
-  blockScrollUp: PropTypes.bool,
-  children: PropTypes.any.isRequired,
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  customPageNumber: PropTypes.number,
-  onScrollUnavailable: PropTypes.func,
-  onChange: PropTypes.func,
-  renderAllPagesOnFirstRender: PropTypes.bool,
-  transitionTimingFunction: PropTypes.string,
-};
-
-PageScroller.defaultProps = {
-  animationTimer: DEFAULT_ANIMATION_TIMER,
-  transitionTimingFunction: DEFAULT_ANIMATION,
-  height: DEFAULT_CONTAINER_HEIGHT,
-  width: DEFAULT_CONTAINER_WIDTH,
-  onChange: undefined,
-  onScrollUnavailable: undefined,
-  blockScrollUp: false,
-  blockScrollDown: false,
-  renderAllPagesOnFirstRender: false,
-  customPageNumber: undefined,
-};
-
 export default withDeprecated(PageScroller, { name: 'PageScroller' });

package/src/PageScroller/{usePrevValue.js → usePrevValue.ts}

@@ -1,8 +1,7 @@
-// eslint-disable-next-line no-unused-vars
 import { useEffect, useRef } from 'react';
 
-export default function usePrevious(value) {
-  const ref = useRef({});
+export default function usePrevious<T>(value: T) {
+  const ref = useRef<T>();
 
   useEffect(() => {
     ref.current = value;

package/src/Passport/{passport.jsx → passport.tsx}

@@ -1,12 +1,31 @@
-import PropTypes from 'prop-types';
 import upperFirst from 'lodash/upperFirst';
-import { Box } from '@mui/material';
+import { Box, type BoxProps } from '@mui/material';
 import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
 
 import NFTDisplay from '../NFTDisplay';
 import { useLocaleContext } from '../Locale/context';
+import { Passport as PassportType, User } from '../type';
 
-export default function Passport({ passport, user, color, width, icon, children, createPassportSvg, ...rest }) {
+export interface PassportProps extends BoxProps {
+  passport: PassportType;
+  user: User;
+  color: string;
+  width?: number;
+  icon?: React.ReactNode;
+  createPassportSvg: (props: any) => string;
+}
+
+export default function Passport({
+  passport,
+  user,
+  color,
+  width = 150,
+  icon = null,
+  createPassportSvg,
+  // inherit props
+  children,
+  ...rest
+}: PassportProps) {
   const { t } = useLocaleContext();
   return (
     <Box
@@ -97,19 +116,3 @@ export default function Passport({ passport, user, color, width, icon, children,
     </Box>
   );
 }
-
-Passport.propTypes = {
-  passport: PropTypes.any.isRequired,
-  user: PropTypes.any.isRequired,
-  color: PropTypes.string.isRequired,
-  createPassportSvg: PropTypes.func.isRequired,
-  icon: PropTypes.any,
-  children: PropTypes.any,
-  width: PropTypes.number,
-};
-
-Passport.defaultProps = {
-  icon: null,
-  children: null,
-  width: 150,
-};

package/src/PoweredByArcBlock/{index.jsx → index.tsx}

@@ -1,7 +1,10 @@
-import PropTypes from 'prop-types';
-import { Link, Typography } from '@mui/material';
+import { Link, Typography, type TypographyProps, type LinkProps } from '@mui/material';
 
-export default function PoweredByArcBlock({ linkProps, ...props }) {
+export interface PoweredByArcBlockProps extends TypographyProps {
+  linkProps?: LinkProps;
+}
+
+export default function PoweredByArcBlock({ linkProps, ...props }: PoweredByArcBlockProps) {
   return (
     <Typography {...props}>
       Powered by{' '}
@@ -16,11 +19,3 @@ export default function PoweredByArcBlock({ linkProps, ...props }) {
     </Typography>
   );
 }
-
-PoweredByArcBlock.propTypes = {
-  linkProps: PropTypes.object,
-};
-
-PoweredByArcBlock.defaultProps = {
-  linkProps: {},
-};

package/src/PricingTable/{PricingPlan.jsx → PricingPlan.tsx}

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import Card from '@mui/material/Card';
 import Button from '@mui/material/Button';
 import CardContent from '@mui/material/CardContent';
@@ -6,7 +5,18 @@ import Typography from '@mui/material/Typography';
 
 import { styled } from '../Theme';
 
-function PricingPlan({ plan }) {
+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">
@@ -41,11 +51,11 @@ function PricingPlan({ plan }) {
 
 export default PricingPlan;
 
-PricingPlan.propTypes = {
-  plan: PropTypes.object.isRequired,
+type PlanCardProps = {
+  $shadow?: boolean;
 };
 
-const PlanCard = styled(Card)`
+const PlanCard = styled(Card)<PlanCardProps>`
   height: 500px;
   display: flex;
   flex-direction: column;

package/src/PricingTable/{index.jsx → index.tsx}

@@ -1,11 +1,14 @@
-import PropTypes from 'prop-types';
 import Grid from '@mui/material/Grid';
 
-import PricingPlan from './PricingPlan';
+import PricingPlan, { type PricingPlanProps } from './PricingPlan';
 import { styled } from '../Theme';
 import { withDeprecated } from '../Util/deprecate';
 
-function PricingTable({ plans }) {
+export interface PricingTableProps {
+  plans?: Array<PricingPlanProps['plan']>;
+}
+
+function PricingTable({ plans = [] }: PricingTableProps) {
   if (plans && plans.length > 0) {
     return (
       <Div variant="even">
@@ -25,11 +28,11 @@ function PricingTable({ plans }) {
 
 export default withDeprecated(PricingTable, { name: 'PricingTable' });
 
-PricingTable.propTypes = {
-  plans: PropTypes.array.isRequired,
+type DivProps = {
+  variant: 'even' | 'odd';
 };
 
-const Div = styled('div')`
+const Div = styled('div')<DivProps>`
   padding: 100px 0;
   text-align: center;
   background-color: ${(props) => (props.variant === 'even' ? '#fbfbfb' : '#ffffff')};

package/src/QRCode/{index.jsx → index.tsx}

@@ -1,9 +1,10 @@
 import { useRef, useEffect, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
 import QRCodeStyling from '@solana/qr-code-styling';
 import { Box } from '@mui/material';
 
-const defaults = {
+type QRCodeStylingOptions = NonNullable<ConstructorParameters<typeof QRCodeStyling>[0]>;
+
+const defaults: QRCodeStylingOptions = {
   margin: 0,
   dotsOptions: {
     type: 'dots',
@@ -16,9 +17,18 @@ const defaults = {
   },
 };
 
+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, config, ...rest }) {
+function QRCode({ data, size, image, config = {}, ...rest }: QRCodeProps) {
   const ref = useRef(null);
   const options = useMemo(() => {
     return {
@@ -48,24 +58,9 @@ function QRCode({ data, size, image, config, ...rest }) {
   useEffect(() => {
     if (!qrCode) return;
     qrCode.update(options);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, size, image, config]);
+  }, [options, qrCode]);
 
   return <Box ref={ref} {...rest} />;
 }
 
-QRCode.propTypes = {
-  // 一般情况下仅使用 data/size/image 即可
-  data: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  image: PropTypes.string,
-  // 覆盖 qr-code-styling 配置
-  config: PropTypes.object,
-};
-
-QRCode.defaultProps = {
-  image: null,
-  config: {},
-};
-
 export default QRCode;

package/src/RelativeTime/{index.jsx → index.tsx}

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -8,6 +7,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import { formatToDatetime, setDateTool } from '../Util';
+import type { Locale } from '../type';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
@@ -34,7 +34,28 @@ dayjs.updateLocale('zh-cn', {
 });
 setDateTool(dayjs);
 
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, ...rest }) {
+export interface RelativeTimeProps {
+  value: string | number;
+  locale?: Locale;
+  withoutSuffix?: false | true;
+  from?: string | number;
+  to?: string | number;
+  type?: 'relative' | 'absolute';
+  tz?: string;
+  relativeRange?: number;
+}
+
+export default function RelativeTime({
+  value,
+  locale = 'en',
+  withoutSuffix = false,
+  from = '',
+  to = '',
+  type = 'relative',
+  tz,
+  relativeRange,
+  ...rest
+}: RelativeTimeProps) {
   if (!value) {
     return '-';
   }
@@ -46,7 +67,7 @@ export default function RelativeTime({ value, locale, withoutSuffix, from, to, t
     datetime.tz(tz);
   }
 
-  const absoluteString = formatToDatetime(value, { locale: localeOption, tz });
+  const absoluteString = formatToDatetime(value.toString(), { locale: localeOption, tz });
 
   let relativeString;
 
@@ -79,24 +100,3 @@ export default function RelativeTime({ value, locale, withoutSuffix, from, to, t
     </Tooltip>
   );
 }
-
-RelativeTime.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  locale: PropTypes.string,
-  withoutSuffix: PropTypes.bool,
-  from: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  to: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  type: PropTypes.oneOf(['relative', 'absolute']),
-  tz: PropTypes.string,
-  relativeRange: PropTypes.number,
-};
-
-RelativeTime.defaultProps = {
-  locale: 'en',
-  withoutSuffix: false,
-  from: '',
-  to: '',
-  type: 'relative',
-  tz: undefined,
-  relativeRange: undefined,
-};

package/src/Result/{common.jsx → common.tsx}

@@ -2,27 +2,31 @@
 /* eslint-disable no-param-reassign */
 import InfoIcon from '@mui/icons-material/Info';
 import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
-import Result from './result';
+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) => {
+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 }) {
+export function PageNotFound({ locale, ...rest }: CommonResultProps) {
   locale = useLocale(locale);
   return (
     <Result
       icon={<StyledErrorIcon />}
-      title={translations[locale][404].title}
-      description={translations[locale][404].description}
+      title={translations[locale]['404'].title}
+      description={translations[locale]['404'].description}
       {...rest}
     />
   );
@@ -30,7 +34,7 @@ export function PageNotFound({ locale, ...rest }) {
 PageNotFound.status = '404';
 
 // 403
-export function Forbidden({ locale, ...rest }) {
+export function Forbidden({ locale, ...rest }: CommonResultProps) {
   locale = useLocale(locale);
   return (
     <Result
@@ -44,7 +48,7 @@ export function Forbidden({ locale, ...rest }) {
 Forbidden.status = '403';
 
 // 500
-export function InternalServerError({ locale, ...rest }) {
+export function InternalServerError({ locale, ...rest }: CommonResultProps) {
   locale = useLocale(locale);
   return (
     <Result
@@ -58,7 +62,7 @@ export function InternalServerError({ locale, ...rest }) {
 InternalServerError.status = '500';
 
 // 通用错误
-export function Error({ locale, ...rest }) {
+export function Error({ locale, ...rest }: CommonResultProps) {
   locale = useLocale(locale);
   return (
     <Result
@@ -72,7 +76,7 @@ export function Error({ locale, ...rest }) {
 Error.status = 'error';
 
 // under maintenance
-export function Maintenance({ locale, ...rest }) {
+export function Maintenance({ locale, ...rest }: CommonResultProps) {
   locale = useLocale(locale);
   return (
     <Result
@@ -86,7 +90,7 @@ export function Maintenance({ locale, ...rest }) {
 Maintenance.status = 'maintenance';
 
 // coming soon
-export function ComingSoon({ locale, ...rest }) {
+export function ComingSoon({ locale, ...rest }: CommonResultProps) {
   locale = useLocale(locale);
   return (
     <Result
@@ -100,17 +104,17 @@ export function ComingSoon({ locale, ...rest }) {
 ComingSoon.status = 'comingSoon';
 
 // info, 与其它 status 不同, title/description 需要使用方自己传入
-export function Info(props) {
+export function Info(props: Omit<ResultProps, 'icon'>) {
   return <Result icon={<StyledInfoIcon />} {...props} />;
 }
 Info.status = 'info';
 
-function StyledErrorIcon(props) {
+function StyledErrorIcon(props: SvgIconProps) {
   const theme = useTheme();
   return <CancelRoundedIcon style={{ color: theme.palette.error.main, fontSize: 72 }} {...props} />;
 }
 
-function StyledInfoIcon(props) {
+function StyledInfoIcon(props: SvgIconProps) {
   const theme = useTheme();
   return <InfoIcon style={{ color: theme.palette.info.main, fontSize: 72 }} {...props} />;
 }

package/src/Result/index.tsx

@@ -0,0 +1,30 @@
+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.jsx → result.tsx}

@@ -1,9 +1,15 @@
-import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
 import { styled } from '../Theme';
 
-function Result({ icon, title, description, extra, ...rest }) {
+export interface ResultProps {
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+}
+
+function Result({ icon, title = '', description = '', extra, ...rest }: ResultProps) {
   return (
     <Root {...rest}>
       {icon}
@@ -28,21 +34,6 @@ function Result({ icon, title, description, extra, ...rest }) {
   );
 }
 
-Result.propTypes = {
-  icon: PropTypes.element,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  actions: PropTypes.any,
-  extra: PropTypes.element,
-};
-Result.defaultProps = {
-  icon: undefined,
-  title: '',
-  description: '',
-  actions: null,
-  extra: undefined,
-};
-
 const Root = styled('div')`
   box-sizing: border-box;
   display: flex;

package/src/Result/{translations.js → translations.ts}

@@ -1,3 +1,5 @@
+import type { Translations } from '../type';
+
 export default {
   en: {
     404: {
@@ -52,4 +54,4 @@ export default {
       description: '我们的网站正在建设中。我们很快就会在这里推出我们的新网站。',
     },
   },
-};
+} as Translations;