@blocklet/ui-react 2.13.70 → 3.0.1

package/src/Dashboard/Dashboard.stories.jsx

@@ -0,0 +1,20 @@
+import Basic from './demo/basic';
+
+export default {
+  title: 'Blocklet-UI-React/Dashboard',
+
+  parameters: {
+    layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1504%3A5211',
+    },
+  },
+};
+
+Basic.argTypes = {
+  userRole: { control: 'select', options: [null, 'owner', 'developer'] },
+};
+Basic.storyName = 'Dashboard';
+
+export { Basic };

package/src/Dashboard/index.jsx

@@ -1,7 +1,7 @@
 import 'iconify-icon';
 
 /* eslint-disable no-shadow */
-import { useMemo, useLayoutEffect, useContext } from 'react';
+import { useMemo, useLayoutEffect, use } from 'react';
 import PropTypes from 'prop-types';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -17,19 +17,25 @@ import { useWalletHiddenTopbar } from '../common/wallet-hidden-topbar';
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
  */
-// eslint-disable-next-line no-shadow
 function Dashboard({
-  meta,
-  fallbackUrl,
-  invalidPathFallback,
-  headerAddons,
-  sessionManagerProps,
-  links,
-  showDomainWarningDialog,
+  meta = {},
+  fallbackUrl = publicPath,
+  invalidPathFallback = null,
+  headerAddons = undefined,
+  sessionManagerProps = {
+    showRole: true,
+    // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
+    onLogout: () => {
+      // 这里是安全的
+      window.location.href = publicPath;
+    },
+  },
+  links = [],
+  showDomainWarningDialog = true,
   ...rest
 }) {
   useWalletHiddenTopbar();
-  const sessionCtx = useContext(SessionContext);
+  const sessionCtx = use(SessionContext);
   const user = sessionCtx?.session?.user;
   const userRole = user?.role;
   const { locale } = useLocaleContext() || {};
@@ -156,21 +162,4 @@ Dashboard.propTypes = {
   showDomainWarningDialog: PropTypes.bool,
 };
 
-Dashboard.defaultProps = {
-  meta: {},
-  fallbackUrl: publicPath,
-  invalidPathFallback: null,
-  headerAddons: undefined,
-  sessionManagerProps: {
-    showRole: true,
-    // dashboard 默认退出登录行为: 跳转到 (root) blocklet 首页
-    onLogout: () => {
-      // 这里是安全的
-      window.location.href = publicPath;
-    },
-  },
-  links: [],
-  showDomainWarningDialog: true,
-};
-
 export default Dashboard;

package/src/Footer/Footer.stories.jsx

@@ -0,0 +1,32 @@
+import Brand from './demo/brand';
+import Links from './demo/links';
+import SocialMediaIcons from './demo/social-media-icons';
+import Copyright from './demo/copyright';
+import Footer from './demo/footer';
+import ArcblockSite from './demo/arcblock-site';
+
+export default {
+  title: 'Blocklet-UI-React/Footer',
+
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Used to render a page footer for Blocklet based on Blocklet runtime information. It requires a blocklet environment to work properly.',
+      },
+    },
+  },
+};
+
+Footer.argTypes = {
+  layout: { control: 'select', options: ['auto', 'standard', 'plain'] },
+  emptyNavData: { control: 'boolean', defaultValue: false },
+  overrideTheme: { control: 'boolean', defaultValue: false },
+};
+
+ArcblockSite.argTypes = {
+  locale: { control: 'select', options: ['en', 'zh'] },
+};
+
+export { Brand, Links, SocialMediaIcons, Copyright, Footer, ArcblockSite };

package/src/Footer/brand.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@arcblock/ux/lib/Theme';
 import { Box } from '@mui/material';
 
-export default function Brand({ name, logo, description, ...rest }) {
+export default function Brand({ name = '', logo = '', description = '', ...rest }) {
   if (!name && !logo && !description) {
     return null;
   }
@@ -31,12 +31,6 @@ Brand.propTypes = {
   description: PropTypes.string,
 };
 
-Brand.defaultProps = {
-  name: '',
-  logo: '',
-  description: '',
-};
-
 const Root = styled('div')`
   display: flex;
   flex-direction: column;

package/src/Footer/copyright.jsx

@@ -1,7 +1,7 @@
 import { styled } from '@arcblock/ux/lib/Theme';
 import PropTypes from 'prop-types';
 
-export default function Copyright({ owner, year, ...rest }) {
+export default function Copyright({ owner = 'ArcBlock', year = `${new Date().getFullYear()}`, ...rest }) {
   return (
     <Root {...rest}>
       Copyright © {year} {owner}
@@ -14,11 +14,6 @@ Copyright.propTypes = {
   year: PropTypes.string,
 };
 
-Copyright.defaultProps = {
-  owner: 'ArcBlock',
-  year: `${new Date().getFullYear()}`,
-};
-
 const Root = styled('p')`
   display: flex;
   align-items: center;

package/src/Footer/index.jsx

@@ -16,7 +16,7 @@ import withHideWhenEmbed from '../libs/with-hide-when-embed';
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
-function Footer({ meta, theme: themeOverrides, ...rest }) {
+function Footer({ meta = {}, theme: themeOverrides = null, ...rest }) {
   const { locale } = useLocaleContext() || {};
   const parentTheme = useTheme();
   const formattedBlocklet = useMemo(() => {
@@ -82,11 +82,6 @@ Footer.propTypes = {
   theme: PropTypes.object,
 };
 
-Footer.defaultProps = {
-  meta: {},
-  theme: null,
-};
-
 const StyledInternalFooter = styled(InternalFooter)`
   ${({ $bordered, theme }) => `border-top: 1px solid ${$bordered && theme.palette.divider};`}
   color: ${({ theme }) => theme.palette.text.secondary};

package/src/Footer/internal-footer.jsx

@@ -30,7 +30,15 @@ const layoutsKeyByName = layouts.reduce((acc, cur) => ({ ...acc, [cur.name]: cur
  * 通用的内部 footer 组件, 定义并渲染常见的几种 footer 元素: brand/navigation/social medial 等
  */
 function InternalFooter(props) {
-  const { brand, navigation, socialMedia, copyright, links, layout, ...rest } = props;
+  const {
+    brand = null,
+    navigation = null,
+    socialMedia = null,
+    copyright = null,
+    links = null,
+    layout = 'auto',
+    ...rest
+  } = props;
   const renderBrand = () => {
     return brand ? <Brand {...brand} /> : null;
   };
@@ -70,14 +78,25 @@ function InternalFooter(props) {
   }
 
   return (
-    <Box position="relative" {...rest} className={clsx('blocklet__footer', rest.className)}>
+    <Box
+      {...rest}
+      className={clsx('blocklet__footer', rest.className)}
+      sx={[
+        {
+          position: 'relative',
+        },
+        ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+      ]}>
       <LayoutComponent elements={elements} data={props} />
       <Box
-        position="absolute"
-        right={16}
-        bottom={0}
-        fontSize={12}
-        sx={{ color: 'transparent', '::selection': { background: '#000', color: '#fff' } }}>
+        sx={{
+          position: 'absolute',
+          right: 16,
+          bottom: 0,
+          fontSize: 12,
+          color: 'transparent',
+          '::selection': { background: '#000', color: '#fff' },
+        }}>
         {window?.blocklet?.version}
       </Box>
     </Box>
@@ -117,13 +136,4 @@ InternalFooter.propTypes = {
   layout: PropTypes.oneOf(['auto', 'standard', 'plain']),
 };
 
-InternalFooter.defaultProps = {
-  brand: null,
-  navigation: null,
-  copyright: null,
-  socialMedia: null,
-  links: null,
-  layout: 'auto',
-};
-
 export default InternalFooter;

package/src/Footer/layout/row.jsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
+import { Box } from '@mui/material';
 import { styled } from '@arcblock/ux/lib/Theme';
 import clsx from 'clsx';
 
-export default function Row({ children, autoCenter, ...rest }) {
+export default function Row({ children = null, autoCenter = false, ...rest }) {
   if (!children) {
     return null;
   }
@@ -19,11 +19,6 @@ Row.propTypes = {
   autoCenter: PropTypes.bool,
 };
 
-Row.defaultProps = {
-  children: null,
-  autoCenter: false,
-};
-
 const RowRoot = styled(Box)`
   display: flex;
   justify-content: space-between;

package/src/Footer/layout/standard.jsx

@@ -28,7 +28,12 @@ function StandardLayout({ elements, data, className, ...rest }) {
             pb: 3,
           }}>
           <Box>{elements.brand}</Box>
-          <Box lineHeight={1}>{elements.socialMedia}</Box>
+          <Box
+            sx={{
+              lineHeight: 1,
+            }}>
+            {elements.socialMedia}
+          </Box>
         </Box>
         <Box sx={({ palette }) => ({ mb: 3, borderTop: { xs: `1px solid ${palette.grey[200]}`, md: 0 } })}>
           {elements.navigation}
@@ -48,7 +53,12 @@ function StandardLayout({ elements, data, className, ...rest }) {
           pb: 3,
         }}>
         <Box>{elements.brand}</Box>
-        <Box lineHeight={1}>{elements.socialMedia}</Box>
+        <Box
+          sx={{
+            lineHeight: 1,
+          }}>
+          {elements.socialMedia}
+        </Box>
       </Container>
     );
   }

package/src/Footer/links.jsx

@@ -6,7 +6,7 @@ import isInteger from 'lodash/isInteger';
 import isString from 'lodash/isString';
 import { styled } from '@arcblock/ux/lib/Theme';
 import clsx from 'clsx';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 import Icon from '../Icon';
 import useMobile from '../hooks/use-mobile';
 import { splitNavColumns } from '../utils';
@@ -14,7 +14,7 @@ import { splitNavColumns } from '../utils';
 /**
  * footer 中的 links (支持分组, 最多支持 2 级)
  */
-export default function Links({ links, flowLayout, columns, ...rest }) {
+export default function Links({ links = [], flowLayout = false, columns, ...rest }) {
   const [activeIndex, setActiveIndex] = useState(-1);
   const isMobile = useMobile({ key: 'md' });
   // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
@@ -162,11 +162,6 @@ Links.propTypes = {
   columns: PropTypes.number,
 };
 
-Links.defaultProps = {
-  links: [],
-  flowLayout: false,
-};
-
 const Root = styled('div')`
   overflow: hidden;
   color: ${({ theme }) => theme.palette.text.secondary};

package/src/Footer/social-media.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@arcblock/ux/lib/Theme';
 import Icon from '../Icon';
 
-export default function SocialMedia({ items, ...rest }) {
+export default function SocialMedia({ items = null, ...rest }) {
   if (!items?.length) {
     return null;
   }
@@ -35,10 +35,6 @@ SocialMedia.propTypes = {
   ),
 };
 
-SocialMedia.defaultProps = {
-  items: null,
-};
-
 const Root = styled('div')`
   display: inline-flex;
   flex-wrap: wrap;

package/src/Header/Header.stories.jsx

@@ -0,0 +1,30 @@
+import Basic from './demo/basic';
+import WithEnableConnectEnableLocale from './demo/with-enable-connect-enable-locale';
+import AddonsCustomization from './demo/addons-customization';
+
+export default {
+  title: 'Blocklet-UI-React/Header',
+
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Used to render a page header for Blocklet based on Blocklet runtime information. It requires a blocklet environment to work properly.',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1504%3A4630',
+    },
+  },
+  argTypes: {
+    maxWidth: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', false] },
+  },
+};
+
+AddonsCustomization.argTypes = {
+  overrideTheme: { control: 'boolean', defaultValue: false },
+};
+
+export { Basic, WithEnableConnectEnableLocale, AddonsCustomization };

package/src/Header/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, type JSX } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';

package/src/Icon/Icon.stories.jsx

@@ -0,0 +1,12 @@
+export { default as Icon } from './demo/basic';
+
+export default {
+  title: 'Blocklet-UI-React/Icon',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A wrapper for Material UI Avatar component that supports iconify icon.',
+      },
+    },
+  },
+};

package/src/Notifications/Snackbar.tsx

@@ -1,13 +1,10 @@
-import { forwardRef, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { amber, green, common } from '@mui/material/colors';
-import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
+import { Box, IconButton, Typography } from '@mui/material';
 import { useCreation } from 'ahooks';
-import CloseIcon from '@mui/icons-material/Close';
+import { Close as CloseIcon } from '@mui/icons-material';
 import { Icon, IconifyIcon } from '@iconify/react';
 import CheckIcon from '@iconify-icons/tabler/circle-check';
 import WarningIcon from '@iconify-icons/tabler/exclamation-circle';
@@ -24,18 +21,6 @@ import { isIncludeActivity, toClickableSpan, sanitize } from './utils';
 type BreakpointType = 'xl' | 'lg' | 'md' | 'sm';
 
 // Define types for notification component
-interface NotificationProps {
-  keyId: number;
-  notification: {
-    severity?: string;
-    title?: string;
-    description?: string;
-    activity?: any;
-    actorInfo?: any;
-  };
-  viewAllUrl: string;
-  content?: React.ReactNode;
-}
 
 const variants: Record<string, IconifyIcon> = {
   normal: InfoIcon,
@@ -151,118 +136,126 @@ const ClickableDiv = styled.div`
   }
 `;
 
-const NotificationComponent = forwardRef<HTMLDivElement, NotificationProps>(
-  ({ keyId: key, notification = {}, viewAllUrl, content }, ref) => {
-    const breakpoint = useWidth();
-    const [description, setDescription] = useState(notification.description || '');
-    const icon = variants[notification.severity || ''];
-
-    const { closeSnackbar } = useSnackbar();
-    const onClickDismiss = () => closeSnackbar(key);
-
-    useEffect(() => {
-      toClickableSpan(notification.description || '', 'en').then((res) => {
-        setDescription(res);
-      });
-    }, [notification.description]);
-
-    const onGoNotification = (e: any) => {
-      e.stopPropagation();
-      closeSnackbar(key);
-
-      // 已确认 viewAllUrl都是本地的相对地址
-      if (!e?.customPreventRedirect) {
-        window.open(viewAllUrl, '_blank');
-      }
-    };
-
-    const includeActivity = useCreation(() => {
-      return isIncludeActivity(notification);
-    }, [notification]);
-    const activity = useCreation(() => {
-      return notification?.activity;
-    }, [notification]);
-
-    const activityMeta = useCreation(() => {
-      if (!activity || activity.type === 'tips') {
-        return null;
-      }
-
-      return activity?.meta;
-    }, [activity]);
+interface NotificationComponentProps {
+  viewAllUrl: string;
+  keyId: number;
+  notification: {
+    severity?: string;
+    title?: string;
+    description?: string;
+    activity?: any;
+    actorInfo?: any;
+  };
+  // eslint-disable-next-line react/require-default-props
+  content?: React.ReactNode;
+}
 
-    const activityTitle = useActivityTitle({
-      activity,
-      users: [notification?.actorInfo],
-      actors: [notification?.activity?.actor],
-      extra: {
-        linkColor: common.white,
-      },
+export default function NotificationComponent({
+  ref,
+  keyId: key,
+  notification = {},
+  viewAllUrl,
+  content = null,
+}: NotificationComponentProps & {
+  ref?: React.Ref<unknown>;
+}) {
+  const breakpoint = useWidth();
+  const [description, setDescription] = useState(notification.description || '');
+  const icon = variants[notification.severity || ''];
+
+  const { closeSnackbar } = useSnackbar();
+  const onClickDismiss = () => closeSnackbar(key);
+
+  useEffect(() => {
+    toClickableSpan(notification.description || '', 'en').then((res) => {
+      setDescription(res);
     });
+  }, [notification.description]);
 
-    return (
-      <StyledSnackbarContent ref={ref} severity={notification.severity} breakpoint={breakpoint}>
-        <MessageDiv>
-          {icon ? <Icon icon={icon} fontSize={24} /> : null}
-          <ClickableDiv onClick={onGoNotification} style={{ width: 'calc(100% - 30px)' }}>
-            <Box>
-              {includeActivity ? (
-                <>
-                  <span className="title">{activityTitle}</span>
-                  {activityMeta ? (
-                    <Typography
-                      variant="subtitle2"
-                      fontSize={16}
-                      component="p"
-                      sx={{
-                        display: '-webkit-box',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        WebkitLineClamp: 3,
-                        WebkitBoxOrient: 'vertical',
-                        color: common.white,
-                        lineHeight: 1.2,
-                      }}>
-                      {activityMeta?.content}
-                    </Typography>
-                  ) : null}
-                </>
-              ) : (
-                <>
-                  <span className="title">{notification.title}</span>
-                  {content || (
-                    <Typography
-                      component="span"
-                      className="desc"
-                      dangerouslySetInnerHTML={{ __html: sanitize(description) }}
-                    />
-                  )}
-                </>
-              )}
-            </Box>
-          </ClickableDiv>
-        </MessageDiv>
-        <ActionDiv>
-          <IconButton key="close" aria-label="close" color="inherit" onClick={onClickDismiss} size="large">
-            <CloseIconStyled />
-          </IconButton>
-        </ActionDiv>
-      </StyledSnackbarContent>
-    );
-  }
-);
+  const onGoNotification = (e: any) => {
+    e.stopPropagation();
+    closeSnackbar(key);
 
-NotificationComponent.displayName = 'NotificationComponent';
+    // 已确认 viewAllUrl都是本地的相对地址
+    if (!e?.customPreventRedirect) {
+      window.open(viewAllUrl, '_blank');
+    }
+  };
 
-NotificationComponent.propTypes = {
-  viewAllUrl: PropTypes.string.isRequired,
-  keyId: PropTypes.number.isRequired,
-  notification: PropTypes.object.isRequired,
-  content: PropTypes.node,
-};
+  const includeActivity = useCreation(() => {
+    return isIncludeActivity(notification);
+  }, [notification]);
+  const activity = useCreation(() => {
+    return notification?.activity;
+  }, [notification]);
 
-NotificationComponent.defaultProps = {
-  content: null,
-};
+  const activityMeta = useCreation(() => {
+    if (!activity || activity.type === 'tips') {
+      return null;
+    }
 
-export default NotificationComponent;
+    return activity?.meta;
+  }, [activity]);
+
+  const activityTitle = useActivityTitle({
+    activity,
+    users: [notification?.actorInfo],
+    actors: [notification?.activity?.actor],
+    extra: {
+      linkColor: common.white,
+    },
+  });
+
+  return (
+    <StyledSnackbarContent
+      ref={ref as React.Ref<HTMLDivElement>}
+      severity={notification.severity}
+      breakpoint={breakpoint}>
+      <MessageDiv>
+        {icon ? <Icon icon={icon} fontSize={24} /> : null}
+        <ClickableDiv onClick={onGoNotification} style={{ width: 'calc(100% - 30px)' }}>
+          <Box>
+            {includeActivity ? (
+              <>
+                <span className="title">{activityTitle}</span>
+                {activityMeta ? (
+                  <Typography
+                    variant="subtitle2"
+                    component="p"
+                    sx={{
+                      fontSize: 16,
+                      display: '-webkit-box',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      WebkitLineClamp: 3,
+                      WebkitBoxOrient: 'vertical',
+                      color: common.white,
+                      lineHeight: 1.2,
+                    }}>
+                    {activityMeta?.content}
+                  </Typography>
+                ) : null}
+              </>
+            ) : (
+              <>
+                <span className="title">{notification.title}</span>
+                {content || (
+                  <Typography
+                    component="span"
+                    className="desc"
+                    dangerouslySetInnerHTML={{ __html: sanitize(description) }}
+                  />
+                )}
+              </>
+            )}
+          </Box>
+        </ClickableDiv>
+      </MessageDiv>
+      <ActionDiv>
+        <IconButton key="close" aria-label="close" color="inherit" onClick={onClickDismiss} size="large">
+          <CloseIconStyled />
+        </IconButton>
+      </ActionDiv>
+    </StyledSnackbarContent>
+  );
+}