@arcblock/ux 2.13.70 → 3.0.0

package/src/Header/header.tsx

@@ -1,5 +1,5 @@
 import { Box, type BoxProps, Container, type Breakpoint } from '@mui/material';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, type JSX } from 'react';
 import AutoHidden from './auto-hidden';
 import { styled } from '../Theme';
 import HeaderAddons from './header-addons';
@@ -88,9 +88,23 @@ function Header({
           {renderBrand()}
         </div>
         <div className="header-brand-addon">{brandAddon}</div>
-        {align === 'right' && <Box display="inline-block" flexGrow={1} />}
+        {align === 'right' && (
+          <Box
+            sx={{
+              display: 'inline-block',
+              flexGrow: 1,
+            }}
+          />
+        )}
         {children}
-        {align === 'left' && <Box display="inline-block" flexGrow={1} />}
+        {align === 'left' && (
+          <Box
+            sx={{
+              display: 'inline-block',
+              flexGrow: 1,
+            }}
+          />
+        )}
         <HeaderAddons className="header-addons">{addons}</HeaderAddons>
       </Container>
     </Root>
@@ -152,7 +166,10 @@ const Root = styled(Box)`
     }
     .header-brand-desc {
       margin-top: 4px;
-      color: ${({ theme }) => theme.palette.text.hint};
+      color: ${({ theme }) => {
+        // @ts-expect-error
+        return theme.palette.text.hint;
+      }};
     }
   }
   .header-brand-addon {

package/src/Header/responsive-header.tsx

@@ -1,11 +1,7 @@
 import { useState } from 'react';
 import { useCreation, useReactive } from 'ahooks';
-import MenuIcon from '@mui/icons-material/Menu';
-import CloseIcon from '@mui/icons-material/Close';
-import Button from '@mui/material/IconButton';
-import Container from '@mui/material/Container';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Drawer from '@mui/material/Drawer';
+import { Menu as MenuIcon, Close as CloseIcon } from '@mui/icons-material';
+import { Button, Container, useMediaQuery, Drawer } from '@mui/material';
 import Header from './header';
 import { styled, useTheme } from '../Theme';
 import { type HeaderProps } from './header';
@@ -97,13 +93,15 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }: ResponsiveHeader
             top: 64,
             zIndex: theme.zIndex.appBar - 1,
           }}
-          PaperProps={{
-            style: {
-              top: 64,
-              bottom: 0,
-              boxShadow: 'none',
-              backgroundImage: 'none',
-              backgroundColor: theme.palette.background.paper,
+          slotProps={{
+            paper: {
+              style: {
+                top: 64,
+                bottom: 0,
+                boxShadow: 'none',
+                backgroundImage: 'none',
+                backgroundColor: theme.palette.background.paper,
+              },
             },
           }}>
           <MenuPanel>{_children}</MenuPanel>

package/src/Icon/Icon.stories.jsx

@@ -0,0 +1,45 @@
+import Icon from '.';
+
+export default {
+  title: 'Deprecated/Icon',
+
+  parameters: {
+    readme: {
+      sidebar: '<!-- PROPS -->',
+    },
+  },
+};
+
+export function WithDifferentNames() {
+  return (
+    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
+      <Icon name="box" variant="solid" />
+      <Icon name="cut" />
+      <Icon name="copy" />
+      <Icon name="file" />
+    </div>
+  );
+}
+
+WithDifferentNames.storyName = 'with different names';
+
+export function WithDifferentSizes() {
+  return (
+    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
+      <Icon name="box" variant="solid" />
+      <Icon name="box" size={50} variant="solid" />
+    </div>
+  );
+}
+
+WithDifferentSizes.storyName = 'with different sizes';
+
+export function WithRounded() {
+  return (
+    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
+      <Icon name="box" rounded variant="solid" />
+    </div>
+  );
+}
+
+WithRounded.storyName = 'with rounded';

package/src/Icon/index.tsx

@@ -1,24 +1,16 @@
-import { forwardRef } from 'react';
-import { type SxProps } from '@mui/material';
+import { Icon as IconifyIcon } from '@iconify/react';
 
 import colors from '../Colors';
 import { styled } from '../Theme';
 import { withDeprecated } from '../Util/deprecate';
 
-const variants = {
-  light: 'fal',
-  regular: 'far',
-  solid: 'fas',
-};
-
 export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string;
   color?: string;
   size?: number;
   variant?: 'light' | 'regular' | 'solid';
   rounded?: false | true;
-  forwardedRef?: React.ForwardedRef<HTMLDivElement>;
-  sx?: SxProps;
+  forwardedRef?: React.Ref<unknown>;
 }
 
 // eslint-disable-next-line react/prop-types
@@ -26,29 +18,20 @@ function Icon({
   name,
   color = colors.grey[900],
   size = 24,
-  variant = 'light',
+  variant = 'regular',
   rounded = false,
-  style = {},
   className = '',
   forwardedRef,
-  ...rest
 }: IconProps) {
-  const content = (
-    <i
-      ref={forwardedRef}
-      className={`${variants[variant]} fa-${name} ${rounded ? '' : className}`}
-      style={Object.assign({ color, fontSize: `${size}px` }, style || {})}
-    />
-  );
-
+  const iconName = variant === 'solid' ? `fa-solid:${name}` : `fa-regular:${name}`;
+  const content = <IconifyIcon icon={iconName} color={color} width={size} height={size} className={className} />;
   if (rounded) {
     return (
-      <Span ref={forwardedRef} size={size} color={color} className={className} {...rest}>
+      <Span ref={forwardedRef as React.Ref<HTMLSpanElement>} size={size} color={color} className={className}>
         {content}
       </Span>
     );
   }
-
   return content;
 }
 
@@ -70,6 +53,11 @@ const Span = styled('span')<{ size: number; color: string }>`
 `;
 
 export default withDeprecated(
-  forwardRef<HTMLDivElement, IconProps>((props, ref) => <Icon {...props} forwardedRef={ref} />),
+  ({
+    ref,
+    ...props
+  }: IconProps & {
+    ref?: React.Ref<unknown>;
+  }) => <Icon {...props} forwardedRef={ref} />,
   { name: 'Icon', alternative: 'SVG icons' }
 );

package/src/Img/Img.stories.jsx

@@ -0,0 +1,17 @@
+import Basic from './demo/basic';
+
+export default {
+  title: 'Data Display/Img',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The Image component allows you to place an image on your page. It supports fixed size, aspect ratio, lazy loading and fallback image.',
+      },
+    },
+  },
+};
+
+Basic.storyName = 'Img';
+
+export { Basic };

package/src/Img/index.jsx

@@ -43,21 +43,21 @@ const classes = {
  * @returns {React.ReactComponentElement}
  */
 function Img({
-  lazy,
-  width,
-  height,
-  repeat,
-  ratio,
-  alt,
-  size,
-  position,
+  lazy = true,
+  width = null,
+  height = null,
+  repeat = 'no-repeat',
+  ratio = 1,
+  alt = null,
+  size = 'cover',
+  position = 'top center',
   src,
-  placeholder,
-  fallback,
-  style,
-  className,
-  onError,
-  onSuccess,
+  placeholder = null,
+  fallback = null,
+  style = null,
+  className = '',
+  onError = noop,
+  onSuccess = noop,
   ...rest
 }) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -199,21 +199,5 @@ Img.propTypes = {
   onError: PropTypes.func,
   onSuccess: PropTypes.func,
 };
-Img.defaultProps = {
-  alt: null,
-  size: 'cover',
-  position: 'top center',
-  repeat: 'no-repeat',
-  style: null,
-  ratio: 1,
-  width: null,
-  height: null,
-  lazy: true,
-  placeholder: null,
-  fallback: null,
-  className: '',
-  onError: noop,
-  onSuccess: noop,
-};
 
 export default Img;

package/src/InfoRow/InfoRow.stories.jsx

@@ -0,0 +1,14 @@
+export { default as DifferentWidth } from './demo/different-width';
+export { default as CustomValueComponent } from './demo/custom-value-component';
+export { default as CustomNameComponent } from './demo/custom-name-component';
+
+export default {
+  title: 'Data Display/InfoRow',
+  parameters: {
+    docs: {
+      description: {
+        component: 'InfoRow is typically used to display data with key-value pairs, such as a product specification.',
+      },
+    },
+  },
+};

package/src/InfoRow/index.tsx

@@ -1,6 +1,6 @@
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
 
 import { styled } from '../Theme';
 
@@ -16,15 +16,15 @@ export interface InfoRowProps {
 function InfoRow({
   name,
   // eslint-disable-next-line no-shadow
-  nameFormatter = (name) => {
-    if (typeof name === 'string') {
-      return name
+  nameFormatter = (rawName) => {
+    if (typeof rawName === 'string') {
+      return rawName
         .split(' ')
         .map((x: any) => upperFirst(camelCase(x)))
         .join(' ');
     }
 
-    return name;
+    return rawName;
   },
   layout = 'horizontal',
   children,

package/src/Layout/Layout.stories.jsx

@@ -0,0 +1,24 @@
+export { default as Basic } from './demo/basic';
+export { default as CustomElement } from './demo/custom-element';
+export { default as Dashboard } from './demo/dashboard';
+export { default as DashboardGroupedNav } from './demo/dashboard-grouped-nav';
+export { default as FullPage } from './demo/full-page';
+export { default as DashboardLegacy } from './demo/dashboard-legacy';
+export { default as DashboardLegacyCustomLogo } from './demo/dashboard-legacy-custom-logo';
+
+export default {
+  title: 'Layout/Layout',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Dashboard Layout is a generic, customizable layout component that includes a header, navigation, and footer, it can be used to quickly build management pages.',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1504%3A5211',
+    },
+  },
+};

package/src/Layout/dashboard/full-page.tsx

@@ -1,4 +1,4 @@
-import { useState, useContext, createContext, useMemo, useLayoutEffect } from 'react';
+import { useState, use, createContext, useMemo, useLayoutEffect } from 'react';
 
 type FullPageState = {
   inFullPage: boolean;
@@ -19,7 +19,7 @@ type FullPageContextValue = FullPageState & {
 export const FullPageContext = createContext<FullPageContextValue>(null!);
 
 export const useFullPage = (initialState?: FullPageState) => {
-  const ctx = useContext(FullPageContext);
+  const ctx = use(FullPageContext);
   useLayoutEffect(() => {
     if (initialState) {
       ctx.configure(initialState);
@@ -51,8 +51,8 @@ export function FullPageProvider({ children, ...rest }: { children?: React.React
     };
   }, [state]);
   return (
-    <FullPageContext.Provider value={value} {...rest}>
+    <FullPageContext value={value} {...rest}>
       {children}
-    </FullPageContext.Provider>
+    </FullPageContext>
   );
 }

package/src/Layout/dashboard/index.tsx

@@ -1,13 +1,9 @@
 import { useEffect, useMemo } from 'react';
 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 { Container, Box, type SxProps } from '@mui/material';
 import clsx from 'clsx';
-import OpenInFullIcon from '@mui/icons-material/OpenInFull';
-import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
+import { OpenInFull as OpenInFullIcon, CloseFullscreen as CloseFullscreenIcon } from '@mui/icons-material';
 import DashboardLegacy from '../dashboard-legacy';
 import { ResponsiveHeader } from '../../Header';
 import NavMenu from '../../NavMenu';
@@ -101,7 +97,6 @@ function Dashboard({
   return (
     <Wrapper sx={sx} {...rest} className={classes} sidebarWidth={sidebarWidth}>
       <Helmet title={title} key={title} />
-
       {headerVisible && (
         <StyledUxHeader {..._headerProps} className="dashboard-header">
           {links?.length
@@ -122,21 +117,29 @@ function Dashboard({
             : null}
         </StyledUxHeader>
       )}
-
-      <Box display="flex" className="dashboard-body">
-        <Hidden mdDown>
-          {!!links?.length && sidebarVisible && (
-            <Box className="dashboard-sidebar">
-              {_dense ? (
+      <Box
+        className="dashboard-body"
+        sx={{
+          display: 'flex',
+        }}>
+        {!!links?.length && sidebarVisible && (
+          <Box
+            className="dashboard-sidebar"
+            sx={{
+              display: {
+                xs: 'none',
+                md: 'block',
+              },
+            }}>
+            {_dense ? (
+              <Sidebar links={links} dense={_dense} />
+            ) : (
+              <Box className="dashboard-sidebar-container">
                 <Sidebar links={links} dense={_dense} />
-              ) : (
-                <Box className="dashboard-sidebar-container">
-                  <Sidebar links={links} dense={_dense} />
-                </Box>
-              )}
-            </Box>
-          )}
-        </Hidden>
+              </Box>
+            )}
+          </Box>
+        )}
         <Box className="dashboard-main" id="arc__dashboard-main">
           {showToggleButton && (
             <Box

package/src/Layout/dashboard/sidebar.tsx

@@ -1,4 +1,4 @@
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
 import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';

package/src/Layout/dashboard-legacy/header.tsx

@@ -1,10 +1,5 @@
-import Button from '@mui/material/IconButton';
-import AppBar, { type AppBarProps } from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Hidden from '@mui/material/Hidden';
-import MenuIcon from '@mui/icons-material/Menu';
+import { Menu as MenuIcon } from '@mui/icons-material';
+import { AppBar, type AppBarProps, Toolbar, Box, Typography, Button } from '@mui/material';
 import { Link } from 'react-router-dom';
 
 import Logo from '../../Logo';
@@ -41,7 +36,10 @@ const StyledAppBar = styled(AppBar)`
   .header-title__primary {
     font-size: 24px;
     font-weight: 800;
-    color: ${(props) => props.theme.typography.color.main};
+    color: ${(props) => {
+      // @ts-expect-error
+      return props.theme.typography.color.main;
+    }};
     text-transform: uppercase;
     display: flex;
     align-items: center;
@@ -49,7 +47,10 @@ const StyledAppBar = styled(AppBar)`
   .header-title__secondary {
     font-size: 14px;
     line-height: 1.71;
-    color: ${(props) => props.theme.typography.color.gray};
+    color: ${(props) => {
+      // @ts-expect-error
+      return props.theme.typography.color.gray;
+    }};
   }
 
   .header-addons {
@@ -118,16 +119,22 @@ export default function Header({
         <Button
           color="inherit"
           aria-label="open drawer"
-          edge="start"
           className="header-menu"
           aira-label="header menu button"
           onClick={onToggleMenu}>
           <MenuIcon />
         </Button>
         <Link to={homeUrl} className="header-link">
-          <Hidden mdDown>
-            <div className="header-logo">{logo || <Logo showText={false} />}</div>
-          </Hidden>
+          <Box
+            sx={{
+              display: {
+                xs: 'none',
+                md: 'block',
+              },
+            }}
+            className="header-logo">
+            {logo || <Logo showText={false} />}
+          </Box>
           <div className="header-title">
             <Typography component="h2" noWrap className="header-title__primary">
               {brand}
@@ -138,7 +145,11 @@ export default function Header({
             </Typography>
           </div>
         </Link>
-        <Box flexGrow={1} />
+        <Box
+          sx={{
+            flexGrow: 1,
+          }}
+        />
         {!!children && <div className="header-children">{children}</div>}
         <div className="header-addons">{addons}</div>
       </Toolbar>

package/src/Layout/dashboard-legacy/index.tsx

@@ -1,9 +1,6 @@
 import { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
-import Container from '@mui/material/Container';
-import Box from '@mui/material/Box';
-import { type SxProps } from '@mui/material';
-import Drawer, { type DrawerProps } from '@mui/material/Drawer';
+import { Container, Box, type SxProps, Drawer, type DrawerProps } from '@mui/material';
 import { useSize } from 'ahooks';
 
 import Sidebar, { type LinkItem } from './sidebar';
@@ -36,7 +33,7 @@ const Wrapper = styled('div')`
     white-space: nowrap;
     width: 120px;
     background: ${(props) => props.theme.palette.background.default};
-    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.palette.mode === 'light' ? 0.05 : 0.5)});
     border: 0;
   }
 `;
@@ -94,7 +91,6 @@ export default function Dashboard({
   return (
     <Wrapper className={`dashboard ${className}`} {...rest}>
       <Helmet title={`${title}-${brand}`} />
-
       <Header
         className="dashboard__header"
         onToggleMenu={onToggleDrawer}
@@ -105,7 +101,11 @@ export default function Dashboard({
         homeUrl={homeUrl}
         logo={logo}
       />
-      <Box display="flex" className="dashboard__body">
+      <Box
+        className="dashboard__body"
+        sx={{
+          display: 'flex',
+        }}>
         <Drawer
           variant={drawerMode}
           className="drawer"

package/src/Layout/dashboard-legacy/sidebar.tsx

@@ -1,9 +1,7 @@
 import { memo } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import Button, { type ButtonProps } from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
+import { Button, Typography, type SxProps, type ButtonProps } from '@mui/material';
 import { teal } from '@mui/material/colors';
-import { type SxProps } from '@mui/material';
 
 import ImageIcon from '../../Icon/image';
 import Logo from '../../Logo';

package/src/Layout/index.tsx

@@ -8,13 +8,13 @@ import {
   IconButton,
   Link,
   List,
-  ListItem,
   ListItemText,
   Toolbar,
   Typography,
   type SxProps,
+  ListItemButton,
 } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
+import { Menu as MenuIcon } from '@mui/icons-material';
 
 import Footer from '../Footer';
 import OpenInWallet from '../Wallet/Open';
@@ -95,7 +95,7 @@ export default function Layout({
       <List>
         {links.map((x) => (
           <Link className="nav-link" key={x.url} href={x.url} underline="hover">
-            <ListItem button className={activeLink === x.url ? 'drawer-highlight-nav' : ''}>
+            <ListItemButton className={activeLink === x.url ? 'drawer-highlight-nav' : ''}>
               <ListItemText>
                 {typeof x.icon === 'string' ? (
                   <Icon name={x.icon} size={18 * (x.iconZoom || 1)} color="inherit" style={{ marginRight: '5px' }} />
@@ -104,7 +104,7 @@ export default function Layout({
                 )}
                 {x.title}
               </ListItemText>
-            </ListItem>
+            </ListItemButton>
           </Link>
         ))}
       </List>
@@ -134,8 +134,10 @@ export default function Layout({
                 variant="h5"
                 color="inherit"
                 noWrap
-                display="block"
-                className="brand">
+                className="brand"
+                sx={{
+                  display: 'block',
+                }}>
                 {brand}
               </Typography>
               {description && (

package/src/Locale/LocaleSelector.stories.jsx

@@ -0,0 +1,44 @@
+import { LocaleProvider } from './context';
+
+import Basic from './demo/basic';
+import WithText from './demo/with-text';
+import DarkMode from './demo/dark-mode';
+import PopperProps from './demo/popper-props';
+import PopperTypeProps from './demo/popper-type-props';
+import IconProps from './demo/icon-props';
+import Languages from './demo/languages';
+
+export default {
+  title: 'Basic/LocaleSelector',
+
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'If you have multiple locales and want to give your users the option of selecting a language, you can use the LocaleSelector component.',
+      },
+      inlineStories: false,
+      iframeHeight: 160,
+    },
+  },
+  decorators: [
+    (StoryFn) => (
+      <LocaleProvider translations={{}}>
+        <StoryFn />
+      </LocaleProvider>
+    ),
+  ],
+};
+
+// demo 中使用了 react element, 设置 `inlineStories: false` 时导致 storybook 崩溃
+IconProps.parameters = {
+  docs: {
+    inlineStories: true,
+  },
+};
+
+Languages.argTypes = {
+  fallbackLocale: { control: 'select', options: [null, 'en'] },
+};
+
+export { Basic, WithText, DarkMode, PopperProps, PopperTypeProps, IconProps, Languages };