@arcblock/ux 2.13.70 → 3.0.0

package/src/Badge/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 colors from '../Colors';
 import { mergeProps } from '../Util';
@@ -46,7 +46,20 @@ const types = {
  * @param {BadgeProps} props
  * @returns {JSX.Element}
  */
-function Badge(props) {
+function Badge(rawProps) {
+  const props = Object.assign({}, rawProps);
+  if (isUndefined(props.type)) {
+    props.type = 'primary';
+  }
+  if (isUndefined(props.content)) {
+    props.content = '';
+  }
+  if (isUndefined(props.className)) {
+    props.className = '';
+  }
+  if (isUndefined(props.style)) {
+    props.style = {};
+  }
   const newProps = mergeProps(props, Badge, ['style']);
   const { type, content, children, style, className, forwardedRef, ...rest } = newProps;
   const styles = Object.assign(types[type] || types.primary, style);
@@ -66,22 +79,13 @@ Badge.propTypes = {
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 };
 
-Badge.defaultProps = {
-  type: 'primary',
-  content: '',
-  className: '',
-  style: '{}',
-};
-
 export default withDeprecated(
-  forwardRef(
-    /**
-     * @param {BadgeProps} props - Badge组件的属性
-     * @param {React.Ref<HTMLSpanElement>} ref - 转发的ref
-     * @returns {JSX.Element}
-     */
-    (props, ref) => <Badge {...props} forwardedRef={ref} />
-  ),
+  /**
+   * @param {BadgeProps} props - Badge组件的属性
+   * @param {React.Ref<HTMLSpanElement>} ref - 转发的ref
+   * @returns {JSX.Element}
+   */
+  ({ ref, ...props }) => <Badge {...props} forwardedRef={ref} />,
   { name: 'Badge', alternative: '@arcblock/ux/lib/Tag' }
 );
 

package/src/Blocklet/Blocklet.stories.jsx

@@ -0,0 +1,21 @@
+import Basic from './demo/basic';
+
+export default {
+  title: 'ArcBlock/Blocklet',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'Blocklet component is used to display Blocklet Information',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1342%3A3524',
+    },
+  },
+};
+
+Basic.storyName = 'Blocklet';
+
+export { Basic };

package/src/Blocklet/blocklet.jsx

@@ -1,9 +1,7 @@
 /* eslint-disable react/no-danger */
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import CircularProgress from '@mui/material/CircularProgress';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { CircularProgress, Typography, useMediaQuery } from '@mui/material';
 
 import Avatar from '../Avatar';
 import Button from '../Button';
@@ -147,18 +145,18 @@ const Div = styled('div')`
  * @returns {JSX.Element}
  */
 export default function BlockletStore({
-  title,
-  did,
-  description,
-  cover,
-  version,
-  button,
-  buttonText,
-  buttonDisabled,
-  buttonLoading,
-  onButtonClick,
-  onMainClick,
-  className,
+  title = '',
+  did = null,
+  description = '',
+  cover = null,
+  version = null,
+  button = null,
+  buttonText = 'Install',
+  buttonDisabled = false,
+  buttonLoading = false,
+  onButtonClick = null,
+  onMainClick = null,
+  className = null,
   ...rest
 }) {
   const wrapHandler =
@@ -276,18 +274,3 @@ BlockletStore.propTypes = {
   onMainClick: PropTypes.func,
   className: PropTypes.string,
 };
-
-BlockletStore.defaultProps = {
-  title: '',
-  description: '',
-  cover: null,
-  did: null,
-  buttonText: 'Install',
-  buttonDisabled: false,
-  buttonLoading: false,
-  button: null,
-  version: null,
-  onButtonClick: null,
-  onMainClick: null,
-  className: null,
-};

package/src/BlockletContext/index.tsx

@@ -1,5 +1,5 @@
 import { useMemoizedFn, useAsyncEffect } from 'ahooks';
-import { createContext, useContext, useState } from 'react';
+import { createContext, use, useState } from 'react';
 import type { Blocklet } from '../type';
 import { getBlockletData, getFederatedEnabled, getMaster } from '../Util/federated';
 
@@ -65,7 +65,7 @@ function BlockletProvider({
 }
 
 function useBlockletContext() {
-  const { blocklet, masterBlocklet } = useContext(BlockletContext);
+  const { blocklet, masterBlocklet } = use(BlockletContext);
   return { blocklet, masterBlocklet };
 }
 

package/src/BlockletNFT/BlockletNFT.stories.jsx

@@ -0,0 +1,21 @@
+import Basic from './demo/basic';
+
+export default {
+  title: 'ArcBlock/BlockletNFT',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'BlockletNFT component is used to display Blocklet NFT Information',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1342%3A3524',
+    },
+  },
+};
+
+Basic.storyName = 'BlockletNFT';
+
+export { Basic };

package/src/BlockletNFT/index.jsx

@@ -1,9 +1,6 @@
 import { useRef } from 'react';
 import PropTypes from 'prop-types';
-import Portal from '@mui/material/Portal';
-import Typography from '@mui/material/Typography';
-import CircularProgress from '@mui/material/CircularProgress';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { Portal, Typography, CircularProgress, useMediaQuery } from '@mui/material';
 
 import Avatar from '../Avatar';
 import Icon from '../Icon';
@@ -217,7 +214,6 @@ BlockletIcon.propTypes = {
  *  size?: 'xs' | 'sm' | 'md' | 'auto';
  *  onButtonClick?: Function;
  *  onMainClick?: Function;
- *  onTagClick?: Function;
  *  className?: string;
  *  scaleClickZone?: number;
  * } & import('react').ComponentPropsWithoutRef<"div"> } BlockletNFTProps
@@ -231,20 +227,19 @@ BlockletIcon.propTypes = {
 export default function BlockletNFT({
   title,
   did,
-  description,
-  cover,
-  size,
-  addons,
-  button,
-  buttonText,
-  buttonDisabled,
-  buttonLoading,
-  isStickyButton,
-  onButtonClick,
-  onMainClick,
-  onTagClick,
-  className,
-  scaleClickZone,
+  description = null,
+  cover = null,
+  size = 'auto',
+  addons = [],
+  button = null,
+  buttonText = 'Install',
+  buttonDisabled = false,
+  buttonLoading = false,
+  isStickyButton = false,
+  onButtonClick = null,
+  onMainClick = null,
+  className = null,
+  scaleClickZone = 1.5,
   ...rest
 }) {
   const wrapHandler =
@@ -378,25 +373,6 @@ BlockletNFT.propTypes = {
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'auto']),
   onButtonClick: PropTypes.func,
   onMainClick: PropTypes.func,
-  onTagClick: PropTypes.func,
   className: PropTypes.string,
   scaleClickZone: PropTypes.number,
 };
-
-BlockletNFT.defaultProps = {
-  description: null,
-  cover: null,
-  did: null,
-  isStickyButton: false,
-  buttonText: 'Install',
-  buttonDisabled: false,
-  buttonLoading: false,
-  button: null,
-  size: 'auto',
-  addons: [],
-  onButtonClick: null,
-  onMainClick: null,
-  onTagClick: null,
-  className: null,
-  scaleClickZone: 1.5,
-};

package/src/BlockletV2/Blocklet.stories.jsx

@@ -0,0 +1,34 @@
+import { Box } from '@mui/material';
+import { ThemeProvider } from '../Theme';
+import { ThemeModeToggle } from '../Config';
+import Basic from './demo/basic';
+
+export default {
+  title: 'ArcBlock/BlockletV2',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'Blocklet component is used to display Blocklet Information version 2',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/PwflHZjO9haj9tVYNhY6ft/Store?node-id=42-291&node-type=canvas&t=etFp6EEIoArJeDjp-0',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider prefer="system">
+        <Box sx={{ py: 1 }}>
+          <ThemeModeToggle />
+        </Box>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+Basic.storyName = 'BlockletV2';
+
+export { Basic };

package/src/BlockletV2/blocklet.tsx

@@ -2,8 +2,8 @@ import React, { isValidElement } from 'react';
 
 import Download from '@iconify-icons/tabler/cloud-download';
 import { Icon } from '@iconify/react';
-import VerifiedIcon from '@mui/icons-material/Verified';
-import { Box, Card, CardProps, CircularProgress, Stack, Typography } from '@mui/material';
+import { Verified as VerifiedIcon } from '@mui/icons-material';
+import { Box, Card, CardProps, CircularProgress, Stack, SxProps, Typography } from '@mui/material';
 import Avatar from '../Avatar';
 import Button from '../Button';
 import { useTheme } from '../Theme';
@@ -42,7 +42,7 @@ export interface IBlockletStore extends CardProps {
   }[];
   icons?: {
     key: string;
-    icon: string | React.ReactElement;
+    icon: string | React.ReactElement<any>;
     title: React.ReactNode;
     color?: string;
   }[];
@@ -92,11 +92,21 @@ export default function BlockletStore(props: IBlockletStore) {
     return !!(button || buttonDisabled || buttonLoading);
   });
 
-  const titleProps = isValidElement(title)
+  const titleProps: {
+    children?: React.ReactNode;
+    title?: string;
+    dangerouslySetInnerHTML?: { __html: string };
+    sx?: SxProps;
+  } = isValidElement(title)
     ? { children: title }
     : { title: strippedString(title), dangerouslySetInnerHTML: { __html: title } };
 
-  const descriptionProps = isValidElement(description)
+  const descriptionProps: {
+    children?: React.ReactNode;
+    title?: string;
+    dangerouslySetInnerHTML?: { __html: string };
+    sx?: SxProps;
+  } = isValidElement(description)
     ? { children: description }
     : { title: strippedString(description), dangerouslySetInnerHTML: { __html: description } };
 
@@ -106,23 +116,41 @@ export default function BlockletStore(props: IBlockletStore) {
       onClick={handleMainClick}
       {...rest}
       sx={{ p: { xs: 2, md: 3 }, borderRadius: 1, ...rest.sx }}>
-      <Stack flex={1} direction="row" gap={1} alignItems="center" overflow="hidden" sx={{ '& > *': { flexShrink: 0 } }}>
+      <Stack
+        direction="row"
+        sx={{
+          flex: 1,
+          gap: 1,
+          alignItems: 'center',
+          overflow: 'hidden',
+          '& > *': { flexShrink: 0 },
+        }}>
         <Avatar src={cover} did={did} size={48} variant="rounded" style={{ borderRadius: '8px', overflow: 'hidden' }} />
         <Typography
           className="blocklet-title"
-          fontWeight="fontWeightMedium"
-          sx={{
-            fontSize: 16,
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            cursor: 'default',
-            pl: 0.5,
-            '&&': { flexShrink: 1 },
-          }}
           {...titleProps}
+          sx={[
+            {
+              fontWeight: 'fontWeightMedium',
+              fontSize: 16,
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              cursor: 'default',
+              pl: 0.5,
+              '&&': { flexShrink: 1 },
+            },
+            ...(Array.isArray(titleProps.sx) ? titleProps.sx : [titleProps.sx]),
+          ]}
         />
-        <Box flex={1} display="flex" alignItems="center" justifyContent="flex-start" gap={1}>
+        <Box
+          sx={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            gap: 1,
+          }}>
           {official && (
             <TooltipIcon title={official.tooltip}>
               <VerifiedIcon sx={{ color: official.color || '#D97706', fontSize: official.size || 18 }} />
@@ -153,24 +181,36 @@ export default function BlockletStore(props: IBlockletStore) {
         )}
         {button}
       </Stack>
-      <Stack py={2}>
+      <Stack
+        sx={{
+          py: 2,
+        }}>
         <Typography
           className="blocklet-description"
           variant="body2"
-          color="text.secondary"
-          sx={{
-            display: '-webkit-box',
-            lineClamp: 2,
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
-            cursor: 'default',
-            height: 40,
-          }}
           {...descriptionProps}
+          sx={[
+            {
+              color: 'text.secondary',
+              display: '-webkit-box',
+              lineClamp: 2,
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              cursor: 'default',
+              height: 40,
+            },
+            ...(Array.isArray(descriptionProps.sx) ? descriptionProps.sx : [descriptionProps.sx]),
+          ]}
         />
       </Stack>
-      <Stack direction="row" alignItems="center" gap={2} color="text.secondary">
+      <Stack
+        direction="row"
+        sx={{
+          alignItems: 'center',
+          gap: 2,
+          color: 'text.secondary',
+        }}>
         <IconText icon={<Avatar src={avatar} did={did} size={20} variant="circle" />} maxWidth={200}>
           {author}
         </IconText>

package/src/BlockletV2/components/icon-text.tsx

@@ -19,15 +19,25 @@ export default function IconText({
     (children === 0 || children) && (
       <Stack
         direction="row"
-        alignItems="center"
-        gap={0.5}
-        sx={[{ maxWidth, overflow: 'hidden' }, ...(Array.isArray(sx) ? sx : [sx])]}>
+        sx={[
+          {
+            alignItems: 'center',
+            gap: 0.5,
+          },
+          { maxWidth, overflow: 'hidden' },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}>
         {icon}
         <TooltipIcon title={title || (typeof children === 'string' ? children : '')}>
           <Typography
-            flex={1}
             variant="body2"
-            sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'default' }}>
+            sx={{
+              flex: 1,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              cursor: 'default',
+            }}>
             {children}
           </Typography>
         </TooltipIcon>

package/src/Button/Button.stories.jsx

@@ -0,0 +1,24 @@
+import Button from '.';
+import Basic from './demo/basic';
+
+export default {
+  title: 'Basic/Button',
+  component: Button,
+
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Buttons allow users to initiate an action. They’re typically found in forms, dialog panels, and dialogs.',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=768%3A999',
+    },
+  },
+};
+
+Basic.storyName = 'Button';
+
+export { Basic };

package/src/Button/index.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import Button from '@mui/material/Button';
+import { Button } from '@mui/material';
 import wrap from './wrap';
 
 /** @type {import('./wrap').ButtonComponent} */

package/src/Button/wrap.jsx

@@ -1,9 +1,7 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable func-names */
-import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import isUndefined from 'lodash/isUndefined';
 
-import CircularProgress from '@mui/material/CircularProgress';
+import { CircularProgress } from '@mui/material';
 import colors from '../Colors';
 import { mergeProps } from '../Util';
 
@@ -39,13 +37,26 @@ const extendedColors = {
  * @param {import('@mui/material').ExtendButtonBase<import('@mui/material').ButtonTypeMap<{}, "button">>} BaseComponent
  * @return {ButtonComponent}
  */
-export default function (BaseComponent) {
+export default function wrap(BaseComponent) {
   /**
    *
    * @param {ButtonProps} props
    * @returns
    */
-  function WrappedComponent(props) {
+  function WrappedComponent(rawProps) {
+    const props = Object.assign({}, rawProps);
+    if (isUndefined(props.rounded)) {
+      props.rounded = false;
+    }
+    if (isUndefined(props.size)) {
+      props.size = 'medium';
+    }
+    if (isUndefined(props.forwardedRef)) {
+      props.forwardedRef = null;
+    }
+    if (isUndefined(props.style)) {
+      props.style = {};
+    }
     /**
      * @type {ButtonProps}
      */
@@ -108,12 +119,8 @@ export default function (BaseComponent) {
     rounded: PropTypes.bool,
   };
 
-  WrappedComponent.defaultProps = {
-    rounded: false,
-    size: 'medium',
-    forwardedRef: null,
-    style: {},
+  // eslint-disable-next-line react/prop-types
+  return function WrappedComponentWithRef({ ref, ...props }) {
+    return <WrappedComponent {...props} forwardedRef={ref} />;
   };
-
-  return forwardRef((props, ref) => <WrappedComponent {...props} forwardedRef={ref} />);
 }

package/src/ButtonGroup/index.js

@@ -1,4 +1,4 @@
-import ButtonGroup from '@mui/material/ButtonGroup';
+import { ButtonGroup } from '@mui/material';
 import wrap from '../Button/wrap';
 
 /**

package/src/Center/Center.stories.jsx

@@ -0,0 +1,20 @@
+import Center from '.';
+
+export { default as Basic } from './demo/basic';
+export { default as RelativeParent } from './demo/relative-parent';
+
+export default {
+  title: 'Basic/Center',
+  component: Center,
+
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'The Center component centers its content both vertically and horizontally.',
+      },
+      inlineStories: false,
+      iframeHeight: 600,
+    },
+  },
+};

package/src/ClickToCopy/ClickToCopy.stories.jsx

@@ -0,0 +1,24 @@
+import Basic from './demo/basic';
+import WithComplexChild from './demo/with-complex-child';
+import WithCustomParentFontColor from './demo/with-custom-parent-font-color';
+import CopyButton from './demo/copy-button';
+
+export default {
+  title: 'Basic/ClickToCopy',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'ClickToCopy allows the content that is wrapped in it to be copied with a single click.',
+      },
+    },
+  },
+};
+
+Basic.argTypes = {
+  locale: { control: 'select', options: ['en', 'zh'] },
+  tip: { control: 'text' },
+  unstyled: { control: 'boolean', defaultValue: false },
+};
+
+export { Basic, WithComplexChild, WithCustomParentFontColor, CopyButton };

package/src/ClickToCopy/copy-button.tsx

@@ -1,14 +1,14 @@
-import Tooltip from '@mui/material/Tooltip';
+import type { JSX } from 'react';
+import { Tooltip } from '@mui/material';
 import { green } from '@mui/material/colors';
-import CopyIcon from '@mui/icons-material/ContentCopy';
-import CheckIcon from '@mui/icons-material/Check';
+import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
 import useCopy from './hook';
 import type { Locale } from '../type';
 
 export interface CopyButtonProps extends React.HTMLAttributes<HTMLSpanElement> {
   content?: string;
   locale?: Locale;
-  render?: (props: { copyButton: React.ReactNode; containerRef: React.RefObject<HTMLElement> }) => JSX.Element | null;
+  render?: (props: { copyButton: React.ReactNode; containerRef: React.Ref<unknown> }) => JSX.Element | null;
   showTooltip?: true | false;
 }