@arcblock/ux 2.10.66 → 2.10.68

package/src/ErrorBoundary/{fallback.jsx → fallback.tsx}

@@ -1,9 +1,18 @@
-import PropTypes from 'prop-types';
 import { red } from '@mui/material/colors';
 import Button from '../Button';
 import { styled } from '../Theme';
 
-function InternalErrorFallback({ title, desc, retryFunc }) {
+export interface InternalErrorFallbackProps {
+  title?: string;
+  desc: string;
+  retryFunc?: (() => void) | null;
+}
+
+function InternalErrorFallback({
+  title = 'Something went wrong...',
+  desc,
+  retryFunc = null,
+}: InternalErrorFallbackProps) {
   return (
     <Root role="alert">
       <h3>{title}</h3>
@@ -17,33 +26,23 @@ function InternalErrorFallback({ title, desc, retryFunc }) {
   );
 }
 
-InternalErrorFallback.propTypes = {
-  title: PropTypes.string,
-  desc: PropTypes.string.isRequired,
-  retryFunc: PropTypes.func,
-};
-InternalErrorFallback.defaultProps = {
-  title: 'Something went wrong...',
-  retryFunc: null,
-};
+export interface ErrorFallbackProps {
+  error: Error;
+}
 
-export function ErrorFallback({ error }) {
+export function ErrorFallback({ error }: ErrorFallbackProps) {
   return <InternalErrorFallback desc={error.message} />;
 }
 
-ErrorFallback.propTypes = {
-  error: PropTypes.instanceOf(Error).isRequired,
-};
+export interface ErrorFallbackRetryProps {
+  error: Error;
+  resetErrorBoundary: () => void;
+}
 
-export function ErrorFallbackRetry({ error, resetErrorBoundary }) {
+export function ErrorFallbackRetry({ error, resetErrorBoundary }: ErrorFallbackRetryProps) {
   return <InternalErrorFallback desc={error.message} retryFunc={resetErrorBoundary} />;
 }
 
-ErrorFallbackRetry.propTypes = {
-  error: PropTypes.instanceOf(Error).isRequired,
-  resetErrorBoundary: PropTypes.func.isRequired,
-};
-
 const Root = styled('div')`
   padding: 16px;
   border: 2px solid ${(props) => props.theme.palette.error.main};

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-unused-prop-types */
-import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import MuiContainer from '@mui/material/Container';
 import Box from '@mui/material/Box';
@@ -8,7 +7,16 @@ import { mergeProps } from '../Util';
 import Logo from '../Logo';
 import { styled } from '../Theme';
 
-export default function Footer(props) {
+export interface FooterProps {
+  dark?: false | true;
+  className?: string;
+  copyStart?: number | string;
+  brand?: string;
+  style?: React.CSSProperties;
+  addon?: React.ReactNode;
+}
+
+export default function Footer(props: FooterProps) {
   const newProps = mergeProps(props, Footer, ['dark', 'style']);
   const { className, copyStart, style, brand, dark, addon } = newProps;
 
@@ -50,27 +58,22 @@ export default function Footer(props) {
   );
 }
 
-Footer.propTypes = {
-  dark: PropTypes.bool,
-  className: PropTypes.string,
-  copyStart: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  brand: PropTypes.string,
-  style: PropTypes.object,
-  addon: PropTypes.node,
-};
-
 Footer.defaultProps = {
   dark: false,
-  brand: 'ArcBlock',
-  copyStart: '2017',
   className: '',
+  copyStart: '2017',
+  brand: 'ArcBlock',
   style: {},
   addon: null,
 };
 
+type ContainerProps = {
+  dark: boolean;
+};
+
 const Container = styled('div', {
   shouldForwardProp: (prop) => prop !== 'dark',
-})`
+})<ContainerProps>`
   position: relative;
   margin-top: 64px;
   padding: 24px 0 32px;

package/src/Header/header.tsx

@@ -1,9 +1,9 @@
-import { Box, Container, type Breakpoint } from '@mui/material';
+import { Box, type BoxProps, Container, type Breakpoint } from '@mui/material';
 import { useRef, useState, useEffect } from 'react';
 import AutoHidden from './auto-hidden';
 import { styled } from '../Theme';
 
-export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface HeaderProps extends Omit<BoxProps, 'maxWidth'> {
   /** logo img/svg, 可以包裹一个 a 标签 */
   logo?: React.ReactNode;
   /** 相当于 Title, 可以包裹一个 a 标签 */
@@ -18,7 +18,6 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   prepend?: React.ReactNode;
   align?: 'left' | 'right';
   maxWidth?: Breakpoint | false;
-  // eslint-disable-next-line no-unused-vars
   homeLink?: string | ((brandContent: React.ReactNode) => React.ReactNode);
 }
 

package/src/Header/responsive-header.tsx

@@ -12,7 +12,6 @@ import { type HeaderProps } from './header';
 
 export interface ResponsiveHeaderProps extends Omit<HeaderProps, 'children'> {
   menu?: React.ReactNode;
-  // eslint-disable-next-line no-unused-vars
   children?: React.ReactNode | ((props: { isMobile: boolean; closeMenu: () => void }) => React.ReactNode);
 }
 

package/src/Icon/image.tsx

@@ -1,13 +1,13 @@
-import Img from '../Img';
+import Img, { type ImgProps } from '../Img';
 import { styled } from '../Theme';
 
-export interface ImageIconProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ImageIconProps extends Omit<ImgProps, 'size' | 'src'> {
   name: string;
   size?: number;
   color?: string;
   alt?: string;
   prefix?: string;
-  showBadge?: boolean;
+  showBadge?: false | true;
 }
 
 export default function ImageIcon({

package/src/Icon/index.tsx

@@ -1,4 +1,6 @@
 import { forwardRef } from 'react';
+import { type SxProps } from '@mui/material';
+
 import colors from '../Colors';
 import { styled } from '../Theme';
 import { withDeprecated } from '../Util/deprecate';
@@ -9,13 +11,14 @@ const variants = {
   solid: 'fas',
 };
 
-export interface IconProps extends React.HTMLAttributes<HTMLElement> {
+export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string;
   color?: string;
   size?: number;
   variant?: 'light' | 'regular' | 'solid';
-  rounded?: boolean;
-  forwardedRef?: React.ForwardedRef<HTMLElement>;
+  rounded?: false | true;
+  forwardedRef?: React.ForwardedRef<HTMLDivElement>;
+  sx?: SxProps;
 }
 
 // eslint-disable-next-line react/prop-types
@@ -67,6 +70,6 @@ const Span = styled('span')<{ size: number; color: string }>`
 `;
 
 export default withDeprecated(
-  forwardRef<HTMLElement, IconProps>((props, ref) => <Icon {...props} forwardedRef={ref} />),
+  forwardRef<HTMLDivElement, IconProps>((props, ref) => <Icon {...props} forwardedRef={ref} />),
   { name: 'Icon', alternative: 'SVG icons' }
 );

package/src/Img/index.jsx

@@ -27,7 +27,7 @@ import noop from 'lodash/noop';
  */
 
 /**
- * @typedef {ImgExProps & import('react').ComponentPropsWithoutRef<"div">} ImgProps
+ * @typedef {ImgExProps & import('@mui/material').BoxProps} ImgProps
  */
 
 const PREFIX = 'Img';

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

@@ -1,11 +1,37 @@
-import PropTypes from 'prop-types';
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
 import Typography from '@mui/material/Typography';
 
 import { styled } from '../Theme';
 
-function InfoRow({ name, nameFormatter, layout, children, valueComponent, nameWidth, ...rest }) {
+export interface InfoRowProps {
+  name: React.ReactNode;
+  nameFormatter: (name: React.ReactNode) => React.ReactNode;
+  layout?: 'horizontal' | 'vertical';
+  children: React.ReactNode;
+  valueComponent?: React.ElementType;
+  nameWidth?: number;
+}
+
+function InfoRow({
+  name,
+  // eslint-disable-next-line no-shadow
+  nameFormatter = (name) => {
+    if (typeof name === 'string') {
+      return name
+        .split(' ')
+        .map((x: any) => upperFirst(camelCase(x)))
+        .join(' ');
+    }
+
+    return name;
+  },
+  layout = 'horizontal',
+  children,
+  valueComponent = 'div',
+  nameWidth = 90,
+  ...rest
+}: InfoRowProps) {
   return (
     <Container layout={layout} width={nameWidth} {...rest}>
       <Typography color="textSecondary" className="info-row__name">
@@ -21,31 +47,12 @@ function InfoRow({ name, nameFormatter, layout, children, valueComponent, nameWi
   );
 }
 
-InfoRow.propTypes = {
-  name: PropTypes.any.isRequired,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  children: PropTypes.any,
-  nameFormatter: PropTypes.func,
-  valueComponent: PropTypes.string,
-  nameWidth: PropTypes.number,
-};
-
-InfoRow.defaultProps = {
-  children: null,
-  nameWidth: 90,
-  nameFormatter: (name) => {
-    const resetName = name
-      .split(' ')
-      .map((x) => upperFirst(camelCase(x)))
-      .join(' ');
-
-    return typeof name === 'string' ? resetName : name;
-  },
-  valueComponent: 'div',
-  layout: 'horizontal',
+type ContainerProps = {
+  layout: 'horizontal' | 'vertical';
+  width: number;
 };
 
-const Container = styled('div')`
+const Container = styled('div')<ContainerProps>`
   display: flex;
   flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
   justify-content: flex-start;

package/src/Layout/dashboard/external-link.tsx

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
+
+interface ExternalLinkProps extends React.ComponentProps<typeof RouterLink> {
+  routerLinkComponent: React.ElementType;
+  to: string | object;
+  external?: false | true;
+}
+
+// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
+function ExternalLink({
+  routerLinkComponent: RouterLinkComponent,
+  to,
+  external = false,
+  children,
+  ...rest
+}: ExternalLinkProps) {
+  if (external) {
+    return (
+      <a href={to as string} {...rest}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <RouterLinkComponent to={to} {...rest}>
+      {children}
+    </RouterLinkComponent>
+  );
+}
+
+export interface LinkProps extends Omit<ExternalLinkProps, 'routerLinkComponent'> {}
+
+export function Link(props: LinkProps) {
+  return <ExternalLink routerLinkComponent={RouterLink} {...props} />;
+}
+
+export interface NavLinkProps extends Omit<ExternalLinkProps, 'routerLinkComponent' | 'className'> {
+  className?: string | (() => string);
+}
+
+export function NavLink({ className = '', ...rest }: NavLinkProps) {
+  // NavLink#className 支持 function
+  const classes = typeof className === 'function' ? className() : className;
+  return <ExternalLink routerLinkComponent={RouterNavLink} className={classes} {...rest} />;
+}

package/src/Layout/dashboard/{full-page.jsx → full-page.tsx}

@@ -1,9 +1,24 @@
 import { useState, useContext, createContext, useMemo, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
 
-export const FullPageContext = createContext();
+type FullPageState = {
+  inFullPage: boolean;
+  showToggleButton: boolean;
+  headerVisibleInFullPage: boolean;
+  footerVisibleInFullPage: boolean;
+  sidebarVisibleInFullPage: boolean;
+};
+
+type FullPageContextValue = FullPageState & {
+  headerVisible: boolean;
+  footerVisible: boolean;
+  sidebarVisible: boolean;
+  toggleFullPage: () => void;
+  configure: (params: Partial<FullPageState>) => void;
+};
 
-export const useFullPage = (initialState) => {
+export const FullPageContext = createContext<FullPageContextValue>(null!);
+
+export const useFullPage = (initialState?: FullPageState) => {
   const ctx = useContext(FullPageContext);
   useLayoutEffect(() => {
     if (initialState) {
@@ -14,7 +29,7 @@ export const useFullPage = (initialState) => {
   return ctx;
 };
 
-export function FullPageProvider({ children, ...rest }) {
+export function FullPageProvider({ children, ...rest }: { children?: React.ReactNode }) {
   const [state, setState] = useState({
     inFullPage: false,
     showToggleButton: false,
@@ -25,7 +40,7 @@ export function FullPageProvider({ children, ...rest }) {
   const toggleFullPage = () => {
     setState((prev) => ({ ...prev, inFullPage: !prev.inFullPage }));
   };
-  const value = useMemo(() => {
+  const value = useMemo<FullPageContextValue>(() => {
     return {
       ...state,
       headerVisible: !state.inFullPage || state.headerVisibleInFullPage,
@@ -41,7 +56,3 @@ export function FullPageProvider({ children, ...rest }) {
     </FullPageContext.Provider>
   );
 }
-
-FullPageProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-};

package/src/Layout/dashboard/{index.jsx → index.tsx}

@@ -1,26 +1,27 @@
 import { useEffect, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { useLocation, matchPath } from 'react-router-dom';
+import { useLocation, matchPath, type Location } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import Container from '@mui/material/Container';
 import Hidden from '@mui/material/Hidden';
 import Box from '@mui/material/Box';
+import { type SxProps } from '@mui/material';
 import clsx from 'clsx';
 import OpenInFullIcon from '@mui/icons-material/OpenInFull';
 import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
 import DashboardLegacy from '../dashboard-legacy';
 import { ResponsiveHeader } from '../../Header';
 import NavMenu from '../../NavMenu';
-import Footer from '../../Footer';
-import Sidebar from './sidebar';
+import Footer, { type FooterProps } from '../../Footer';
+import Sidebar, { type LinkItem } from './sidebar';
 import { styled, useTheme } from '../../Theme';
 import { Link } from './external-link';
 import { FullPageProvider, useFullPage } from './full-page';
+import { NavMenuProps } from '../../NavMenu/nav-menu';
+import { type DashboardProps as DashboardLegacyProps } from '../dashboard-legacy';
 
 // 监听 location 变化并关闭 header 中的 menu (确保 drawer - disablePortal:false, keepMounted:true)
 // 直接监听 menu 中 link 点击来触发 closeMenu 会有问题 (Suspense & lazy)
-// eslint-disable-next-line react/prop-types
-function NavMenuWrapper({ closeMenu, ...rest }) {
+function NavMenuWrapper({ closeMenu, ...rest }: { closeMenu: () => void } & NavMenuProps) {
   const location = useLocation();
   useEffect(() => {
     closeMenu();
@@ -29,7 +30,7 @@ function NavMenuWrapper({ closeMenu, ...rest }) {
   return <NavMenu {...rest} />;
 }
 
-function formatLinks(links, location) {
+function formatLinks(links: LinkItem[], location: Location): LinkItem[] {
   return links.map((link) => {
     if (link.children?.length) {
       return {
@@ -51,7 +52,30 @@ function formatLinks(links, location) {
   });
 }
 
-function Dashboard({ children, title, headerProps, links = [], fullWidth, dense, footerProps, ...rest }) {
+export interface DashboardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  headerProps?: object;
+  /** 支持分组, links item 如果是数组, 则视为一个 group */
+  links?: LinkItem[];
+  sidebarWidth?: number;
+  fullWidth?: false | true;
+  /** sidenav 稠密一些的布局, 纵向空间占用较少, 默认为 auto, 当 links 个数 > 8 时自动启用 */
+  dense?: 'auto' | boolean;
+  footerProps?: FooterProps;
+  sx?: SxProps;
+}
+
+function Dashboard({
+  title = 'Home',
+  headerProps = {},
+  links = [],
+  sidebarWidth = 120,
+  fullWidth = false,
+  dense = 'auto',
+  footerProps = {},
+  children,
+  ...rest
+}: DashboardProps) {
   const theme = useTheme();
   const { inFullPage, showToggleButton, headerVisible, footerVisible, sidebarVisible, toggleFullPage } = useFullPage();
   const location = useLocation();
@@ -60,7 +84,7 @@ function Dashboard({ children, title, headerProps, links = [], fullWidth, dense,
   // 一级菜单数量 > 8 或都分组模式, 都启用 dense 布局
   const _dense = dense === 'auto' ? navItems.length >= 8 || isGroupedMode : dense;
   const classes = clsx('dashboard', { 'dashboard-dense': _dense }, rest.className);
-  const defaultHomeLink = (content) => <Link to={window.blocklet?.prefix || '/'}>{content}</Link>;
+  const defaultHomeLink = (content: React.ReactNode) => <Link to={window.blocklet?.prefix || '/'}>{content}</Link>;
   const _headerProps = {
     homeLink: defaultHomeLink,
     ...headerProps,
@@ -69,12 +93,12 @@ function Dashboard({ children, title, headerProps, links = [], fullWidth, dense,
   useEffect(() => {
     const { searchParams } = new URL(window.location.href);
     if (searchParams.get('inviter')) {
-      window.localStorage.setItem('inviter', searchParams.get('inviter'));
+      window.localStorage.setItem('inviter', searchParams.get('inviter')!);
     }
   }, []);
 
   return (
-    <Wrapper {...rest} className={classes}>
+    <Wrapper {...rest} className={classes} sidebarWidth={sidebarWidth}>
       <Helmet title={title} key={title} />
 
       {headerVisible && (
@@ -147,29 +171,11 @@ function Dashboard({ children, title, headerProps, links = [], fullWidth, dense,
   );
 }
 
-Dashboard.propTypes = {
-  children: PropTypes.any.isRequired,
-  title: PropTypes.string,
-  // 支持分组, links item 如果是数组, 则视为一个 group
-  links: PropTypes.array.isRequired,
-  headerProps: PropTypes.object,
-  fullWidth: PropTypes.bool,
-  sidebarWidth: PropTypes.number,
-  // sidenav 稠密一些的布局, 纵向空间占用较少, 默认为 auto, 当 links 个数 > 8 时自动启用
-  dense: PropTypes.oneOf([true, false, 'auto']),
-};
-
-Dashboard.defaultProps = {
-  title: 'Home',
-  headerProps: {},
-  fullWidth: false,
-  sidebarWidth: 120,
-  dense: 'auto',
-};
+type WrapperProps = React.HTMLAttributes<HTMLDivElement> & { sidebarWidth: number };
 
 const Wrapper = styled('div', {
   shouldForwardProp: (prop) => prop !== 'sidebarWidth',
-})`
+})<WrapperProps>`
   &.dashboard {
     display: flex;
     flex-direction: column;
@@ -231,9 +237,12 @@ const StyledUxHeader = styled(ResponsiveHeader)`
 `;
 
 // 兼容旧版 dashboard
-export default function DashboardWrapper({ legacy, ...rest }) {
+export default function DashboardWrapper<T extends boolean = true>({
+  legacy = true as T,
+  ...rest
+}: T extends true ? { legacy?: T } & DashboardLegacyProps : { legacy?: T } & DashboardProps) {
   if (legacy) {
-    return <DashboardLegacy {...rest} />;
+    return <DashboardLegacy {...(rest as unknown as DashboardLegacyProps)} />;
   }
   return (
     <FullPageProvider>
@@ -241,14 +250,3 @@ export default function DashboardWrapper({ legacy, ...rest }) {
     </FullPageProvider>
   );
 }
-
-DashboardWrapper.propTypes = {
-  ...Dashboard.propTypes,
-  legacy: PropTypes.bool,
-  footerProps: PropTypes.shape(Footer.propTypes),
-};
-
-DashboardWrapper.defaultProps = {
-  ...Dashboard.defaultProps,
-  legacy: true,
-};

package/src/Layout/dashboard/{sidebar.jsx → sidebar.tsx}

@@ -1,12 +1,22 @@
-/* eslint-disable react/no-array-index-key */
-import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
 
-function renderItem(item, index) {
+export type LinkItem = {
+  url: string;
+  title: React.ReactNode;
+  icon?: React.ReactNode;
+  iconZoom?: number;
+  color?: string;
+  showBadge?: false | true;
+  external?: false | true;
+  active?: boolean;
+  children?: LinkItem[];
+};
+
+function renderItem(item: LinkItem, index: number) {
   if (item.children?.length) {
     // eslint-disable-next-line no-use-before-define
     return renderGroup(item, index);
@@ -18,9 +28,7 @@ function renderItem(item, index) {
       <NavLink
         external={external}
         to={url}
-        className={({ isActive }) =>
-          clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : isActive })
-        }>
+        className={() => clsx('layout-sidebar-link', { 'layout-sidebar-link--active': external ? active : false })}>
         {icon && <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>}
         <Typography component="span" className="layout-sidebar-link-text">
           {title}
@@ -30,16 +38,22 @@ function renderItem(item, index) {
   );
 }
 
-function renderGroup(item, index) {
+function renderGroup(item: LinkItem, index: number) {
   return (
     <li key={`group-${item.title}-${index}`} className="layout-sidebar-group">
       <span className="layout-sidebar-group-title">{item.title}</span>
-      <ul>{item.children.map(renderItem)}</ul>
+      <ul>{item.children!.map(renderItem)}</ul>
     </li>
   );
 }
 
-function Sidebar({ links, addons, dense, ...rest }) {
+export interface SidebarProps {
+  links: LinkItem[];
+  addons?: React.ReactNode;
+  dense?: false | true;
+}
+
+function Sidebar({ links, addons, dense = false, ...rest }: SidebarProps) {
   return (
     <Root {...rest} className={clsx({ 'layout-sidebar-dense': dense })}>
       <ul>{links.map(renderItem)}</ul>
@@ -49,17 +63,6 @@ function Sidebar({ links, addons, dense, ...rest }) {
   );
 }
 
-Sidebar.propTypes = {
-  links: PropTypes.array.isRequired,
-  addons: PropTypes.any,
-  dense: PropTypes.bool,
-};
-
-Sidebar.defaultProps = {
-  addons: null,
-  dense: false,
-};
-
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 
 const Root = styled('div')`