@arcblock/ux 2.10.67 → 2.10.69

package/src/Earth/{util.js → util.ts}

@@ -1,7 +1,13 @@
 /* eslint-disable */
 // Code from: https://observablehq.com/@d3/world-tour
+export type Vec3 = [number, number, number];
+export type Vec2 = [number, number];
+export type Quaternion = [number, number, number, number];
+export type Rotation = Vec3;
+export type Angles = Vec3;
+
 export default class Util {
-  static fromAngles([l, p, g]) {
+  static fromAngles([l, p, g]: Angles) {
     l *= Math.PI / 360;
     p *= Math.PI / 360;
     g *= Math.PI / 360;
@@ -16,10 +22,10 @@ export default class Util {
       sl * cp * cg - cl * sp * sg,
       cl * sp * cg + sl * cp * sg,
       cl * cp * sg - sl * sp * cg,
-    ];
+    ] as Quaternion;
   }
 
-  static toAngles([a, b, c, d]) {
+  static toAngles([a, b, c, d]: Quaternion) {
     return [
       (Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180) / Math.PI,
       (Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180) / Math.PI,
@@ -27,27 +33,24 @@ export default class Util {
     ];
   }
 
-  static interpolateAngles(a, b) {
+  static interpolateAngles(a: [number, number, number], b: [number, number, number]) {
     const i = Util.interpolate(Util.fromAngles(a), Util.fromAngles(b));
-    return t => Util.toAngles(i(t));
+    return (t: number) => Util.toAngles(i(t));
   }
 
-  static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) {
+  static interpolateLinear([a1, b1, c1, d1]: Quaternion, [a2, b2, c2, d2]: Quaternion) {
     (a2 -= a1), (b2 -= b1), (c2 -= c1), (d2 -= d1);
     const x = new Array(4);
-    return t => {
-      const l = Math.hypot(
-        (x[0] = a1 + a2 * t),
-        (x[1] = b1 + b2 * t),
-        (x[2] = c1 + c2 * t),
-        (x[3] = d1 + d2 * t)
-      );
+
+    return (t: number) => {
+      const l = Math.hypot((x[0] = a1 + a2 * t), (x[1] = b1 + b2 * t), (x[2] = c1 + c2 * t), (x[3] = d1 + d2 * t));
       (x[0] /= l), (x[1] /= l), (x[2] /= l), (x[3] /= l);
-      return x;
+
+      return x as Quaternion;
     };
   }
 
-  static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) {
+  static interpolate([a1, b1, c1, d1]: Quaternion, [a2, b2, c2, d2]: Quaternion) {
     let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2;
     if (dot < 0) (a2 = -a2), (b2 = -b2), (c2 = -c2), (d2 = -d2), (dot = -dot);
     if (dot > 0.9995) return Util.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]);
@@ -55,7 +58,7 @@ export default class Util {
     const x = new Array(4);
     const l = Math.hypot((a2 -= a1 * dot), (b2 -= b1 * dot), (c2 -= c1 * dot), (d2 -= d1 * dot));
     (a2 /= l), (b2 /= l), (c2 /= l), (d2 /= l);
-    return t => {
+    return (t: number) => {
       const theta = theta0 * t;
       const s = Math.sin(theta);
       const c = Math.cos(theta);
@@ -63,7 +66,7 @@ export default class Util {
       x[1] = b1 * c + b2 * s;
       x[2] = c1 * c + c2 * s;
       x[3] = d1 * c + d2 * s;
-      return x;
+      return x as Quaternion;
     };
   }
 }

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,
-};