@arcblock/ux 2.13.70 → 3.0.0

package/src/Spinner/Spinner.stories.jsx

@@ -0,0 +1,98 @@
+import { Box } from '@mui/material';
+import Spinner from '.';
+
+export default {
+  title: 'Deprecated/Spinner',
+};
+
+export function Default() {
+  return (
+    <Box
+      sx={{
+        width: 300,
+        height: 300,
+        border: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Spinner />
+    </Box>
+  );
+}
+
+Default.storyName = 'default';
+
+export function CustomColor() {
+  return (
+    <Box
+      sx={{
+        p: 2,
+      }}>
+      <h5>color="primary"</h5>
+      <Box
+        sx={{
+          p: 4,
+        }}>
+        <Spinner color="primary" />
+      </Box>
+      <h5>color="secondary"</h5>
+      <Box
+        sx={{
+          p: 4,
+        }}>
+        <Spinner color="secondary" />
+      </Box>
+      <h5>color="inherit"</h5>
+      <Box
+        sx={{
+          p: 4,
+          color: 'blue',
+        }}>
+        <Spinner color="inherit" />
+      </Box>
+      <h5>style=&#123;&#123; color: '#128323' &#125;&#125;</h5>
+      <Box
+        sx={{
+          p: 4,
+        }}>
+        <Spinner style={{ color: '#128323' }} />
+      </Box>
+    </Box>
+  );
+}
+
+CustomColor.storyName = 'custom color';
+
+export function CustomSize() {
+  return (
+    <Box
+      sx={{
+        p: 2,
+      }}>
+      <h5>default: size=40</h5>
+      <Box
+        sx={{
+          p: 4,
+        }}>
+        <Spinner />
+      </Box>
+      <h5>size=12</h5>
+      <Box
+        sx={{
+          p: 4,
+        }}>
+        <Spinner size={12} />
+      </Box>
+      <h5>size: [12, 8] (Compatible with the old API)</h5>
+      <Box
+        sx={{
+          p: 4,
+        }}>
+        <Spinner size={[12, 8]} />
+      </Box>
+    </Box>
+  );
+}
+
+CustomSize.storyName = 'custom size';

package/src/Spinner/index.tsx

@@ -1,4 +1,4 @@
-import CircularProgress, { type CircularProgressProps } from '@mui/material/CircularProgress';
+import { CircularProgress, type CircularProgressProps } from '@mui/material';
 import { withDeprecated } from '../Util/deprecate';
 
 export interface SpinnerProps extends Omit<CircularProgressProps, 'size'> {

package/src/SplitButton/SplitButton.stories.jsx

@@ -0,0 +1,32 @@
+import { Box } from '@mui/material';
+
+import SplitButton from './index';
+import Basic from './demo/basic';
+import ThemeProvider from '../Theme/theme-provider';
+import ThemeModeToggle from '../Config/theme-mode-toggle';
+
+export default {
+  title: 'Basic/SplitButton',
+  component: SplitButton,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=768%3A999',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider prefer="system">
+        <Box sx={{ py: 1 }}>
+          <ThemeModeToggle />
+        </Box>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+// single story hoisting
+Basic.storyName = 'SplitButton';
+
+export { Basic };

package/src/SplitButton/index.tsx

@@ -1,12 +1,17 @@
 import React, { useState, useRef, isValidElement } from 'react';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import Popper from '@mui/material/Popper';
-import Paper from '@mui/material/Paper';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import MenuList from '@mui/material/MenuList';
-import MenuItem, { MenuItemProps } from '@mui/material/MenuItem';
-import ButtonGroup, { ButtonGroupProps } from '@mui/material/ButtonGroup';
-import Button, { ButtonProps } from '@mui/material/Button';
+import { ExpandMore } from '@mui/icons-material';
+import {
+  Popper,
+  Paper,
+  ClickAwayListener,
+  MenuList,
+  MenuItem,
+  MenuItemProps,
+  ButtonGroup,
+  ButtonGroupProps,
+  Button,
+  ButtonProps,
+} from '@mui/material';
 import noop from 'lodash/noop';
 
 import { styled } from '../Theme';
@@ -36,7 +41,8 @@ export default function SplitButton(props: SplitButtonProps) {
   const [open, setOpen] = useState(false);
   const anchorRef = useRef<HTMLDivElement | null>(null);
   const menuItems = Array.isArray(menu)
-    ? menu.map((item, index) => (isValidElement(item) ? item : <MenuItem {...item} key={index} />))
+    ? // eslint-disable-next-line react/no-array-index-key
+      menu.map((item, index) => (isValidElement(item) ? item : <MenuItem {...item} key={index} />))
     : menu;
 
   const onToggle = () => {

package/src/Switch/Switch.stories.jsx

@@ -0,0 +1,16 @@
+import Basic from './demo/basic';
+
+export default {
+  title: 'Basic/Switch',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A iOS-styled Swtich component.',
+      },
+    },
+  },
+};
+
+Basic.storyName = 'Switch';
+
+export { Basic };

package/src/Switch/index.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import MuiSwitch from '@mui/material/Switch';
+import { FormControlLabel, Switch as MuiSwitch } from '@mui/material';
 import { styled } from '../Theme';
 
 // 参考: https://mui.com/material-ui/react-switch/#customization
@@ -66,7 +65,7 @@ const IOSSwitch = styled((props) => <MuiSwitch focusVisibleClassName=".Mui-focus
  * @param {SwitchProps} props
  * @returns {JSX.Element}
  */
-function Switch({ labelProps, ...rest }) {
+function Switch({ labelProps = null, ...rest }) {
   if (labelProps) {
     return <FormControlLabel control={<IOSSwitch {...rest} />} {...labelProps} />;
   }
@@ -76,8 +75,5 @@ function Switch({ labelProps, ...rest }) {
 Switch.propTypes = {
   labelProps: PropTypes.object,
 };
-Switch.defaultProps = {
-  labelProps: null,
-};
 
 export default Switch;

package/src/Tabs/Tabs.stories.jsx

@@ -0,0 +1,18 @@
+import Basic from './demo/basic';
+import IconPosition from './demo/iconPosition';
+
+export default {
+  title: 'Navigation/Tabs',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The Tabs component allows content authors to organize their content into various views. Users can navigate to different views by switching between tabs.',
+      },
+    },
+  },
+};
+
+Basic.storyName = 'Tabs';
+
+export { Basic, IconPosition };

package/src/Tabs/index.tsx

@@ -21,7 +21,7 @@ const StyledMuiTabs = styled(MuiTabs)(({ theme }) => ({
 }));
 
 interface CardTabsProps extends Omit<MuiTabsProps, 'onChange'> {
-  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement }[];
+  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement<any> }[];
   current: any;
   onChange: (value: string) => void;
   iconPosition?: TabProps['iconPosition'];
@@ -91,7 +91,7 @@ function CardTabs({ tabs, current, onChange, iconPosition, ...rest }: CardTabsPr
 }
 
 interface LineTabsProps extends Omit<MuiTabsProps, 'onChange'> {
-  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement }[];
+  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement<any> }[];
   current: any;
   onChange: (value: string) => void;
   iconPosition?: TabProps['iconPosition'];
@@ -169,7 +169,7 @@ function LineTabs({ tabs, current, onChange, iconPosition, ...rest }: LineTabsPr
 }
 
 interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'onChange'> {
-  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement }[];
+  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement<any> }[];
   current: any;
   onChange: (value: string) => void;
   variant?: 'card' | 'line' | MuiTabsProps['variant'];

package/src/Tag/Tag.stories.jsx

@@ -0,0 +1,15 @@
+import Basic from './demo/basic';
+
+export default {
+  title: 'Data Display/Tag',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Used for categorizing or marking up.',
+      },
+    },
+  },
+};
+Basic.storyName = 'Tag';
+
+export { Basic };

package/src/Tag/index.jsx

@@ -1,6 +1,6 @@
-import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
+import isUndefined from 'lodash/isUndefined';
 
 import { mergeProps } from '../Util';
 import colors from '../Colors';
@@ -46,7 +46,20 @@ const types = {
  * @param {TagProps} props
  * @return {import('react').ReactNode}
  */
-function Tag(props) {
+function Tag(rawProps) {
+  const props = Object.assign({}, rawProps);
+  if (isUndefined(props.type)) {
+    props.type = 'primary';
+  }
+  if (isUndefined(props.content)) {
+    props.content = '';
+  }
+  if (isUndefined(props.style)) {
+    props.style = {};
+  }
+  if (isUndefined(props.className)) {
+    props.className = '';
+  }
   const newProps = mergeProps(props, Tag, ['style']);
   const { type, content, children, style, className, forwardedRef, ...rest } = newProps;
 
@@ -76,17 +89,13 @@ Tag.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 };
 
-Tag.defaultProps = {
-  type: 'primary',
-  content: '',
-  className: '',
-  style: {},
-};
-
 /**
  * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<TagProps> & React.RefAttributes<HTMLSpanElement>>}
  */
-const TagComponent = forwardRef((props, ref) => <Tag {...props} forwardedRef={ref} />);
+// eslint-disable-next-line react/prop-types
+function TagComponent({ ref, ...props }) {
+  return <Tag {...props} forwardedRef={ref} />;
+}
 export default TagComponent;
 
 const Span = styled(Typography)`

package/src/TextCollapse/TextCollapse.stories.jsx

@@ -0,0 +1,73 @@
+import TextCollapse from '.';
+
+export default {
+  title: 'Deprecated/TextCollapse',
+
+  parameters: {
+    readme: {
+      sidebar: '<!-- PROPS -->',
+    },
+  },
+};
+
+export function WithDefaultOptions() {
+  return (
+    <>
+      <TextCollapse maxWidth={180}>this text will collapse from middle</TextCollapse>
+      <hr />
+      <TextCollapse maxWidth={180} fontType="monospace">
+        this text will collapse from middle
+      </TextCollapse>
+    </>
+  );
+}
+
+WithDefaultOptions.storyName = 'with default options';
+
+export function WithSmallerEndChars() {
+  return (
+    <>
+      <TextCollapse maxWidth={180} endChars={4}>
+        this text will collapse from middle
+      </TextCollapse>
+      <hr />
+      <TextCollapse maxWidth={180} endChars={4} fontType="monospace">
+        this text will collapse from middle
+      </TextCollapse>
+    </>
+  );
+}
+
+WithSmallerEndChars.storyName = 'with smaller end chars';
+
+export function WithLargerStartChars() {
+  return (
+    <div style={{ color: 'red' }}>
+      <TextCollapse maxWidth={120} startChars={18} endChars={4}>
+        this text will collapse from middle
+      </TextCollapse>
+      <hr />
+      <TextCollapse maxWidth={120} startChars={18} endChars={4} fontType="monospace">
+        this text will collapse from middle
+      </TextCollapse>
+    </div>
+  );
+}
+
+WithLargerStartChars.storyName = 'with larger start chars';
+
+export function WithLargerFontSize() {
+  return (
+    <div style={{ fontSize: 30 }}>
+      <TextCollapse maxWidth={360} startChars={('startChars', 8)} endChars={4}>
+        this text will collapse from middle
+      </TextCollapse>
+      <hr />
+      <TextCollapse maxWidth={360} startChars={8} endChars={4} fontType="monospace">
+        this text will collapse from middle
+      </TextCollapse>
+    </div>
+  );
+}
+
+WithLargerFontSize.storyName = 'with larger font size';

package/src/TextCollapse/index.tsx

@@ -1,4 +1,4 @@
-import Typography, { type TypographyProps } from '@mui/material/Typography';
+import { Typography, type TypographyProps } from '@mui/material';
 
 import { styled } from '../Theme';
 import { withDeprecated } from '../Util/deprecate';

package/src/Theme/Theme.stories.jsx

@@ -0,0 +1,10 @@
+export { default as Palette } from './demo/palette';
+export { default as Typography } from './demo/typography';
+export { default as Shadows } from './demo/shadows';
+export { default as WithCustomKey } from './demo/with-custom-key';
+export { default as CustomFonts } from './demo/custom-fonts';
+export { default as UrlTheme } from './demo/url-theme';
+
+export default {
+  title: 'Theme/Theme',
+};

package/src/Theme/theme-provider.tsx

@@ -1,18 +1,18 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { GlobalStyles, PaletteMode } from '@mui/material';
+import { createContext, useCallback, use, useEffect, useMemo, useState, useRef } from 'react';
 import {
+  GlobalStyles,
+  PaletteMode,
+  StyledEngineProvider,
   ThemeProvider as MuiThemeProvider,
   Theme,
   ThemeOptions,
   useTheme,
-  StyledEngineProvider,
-} from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
+  CssBaseline,
+} from '@mui/material';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY, getDefaultThemePrefer, isValidThemeMode } from '@blocklet/theme';
 
-import useLocationState from '../hooks/use-location-state';
+import { useLocationState } from '../hooks/use-location-state';
 import { createTheme, isTheme, isUxTheme, lazyCreateDefaultTheme, type UxThemeOptions } from './theme';
 
 const defaultTheme = createTheme();
@@ -27,7 +27,7 @@ export interface ColorSchemeContextType {
 
 export const ColorSchemeContext = createContext<ColorSchemeContextType>({} as ColorSchemeContextType);
 export function useColorScheme() {
-  return useContext(ColorSchemeContext);
+  return use(ColorSchemeContext);
 }
 
 /** 根据偏好获取颜色模式 */
@@ -259,11 +259,11 @@ function ColorSchemeProvider({
   }, [theme.palette.background.default]);
 
   return (
-    <ColorSchemeContext.Provider value={colorSchemeValue}>
+    <ColorSchemeContext value={colorSchemeValue}>
       <BaseThemeProvider theme={theme} {...rest}>
         {children}
       </BaseThemeProvider>
-    </ColorSchemeContext.Provider>
+    </ColorSchemeContext>
   );
 }
 
@@ -289,11 +289,3 @@ export default function ThemeProvider({ children, prefer, enableColorScheme = fa
 
   return <BaseThemeProvider {...props}>{children}</BaseThemeProvider>;
 }
-
-ThemeProvider.propTypes = {
-  children: PropTypes.any,
-  theme: PropTypes.any,
-  injectFirst: PropTypes.bool,
-  darkSchemeClass: PropTypes.string,
-  enableColorScheme: PropTypes.bool,
-};

package/src/Theme/theme.ts

@@ -1,7 +1,12 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import type { PaletteMode, Theme } from '@mui/material';
-import { createTheme as _createTheme, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
+import {
+  createTheme as _createTheme,
+  responsiveFontSizes,
+  type ThemeOptions,
+  type PaletteMode,
+  type Theme,
+} from '@mui/material';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
 import {

package/src/Toast/Toast.stories.jsx

@@ -0,0 +1,28 @@
+import { Box } from '@mui/material';
+import { ThemeProvider } from '../Theme';
+import { ThemeModeToggle } from '../Config';
+
+export { default as Basic } from './demo/basic';
+export { default as CustomOptions } from './demo/custom-options';
+export { default as ManualClose } from './demo/manual-close';
+
+export default {
+  title: 'Feedback/Toast',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A `iamhosseindhv/notistack` wrapper used to display notifications on web apps.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider prefer="system">
+        <Box>
+          <ThemeModeToggle />
+        </Box>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};

package/src/Toast/index.tsx

@@ -9,8 +9,8 @@ import {
   SnackbarProvider,
   useSnackbar,
 } from 'notistack';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
 import noop from 'lodash/noop';
 
 type EnqueueSnackbar = ProviderContext['enqueueSnackbar'];

package/src/Typography/index.tsx

@@ -1,5 +1,6 @@
 import { Box, Typography as MuiTypography, Skeleton, type TypographyProps as MuiTypographyProps } from '@mui/material';
 import { useCreation, useReactive, useSize } from 'ahooks';
+import noop from 'lodash/noop';
 import { useEffect, useRef } from 'react';
 
 export interface TypographyProps extends MuiTypographyProps {
@@ -8,7 +9,6 @@ export interface TypographyProps extends MuiTypographyProps {
   onShrink?: ({ fontSize, initialSize }: { fontSize: number; initialSize: number }) => void;
 }
 
-const noop = (...args: any[]) => {};
 let minBrowserFontSize = -1;
 
 function detectMinimumFontSize() {
@@ -89,7 +89,11 @@ export default function Typography({
   }, [fontSize, state.loading]);
 
   return loading ? (
-    <Box ref={refContainer} flex={1}>
+    <Box
+      ref={refContainer}
+      sx={{
+        flex: 1,
+      }}>
       <MuiTypography {...rest} sx={sx} noWrap>
         <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
       </MuiTypography>

package/src/UserCard/Cards/basic-info.tsx

@@ -8,7 +8,6 @@ interface BasicCardProps extends Omit<UserCardProps, 'user'> {
   user: User;
   shouldShowHoverCard: boolean;
   renderCardContent?: () => React.ReactNode | null;
-  isFull?: boolean;
 }
 
 // 详细卡片模式下的Basic渲染组件
@@ -17,7 +16,6 @@ function BasicCard(props: BasicCardProps) {
     user,
     avatarSize = 40,
     renderCustomContent,
-    isFull = true,
     infoType = InfoType.Minimal,
     renderFields,
     popupRenderFields,
@@ -25,10 +23,16 @@ function BasicCard(props: BasicCardProps) {
   } = props;
 
   return (
-    <Box display="flex" flexDirection="column" width="100%" flex={1} height="100%">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        flex: 1,
+        height: '100%',
+      }}>
       <MinimalContent user={user} avatarSize={avatarSize} {...rest} />
-
-      {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} renderFields={renderFields} />}
+      {infoType === InfoType.Basic && <BasicContent user={user} renderFields={renderFields} />}
       <Box className="user-card__footer">
         {renderCustomContent && <Box sx={{ mt: 1.5 }}>{renderCustomContent()}</Box>}
       </Box>

package/src/UserCard/Container/card.tsx

@@ -7,7 +7,7 @@ interface CardContainerProps {
   children: React.ReactNode;
   cardType?: UserCardProps['cardType'];
   variant?: 'paper' | 'box';
-  containerRef?: React.RefObject<HTMLDivElement>;
+  containerRef?: React.Ref<unknown>;
   sx?: UserCardProps['sx'];
 }
 
@@ -36,7 +36,7 @@ function CardContainer({
   // Paper变体，用于Basic和Full类型卡片
   if (variant === 'paper') {
     return (
-      <Paper ref={containerRef} elevation={0} sx={commonStyles}>
+      <Paper ref={containerRef as React.Ref<HTMLDivElement>} elevation={0} sx={commonStyles}>
         {children}
       </Paper>
     );