@arcblock/ux 2.13.70 → 3.0.1

package/src/ClickToCopy/index.tsx

@@ -1,6 +1,6 @@
 import { useSize } from 'ahooks';
-import Tooltip, { type TooltipProps } from '@mui/material/Tooltip';
-
+import { Tooltip, type TooltipProps } from '@mui/material';
+import isUndefined from 'lodash/isUndefined';
 import { useSnackbar } from 'notistack';
 import useCopy from './hook';
 import Toast, { ToastProvider } from '../Toast';
@@ -36,7 +36,32 @@ export interface ClickToCopyProps extends TooltipProps {
   unstyled?: false | true;
 }
 
-export default function ClickToCopy(props: ClickToCopyProps) {
+export default function ClickToCopy(rawProps: ClickToCopyProps) {
+  const props = Object.assign({}, rawProps);
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.content)) {
+    props.content = '';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.tip)) {
+    props.tip = '';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.copiedTip)) {
+    props.copiedTip = '';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.tipPlacement)) {
+    props.tipPlacement = 'right';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.locale)) {
+    props.locale = 'en';
+  }
+  // eslint-disable-next-line react/prop-types
+  if (isUndefined(props.unstyled)) {
+    props.unstyled = false;
+  }
   const newProps = mergeProps(props, ClickToCopy, ['style']);
   const { children, content, tip, copiedTip, tipPlacement, locale, style, unstyled, ...rest } = newProps;
   const { containerRef, copied, copy, texts } = useCopy({ content, locale });
@@ -69,12 +94,3 @@ export default function ClickToCopy(props: ClickToCopyProps) {
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{contentChild}</>;
 }
-
-ClickToCopy.defaultProps = {
-  content: '',
-  tip: '',
-  copiedTip: '',
-  tipPlacement: 'right',
-  locale: 'en',
-  unstyled: false,
-};

package/src/CodeBlock/CodeBlock.stories.jsx

@@ -0,0 +1,22 @@
+import CodeBlock from '.';
+
+export { default as Protobuf } from './demo/protobuf';
+export { default as Javascript } from './demo/javascript';
+export { default as Json } from './demo/json';
+export { default as SingleLineOfCode } from './demo/single-line-of-code';
+export { default as Typescript } from './demo/typescript';
+export { default as Markdown } from './demo/markdown';
+export { default as lightMode } from './demo/light-mode';
+
+export default {
+  title: 'Data Display/CodeBlock',
+  component: CodeBlock,
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'CodeBlock is used to render an isolated code snippet or block.',
+      },
+    },
+  },
+};

package/src/CodeBlock/index.tsx

@@ -22,8 +22,7 @@ import markdown from 'highlight.js/lib/languages/markdown';
 
 import 'highlight.js/styles/atom-one-dark.css';
 
-import CopyIcon from '@mui/icons-material/FileCopy';
-import CheckIcon from '@mui/icons-material/Check';
+import { FileCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
 import colors from '../Colors';
 import { styled } from '../Theme';
 import LightBox from './LightBox';

package/src/Colors/Colors.stories.jsx

@@ -0,0 +1,211 @@
+/* eslint-disable react/no-array-index-key */
+import PropTypes from 'prop-types';
+import { Box, Button } from '@mui/material';
+import { createTheme, ThemeProvider, styled } from '../Theme';
+import colors from '.';
+
+const colorDescriptions = {
+  primary:
+    "Primary is used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components",
+  secondary:
+    'Secondary is used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.',
+  error: 'Used to represent error, danger, wrong.',
+  warning: 'Used to represent potentially dangerous actions or important messages',
+  info: 'Used to present information to the user that is neutral and not necessarily important',
+  success: 'Used to indicate the successful completion of an action that user triggered.',
+  grey: 'Grey (neutral color) is mainly used in a large part of the text interface, in addition to the background, borders, dividing lines, and other scenes are also very common.',
+  did: 'For DID-related products or components.',
+};
+
+// eslint-disable-next-line no-shadow
+function ColorsViewer({ colors: tmpColors, prefix = '', itemWidth = 240 }) {
+  // 优先展示的一些颜色
+  const keys = ['primary', 'secondary', 'error', 'warning', 'info', 'success'];
+  const colorKeys = keys.concat(Object.keys(tmpColors).filter((key) => !keys.includes(key)));
+  return (
+    <Box
+      sx={{
+        p: 2,
+      }}>
+      {colorKeys.map((colorKey, index) => {
+        const colorValue = colors[colorKey];
+        let colorArray;
+        // 考虑 2 层颜色
+        if (typeof colorValue === 'object') {
+          colorArray = Object.keys(colorValue).map((item) => ({
+            name: `${prefix ? `${prefix}.` : ''}${colorKey}.${item}`,
+            value: colorValue[item],
+          }));
+        } else {
+          colorArray = [{ name: `${prefix ? `${prefix}.` : ''}${colorKey}`, value: colorValue }];
+        }
+
+        // 过滤不是 color 的值
+        colorArray = colorArray.filter(
+          (item) => typeof item.value === 'string' && (item.value.startsWith('#') || item.value.startsWith('rgb'))
+        );
+
+        if (colorArray.length === 0) {
+          return null;
+        }
+
+        return (
+          <Box
+            key={index}
+            style={{ borderBottom: '1px solid #ddd' }}
+            sx={{
+              p: 2,
+            }}>
+            {colorDescriptions[colorKey] && (
+              <Box
+                style={{ borderLeft: '2px solid #bbb' }}
+                sx={{
+                  color: 'grey.700',
+                  fontSize: 16,
+                  m: 1,
+                  pl: 1,
+                }}>
+                {colorDescriptions[colorKey]}
+              </Box>
+            )}
+            <Box
+              sx={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+              }}>
+              {colorArray.map(({ name, value }) => (
+                <Box
+                  key={name}
+                  sx={{
+                    display: 'flex',
+                    width: itemWidth,
+                    m: 1,
+                  }}>
+                  <Box
+                    sx={{
+                      flexShrink: 0,
+                      width: 40,
+                      height: 40,
+                      bgcolor: value,
+                      boxShadow: 1,
+                    }}
+                  />
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      ml: 1,
+                      fontSize: 14,
+                      color: '#999',
+                    }}>
+                    <Box>{name}</Box>
+                    <Box>{value}</Box>
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+ColorsViewer.propTypes = {
+  colors: PropTypes.object.isRequired,
+  prefix: PropTypes.string,
+  itemWidth: PropTypes.number,
+};
+
+export default {
+  title: 'Theme/Colors',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A collection of common colors that are compatible with the Material UI theme palette.',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=740%3A1506',
+    },
+  },
+};
+
+export function DefaultAbtColors() {
+  return <ColorsViewer colors={colors} />;
+}
+
+DefaultAbtColors.storyName = 'default (ABT colors)';
+
+export function MuiThemePalette() {
+  const _muiTheme = createTheme();
+  return <ColorsViewer colors={_muiTheme.palette} />;
+}
+
+MuiThemePalette.storyName = 'mui theme#palette';
+
+export function ColorsStyledComponents() {
+  return (
+    <StyledComponentTestBox>
+      <pre>{`
+          const StyledComponentTestBox = styled('div')\`
+            padding: 16px;
+            background-color: \${colors.success.main};
+          \`;
+        `}</pre>
+    </StyledComponentTestBox>
+  );
+}
+
+ColorsStyledComponents.storyName = 'colors & styled-components';
+
+export function MuiThemeBoxButton() {
+  const _muiTheme = createTheme();
+  return (
+    <ThemeProvider theme={_muiTheme}>
+      <Box
+        sx={{
+          m: 1,
+        }}>
+        <Button variant="contained" color="primary">
+          Button[color="primary"]
+        </Button>
+      </Box>
+      <Box
+        sx={{
+          m: 1,
+        }}>
+        <Button variant="contained" color="secondary">
+          Button[color="secondary"]
+        </Button>
+      </Box>
+      <Box
+        variant="contained"
+        sx={{
+          bgcolor: 'warning.main',
+          m: 1,
+          p: 1,
+        }}>
+        Box[bgcolor="warning.main"]
+      </Box>
+      <Box
+        variant="contained"
+        sx={{
+          bgcolor: 'error.light',
+          m: 1,
+          p: 1,
+        }}>
+        Box[bgcolor="error.light"]
+      </Box>
+    </ThemeProvider>
+  );
+}
+
+MuiThemeBoxButton.storyName = 'mui theme & Box/Button';
+
+const StyledComponentTestBox = styled('div')`
+  padding: 16px;
+  background-color: ${colors.success.main};
+`;

package/src/Colors/themes/did-connect.ts

@@ -1,5 +1,3 @@
-import type { Theme } from '@mui/material';
-
 /**
  * @deprecated 请使用 MUI theme 对象替代
  */

package/src/Config/Config.stories.jsx

@@ -0,0 +1,16 @@
+import SwitchMode from './demo/switch-mode';
+import NestedColorScheme from './demo/nested-color-scheme';
+
+export default {
+  title: 'Theme/Config',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'Config is used to configure the theme and locale of the application.',
+      },
+    },
+  },
+};
+
+export { SwitchMode, NestedColorScheme };

package/src/Config/theme-mode-toggle.tsx

@@ -1,6 +1,8 @@
 import { IconButton } from '@mui/material';
-import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
-import Brightness2OutlinedIcon from '@mui/icons-material/Brightness2Outlined';
+import {
+  LightModeOutlined as LightModeOutlinedIcon,
+  Brightness2Outlined as Brightness2OutlinedIcon,
+} from '@mui/icons-material';
 import { useColorScheme } from '../Theme/theme-provider';
 
 export default function ThemeModeToggle() {

package/src/ContactForm/ContactForm.stories.jsx

@@ -0,0 +1,32 @@
+import ContactForm from '.';
+import withTheme from '../withTheme';
+
+const ThemedContactForm = withTheme(ContactForm);
+
+export default {
+  title: 'Deprecated/ContactForm',
+};
+
+export function VerticalLayout() {
+  return <ThemedContactForm />;
+}
+
+VerticalLayout.storyName = 'vertical layout';
+
+export function HorizontalLayout() {
+  return <ThemedContactForm layout="horizontal" />;
+}
+
+HorizontalLayout.storyName = 'horizontal layout';
+
+export function WithoutTitle() {
+  return <ThemedContactForm layout="vertical" title="" />;
+}
+
+WithoutTitle.storyName = 'without title';
+
+export function CustomizeFields() {
+  return <ThemedContactForm layout="horizontal" fields={['Email', 'Name']} />;
+}
+
+CustomizeFields.storyName = 'customize fields';

package/src/ContactForm/index.tsx

@@ -2,8 +2,7 @@
 /* eslint-disable react/static-property-placement */
 import React from 'react';
 import axios from 'axios';
-import Typography from '@mui/material/Typography';
-import CircularProgress from '@mui/material/CircularProgress';
+import { Typography, CircularProgress } from '@mui/material';
 
 import { mergeProps } from '../Util';
 import { warn as deprecatedWarn } from '../Util/deprecate';
@@ -31,6 +30,7 @@ export function submitContactForm(
 }
 
 export interface ContactFormProps extends React.HTMLAttributes<HTMLFormElement> {
+  className?: string;
   portalId?: string;
   formId?: string;
   title?: string;

package/src/CookieConsent/CookieConsent.stories.jsx

@@ -0,0 +1,33 @@
+import { Box } from '@mui/material';
+import { ThemeModeToggle } from '../Config';
+import { ThemeProvider } from '../Theme';
+
+export { default as Basic } from './demo/basic';
+export { default as CustomButtonText } from './demo/custom-button-text';
+export { default as CustomStyles } from './demo/custom-styles';
+export { default as I18N } from './demo/i18n';
+
+export default {
+  title: 'Basic/CookieConsent',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'CookieConsent is used to alert users about the use of cookies on your website.',
+      },
+      inlineStories: false,
+      iframeHeight: 400,
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <ThemeProvider prefer="system">
+        <Box sx={{ mb: 1 }}>
+          <ThemeModeToggle />
+        </Box>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};

package/src/CookieConsent/index.tsx

@@ -1,4 +1,4 @@
-import Button, { type ButtonProps } from '@mui/material/Button';
+import { Button, type ButtonProps } from '@mui/material';
 import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
 
 import { styled } from '../Theme';

package/src/CountDown/CountDown.stories.jsx

@@ -0,0 +1,15 @@
+export { default as LightMode } from './demo/light-mode';
+export { default as DarkMode } from './demo/dark-mode';
+export { default as CustomStyle } from './demo/custom-style';
+
+export default {
+  title: 'Basic/CountDown',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'CountDown is used to display a countdown clock on your page',
+      },
+    },
+  },
+};

package/src/CountDown/index.tsx

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import { type SxProps } from '@mui/material';
+import isUndefined from 'lodash/isUndefined';
 
 import { getColor, mergeProps } from '../Util';
 import { styled } from '../Theme';
@@ -44,7 +45,9 @@ function FixWidthNumber({ number, label, length = 2 }: { number: number; label:
 export interface CountDownProps extends React.HTMLAttributes<HTMLDivElement> {
   /** endTime should be UTC */
   endTime: number;
+  // eslint-disable-next-line react/require-default-props
   dark?: true | false;
+  // eslint-disable-next-line react/require-default-props
   sx?: SxProps;
 }
 
@@ -62,7 +65,14 @@ export default class CountDown extends Component<CountDownProps, CountDownState>
 
   timer?: NodeJS.Timeout;
 
-  constructor(props: CountDownProps) {
+  constructor(rawProps: CountDownProps) {
+    const props = Object.assign({}, rawProps);
+    if (isUndefined(props.dark)) {
+      props.dark = true;
+    }
+    if (isUndefined(props.style)) {
+      props.style = {};
+    }
     super(props);
     const newProps = mergeProps(props, CountDown, ['dark', 'endTime', 'style']);
     this.state = getRemaining(newProps.endTime);
@@ -105,11 +115,6 @@ export default class CountDown extends Component<CountDownProps, CountDownState>
   }
 }
 
-CountDown.defaultProps = {
-  dark: true,
-  style: {},
-};
-
 const textBackground = `linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
 linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 77%, rgba(0, 0, 0, 0.5))`;
 

package/src/DID/DID.stories.jsx

@@ -0,0 +1,37 @@
+import { styled } from '../Theme';
+
+export { default as ActionTest } from './demo/action-test';
+export { default as WithDifferentSizes } from './demo/with-different-sizes';
+export { default as WithDifferentColors } from './demo/with-different-colors';
+export { default as WithChainId } from './demo/with-chainId';
+export { default as WithRoleType } from './demo/with-roleType';
+export { default as OnlyDialog } from './demo/only-dialog';
+export { default as WithFlexBox } from './demo/with-flex-box';
+export { default as InlineMode } from './demo/inline-mode';
+export { default as DIDWithPrefix } from './demo/did-with-prefix';
+
+export default {
+  title: 'DID/DID',
+  parameters: {},
+  decorators: [
+    (StoryFn) => (
+      <ResizableContainer>
+        <StoryFn />
+      </ResizableContainer>
+    ),
+  ],
+};
+
+const ResizableContainer = styled('div')`
+  width: 100%;
+  max-width: 100%;
+  padding: 16px;
+  border: 1px solid #ddd;
+  overflow: auto;
+  background: #fff;
+  resize: both;
+
+  > * + * {
+    margin-top: 16px;
+  }
+`;

package/src/DID/index.tsx

@@ -5,7 +5,7 @@ import { Icon } from '@iconify/react';
 import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
 import { Box, Dialog, DialogContent, ModalProps, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
 import { toAddress } from '@arcblock/did';
 
 import Address, { IDidAddressWrapper } from '../Address';
@@ -136,7 +136,12 @@ export interface HTMLDIDElement extends HTMLDidAddressElement {
   closeQRCode: () => void;
 }
 
-export const DID = forwardRef<HTMLDIDElement, DIDProps>((props, ref) => {
+export function DID({
+  ref,
+  ...props
+}: DIDProps & {
+  ref?: React.Ref<unknown>;
+}) {
   const {
     did: didAddress,
     chainId,
@@ -244,7 +249,7 @@ export const DID = forwardRef<HTMLDIDElement, DIDProps>((props, ref) => {
       />
     </>
   );
-});
+}
 
 export interface DIDDialogProps extends DIDProps {
   // DialogProps

package/src/DIDConnect/app-info-item.tsx

@@ -1,10 +1,10 @@
-import { Box, IconButton, SxProps, Tooltip, useMediaQuery } from '@mui/material';
+import { Box, IconButton, SxProps, Tooltip } from '@mui/material';
 import CheckIcon from '@iconify-icons/material-symbols/check';
 import { Icon } from '@iconify/react';
 import { useCreation, useSize } from 'ahooks';
 import { useRef } from 'react';
 
-import DID from '../DID';
+import { DID } from '../DID';
 import { mergeSx } from '../Util/style';
 import AppIcon from './app-icon';
 import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';

package/src/DIDConnect/did-connect-container.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { useBrowser } from '@arcblock/react-hooks';
 import { Backdrop, Box, Dialog, DialogContent, Drawer, SwipeableDrawer, SxProps, useMediaQuery } from '@mui/material';
 import { useCreation, useDebounce } from 'ahooks';
@@ -11,23 +11,22 @@ import { mergeSx } from '../Util/style';
 import { getDIDColor, hexToRgba, isEthereumDid } from '../Util';
 import DIDConnectFooter from './did-connect-footer';
 
-const BackdropWrap = memo(
-  forwardRef((backdropProps, ref) => {
-    return (
-      <Backdrop
-        open
-        ref={ref}
-        style={{
-          backgroundColor: 'rgba(0, 0, 0, 0.6)',
-          backdropFilter: 'blur(3px)',
-          touchAction: 'none',
-        }}
-        {...backdropProps}
-        key="background"
-      />
-    );
-  })
-);
+// eslint-disable-next-line react/require-default-props
+const BackdropWrap = memo(({ ref, ...backdropProps }: { ref?: React.Ref<unknown> }) => {
+  return (
+    <Backdrop
+      open
+      ref={ref}
+      style={{
+        backgroundColor: 'rgba(0, 0, 0, 0.6)',
+        backdropFilter: 'blur(3px)',
+        touchAction: 'none',
+      }}
+      {...backdropProps}
+      key="background"
+    />
+  );
+});
 
 export default function DIDConnectContainer({
   open = false,