@arcblock/ux 2.13.70 → 3.0.0

package/src/Screenshot/index.tsx

@@ -1,5 +1,6 @@
 import { createElement, Children, cloneElement, useEffect, useRef, useState } from 'react';
 import { type SxProps } from '@mui/material';
+import isUndefined from 'lodash/isUndefined';
 
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
@@ -87,7 +88,7 @@ const childProps = {
   video: ['alt', 'title', 'muted', 'autoplay', 'loop', 'key', 'children'],
 };
 
-const createChild = (child: React.ReactElement) => [
+const createChild = (child: React.ReactElement<any>) => [
   createElement(
     child.type,
     childProps[child.type as keyof typeof childProps].reduce((acc: Record<string, any>, x: string) => {
@@ -97,7 +98,10 @@ const createChild = (child: React.ReactElement) => [
   ),
 ];
 
-const findChildren = (children: React.ReactElement[], returnArgWhenNotFound = true): React.ReactElement[] | null => {
+const findChildren = (
+  children: React.ReactElement<any>[],
+  returnArgWhenNotFound = true
+): React.ReactElement<any>[] | null => {
   for (let i = 0; i < children.length; i++) {
     const child = children[i];
 
@@ -106,7 +110,7 @@ const findChildren = (children: React.ReactElement[], returnArgWhenNotFound = tr
     }
 
     if (child.props && child.props.children) {
-      const subChildren = Children.toArray(child.props.children) as React.ReactElement[];
+      const subChildren = Children.toArray(child.props.children) as React.ReactElement<any>[];
       const result = findChildren(subChildren, false);
       if (result) {
         return result;
@@ -133,7 +137,28 @@ export interface OldScreenshotProps extends React.ComponentProps<'div'> {
 // This component is built upon the awesome device.css lib
 // By default it will find and only render img/video tags in the children
 // If neither of them are found, the whole child tree is rendered
-function OldScreenshot(props: OldScreenshotProps) {
+function OldScreenshot(rawProps: OldScreenshotProps) {
+  const props = Object.assign({}, rawProps);
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.type)) {
+    props.type = 'iphone-x';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.className)) {
+    props.className = '';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.style)) {
+    props.style = {};
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.width)) {
+    props.width = 0;
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.height)) {
+    props.height = 0;
+  }
   const newProps = mergeProps(props, OldScreenshot, ['style', 'width', 'height']) as OldScreenshotProps;
   const { type, children, style, className, width, height, ...rest } = newProps;
   const { zIndex = 0, borderRadius = 0 } = (types[type!] || {}) as DeviceStyles;
@@ -149,9 +174,10 @@ function OldScreenshot(props: OldScreenshotProps) {
       <div className="device-frame">
         <div className="device-content">
           {/* eslint-disable-next-line react/no-array-index-key */}
-          {findChildren(Children.toArray(children) as React.ReactElement[])?.map((item: any, index: number) =>
-            cloneElement(item, { key: index })
-          )}
+          {findChildren(Children.toArray(children) as React.ReactElement<any>[])?.map((item: any, index: number) => {
+            // eslint-disable-next-line react/no-array-index-key
+            return cloneElement(item, { key: index });
+          })}
         </div>
       </div>
       <div className="device-stripe" />
@@ -163,14 +189,6 @@ function OldScreenshot(props: OldScreenshotProps) {
   );
 }
 
-OldScreenshot.defaultProps = {
-  type: 'iphone-x' as const,
-  className: '',
-  style: {},
-  width: 0,
-  height: 0,
-};
-
 type DivProps = {
   type: keyof typeof types;
   contentRadius: number;

package/src/SessionManager/SessionManager.stories.jsx

@@ -0,0 +1,9 @@
+export { default as HasLogin } from './demo/has-login';
+export { default as NotLogin } from './demo/not-login';
+export { default as Callback } from './demo/callback';
+export { default as DarkMode } from './demo/dark-mode';
+export { default as Size } from './demo/size';
+
+export default {
+  title: 'DID/SessionManager',
+};

package/src/SessionPermission/index.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { useCreation } from 'ahooks';
 
 const roleList = ['owner', 'admin', 'member', 'guest'] as const;

package/src/SessionUser/components/logged-in.tsx

@@ -44,7 +44,6 @@ const debug = createDebug('did-connect');
 
 export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
   session: Session;
-  dark?: false | true;
   onBindWallet?: () => void;
   isBlocklet?: true | false;
   locale?: Locale;
@@ -54,7 +53,6 @@ export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter'
 
 export default function LoggedIn({
   session,
-  dark = false,
   onBindWallet = noop,
   isBlocklet = true,
   locale = 'en',

package/src/SessionUser/components/quick-login-item.tsx

@@ -1,10 +1,10 @@
-import DID from '@arcblock/ux/lib/DID';
-import RelativeTime from '@arcblock/ux/lib/RelativeTime';
-import WalletOSIcon from '@arcblock/ux/lib/WalletOSIcon';
 import { Box, Chip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import type { Theme } from '@mui/material';
 import noop from 'lodash/noop';
 
+import RelativeTime from '../../RelativeTime';
+import WalletOSIcon from '../../WalletOSIcon';
+import { DID } from '../../DID';
 import Avatar from '../../Avatar';
 import { getSourceProvider } from '../libs/utils';
 

package/src/SessionUser/components/session-user-item.tsx

@@ -1,11 +1,10 @@
-import { forwardRef } from 'react';
 import { Box, type BoxProps, IconButton, Tooltip, Typography, useTheme } from '@mui/material';
 import { Icon } from '@iconify/react';
 import LensIcon from '@iconify-icons/material-symbols/lens';
 
 import WalletOSIcon from '../../WalletOSIcon';
 import Avatar from '../../Avatar';
-import DID from '../../DID';
+import { DID } from '../../DID';
 import { getSourceProvider } from '../libs/utils';
 import { Session } from '../../type';
 
@@ -15,81 +14,80 @@ export interface SessionUserItemProps extends BoxProps {
   active?: false | true;
 }
 
-const SessionUserItem = forwardRef<HTMLDivElement, SessionUserItemProps>(
-  ({ sessionItem, statusContent = null, active = false, ...rest }, ref) => {
-    const { palette } = useTheme();
-    const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
+function SessionUserItem({
+  ref,
+  sessionItem,
+  statusContent = null,
+  active = false,
+  ...rest
+}: SessionUserItemProps & {
+  ref?: React.Ref<unknown>;
+}) {
+  const { palette } = useTheme();
+  const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
 
-    return (
+  return (
+    <Box
+      {...rest}
+      ref={ref}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        py: 0.75,
+        px: 1,
+        width: '100%',
+        ...rest?.sx,
+      }}>
       <Box
-        {...rest}
-        ref={ref}
         sx={{
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'space-between',
-          py: 0.75,
-          px: 1,
-          width: '100%',
-          ...rest?.sx,
+          gap: 0.5,
+          overflow: 'hidden',
+          '& .did-address-avatar': {
+            display: 'none !important',
+          },
         }}>
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 0.5,
-            overflow: 'hidden',
-            '& .did-address-avatar': {
-              display: 'none !important',
-            },
-          }}>
-          <Box sx={{ mr: 0.5, fontSize: 0 }}>
-            <Avatar did={sessionItem.userDid} size={36} />
-          </Box>
-          <WalletOSIcon
-            color={palette.text.secondary}
-            loading={sessionItem.__isDefault}
-            provider={sessionItem?.extra?.provider}
-            walletOS={sessionItem?.extra?.walletOS}
-          />
-          {isRawWalletAccount ? (
-            <DID
-              did={sessionItem.userDid}
-              copyable={false}
-              size={14}
-              responsive={false}
-              compact
-              sx={{ lineHeight: 1 }}
-            />
-          ) : (
-            sessionItem.user.email && (
-              <Tooltip
-                title={sessionItem.user.email}
-                sx={{
-                  zIndex: 1600,
-                }}
-                placement="top">
-                <Typography
-                  sx={{
-                    fontSize: 14,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  }}>
-                  {sessionItem.user.email}
-                </Typography>
-              </Tooltip>
-            )
-          )}
+        <Box sx={{ mr: 0.5, fontSize: 0 }}>
+          <Avatar did={sessionItem.userDid} size={36} />
         </Box>
-        {statusContent ||
-          (active && (
-            <IconButton size="small" disableRipple>
-              <Icon icon={LensIcon} fontSize={6} color={palette.success.main} />
-            </IconButton>
-          ))}
+        <WalletOSIcon
+          color={palette.text.secondary}
+          loading={sessionItem.__isDefault}
+          provider={sessionItem?.extra?.provider}
+          walletOS={sessionItem?.extra?.walletOS}
+        />
+        {isRawWalletAccount ? (
+          <DID did={sessionItem.userDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
+        ) : (
+          sessionItem.user.email && (
+            <Tooltip
+              title={sessionItem.user.email}
+              sx={{
+                zIndex: 1600,
+              }}
+              placement="top">
+              <Typography
+                sx={{
+                  fontSize: 14,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}>
+                {sessionItem.user.email}
+              </Typography>
+            </Tooltip>
+          )
+        )}
       </Box>
-    );
-  }
-);
+      {statusContent ||
+        (active && (
+          <IconButton size="small" disableRipple>
+            <Icon icon={LensIcon} fontSize={6} color={palette.success.main} />
+          </IconButton>
+        ))}
+    </Box>
+  );
+}
 
 export default SessionUserItem;

package/src/SessionUser/components/session-user-switch.tsx

@@ -106,6 +106,7 @@ export default function SessionUserSwitch({
     return (
       <SessionUserItem
         sessionItem={currentSession}
+        // @ts-expect-error
         statusContent={<Icon icon={SwapHorizRoundedIcon} color={palette.text.hint} />}
         sx={{
           borderRadius: 1,
@@ -219,7 +220,14 @@ export default function SessionUserSwitch({
                     }}
                     onClick={handleAddAccount}
                     data-cy="sessionManager-switch-trigger">
-                    <Box component={Icon} icon={AddCircleOutlineRoundedIcon} fontSize={20} sx={{ mr: 0.5 }} />
+                    <Box
+                      component={Icon}
+                      icon={AddCircleOutlineRoundedIcon}
+                      sx={{
+                        fontSize: 20,
+                        mr: 0.5,
+                      }}
+                    />
                     {t('addAnotherAccount')}
                   </MenuItem>
                 </MenuList>

package/src/SessionUser/components/un-login.tsx

@@ -113,7 +113,14 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
         onClick={_onLogin}
         aria-label="Login button">
         {isFirstLoading ? (
-          <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
+          <Box
+            sx={{
+              width: size,
+              height: size,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
             <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
           </Box>
         ) : (

package/src/SharedBridge/index.tsx

@@ -1,131 +1,126 @@
 import { Box } from '@mui/material';
 import type { SxProps } from '@mui/material';
-import { forwardRef, memo, useEffect, useId, useImperativeHandle, useRef } from 'react';
+import { memo, useEffect, useId, useImperativeHandle, useRef } from 'react';
 import { withQuery } from 'ufo';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
 
 import { mergeSx } from '../Util/style';
 import { callIframe, getCallbackAction } from '../Util/iframe';
-import { Locale } from '../type';
 
-const SharedBridge = forwardRef(
-  (
-    {
-      src,
-      onClick,
-      onLoad = noop,
-      sx,
-      locale = 'en',
-      ...rest
-    }: {
-      src: string;
-      onClick: (data: { action: string; value: boolean; visitorId?: string; error?: Error }) => void;
-      onLoad?: () => void;
-      sx?: SxProps;
-      locale?: Locale;
+function SharedBridge({
+  ref,
+  src,
+  onClick,
+  onLoad = noop,
+  sx,
+  ...rest
+}: {
+  src: string;
+  onClick: (data: { action: string; value: boolean; visitorId?: string; error?: Error }) => void;
+  onLoad?: () => void;
+  sx?: SxProps;
+} & {
+  ref?: React.Ref<unknown>;
+}) {
+  const targetIframeRef = useRef<HTMLIFrameElement>(null);
+  const refId = useId();
+  const dataId = `shared-bridge_${refId}`;
+  const currentState = useReactive<{
+    hasInited?: boolean;
+    open: boolean;
+    hasStorageAccess: boolean;
+    origin: string;
+    host: string;
+    containerEl: HTMLDivElement | null;
+  }>({
+    hasInited: undefined,
+    open: false,
+    hasStorageAccess: false,
+    containerEl: null,
+    get origin() {
+      try {
+        return new URL(src).origin;
+      } catch (error) {
+        return src;
+      }
     },
-    ref
-  ) => {
-    const targetIframeRef = useRef<HTMLIFrameElement>(null);
-    const refId = useId();
-    const dataId = `shared-bridge_${refId}`;
-    const currentState = useReactive<{
-      hasInited?: boolean;
-      open: boolean;
-      hasStorageAccess: boolean;
-      origin: string;
-      host: string;
-      containerEl: HTMLDivElement | null;
-    }>({
-      hasInited: undefined,
-      open: false,
-      hasStorageAccess: false,
-      containerEl: null,
-      get origin() {
-        try {
-          return new URL(src).origin;
-        } catch (error) {
-          return src;
-        }
-      },
-      get host() {
-        try {
-          return new URL(src).host;
-        } catch (error) {
-          return src;
-        }
-      },
-    });
-
-    useEffect(() => {
-      async function handleMessage(event: MessageEvent) {
-        const { data } = event;
-        if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
-          currentState.open = false;
+    get host() {
+      try {
+        return new URL(src).host;
+      } catch (error) {
+        return src;
+      }
+    },
+  });
 
-          if (!data.value) {
-            onClick(data);
-            return;
-          }
+  useEffect(() => {
+    async function handleMessage(event: MessageEvent) {
+      const { data } = event;
+      if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
+        currentState.open = false;
 
-          const { value: visitorId } = await callIframe(targetIframeRef.current as HTMLIFrameElement, 'getVisitorId');
-          onClick({ ...data, visitorId });
-        } else if (data.action === getCallbackAction(dataId, 'preRequestStorageAccess')) {
-          currentState.open = true;
+        if (!data.value) {
+          onClick(data);
+          return;
         }
+
+        const { value: visitorId } = await callIframe(targetIframeRef.current as HTMLIFrameElement, 'getVisitorId');
+        onClick({ ...data, visitorId });
+      } else if (data.action === getCallbackAction(dataId, 'preRequestStorageAccess')) {
+        currentState.open = true;
       }
+    }
 
-      window.addEventListener('message', handleMessage);
-      return () => {
-        window.removeEventListener('message', handleMessage);
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [onClick, dataId, targetIframeRef?.current]);
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onClick, dataId, targetIframeRef?.current]);
 
-    const handleLoad = useMemoizedFn(() => {
-      callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
-        currentState.hasStorageAccess = value;
-        currentState.hasInited = true;
-      });
-      // HACK: 如果目标 bridge 1s 内没有初始化，则认为目标 bridge 不兼容，不进行后续内容的加载
-      setTimeout(() => {
-        if (currentState.hasInited === undefined) {
-          currentState.hasInited = false;
-        }
-      }, 1000);
-      onLoad();
+  const handleLoad = useMemoizedFn(() => {
+    callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
+      currentState.hasStorageAccess = value;
+      currentState.hasInited = true;
     });
+    // HACK: 如果目标 bridge 1s 内没有初始化，则认为目标 bridge 不兼容，不进行后续内容的加载
+    setTimeout(() => {
+      if (currentState.hasInited === undefined) {
+        currentState.hasInited = false;
+      }
+    }, 1000);
+    onLoad();
+  });
 
-    useImperativeHandle(ref, () => ({
-      callIframe(action: string) {
-        return callIframe(targetIframeRef.current as HTMLIFrameElement, action);
-      },
-    }));
-    return (
-      <Box
-        {...rest}
-        component="iframe"
-        ref={targetIframeRef}
-        onLoad={handleLoad}
-        data-id={dataId}
-        src={withQuery(src, { id: dataId })}
-        sx={mergeSx(
-          {
-            border: 0,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            cursor: 'pointer',
-            backgroundColor: 'transparent',
-          },
-          sx
-        )}
-      />
-    );
-  }
-);
+  useImperativeHandle(ref, () => ({
+    callIframe(action: string) {
+      return callIframe(targetIframeRef.current as HTMLIFrameElement, action);
+    },
+  }));
+  return (
+    <Box
+      {...rest}
+      component="iframe"
+      ref={targetIframeRef}
+      onLoad={handleLoad}
+      data-id={dataId}
+      src={withQuery(src, { id: dataId })}
+      sx={mergeSx(
+        {
+          border: 0,
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          cursor: 'pointer',
+          backgroundColor: 'transparent',
+        },
+        sx
+      )}
+    />
+  );
+}
 
 export default memo(SharedBridge);

package/src/Sparkline/Sparkline.stories.jsx

@@ -0,0 +1,13 @@
+export { default as Basic } from './demo/basic';
+
+export default {
+  title: 'Data-Display/Sparkline',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'Line Graph',
+      },
+    },
+  },
+};