@arcblock/ux 2.13.21 → 2.13.24

package/lib/Config/config-provider.d.ts

@@ -1,34 +1,18 @@
-import { ReactNode } from 'react';
-import { type PaletteMode } from '@mui/material';
+import { type ReactNode } from 'react';
 import { LocaleProviderProps } from '../Locale/context';
-import { ThemeProviderProps } from '../Theme/theme-provider';
-import { type UserThemeOptions, type ThemeConfig } from '../Theme';
-type Prefer = 'light' | 'dark' | 'system';
-export interface ConfigContextType {
-    mode: PaletteMode;
-    prefer?: Prefer;
-    themeOptions: UserThemeOptions;
-    toggleMode: () => void;
-}
-export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, Omit<ThemeProviderProps, 'theme'> {
+import { type ThemeProviderProps } from '../Theme/theme-provider';
+export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, ThemeProviderProps {
     children: ReactNode;
-    prefer?: Prefer;
-    theme?: UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions);
-    disableBlockletTheme?: boolean;
     translations?: Record<string, any>;
 }
 /**
  * 集中化配置
  */
-export declare function ConfigProvider({ children, prefer, theme: themeOptions, disableBlockletTheme, injectFirst, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ConfigProvider {
-    var useConfig: typeof import("./config-provider").useConfig;
-}
+export declare function ConfigProvider({ children, theme, injectFirst, darkSchemeClass, prefer, disableBlockletTheme, enableColorScheme, locale, fallbackLocale, translations, languages, onLoadingTranslation, }: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useConfig(): {
-    mode: PaletteMode;
-    prefer?: Prefer;
-    themeOptions: UserThemeOptions;
+    mode: import("@mui/material").PaletteMode;
     toggleMode: () => void;
+    prefer?: import("../Theme").Prefer;
     locale: import("../type").Locale;
     changeLocale: (locale: import("../type").Locale) => void;
     t: (key: string, data?: Record<string, any>) => string;
@@ -38,4 +22,3 @@ export declare function useConfig(): {
     }[];
     theme: import("@mui/material").Theme;
 };
-export {};

package/lib/Config/config-provider.js

@@ -1,111 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useState, useCallback, useEffect } from 'react';
-import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
-import set from 'lodash/set';
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { LocaleProvider, useLocaleContext } from '../Locale/context';
-import ThemeProvider from '../Theme/theme-provider';
-import { createTheme, getDefaultThemePrefer, lazyThemeConfig, useTheme } from '../Theme';
-const resolveMode = prefer => {
-  if (prefer) {
-    if (prefer === 'system') {
-      // 取系统默认
-      return getDefaultThemePrefer({
-        theme: {
-          prefer: 'system'
-        }
-      });
-    }
-    return prefer;
-  }
-  return getDefaultThemePrefer();
-};
-const ConfigContext = /*#__PURE__*/createContext({});
+import ThemeProvider, { useColorScheme } from '../Theme/theme-provider';
+import { useTheme } from '../Theme';
 /**
  * 集中化配置
  */
 export function ConfigProvider({
   children,
-  // theme config
+  // theme provider
+  theme,
+  injectFirst,
+  darkSchemeClass,
   prefer,
-  theme: themeOptions,
   disableBlockletTheme = false,
-  injectFirst,
-  // locale config
+  enableColorScheme,
+  // locale provider
   locale,
   fallbackLocale,
   translations = {},
   languages,
   onLoadingTranslation
 }) {
-  const [mode, setMode] = useState(() => resolveMode(prefer));
-  const _themeOptions = useMemo(() => {
-    let result = {};
-    const getThemeConfig = lazyThemeConfig(mode);
-    if (themeOptions) {
-      if (typeof themeOptions === 'function') {
-        result = themeOptions(getThemeConfig());
-      } else {
-        result = {
-          ...themeOptions
-        };
-      }
-    }
-    set(result, 'palette.mode', mode);
-    set(result, 'mode', mode);
-    return result;
-  }, [mode, themeOptions]);
-  const theme = useMemo(() => {
-    return createTheme({
-      ..._themeOptions,
-      disableBlockletTheme
-    });
-  }, [_themeOptions, disableBlockletTheme]);
-  const toggleMode = useCallback(() => {
-    const newMode = mode === 'light' ? 'dark' : 'light';
-    setMode(newMode);
-    localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
-  }, [mode, setMode]);
-  const config = useMemo(() => ({
-    mode,
-    themeOptions: _themeOptions,
-    toggleMode,
-    prefer
-  }), [mode, prefer, _themeOptions, toggleMode]);
-
-  // change prefer manually
-  useEffect(() => {
-    if (prefer) {
-      setMode(resolveMode(prefer));
-    }
-  }, [prefer, setMode]);
-  return /*#__PURE__*/_jsx(ConfigContext.Provider, {
-    value: config,
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    injectFirst: injectFirst,
+    darkSchemeClass: darkSchemeClass,
+    prefer: prefer,
+    disableBlockletTheme: disableBlockletTheme,
+    enableColorScheme: enableColorScheme,
     children: /*#__PURE__*/_jsx(LocaleProvider, {
       locale: locale,
       fallbackLocale: fallbackLocale,
       translations: translations,
       onLoadingTranslation: onLoadingTranslation,
       languages: languages,
-      children: /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: theme,
-        injectFirst: injectFirst,
-        children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
-          theme: theme,
-          children: children
-        })
-      })
+      children: children
     })
   });
 }
 export function useConfig() {
   const theme = useTheme();
   const localeCtx = useLocaleContext();
-  const configCtx = useContext(ConfigContext);
+  const colorSchemeCtx = useColorScheme();
   return {
     theme,
     ...localeCtx,
-    ...configCtx
+    ...colorSchemeCtx
   };
-}
-ConfigProvider.useConfig = useConfig;
+}

package/lib/Config/theme-mode-toggle.js

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { IconButton } from '@mui/material';
 import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
 import Brightness2OutlinedIcon from '@mui/icons-material/Brightness2Outlined';
-import { useConfig } from './config-provider';
+import { useColorScheme } from '../Theme/theme-provider';
 export default function ThemeModeToggle() {
   const {
     mode,
     toggleMode,
     prefer
-  } = useConfig();
+  } = useColorScheme();
   if (!toggleMode) {
     if (process.env.NODE_ENV !== 'production') {
       console.warn('Please ensure the component is wrapped with ConfigProvider context');

package/lib/NavMenu/products.js

@@ -3,7 +3,7 @@ import React from "react";
 import { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { Box, Grid } from '@mui/material';
+import { Box, Grid, useTheme } from '@mui/material';
 import SubItemGroup from './sub-item-group';
 import { Item } from './nav-menu';
 import { styled } from '../Theme';
@@ -1273,6 +1273,7 @@ DidConnectSvg.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
+import PaymentKitPng from './images/payment-kit.png';
 const translations = {
   en: {
     groups: {
@@ -1300,6 +1301,9 @@ const translations = {
       alKit: {
         description: 'Boost apps with AI'
       },
+      paymentKit: {
+        description: 'Effortless Crypto & Card Payments'
+      },
       blockletStore: {
         description: 'Discover & deploy apps'
       },
@@ -1364,6 +1368,9 @@ const translations = {
       alKit: {
         description: 'AI 赋能应用'
       },
+      paymentKit: {
+        description: '便捷的加密货币和银行卡支付'
+      },
       blockletStore: {
         description: '发现和部署应用程序'
       },
@@ -1437,6 +1444,9 @@ export default function Products({
   const {
     mode
   } = useNavMenuContext();
+  const {
+    palette
+  } = useTheme();
   const wrapperRef = useRef(null);
   const {
     locale = 'en'
@@ -1472,7 +1482,11 @@ export default function Products({
           children: "AIGNE"
         }),
         description: t('products.aigne.description'),
-        icon: /*#__PURE__*/_jsx(AigneSvg, {})
+        icon: /*#__PURE__*/_jsx(AigneSvg, {
+          style: {
+            filter: palette.mode === 'dark' ? 'invert(1)' : 'none'
+          }
+        })
       }, {
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://www.aistro.io/${locale}`,
@@ -1504,6 +1518,18 @@ export default function Products({
         }),
         description: t('products.alKit.description'),
         icon: /*#__PURE__*/_jsx(AIKitSvg, {})
+      }, {
+        label: /*#__PURE__*/_jsx(Link, {
+          to: `https://www.blocklet.io/${locale}`,
+          target: "_blank",
+          rel: "noreferrer noopener",
+          children: "Payment Kit"
+        }),
+        description: t('products.paymentKit.description'),
+        icon: /*#__PURE__*/_jsx("img", {
+          src: PaymentKitPng,
+          alt: "Payment Kit"
+        })
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
           to: `https://store.blocklet.dev/?locale=${locale}`,
@@ -1555,7 +1581,7 @@ export default function Products({
         icon: /*#__PURE__*/_jsx(AbtNetworkSvg, {})
       }], [{
         label: /*#__PURE__*/_jsx(Link, {
-          to: `https://www.arcblock.io/content/collections/${locale}/blocklet-server`,
+          to: `https://www.blocklet.io/${locale}/blocklet-server`,
           target: "_blank",
           rel: "noreferrer noopener",
           children: "Blocklet Server"
@@ -1622,7 +1648,7 @@ export default function Products({
         icon: /*#__PURE__*/_jsx(DidConnectSvg, {})
       }]]
     }];
-  }, [t, locale]);
+  }, [t, locale, palette]);
   return /*#__PURE__*/_jsx(Wrapper, {
     ref: wrapperRef,
     className: `is-${mode} ${className}`,

package/lib/NavMenu/style.js

@@ -126,7 +126,8 @@ export const NavMenuItem = styled('li', {
       width: '32px',
       height: '32px',
       marginRight: '16px',
-      border: '1px solid #eff1f5',
+      border: '1px solid',
+      borderColor: theme.palette.grey[200],
       borderRadius: '4px',
       color: theme.palette.grey[500]
     },

package/lib/PhoneInput/index.js

@@ -178,7 +178,8 @@ export default function PhoneInput({
 
   // 预览模式
   if (preview) {
-    const isValid = phone && validatePhoneNumber(phone, country);
+    const phoneWithCode = addCountryCodeToPhone(phone, getDialCodeByCountry(country));
+    const isValid = phone && validatePhoneNumber(phoneWithCode, country);
     const canDial = allowDial && isValid;
     return /*#__PURE__*/_jsxs(Box, {
       display: "flex",

package/lib/SessionUser/components/quick-login-item.js

@@ -21,18 +21,18 @@ export default function QuickLoginItem({
       borderRadius: 1,
       p: 2,
       transition: 'background-color 0.5s',
+      bgcolor: 'background.paper',
       '&:hover, &:active': {
-        backgroundColor: 'grey.100'
+        backgroundColor: 'action.hover'
       },
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
       cursor: 'pointer',
       '&:hover': {
-        backgroundColor: 'grey.200'
+        backgroundColor: 'action.hover'
       },
-      width: '100%',
-      backgroundColor: 'white'
+      width: '100%'
     },
     onClick: onClick,
     children: [/*#__PURE__*/_jsxs(Box, {

package/lib/SessionUser/components/un-login.js

@@ -150,7 +150,7 @@ export default function UnLogin({
             maxWidth: '90vw',
             borderColor: 'divider',
             border: '0 !important',
-            boxShadow: `0px 8px 16px 0px ${palette.grey[200]}, 0px 0px 0px 1px ${palette.grey[200]}`
+            boxShadow: 4
           },
           children: [/*#__PURE__*/_jsxs(Box, {
             sx: {
@@ -158,7 +158,8 @@ export default function UnLogin({
               alignItems: 'center',
               gap: 1,
               p: 2,
-              borderBottom: '1px solid #eee'
+              borderBottom: '1px solid',
+              borderColor: 'divider'
             },
             children: [loginAppLogo && !currentState.loadAppLogoError ? /*#__PURE__*/_jsx("img", {
               src: loginAppLogo,
@@ -205,8 +206,9 @@ export default function UnLogin({
                     overflow: 'hidden',
                     position: 'relative',
                     p: 0,
+                    bgcolor: 'background.paper',
                     '&:hover': {
-                      backgroundColor: `${palette.grey[200]} !important`
+                      bgcolor: `${palette.action.hover} !important`
                     }
                   },
                   onClick: () => {
@@ -227,8 +229,7 @@ export default function UnLogin({
                 }, userSessionItem.id), index < currentState.userSessions.length - 1 ? /*#__PURE__*/_jsx(Divider, {
                   sx: {
                     mx: 2,
-                    my: '0px !important',
-                    borderColor: '#e4e4e7'
+                    my: '0px !important'
                   }
                 }, `${userSessionItem.id}-divider`) : null]
               }, `${userSessionItem.id}-root`);

package/lib/Theme/index.d.ts

@@ -1,6 +1,7 @@
 import type { CreateMUIStyled, Theme } from '@mui/material';
 import { useTheme } from '@mui/material';
 export * from './theme';
+export * from './theme-provider';
 export { default as ThemeProvider } from './theme-provider';
 export { useTheme };
 export declare const styled: CreateMUIStyled<Theme>;

package/lib/Theme/index.js

@@ -1,5 +1,6 @@
 import { styled as muiStyled, useTheme } from '@mui/material';
 export * from './theme';
+export * from './theme-provider';
 export { default as ThemeProvider } from './theme-provider';
 export { useTheme };
 const isTransientProp = prop => prop.startsWith('$');

package/lib/Theme/theme-provider.d.ts

@@ -1,28 +1,43 @@
 import PropTypes from 'prop-types';
+import { PaletteMode } from '@mui/material';
 import { Theme } from '@mui/material/styles';
-export interface ThemeProviderProps {
+/** 颜色模式上下文类型 */
+export interface ColorSchemeContextType {
+    mode: PaletteMode;
+    toggleMode: () => void;
+    prefer?: Prefer;
+}
+export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextType>;
+export declare function useColorScheme(): ColorSchemeContextType;
+export type UxTheme = Partial<Theme> | ((outerTheme: Partial<Theme>) => Theme);
+export type Prefer = 'light' | 'dark' | 'system';
+interface BaseThemeProviderProps {
     children?: React.ReactNode;
-    theme: Theme;
+    theme?: UxTheme;
     injectFirst?: boolean;
     /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
     darkSchemeClass?: string;
 }
-/**
- * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
- */
-declare function ThemeProvider({ children, theme, injectFirst, darkSchemeClass }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+interface ColorSchemeProviderProps extends BaseThemeProviderProps {
+    prefer?: Prefer;
+    disableBlockletTheme?: boolean;
+}
+export interface ThemeProviderProps extends ColorSchemeProviderProps {
+    /** 下列情况会启用 ColorScheme 功能（让 theme 支持明暗模式切换）
+     * 1. 显示打开 enableColorScheme
+     * 2. 显示设置 prefer
+     * 3. 顶层 ThemeProvider
+     */
+    enableColorScheme?: boolean;
+}
+declare function ThemeProvider({ children, prefer, enableColorScheme, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeProvider {
     var propTypes: {
         children: PropTypes.Requireable<any>;
         theme: PropTypes.Requireable<any>;
         injectFirst: PropTypes.Requireable<boolean>;
         darkSchemeClass: PropTypes.Requireable<string>;
-    };
-    var defaultProps: {
-        children: null;
-        theme: Theme;
-        injectFirst: boolean;
-        darkSchemeClass: string;
+        enableColorScheme: PropTypes.Requireable<boolean>;
     };
 }
 export default ThemeProvider;

package/lib/Theme/theme-provider.js

@@ -1,11 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/material';
 import { ThemeProvider as MuiThemeProvider, useTheme } from '@mui/material/styles';
 import StyledEngineProvider from '@mui/material/StyledEngineProvider';
 import CssBaseline from '@mui/material/CssBaseline';
-import { createTheme } from './theme';
+import set from 'lodash/set';
+import { BLOCKLET_THEME_PREFER_KEY } from '@blocklet/theme';
+import { createTheme, getDefaultThemePrefer, isTheme, lazyThemeConfig } from './theme';
 const defaultTheme = createTheme();
+
+/** 颜色模式上下文类型 */
+
+export const ColorSchemeContext = /*#__PURE__*/createContext({});
+export function useColorScheme() {
+  return useContext(ColorSchemeContext);
+}
+
+/** 根据偏好获取颜色模式 */
+const resolveMode = prefer => {
+  if (prefer) {
+    if (prefer === 'system') {
+      // 取系统默认
+      return getDefaultThemePrefer({
+        theme: {
+          prefer: 'system'
+        }
+      });
+    }
+    return prefer;
+  }
+  return getDefaultThemePrefer();
+};
+
+/** 深色模式全局样式 */
 function DarkSchemeStyles({
   className
 }) {
@@ -55,22 +83,26 @@ function DarkSchemeStyles({
   }
   return null;
 }
-/**
- * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
- */
-export default function ThemeProvider({
+/** 基础的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider */
+function BaseThemeProvider({
   children,
-  theme,
-  injectFirst,
-  darkSchemeClass
+  theme = defaultTheme,
+  injectFirst = true,
+  darkSchemeClass = ''
 }) {
+  const _theme = useMemo(() => {
+    if (isTheme(theme)) return theme;
+
+    // 是 ThemeOptions 则创建一个 theme
+    return createTheme(theme);
+  }, [theme]);
   return (
     /*#__PURE__*/
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
     _jsx(StyledEngineProvider, {
       injectFirst: injectFirst,
       children: /*#__PURE__*/_jsxs(MuiThemeProvider, {
-        theme: theme,
+        theme: _theme,
         children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(DarkSchemeStyles, {
           className: darkSchemeClass
         }), children]
@@ -78,15 +110,90 @@ export default function ThemeProvider({
     })
   );
 }
+/** 带颜色模式切换功能的 theme provider */
+function ColorSchemeProvider({
+  children,
+  theme: themeInput,
+  prefer,
+  disableBlockletTheme = false,
+  ...rest
+}) {
+  const [mode, setMode] = useState(() => resolveMode(prefer));
+  const _themeInput = useMemo(() => {
+    let result = {};
+    const getThemeConfig = lazyThemeConfig(mode);
+    if (themeInput) {
+      if (typeof themeInput === 'function') {
+        result = {
+          ...themeInput(getThemeConfig())
+        };
+      } else {
+        result = {
+          ...themeInput
+        };
+      }
+    }
+    set(result, 'palette.mode', mode);
+    set(result, 'mode', mode);
+    return result;
+  }, [mode, themeInput]);
+  const theme = useMemo(() => {
+    return createTheme({
+      ..._themeInput,
+      disableBlockletTheme
+    });
+  }, [_themeInput, disableBlockletTheme]);
+
+  // 切换明/暗模式
+  const toggleMode = useCallback(() => {
+    const newMode = mode === 'light' ? 'dark' : 'light';
+    setMode(newMode);
+    localStorage.setItem(BLOCKLET_THEME_PREFER_KEY, newMode);
+  }, [mode, setMode]);
+  const colorSchemeValue = useMemo(() => ({
+    mode,
+    toggleMode,
+    prefer
+  }), [mode, prefer, toggleMode]);
+  useEffect(() => {
+    if (prefer) {
+      setMode(resolveMode(prefer));
+    }
+  }, [prefer, setMode]);
+  return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {
+    value: colorSchemeValue,
+    children: /*#__PURE__*/_jsx(BaseThemeProvider, {
+      theme: theme,
+      ...rest,
+      children: children
+    })
+  });
+}
+export default function ThemeProvider({
+  children,
+  prefer,
+  enableColorScheme = false,
+  ...props
+}) {
+  const {
+    toggleMode
+  } = useColorScheme();
+  if (enableColorScheme || prefer || !toggleMode) {
+    return /*#__PURE__*/_jsx(ColorSchemeProvider, {
+      prefer: prefer,
+      ...props,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(BaseThemeProvider, {
+    ...props,
+    children: children
+  });
+}
 ThemeProvider.propTypes = {
   children: PropTypes.any,
   theme: PropTypes.any,
   injectFirst: PropTypes.bool,
-  darkSchemeClass: PropTypes.string
-};
-ThemeProvider.defaultProps = {
-  children: null,
-  theme: defaultTheme,
-  injectFirst: true,
-  darkSchemeClass: ''
+  darkSchemeClass: PropTypes.string,
+  enableColorScheme: PropTypes.bool
 };

package/lib/Theme/theme.d.ts

@@ -7,6 +7,8 @@ import '@fontsource/roboto/latin-700.css';
 import '@fontsource/roboto/latin-ext-400.css';
 import '@fontsource/roboto/latin-ext-500.css';
 import '@fontsource/roboto/latin-ext-700.css';
+/** 是否是 MUI Theme 对象 */
+export declare function isTheme(obj: any): obj is Theme;
 export declare function collectFontFamilies(obj?: {
     fontFamily?: string;
 }, fontSet?: Set<string>): Set<string>;
@@ -20,8 +22,7 @@ export declare function createDefaultThemeOptions(mode?: PaletteMode): ThemeOpti
 export interface UserThemeOptions extends ThemeOptions {
     disableBlockletTheme?: boolean;
 }
-export type ThemeConfig = Pick<Theme, 'palette'>;
-export declare function lazyThemeConfig(mode: PaletteMode): () => ThemeConfig;
-export declare const create: (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => Theme;
-export declare const createTheme: (...args: Array<UserThemeOptions | ((config: ThemeConfig) => UserThemeOptions)>) => Theme;
+export declare function lazyThemeConfig(mode: PaletteMode): () => Partial<Theme>;
+export declare const create: (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => Theme;
+export declare const createTheme: (...args: Array<UserThemeOptions | ((config: Partial<Theme>) => UserThemeOptions)>) => Theme;
 export { deepmerge };